:root {
  --board: #16151a;
  --board-grain: #201e25;
  --card: #211f26;
  --card-edge: #322f38;
  --paper: #ebe6da;
  --ink: #d9d4c7;
  --ink-dim: #8b8791;
  --pin: #e2a63f;
  --danger: #d84f42;
  --safe: #62a877;
  --string: #c14a3d;
  --creator: #a06fd6;
  --echo: #6b6772;
  /* RGB triplets (no # , no alpha) for every rgba(...) below that needs to re-theme
     alongside --pin/--danger/--safe rather than stay a literal color — .sniper-theme
     (snipe.css) overrides these same four to its own neon-terminal values, and every
     rgba(var(--pin-rgb), X) reference here then re-themes automatically. Kept in sync by
     hand with the hex above (CSS has no built-in hex-to-rgb function), so if you ever
     change --pin/--danger/--safe/--creator, update the matching -rgb line too. */
  --pin-rgb: 226,166,63;
  --danger-rgb: 216,79,66;
  --safe-rgb: 98,168,119;
  --creator-rgb: 160,111,214;
}

* { box-sizing: border-box; }

/* Flex column so .site-footer's `margin-top: auto` pins it to the bottom of the
   viewport on short pages (unlock-success, a signed-out Stats) instead of floating
   halfway up. Page wrappers (.layout, .sniper-layout, …) are plain block children
   and stretch full-width as flex items, same as before. */
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(var(--pin-rgb),0.06), transparent 60%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,0.015), transparent 50%),
    var(--board);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 14px),
    radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(var(--pin-rgb),0.06), transparent 60%),
    var(--board);
  background-size: auto, 22px 22px, auto, auto;
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  min-height: 100vh;
}

.layout {
  max-width: 1320px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
}

/* One quiet page-entrance beat, site-wide — content rises 6px and fades in over 0.3s.
   Pure CSS on containers that already exist (no script, no layout thrash, nothing
   loads later because of it), and skipped entirely for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .layout, .sniper-layout { animation: page-enter 0.3s ease-out; }
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

.board {
  min-width: 0;
}

.case-header .tag {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--pin);
  margin-bottom: 18px;
  text-shadow: 0 0 12px rgba(var(--pin-rgb),0.5);
}

.case-header h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 7vw, 68px);
  line-height: 0.98;
  margin: 0 0 20px;
  color: var(--paper);
}

.cursor {
  color: var(--pin);
  animation: blink 1.1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.subhead {
  max-width: 520px;
  color: var(--ink-dim);
  line-height: 1.55;
  font-size: 14.5px;
}

.about-toggle {
  display: inline-block;
  margin-top: 16px;
  background: none;
  border: none;
  color: var(--pin);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.about-panel {
  max-width: 560px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.about-panel.open {
  max-height: 400px;
  opacity: 1;
  margin-top: 14px;
}

.about-panel p {
  margin: 0 0 10px;
}

.about-panel strong {
  color: var(--paper);
}

.disclaimer-banner {
  margin-top: 24px;
  background: rgba(var(--pin-rgb),0.08);
  border: 1px solid rgba(var(--pin-rgb),0.3);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--pin);
}

/* Reusable across index.html/pricing.html/snipe.html — a one-line pointer to the Trust
   Center, placed near the top of a page rather than buried in the footer link list
   (matches every other page's disclaimer-banner in shape, but intentionally reads as
   reassuring rather than cautionary, so it uses --safe-rgb, not --pin-rgb). */
.trust-callout {
  display: block;
  margin-top: 16px;
  background: rgba(var(--safe-rgb),0.08);
  border: 1px solid rgba(var(--safe-rgb),0.3);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--safe);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.trust-callout:hover {
  background: rgba(var(--safe-rgb),0.14);
  border-color: rgba(var(--safe-rgb),0.5);
}
.trust-callout strong { color: var(--safe); }

.intake {
  margin-top: 48px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  padding: 24px;
  position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}

.intake::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 28px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pin);
  box-shadow: 0 0 0 0 rgba(var(--pin-rgb),0.5);
  animation: pulse-pin 2.4s ease-out infinite;
}

@keyframes pulse-pin {
  0% { box-shadow: 0 0 0 0 rgba(var(--pin-rgb),0.45); }
  70% { box-shadow: 0 0 0 10px rgba(var(--pin-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--pin-rgb),0); }
}

.intake label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.intake-row {
  display: flex;
  gap: 10px;
}

#mint-input {
  flex: 1;
  background: #14131720;
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  padding: 14px 14px;
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s;
}

#mint-input:focus {
  border-color: var(--pin);
  box-shadow: 0 0 0 3px rgba(var(--pin-rgb),0.12);
}

#scan-btn {
  background: linear-gradient(135deg, #efb960, var(--pin));
  color: #1a1508;
  border: none;
  border-radius: 10px;
  padding: 0 26px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--pin-rgb),0.25);
  transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
}

#scan-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--pin-rgb),0.35); }
#scan-btn:active { transform: scale(0.98); }
#scan-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Same visual treatment as #scan-btn, generalized as a reusable class rather than an id
   for any other primary-action link/button (e.g. the homepage's Sniper Desk CTA). */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #efb960, var(--pin));
  color: #1a1508;
  border: none;
  border-radius: 10px;
  padding: 12px 26px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--pin-rgb),0.25);
  transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
}
.cta-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--pin-rgb),0.35); }
.cta-btn:active { transform: scale(0.98); }

.status-line {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-dim);
  min-height: 16px;
}

.status-line.error { color: var(--danger); }

/* ─── Checking Animation — a moving scan-sweep bar + blinking status text, shown
   while a check/scan is actually in flight (Scanner's Run Scan, Sniper Desk's
   Check). Base color is this page's own accent (--pin); .sniper-theme overrides it
   to --safe in snipe.css so the Sniper Desk keeps its existing green, while every
   other page gets a matching amber version for free — same underlying system,
   themed per page rather than one page borrowing the other's colors outright. */
.status-line.checking {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--pin);
}

.checking-scan {
  position: relative;
  width: 30px;
  height: 4px;
  border-radius: 8px;
  background: rgba(var(--pin-rgb), 0.15);
  overflow: hidden;
  flex-shrink: 0;
}

.checking-scan::after {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: var(--pin);
  border-radius: 8px;
  box-shadow: 0 0 6px var(--pin);
  animation: checking-scan-sweep 1.1s ease-in-out infinite;
}

@keyframes checking-scan-sweep {
  0%   { left: -40%; }
  100% { left: 100%; }
}

.checking-text {
  animation: blink-check 1.4s ease-in-out infinite;
}

@keyframes blink-check {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* SAFETY / OPPORTUNITY / CONFIDENCE readout — the entry-read model always computes
   all three; this surfaces them as plain numbers instead of only implying them via
   a tier badge. Shared so the Scanner's entry read matches the Sniper Desk's. */
/* Restyled as three score tiles (Safety/Opportunity/Confidence) matching the
   redesign's Check Result card — was plain inline text. Safety/Confidence read
   as "how sure are we" (green); Opportunity is a separate axis (amber), not a
   pass/fail signal, so it gets its own color rather than following the other two. */
.entry-score-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}
.entry-score-item {
  background: var(--board);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.entry-score-item strong {
  display: block;
  color: var(--safe);
  font-size: 20px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  margin-top: 4px;
}
.entry-score-item:nth-child(2) strong {
  color: var(--pin);
}

.hidden { display: none; }

.results {
  margin-top: 40px;
  animation: fadein 0.4s ease;
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.token-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.token-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--card);
  border: 2px solid var(--pin);
  box-shadow: 0 0 20px rgba(var(--pin-rgb),0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--pin);
  flex-shrink: 0;
}

.token-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.token-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--paper);
  line-height: 1.2;
}

