/* ============================================================
   REDESIGN.CSS — Nocturne design system
   Font: Inter · Accent: #4d8dff (blurple) · Dark: #161826/#232532
   Green/red preserved for financial P&L semantics
   ============================================================ */

/* ── Google Fonts: Inter (also loaded in base.html's main link) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Design tokens from fbfrr ── */
:root {
  /* Dark backgrounds */
  --fb-bg-0: #171f2e;   /* dark-primary */
  --fb-bg-1: #1a2231;   /* dark-secondary */
  --fb-bg-2: #1e2840;   /* raised */
  --fb-bg-3: #243050;   /* hover */
  --fb-border: rgba(255,255,255,0.07);  /* dark border ~gray-800 */
  --fb-border-2: rgba(255,255,255,0.12);

  /* Blurple accent — Nocturne */
  --fb-acc: #4d8dff;
  --fb-acc-2: #7fb0ff;
  --fb-acc-gradient: linear-gradient(97deg, #4d8dff 0%, #b5abfc 140.21%);
  --fb-acc-gradient-hover: linear-gradient(97deg, #b5abfc 0%, #4d8dff 140.21%);

  /* Text — fbfrr white/opacity approach */
  --fb-txt-0: rgba(255,255,255,0.92);  /* white/92 — primary */
  --fb-txt-1: rgba(255,255,255,0.72);  /* white/72 — body */
  --fb-txt-2: #9ca3af;                  /* gray-400 — muted */
  --fb-txt-3: #6b7280;                  /* gray-500 — dimmer */

  /* Semantic — keep green/red for P&L (aligned with tokens.css) */
  --fb-pos: var(--pos);
  --fb-neg: var(--neg);
  --fb-warn: var(--warn);

  /* Bridge: --fb-* backgrounds now point to canonical tokens.css */
  --fb-bg-0: var(--bg-0);
  --fb-bg-1: var(--bg-1);
  --fb-bg-2: var(--bg-2);
  --fb-bg-3: var(--bg-3);
  --fb-border: var(--line-1);
  --fb-border-2: var(--line-3);
  --fb-acc: var(--accent);
  --fb-txt-0: var(--ink-0);
  --fb-txt-1: var(--ink-1);
  --fb-txt-2: var(--ink-2);
  --fb-txt-3: var(--ink-3);

  /* Radii — Nocturne: sm 4 / md 8 / lg(card) 14 */
  --fb-r-pill: 9999px;
  --fb-r-card: 14px;
  --fb-r-md: 8px;
  --fb-r-sm: 4px;

  /* Shadows */
  --fb-shadow-xs: 0px 1px 2px 0px rgba(16,24,40,0.05);
  --fb-shadow-sm: 0px 8px 20px 0px rgba(0,0,0,0.08);
  --fb-shadow-lg: 0px 12px 16px -4px rgba(16,24,40,0.08), 0px 4px 6px -2px rgba(16,24,40,0.03);
  --fb-shadow-card: 0px 8px 30px 0px rgba(12,11,25,0.04);
}

/* ── Font: Onest everywhere (except icons and monospace numeric) ── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, a, button,
input, select, textarea, label, td, th, li,
.btn, .card, .panel, .kpi, .nav-link {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
/* Onest for non-mono spans and divs only */
span:not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not([class*="font-mono"]):not(.mono):not(.num),
div:not([class*="font-mono"]):not(.mono) {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
/* ── Restore Material Symbols icon font ── */
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
  font-family: 'Material Symbols Outlined' !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* ── Restore JetBrains Mono for numeric/mono elements ── */
.font-mono, .mono, .num, [class*="font-mono"],
.font-label, .font-jp, td.num, .tabular, .num-tab {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* ── Body — Nocturne: dark-navy bg, subtle blurple ambient ── */
body {
  background-color: var(--bg-0) !important;
  background-image:
    radial-gradient(ellipse 70vw 40vh at 15% -5%,
      rgba(77,141,255,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50vw 35vh at 85% 100%,
      rgba(77,141,255,0.04) 0%, transparent 55%) !important;
  background-attachment: fixed !important;
  color: var(--ink-1) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── Typography — fbfrr: tight negative tracking, medium weights ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
  color: var(--ink-0) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}
/* h1 is always THE page title across this app (exactly one per page,
   verified) — sized to match Nocturne's page-header h1 exactly (28px /
   weight 500 / -0.02em). h2 is NOT safe to blanket-resize the same way:
   several pages (insight, leaderboard, live_bot, prop, pulse_bot, reversal)
   repeat <h2> for card/section headers, so it keeps its smaller size here;
   pages that use a single <h2> as their page title get .nc-title added
   directly to that tag instead (see those templates). */
h1 { font-size: 28px !important; font-weight: 500 !important; letter-spacing: -0.02em !important; }
h2 { font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.015em !important; }
.nc-title, h2.nc-title { font-size: 28px !important; font-weight: 500 !important; letter-spacing: -0.02em !important; }
h3 { font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
h4 { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
h5 { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
h6 { font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0 !important; }
p  { margin-bottom: 0 !important; color: var(--ink-2) !important; font-size: 14px !important; }

/* ── Navbar — from repo: bg-dark-primary, border-gray-800, sticky ── */
nav.fixed.top-0 {
  background: var(--fb-bg-0) !important;
  border-bottom: 1px solid var(--fb-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  height: 58px !important;
}
nav.fixed.top-0 > .flex {
  height: 58px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  gap: 8px !important;
}

/* ── Brand ── */
.brand-mark {
  width: 34px !important; height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(77,141,255,0.3) !important;
  background: rgba(77,141,255,0.1) !important;
  box-shadow: none !important;
}

/* ── Nav underline — disable (fbfrr uses bg-white/5 not underline) ── */
.nav-link::after, .nav-link::before { display: none !important; }

/* ── Nav links — from repo: rounded-full, hover bg-white/5 ── */
.nav-link {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--fb-txt-2) !important;
  padding: 6px 12px !important;
  border-radius: var(--fb-r-pill) !important;
  border: none !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  transition: color 150ms ease, background 150ms ease !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.nav-link:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--fb-txt-0) !important;
}
.nav-active {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.9) !important;
  box-shadow: none !important;
  border: none !important;
  text-shadow: none !important;
}
.nav-active:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* ── Buttons — defined in tokens.css ── */

/* ── Main content offset ── */
main.pt-16 { padding-top: 74px !important; }

/* ── Cards — Nocturne: raised surface tone above page bg, hairline shadow ── */
.card {
  background: var(--fb-bg-2) !important;
  border: 1px solid var(--fb-border) !important;
  border-radius: var(--fb-r-card) !important;
  box-shadow: var(--sh-1) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
  overflow: hidden !important;
}
.card::before { display: none !important; }
.card-hover:hover {
  border-color: var(--fb-border-2) !important;
  box-shadow: var(--fb-shadow-sm) !important;
}

/* ── Panel ── */
.panel {
  background: var(--fb-bg-0) !important;
  border: 1px solid var(--fb-border) !important;
  border-radius: var(--fb-r-card) !important;
  box-shadow: var(--fb-shadow-card) !important;
}
.panel::before { display: none !important; }
.panel:hover { transform: none !important; }
.panel-head {
  background: transparent !important;
  border-bottom: 1px solid var(--fb-border) !important;
  border-left: none !important;
  border-radius: var(--fb-r-card) var(--fb-r-card) 0 0 !important;
  padding: 12px 16px !important;
}
.panel-head .title {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--fb-txt-3) !important;
}
.card-head {
  background: transparent !important;
  border-bottom: 1px solid var(--fb-border) !important;
  border-left: none !important;
  border-radius: var(--fb-r-card) var(--fb-r-card) 0 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--fb-txt-3) !important;
  padding: 12px 16px !important;
}

/* ── KPI cards ── */
.kpi {
  background: var(--fb-bg-0) !important;
  border: 1px solid var(--fb-border) !important;
  border-radius: var(--fb-r-card) !important;
  box-shadow: var(--fb-shadow-card) !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
}
.kpi::before, .kpi::after { display: none !important; }
.kpi .kpi-value {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: var(--fb-txt-0) !important;
}
.kpi .kpi-label {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--fb-txt-3) !important;
  font-weight: 600 !important;
}
.kpi.kpi-pos .kpi-value { color: var(--fb-pos) !important; }
.kpi.kpi-neg .kpi-value { color: var(--fb-neg) !important; }

/* ── Tables: numeric columns get tabular-nums site-wide (spec: right-aligned
   numbers use font-variant-numeric: tabular-nums in every table) ── */
table td.text-right, .tbl td.text-right,
table td.num, .tbl td.num {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}

/* ── Tables ── */
table th, .tbl th {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--fb-txt-3) !important;
  background: var(--fb-bg-0) !important;
  border-bottom: 1px solid var(--fb-border) !important;
  padding: 10px 12px !important;
}
table td, .tbl td {
  font-size: 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  color: var(--fb-txt-1) !important;
  padding: 9px 12px !important;
}
table tbody tr, .tbl tbody tr { transition: background 120ms ease !important; }
table tbody tr:hover, .tbl tbody tr:hover {
  background: rgba(255,255,255,0.03) !important;
  box-shadow: none !important;
}

/* ── Inputs ── */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea, .input, .select, .textarea {
  font-family: 'Inter', sans-serif !important;
  background: var(--fb-bg-0) !important;
  border: 1px solid var(--fb-border) !important;
  border-radius: var(--fb-r-sm) !important;
  color: var(--fb-txt-0) !important;
  font-size: 14px !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus, textarea:focus, .input:focus, .select:focus, .textarea:focus {
  border-color: var(--fb-acc) !important;
  box-shadow: 0 0 0 4px rgba(77,141,255,0.12) !important;
  outline: none !important;
  background: var(--fb-bg-0) !important;
}
input::placeholder, textarea::placeholder { color: var(--fb-txt-3) !important; }

/* ── Page title — fbfrr: white, tight tracking, no gradient ── */
.page-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink-0) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
}
.page-sub {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 4px !important;
}

/* ── Chips ── */
.chip-good, .chip-bad, .chip-warn, .chip-info, .chip-muted {
  font-family: 'Inter', sans-serif !important;
  border-radius: var(--fb-r-pill) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 9px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

/* ── Pills ── */
.pill {
  border-radius: var(--fb-r-pill) !important;
  font-family: 'Inter', sans-serif !important;
  height: 20px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

/* ── Scrollbar ── */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }
*::-webkit-scrollbar { width: 4px !important; height: 4px !important; }
*::-webkit-scrollbar-track { background: transparent !important; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07) !important; border-radius: 999px !important; }
*::-webkit-scrollbar-thumb:hover { background: rgba(77,141,255,0.3) !important; }

/* ── Status dots ── */
.status-dot.live { background: var(--pos) !important; box-shadow: 0 0 0 3px var(--pos-bg) !important; }
.status-dot.error { background: var(--neg) !important; box-shadow: 0 0 0 3px var(--neg-bg) !important; }

/* ── Tailwind overrides ── */
.bg-surface-container, .bg-surface-container-high, .bg-surface-container-highest, .bg-surface { background-color: var(--fb-bg-0) !important; }
[class*="bg-zinc-950"] { background-color: var(--fb-bg-1) !important; }
[class*="bg-zinc-900"] { background-color: var(--fb-bg-0) !important; }
[class*="bg-zinc-800"] { background-color: var(--fb-bg-2) !important; }
[class*="border-zinc-800"], [class*="border-zinc-700"] { border-color: var(--fb-border) !important; }

/* ── Rounded upgrades ── */
[class~="rounded-lg"]  { border-radius: 12px !important; }
[class~="rounded-xl"]  { border-radius: 16px !important; }
[class~="rounded-2xl"] { border-radius: 20px !important; }
[class~="rounded-3xl"] { border-radius: 24px !important; }

/* ── Toast ── */
.tj-toast {
  font-family: 'Inter', sans-serif !important;
  background: var(--fb-bg-0) !important;
  border: 1px solid var(--fb-border) !important;
  border-radius: var(--fb-r-md) !important;
  box-shadow: var(--fb-shadow-lg) !important;
}
.tj-toast.success { border-left: 3px solid var(--fb-pos) !important; }
.tj-toast.error   { border-left: 3px solid var(--fb-neg) !important; }
.tj-toast.info    { border-left: 3px solid var(--fb-acc) !important; }

/* ── AI Chat ── */
#ai-chat-panel {
  background: var(--fb-bg-0) !important;
  border: 1px solid var(--fb-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--fb-shadow-lg) !important;
}
#ai-chat-fab {
  background: var(--fb-acc-gradient) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(77,141,255,0.3) !important;
}

