/* =====================================================================
   gvoic.es admin + supplier dashboard — premium dark theme.
   100% self-hosted. No external fonts/CDNs. No inline styles or scripts
   anywhere (strict CSP: default-src 'self'). One file, fast to parse.
   ===================================================================== */

:root {
  /* ── Surfaces / background ── */
  --bg: #090a0f;
  --bg-tint: #11121b;
  --surface: #14151d;
  --surface-2: #191b25;
  --surface-3: #20222e;
  --sidebar-bg: #0b0c11;

  /* ── Borders (hairline, premium) ── */
  --border: rgba(255, 255, 255, 0.075);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.045);

  /* ── Text ── */
  --text: #e9ebf2;
  --text-dim: #9ba1af;
  --text-mute: #687085;

  /* ── Brand + accents ── */
  --primary: #7a6cff;
  --primary-strong: #8d80ff;
  --primary-ink: #ffffff;
  --primary-soft: rgba(122, 108, 255, 0.15);
  --primary-line: rgba(122, 108, 255, 0.45);
  --primary-glow: rgba(122, 108, 255, 0.30);

  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.13);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.13);
  --red: #fb7185;
  --red-soft: rgba(251, 113, 133, 0.14);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.14);

  /* ── Radius ── */
  --r-xs: 7px;
  --r-sm: 9px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow: 0 8px 28px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --ring: 0 0 0 3px var(--primary-soft);

  --sidebar-w: 252px;

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Neutral chrome for the admin + supplier panels. The storefront's deep-green
   fallback (BEHIND the public background canvas — overscroll/no-JS) is scoped to
   public pages only via :has; older browsers just keep the neutral overscroll. */
html { background: var(--bg); }
html:has(body.public) { background: #04140d; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: 0.05px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Storefront wallpaper tints — customer-facing pages ONLY (public_base.html sets
   body.public). The /admin and /supplier panels stay on the clean neutral --bg. */
body.public {
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(122, 108, 255, 0.10), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(96, 165, 250, 0.05), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }

/* Accessible focus rings everywhere. */
:focus-visible {
  outline: 2px solid var(--primary-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Utilities ──────────────────────────────────────────────── */
.muted { color: var(--text-dim); }
.sm { font-size: 12.5px; }
.strong { font-weight: 650; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.neg { color: var(--red); }
.pos { color: var(--green); }
.ellipsis { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-ligatures: none; }
.link { color: var(--primary-strong); transition: color .15s ease; }
.link:hover { color: #b6abff; text-decoration: underline; text-underline-offset: 2px; }
.link.sm { font-size: 12.5px; }

/* Inline icons inherit colour + scale with text. */
.ico { width: 1.18em; height: 1.18em; flex: 0 0 auto; display: inline-block; vertical-align: -0.18em; }

/* Skip link (a11y). */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 200;
  background: var(--primary); color: #fff; padding: 10px 14px;
  border-radius: var(--r-sm); font-weight: 600; font-size: 13px;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* ── Layout ─────────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }
.layout-supplier { --sidebar-w: 214px; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, #0d0e14, var(--sidebar-bg));
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 20px; }
.brand-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(145deg, var(--primary-strong), var(--primary));
  color: #fff;
  box-shadow: 0 6px 18px -4px var(--primary-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-mark.lg { width: 48px; height: 48px; border-radius: 13px; }
.brand-mark.lg svg { width: 26px; height: 26px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-name { font-weight: 700; letter-spacing: -.2px; font-size: 15px; }
.brand-kicker { font-size: 11px; color: var(--text-mute); font-weight: 500; letter-spacing: .2px; }

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-sm);
  color: var(--text-dim); font-weight: 500; font-size: 13.8px;
  position: relative;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active {
  background: var(--primary-soft);
  color: #cfc9ff;
  box-shadow: inset 0 0 0 1px var(--primary-line);
}
.nav-link.active::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--primary-strong);
}
.nav-ico { display: inline-grid; place-items: center; color: currentColor; opacity: .92; }
.nav-ico .ico { width: 18px; height: 18px; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-foot { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid var(--border-soft); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 28px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.page-title { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -.2px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.user-chip, .admin-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 12.5px; font-weight: 550;
  max-width: 220px;
}
.user-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .dot, .admin-chip .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft); flex: none;
}

.content { padding: 26px 28px 72px; max-width: 1200px; width: 100%; }

.menu-btn { display: none; }
.icon-btn {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--surface-3); }
.scrim { display: none; }

/* ── Page header (in-content) ───────────────────────────────── */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.page-eyebrow {
  font-size: 11.5px; font-weight: 650; letter-spacing: .8px; text-transform: uppercase;
  color: var(--primary-strong); margin-bottom: 6px;
}
.page-h1 { font-size: 23px; font-weight: 700; margin: 0; letter-spacing: -.5px; }
.page-sub { margin: 5px 0 0; color: var(--text-dim); font-size: 13.5px; max-width: 62ch; }
.page-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Cards & sections ───────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 92%, #000));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card-title { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -.2px; }
.card-meta { color: var(--text-dim); font-size: 12.5px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

/* ── Empty states ───────────────────────────────────────────── */
.empty { color: var(--text-mute); padding: 20px 4px; text-align: center; }
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 38px 18px; text-align: center; color: var(--text-mute);
}
.empty-ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
}
.empty-ico .ico { width: 24px; height: 24px; }
.empty-msg { margin: 0; font-size: 13.5px; }

/* ── Stat cards ─────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.stat-card {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 90%, #000));
  border: 1px solid var(--border);
  border-radius: var(--r); padding: 17px 18px; position: relative; overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.stat-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.stat-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--primary); opacity: .9;
}
.stat-card.accent-green::before { background: var(--green); }
.stat-card.accent-amber::before { background: var(--amber); }
.stat-card.accent-info::before { background: var(--info); }
.stat-card.accent-danger::before { background: var(--red); }
.stat-label { color: var(--text-dim); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.stat-value { font-size: 25px; font-weight: 750; margin-top: 7px; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.stat-sub { color: var(--text-mute); font-size: 12px; margin-top: 3px; }

/* ── Chart (pure-CSS bars) ──────────────────────────────────── */
.chart { display: flex; align-items: flex-end; gap: 8px; height: 172px; padding-top: 6px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; min-width: 0; }
.bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bar-fill {
  width: 100%; border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, var(--primary-strong), var(--primary));
  box-shadow: 0 0 18px -6px var(--primary-glow);
  transition: height .3s ease, filter .15s ease; min-height: 2px;
}
.chart-col:hover .bar-fill { filter: brightness(1.2); }
.bar-fill.empty { background: var(--surface-3); box-shadow: none; min-height: 2px; }
.bar-label { color: var(--text-mute); font-size: 10.5px; white-space: nowrap; }

