/* ============================================================================
   BoC — "Console Explorer · Compact Telemetry" (D19e)
   Dark premium-SaaS console + cyber-terminal mono data + chain/node accents.
   System fonts only (CSP blocks external font CDNs). Covers every app screen.
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg:#080a0e; --bg-2:#0b0e13; --panel:#10131a; --panel-2:#141822; --elev:#1a1f29;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.10); --line-3:rgba(255,255,255,.16);
  --txt:#e8ecf3; --txt-2:#a3abbd; --txt-3:#6c7589; --txt-faint:#4f5668;
  /* two-tone accent: cyan primary + violet secondary signal */
  --acc:#2fe6e0; --acc-deep:#13b4b0; --acc-glow:rgba(47,230,224,.40);
  --sec:#9b8cff; --sec-deep:#6c5ae6; --sec-glow:rgba(155,140,255,.42);
  --ok:#3ad9a0; --ok-bg:rgba(58,217,160,.10); --ok-bd:rgba(58,217,160,.42);
  --amber:#f5b73f; --amber-bg:rgba(245,183,63,.09); --amber-bd:rgba(245,183,63,.44);
  --red:#f6707f; --red-bg:rgba(246,112,127,.09); --red-bd:rgba(246,112,127,.46);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:12px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 14px 36px -26px rgba(0,0,0,.9);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--sans); font-size:14px; line-height:1.5; color:var(--txt);
  background:var(--bg); letter-spacing:-.005em; -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1; min-height:100vh;
}
/* ambient glow + faint console grid behind everything */
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(820px 460px at 82% -8%, rgba(47,230,224,.06), transparent 60%),
    radial-gradient(720px 420px at 4% 0%, rgba(155,140,255,.05), transparent 58%); }
body::after { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:38px 38px,38px 38px;
  -webkit-mask-image:radial-gradient(1200px 680px at 50% 0%,#000,transparent 82%);
          mask-image:radial-gradient(1200px 680px at 50% 0%,#000,transparent 82%); }
a { color:var(--acc); text-decoration:none; }
a:hover { color:var(--txt); }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.small { font-size:12px; } .wrap { word-break:break-all; } .muted { color:var(--txt-3); }
.ok { color:var(--ok); font-weight:600; } .bad { color:var(--red); font-weight:600; } .warn { color:var(--amber); font-weight:600; }
code { font-family:var(--mono); font-size:.92em; background:var(--bg-2); border:1px solid var(--line);
  padding:1px 6px; border-radius:5px; color:var(--txt-2); }
pre { font-family:var(--mono); font-size:12px; color:var(--txt-2); background:var(--bg-2);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; overflow:auto; line-height:1.5; }
strong { color:var(--txt); font-weight:600; }
em { font-style:normal; color:var(--txt-3); }
:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }

.skip-link { position:absolute; left:-9999px; top:0; background:var(--acc); color:#04201f; padding:8px 14px;
  border-radius:0 0 8px 0; font-weight:600; z-index:200; }
.skip-link:focus { left:0; }

/* ===== top bar + nav ===== */
.topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:16px;
  padding:0 18px; height:54px; background:rgba(9,11,16,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2); flex-wrap:wrap; }
.brand { display:flex; flex-direction:column; line-height:1; gap:3px; flex-shrink:0; }
.brand:hover { color:inherit; }
.brand-mark { font-weight:800; font-size:18px; letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--acc),var(--sec)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
.brand-tag { font-family:var(--mono); font-size:8px; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-3); }
nav { display:flex; align-items:center; gap:2px; flex:1; flex-wrap:wrap; }
nav a { font-family:var(--mono); font-size:11.5px; letter-spacing:.01em; color:var(--txt-2);
  padding:6px 10px; border-radius:7px; border:1px solid transparent; transition:.15s; position:relative; }
nav a:hover { color:var(--txt); background:rgba(255,255,255,.04); }
nav a.on { color:var(--acc); background:rgba(47,230,224,.08); border-color:rgba(47,230,224,.32); }
nav a.on::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px;
  border-radius:2px; background:var(--acc); box-shadow:0 0 8px var(--acc-glow); }
