/* Real-app additions layered on top of the prototype stylesheet. */
.svg-sprite { position: absolute; }

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
  flex: none;
}

.chart .axis-label {
  fill: var(--muted);
  font-size: 10px;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}

.swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  flex: none;
}

.tier-bar .swatch { height: 100%; border-radius: 0; flex: none; }
.tier-bar span { display: block; height: 100%; }

.swatch-easy { background: var(--tier-easy); }
.swatch-lower_medium { background: var(--tier-lower_medium); }
.swatch-upper_medium { background: var(--tier-upper_medium); }
.swatch-hard { background: var(--tier-hard); }

.qr-image { display: block; width: 100%; height: auto; }
.qr-frame img { width: 100%; height: auto; display: block; }
.copy-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.key-reveal { border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--rule)); border-radius: 3px; padding: 14px 16px; background: var(--accent-soft); }
.key-reveal code { display: block; margin-top: 8px; word-break: break-all; font-family: var(--mono); font-size: 13px; }

.legal { max-width: 76ch; }
.legal h2 { font-size: 15px; margin: 26px 0 6px; font-weight: 640; }
.legal p { color: var(--ink-2); font-size: 13.5px; line-height: 1.65; margin: 0 0 8px; }
.legal .meta { color: var(--muted); font-size: 12.5px; }

.admin-form { display: grid; gap: 10px; grid-template-columns: 190px 1fr auto; align-items: end; }
@media (max-width: 760px) { .admin-form { grid-template-columns: 1fr; } }

.settings-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .settings-grid { grid-template-columns: 1fr; } }

.topup-plan-form { display: contents; }
.plan button { all: unset; display: block; width: 100%; cursor: pointer; }