/* ── Mobile menu ── */
#mobile-menu {
  background: var(--fb-bg-0) !important;
  border-bottom: 1px solid var(--fb-border) !important;
}

/* ── Inline bg overrides — comprehensive ── */
[style*="background:#0A0A0A"],[style*="background: #0A0A0A"],
[style*="background:#0a0a0a"],[style*="background:#0a0a0f"],
[style*="background:#0A0A0F"] { background: var(--fb-bg-1) !important; }

[style*="background:#0D0D0D"],[style*="background: #0D0D0D"],
[style*="background:#0d0d0d"],[style*="background:#0F0F0F"],
[style*="background:#0f0f0f"],[style*="background:#111111"],
[style*="background: #111111"],[style*="background:#111116"],
[style*="background:#111"],[style*="background: #111"],
[style*="background:#121212"],[style*="background:#131313"],
[style*="background:#161616"],[style*="background: #161616"],
[style*="background:#171717"] { background: var(--fb-bg-0) !important; }

[style*="background:#1a1a1a"],[style*="background:#1A1A1A"],
[style*="background:#1C1C1C"],[style*="background:#1e1e1e"],
[style*="background:#1E1E1E"],[style*="background:#222222"],
[style*="background:#222"],[style*="background: #222"],
[style*="background:#2A2A2A"],[style*="background:#2a2a2a"],
[style*="background:#2a2a30"] { background: var(--fb-bg-2) !important; }