/* Primary action: Notarize stands out as a filled (blue) button in the nav. */
nav a.nav-notarize { color:#04110f; background:var(--acc); border-color:var(--acc); font-weight:700; }
nav a.nav-notarize:hover { color:#04110f; background:var(--acc); filter:brightness(1.08); }
nav a.nav-notarize.on { color:#04110f; background:var(--acc); border-color:var(--acc); }
nav a.nav-notarize.on::after { display:none; }
nav .spacer { flex:1; }
.inline { display:inline; }
.link, button.link { background:none; border:0; color:var(--txt-2); cursor:pointer;
  font:inherit; font-family:var(--mono); font-size:11.5px; padding:6px 10px; border-radius:7px; transition:.15s; }
.link:hover { color:var(--txt); background:rgba(255,255,255,.04); }
.link.danger, .danger { color:var(--txt-3); }
.link.danger:hover { color:var(--red); background:var(--red-bg); }
.navtoggle { display:none; }
.navburger { display:none; cursor:pointer; font-size:22px; color:var(--txt-2); padding:2px 8px;
  border:1px solid var(--line-2); border-radius:7px; line-height:1; user-select:none; }

/* ===== layout shell ===== */
main { position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:26px 20px 64px; }
footer { position:relative; z-index:1; text-align:center; color:var(--txt-faint); font-family:var(--mono);
  font-size:11px; letter-spacing:.04em; padding:26px 20px; border-top:1px solid var(--line); }
footer a { color:var(--txt-3); } footer a:hover { color:var(--acc); }

h1 { font-size:24px; font-weight:700; letter-spacing:-.025em; margin:0 0 14px; }
h2 { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.18em;
  color:var(--txt-3); margin:30px 0 12px; display:flex; align-items:center; gap:9px; }
h2::before { content:""; width:7px; height:7px; border-radius:2px; background:var(--acc);
  box-shadow:0 0 7px var(--acc-glow); flex-shrink:0; }
h3 { font-size:15px; font-weight:600; margin:0 0 6px; letter-spacing:-.01em; }

.rowflex { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.back { display:inline-block; margin-bottom:10px; font-family:var(--mono); font-size:11.5px; color:var(--txt-3); }
.back:hover { color:var(--acc); }
.actions, .toolbar { display:flex; gap:10px; align-items:center; margin:16px 0; flex-wrap:wrap; }
.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; }

/* ===== buttons ===== */
.btn { display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:12.5px; font-weight:600;
  letter-spacing:.005em; padding:9px 16px; border-radius:8px; border:1px solid transparent; cursor:pointer;
  transition:.16s ease; white-space:nowrap; color:#04201f;
  background:linear-gradient(180deg,var(--acc),var(--acc-deep));
  box-shadow:0 0 0 1px rgba(47,230,224,.32),0 6px 18px -10px var(--acc-glow); }
.btn:hover { color:#04201f; filter:brightness(1.07); transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(47,230,224,.55),0 10px 26px -10px var(--acc-glow); }
.btn:disabled,.btn[disabled] { opacity:.45; cursor:not-allowed; filter:none; transform:none; box-shadow:0 0 0 1px var(--line-2); }
.btn:disabled:hover,.btn[disabled]:hover { filter:none; transform:none; box-shadow:0 0 0 1px var(--line-2); }
.btn.ghost { background:rgba(255,255,255,.025); color:var(--txt); border-color:var(--line-2); box-shadow:none; }
.btn.ghost:hover { border-color:rgba(47,230,224,.45); color:var(--acc); background:rgba(47,230,224,.05); }
.linklike { color:var(--acc); cursor:pointer; }
.copy { background:rgba(255,255,255,.03); border:1px solid var(--line-2); color:var(--txt-3);
  font-family:var(--mono); font-size:11px; padding:1px 7px; border-radius:5px; cursor:pointer; transition:.15s; }
.copy:hover { color:var(--acc); border-color:rgba(47,230,224,.4); }

/* ===== hero / landing ===== */
.hero { text-align:center; padding:46px 0 14px; }
.hero h1 { font-size:46px; letter-spacing:-.04em; margin:0 0 6px;
  background:linear-gradient(180deg,#fff 40%,#9aa3b6 100%); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
.hero h1 span { display:block; font-family:var(--mono); font-size:12px; letter-spacing:.3em;
  text-transform:uppercase; margin-top:14px;
  color:transparent; background:linear-gradient(120deg,var(--acc),var(--sec));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lede { max-width:660px; margin:18px auto 26px; font-size:16px; color:var(--txt-2); line-height:1.6; }
.cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.features { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:36px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px;
  position:relative; overflow:hidden; transition:.2s ease; }
.card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--acc); opacity:0; transition:.2s; }
.card:hover { transform:translateY(-2px); border-color:var(--line-2); background:var(--panel-2);
  box-shadow:0 16px 34px -28px var(--acc-glow); }
.card:hover::before { opacity:1; }
.card h3 { font-size:15px; }
.card p { margin:0; color:var(--txt-3); font-size:13px; line-height:1.55; }

/* ===== forms ===== */
.narrow { max-width:620px; margin-inline:auto; }
.stack { display:flex; flex-direction:column; gap:14px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:20px; box-shadow:var(--shadow); }
label { display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--txt-3); font-weight:500; }
label.check { flex-direction:row; align-items:center; gap:9px; text-transform:none; letter-spacing:0;
  font-family:var(--sans); font-size:13px; color:var(--txt-2); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number],
input[type=file], select, textarea {
  font:inherit; font-size:13px; padding:9px 11px; border:1px solid var(--line-2); border-radius:8px;
  background:var(--bg-2); color:var(--txt); transition:.16s; }
input.mono, input[type=search] { font-family:var(--mono); }
input::placeholder { color:var(--txt-faint); }
input:focus, select:focus, textarea:focus { outline:none; border-color:rgba(47,230,224,.5);
  box-shadow:0 0 0 3px rgba(47,230,224,.10); }
input[type=checkbox] { accent-color:var(--acc); width:15px; height:15px; }
.inline-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.inline-form input { flex:1; min-width:160px; }
.filterbar { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin:14px 0; }
.filterbar input[type=search], .filterbar input[type=text] { flex:1; min-width:200px; }
.hint { font-size:12.5px; color:var(--txt-3); line-height:1.55; margin:8px 0; }
.dropzone { border:1px dashed var(--line-3); border-radius:12px; padding:34px; text-align:center;
  color:var(--txt-3); background:var(--bg-2); transition:.16s; cursor:pointer; margin:14px 0; }
.dropzone:hover, .dropzone:focus, .dropzone:focus-within, .dropzone.drag { border-color:rgba(47,230,224,.5); color:var(--txt-2);
  background:rgba(47,230,224,.03); outline:none; }
.dropzone:focus-within { box-shadow:0 0 0 2px rgba(47,230,224,.45); }
label.dropzone { display:block; width:100%; }
.dropzone .dz-main { display:block; font-size:14px; color:var(--txt-2); font-weight:600; }
.dropzone .dz-sub { display:block; font-size:12px; color:var(--txt-3); margin-top:8px; line-height:1.5; }
.fileitem { background:var(--panel); border:1px solid var(--line-2); border-radius:8px; padding:8px 12px;
  margin-top:8px; font-size:13px; font-family:var(--mono); color:var(--txt-2); }
.staged-item { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.staged-item .link.danger { font-family:var(--sans); }
#result, #capResult, #emailResult, #verifyResult, #scanResult, #pubResult, #zkResult, #walletResult, #vResult, #vSummary { margin-top:12px; }
#vResult:focus { outline:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
/* amber verify-card (attested / foreign / indeterminate / unsupported) — distinguished by glyph + word, not hue */
.verify-card.warn { border-color:var(--amber-bd); }
.verify-card.warn h3 { color:var(--amber); background:linear-gradient(180deg,rgba(245,183,63,.10),transparent); }
.verify-card h4 { margin:14px 18px 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-3); }
.vchecklist { list-style:none; margin:6px 18px 12px; padding:0; display:flex; flex-direction:column; gap:6px; }
.vchecklist li { font-size:13px; color:var(--txt-2); }
.vcaveats { margin:10px 18px; padding:10px 12px; border-radius:9px; background:var(--amber-bg); border:1px solid var(--amber-bd); color:var(--amber); font-size:12.5px; list-style:none; display:flex; flex-direction:column; gap:5px; }
.chk { display:grid; grid-template-columns:1.2em 1fr; gap:2px 8px; align-items:start; }
.chk .cmark { font-family:var(--mono); font-weight:700; }
.chk .cname { font-weight:600; }
.chk .cdetail { grid-column:2; color:var(--txt-3); font-size:12px; }
.chk.ok .cmark { color:var(--ok); }
.chk.bad, .chk.bad .cmark { color:var(--red); }
.chk.ind .cmark { color:var(--amber); }
.oc-list .oc { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.oc-confirm { font-size:12px; color:var(--txt-3); display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.oc.confirmed .badge { color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-bd); }
.attach-row { display:flex; align-items:center; gap:10px; }
/* the sr-only file input is nested in the .btn label; surface its keyboard focus on the visible label */
.attach-row .btn:focus-within { outline:2px solid var(--acc); outline-offset:2px; }
.vdoes-not { margin:8px 18px; font-size:12.5px; color:var(--txt-3); }
.vdoes-not summary { cursor:pointer; color:var(--txt-2); }

/* ===== stat strip (telemetry) ===== */
.statbar { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; background:var(--panel-2); margin:6px 0 14px; }
.stat { padding:14px 18px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.stat:last-child { border-right:none; }
.statnum { font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:-.02em; color:var(--txt); line-height:1; }
.statlbl { font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-faint); }
.stat:nth-child(3) .statnum { color:var(--amber); }

/* ===== chips ===== */
.chip { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px;
  color:var(--txt-2); background:var(--panel); border:1px solid var(--line-2); border-radius:999px;
  padding:4px 11px; margin:2px 4px 2px 0; }
.chip em { color:var(--txt-faint); }
.tagchip { border-color:var(--line-2); }
.rowtags { margin-top:5px; }

/* ===== tables ===== */
table.list { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
table.list th, table.list td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line);
  vertical-align:middle; }
table.list thead th { font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.13em;
  color:var(--txt-faint); font-weight:500; background:linear-gradient(180deg,rgba(255,255,255,.02),transparent); }
table.list td { font-size:12.5px; color:var(--txt-2); }
table.list tbody tr { transition:.12s; }
table.list tbody tr:hover { background:rgba(47,230,224,.03); }
table.list tbody tr:last-child td { border-bottom:none; }
.rowlink { color:var(--txt); font-weight:600; }
.rowlink:hover { color:var(--acc); }

/* ===== kind tags ===== */
.tag { font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:6px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--txt-2); }
.tag.file { color:var(--acc); background:rgba(47,230,224,.1); border-color:rgba(47,230,224,.28); }
.tag.photo { color:var(--ok); background:var(--ok-bg); border-color:var(--ok-bd); }
.tag.email { color:var(--sec); background:rgba(155,140,255,.1); border-color:rgba(155,140,255,.28); }

/* ===== status badges — court-critical three-way separation ===== */
.badge { font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.badge.confirmed { color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-bd); }
.badge.confirmed::before { content:"✓"; font-size:10px; }
.badge.pending, .badge.broadcast, .badge.batching, .badge.needs_reconcile {
  color:var(--amber); background:var(--amber-bg); border:1px dashed var(--amber-bd); }
.badge.pending::before, .badge.broadcast::before, .badge.batching::before, .badge.needs_reconcile::before {
  content:""; width:5px; height:5px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 6px var(--amber); animation:blink 1.3s ease-in-out infinite; }
.badge.failed { color:var(--red); border:1px solid var(--red-bd);
  background:repeating-linear-gradient(45deg,rgba(246,112,127,.10) 0 5px,rgba(246,112,127,.04) 5px 10px); }
.badge.failed::before { content:"✕"; font-size:10px; }
/* neutral: an off-chain possession attestation is NOT an on-chain settlement */
.badge.proof { color:var(--txt-2); background:rgba(255,255,255,.04); border:1px solid var(--line-2); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ===== definition grids (record metadata / log) ===== */
dl.grid, dl.kv { display:grid; grid-template-columns:170px 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
dl.grid dt, dl.kv dt { background:var(--bg-2); padding:10px 14px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--txt-faint); }
dl.grid dd, dl.kv dd { background:var(--bg-2); padding:10px 14px; margin:0; color:var(--txt); font-size:13px; }

/* ===== callouts / flashes ===== */
.flash { padding:11px 16px; border-radius:10px; margin:12px 0; font-size:13px; border:1px solid var(--line-2); }
.flash.ok { background:var(--ok-bg); color:var(--ok); border-color:var(--ok-bd); }
.flash.err { background:var(--red-bg); color:var(--red); border-color:var(--red-bd); }
.info { background:rgba(155,140,255,.07); border:1px solid rgba(155,140,255,.28);
  color:var(--txt-2); border-radius:10px; padding:11px 14px; font-size:12.5px; margin:12px 0; line-height:1.55; }
.empty { background:var(--panel); border:1px dashed var(--line-3); border-radius:12px; padding:34px;
  text-align:center; color:var(--txt-3); }
.shared-banner { background:rgba(47,230,224,.07); border:1px solid rgba(47,230,224,.28); color:var(--acc);
  border-radius:10px; padding:9px 14px; font-size:12.5px; margin:12px 0; }

/* ===== record extras ===== */
.preview { max-width:380px; border:1px solid var(--line-2); border-radius:10px; background:var(--bg-2); margin:6px 0; }
.scan-grid { gap:12px; }
.sharerow { display:flex; align-items:center; gap:9px; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line-2); border-radius:8px; padding:7px 11px; margin:6px 0; }
.shares { margin-top:8px; }
video, canvas { width:100%; max-width:480px; border:1px solid var(--line-2); border-radius:12px; background:#000; margin:8px 0; }
.zk { display:block; margin-top:8px; }
.zk-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:10px 0; }

/* ===== help ===== */
.help ol { padding-left:20px; line-height:1.8; color:var(--txt-2); }
.help li { margin:8px 0; }
.help h2 { margin-top:26px; }

/* ===== public verify card (built client-side) ===== */
.verify-card { border:1px solid var(--line-2); border-radius:14px; overflow:hidden; overflow-wrap:anywhere; margin:16px 0;
  background:linear-gradient(180deg,var(--panel),var(--bg-2)); box-shadow:var(--shadow); }
.verify-card h3 { margin:0; padding:14px 18px; font-size:16px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px; }
.verify-card.bad { border-color:var(--red-bd); }
.verify-card.bad h3 { color:var(--red); background:linear-gradient(180deg,rgba(246,112,127,.10),transparent); }
.verify-card p { padding:0 18px; margin:12px 0; color:var(--txt-2); font-size:13px; }
.verify-card p.bad { color:var(--amber); background:var(--amber-bg); border:1px solid var(--amber-bd);
  margin:12px 18px; padding:11px 13px; border-radius:9px; font-weight:400; }

/* ===== toasts (injected by toast.js into #toasts) ===== */
#toasts { position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:1000; }
.toast { background:var(--elev); color:var(--txt); border:1px solid var(--line-2); padding:10px 16px;
  border-radius:9px; font-size:13px; opacity:0; transform:translateY(8px);
  transition:opacity .25s, transform .25s; box-shadow:0 10px 28px -12px rgba(0,0,0,.8); }
.toast.show { opacity:1; transform:none; }
.toast.err { border-color:var(--red-bd); color:var(--red); }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ===== responsive (preserve CSS-only mobile menu) ===== */
@media (max-width:860px) {
  .navburger { display:block; order:3; }
  /* Wide list tables (e.g. credit History, 5 cols incl. a long tx-hash link) scroll horizontally instead
     of forcing page-level overflow on a narrow phone. */
  table.list { display:block; overflow-x:auto; white-space:nowrap; }
  nav { display:none; position:absolute; top:54px; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:2px; padding:10px 14px; background:rgba(9,11,16,.97);
    border-bottom:1px solid var(--line-2); }
  .navtoggle:checked ~ nav { display:flex; }
  nav .spacer { display:none; }
  .features, .cols2 { grid-template-columns:1fr; }
  .statbar { grid-template-columns:1fr; }
  /* Let each package card fill the column instead of capping at 260px (leaving dead gutter) on a phone. */
  .credit-pkg { max-width:none; }
  .stat { border-right:none; border-bottom:1px solid var(--line); }
  .stat:last-child { border-bottom:none; }
  dl.grid, dl.kv { grid-template-columns:1fr; }
  dl.grid dt, dl.kv dt { padding-bottom:2px; }
  .hero h1 { font-size:34px; }
  main { padding:20px 14px 56px; }
}

/* ── Credits page ── */
.creditbal{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);border-radius:var(--radius);padding:18px 20px}
.creditbal .crednum{font-size:34px;font-weight:680;letter-spacing:-.02em;color:var(--acc)}
.creditbal .credlbl{font-size:12px;color:var(--txt-3);margin-left:8px;text-transform:uppercase;letter-spacing:.12em}
.paybox{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius);padding:16px;margin:12px 0;max-width:560px}
.paybox .paylbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);margin-bottom:8px}
.paybox .payaddr{font-size:15px;word-break:break-all;color:var(--txt);background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:11px 13px;margin-bottom:10px}
.btn.small{padding:7px 13px;font-size:12px}
.callout{border:1px solid var(--line-2);border-radius:var(--radius);padding:14px 16px;background:var(--panel)}
.callout.warn{border-color:var(--amber-bd);background:var(--amber-bg)}