.token-symbol {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--pin);
  text-transform: uppercase;
}

.stat-box {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-left: 3px solid var(--ink-dim);
  border-radius: 10px;
  padding: 16px 18px;
  transition: border-left-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.stat-box:hover { transform: translateY(-2px); }

.stat-box.danger { border-left-color: var(--danger); box-shadow: -4px 0 24px -8px rgba(var(--danger-rgb),0.35); }
.stat-box.caution { border-left-color: var(--pin); box-shadow: -4px 0 24px -8px rgba(var(--pin-rgb),0.3); }
.stat-box.safe { border-left-color: var(--safe); box-shadow: -4px 0 24px -8px rgba(var(--safe-rgb),0.3); }

.stat-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.info-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--pin);
  color: #1a1408;
  font-size: 11px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 rgba(var(--pin-rgb),0.5);
  animation: info-btn-pulse 1.8s ease-in-out 3;
}

.info-btn:hover {
  background: var(--paper);
  animation: none;
}

@keyframes info-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--pin-rgb),0.45); }
  50% { box-shadow: 0 0 0 5px rgba(var(--pin-rgb),0); }
}

.info-toggle {
  cursor: pointer;
}

span.info-toggle {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.stat-info {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  text-transform: none;
  letter-spacing: normal;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease, transform 0.25s ease;
}

.stat-info.open {
  max-height: 200px;
  opacity: 1;
  margin-top: 10px;
  transform: translateY(0) scale(1);
}

.stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--paper);
}

/* Risk % — the one big number, deliberately the most prominent thing on the results panel
   (see app.js's renderRiskPct: built from the same hardReasons/softReasons the "Why This
   Verdict" list below shows, so it can never read differently than the reasons under it).
   Three tiers matching the same danger/pin/safe palette every other badge on this page
   already uses, just turned up to the size an at-a-glance number deserves. */
.risk-pct-display {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.risk-pct-value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.01em;
}

.risk-pct-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transform: translateY(-4px);
}

.risk-pct-display.extreme .risk-pct-value { color: var(--danger); text-shadow: 0 0 28px rgba(var(--danger-rgb), 0.45); }
.risk-pct-display.caution .risk-pct-value { color: var(--pin); text-shadow: 0 0 28px rgba(var(--pin-rgb), 0.4); }
.risk-pct-display.low .risk-pct-value { color: var(--safe); text-shadow: 0 0 28px rgba(var(--safe-rgb), 0.4); }

.verdict-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.verdict-strip .info-btn {
  margin-right: 4px;
}

#info-verdict {
  margin-bottom: 22px;
}

.verdict-badge {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border-radius: 10px;
  white-space: nowrap;
}

.verdict-badge.danger { background: rgba(var(--danger-rgb),0.15); color: var(--danger); border: 1px solid rgba(var(--danger-rgb),0.4); }
.verdict-badge.safe { background: rgba(var(--safe-rgb),0.15); color: var(--safe); border: 1px solid rgba(var(--safe-rgb),0.4); }
.verdict-badge.caution { background: rgba(var(--pin-rgb),0.15); color: var(--pin); border: 1px solid rgba(var(--pin-rgb),0.4); }
.verdict-badge.unknown { background: rgba(139,135,145,0.12); color: var(--ink-dim); border: 1px solid rgba(139,135,145,0.35); }

.verdict-meta {
  flex: 1;
}

.mint-row {
  font-size: 11.5px;
  color: var(--ink-dim);
  word-break: break-all;
}

.board-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
}

@media (max-width: 760px) {
  .board-grid { grid-template-columns: 1fr; }
}

.panel-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 12px;
}

.graph-panel, .cards-panel, .safety-reasons-panel {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* Why This Verdict — the full hard/soft/positive reasoning behind the verdict badge (see
   app.js's renderSafetyReasons), same reasons the Sniper Desk's Safe Mode shows. Hard
   reasons (the ones that actually flip the verdict) get the strongest treatment; soft is a
   toned-down version of the same warning color; positive uses --safe so a clean result
   reads as reassuring, not just an absence of red. */
.safety-reasons-panel { margin-bottom: 24px; }
.safety-reason-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.safety-reason {
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid var(--card-edge);
  background: rgba(255,255,255,0.02);
}
.safety-reason.hard { border-left-color: var(--danger); background: rgba(var(--danger-rgb),0.08); color: var(--paper); }
.safety-reason.soft { border-left-color: var(--pin); background: rgba(var(--pin-rgb),0.07); color: var(--paper); }
.safety-reason.positive { border-left-color: var(--safe); background: rgba(var(--safe-rgb),0.06); color: var(--ink-dim); }
/* Advisory — informational only, never flips the verdict (e.g. "couldn't verify LP
   lock"); deliberately not amber/red so it reads as a caveat, not a warning. */
.safety-reason.advisory { border-left-color: var(--ink-dim); background: rgba(255,255,255,0.03); color: var(--ink-dim); }
/* Invalidation — "how close is this to a different verdict," same thresholds the
   checks above already gate on. Distinct from advisory (caveat) and hard/soft
   (already a problem): this is "not a problem yet, but watch it." Same purple as the
   Sniper Desk's equivalent note (snipe.css's .repeat-note.invalidation-note). */
.safety-reason.invalidation { border-left-color: var(--creator); background: rgba(var(--creator-rgb),0.06); color: var(--ink-dim); }

#graph {
  width: 100%;
  height: auto;
}

.graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--card-edge);
  font-size: 10.5px;
  color: var(--ink-dim);
}

.graph-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.graph-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

@keyframes line-in {
  to { stroke-opacity: 0.85; }
}

@keyframes node-in {
  to { opacity: 1; }
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 520px;
  overflow-y: auto;
}

.cluster-card {
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid var(--card-edge);
  background: #1a1820;
  transition: transform 0.15s, box-shadow 0.15s;
}

.cluster-card:hover {
  transform: translateY(-2px);
}

.cluster-card.flagged {
  border-color: rgba(var(--danger-rgb),0.5);
  background: rgba(var(--danger-rgb),0.07);
}

.cluster-card.flagged:hover {
  box-shadow: 0 8px 24px -8px rgba(var(--danger-rgb),0.4);
}

.cluster-card.clean {
  border-color: rgba(var(--safe-rgb),0.35);
  background: rgba(var(--safe-rgb),0.05);
}

.cluster-card.clean:hover {
  box-shadow: 0 8px 24px -8px rgba(var(--safe-rgb),0.3);
}

.cluster-card.creator {
  border-color: rgba(var(--creator-rgb),0.4);
  background: rgba(var(--creator-rgb),0.06);
}

.cluster-card.creator:hover {
  box-shadow: 0 8px 24px -8px rgba(var(--creator-rgb),0.35);
}

.cluster-card.creator.rugged {
  border-color: rgba(var(--danger-rgb),0.5);
  background: rgba(var(--danger-rgb),0.07);
}

.echo-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.echo-chip {
  font-size: 10.5px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed var(--card-edge);
  border-radius: 8px;
  padding: 3px 7px;
  color: var(--ink-dim);
}

.echo-chip.rugged {
  border-color: rgba(var(--danger-rgb),0.5);
  color: #e39a92;
}

.cluster-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.cluster-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 8px;
}

