/* ═══════════════════════════════════════════════════════════════════════════
   quiver-nav.css — the ONE header + status bar, shared by every Quiver page.
   Ships with quiver-nav.js. Load it LAST (it must win over a page's own CSS).

   WHY THIS FILE EXISTS
   --------------------
   Before this, 13 pages carried 8 different navs and 6 brand variants — three
   of them still said "Hood Index / TEST" or "hood safety", and three pages
   (ranked / smart_track / backtest) had no header at all. The header is now
   built in exactly one place; a page opts in with one <script> tag.

   TWO RULES THAT LOOK ODD BUT ARE LOAD-BEARING
   --------------------------------------------
   1. Every custom property is `--q`-prefixed and declared ON THE COMPONENT
      ROOTS (.qnav / .qstatus / .sm-backdrop / .page-toast), never on :root.
      Most pages ship their own CSS with their own --bg/--text/--border; a
      :root block here would either lose to them or silently repaint them.
      Self-contained tokens = the header looks identical on all 13 pages.

   2. The ROOT classes are namespaced (.qnav, .qstatus) but the INNER class
      names are NOT (.brand, .nmenu, .net-dot, .balchip, .acc-drop …). That is
      deliberate: terminal.js binds these elements by ID and then writes
      classes onto them — `setLive()` does `el.className = 'net-dot on'`,
      clobbering whatever else was there (terminal.js:1496). Renaming the
      inner classes would break the flagship. Scoping by ancestor gives us
      collision-safety without touching what terminal.js writes.

   Values are lifted verbatim from terminal.css (the redesign block, ~940-1500)
   so the shared header is pixel-identical to the terminal's.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens (mirrors terminal.css :root, --q-prefixed + component-scoped) ── */
.qnav,
.qstatus,
.sm-backdrop,
.qnav-drawer,
.page-toast {
  --q-bg: #0a0a0e;
  --q-surface: #13151f;
  --q-surface-2: #1e1e2b;
  --q-surface-3: #26283a;
  --q-surface-4: #2a2c39;
  --q-border: #2a2c39;
  --q-border-soft: rgba(255, 255, 255, .07);
  --q-text: #eef0f4;
  --q-text-dim: #c2c6d2;
  --q-text-mute: #8b8b9f;
  --q-accent: #d4e34c;
  --q-accent-soft: rgba(212, 227, 76, .14);
  --q-up: #26a69a;
  --q-down: #f23645;
  --q-down-bg: rgba(242, 54, 69, .12);
  --q-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --q-mono: "SF Mono", ui-monospace, SFMono-Regular, "IBM Plex Mono", Menlo, Consolas, monospace;
}

/* ═══ header ═══════════════════════════════════════════════════════════════
   On the terminal, .qnav is .app's first in-flow child and lands in the 54px
   grid row by AUTO-PLACEMENT — .app names its rows but never assigns .nav a
   grid-area (terminal.css:957). So DOM order is the placement. quiver-nav.js
   inserts at firstChild for exactly this reason; don't append.
   On every other page it's a normal 54px flex bar at the top of the flow. */
.qnav {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 54px;
  padding: 0 16px;
  background: var(--q-bg);
  border-bottom: 1px solid var(--q-border-soft);
  font-family: var(--q-font);
}
.qnav *,
.qnav *::before,
.qnav *::after { box-sizing: border-box; }

.qnav .brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px; letter-spacing: -.02em;
  color: var(--q-text); text-decoration: none; white-space: nowrap;
}
.qnav .brand .mk {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--q-accent); overflow: hidden; display: flex; flex: none;
}
.qnav .brand .mk img { width: 90%; height: 90%; object-fit: contain; margin: auto; }
.qnav .brand i.acc { font-style: normal; color: var(--q-accent); }

/* ── nav menu ── */
.qnav .nmenu { display: flex; align-items: center; gap: 2px; }
.qnav .nmenu > a,
.qnav .nmenu > .qm-wrap > .qm-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: 7px;
  color: var(--q-text-mute); font-family: var(--q-font); font-size: 13px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
}
.qnav .nmenu > a:hover,
.qnav .nmenu > a.on,
.qnav .nmenu > .qm-wrap > .qm-btn:hover,
.qnav .nmenu > .qm-wrap.open > .qm-btn,
.qnav .nmenu > .qm-wrap.on > .qm-btn {
  color: var(--q-text); background: var(--q-surface-2);
}
.qnav .nmenu .qm-cv { transition: transform .16s; flex: none; }
.qnav .nmenu .qm-wrap.open .qm-cv { transform: rotate(180deg); }