/* ── Legal documents (Terms, Privacy) ── */
.legal{max-width:760px;margin-inline:auto;line-height:1.65;color:var(--txt-2)}
.legal h1{font-size:30px;letter-spacing:-.02em;margin:0 0 18px;color:var(--txt)}
.legal h2{font-size:20px;margin:30px 0 10px;color:var(--txt);border-top:1px solid var(--line);padding-top:20px}
.legal h3{font-size:16px;margin:20px 0 8px;color:var(--txt)}
.legal p{margin:10px 0}
.legal ul,.legal ol{margin:10px 0;padding-left:26px}
.legal li{margin:6px 0}
.legal strong{color:var(--txt)}
.legal a{color:var(--acc)}
.legal code{background:var(--bg-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:13px;color:var(--txt)}
.legal hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.legal blockquote{margin:16px 0;padding:12px 16px;background:var(--amber-bg);border:1px solid var(--amber-bd);
  border-radius:var(--radius);color:var(--txt-2);font-size:14px}

/* ── Credits: branded bonus packages ── */
.credit-packages{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0 6px}
.credit-pkg{position:relative;flex:1 1 200px;max-width:260px;background:var(--bg-2);border:1px solid var(--ok-bd);
  border-radius:var(--radius);padding:18px 16px 16px;text-align:center;overflow:hidden}
.credit-pkg .pkg-bonus-tag{position:absolute;top:0;right:0;background:var(--ok);color:#04201f;font-size:11px;
  font-weight:700;letter-spacing:.04em;padding:3px 10px;border-bottom-left-radius:8px}
.credit-pkg .pkg-usd{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--txt)}
.credit-pkg .pkg-total{font-size:18px;margin-top:4px;color:var(--acc)}
.credit-pkg .pkg-total strong{font-weight:700}
.credit-pkg .pkg-name{font-size:12px;color:var(--txt-2);margin-top:6px;text-transform:uppercase;letter-spacing:.08em}
.credit-pkg .pkg-breakdown{margin-top:8px}
.bonus-badge{display:inline-block;background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-bd);
  border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;white-space:nowrap}