.bh-0 { height: 0; } .bh-5 { height: 5%; } .bh-10 { height: 10%; } .bh-15 { height: 15%; }
.bh-20 { height: 20%; } .bh-25 { height: 25%; } .bh-30 { height: 30%; } .bh-35 { height: 35%; }
.bh-40 { height: 40%; } .bh-45 { height: 45%; } .bh-50 { height: 50%; } .bh-55 { height: 55%; }
.bh-60 { height: 60%; } .bh-65 { height: 65%; } .bh-70 { height: 70%; } .bh-75 { height: 75%; }
.bh-80 { height: 80%; } .bh-85 { height: 85%; } .bh-90 { height: 90%; } .bh-95 { height: 95%; }
.bh-100 { height: 100%; }

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 0 -6px; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table thead th {
  text-align: left; color: var(--text-mute); font-weight: 650; font-size: 11px;
  text-transform: uppercase; letter-spacing: .6px;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
}
.table tbody td { padding: 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover td { background: rgba(255, 255, 255, 0.022); }
.table tbody tr:last-child td { border-bottom: 0; }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table th.right, .table td.right { text-align: right; }
/* Payout log: copyable address/tx + explorer link, kept on one tidy line */
.tx-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tx-cell code { font-size: 12px; }
.tx-cell .btn { padding: 2px 8px; font-size: 11px; line-height: 1.4; }
.emoji-cell { font-size: 18px; width: 38px; text-align: center; }

.detail-row td { background: var(--bg-tint); padding: 0 12px; }
.detail-row[hidden] { display: none; }
.detail-row .manage-grid { padding: 20px 6px; }

/* ── Badges & pills ─────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
  background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border);
}
.badge-ok { background: var(--green-soft); color: #7ff0c0; border-color: transparent; }
.badge-warn { background: var(--amber-soft); color: #f8cd6f; border-color: transparent; }
.badge-danger { background: var(--red-soft); color: #ffa0ae; border-color: transparent; }
.badge-info { background: var(--info-soft); color: #9ccbff; border-color: transparent; }
.badge-muted { background: var(--surface-3); color: var(--text-dim); border-color: var(--border); }

.pill {
  cursor: pointer; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; font-weight: 600; font-family: inherit;
  transition: filter .15s ease, background .15s ease;
}
.pill-on { background: var(--green-soft); color: #7ff0c0; border-color: transparent; }
.pill-off { background: var(--surface-3); color: var(--text-mute); }
.pill:hover { filter: brightness(1.14); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  /* Explicit line-height so a link styled as a button (.btn on <a>) and a real <button>
     (whose UA line-height is `normal`) are EXACTLY the same height — otherwise links sit
     ~4px taller. Keeps every button row perfectly uniform. */
  line-height: 1.2;
  transition: transform .04s ease, background .15s ease, border-color .15s ease, filter .15s ease, box-shadow .15s ease;
  white-space: nowrap; user-select: none;
}
.btn .ico { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: var(--r-xs); }
.btn-block { width: 100%; }
.btn-primary {
  background: linear-gradient(180deg, var(--primary-strong), var(--primary));
  color: var(--primary-ink);
  box-shadow: 0 6px 18px -8px var(--primary-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.btn-primary:hover { filter: brightness(1.07); box-shadow: 0 8px 24px -8px var(--primary-glow); }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn-danger { background: var(--red-soft); color: #ffa3b0; border-color: transparent; }
.btn-danger:hover { background: rgba(251, 113, 133, 0.24); }
.btn-warn { background: var(--amber-soft); color: #f8cd6f; border-color: transparent; }
.btn-warn:hover { background: rgba(251, 191, 36, 0.24); }
.btn.disabled, .btn:disabled, .btn[disabled] { opacity: .45; pointer-events: none; }
.btn.is-loading { pointer-events: none; opacity: .8; position: relative; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Forms ──────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.field-help { font-size: 11.5px; color: var(--text-mute); }
.input {
  background: var(--bg-tint); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-sm); padding: 9px 12px; font-family: inherit; font-size: 13.5px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder { color: var(--text-mute); }
.input:hover { border-color: var(--border-strong); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); background: var(--bg); }
select.input { appearance: none; cursor: pointer; }
textarea.input { resize: vertical; min-height: 72px; }
textarea.mono { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }

.grid-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.grid-form .field.sm { flex: 0 0 130px; }
.grid-form .field.grow { flex: 1 1 220px; }
.grid-form .field.end { display: flex; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.gap { gap: 10px; }
.row .field { flex: 1; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); padding-bottom: 9px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--primary); }
.inline { display: inline; }

.manage-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; }
.manage-block { display: flex; flex-direction: column; gap: 12px; }
.block-title { font-size: 12px; font-weight: 700; color: var(--text-dim); margin: 0; text-transform: uppercase; letter-spacing: .5px; }
.danger-zone { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--border-strong); }

.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.toggles { margin-top: 4px; }
.stock-tags { margin-bottom: 16px; }

.searchbar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.searchbar .input { flex: 1; min-width: 200px; }

/* ── Key/value list ─────────────────────────────────────────── */
.kv { display: flex; flex-direction: column; gap: 0; margin: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--text-dim); font-size: 13px; margin: 0; }
.kv dd { margin: 0; text-align: right; }

/* ── Misc components ────────────────────────────────────────── */
.crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13.5px; color: var(--text-dim); }