/* ── "Analyse" dropdown ── */
.qnav .qm-wrap { position: relative; display: flex; }
.qnav .qm-drop {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 216px;
  background: var(--q-surface); border: 1px solid var(--q-border); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  padding: 6px; display: none; z-index: 70;
}
.qnav .qm-wrap.open .qm-drop { display: block; }
.qnav .qm-drop a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px;
  color: var(--q-text-dim); font-size: 13.5px; text-decoration: none; white-space: nowrap;
}
.qnav .qm-drop a:hover { background: var(--q-surface-2); color: var(--q-text); }
.qnav .qm-drop a.on { color: var(--q-accent); }
.qnav .qm-drop a svg {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.qnav .grow { flex: 1; }

/* ── search ── */
.qnav .search {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; width: 246px;
  background: var(--q-surface); border: 1px solid var(--q-border); border-radius: 9px;
  color: var(--q-text-mute); font-size: 12.5px; white-space: nowrap; cursor: pointer;
}
.qnav .search:hover { border-color: var(--q-accent-soft); color: var(--q-text-dim); }
.qnav .search svg { width: 14px; height: 14px; flex: none; }
.qnav .search kbd {
  margin-left: auto; background: var(--q-surface-2); border: 1px solid var(--q-border);
  border-radius: 5px; padding: 1px 6px; font: 600 10px/1.4 var(--q-mono); color: var(--q-text-mute);
}

/* ── notifications bell (immediately left of search; ★ favourites removed) ── */
.qnav .bellwrap { position: relative; flex: none; }
.qnav .bell-btn {
  width: 36px; height: 34px; display: grid; place-items: center; position: relative;
  background: var(--q-surface); border: 1px solid var(--q-border); border-radius: 9px;
  color: var(--q-text-mute); cursor: pointer; transition: .14s;
}
.qnav .bell-btn:hover { color: var(--q-text-dim); border-color: var(--q-accent-soft); }
.qnav .bell-btn.on { color: #4bb69f; border-color: rgba(75, 182, 159, .5); }
.qnav .bell-btn svg { width: 17px; height: 17px; }
/* perfect circle: fixed square + 50% radius, digit centred by grid (never padding-skewed) */
.qnav .bell-badge {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 0;
  border-radius: 50%; background: #4bb69f; color: #04231d; box-sizing: content-box;
  font: 700 10px/1 var(--q-font); display: grid; place-items: center; border: 2px solid var(--q-bg);
}
.qnav .bell-badge.hide { display: none; }

.qn-drop {
  position: absolute; top: calc(100% + 9px); right: 0; width: 380px; max-width: calc(100vw - 24px);
  background: var(--q-surface); border: 1px solid var(--q-border); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .3);
  overflow: hidden; z-index: 70; opacity: 0; transform: translateY(-6px) scale(.98);
  pointer-events: none; transition: .16s cubic-bezier(.2, .7, .2, 1); font-family: var(--q-font);
}
.qn-drop.open { opacity: 1; transform: none; pointer-events: auto; }
.qn-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px 12px; }
.qn-head svg { width: 18px; height: 18px; color: var(--q-text-dim); }
.qn-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--q-text); }
.qn-clr {
  margin-left: auto; font-size: 11.5px; color: var(--q-text-mute); background: transparent;
  border: 1px solid var(--q-border); border-radius: 7px; padding: 5px 10px; cursor: pointer;
  transition: .14s; font-family: var(--q-font);
}
.qn-clr:hover:not(:disabled) { color: #4bb69f; border-color: rgba(75, 182, 159, .45); }
.qn-clr:disabled { opacity: .35; cursor: default; }
.qn-div { height: 1px; background: var(--q-border-soft); }
/* ~5 rows tall, scroll for the rest — notifications are never deleted */
.qn-list { max-height: 322px; overflow-y: auto; overscroll-behavior: contain; }
.qn-list::-webkit-scrollbar { width: 8px; }
.qn-list::-webkit-scrollbar-thumb { background: var(--q-surface-3); border-radius: 8px; }

.qn-row {
  display: flex; gap: 11px; padding: 12px 15px; cursor: pointer; position: relative;
  border-bottom: 1px solid var(--q-border-soft); transition: background .12s;
}
.qn-row:last-child { border-bottom: 0; }
.qn-row:hover { background: var(--q-surface-2); }
.qn-row.read { opacity: .62; }
.qn-row.read:hover { opacity: 1; }
.qn-row.unread::before {
  content: ""; position: absolute; left: 6px; top: 20px; width: 5px; height: 5px;
  border-radius: 50%; background: #4bb69f;
}
.qn-ic { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; margin-top: 1px; }
.qn-ic svg { width: 16px; height: 16px; }
.qn-ic.buy { background: rgba(75, 182, 159, .14); color: #4bb69f; }
.qn-ic.sell { background: rgba(196, 107, 100, .16); color: #c46b64; }
.qn-ic.tp { background: rgba(38, 166, 154, .12); color: var(--q-up); }
.qn-ic.sl { background: var(--q-down-bg); color: var(--q-down); }
.qn-ic.copy { background: var(--q-accent-soft); color: var(--q-accent); }
.qn-body { flex: 1; min-width: 0; }
.qn-title { font-size: 13px; font-weight: 600; color: var(--q-text); display: flex; align-items: center; gap: 7px; }
.qn-title .sym { font-weight: 700; }
.qn-line { font-size: 12px; line-height: 1.5; color: var(--q-text-mute); margin-top: 3px; }
.qn-line b { color: var(--q-text-dim); font-weight: 600; }
.qn-line .mc { font-family: var(--q-mono); color: var(--q-text-dim); }
.qn-line .pos { color: var(--q-up); font-weight: 600; }
.qn-line .neg { color: var(--q-down); font-weight: 600; }
.qn-time { flex: none; font-size: 11px; color: var(--q-text-mute); margin-top: 1px; }
.qn-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 46px 24px 52px; text-align: center; }
.qn-empty svg { width: 44px; height: 44px; color: var(--q-surface-4); margin-bottom: 4px; }
.qn-empty .t1 { font-size: 15px; color: var(--q-text-dim); }
.qn-empty .t2 { font-size: 12.5px; line-height: 1.5; color: var(--q-text-mute); max-width: 260px; }

/* ── live chip ── */
.qnav .net-chip {
  flex: none; display: flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--q-surface-2); border: 1px solid var(--q-border);
  border-radius: 999px; padding: 5px 11px;
  font: 600 10.5px/1 var(--q-mono); letter-spacing: .06em; color: var(--q-text-dim);
}
/* terminal.js setLive() writes `className = 'net-dot'` / `'net-dot on'` — these
   two selectors must keep matching exactly what it writes. */
.qnav .net-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--q-text-mute); transition: background .2s;
}
.qnav .net-dot.on { background: var(--q-up); box-shadow: 0 0 7px var(--q-up); }