.credit-pkg.pkg-pick{cursor:pointer;transition:border-color .12s,transform .12s,box-shadow .12s}
.credit-pkg.pkg-pick:hover{transform:translateY(-2px);border-color:var(--acc)}
.credit-pkg.pkg-pick.selected{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.credit-pkg.pkg-pick:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ── Credits: pay-with-MetaMask widget ── */
.mmpay{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius);padding:16px 18px;margin:12px 0;max-width:560px}
.mm-row{display:flex;align-items:center;gap:12px;margin:10px 0;flex-wrap:wrap}
.mm-label{font-size:11px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.1em;min-width:64px}
.mm-tokens{display:flex;gap:8px}
.mm-token{padding:6px 14px;border:1px solid var(--line-2);background:var(--panel);color:var(--txt-2);border-radius:8px;cursor:pointer;font-weight:600;font-size:13px;transition:border-color .12s,color .12s,background .12s}
.mm-token:hover:not(.on){border-color:var(--line-3);color:var(--txt)}
/* Filled look + inset ring so the SELECTED token stays distinguishable from a merely keyboard-FOCUSED one
   (the global focus ring is also cyan); outline-offset pushes the focus ring clear of the button edge. */
.mm-token.on{border-color:var(--acc);color:var(--acc);background:rgba(47,230,224,.14);box-shadow:inset 0 0 0 1px var(--acc)}
.mm-token:focus-visible{outline-offset:2px}
.mm-amount{display:flex;align-items:center;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:2px 10px;flex:1 1 180px}
.mm-amount .mm-dollar{color:var(--txt-3);font-size:16px}
.mm-amount input{border:0;background:transparent;color:var(--txt);font-size:18px;width:100%;min-width:0;outline:none;padding:7px 2px}
/* Strip the native number spinner arrows — they overlap the custom amount pill's rounded corner. inputmode
   already drives the right mobile keypad, so nothing functional is lost. */