.cluster-tag.flagged { background: var(--danger); color: #1a0d0b; }
.cluster-tag.clean { background: var(--safe); color: #0d1a0f; }
.cluster-tag.repeat { background: #a06fd6; color: #1a0d24; }
.cluster-tag.coordination-high { background: var(--danger); color: #1a0d0b; }
.cluster-tag.coordination-medium { background: #d6a13f; color: #1a1408; }
.cluster-tag.coordination-low { background: rgba(139,135,145,0.35); color: var(--paper); }

.repeat-note {
  font-size: 11px;
  color: #c9a8ec;
  background: rgba(var(--creator-rgb),0.1);
  border: 1px solid rgba(var(--creator-rgb),0.35);
  border-radius: 8px;
  padding: 6px 9px;
  margin-bottom: 10px;
}

.cluster-count {
  font-size: 12px;
  color: var(--ink-dim);
}

.cluster-funder {
  font-size: 11.5px;
  color: var(--ink-dim);
  margin-bottom: 10px;
}

.cluster-funder .mono {
  color: var(--paper);
  font-weight: 500;
}

.cluster-wallets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wallet-chip {
  font-size: 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  padding: 4px 8px;
  color: var(--ink);
}

.disclaimer {
  margin-top: 24px;
  font-size: 11.5px;
  color: var(--ink-dim);
  border-top: 1px dashed var(--card-edge);
  padding-top: 16px;
}

.nav-link {
  color: var(--pin);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Site Navigation — one consistent top bar shared by every page ────────
   Built only from the CSS custom properties every page already defines
   (--board, --card-edge, --pin, --paper, --ink-dim), so it automatically
   matches whichever theme scope it renders in: the muted "case file" board
   theme (Scanner / Trust Center) or the tactical HUD theme (Sniper Desk /
   Strategy Lab, via .sniper-theme overriding those same variables). Markup
   is duplicated per page (see each page's <body>) rather than injected by
   JS, so the correct link can be marked active with no flash and the bar
   still works with JS disabled. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--board);
  border-bottom: 1px solid var(--card-edge);
}

/* The sticky nav would otherwise cover whatever an in-page anchor jumps to
   (e.g. the footer's /trust.html#report link). */
:target { scroll-margin-top: 80px; }

/* Brand and links sit together on the left (per the redesign); anything after them —
   the .site-nav-controls cluster on the trading pages — is pushed right by
   .site-nav-links' own margin-right: auto, so pages without controls need no extra
   markup to keep the same alignment. */
.site-nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 44px;
  flex-wrap: wrap;
}

/* Sniper Desk and Live Feed run a wider board than the 1320px content pages, so their
   nav and footer widen to match — otherwise the brand sits visibly inboard of the
   content beneath it. */
.site-nav--wide .site-nav-inner,
.site-footer--wide .site-footer-inner {
  max-width: 1600px;
  padding-left: 28px;
  padding-right: 28px;
}

/* Trading controls (mode toggle, plan badge, ⚙, account menu). Only /snipe.html and
   /feed.html render this — see the comment on their <nav>. */
.site-nav-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

.site-nav-brand {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.site-nav-brand-icon {
  flex-shrink: 0;
  color: var(--safe);
}

.site-nav-brand-accent { color: var(--safe); }

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-right: auto;
}

.site-nav-link {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-dim);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.site-nav-link:hover {
  color: var(--paper);
}

.site-nav-link.is-active {
  color: var(--paper);
  border-bottom-color: var(--safe);
}

/* ── Mobile nav (hamburger, rendered by shared/nav.js) ───────────────────────────────
   Above 760px the button is hidden and the link row renders inline as always. Below,
   the links collapse behind the hamburger into a full-width dropdown — previously 6+
   links plus the Desk's whole control cluster wrapped into 3-4 sticky rows on a phone. */
.site-nav-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 32px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid var(--card-edge);
  border-radius: 6px;
  cursor: pointer;
}
.site-nav-menu-btn span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-dim);
  transition: transform 0.15s, opacity 0.15s;
}
.site-nav.is-open .site-nav-menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav.is-open .site-nav-menu-btn span:nth-child(2) { opacity: 0; }
.site-nav.is-open .site-nav-menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .site-nav-inner { gap: 14px; }
  .site-nav-menu-btn { display: flex; }
  .site-nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-right: 0;
    padding: 6px 0 10px;
    border-top: 1px solid var(--card-edge);
  }
  .site-nav.is-open .site-nav-links { display: flex; }
  .site-nav-links .site-nav-link {
    padding: 10px 4px;
    border-bottom: 1px solid transparent;
    font-size: 14px;
  }
  .site-nav-links .site-nav-link.is-active { border-bottom-color: var(--safe); }
  .site-nav-controls { margin-left: auto; }
}

@media (max-width: 640px) {
  .site-nav-inner { padding: 12px 16px; }
}

/* body is a flex column (see its rule above). An `auto` cross-axis margin on a
   flex item — which every centered page wrapper here has, via `margin: 0 auto` —
   makes the item shrink-to-fit instead of filling the row, so each wrapper needs
   an explicit width to stay full-bleed. Their own max-width still does the
   centering; the auto margins just resolve to 0. */
.layout,
.sniper-layout,
.stats-layout,
.site-nav,
.site-footer {
  width: 100%;
}

/* ─── Site footer — the counterpart to .site-nav, on every page ──────────────
   Same deal as the nav above: built only from the shared custom properties, so
   it re-themes with whichever scope it renders in, and the markup is duplicated
   per page rather than injected by JS. */
.site-footer {
  border-top: 1px solid var(--card-edge);
  margin-top: auto;
}

.site-footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-dim);
}

.site-footer-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.site-footer-links a {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer-links a:hover { color: var(--paper); }

@media (max-width: 640px) {
  .site-footer-inner { padding: 16px; }
  .site-footer-links { gap: 14px; }
}

/* Beats .usage-bar's own display:flex below — .hidden is declared earlier in this
   file, so at equal specificity the component rule would otherwise win. */
.usage-bar.hidden { display: none; }

.usage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(var(--pin-rgb), 0.06);
  border: 1px solid rgba(var(--pin-rgb), 0.25);
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 20px;
  font-size: 12.5px;
}

.usage-text {
  color: var(--ink-dim);
}

.unlock-btn, .unlock-inline-btn {
  background: var(--pin);
  color: #1a1408;
  border: none;
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  display: none;
  white-space: nowrap;
}

.unlock-inline-btn {
  display: inline-block;
  margin-left: 8px;
}

.dossier-entry {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 10px;
  margin: 10px 0 4px;
  cursor: pointer;
}

.dossier-entry-expand {
  font-weight: 500;
  font-size: 10.5px;
  opacity: 0.75;
}

.dossier-entry.entry-strong { background: rgba(var(--safe-rgb),0.15); color: var(--safe); border: 1px solid rgba(var(--safe-rgb),0.4); }
.dossier-entry.entry-watch { background: rgba(var(--pin-rgb),0.15); color: var(--pin); border: 1px solid rgba(var(--pin-rgb),0.4); }
.dossier-entry.entry-risky { background: rgba(var(--danger-rgb),0.15); color: var(--danger); border: 1px solid rgba(var(--danger-rgb),0.4); }

.dossier-entry-detail {
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 8px;
}

.dossier-entry-reasons {
  font-size: 12px;
  line-height: 1.55;
}

.dossier-entry-reasons ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.dossier-entry-reasons li {
  margin-bottom: 3px;
}

.dossier-entry-disclaimer {
  font-style: italic;
  opacity: 0.85;
}

.optional-amount-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 14px;
  font-size: 12.5px;
  color: var(--ink-dim);
}

.optional-amount-row input {
  width: 80px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  color: var(--ink);
  padding: 5px 8px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
}

.mode-banner {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 16px;
  border-radius: 10px;
  margin: 24px 0;
}

.mode-banner.dry {
  background: rgba(var(--pin-rgb),0.1);
  border: 1px solid rgba(var(--pin-rgb),0.35);
  color: var(--pin);
}

.mode-banner.live {
  background: rgba(var(--danger-rgb),0.12);
  border: 1px solid rgba(var(--danger-rgb),0.4);
  color: var(--danger);
}

.check-result {
  margin-top: 20px;
}