/* ── account bar ── */
.qnav .acctbar { display: flex; align-items: center; gap: 10px; }
.qnav .connect-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--q-surface-2); border: 1px solid var(--q-border); border-radius: 999px;
  padding: 8px 14px; color: var(--q-text-dim); font-weight: 600; font-size: 13px; cursor: pointer;
}
.qnav .connect-btn:hover { border-color: var(--q-surface-3); color: var(--q-text); }

.qnav .balchip {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: var(--q-surface-2); border: 1px solid var(--q-border); border-radius: 999px;
  padding: 7px 12px 7px 10px; cursor: pointer; transition: border-color .15s, background .15s;
}
.qnav .balchip:hover,
.qnav .balchip.on { border-color: var(--q-surface-3); background: var(--q-surface-3); }
.qnav .balchip .bc-eth { flex: none; }
.qnav .balchip .amt {
  font-family: var(--q-mono); font-size: 13.5px; font-weight: 700;
  color: var(--q-text); letter-spacing: -.01em;
}
.qnav .balchip .cur { font-size: 11.5px; color: var(--q-text-mute); font-weight: 600; }
.qnav .balchip .cv { color: var(--q-text-mute); transition: transform .18s; }
.qnav .balchip.on .cv { transform: rotate(180deg); }

.qnav .acc-av {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  background: var(--q-surface-2); border: 1px solid var(--q-border);
  display: grid; place-items: center; color: var(--q-text-dim); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.qnav .acc-av:hover,
.qnav .acc-av.on { border-color: var(--q-surface-3); background: var(--q-surface-3); color: var(--q-text); }

/* ── wallets dropdown (#wcDrop) ── */
.qnav .wc-drop {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 250px;
  background: var(--q-surface); border: 1px solid var(--q-border); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  padding: 6px; display: none; z-index: 60; cursor: default;
  font-size: 12.5px; text-align: left;
}
.qnav .wc-drop.open { display: block; }
.qnav .wcap { display: flex; align-items: center; padding: 8px 10px 7px; font-size: 11px; color: var(--q-text-mute); }
.qnav .wcap .tot { margin-left: auto; font-family: var(--q-mono); color: var(--q-text-dim); font-weight: 600; }
.qnav .wfoot { margin-top: 5px; border-top: 1px solid var(--q-border-soft); padding-top: 4px; }
.qnav .wt-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--q-border); font-size: 12.5px; cursor: pointer; border-radius: 6px;
}
.qnav .wt-row:hover { background: rgba(255, 255, 255, .03); }
.qnav .wc-drop .wt-row:last-of-type { border-bottom: none; }
.qnav .wt-name { color: var(--q-text); font-weight: 600; white-space: nowrap; }
.qnav .wt-addr { color: var(--q-text-mute); white-space: nowrap; font-size: 11px; }
.qnav .wt-bal { margin-left: auto; padding-left: 12px; color: var(--q-text); font-weight: 700; white-space: nowrap; }
.qnav .wt-copy {
  display: inline-flex; align-items: center; flex: none; padding: 3px; margin-left: -3px;
  color: var(--q-text-mute); background: none; border: 0; border-radius: 4px; cursor: pointer;
}
.qnav .wt-copy:hover { color: var(--q-text); background: var(--q-accent-soft); }
.qnav .wt-copy.copied { color: var(--q-up); }
.qnav .wt-cb {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 16px; height: 16px; margin: 0; border-radius: 5px;
  border: 1.5px solid #3a3d4e; background: transparent; cursor: pointer;
  display: grid; place-items: center; transition: background .12s, border-color .12s;
}
.qnav .wt-cb:checked { background: var(--q-up); border-color: var(--q-up); }
.qnav .wt-cb:checked::after {
  content: ""; width: 4px; height: 8px;
  border: solid #06231e; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px);
}
.qnav .wt-cb:disabled { opacity: .5; cursor: default; }
.qnav .wt-err { animation: qwtErr 1.4s ease; }
@keyframes qwtErr { 0%, 100% { background: transparent; } 22% { background: rgba(240, 80, 80, .16); } }
.qnav .wt-empty { padding: 16px 12px; color: var(--q-text-mute); font-size: 12.5px; line-height: 1.5; text-align: center; }