.mm-amount input[type=number]{-moz-appearance:textfield}
.mm-amount input::-webkit-outer-spin-button,.mm-amount input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Load-bearing payment guidance reads at AA contrast (var(--txt-3) on the panel bg falls below 4.5:1). */
.mmpay .muted,.mmpay .small,.pkg-breakdown{color:var(--txt-2)}
#mmPayBtn{width:100%;justify-content:center;padding:12px 16px;font-size:14px;margin-top:4px}
.mm-credits{font-size:15px;color:var(--txt-2);margin:12px 0}
.mm-credits strong{color:var(--acc);font-size:19px}
.mm-status{margin-top:10px;min-height:18px;line-height:1.5}
.mm-manual{margin:14px 0;max-width:560px}
.mm-manual summary{cursor:pointer;color:var(--acc);font-size:14px;width:fit-content}
.mm-manual[open] summary{margin-bottom:10px}

/* ── Credits: live pending payments ── */
.pendpay{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:14px 16px;margin:10px 0}
.pendtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px;flex-wrap:wrap}
.pendbar{height:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:5px;overflow:hidden;margin-bottom:8px}
.pendbar>span{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--sec));transition:width .6s ease}

/* Credits nav: low-balance emphasis */
nav a.credits-link[data-credits="ok"]{color:var(--ok);font-weight:600}
nav a.credits-link[data-credits="empty"]{color:var(--red);font-weight:600}