.tabs { display: flex; gap: 6px; }
.tab { padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); border: 1px solid var(--border); background: var(--surface-2); }
.tab:hover { color: var(--text); }
.tab.active { background: var(--primary-soft); color: #cfc9ff; border-color: var(--primary-line); }

.lowstock { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lowstock li { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); }
.lowstock li:last-child { border-bottom: 0; }
.ls-name { flex: 1; font-weight: 500; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }

.reveal-row td { background: #0f1118; }
.reveal-box { display: flex; align-items: center; gap: 12px; padding: 11px 12px; flex-wrap: wrap; }
.reveal-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--amber); font-weight: 700; }
.reveal-code { font-family: var(--mono); font-size: 13px; color: #ffe8c2; word-break: break-all; background: rgba(251, 191, 36, .08); padding: 6px 10px; border-radius: var(--r-xs); }

.callout {
  background: var(--info-soft); border: 1px solid transparent; border-left: 3px solid var(--info);
  border-radius: var(--r-sm); padding: 12px 15px; margin-bottom: 16px; color: #c2deff; font-size: 13px;
}
.callout.callout-warn { background: var(--amber-soft); border-left-color: var(--amber); color: #f6d6a0; }
.callout code { background: rgba(0, 0, 0, .28); padding: 1px 6px; border-radius: 5px; font-family: var(--mono); }

/* ── Flash messages ─────────────────────────────────────────── */
.flashes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.flash {
  display: flex; align-items: center; gap: 12px; padding: 12px 15px;
  border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-2);
  font-size: 13.5px; animation: flash-in .25s ease; box-shadow: var(--shadow-sm);
}
.flash-msg { flex: 1; }
.flash-success { background: var(--green-soft); border-color: transparent; color: #b6f3d6; }
.flash-error { background: var(--red-soft); border-color: transparent; color: #ffc0c9; }
.flash-info { background: var(--info-soft); border-color: transparent; color: #c6e0ff; }
.flash-warning { background: var(--amber-soft); border-color: transparent; color: #f9dca8; }
.flash-x { background: none; border: 0; color: inherit; font-size: 19px; cursor: pointer; opacity: .55; line-height: 1; padding: 0 2px; }
.flash-x:hover { opacity: 1; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── Auth (login / error) ───────────────────────────────────── */
.auth-shell {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(700px 380px at 50% -8%, rgba(122, 108, 255, 0.16), transparent 62%),
    transparent;
}
.auth-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-xl); padding: 30px;
  box-shadow: var(--shadow-lg);
}
.auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.auth-brand-name { font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.auth-form { display: flex; flex-direction: column; gap: 15px; }
.auth-foot { margin: 20px 0 0; font-size: 12px; text-align: center; }
.auth-hint {
  margin: 0 0 20px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-dim);
}
.auth-hint code { font-family: var(--mono); color: var(--text); background: var(--bg-tint); padding: 1px 6px; border-radius: 5px; }
.error-card { text-align: center; }
.error-code { font-size: 52px; font-weight: 800; color: var(--primary-strong); letter-spacing: -1.5px; line-height: 1; }
.error-title { margin: 10px 0 8px; font-size: 18px; }
.error-card .btn { margin-top: 18px; }
.code-input { letter-spacing: .32em; text-transform: uppercase; font-family: var(--mono); text-align: center; font-size: 17px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .manage-grid { grid-template-columns: 1fr; }
  .action-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .menu-btn { display: inline-grid; }
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
  }
  #layout.sidebar-open .sidebar { transform: translateX(0); }
  #layout.sidebar-open .scrim {
    display: block; position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(2px);
  }
  .content { padding: 20px 16px 60px; }
  .topbar { padding: 12px 16px; }
  .page-h1 { font-size: 20px; }
}
@media (max-width: 440px) {
  .stat-grid { grid-template-columns: 1fr; }
  .user-chip-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── View-transition fade (shared timing) ───────────────────────────────────── */
/* Styles BOTH transition kinds: the same-document content swaps app.js performs on
   seamless navigation, and the cross-document fades viewnav.css opts in to for the
   remaining full loads. A quick, soft fade: short enough to read as "instant", long
   enough to never feel like a flash. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .18s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* Honour reduced-motion: snap straight to the new content, no fade. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ── Interactive background canvas (PUBLIC storefront ONLY) ─────────────────── */
/* Fixed, full-viewport, BEHIND the content (z-index:-1) — the admin-selected background
   script (/static/bg/<bg_style>.js) draws into it. body.public is transparent (below) so
   this shows; <html> holds the dark-green fallback behind it. The background scripts set
   their own canvas styles too; this base just guarantees correct full-screen layout +
   an on-brand dark fill BEFORE the (deferred) script's synchronous first paint, so there
   is never a white/unstyled flash. Admin + supplier panels omit the canvas entirely. */
#bg-canvas{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:-1; background:#04140d; }

/* The public shell sits ABOVE the wallpaper. A position:fixed z-index:0 canvas would
   otherwise paint over static, in-flow content, so it gets its own stacking context. */
.public-shell{ position:relative; z-index:1; }

/* ── Public storefront theme ─────────────────────────────────────────── */
:root{
  --brand:#35a657; --brand-strong:#3fbf66;
  --brand-soft:rgba(53,166,87,0.16); --brand-line:rgba(53,166,87,0.45);
}
body.public{ background:transparent; }   /* transparent so the z-index:-1 bg canvas shows */

.public-shell{
  display:flex; flex-direction:column; min-height:100vh;
  max-width:1080px; margin:0 auto; padding:22px clamp(18px,4vw,40px) 28px;
}
.public-header{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; }
.public-brand{ display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:-0.01em; }
.public-brand .brand-mark{ display:inline-flex; color:var(--brand); }
.public-brand .brand-mark svg{ width:24px; height:24px; }
.public-brand-name{ font-size:1.4rem; }
.public-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.public-main{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:40px; padding:48px 0; }

/* ── Landing: hero owns the first screen; the reviews wall peeks below the fold ──
   .public-main normally vertically-centres its single child. On the landing we pin the
   content to the top and give the hero a near-viewport min-height, so the hero stays the
   clear centre of focus and only a glimpse of reviews shows until you scroll down. */
.public-main:has(.landing.has-reviews){ justify-content:flex-start; gap:0; padding-top:clamp(16px,4vh,40px); }
.landing{ width:100%; display:flex; flex-direction:column; }
.landing.has-reviews .hero{
  min-height:calc(100vh - 220px);   /* fallback for browsers without svh */
  min-height:calc(100svh - 220px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.landing.has-reviews .reviews{ margin-top:clamp(12px,3vh,28px); padding-bottom:48px; scroll-margin-top:80px; }

/* Quiet "scroll for reviews" cue at the foot of the hero — invites the scroll without
   stealing focus from the hero. */
.scroll-cue{ display:inline-flex; flex-direction:column; align-items:center; gap:5px;
  margin-top:clamp(28px,7vh,72px); color:var(--text-dim); font-weight:600; font-size:0.86rem; }
.scroll-cue:hover{ color:var(--text); }
.scroll-cue-arrow{ font-size:1.1rem; line-height:1; animation:scroll-bob 1.8s ease-in-out infinite; }
@keyframes scroll-bob{ 0%,100%{ transform:translateY(0); opacity:.6; } 50%{ transform:translateY(4px); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .scroll-cue-arrow{ animation:none; } }

.hero{ text-align:center; max-width:720px; margin:0 auto; }
.hero-kicker{ text-transform:uppercase; letter-spacing:0.14em; font-size:0.72rem; font-weight:700; color:var(--brand-strong); margin:0 0 14px; }
.hero-title{
  font-size:clamp(2.4rem,7vw,4.2rem); line-height:1.14; margin:0 0 18px; padding-bottom:0.08em;
  font-weight:800; letter-spacing:-0.03em;
  background:linear-gradient(180deg,#ffffff,#b9f2cd); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ font-size:clamp(1.02rem,2.4vw,1.25rem); color:var(--text-dim); margin:0 auto 28px; max-width:560px; line-height:1.5; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; }

.btn-lg{ padding:13px 26px; font-size:1.02rem; border-radius:var(--r-lg); }
.btn-brand{ background:var(--brand); color:#04140d; border:1px solid transparent; font-weight:700; }
.btn-brand:hover{ background:var(--brand-strong); color:#04140d; }

.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.feature{
  background:rgba(20,21,29,0.55); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:20px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.feature-title{ font-weight:700; margin-bottom:7px; color:var(--text); }
.feature-text{ color:var(--text-dim); font-size:0.92rem; line-height:1.5; margin:0; }

.public-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:22px; border-top:1px solid var(--border-soft); }

/* Telegram Login Widget slot + signed-in account page */
.tg-login{ display:inline-flex; min-height:40px; align-items:center; }
.account{ max-width:640px; margin:0 auto; width:100%; }
.account-title{ font-size:clamp(1.8rem,4vw,2.6rem); margin:0 0 8px; font-weight:800; letter-spacing:-0.02em; }
.account-sub{ margin:0 0 24px; }
.account-card{
  background:rgba(20,21,29,0.6); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:22px; margin-bottom:22px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.account-balance{ display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.account-balance-amt{ font-size:2.1rem; font-weight:800; color:var(--brand-strong); letter-spacing:-0.02em; }
.account-coins{ margin-top:6px; }
.account .hero-cta{ justify-content:flex-start; }
.account-h2{ font-size:1.1rem; font-weight:700; margin:0 0 4px; }
.addr-row{ display:flex; flex-direction:column; gap:2px; padding:10px 0; border-top:1px solid var(--border-soft); }
.addr-row:first-of-type{ border-top:none; }
.addr-coin{ font-weight:600; font-size:0.9rem; }
.addr-val{ font-family:var(--mono); font-size:0.82rem; color:var(--text-dim); overflow-wrap:anywhere; }
.orders-list{ display:flex; flex-direction:column; }
.order-item{ border-top:1px solid var(--border-soft); padding:14px 0; }
.order-item:first-child{ border-top:none; padding-top:0; }
.order-head{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.order-name{ font-weight:600; }
.order-total{ font-weight:700; white-space:nowrap; }
.order-meta{ margin-top:2px; }
.review-edit{ margin-top:10px; }
.review-edit summary{ cursor:pointer; color:var(--brand-strong); font-size:0.88rem; font-weight:600; list-style:none; }
.review-edit summary::-webkit-details-marker{ display:none; }
.review-form{ margin-top:12px; max-width:420px; }

/* "Shown publicly as …" hint under the account review form — swapped live by the
   anonymous checkbox's :checked state (no JS), so the buyer always sees the result. */
.review-as{ margin:2px 0 2px; }
.review-as .as-anon{ display:none; }
.t-form .check:has(input:checked) ~ .review-as .as-name{ display:none; }
.t-form .check:has(input:checked) ~ .review-as .as-anon{ display:inline; }

/* Public reviews wall (bottom of the landing page) */
.reviews{ max-width:1080px; margin:0 auto; width:100%; }
.reviews-head{ text-align:center; margin-bottom:24px; }
.reviews-title{ font-size:clamp(1.5rem,3.5vw,2.1rem); font-weight:800; letter-spacing:-0.02em; margin:0 0 8px; }
.reviews-meta{ color:var(--text-dim); margin:0; display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
.reviews-avg{ color:#ffd24a; letter-spacing:2px; }
.reviews-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.review{
  background:rgba(20,21,29,0.55); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:18px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:flex; flex-direction:column;
}
.review-stars{ color:#ffd24a; letter-spacing:2px; font-size:0.95rem; margin-bottom:8px; }
.review-body{ color:var(--text); font-size:0.95rem; line-height:1.5; margin:0 0 12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.review-author{ color:var(--text-dim); font-size:0.85rem; font-weight:600; margin-top:auto; }

/* Admin reviews helpers */
.stars-gold{ color:#ffd24a; letter-spacing:1px; white-space:nowrap; }

/* Analytics conversion funnel */
.funnel{ display:flex; flex-direction:column; }
.fn-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--border-soft); }
.fn-row:first-child{ border-top:none; }
.fn-label{ flex:1; }
.fn-n{ font-weight:700; font-variant-numeric:tabular-nums; }
.fn-pct{ width:64px; text-align:right; color:var(--brand-strong); font-variant-numeric:tabular-nums; }
.check{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.check input{ width:16px; height:16px; accent-color:var(--primary); }

/* "or — Sign in with Telegram" on the admin/supplier login cards */
.auth-or{ display:flex; align-items:center; text-align:center; color:var(--text-mute); font-size:0.8rem; margin:16px 0 14px; }
.auth-or::before, .auth-or::after{ content:""; flex:1; height:1px; background:var(--border); }
.auth-or span{ padding:0 12px; }
.auth-tg{ display:flex; justify-content:center; min-height:44px; }

/* Header logo (top-left) */
.public-logo{ width:40px; height:40px; border-radius:9px; display:block; object-fit:contain; }
.tg-login-header{ display:inline-flex; align-items:center; }

/* Telegram profile avatars — the header chip (xs) + the /account header (lg). Served
   same-origin from the signed-in session; an initials circle stands in when there's no
   photo. The xs negative margins keep the header chip the same height as the other
   header buttons (the 20px image doesn't grow the button past its text line). */
.avatar-xs, .avatar-lg{ border-radius:50%; object-fit:cover; flex:none; display:inline-block;
  background:var(--surface-3); border:1px solid var(--border); }
.avatar-fallback{ display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-soft); color:var(--brand-strong); font-weight:700; border-color:var(--brand-line); }
.avatar-xs{ width:20px; height:20px; margin:-5px 1px -5px -3px; vertical-align:middle; }
.avatar-xs.avatar-fallback{ font-size:10.5px; }
.avatar-lg{ width:56px; height:56px; }
.avatar-lg.avatar-fallback{ font-size:1.5rem; }
.account-id{ display:flex; align-items:center; gap:14px; }
.account-id-text{ min-width:0; }
.account-id .account-title{ margin-bottom:2px; }

/* Account hub — unified order + review timeline (no wallet) */
.account-head{ margin-bottom:26px; }
.account-meta{ margin:0; font-size:0.92rem; }
.timeline{ display:flex; flex-direction:column; gap:14px; }
.t-card{
  background:rgba(20,21,29,0.62); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:18px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.t-row{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.t-name{ font-weight:700; font-size:1.02rem; }
.t-total{ font-weight:700; white-space:nowrap; }
.t-meta{ margin-top:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.t-dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); display:inline-block; }
.t-review{ margin-top:14px; border-top:1px solid var(--border-soft); padding-top:12px; }
.t-review summary, .t-creds summary{ cursor:pointer; color:var(--brand-strong); font-size:0.9rem; font-weight:600; list-style:none; }
.t-review summary::-webkit-details-marker, .t-creds summary::-webkit-details-marker{ display:none; }
.t-creds{ margin-top:12px; }
.t-creds[open] summary{ margin-bottom:12px; }
.t-creds .creds{ margin-bottom:0; }
.t-rate{ color:#ffd24a; }
.t-form{ margin-top:12px; max-width:440px; }
.account-empty{
  background:rgba(20,21,29,0.5); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:28px; text-align:center; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.account-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }

/* Storefront + product + checkout (public, glassy over the shader) */
.shop, .product, .checkout{ max-width:640px; margin:0 auto; width:100%; }
.shop-head{ margin-bottom:22px; }
.shop-title, .product-name{ font-size:clamp(1.6rem,4vw,2.2rem); font-weight:800; letter-spacing:-0.02em; margin:0 0 6px; line-height:1.15; }
.shop-list{ display:flex; flex-direction:column; gap:12px; }
.shop-row{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--text);
  background:rgba(20,21,29,0.6); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:16px 18px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .15s, transform .15s;
}
.shop-row:hover{ border-color:var(--brand-line); transform:translateY(-1px); }
.shop-emoji{ font-size:1.6rem; line-height:1; }
.shop-info{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.shop-name{ font-weight:700; }
.shop-desc{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.shop-stock{ display:inline-flex; align-items:center; gap:5px; color:var(--text-dim); }
.shop-price{ font-weight:800; white-space:nowrap; }

.crumb{ display:inline-block; margin-bottom:14px; text-decoration:none; }
.product-card, .co-card{
  background:rgba(20,21,29,0.64); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:26px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.product-emoji{ font-size:2.6rem; line-height:1; margin-bottom:10px; }
.product-desc{ margin:0 0 14px; }
.product-price{ font-size:1.5rem; font-weight:800; color:var(--brand-strong); margin-bottom:16px; }
.product-trust{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:8px; color:var(--text-dim); font-size:0.92rem; }
.product-trust li{ display:flex; gap:8px; align-items:flex-start; }
.pt-i{ flex:none; }
.product-buy{ max-width:420px; }
.product-soldout{ margin:8px 0 16px; }

.co-card{ text-align:center; }
.co-status{ font-weight:700; font-size:1.1rem; margin-bottom:14px; }
.co-status.ok{ color:var(--brand-strong); }
.co-status.waiting{ color:var(--amber); }
.co-amount{ font-size:1.15rem; margin:0 0 16px; }
.co-amount strong{ font-family:var(--mono); }
.co-qr{ display:block; margin:0 auto 16px; border-radius:12px; background:#fff; padding:8px; }
.co-addr{ display:flex; flex-direction:column; gap:4px; align-items:center; margin-bottom:14px; }
.co-meta{ margin-top:14px; }
.co-warn{ color:var(--amber); font-size:0.9rem; margin:0 0 16px; }
.creds{ display:flex; flex-direction:column; gap:14px; text-align:left; margin-bottom:18px; }
.cred{ background:rgba(0,0,0,0.28); border:1px solid var(--border-soft); border-radius:var(--r); padding:14px; }
.cred-h{ margin-bottom:8px; }
.cred-row{ display:flex; gap:10px; align-items:baseline; padding:3px 0; }
.cred-k{ width:80px; flex:none; color:var(--text-dim); font-size:0.82rem; }
.cred-v{ font-family:var(--mono); font-size:0.9rem; overflow-wrap:anywhere; user-select:all; }

/* Account: crypto wallet balance panel (spendable at checkout; top-ups in the bot) */
.wallet-card{
  background:rgba(20,21,29,0.62); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:18px 20px; margin-bottom:22px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.wallet-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.wallet-label{ text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.wallet-total{ font-size:1.5rem; font-weight:800; color:var(--brand-strong); }
.wallet-coins{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:2px; }
.wallet-coin{ display:flex; align-items:baseline; gap:10px; padding:7px 0; border-top:1px solid var(--border-soft); }
.wallet-coin:first-child{ border-top:none; }
.wc-name{ flex:1; min-width:0; font-weight:600; }
.wc-amt{ font-size:0.9rem; white-space:nowrap; }
.wc-usd{ width:84px; text-align:right; flex:none; white-space:nowrap; }
.wallet-note{ margin:12px 0 0; }

/* Product: pay-from-wallet panel (signed-in users) */
.wallet-pay{
  max-width:420px; border:1px solid var(--brand-line); border-radius:var(--r-lg);
  padding:16px 18px; margin-bottom:6px; background:rgba(53,166,87,0.05);
}
.wp-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:12px; }
.wp-title{ font-weight:700; }
.wp-or{ display:flex; align-items:center; text-align:center; color:var(--text-dim); font-size:0.8rem; margin:18px 0 16px; max-width:420px; }
.wp-or::before, .wp-or::after{ content:""; flex:1; height:1px; background:var(--border); }
.wp-or span{ padding:0 12px; }

/* Hybrid + receipt shared bits */
.hy-line{ margin:0 0 18px; line-height:1.5; }
.co-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.co-actions .inline{ display:inline; }

/* ============================================================
   Canonical coin picker (radio-as-button) — shared by account
   deposit/withdraw, product checkout, and the hybrid screens.
   Pure-CSS state; full-colour inline-SVG logos via _coins.html.
   ============================================================ */
.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.svg-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.coin-fs{ border:0; padding:0; margin:0; min-inline-size:0; }
.coin-fs legend{ padding:0; margin-bottom:8px; }
.coin-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:520px){ .coin-grid{ grid-template-columns:repeat(4,1fr); } }
.coin-opt{ display:block; }
.coin-card{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  min-height:92px; padding:12px 10px; border:1px solid var(--border); border-radius:var(--r);
  background:rgba(20,21,29,.55); cursor:pointer; text-align:center;
  transition:border-color .15s, background .15s, transform .04s; }
.coin-card:hover{ border-color:var(--border-strong); }
.coin-opt:active .coin-card{ transform:translateY(1px); }
.coin-logo{ display:block; }
.coin-text{ display:flex; flex-direction:column; line-height:1.1; }
.coin-nm{ font-weight:650; font-size:.9rem; }
.coin-tk{ font-size:.72rem; color:var(--text-dim); }
.coin-usd{ font-size:.8rem; }
.coin-approx{ font-size:.74rem; color:var(--text-dim); }
.coin-covers{ color:var(--brand-strong); }
.coin-fee{ font-size:.68rem; font-weight:600; padding:1px 7px; border-radius:999px;
  background:var(--surface-3); color:var(--text-dim); }   /* NEUTRAL — a cost is never "good"/green */
.coin-note{ font-size:.66rem; color:var(--text-mute); }
.coin-tick{ position:absolute; top:6px; right:8px; color:var(--brand-strong); font-size:.8rem; opacity:0; transition:opacity .15s; }
.coin-radio:checked + .coin-card{ border-color:var(--brand); background:var(--brand-soft); box-shadow:inset 0 0 0 1px var(--brand-line); }
.coin-radio:checked + .coin-card .coin-tick{ opacity:1; }
.coin-radio:focus-visible + .coin-card{ outline:2px solid var(--brand-strong); outline-offset:2px; }
.coin-radio:disabled + .coin-card{ opacity:.42; filter:grayscale(.6); cursor:not-allowed; }

/* ============================================================
   Vault Ledger — the /account page
   ============================================================ */
.acct{ max-width:920px; margin:0 auto; width:100%; }
.acct-cols{ display:flex; flex-direction:column; gap:16px; }
@media (min-width:900px){ .acct-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; } }
.move{ display:flex; flex-direction:column; }
/* The boxes sit in their own gapped wrapper so the heading→first-box spacing matches the
   block-flow "Orders" column on the right — the first box (Add funds) lines up exactly
   with the Orders box, and Withdraw rides up with it (not pushed down by the flex gap). */
.move-boxes{ display:flex; flex-direction:column; gap:12px; }
.move-h{ font-size:1.05rem; font-weight:700; margin:4px 0 2px; }

.wallet-head{ align-items:center; }
.wallet-live{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); }
.wallet-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.wallet-total{ font-variant-numeric:tabular-nums; }
.wallet-coin{ align-items:center; gap:10px; }
.wallet-coin .coin-logo{ width:22px; height:22px; flex:none; display:inline-flex; }
.wallet-coin .coin-logo svg, .wallet-coin svg.coin-logo{ width:22px; height:22px; display:block; }
.wc-amt{ font-variant-numeric:tabular-nums; }
.wh-empty{ margin:12px 0 0; }

.held-banner{ position:sticky; top:8px; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  background:var(--amber-soft); border:1px solid transparent; border-left:3px solid var(--amber); border-radius:var(--r-lg);
  padding:14px 16px; margin-bottom:18px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.held-ico{ font-size:1.1rem; }
.held-text{ flex:1; min-width:180px; color:#f6d6a0; font-size:.92rem; }
.held-text strong{ font-family:var(--mono); color:var(--text); }
.held-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.held-actions .inline{ display:inline; }

.acc{ background:rgba(20,21,29,.6); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.acc-sum{ display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none; padding:15px 18px; font-weight:650; }
.acc-sum::-webkit-details-marker{ display:none; }
.acc-sign{ width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--surface-3); color:var(--text-dim); font-weight:800; }
.acc-deposit .acc-sign{ color:var(--brand-strong); }
.acc-hint{ margin-left:auto; color:var(--text-mute); font-size:.8rem; font-weight:500; }
.acc[open] .acc-sum{ border-bottom:1px solid var(--border-soft); }
.acc-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:14px; }

.dep-addr{ display:none; flex-direction:column; gap:8px; }
.dep-grid:has(.coin-radio[value="btc"]:checked) ~ .dep-pane .dep-addr[data-coin="btc"],
.dep-grid:has(.coin-radio[value="eth"]:checked) ~ .dep-pane .dep-addr[data-coin="eth"],
.dep-grid:has(.coin-radio[value="ltc"]:checked) ~ .dep-pane .dep-addr[data-coin="ltc"],
.dep-grid:has(.coin-radio[value="sol"]:checked) ~ .dep-pane .dep-addr[data-coin="sol"]{ display:flex; }
.addr-box{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:rgba(0,0,0,.28);
  border:1px solid var(--border-soft); border-radius:var(--r); padding:11px 13px; }
.addr-box .addr-val{ flex:1; min-width:0; user-select:all; font-size:.84rem; font-family:var(--mono); overflow-wrap:anywhere; }
.addr-copy{ flex:none; }
.addr-copy.is-copied{ color:var(--brand-strong); border-color:var(--brand-line); }
.addr-note{ color:var(--text-dim); font-size:.82rem; margin:0; }
.addr-note strong{ color:var(--text); }

.wd-form{ display:flex; flex-direction:column; gap:13px; }
.wd-amount{ display:flex; gap:8px; align-items:center; }
.wd-amount .input{ flex:1; }
.wd-max{ flex:none; }
.wd-fee-note{ color:var(--text-dim); font-size:.82rem; margin:0; }
/* Coin ⇄ USD amount-entry toggle (segmented control) */
.wd-unit-toggle{ display:inline-flex; margin:0 0 8px; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.wd-unit{ appearance:none; -webkit-appearance:none; border:0; background:transparent; color:var(--text-dim);
  font:inherit; font-weight:600; font-size:12.5px; line-height:1; padding:7px 16px; cursor:pointer; min-width:60px;
  transition:background .15s, color .15s; }
.wd-unit + .wd-unit{ border-left:1px solid var(--border); }
.wd-unit.is-on{ background:var(--brand-soft); color:var(--brand-strong); }
.wd-unit:hover:not(.is-on){ color:var(--text); }
.wd-unit:focus-visible{ outline:2px solid var(--brand-strong); outline-offset:-2px; }
.review-kv{ margin:14px 0 16px; }
.review-kv > div{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--border-soft); }
.review-kv > div:last-child{ border-bottom:0; }
.review-kv dt{ color:var(--text-dim); margin:0; }
.review-kv dd{ margin:0; text-align:right; font-family:var(--mono); overflow-wrap:anywhere; max-width:60%; }
.review-warn{ color:var(--amber); font-size:.9rem; margin:0 0 14px; }
.wd-own{ margin:0 0 4px; align-items:flex-start; }
.co-card form:has(input[name="own_ack"]:not(:checked)) .wd-confirm{ opacity:.5; }

.callout{ border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; background:rgba(20,21,29,.6); }
.callout-warn{ border-left:3px solid var(--amber); color:#f6d6a0; }

/* ============================================================
   Shop "The Ledger" — storefront states, .buy console, invoice
   ============================================================ */
/* Resume bar (a checkout in progress) */
.resume-bar{ position:sticky; top:8px; z-index:5; display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap; margin-bottom:16px; padding:10px 14px; border:1px solid var(--amber-soft);
  border-left:3px solid var(--amber); border-radius:var(--r); background:rgba(20,21,29,.7);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.rb-text{ color:#f6d6a0; font-size:.9rem; }
.rb-actions{ display:flex; gap:8px; align-items:center; }
.rb-actions .inline{ display:inline; }

/* Storefront stock/price states */
.t-dot.is-amber{ background:var(--amber); }
.shop-stock.is-out{ color:var(--text-mute); }
.shop-price.is-out{ text-decoration:line-through; color:var(--text-mute); }

/* The buy console */
.buy{ max-width:460px; }
.pay-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px; background:var(--bg-tint);
  border:1px solid var(--border); border-radius:var(--r); margin-bottom:14px; }
.pay-opt{ text-align:center; padding:9px; border-radius:var(--r-xs); font-weight:600; color:var(--text-dim); cursor:pointer; }
#m-wallet:checked ~ .pay-toggle .pay-opt[for="m-wallet"],
#m-crypto:checked ~ .pay-toggle .pay-opt[for="m-crypto"]{ background:var(--brand-soft); color:var(--text); box-shadow:inset 0 0 0 1px var(--brand-line); }
.m-radio:focus-visible ~ .pay-toggle{ outline:2px solid var(--brand-strong); outline-offset:2px; border-radius:var(--r); }
.buy-panel{ display:none; flex-direction:column; gap:14px; }
#m-wallet:checked ~ .buy-wallet, #m-crypto:checked ~ .buy-crypto{ display:flex; }
.buy:not(:has(.m-radio)) .buy-crypto{ display:flex; }   /* guests: lone crypto panel always shown */

/* Quantity stepper */
.qty{ display:inline-flex; align-items:stretch; border:1px solid var(--border); border-radius:var(--r-sm);
  overflow:hidden; background:var(--bg-tint); width:max-content; }
.qty-btn{ width:42px; border:0; background:var(--surface-2); color:var(--text); font-size:1.1rem; cursor:pointer; }
.qty-btn:hover{ background:var(--surface-3); }
.qty-input{ width:64px; border:0; background:transparent; color:var(--text); text-align:center; font-size:1rem; -moz-appearance:textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Live ledger summary */
.ledger{ margin:4px 0 0; padding-top:12px; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:6px; }
.ledger-row{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; color:var(--text-dim); font-size:.9rem; }
.ledger-row dt, .ledger-row dd{ margin:0; }
.ledger-row dd{ font-variant-numeric:tabular-nums; }
.ledger-total{ margin-top:6px; padding-top:8px; border-top:1px solid var(--border-soft); color:var(--text); font-weight:700; }
.ledger-total dd{ color:var(--brand-strong); font-size:1.05rem; }
.buy-cta{ position:sticky; bottom:8px; z-index:2; margin-top:6px; }
@media (min-width:680px){ .buy-cta{ position:static; } }

/* Invoice: status dot, countdown, step timeline, copy */
.status-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--amber); margin-left:6px; }
.status-dot.is-pulse{ animation:co-pulse 1.4s ease-in-out infinite; }
@keyframes co-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.co-status.detected{ color:var(--brand-strong); }
.co-amount-v{ font-family:var(--mono); }
.co-countdown{ font-family:var(--mono); }
.co-timeline{ list-style:none; margin:18px 0; padding:0; text-align:left; display:flex; flex-direction:column; gap:9px; }
.co-step{ display:flex; gap:10px; align-items:center; color:var(--text-mute); font-size:.86rem; }
.co-step-n{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1px solid var(--border-strong); font-size:.7rem; flex:none; }
.co-timeline[data-step="1"] .co-step:nth-child(1),
.co-timeline[data-step="2"] .co-step:nth-child(-n+2),
.co-timeline[data-step="3"] .co-step:nth-child(-n+3),
.co-timeline[data-step="4"] .co-step{ color:var(--text); }
.co-timeline[data-step="1"] .co-step:nth-child(1) .co-step-n,
.co-timeline[data-step="2"] .co-step:nth-child(-n+2) .co-step-n,
.co-timeline[data-step="3"] .co-step:nth-child(-n+3) .co-step-n,
.co-timeline[data-step="4"] .co-step .co-step-n{ border-color:transparent; background:var(--brand); color:#04140d; }
.copy-btn{ border:1px solid var(--border); background:var(--surface-2); color:var(--text-dim); border-radius:var(--r-xs); padding:3px 9px; font-size:.72rem; font-weight:600; cursor:pointer; }
.copy-btn:hover{ background:var(--surface-3); }
.copy-btn.is-copied{ color:var(--brand-strong); border-color:var(--brand-line); }
.claim-link{ display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; margin:10px 0; }
.cred-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-bottom:10px; }
.cred .cred-h{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.cred-row .copy-btn{ margin-left:auto; }

/* Guest review on the claim page — minimal, consistent with the surrounding card. */
.co-review{ text-align:left; border-top:1px solid var(--border-soft); margin-top:18px;
  padding-top:16px; display:flex; flex-direction:column; gap:12px; }
.co-review-h{ font-size:1rem; font-weight:700; margin:0; }
.rate{ display:inline-flex; gap:2px; }
.rate-star{ background:none; border:0; padding:0 3px; cursor:pointer; font-size:1.7rem;
  line-height:1; color:var(--surface-3); transition:color .12s, transform .1s; }
.rate-star.on{ color:#ffd24a; }
.rate-star:active{ transform:scale(.88); }
.co-review .input:disabled{ opacity:.45; }
.co-receipt{ margin-top:4px; }

/* Hybrid "help pay" breakdown — reuses the .ledger component for consistency with the
   product-page checkout (centered card column). */
.hy-ledger{ max-width:380px; margin:14px auto 18px; text-align:left; }

/* The [hidden] attribute must always win over component display rules (e.g.
   .ledger-row{display:flex}), so a hidden fee row truly collapses (no ghost padding). */
[hidden]{ display:none !important; }

.sublink{ margin:-8px 0 16px; }

/* =====================================================================
   TYPOGRAPHY SYSTEM — distinctive display + refined body (2026-06-10)
   ---------------------------------------------------------------------
   The interface used to lean on the OS system font everywhere, which reads
   as generic. We now pair a characterful display face (Bricolage Grotesque)
   on the brand "moments" with a refined neutral body (Hanken Grotesk).
   Both are SELF-HOSTED variable woff2 (one file each → the whole weight
   axis), so the strict CSP (font-src 'self') is satisfied with no CDN.
   Every family lists the previous system stack as its fallback, so a
   missing/!cached font file degrades to exactly the old look — never a
   broken layout. font-display:swap keeps first paint instant.
   ===================================================================== */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("/static/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("/static/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
:root{
  --font-display:"Bricolage Grotesque", var(--font);
  --font-body:"Hanken Grotesk", var(--font);
}

/* Refined body face everywhere; the system stack remains the fallback. */
body{ font-family:var(--font-body); }

/* Display face on the headings + brand marks (admin + public share these). */
.page-h1, .page-eyebrow, .card-title, .brand-name, .auth-brand-name, .error-code, .stat-value,
.public-brand-name, .hero-kicker, .hero-title,
.shop-title, .product-name, .account-title, .reviews-title,
.move-h, .co-status, .account-balance-amt{
  font-family:var(--font-display);
}
/* Optical tracking: Bricolage wants slightly tighter setting at large sizes. */
.hero-title{ letter-spacing:-0.038em; }
.shop-title, .product-name, .account-title, .reviews-title, .account-title{ letter-spacing:-0.03em; }
.hero-kicker{ letter-spacing:0.16em; }

/* =====================================================================
   PAGE-LOAD MOTION — one orchestrated, staggered reveal (PUBLIC only).
   A single tasteful entrance beats scattered micro-interactions. Gated
   behind prefers-reduced-motion: no-preference so the initial opacity:0
   is ONLY ever set when we will actually animate it back to 1 — reduced-
   motion users (and any non-animating context) always see full content.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  @keyframes pub-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
  @keyframes pub-fade{ from{ opacity:0; } to{ opacity:1; } }

  /* The entrance reveal is now scoped to the LANDING "moment" only (hero + reviews).
     The transactional pages (shop/product/checkout/account/wallet) intentionally appear
     fully-formed and instant — their smoothness comes from the cross-page view transition
     (viewnav.css), not a per-row rise. This is what makes routing feel snappy, not flashy. */
  body.public .hero > *,
  body.public .reviews-head,
  body.public .reviews-grid > .review{
    animation:pub-rise .52s cubic-bezier(.21,.66,.32,1) both;
  }

  /* Hero: kicker → title → sub → CTA cascade. */
  body.public .hero > *:nth-child(1){ animation-delay:.02s; }
  body.public .hero > *:nth-child(2){ animation-delay:.09s; }
  body.public .hero > *:nth-child(3){ animation-delay:.16s; }
  body.public .hero > *:nth-child(4){ animation-delay:.23s; }
  body.public .hero > *:nth-child(5){ animation-delay:.30s; }

  body.public .reviews-grid > .review:nth-child(2){ animation-delay:.06s; }
  body.public .reviews-grid > .review:nth-child(3){ animation-delay:.12s; }
  body.public .reviews-grid > .review:nth-child(4){ animation-delay:.18s; }
  body.public .reviews-grid > .review:nth-child(5){ animation-delay:.24s; }
  body.public .reviews-grid > .review:nth-child(6){ animation-delay:.30s; }
  body.public .reviews-grid > .review:nth-child(n+7){ animation-delay:.34s; }

  body.public .reviews-head{ animation-name:pub-fade; }
}

/* =====================================================================
   POLISH PASS (2026-06-10) — contrast, depth, ledger numerics.
   Minimal, additive refinements over the locked green/glass system.
   ===================================================================== */

/* The background canvas sits at z-index:-1, so body.public MUST be transparent or it would
   paint over (occlude) the canvas. The dark-green fallback lives on <html> (behind the
   canvas) + on the canvas itself, so overscroll / no-JS still shows on-brand dark green. */
body.public{ background:transparent; }

/* Hero: a soft radial scrim behind the copy keeps the headline + subline crisp
   over the brightest part of the background — atmosphere, not a visible box. */
.hero{ position:relative; z-index:0; }
.hero::before{
  content:""; position:absolute; z-index:-1; inset:-14% -20% -6%;
  background:radial-gradient(56% 58% at 50% 44%, rgba(3,13,8,.62), rgba(3,13,8,.30) 52%, transparent 76%);
  pointer-events:none;
}
.hero-sub{ color:#cbe7d6; }            /* lifted from --text-dim for legibility over green */

/* Storefront "Ledger": prices set in tabular mono; brighter section subline. */
.shop-price{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.shop-head .muted{ color:#a7c6b4; }

/* A barely-there lit top edge + soft drop gives the glass panels real depth. */
.feature, .review, .shop-row, .product-card, .co-card, .wallet-card,
.t-card, .acc, .account-empty{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 32px -24px rgba(0,0,0,.72);
}
.shop-row:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 16px 36px -20px rgba(0,0,0,.6); }

/* Role bar on /account for an elevated user (admin/supplier): they sign in as a normal
   customer here, with a one-click link into their panel. */
.role-bar{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;
  background:rgba(20,21,29,.6); border:1px solid var(--border); border-left:3px solid var(--brand);
  border-radius:var(--r-lg); padding:13px 16px; margin-bottom:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.role-tag{ font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--brand-strong); white-space:nowrap; }
.role-text{ flex:1; min-width:170px; color:var(--text-dim); font-size:.9rem; }
.role-link{ flex:none; }

/* Admin → Settings: site-background picker (radio cards; :has() gives live selection). */
.bg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.bg-opt{ display:flex; flex-direction:column; gap:3px; padding:13px 14px 12px; border:1px solid var(--border);
  border-radius:var(--r); background:var(--surface-2); cursor:pointer; position:relative; transition:border-color .12s, background .12s; }
.bg-opt:hover{ border-color:var(--border-strong); }
.bg-opt:has(input:checked){ border-color:var(--primary-line); background:var(--primary-soft); }
.bg-opt input{ position:absolute; top:12px; right:12px; accent-color:var(--primary); }
.bg-opt-name{ font-weight:700; font-size:.95rem; padding-right:22px; }
.bg-opt-blurb{ color:var(--text-dim); font-size:.82rem; line-height:1.4; }

/* Telegram login uniformity. The HEADER keeps Telegram's own compact iframe widget
   (medium size + 7px corners, via the widget data-attrs) — unchanged by request. The
   HERO is no longer that fixed-size iframe (which can't be restyled to match) but a real
   .btn.btn-lg, so it shares the EXACT padding/height/radius of "Browse accounts" and
   "Open on Telegram". Telegram brand blue keeps it instantly recognisable; the click
   opens the official login popup (see app.js). */
.btn-tg{
  background:linear-gradient(180deg,#2ab4ef,#1f9fe0); color:#fff; border:1px solid transparent;
  font-weight:700;
  box-shadow:0 6px 18px -8px rgba(34,158,217,.55), inset 0 0 0 1px rgba(255,255,255,.10);
}
.btn-tg:hover{ filter:brightness(1.06); box-shadow:0 8px 24px -8px rgba(34,158,217,.7); }
.btn-tg .ico{ width:17px; height:17px; margin-left:-2px; }