/* ── account dropdown (#accDrop) ── */
.qnav .acc-drop {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 230px;
  background: var(--q-surface); border: 1px solid var(--q-border); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  padding: 6px; display: none; z-index: 60; cursor: default; text-align: left;
}
.qnav .acc-drop.open { display: block; }
.qnav .acc-head { padding: 11px 11px 10px; }
.qnav .acc-k { font-size: 11px; color: var(--q-text-mute); margin-bottom: 3px; }
.qnav .acc-v {
  font-size: 16px; font-weight: 700; color: var(--q-text);
  display: flex; align-items: center; gap: 8px; letter-spacing: -.01em;
}
.qnav .acc-v .d { width: 7px; height: 7px; border-radius: 50%; background: var(--q-up); flex: none; }
.qnav .acc-divide { height: 1px; background: var(--q-border-soft); margin: 3px 5px; }
.qnav .acc-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 8px;
  color: var(--q-text-dim); font-size: 13.5px; cursor: pointer; text-decoration: none;
}
.qnav .acc-item:hover { background: var(--q-surface-2); color: var(--q-text); }
.qnav .acc-item svg {
  width: 18px; height: 18px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.qnav .acc-item.out { color: var(--q-text-mute); }
.qnav .acc-item.out:hover { color: var(--q-down); background: var(--q-down-bg); }

/* ═══ status bar ═══════════════════════════════════════════════════════════
   On the terminal this is .app's last child → grid row 4 by auto-placement
   (terminal.css:499 also names it `grid-area: status`, which we keep so the
   footer can never wander into the main area). Elsewhere it is a normal
   bottom-of-flow bar; `margin-top:auto` pins it down on short pages when the
   host page makes <body> a flex column (quiver-nav.js does that for us). */
.qstatus {
  box-sizing: border-box;
  grid-area: status;
  display: flex; align-items: center; gap: 16px;
  height: 42px; padding: 0 16px;
  background: #000; border-top: 1px solid var(--q-border-soft);
  font-family: var(--q-font); font-size: 12px; color: var(--q-text-mute);
}
.qstatus .si { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.qstatus .si b { color: var(--q-text-dim); font-weight: 600; }
.qstatus .mono { font-family: var(--q-mono); }
.qstatus .grow { flex: 1; }
/* setLive() writes `className = 'st-dot'` / `'st-dot on'` — keep matching. */
.qstatus .st-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--q-text-mute); transition: background .2s;
}
.qstatus .st-dot.on { background: var(--q-up); box-shadow: 0 0 6px var(--q-up); }
.qstatus .st-eth { color: var(--q-text-dim); font-weight: 600; }
.qstatus .brandlbl { color: var(--q-text-mute); }
.qstatus .st-socials { display: inline-flex; align-items: center; gap: 13px; }
.qstatus .st-socials a {
  color: var(--q-text-mute); display: inline-flex; align-items: center; transition: color .12s;
}
.qstatus .st-socials a:hover { color: var(--q-text); }