/* ── Registration wizard (multi-step) ── */
.auth-wizard{max-width:480px}
.stepper{list-style:none;display:flex;gap:0;padding:0;margin:0 0 22px;counter-reset:step}
.stepper li{flex:1;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt-3);position:relative;font-weight:600}
.stepper li:not(:last-child):after{content:"";flex:1;height:2px;background:var(--line-2);margin:0 10px}
.stepper li .dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);
  font-size:12px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--txt-3);flex:0 0 auto}
.stepper li.active{color:var(--acc)}.stepper li.active .dot{border-color:var(--acc);color:var(--acc);background:rgba(47,230,224,.12)}
.stepper li.done{color:var(--ok)}.stepper li.done .dot{border-color:var(--ok);color:#04201f;background:var(--ok)}
.pwreqs{list-style:none;padding:10px 12px;margin:4px 0 6px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-2);display:grid;gap:5px}
.pwreqs li{font-size:12.5px;color:var(--txt-3);display:flex;align-items:center;gap:8px}
.pwreqs li .tick{font-family:var(--mono);color:var(--txt-3);width:1em;display:inline-block;text-align:center}
.pwreqs li.ok{color:var(--ok)}.pwreqs li.ok .tick{color:var(--ok)}
.btn-dim{opacity:.55}
.feature-list{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:10px}
.feature-list li{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:12px 14px}
.feature-list .fic{font-size:18px;flex:0 0 auto;line-height:1.3}