.buy-confirm-btn {
  margin-top: 10px;
  background: linear-gradient(135deg, #efb960, var(--pin));
  color: #1a1508;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.buy-confirm-btn:hover {
  filter: brightness(1.08);
}

.sell-btn {
  margin-top: 8px;
  background: rgba(var(--danger-rgb),0.15);
  border: 1px solid rgba(var(--danger-rgb),0.4);
  color: var(--danger);
  border-radius: 10px;
  padding: 6px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  cursor: pointer;
}

.sell-btn:hover {
  background: rgba(var(--danger-rgb),0.25);
}

.sell-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sidebar {
  position: sticky;
  top: 40px;
}

.sidebar-panel {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.pin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pin);
  box-shadow: 0 0 0 0 rgba(var(--pin-rgb),0.5);
  animation: pulse-pin 2.4s ease-out infinite;
  flex-shrink: 0;
}

.sidebar-stat {
  margin-bottom: 16px;
}

.sidebar-stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--paper);
  line-height: 1;
}

.sidebar-stat-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 4px;
}

.sidebar-divider {
  border-top: 1px dashed var(--card-edge);
  margin: 16px 0;
}

.sidebar-subhead {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 10px;
}

.sidebar-empty {
  font-size: 11.5px;
  color: var(--ink-dim);
  line-height: 1.5;
}

.sidebar-repeat-item {
  background: rgba(var(--creator-rgb),0.08);
  border: 1px solid rgba(var(--creator-rgb),0.3);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 11px;
}

.sidebar-repeat-item .mono {
  color: #c9a8ec;
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

.sidebar-repeat-item .count {
  color: var(--ink-dim);
}
/* ─── Inline SVG icons (public/shared/icons.js) ───────────────────────────────
   Sized in `em` and stroked in currentColor so an icon inherits the size and
   colour of the text it sits beside — one rule covers every icon on every page,
   which is what the emoji they replaced could never do. */
.icn {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  /* Optical alignment against a text baseline — em-sized boxes otherwise sit a
     touch high next to lowercase letters. */
  vertical-align: -0.22em;
}

/* Icons sitting inline in a sentence need breathing room; ones laid out by a
   flex parent get their spacing from that parent's `gap` instead. */
.icn + * { margin-left: 0; }

/* Brand mark in the nav. Sized for the bar and given a soft ring so a dark, square logo
   still reads against a dark header. Falls back from /logo.png to the drawn /logo.svg via
   onerror in the markup, so dropping the real artwork in needs no code change. */
.site-nav-brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(var(--safe-rgb), 0.30), 0 0 14px -3px rgba(var(--safe-rgb), 0.55);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.site-nav-brand:hover .site-nav-brand-logo {
  box-shadow: 0 0 0 1px rgba(var(--safe-rgb), 0.55), 0 0 20px -2px rgba(var(--safe-rgb), 0.8);
  transform: translateY(-1px);
}

/* ══ Pro chart ════════════════════════════════════════════════════════════════════════
   Full-screen chart with a trade panel beside it. The chart is DexScreener's embed
   (TradingView underneath), so it brings its own drawing tools and indicators; everything
   here is the frame around it and the controls that let you trade without leaving. */
.pro-chart-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(2, 5, 3, 0.86);
  backdrop-filter: blur(6px);
  display: flex;
  padding: 18px;
}

/* ══ Privy login modal stacking fix ══════════════════════════════════════════════════
   Real bug found live (2026-08-29): src/privy-widget/index.jsx mounts Privy's React
   tree into a `display:none` wrapper div (#privy-widget-root) — that's fine, it only
   hides Privy's own hidden utility iframe, not the login modal itself, which Privy/
   HeadlessUI portals separately into its own #headlessui-portal-root appended to
   <body>. That portal's dialog backdrop/panel are `position: fixed` with `z-index:
   auto`, which (per normal CSS stacking rules) paints them at the SAME layer as any
   other z-index:auto/0 box in document order — i.e. BELOW every one of our own
   overlays above (.hud-modal-overlay z-index:100, .pro-chart-overlay z-index:3000),
   even though the portal's DOM node comes later in <body>. Net effect: clicking
   "Sign in with Email / Google" from inside our own onboarding modal opened Privy's
   real login modal, but it rendered completely invisible underneath ours — nothing
   for the user to click, so the flow could never finish and snipe.js's identity-token
   poll always timed out with "Sign-in did not complete — please try again." Giving
   the portal root its own stacking context at a z-index above every overlay we own
   fixes it regardless of which of our modals happens to be open underneath. */
#headlessui-portal-root {
  position: relative;
  z-index: 9999;
}

.pro-chart-overlay.hidden { display: none; }

.pro-chart {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface, #0b120e);
  border: 1px solid var(--surface-edge, #1f3527);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(var(--safe-rgb), 0.10), 0 40px 90px -30px rgba(0, 0, 0, 1);
}

/* ── Header ─────────────────────────────────────────────────────────────────────────── */
.pro-chart-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--surface-edge, #1f3527);
  background: linear-gradient(180deg, rgba(var(--safe-rgb), 0.05), transparent);
}

.pro-chart-id {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.pro-chart-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0f0c;
  border: 1px solid var(--card-edge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--ink-dim);
}

.pro-chart-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pro-chart-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-chart-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--safe);
}

.pro-chart-price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-left: auto;
}

.pro-chart-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 19px;
  color: var(--paper);
}

.pro-chart-change { font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.pro-chart-change.up { color: var(--safe); }
.pro-chart-change.down { color: var(--danger); }

.pro-chart-head-actions { display: flex; align-items: center; gap: 8px; }

.pro-chart-ext,
.pro-chart-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--card-edge);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink-dim);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.pro-chart-ext:hover { color: var(--paper); border-color: var(--safe); }
.pro-chart-close:hover { color: var(--paper); border-color: var(--danger); background: rgba(var(--danger-rgb), 0.14); }
.pro-chart-ext .icn, .pro-chart-close .icn { width: 15px; height: 15px; vertical-align: 0; }

/* ── Body: chart + panel ────────────────────────────────────────────────────────────── */
.pro-chart-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  min-height: 0;
}

.pro-chart-canvas {
  position: relative;
  min-width: 0;
  background: #0a0f0c;
  /* Own chart engine (chart-unification 2026-09-08): timeframe toolbar above, the
     TrenchesChart canvas filling the rest — the old iframe rule is gone with the iframe. */
  display: flex;
  flex-direction: column;
}

.pro-chart-toolbar {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--surface-edge, #1f3527);
  flex-shrink: 0;
}

.pro-tf-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink-dim, #6d8a78);
  background: transparent;
  border: 1px solid var(--surface-edge, #1f3527);
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.pro-tf-btn:hover { color: var(--ink, #d9efe1); }
.pro-tf-btn.is-active {
  color: #39ff8a;
  border-color: rgba(57, 255, 138, 0.45);
  background: rgba(57, 255, 138, 0.08);
}

.pro-chart-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}

.pro-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 30px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-dim, #6d8a78);
}

.pro-chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-dim);
  background: #0a0f0c;
  pointer-events: none;
}

.pro-chart-loading.hidden { display: none; }

.pro-chart-panel {
  border-left: 1px solid var(--surface-edge, #1f3527);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  background: var(--board);
}

/* ── Buy / sell ─────────────────────────────────────────────────────────────────────── */
.pro-chart-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.pro-tab {
  padding: 9px 0;
  border-radius: 10px;
  border: 1px solid var(--card-edge);
  background: rgba(0, 0, 0, 0.3);
  color: var(--ink-dim);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.15s;
}

.pro-tab#pro-tab-buy.active {
  color: #04140a;
  background: var(--safe);
  border-color: var(--safe);
}

.pro-tab#pro-tab-sell.active {
  color: #1a0505;
  background: var(--danger);
  border-color: var(--danger);
}