/* ═══ search modal ═══ (body-level; #searchModal is unique across the app) */
.sm-backdrop {
  position: fixed; inset: 0; z-index: 1100; background: rgba(8, 9, 13, .62);
  backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center;
  padding: 88px 24px 24px; animation: q-sm-fade .14s ease-out; font-family: var(--q-font);
}
@keyframes q-sm-fade { from { opacity: 0; } to { opacity: 1; } }
.sm-backdrop .sm-pop {
  width: min(860px, 100%); max-height: calc(100vh - 120px);
  background: var(--q-surface); border: 1px solid var(--q-border); border-radius: 14px;
  box-shadow: 0 24px 80px -20px #000, 0 6px 18px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; overflow: hidden;
  animation: q-sm-in .18s cubic-bezier(.2, .8, .2, 1);
}
@keyframes q-sm-in { from { opacity: 0; transform: scale(.97) translateY(-6px); } to { opacity: 1; transform: none; } }
.sm-backdrop .sm-hd { padding: 14px 16px; border-bottom: 1px solid var(--q-border-soft); }
.sm-backdrop .sm-q {
  display: flex; align-items: center; gap: 10px; background: var(--q-surface-2);
  border: 1px solid var(--q-border); border-radius: 10px; padding: 10px 14px; color: var(--q-text-mute);
}
.sm-backdrop .sm-ic { width: 14px; height: 14px; flex: none; }
.sm-backdrop .sm-input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--q-text); font: 500 13px/1 var(--q-font);
}
.sm-backdrop .sm-input::placeholder { color: var(--q-text-mute); }
.sm-backdrop .sm-q kbd {
  font: 500 10px/1 var(--q-mono); color: var(--q-text-mute);
  border: 1px solid var(--q-border); border-radius: 4px; padding: 3px 6px;
}
.sm-backdrop .sm-tabs {
  display: flex; align-items: center; gap: 7px; padding: 11px 16px;
  border-bottom: 1px solid var(--q-border-soft);
}
.sm-backdrop .sm-chip {
  display: inline-flex; align-items: center; background: var(--q-surface-2);
  border: 1px solid var(--q-border); border-radius: 999px; padding: 6px 12px;
  font: 600 11.5px/1 var(--q-font); color: var(--q-text-dim); white-space: nowrap;
}
.sm-backdrop .sm-chip.on { background: var(--q-accent-soft); color: var(--q-accent); border-color: transparent; }
.sm-backdrop .sm-tbl-wrap { overflow: auto; min-height: 0; }
.sm-backdrop .sm-list { padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.sm-backdrop .sm-empty { padding: 22px; text-align: center; color: var(--q-text-mute); font: 500 12px/1 var(--q-mono); }
.sm-backdrop .sm-card {
  display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 11px;
  cursor: pointer; background: var(--q-surface-2); border: 1.5px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.sm-backdrop .sm-card:hover { background: var(--q-surface-3); }
.sm-backdrop .sm-av2 { position: relative; flex: none; width: 40px; height: 40px; }
.sm-backdrop .sm-av-box {
  width: 40px; height: 40px; border-radius: 11px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--q-surface-3), var(--q-surface-2));
  border: 1px solid var(--q-border-soft);
}
.sm-backdrop .sm-av-box img { width: 100%; height: 100%; object-fit: cover; }
.sm-backdrop .sm-av-letter { font: 700 16px/1 var(--q-font); color: var(--q-text-dim); }
.sm-backdrop .sm-av-proto {
  position: absolute; right: -4px; top: -4px; font: 700 8px/1 var(--q-mono); color: var(--q-accent);
  background: var(--q-surface-3); border: 1.5px solid var(--q-surface); border-radius: 5px; padding: 2px 3px;
}
.sm-backdrop .sm-id { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sm-backdrop .sm-id1 { display: flex; align-items: center; gap: 2px; font: 700 13.5px/1 var(--q-font); color: var(--q-text); }
.sm-backdrop .sm-id-q { color: var(--q-text-mute); font-weight: 600; }
.sm-backdrop .sm-new {
  margin-left: 6px; padding: 1px 5px; border: 1px solid #1fb6c9; border-radius: 3px;
  color: #1fb6c9; font-size: 9px; font-weight: 700; letter-spacing: .5px;
}
.sm-backdrop .sm-addr { color: var(--q-text-mute); font-size: 11px; }
.sm-backdrop .sm-mut { color: var(--q-text-mute); font-weight: 400; }
.sm-backdrop .sm-mx { margin-left: auto; display: flex; align-items: center; gap: 20px; flex: none; }
.sm-backdrop .sm-m { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; white-space: nowrap; }
.sm-backdrop .sm-m i { font: 600 9.5px/1 var(--q-font); font-style: normal; color: var(--q-text-mute); letter-spacing: .07em; }
.sm-backdrop .sm-m b { font: 700 12.5px/1 var(--q-mono); color: var(--q-text); font-variant-numeric: tabular-nums; }
.sm-backdrop .sm-m b.up { color: var(--q-up); }
.sm-backdrop .sm-m b.down { color: var(--q-down); }
.sm-backdrop .sm-m b.sm-mut { color: var(--q-text-mute); font-weight: 400; }
.sm-backdrop .sm-m:nth-child(1) { min-width: 92px; }
.sm-backdrop .sm-m:nth-child(2) { min-width: 60px; }
.sm-backdrop .sm-m:nth-child(3) { min-width: 80px; }
.sm-backdrop .sm-m:nth-child(4) { min-width: 80px; }
.sm-backdrop .sm-m:nth-child(5) { min-width: 80px; }

/* ═══ toast ═══ (pageToast() creates #pageToast on demand and appends to body) */
.page-toast {
  position: fixed; top: 18px; left: 50%; transform: translate(-50%, -12px); z-index: 200;
  display: flex; align-items: center; gap: 9px;
  background: var(--q-surface-3); border: 1px solid var(--q-border); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55); padding: 10px 15px;
  font-family: var(--q-font); font-size: 13.5px; font-weight: 600; color: var(--q-text);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.page-toast.show { opacity: 1; transform: translate(-50%, 0); }
.page-toast .pt-ic {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--q-up); color: #06231e; flex: none;
}
.page-toast.rm .pt-ic { background: var(--q-surface-4); color: var(--q-text-dim); }
.page-toast.err .pt-ic { background: var(--q-down); color: #fff; }
.page-toast .pt-ic svg {
  width: 11px; height: 11px; stroke: currentColor; stroke-width: 3.2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.page-toast .pt-sub { color: var(--q-text-mute); font-weight: 500; font-family: var(--q-mono); font-size: 12px; }

/* ── narrow screens: shed the search box first, then the nav labels.
      The account bar and the brand never collapse — they are the two things a
      user needs at every width. ── */
@media (max-width: 1180px) {
  .qnav { gap: 12px; }
  .qnav .search { width: 150px; }
  .qnav .search kbd { display: none; }
}
@media (max-width: 900px) {
  .qnav .search span { display: none; }
  .qnav .search { width: auto; padding: 0 10px; }
  .qnav .net-chip { display: none; }
  .qnav .balchip .cur { display: none; }
}
@media (max-width: 820px) {
  /* Below this the four nav items cannot coexist with the account bar. The bar
     wins — but the nav is no longer lost: the hamburger (shown here) opens a
     drawer carrying the full NAV, so every destination stays reachable. */
  .qnav .nmenu { display: none; }
  .qnav .qnav-burger { display: grid; } /* .qnav-scoped so it beats the base display:none regardless of source order */
}
@media (max-width: 720px) {
  .qnav .brand span:not(.mk) { display: none; }
  .qstatus .brandlbl { display: none; }
}
@media (max-width: 430px) {
  /* Measured at 375px: the status bar ran to 385 and scrolled every page sideways —
     dropping the brand label at 720 was not enough on a phone. The ETH price goes
     next: it is the one cell duplicated elsewhere (the terminal's own header and the
     explorer both carry it), where BLOCK and the live dot are this bar's whole job. */
  .qstatus { gap: 10px; padding: 0 12px; }
  .qstatus .st-eth { display: none; }
}
/* Phones: anchor the notifications dropdown to the VIEWPORT, not to the bell. Right-anchored to the
   bell it slid off the LEFT edge on a phone — the bell isn't at the screen edge, and a 100vw-24px
   panel is wider than the gap from the bell to the left. `fixed` + symmetric margins centres it under
   the header and also escapes .qnav's `overflow-x: clip`. */
@media (max-width: 720px) {
  .qn-drop {
    position: fixed;
    top: 60px; /* clears the 54px bar */
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
  }
  .qn-list { max-height: 70vh; }
}
/* Last line of defence: these bars are single rows that must never widen the page,
   whatever a future control adds to them. .qstatus needed this as much as .qnav — it
   is the one that actually escaped. */
.qnav,
.qstatus { max-width: 100vw; overflow-x: clip; }

/* ═══ mobile hamburger + off-canvas drawer (≤820px) ════════════════════════════════════════════
   Fills the mobile-nav gap: below 820 the .nmenu is hidden, so the burger (shown in the 820 block
   above) opens this drawer, built once from NAV in quiver-nav.js. The burger is display:none on
   desktop and the drawer is an inert fixed overlay until .open → the header is byte-identical at
   desktop widths on all 13 pages. Tokens are the --q- set (declared on .qnav-drawer). */
.qnav-burger {
  display: none; width: 38px; height: 38px; flex: none; margin-left: 2px;
  place-items: center; border: 1px solid var(--q-border); border-radius: 9px;
  background: var(--q-surface-2); color: var(--q-text-dim); cursor: pointer;
}
.qnav-burger svg { width: 20px; height: 20px; }

.qnav-drawer { position: fixed; inset: 0; z-index: 1200; visibility: hidden; font-family: var(--q-font); }
.qnav-drawer.open { visibility: visible; }
/* strictly mobile: never let a drawer left .open survive a resize up to desktop (burger is hidden there) */
@media (min-width: 821px) { .qnav-drawer { display: none; } }
.qnav-drawer .qd-bd { position: absolute; inset: 0; background: rgba(3, 3, 6, .6); opacity: 0; transition: opacity .28s; }
.qnav-drawer.open .qd-bd { opacity: 1; }
.qnav-drawer .qd-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 82%; max-width: 320px;
  display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, #161824, var(--q-surface));
  border-left: 1px solid var(--q-border); box-shadow: -24px 0 60px -14px rgba(0, 0, 0, .7);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.qnav-drawer.open .qd-panel { transform: none; }
.qnav-drawer .qd-panel::-webkit-scrollbar { width: 0; }

.qnav-drawer .qd-top { display: flex; align-items: center; gap: 11px; padding: calc(14px + env(safe-area-inset-top)) 14px 14px; border-bottom: 1px solid var(--q-border-soft); flex: none; }
.qnav-drawer .qd-brand { display: flex; align-items: center; gap: 9px; font-weight: 750; font-size: 15.5px; letter-spacing: -.01em; color: var(--q-text); text-decoration: none; }
.qnav-drawer .qd-mk { width: 30px; height: 30px; border-radius: 8px; background: var(--q-accent); overflow: hidden; display: flex; flex: none; }
.qnav-drawer .qd-mk img { width: 90%; height: 90%; object-fit: contain; margin: auto; }
.qnav-drawer .qd-brand i { font-style: normal; color: var(--q-accent); }
.qnav-drawer .qd-x { margin-left: auto; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--q-border); border-radius: 10px; background: var(--q-surface-2); color: var(--q-text-mute); cursor: pointer; }
.qnav-drawer .qd-x svg { width: 17px; height: 17px; }

.qnav-drawer .qd-nav { padding: 9px 10px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 2px; }
.qnav-drawer .qd-sec { padding: 15px 12px 7px; font-family: var(--q-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--q-text-mute); }
.qnav-drawer .qd-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; color: var(--q-text-dim); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.qnav-drawer .qd-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 1px solid var(--q-border); border-radius: 9px; background: var(--q-surface-2); color: var(--q-text-mute); }
.qnav-drawer .qd-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qnav-drawer .qd-item.qd-sub { font-size: 13.5px; font-weight: 500; color: var(--q-text-mute); }
.qnav-drawer .qd-item.qd-sub .qd-ic { width: 28px; height: 28px; background: transparent; border: 0; }
.qnav-drawer .qd-item.qd-sub .qd-ic svg { width: 16px; height: 16px; }
.qnav-drawer .qd-item:active { background: var(--q-surface-2); }
.qnav-drawer .qd-item.on { color: var(--q-accent); background: var(--q-accent-soft); }
.qnav-drawer .qd-item.on .qd-ic { color: var(--q-accent); border-color: rgba(212, 227, 76, .35); background: rgba(212, 227, 76, .14); }
.qnav-drawer .qd-item.on::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--q-accent); }

