/* Lynceus · shared gold / black theme for the landing page and the app. */
:root {
  color-scheme: dark;
  --bg: #060606;
  --bg-2: #0a0a0b;
  --panel: #0e0e10;
  --panel-2: #141416;
  --panel-3: #1b1b1e;
  --line: #1d1d20;
  --border: rgba(212, 175, 55, .14);
  --border-2: rgba(212, 175, 55, .32);
  --text: #f3eee2;
  --text-2: #bdb6a6;
  --text-3: #7f7a6f;
  --gold: #d4af37;
  --gold-hi: #f6dc84;
  --gold-lo: #9c7424;
  --gold-grad: linear-gradient(180deg, #f8e290 0%, #e2b947 48%, #b0832a 100%);
  --gold-glow: rgba(212, 175, 55, .35);
  /* Buy/sell and risk keep their conventional colors; gold is the brand, never a status. */
  --green: #4ade80;
  --green-ink: #86efac;
  --red: #f87171;
  --red-ink: #fca5a5;
  --amber: #f5b83d;
  --orange: #fb923c;
  --violet: #a78bfa;
  --blue: #60a5fa;
  --series: #d4af37;
  --series-hover: #f6dc84;
  --grid: #1c1c1f;
  --radius: 12px;
  --serif: "Cinzel", "Trajan Pro", Georgia, serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--gold-hi); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
::selection { background: rgba(212, 175, 55, .35); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--text-3); }

/* Mild dotted field with a vignette, fixed behind everything. */
.dotfield::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(212, 175, 55, .16) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 100%);
}

/* Thin gold-tinted scrollbars. */
* { scrollbar-width: thin; scrollbar-color: #3a3220 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #2e2818; border-radius: 8px; }

/* Logo: the artwork has a black square background and lots of padding.
   Crop to the mark; the #knockout SVG filter (inlined in each page) turns
   brightness into alpha, so black becomes transparent on any surface. */
.mark { position: relative; display: inline-block; overflow: hidden; flex: none; width: var(--w, 120px); aspect-ratio: 975 / 350; }
.mark img { position: absolute; width: 128.6%; left: -14.36%; top: -118.6%; filter: url(#knockout); user-select: none; -webkit-user-drag: none; }
.wordmark { font-family: var(--serif); font-weight: 700; letter-spacing: .18em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gold-text { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; border-radius: 10px; padding: 10px 18px; font-weight: 600; letter-spacing: .01em; text-decoration: none !important; transition: transform .15s, box-shadow .2s, background .2s; }
.btn-gold { background: var(--gold-grad); color: #1a1406; box-shadow: 0 0 0 1px rgba(255, 230, 150, .25) inset, 0 6px 24px -8px var(--gold-glow); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 230, 150, .4) inset, 0 10px 30px -8px var(--gold-glow); }
.btn-ghost { background: transparent; color: var(--gold-hi); box-shadow: 0 0 0 1px var(--border-2) inset; }
.btn-ghost:hover { background: rgba(212, 175, 55, .08); }
.icon-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--text-3); cursor: pointer; }
.icon-btn:hover { background: var(--panel-3); color: var(--gold-hi); }
.icon-btn.on { color: var(--gold); }
.icon-btn svg { width: 15px; height: 15px; }

/* Segmented control and selects */
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.seg button { border: 0; background: transparent; color: var(--text-3); font-size: 12px; padding: 3px 9px; border-radius: 6px; cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--panel-3); color: var(--gold-hi); box-shadow: 0 0 0 1px var(--border) inset; font-weight: 600; }
.select, .input { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: 12.5px; color: var(--text); }
.select:focus, .input:focus { outline: 1px solid var(--border-2); }

/* Token avatar with generated fallback */
.ava { position: relative; flex: none; overflow: hidden; display: grid; place-items: center; font-weight: 700; color: #f6e7b8; background: hsl(var(--h, 40) 30% 18%); border-radius: 8px; box-shadow: 0 0 0 1px rgba(212, 175, 55, .18) inset; }
.ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ava.xs { width: 18px; height: 18px; border-radius: 50%; font-size: 8px; }
.ava.s { width: 24px; height: 24px; border-radius: 50%; font-size: 9px; }
.ava.m { width: 64px; height: 64px; font-size: 18px; border-radius: 10px; }
.ava.l { width: 44px; height: 44px; font-size: 14px; border-radius: 10px; }

/* Risk badge: status colors + icon + label, never color alone */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; padding: 1px 7px 1px 4px; border-radius: 999px; background: var(--panel-3); white-space: nowrap; flex: none; }
.badge .ico { width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; color: #111; font-size: 8.5px; font-weight: 900; }
.badge.high { color: var(--red-ink); } .badge.high .ico { background: var(--red); }
.badge.medium { color: var(--amber); } .badge.medium .ico { background: var(--amber); }
.badge.low { color: var(--green-ink); } .badge.low .ico { background: var(--green); }
.partial { color: var(--text-3); font-weight: 400; }
.chip { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--panel-3); color: var(--text-2); white-space: nowrap; }
.chip.hot { background: rgba(248, 113, 113, .14); color: var(--red-ink); }

.up { color: var(--green-ink); } .down { color: var(--red-ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.dot.live { background: var(--green); box-shadow: 0 0 0 3px rgba(74, 222, 128, .2); }
.dot.stale { background: var(--amber); }

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