.pro-panel-section { display: flex; flex-direction: column; gap: 9px; }
.pro-panel-section.hidden { display: none; }

.pro-panel-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.pro-amount-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--card-edge);
  background: rgba(0, 0, 0, 0.4);
}

.pro-amount-row input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
}

/* The number spinner steals width and nobody clicks it. */
.pro-amount-row input::-webkit-outer-spin-button,
.pro-amount-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pro-amount-row input { -moz-appearance: textfield; }

.pro-amount-unit {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-dim);
}

.pro-preset-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.pro-preset {
  padding: 7px 0;
  border-radius: 8px;
  border: 1px solid var(--card-edge);
  background: rgba(0, 0, 0, 0.3);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.15s;
}

.pro-preset:hover:not(:disabled) { border-color: var(--safe); color: var(--paper); }
.pro-preset:disabled { opacity: 0.4; cursor: not-allowed; }
.pro-sell-pct:hover:not(:disabled) { border-color: var(--danger); }

.pro-action {
  padding: 12px 0;
  border-radius: 11px;
  border: none;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.18s;
}

.pro-action--smart { margin-top: 8px; background: transparent; color: var(--safe); border: 1px solid rgba(var(--safe-rgb), 0.55); }
.pro-action--smart:hover:not(:disabled) { background: rgba(var(--safe-rgb), 0.10); }
.pro-action--buy {
  background: var(--safe);
  color: #04140a;
  box-shadow: 0 0 0 1px rgba(var(--safe-rgb), 0.25), 0 8px 22px -8px rgba(var(--safe-rgb), 0.7);
}

.pro-action--buy:hover:not(:disabled) { transform: translateY(-1px); }
.pro-action:disabled { opacity: 0.55; cursor: wait; }

.pro-panel-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--safe-rgb), 0.3), transparent);
}

.pro-position { display: flex; flex-direction: column; gap: 7px; }

.pro-position-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--ink-dim);
}

.pro-position-row b {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  color: var(--paper);
}

.pro-position-row b.up { color: var(--safe); }
.pro-position-row b.down { color: var(--danger); }

/* ── Token intel ─────────────────────────────────────────────────────────────────────
   The trade panel stopped at P&L and left most of the column empty, which on a full-screen
   chart is the most valuable real estate on the page. This fills it with what the desk has
   already worked out about the coin. Every value here is read from the board entry the page
   has already polled — nothing here fetches, so the column costs nothing to show. */
.pro-intel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-edge, #1f3527);
}

.pro-intel.hidden { display: none; }

.pro-intel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pro-intel-title {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.pro-tier {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.pro-tier--good { color: var(--safe); background: rgba(var(--safe-rgb), 0.12); }
.pro-tier--warn { color: var(--pin); background: rgba(var(--pin-rgb), 0.12); }
.pro-tier--bad  { color: var(--danger); background: rgba(var(--danger-rgb), 0.12); }

/* ── The three scores, as bars ─────────────────────────────────────────────────────── */
.pro-scores { display: flex; flex-direction: column; gap: 5px; }

.pro-score {
  display: grid;
  grid-template-columns: 72px 1fr 26px;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: var(--ink-dim);
}

.pro-score-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.pro-score-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ink-dim);
  transition: width 0.3s ease;
}
.pro-score-fill.good { background: var(--safe); }
.pro-score-fill.warn { background: var(--pin); }
.pro-score-fill.bad  { background: var(--danger); }

.pro-score-v {
  font-family: 'IBM Plex Mono', monospace;
  text-align: right;
  color: var(--paper);
}

/* ── Stat tiles ────────────────────────────────────────────────────────────────────── */
.pro-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.pro-tile {
  padding: 7px 6px;
  border-radius: 8px;
  border: 1px solid var(--surface-edge, #1f3527);
  background: rgba(0, 0, 0, 0.35);
  text-align: center;
  min-width: 0;
}

.pro-tile-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--paper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-tile-label {
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-tile--good .pro-tile-val { color: var(--safe); }
.pro-tile--warn .pro-tile-val { color: var(--pin); }
.pro-tile--bad  .pro-tile-val { color: var(--danger); }
.pro-tile--bad { border-color: rgba(var(--danger-rgb), 0.4); }

/* ── Creator line + flags ──────────────────────────────────────────────────────────── */
.pro-intel-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10.5px;
}

.pro-intel-k {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 9px;
  color: var(--ink-dim);
}

.pro-intel-v {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--paper);
  word-break: break-word;
}

.pro-intel-row--bad .pro-intel-v { color: var(--danger); }

.pro-intel-flag {
  font-size: 10.5px;
  line-height: 1.45;
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid rgba(var(--pin-rgb), 0.35);
  background: rgba(var(--pin-rgb), 0.09);
  color: var(--pin);
}

.pro-intel-flag--bad {
  border-color: rgba(var(--danger-rgb), 0.4);
  background: rgba(var(--danger-rgb), 0.1);
  color: var(--danger);
}

/* ── Social links ──────────────────────────────────────────────────────────────────── */
.pro-intel .pro-socials { display: flex; gap: 6px; flex-wrap: wrap; }

.pro-social {
  flex: 1 1 auto;
  text-align: center;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--surface-edge, #1f3527);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.pro-social:hover { border-color: var(--safe); color: var(--safe); }

/* A link that has appeared on other people's launches is the single most useful thing on
   this row, so it is marked rather than left to look like any other link. */
.pro-social--flag {
  border-color: rgba(var(--danger-rgb), 0.45);
  color: var(--danger);
}
.pro-social--flag::after { content: ' ⚠'; }

/* ── The safety check's own cautions, collapsed ────────────────────────────────────── */
.pro-intel-more { font-size: 10.5px; color: var(--ink-dim); }

.pro-intel-more summary {
  cursor: pointer;
  padding: 5px 0;
  letter-spacing: 0.04em;
}

.pro-intel-more summary:hover { color: var(--paper); }

.pro-intel-more ul {
  margin: 4px 0 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.45;
}


/* ── Holder list ───────────────────────────────────────────────────────────────────
   Rows are scaled to the biggest holder, not to 100%: on a pre-graduation coin the
   bonding curve holds most of the supply, and against a 100% scale every real wallet
   under it would be an invisible sliver. Pool/curve rows are drawn deliberately grey
   and quiet — they are context, not whales — and a wallet whose funding traces back to
   the same source as another top holder is the only row that gets alarm colour. */
.pro-holders {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-edge, #1f3527);
}

.pro-holders.hidden { display: none; }

.pro-holders-refresh {
  background: none;
  border: none;
  padding: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
}

.pro-holders-refresh:hover { color: var(--safe); }

.pro-holder-list { display: flex; flex-direction: column; gap: 3px; }

.pro-holder {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  text-decoration: none;
  font-size: 11px;
}

.pro-holder:hover { border-color: var(--card-edge); }

.pro-holder-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(var(--safe-rgb), 0.13);
  pointer-events: none;
}

.pro-holder--pool .pro-holder-bar { background: rgba(255, 255, 255, 0.05); }
.pro-holder--bundle .pro-holder-bar { background: rgba(var(--danger-rgb), 0.16); }
.pro-holder--bundle { border-color: rgba(var(--danger-rgb), 0.35); }

.pro-holder-rank {
  position: relative;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: var(--ink-dim);
}

.pro-holder-who {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink);
}

.pro-holder:hover .pro-holder-who { color: var(--paper); }

.pro-holder-pct {
  position: relative;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--paper);
}

.pro-holder--pool .pro-holder-pct { color: var(--ink-dim); }
.pro-holder--pool .pro-holder-who { color: var(--ink-dim); }