@media (prefers-reduced-motion: reduce) {
  .qnav *, .qstatus *, .sm-backdrop, .sm-backdrop *, .page-toast {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Clipboard CA chip ────────────────────────────────────────────────────────
   A token address copied ANYWHERE lands mid-header as an avatar + symbol + MC
   chip; one click opens its page (quiver-nav.js `caScan`). The slot is empty and
   borderless until something resolves, so an idle/denied header is unchanged.

   Placement: after .nmenu, before .grow — so it sits between the menu and the
   search box and is pushed left by .grow as the viewport narrows, instead of
   being absolutely centred where it would collide with the search input. */
.ca-slot { display: flex; align-items: center; }
.ca-slot:empty { display: none; }
/* ONE pill holds the link AND the ✕. They used to be two sibling pills, each with its own border
   and lime glow — the seam between them read as two separate chips (user, 2026-07-17). The wrapper
   owns border/background/glow/animation; the children are transparent and only divide with a hair
   rule. caRender re-creates the wrapper per chip, so the slide-in still replays. */
.ca-pill {
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, #1b1d15, #141509);
  border: 1px solid rgba(198, 242, 78, .45); border-radius: 999px;
  box-shadow: 0 4px 18px rgba(198, 242, 78, .10), 0 2px 10px rgba(0, 0, 0, .5);
  overflow: hidden; /* clips the children's hover tint to the pill's own rounding */
  animation: ca-in .3s cubic-bezier(.2, .9, .3, 1.25) both;
}
.ca-pill:hover { border-color: #c6f24e; }
@keyframes ca-in { from { transform: translateY(-22px); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ca-pill { animation: none } }
.ca-chip {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 5px 9px 5px 9px; background: transparent; border: 0;
}
.ca-chip:hover { background: rgba(198, 242, 78, .07); }
.ca-chip .cc-clip { color: var(--q-text-mute); display: flex; flex: none; }
.ca-chip .cc-av { width: 22px; height: 22px; border-radius: 50%; flex: none; object-fit: cover;
  background: #26292f; border: 1px solid rgba(255, 255, 255, .14); }
.ca-chip .cc-noimg { display: grid; place-items: center; font: 700 11px var(--q-sans, system-ui); color: var(--q-text); }
/* The chip's own text is WHITE — it is the thing being offered, not a caption
   (user's call 2026-07-17). Only the MC rides muted beside it. */
.ca-chip .cc-sym { font: 700 13px var(--q-sans, system-ui); color: #ffffff; white-space: nowrap; }
.ca-chip .cc-addr { font: 500 12px var(--q-mono, ui-monospace, monospace); color: #ffffff; }
.ca-chip .cc-mc { font: 500 11px var(--q-mono, ui-monospace, monospace); color: var(--q-text-mute); white-space: nowrap; }
.ca-chip .cc-go { font: 600 10.5px var(--q-sans, system-ui); color: #c6f24e;
  background: rgba(198, 242, 78, .12); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.ca-chip .cc-spin { width: 12px; height: 12px; flex: none; border: 2px solid #33362c;
  border-top-color: #c6f24e; border-radius: 50%; animation: ca-sp 1s linear infinite; }
@keyframes ca-sp { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .ca-chip .cc-spin { animation: none } }
/* ✕ lives INSIDE the pill: no border of its own, just a hair divider. */
.ca-x {
  display: flex; align-items: center; background: transparent; border: 0;
  border-left: 1px solid rgba(255, 255, 255, .08);
  padding: 0 9px; color: var(--q-text-mute); cursor: pointer;
}
.ca-x:hover { color: var(--q-text); background: rgba(255, 255, 255, .05); }
.ca-chip:focus-visible, .ca-x:focus-visible { outline: 2px solid #c6f24e; outline-offset: -2px; }

/* Narrow viewports: the menu + search already own the row — drop the chip rather
   than squeeze it (the copied CA is still one search away). */
@media (max-width: 1120px) { .ca-slot { display: none; } }

/* ── Wallet Tracker notification deck (canonical home) ───────────────────────────────────────────
   terminal.js renders this GLOBAL toast (tracked-wallet trade + trade-verdict cards) on ANY page it
   loads — explorer / pulse / terminal — but its styles used to live only in terminal.css, so on
   pages without it (the explorer) the deck rendered UNSTYLED: full-size, unconstrained avatar images
   (the giant pink blocks) stacked at the bottom. It belongs in the shared nav CSS, loaded on every
   page that has the nav. The four terminal-palette variables are pinned on #wtnDeck (and inherited by
   its .wtn-* children) so the deck looks identical no matter the host page's palette — the explorer
   uses --tp/--teal/--red, not --text/--up/--down. */
#wtnDeck { --text:#eef0f4; --surface:#13151f; --up:#26a69a; --down:#f23645;
  position: fixed; top: 38px; left: 50%; transform: translateX(-50%); width: 328px; z-index: 4000; pointer-events: none; }
#wtnDeck .wtn-bar, #wtnDeck .wtn-card { pointer-events: auto; }
.wtn-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; height: 22px; margin-bottom: 8px; }
.wtn-count { font: 600 11px var(--sans); color: var(--ts); }
.wtn-clear { font: 600 11px var(--sans); color: var(--tm); background: rgba(255,255,255,.06); border: 1px solid var(--hair); border-radius: 20px; padding: 3px 10px; cursor: pointer; }
.wtn-clear:hover { color: var(--text); }
.wtn-stack { position: relative; }
.wtn-card { position: absolute; top: 0; left: 0; right: 0; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 12px 14px; box-shadow: 0 12px 34px rgba(0,0,0,.55); transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .24s; }
.wtn-card.out { opacity: 0; transform: translateX(34px) scale(.96) !important; }
.wtn-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wtn-hd b { font: 500 12px var(--sans); color: var(--ts); }
.wtn-x { color: var(--tm); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; }
.wtn-x:hover { color: var(--text); }
.wtn-main { display: flex; gap: 11px; align-items: flex-start; }
.wtn-av { width: 46px; height: 46px; border-radius: 11px; flex: none; position: relative; display: flex; align-items: center; justify-content: center; font: 700 15px var(--sans); color: #fff; }
.wtn-av img { width: 100%; height: 100%; border-radius: 11px; object-fit: cover; }
.wtn-vb { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); border: 2px solid var(--surface); display: flex; align-items: center; justify-content: center; font-size: 8px; }
.wtn-info { flex: 1; min-width: 0; }
.wtn-toprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wtn-nm { flex: 1; min-width: 0; font: 600 15px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wtn-l2 { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 13px var(--sans); white-space: nowrap; }
.wtn-emo { font-size: 14px; flex: none; }
.wtn-wn { color: var(--ts); max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtn-dot { color: var(--tm); flex: none; }
.wtn-act { flex: none; }
.wtn-act.b { color: var(--up); } .wtn-act.s { color: var(--down); }
.wtn-venue { flex: none; background: rgba(255,255,255,.06); border-radius: 20px; padding: 3px 9px; font: 600 11px var(--sans); color: var(--ts); }
.wtn-mc { font: 12px var(--sans); color: var(--tm); margin-top: 5px; }
/* Trade-verdict card ('fill' kind) — same deck, same shell; only the status chip is tinted. */
.wtn-card.wtn-fill { border-left: 3px solid var(--hair); }
.wtn-card.wtn-fill.confirmed { border-left-color: var(--up); }
.wtn-card.wtn-fill.reverted { border-left-color: var(--down); }
.wtn-card.wtn-fill.pending { border-left-color: var(--tm); }
.wtn-fill.confirmed .wtn-venue { background: rgba(79,184,155,.16); color: var(--up); }
.wtn-fill.reverted .wtn-venue { background: rgba(242,54,69,.16); color: var(--down); }
.wtn-fill.pending .wtn-venue { background: rgba(255,255,255,.06); color: var(--ts); }
.wtn-ft { display: flex; margin: 11px -14px -12px; border-top: 1px solid var(--hair); }
.wtn-b { flex: 1; text-align: center; padding: 11px; font: 600 13px var(--sans); color: #fff; cursor: pointer; background: none; border: 0; }
.wtn-b:hover { background: rgba(255,255,255,.05); }
.wtn-b:first-child { border-right: 1px solid var(--hair); }