/* border color overrides */
[style*="border:1px solid #1"],[style*="border: 1px solid #1"],
[style*="border:1px solid #2"],[style*="border: 1px solid #2"],
[style*="border-color:#1"],[style*="border-color: #1"] {
  border-color: var(--fb-border) !important;
}

/* border-radius overrides to match fbfrr */
[style*="border-radius:8px"],[style*="border-radius: 8px"]   { border-radius: 12px !important; }
[style*="border-radius:10px"],[style*="border-radius: 10px"] { border-radius: 14px !important; }
[style*="border-radius:12px"],[style*="border-radius: 12px"] { border-radius: 16px !important; }
[style*="border-radius:14px"],[style*="border-radius: 14px"] { border-radius: 18px !important; }

/* Old green accent → purple for UI elements */
[style*="color:var(--accent)"],[style*="color: var(--accent)"] { color: #7fb0ff !important; }
[style*="border:1px solid rgba(0,255,159"],[style*="border: 1px solid rgba(0,255,159"] {
  border-color: rgba(77,141,255,0.3) !important;
}
[style*="background:rgba(0,255,159,0.0"],[style*="background: rgba(0,255,159,0.0"],
[style*="background:rgba(0,255,159,0.1"],[style*="background: rgba(0,255,159,0.1"] {
  background: rgba(77,141,255,0.08) !important;
}
[style*="border: 1px solid #1"], [style*="border:1px solid #1"],
[style*="border: 1px solid #2"], [style*="border:1px solid #2"] {
  border-color: var(--fb-border) !important;
}

/* ── Modal cards ── */
[id$="-card"][style*="background:#111"],
[id$="-card"][style*="background: #111"] {
  background: var(--fb-bg-0) !important;
  border-color: var(--fb-border) !important;
  border-radius: 18px !important;
}

/* ── Focus ring ── */
:focus-visible {
  outline: 2px solid var(--fb-acc) !important;
  outline-offset: 2px !important;
}

/* ── Selection ── */
::selection { background: rgba(77,141,255,0.2) !important; color: var(--fb-txt-0) !important; }

/* ── P&L colors — keep green/red ── */
.pos, .text-pos { color: var(--fb-pos) !important; }
.neg, .text-neg { color: var(--fb-neg) !important; }
[class*="text-emerald-4"], [class*="text-green-4"] { color: var(--fb-pos) !important; }
[class*="text-red-4"], [class*="text-rose-4"] { color: var(--fb-neg) !important; }

/* ── Fade animation ── */
@keyframes rds-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up    { animation: rds-fade 0.3s cubic-bezier(0.16,1,0.3,1) both !important; }
.fade-up-d1 { animation: rds-fade 0.3s cubic-bezier(0.16,1,0.3,1) 0.05s both !important; }
.fade-up-d2 { animation: rds-fade 0.3s cubic-bezier(0.16,1,0.3,1) 0.10s both !important; }
.fade-up-d3 { animation: rds-fade 0.3s cubic-bezier(0.16,1,0.3,1) 0.15s both !important; }

/* ── Gradient border utility (from repo) ── */
.gradient-border {
  position: relative;
  border: 1.5px solid transparent !important;
  background-clip: padding-box;
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: linear-gradient(to right, rgba(255,87,213,0.4), rgba(78,110,255,0.4));
  z-index: -1;
  pointer-events: none;
}

/* ── Grain — remove ── */
.grain-overlay { opacity: 0.01 !important; }

/* ── Ambient orbs — purple ── */
.bg-orb-1 {
  background: radial-gradient(ellipse, rgba(77,141,255,0.07) 0%, transparent 65%) !important;
  filter: blur(80px) !important;
}
.bg-orb-2 {
  background: radial-gradient(ellipse, rgba(77,141,255,0.04) 0%, transparent 65%) !important;
  filter: blur(100px) !important;
}

/* ── Empty state ── */
.empty-state {
  border: 1px dashed var(--fb-border) !important;
  border-radius: var(--fb-r-card) !important;
  background: transparent !important;
}

/* ── Skeleton ── */
.skel { background: linear-gradient(90deg, var(--fb-bg-2), var(--fb-bg-3), var(--fb-bg-2)) !important; }

/* ── Dividers ── */
.hr, .divider { background: var(--fb-border) !important; }

/* ── Glitch: disable ── */
.glitch::before, .glitch::after { display: none !important; }

/* ── Minimum readable font size (11px floor) ── */
.text-\[9px\]  { font-size: 11px !important; }
.text-\[10px\] { font-size: 11px !important; }
.text-\[10\.5px\] { font-size: 11px !important; }

/* ── Tailwind text ── */
.text-on-surface { color: var(--fb-txt-0) !important; }
.text-on-surface-variant { color: var(--fb-txt-2) !important; }
[class*="text-zinc-50"],[class*="text-zinc-100"],[class*="text-zinc-200"],[class*="text-zinc-300"] { color: var(--fb-txt-0) !important; }
[class*="text-zinc-400"] { color: var(--fb-txt-1) !important; }
[class*="text-zinc-500"],[class*="text-zinc-600"] { color: var(--fb-txt-2) !important; }

/* ── Kbd ── */
kbd {
  font-family: 'Inter', sans-serif !important;
  background: var(--fb-bg-2) !important;
  border-color: var(--fb-border) !important;
  color: var(--fb-txt-1) !important;
  border-radius: 6px !important;
}

/* ── Light mode ── */
[data-theme="light"] body {
  background-color: #f8f8fc !important;
  background-image: var(--background-image-gradient-1) !important;
  color: #1f2937 !important;
}
[data-theme="light"] .card, [data-theme="light"] .panel, [data-theme="light"] .kpi {
  background: #fff !important;
  border-color: #f3f4f6 !important;
  box-shadow: var(--fb-shadow-xs) !important;
}
[data-theme="light"] nav.fixed.top-0 {
  background: #fff !important;
  border-bottom-color: #f3f4f6 !important;
}
[data-theme="light"] .nav-link { color: #6b7280 !important; }
[data-theme="light"] .nav-link:hover { background: #f3f4f6 !important; color: #111827 !important; }
[data-theme="light"] .nav-active { background: #f3f4f6 !important; color: #111827 !important; text-shadow: none !important; }
[data-theme="light"] table th, [data-theme="light"] .tbl th { background: #fafafa !important; border-bottom-color: #f3f4f6 !important; color: #6b7280 !important; }
[data-theme="light"] table td, [data-theme="light"] .tbl td { border-bottom-color: #f9fafb !important; color: #374151 !important; }
[data-theme="light"] table tbody tr:hover, [data-theme="light"] .tbl tbody tr:hover { background: #f9fafb !important; }
[data-theme="light"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
[data-theme="light"] select, [data-theme="light"] textarea { background: #fff !important; border-color: #e5e7eb !important; color: #111827 !important; }
[data-theme="light"] .page-title { color: #111827 !important; }
[data-theme="light"] .grain-overlay { display: none !important; }
[data-theme="light"] .bg-orb { display: none !important; }
[data-theme="light"] .pos { color: #059669 !important; }
[data-theme="light"] .neg { color: #dc2626 !important; }

/* ================================================================
   VISUAL UPGRADE v2 — Bold Type · Micro-interactions · Broken Grid
   fbfrr design system · 2026
   ================================================================ */

/* ── font-sans override: Tailwind's font-sans now resolves to Onest ── */
.font-sans { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; }

/* ──────────────────────────────────────────────────────────────────
   A. bg-surface-container-low → proper card treatment
   Applies radius + border to every panel across all 29 pages.
   Nested occurrences get smaller radius so inner boxes stay clean.
   ────────────────────────────────────────────────────────────────── */
.bg-surface-container-low {
  border-radius: var(--fb-r-card) !important;
  border: 1px solid var(--fb-border) !important;
}
.bg-surface-container-low .bg-surface-container-low {
  border-radius: var(--fb-r-sm) !important;
}
/* Light mode border */
[data-theme="light"] .bg-surface-container-low {
  border-color: #e5e7eb !important;
}

/* ──────────────────────────────────────────────────────────────────
   B. press-card & press-btn — hover lift + active press
   Used in dashboard stat cards and ticker buttons.
   ────────────────────────────────────────────────────────────────── */
.press-card {
  transition:
    transform 220ms cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow 220ms ease,
    border-color 220ms ease !important;
}
.press-card:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(122, 90, 248, 0.15) !important;
  border-color: rgba(122, 90, 248, 0.2) !important;
}
.press-card:active {
  transform: translateY(-1px) scale(0.996) !important;
  transition-duration: 80ms !important;
}
.press-btn {
  transition: background 100ms ease, border-color 100ms ease, transform 100ms ease !important;
}
.press-btn:active {
  transform: scale(0.97) !important;
}

/* ──────────────────────────────────────────────────────────────────
   C. Floating micro-interactions — fbfrr repo pattern
   .floating-1/2/3/4 are utility classes; apply to decorative elements.
   ────────────────────────────────────────────────────────────────── */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes float-x {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(6px); }
}
@keyframes float-xy {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(6px, -6px); }
}
@keyframes float-rev {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

.floating-1 { animation: float-y   3s   ease-in-out infinite; }
.floating-2 { animation: float-x   4s   ease-in-out infinite; }
.floating-3 { animation: float-rev 5s   ease-in-out infinite; }
.floating-4 { animation: float-xy  3.5s ease-in-out infinite; }

/* Ambient orbs get a slow float */
.bg-orb-1 { animation: float-y   12s ease-in-out infinite !important; }
.bg-orb-2 { animation: float-rev 16s ease-in-out infinite !important; }

/* ──────────────────────────────────────────────────────────────────
   D. Gradient text utilities
   ────────────────────────────────────────────────────────────────── */
.gradient-text {
  background: var(--fb-acc-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.pos-gradient-text {
  background: linear-gradient(135deg, #12b76a 0%, #34d399 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.neg-gradient-text {
  background: linear-gradient(135deg, #f04438 0%, #fb7185 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.warn-gradient-text {
  background: linear-gradient(135deg, #f59e0b 0%, #fcd34d 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ──────────────────────────────────────────────────────────────────
   E. Bold KPI + stat card typography
   ────────────────────────────────────────────────────────────────── */

/* KPI component values — bump from 24px/700 to 32px/800 */
.kpi .kpi-value {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

/* Stat card values (text-3xl inside press-card) — heavier weight */
.press-card [class*="text-3xl"],
.press-card [class*="text-2xl"] {
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

/* Major section headings (TRADE_STATS, etc.) */
h2[class*="text-3xl"],
h2[class*="text-2xl"] {
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

/* Section label headings (// HOT_COINS, // MARKET_PULSE, etc.) */
.bg-surface-container-low > div > h3,
.bg-surface-container-low > h3 {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

/* ──────────────────────────────────────────────────────────────────
   F. Broken grid — desktop stagger on stat cards
   The 4 KPI stat cards (.press-card) stair-step vertically at md+.
   Grid stays uniform on mobile (single/two-col), only breaks at 768px+.
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .grid .press-card:nth-child(2) { margin-top: 16px; }
  .grid .press-card:nth-child(3) { margin-top: 28px; }
  .grid .press-card:nth-child(4) { margin-top: 10px; }
}

/* Offset utility classes for one-off panel offsetting */
.offset-up-sm  { margin-top: -8px; }
.offset-up-md  { margin-top: -16px; }
.offset-down-sm { margin-top: 8px; }
.offset-down-md { margin-top: 16px; }

/* ──────────────────────────────────────────────────────────────────
   G. Accent panel variants
   ────────────────────────────────────────────────────────────────── */
.panel-accent-top {
  border-top: 2px solid var(--fb-acc) !important;
}
.panel-glow:hover {
  box-shadow: var(--glow-accent) !important;
}
.card-featured {
  border-color: rgba(122, 90, 248, 0.2) !important;
  background: linear-gradient(
    135deg,
    rgba(122, 90, 248, 0.04) 0%,
    transparent 60%
  ) !important;
}

/* ──────────────────────────────────────────────────────────────────
   H. prefers-reduced-motion — collapse all new animations
   ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .floating-1,
  .floating-2,
  .floating-3,
  .floating-4,
  .bg-orb-1,
  .bg-orb-2 {
    animation: none !important;
  }
  .press-card,
  .press-btn {
    transition: none !important;
  }
  .press-card:hover {
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   NOCTURNE — reusable page-chrome components (header, stat cards,
   status footer). Exact values from the "Redesign UI web" artifact's
   generic-page + calendar artboards. Any page can opt in.
   ════════════════════════════════════════════════════════════════ */

.nc-header {
  max-width: 1320px; margin: 0 auto; padding: 22px 0 0;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 17px;
}
.nc-header-main { flex: 1; min-width: 260px; }
.nc-eyebrow {
  font-size: 10.5px; letter-spacing: 0.22em; color: var(--accent-2);
  text-transform: uppercase;
}
.nc-header h1, h1.nc-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important; font-size: 28px !important;
  letter-spacing: -0.02em !important; margin: 6px 0 0 !important;
}
.nc-subtitle {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 8px; font-size: 12px; color: var(--ink-3);
}
.nc-subtitle > span + span::before { content: "/"; margin-right: 8px; color: var(--ink-4); }
.nc-header-actions { display: flex; gap: 8px; align-items: center; }

.nc-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; max-width: 1320px; margin: 17px auto 0;
}
.nc-stat-card {
  background: var(--bg-2); border-radius: 10px; box-shadow: var(--sh-1);
  padding: 11px 12px;
}
.nc-stat-card .lbl { font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; }
.nc-stat-card .val { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-top: 4px; font-family: var(--ff-mono); }
.nc-stat-card .note { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

.nc-status-footer {
  max-width: 1320px; margin: 28px auto 0; padding: 11px 0;
  border-top: 1px solid var(--line-2); display: flex; gap: 17px;
  font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-3);
  text-transform: uppercase; align-items: center;
}

/* ════════════════════════════════════════════════════════════════
   NOCTURNE — panel / table / chip components (spec: "Panel opsional",
   "Tabel" shared pattern used by trades/portfolio/leaderboard/
   watchlist/hedge). Completes the nc-header/nc-stats set above.
   ════════════════════════════════════════════════════════════════ */

.nc-panels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 11px; max-width: 1320px; margin: 11px auto 0;
}
.nc-panel {
  background: var(--bg-2); border-radius: 10px; box-shadow: var(--sh-1);
  padding: 14px 16px;
}
.nc-panel .nc-panel-title {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px;
}
.nc-panel-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 5px 0; font-size: 12.5px; color: var(--ink-1);
}
.nc-panel-row .val { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink-0); }
.nc-panel-bar {
  height: 3px; border-radius: 999px; background: var(--bg-3); margin-top: 3px; overflow: hidden;
}
.nc-panel-bar > span { display: block; height: 100%; border-radius: inherit; transition: width var(--dur-2, 240ms) var(--ease, ease); }
.nc-panel-bar > span.pos { background: var(--pos); }
.nc-panel-bar > span.neg { background: var(--neg); }
.nc-panel-bar > span.accent { background: var(--accent); }
.nc-panel-bar > span.warn { background: var(--warn); }

/* ── Table card: toolbar (chips left, meta right) + scrollable table ── */
.nc-table-card {
  max-width: 1320px; margin: 14px auto 0;
  background: var(--bg-2); border-radius: 10px; box-shadow: var(--sh-1);
  overflow: hidden;
}
.nc-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
}
.nc-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.nc-chip {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-3); background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 5px 10px; cursor: pointer;
  transition: background var(--dur-1, 120ms) ease, color var(--dur-1, 120ms) ease;
  min-height: 30px; display: inline-flex; align-items: center;
}
.nc-chip:hover { background: var(--bg-3); color: var(--ink-1); }
.nc-chip.active, .nc-chip[aria-pressed="true"] { background: var(--bg-3); color: var(--ink-0); }
.nc-toolbar-meta { font-size: 11.5px; color: var(--ink-3); }

.nc-table-wrap { overflow-x: auto; }
.nc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.nc-table th {
  text-align: left; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-3); padding: 9px 12px;
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.nc-table td {
  padding: 9px 12px; border-bottom: 1px solid var(--line-1); color: var(--ink-1);
  white-space: nowrap;
}
.nc-table th.num, .nc-table td.num {
  text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.nc-table tbody tr { transition: background var(--dur-1, 120ms) ease; }
.nc-table tbody tr:hover { background: var(--bg-3); }
.nc-table .dim { color: var(--ink-4); }
.nc-table .sub { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }

@media (max-width: 600px) {
  .nc-toolbar { padding: 10px 12px; }
  .nc-chip { padding: 6px 11px; }
}