.pro-chip {
  flex: none;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pro-chip--dev    { color: var(--creator); background: rgba(var(--creator-rgb), 0.12); }
.pro-chip--bundle { color: var(--danger); background: rgba(var(--danger-rgb), 0.12); }

.pro-holders-note {
  font-size: 10px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.pro-holders-note b { color: var(--paper); font-weight: 600; }
.pro-holders-flag { color: var(--danger); }
.pro-holders-muted { opacity: 0.75; }

.pro-holders-status {
  font-size: 10.5px;
  color: var(--ink-dim);
  padding: 4px 0;
}

.pro-panel-note,
.pro-panel-status {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
}

.pro-panel-status.error { color: var(--danger); }
.pro-panel-status.ok { color: var(--safe); }

/* ── Trigger button, wherever a chart can be expanded ───────────────────────────────── */
.pro-chart-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid var(--card-edge);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s;
}

.pro-chart-trigger:hover {
  color: var(--paper);
  border-color: var(--safe);
  background: rgba(var(--safe-rgb), 0.12);
}

.pro-chart-trigger .icn { width: 13px; height: 13px; vertical-align: 0; }

@media (max-width: 900px) {
  .pro-chart-overlay { padding: 0; }
  .pro-chart { border-radius: 0; }
  .pro-chart-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .pro-chart-panel { border-left: none; border-top: 1px solid var(--surface-edge, #1f3527); }
  .pro-chart-price-block { display: none; }
}

/* Warning banner across the top of the pro chart. In full screen the eye is on the chart,
   so a notice beside the button is a notice nobody reads — this sits above everything and
   is the width of the view. */
.pro-chart-banner {
  padding: 10px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  animation: pro-banner-in 0.25s ease;
}

.pro-chart-banner.hidden { display: none; }

.pro-chart-banner.warn {
  background: rgba(var(--pin-rgb), 0.16);
  border-bottom-color: rgba(var(--pin-rgb), 0.45);
  color: var(--pin);
}

.pro-chart-banner.danger {
  background: rgba(var(--danger-rgb), 0.18);
  border-bottom-color: rgba(var(--danger-rgb), 0.5);
  color: var(--danger);
}

@keyframes pro-banner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pro-chart-banner { animation: none; }
}

/* ── Custom scrollbars, site-wide ──────────────────────────────────────────────────────
   The browser-default scrollbars (bright track, chunky thumb) read as a foreign element
   on the terminal theme. One shared treatment here covers every scroll surface on every
   page — the page itself, ticker strips, drawer bodies, tables, modals. */
* {
  scrollbar-width: thin;                                    /* Firefox */
  scrollbar-color: rgba(var(--pin-rgb, 255, 176, 32), 0.28) transparent;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(var(--pin-rgb, 255, 176, 32), 0.22);
  border-radius: 100px;
  /* Transparent border shrinks the visible thumb inside the 9px gutter, so it reads as a
     slim floating pill rather than a full-width bar. */
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--pin-rgb, 255, 176, 32), 0.45);
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── Shared account menu (lite) ────────────────────────────────────────────────────────
   Base styles for the nav account button + dropdown that shared/account-menu.js injects
   on pages that don't carry the Sniper Desk's full HTML-baked account menu. Kept here
   (not snipe.css) because Trenches doesn't load snipe.css — on pages that do, snipe.css's
   own identical-looking rules simply win the cascade. */
.wallet-connect-btn {
  background: rgba(var(--pin-rgb, 255, 176, 32), 0.08);
  border: 1px solid rgba(var(--pin-rgb, 255, 176, 32), 0.35);
  color: var(--pin);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-connect-btn:hover {
  background: rgba(var(--pin-rgb, 255, 176, 32), 0.16);
  border-color: rgba(var(--pin-rgb, 255, 176, 32), 0.65);
}

.wallet-connect-btn.connected {
  background: rgba(var(--safe-rgb, 57, 255, 138), 0.08);
  border-color: rgba(var(--safe-rgb, 57, 255, 138), 0.35);
  color: var(--safe);
}

.account-menu { position: relative; }

.account-menu-trigger.connected::after {
  content: '▾';
  margin-left: 6px;
  font-size: 9px;
  opacity: 0.75;
}

.account-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 15;
  min-width: 230px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.account-menu-dropdown.hidden { display: none; }

.account-menu-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-menu-section--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.account-menu-section-label {
  font-family: 'Rajdhani', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.account-menu-divider {
  height: 1px;
  background: var(--card-edge);
}

/* Plan row inside the account dropdown — the nav "plan chip" moved in here. Free reads
   as an upgrade CTA; paid just states the plan. Same #tier-badge id/classes snipe.js's
   loadStatus() already writes to. */
.account-menu-dropdown .tier-badge {
  display: block;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 100px;
  border: 1px solid var(--card-edge);
  color: var(--ink);
}
.account-menu-dropdown .tier-badge.hidden { display: none; }
.account-menu-dropdown .tier-badge--free {
  color: var(--pin);
  border-color: rgba(var(--pin-rgb, 255, 176, 32), 0.45);
  background: rgba(var(--pin-rgb, 255, 176, 32), 0.08);
}
.account-menu-dropdown .tier-badge--free:hover {
  background: rgba(var(--pin-rgb, 255, 176, 32), 0.16);
}
.account-menu-dropdown .tier-badge--paid {
  color: var(--safe);
  border-color: rgba(var(--safe-rgb, 57, 255, 138), 0.35);
  cursor: default;
  pointer-events: none;
}

/* Lite-widget-only rows (address/balance/mode readouts + actions). */
.acct-lite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
}
.acct-lite-row .acct-lite-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.acct-lite-value { color: var(--paper); }
.acct-lite-value.is-live { color: var(--danger); }
.acct-lite-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--card-edge);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.acct-lite-btn:hover {
  color: var(--paper);
  border-color: rgba(var(--pin-rgb, 255, 176, 32), 0.4);
}
.acct-lite-btn--danger:hover {
  color: var(--danger);
  border-color: rgba(var(--danger-rgb, 255, 92, 92), 0.45);
}
/* Operator-only "Admin Dashboard →" entry (hidden unless status.config.isOperator) — amber
   so it reads as a different class of link from the everyday account actions. Also used
   inside the full menu on snipe/positions/feed, where the surrounding buttons are the
   wider session-withdraw-toggle-btn style; margin keeps it from touching Log Out. */
.acct-lite-btn--admin {
  color: var(--pin);
  border-color: rgba(var(--pin-rgb, 255, 176, 32), 0.35);
  margin-bottom: 8px;
}
.acct-lite-btn--admin:hover {
  color: var(--pin);
  background: rgba(var(--pin-rgb, 255, 176, 32), 0.08);
  border-color: rgba(var(--pin-rgb, 255, 176, 32), 0.6);
}
/* Copy button fallback for pages that don't load snipe.css (Trenches) — same look as
   snipe.css's .session-copy-btn, which wins the cascade where it loads. */
.acct-lite-copy {
  flex-shrink: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid var(--card-edge);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.acct-lite-copy:hover { color: var(--paper); border-color: rgba(var(--pin-rgb, 255, 176, 32), 0.4); }

/* ── PAPER / LIVE FIRE switch, in-chart (pro-chart.js) + nav mode pill ────────────────
   Tester request 2026-09-07: the mode must be visible and switchable on every trading
   surface. The pro switch mirrors Trenches' .tr-mode-switch look; the nav pill reuses
   .mode-banner's own state classes (it mirrors #mode-banner via a MutationObserver in
   snipe.js) and only needs compact-fit rules here. */
.pro-mode-host { margin: 8px 0 2px; }
.pro-mode-switch {
  display: flex;
  border: 1px solid var(--card-edge, rgba(57, 255, 138, 0.2));
  border-radius: 8px;
  overflow: hidden;
}
.pro-mode-opt {
  flex: 1;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: var(--ink-dim, #6d8a78);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pro-mode-opt--paper.is-active {
  color: #b9c7ff;
  background: rgba(185, 199, 255, 0.12);
}
.pro-mode-opt--live.is-active {
  color: #ff5b5b;
  background: rgba(255, 59, 59, 0.14);
  text-shadow: 0 0 10px rgba(255, 59, 59, 0.6);
}
.pro-mode-opt:not(.is-active):hover { color: var(--ink, #d9efe1); }
.pro-mode-opt--live.is-armed {
  color: #fff;
  background: #c81e1e;
  text-shadow: none;
  animation: pro-arm-flash 0.6s ease-in-out infinite;
}
@keyframes pro-arm-flash {
  0%, 100% { background: #c81e1e; }
  50% { background: #ff3b3b; }
}
.pro-mode-opt:disabled { opacity: .6; cursor: wait; animation: none; }

.nav-mode-pill {
  cursor: pointer;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: .07em;
}
@media (prefers-reduced-motion: reduce) {
  .pro-mode-opt--live.is-armed { animation: none; }
}

/* ── Pro chart: on-demand safety scan (Trenches parity, 2026-09-08) ───────────────────
   Same scope-reticle language as Trenches' .tf-scan-* set, scoped .pro-scan-* because
   these pages don't load trenches.css. Buying never requires the scan — it's the
   trader's own call from the toolbar button. */
.pro-safety-scan-btn {
  margin-left: auto;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #39ff8a;
  background: rgba(57, 255, 138, 0.07);
  border: 1px solid rgba(57, 255, 138, 0.4);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
.pro-safety-scan-btn:hover:not(:disabled) { background: rgba(57, 255, 138, 0.16); box-shadow: 0 0 10px rgba(57, 255, 138, 0.25); }
.pro-safety-scan-btn:disabled { cursor: wait; animation: pro-scanbtn-breathe 1.2s ease-in-out infinite; }
@keyframes pro-scanbtn-breathe {
  0%, 100% { box-shadow: 0 0 4px rgba(57, 255, 138, 0.2); }
  50% { box-shadow: 0 0 14px rgba(57, 255, 138, 0.55); }
}

.pro-scan-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity .4s ease;
}
.pro-scan-overlay.is-done { opacity: 0; }

/* ── Smart Entry launch banner (public/shared/nav.js, 2026-09-28) — tokens only ── */
.launch-banner { position: relative; z-index: 40; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 16px; font-size: 13px; color: var(--ink); background: linear-gradient(90deg, rgba(var(--safe-rgb), 0.16), rgba(var(--safe-rgb), 0.05) 60%, transparent); border-bottom: 1px solid rgba(var(--safe-rgb), 0.35); }
.launch-banner b { color: var(--safe); font-weight: 600; }
.launch-banner-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 0 0 rgba(var(--safe-rgb), 0.6); animation: launch-banner-pulse 1.8s ease-out infinite; flex: none; }
@keyframes launch-banner-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--safe-rgb), 0.6); } 80%, 100% { box-shadow: 0 0 0 10px rgba(var(--safe-rgb), 0); } }
.launch-banner-tag { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--card); background: var(--safe); border-radius: 4px; padding: 2px 6px; flex: none; }
.launch-banner-text { flex: 1 1 320px; line-height: 1.45; }
.launch-banner-cta { font-weight: 600; color: var(--safe); text-decoration: none; border: 1px solid rgba(var(--safe-rgb), 0.5); border-radius: 6px; padding: 4px 10px; white-space: nowrap; }
.launch-banner-cta:hover { background: rgba(var(--safe-rgb), 0.12); }
.launch-banner-x { background: none; border: 0; color: var(--ink-dim); cursor: pointer; font-size: 14px; padding: 4px; }
@media (prefers-reduced-motion: reduce) { .launch-banner-pulse { animation: none; } }
.strategy-version-note { margin-top: 6px; font-size: 11.5px; color: var(--ink-dim); }

/* ── Entry hunt overlay (public/shared/entry-hunt.js, 2026-09-28) — tokens only ── */
/* The panel sits on the DARK board colour. It used --paper-rgb, which theme.css defines as the
   light mint text colour (216,245,223): the panel rendered as a near-white slab (2026-09-30). */
.entry-hunt-overlay { position: absolute; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; opacity: 1; transition: opacity .35s ease; }
.entry-hunt-overlay.is-gone { opacity: 0; }
.entry-hunt-sweep { position: absolute; top: 0; bottom: 0; left: 40%; width: 2px; background: linear-gradient(transparent, rgba(var(--safe-rgb), .75), transparent); box-shadow: 0 0 14px rgba(var(--safe-rgb), .45); animation: entry-hunt-sweep 2.6s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes entry-hunt-sweep { 0% { left: 40%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 97%; opacity: 0; } }
.entry-hunt-band { position: absolute; left: 0; right: 0; top: 46%; height: 34px; background: linear-gradient(90deg, transparent, rgba(var(--safe-rgb), .07) 45%, rgba(var(--safe-rgb), .14)); border-top: 1px dashed rgba(var(--safe-rgb), .45); border-bottom: 1px dashed rgba(var(--safe-rgb), .45); animation: entry-hunt-band 5.5s ease-in-out infinite; }
@keyframes entry-hunt-band { 0%, 100% { top: 46%; } 25% { top: 36%; } 55% { top: 58%; } 80% { top: 42%; } }
.entry-hunt-reticle { position: absolute; right: 10%; top: 48%; width: 64px; height: 64px; margin: -32px -32px 0 0; border-radius: 50%; border: 1.5px solid rgba(var(--safe-rgb), .85); box-shadow: 0 0 16px rgba(var(--safe-rgb), .35); animation: entry-hunt-reticle 5.5s ease-in-out infinite, entry-hunt-spin 3s linear infinite; }
.entry-hunt-reticle::before, .entry-hunt-reticle::after { content: ''; position: absolute; background: rgba(var(--safe-rgb), .8); }
.entry-hunt-reticle::before { left: 50%; top: -8px; bottom: -8px; width: 1px; }
.entry-hunt-reticle::after { top: 50%; left: -8px; right: -8px; height: 1px; }
@keyframes entry-hunt-reticle { 0%, 100% { top: 48%; } 25% { top: 38%; } 55% { top: 60%; } 80% { top: 44%; } }
@keyframes entry-hunt-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.entry-hunt-dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 10px rgba(var(--safe-rgb), .9); animation: pro-scan-blink .9s ease-in-out infinite; }
.entry-hunt-panel { position: absolute; left: 14px; top: 44px; max-width: min(360px, 70%); padding: 9px 11px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; line-height: 1.5; color: var(--ink); background: rgba(var(--board-rgb, 7,10,8), .86); backdrop-filter: blur(3px); border: 1px solid rgba(var(--safe-rgb), .4); border-radius: var(--radius-s); box-shadow: 0 0 18px rgba(var(--safe-rgb), .12); }
.entry-hunt-head { display: flex; align-items: center; gap: 7px; color: var(--safe); font-weight: 600; letter-spacing: .06em; }
.entry-hunt-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--safe); animation: pro-scan-blink .9s ease-in-out infinite; flex: none; }
.entry-hunt-sub { color: var(--ink-dim); letter-spacing: .08em; margin: 2px 0 4px; }
.entry-hunt-rows { list-style: none; margin: 0; padding: 0; }
.entry-hunt-rows li { display: flex; gap: 6px; color: var(--ink-dim); }
.entry-hunt-rows li span { width: 10px; flex: none; text-align: center; }
.entry-hunt-rows li.is-ok { color: var(--safe); }
.entry-hunt-rows li.is-wait { color: var(--pin); }
.entry-hunt-left { margin-top: 4px; color: var(--ink-dim); }
.entry-hunt-overlay.is-ready .entry-hunt-reticle { border-color: var(--safe); box-shadow: 0 0 26px rgba(var(--safe-rgb), .6); }
.entry-hunt-overlay.is-warn .entry-hunt-panel { border-color: rgba(var(--pin-rgb), .6); }
.entry-hunt-overlay.is-warn .entry-hunt-head { color: var(--pin); }
.entry-hunt-overlay.is-filled .entry-hunt-sweep, .entry-hunt-overlay.is-ended .entry-hunt-sweep, .entry-hunt-overlay.is-filled .entry-hunt-band, .entry-hunt-overlay.is-ended .entry-hunt-band { display: none; }
.entry-hunt-overlay.is-filled .entry-hunt-reticle { animation: none; border-color: var(--safe); box-shadow: 0 0 34px rgba(var(--safe-rgb), .8); }
.entry-hunt-overlay.is-ended .entry-hunt-reticle { animation: none; opacity: .35; }
.entry-hunt-overlay.is-ended .entry-hunt-head { color: var(--ink-dim); }
@media (prefers-reduced-motion: reduce) { .entry-hunt-sweep, .entry-hunt-band, .entry-hunt-reticle, .entry-hunt-dot, .entry-hunt-pulse { animation: none; } }
.pro-scan-track {
  position: absolute;
  left: 12%;
  top: 38%;
  width: 0;
  height: 0;
  animation: pro-scan-sweep 3.8s cubic-bezier(.45, .05, .55, .95) infinite;
}
@keyframes pro-scan-sweep {
  0%   { left: 12%; top: 38%; }
  22%  { left: 68%; top: 24%; }
  42%  { left: 44%; top: 60%; }
  64%  { left: 86%; top: 40%; }
  82%  { left: 28%; top: 68%; }
  100% { left: 12%; top: 38%; }
}
.pro-scan-hair { position: absolute; background: rgba(57, 255, 138, 0.22); }
.pro-scan-hair--h { left: -200vw; width: 400vw; top: -0.5px; height: 1px; }
.pro-scan-hair--v { top: -200vh; height: 400vh; left: -0.5px; width: 1px; }
.pro-scan-scope {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1.5px solid rgba(57, 255, 138, 0.85);
  box-shadow: 0 0 18px rgba(57, 255, 138, 0.35), inset 0 0 24px rgba(57, 255, 138, 0.1);
}
.pro-scan-scope::before {
  content: '';
  position: absolute;
  left: 50%; top: 7%; bottom: 7%; width: 1px; margin-left: -0.5px;
  background: linear-gradient(rgba(57, 255, 138, 0.8), transparent 42%, transparent 58%, rgba(57, 255, 138, 0.8));
}
.pro-scan-scope::after {
  content: '';
  position: absolute;
  top: 50%; left: 7%; right: 7%; height: 1px; margin-top: -0.5px;
  background: linear-gradient(90deg, rgba(57, 255, 138, 0.8), transparent 42%, transparent 58%, rgba(57, 255, 138, 0.8));
}
.pro-scan-dot {
  position: absolute;
  left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #39ff8a;
  box-shadow: 0 0 10px rgba(57, 255, 138, 0.9);
  animation: pro-scan-blink 0.9s ease-in-out infinite;
}
@keyframes pro-scan-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.pro-scan-corner { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(57, 255, 138, 0.5); }
.pro-scan-corner--tl { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.pro-scan-corner--tr { right: 10px; top: 10px; border-left: 0; border-bottom: 0; }
.pro-scan-corner--bl { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.pro-scan-corner--br { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.pro-scan-label {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .07em;
  color: #39ff8a;
  background: rgba(4, 20, 10, 0.82);
  border: 1px solid rgba(57, 255, 138, 0.35);
  border-radius: 999px;
  padding: 5px 13px;
}
.pro-scan-overlay.is-locked .pro-scan-track { animation: none; left: 50%; top: 44%; }
.pro-scan-overlay.is-locked .pro-scan-scope { animation: pro-scan-lock 0.35s ease; }
@keyframes pro-scan-lock {
  0% { transform: translate(-50%, -50%) scale(1.35); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.pro-scan-overlay.tone-danger .pro-scan-scope,
.pro-scan-overlay.tone-danger .pro-scan-corner { border-color: rgba(255, 59, 59, 0.85); box-shadow: 0 0 18px rgba(255, 59, 59, 0.35); }
.pro-scan-overlay.tone-danger .pro-scan-dot { background: #ff3b3b; }
.pro-scan-overlay.tone-danger .pro-scan-hair { background: rgba(255, 59, 59, 0.3); }
.pro-scan-overlay.tone-danger .pro-scan-label { color: #ff5b5b; border-color: rgba(255, 59, 59, 0.4); }
.pro-scan-overlay.tone-caution .pro-scan-scope,
.pro-scan-overlay.tone-caution .pro-scan-corner { border-color: rgba(255, 176, 32, 0.85); box-shadow: 0 0 18px rgba(255, 176, 32, 0.3); }
.pro-scan-overlay.tone-caution .pro-scan-dot { background: #ffb020; }
.pro-scan-overlay.tone-caution .pro-scan-hair { background: rgba(255, 176, 32, 0.3); }
.pro-scan-overlay.tone-caution .pro-scan-label { color: #ffb020; border-color: rgba(255, 176, 32, 0.4); }

/* Verdict block under the trade controls — the shot call plus the honest detail. */
.pro-scan-verdict:empty { display: none; }
.pro-engage {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 8px;
  border-radius: 8px;
  animation: pro-engage-in 0.35s ease;
}
.pro-engage--clear { color: #39ff8a; background: rgba(57, 255, 138, 0.07); text-shadow: 0 0 12px rgba(57, 255, 138, 0.55); }
.pro-engage--caution { color: #ffb020; background: rgba(255, 176, 32, 0.07); text-shadow: 0 0 12px rgba(255, 176, 32, 0.5); }
.pro-engage--danger { color: #ff5b5b; background: rgba(255, 59, 59, 0.08); text-shadow: 0 0 12px rgba(255, 59, 59, 0.5); }
@keyframes pro-engage-in {
  0% { letter-spacing: .35em; opacity: 0; }
  100% { letter-spacing: .12em; opacity: 1; }
}
.pro-engage-detail {
  margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--ink, #d9efe1);
}
.pro-engage-recon {
  margin: 8px 0 3px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-dim, #6d8a78);
}
.pro-engage-reason {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  line-height: 1.55;
  color: #ffb020;
}
@media (prefers-reduced-motion: reduce) {
  .pro-scan-track, .pro-scan-dot, .pro-scan-overlay.is-locked .pro-scan-scope,
  .pro-safety-scan-btn:disabled, .pro-engage { animation: none; }
}

/* Live-feed status beside the timeframe buttons (GitHub #27): what the tape behind the candle is
   doing — LIVE / QUIET / CONNECTING / CALIBRATING / NO LIVE FEED / RECONNECTING. Words only. */
.pro-feed-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  color: var(--ink-dim);
  background: rgba(var(--safe-rgb), 0.04);
  border: 1px solid rgba(var(--safe-rgb), 0.14);
}
.pro-feed-label--live { color: var(--safe); background: rgba(var(--safe-rgb), 0.10); border-color: rgba(var(--safe-rgb), 0.35); }
.pro-feed-label--quiet { color: var(--ink-dim); }
.pro-feed-label--warn { color: var(--pin); background: rgba(var(--pin-rgb), 0.10); border-color: rgba(var(--pin-rgb), 0.35); }
.pro-feed-label--down { color: var(--danger); background: rgba(var(--danger-rgb), 0.10); border-color: rgba(var(--danger-rgb), 0.35); }
.pro-feed-label[hidden] { display: none; }
.pro-feed-label { margin-left: 6px; align-self: center; }