/* FlowDesk theme (2026-10-14): one modern look for every page, modeled on TerraShade.
   Loaded LAST in each page's <head>, so it re-points every page's own color variables and evens out
   fonts, cards, buttons and tables without touching page logic. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: dark;
  /* base palette */
  --fd-bg: #0b1220; --fd-card: #111a2b; --fd-card2: #16213a; --fd-line: #22304a; --fd-grid: #18233a;
  --fd-ink: #eef3fb; --fd-ink2: #c9d3e3; --fd-mut: #8c9ab3; --fd-dim: #5f6d86;
  --fd-gold: #f5c542; --fd-cyan: #38d9f5; --fd-pink: #f472b6; --fd-teal: #2dd4bf; --fd-violet: #c084fc;
  --fd-up: #4ade80; --fd-dn: #f87171;

  /* dashboard (styles.css) tokens */
  --page: var(--fd-bg); --surface: var(--fd-card); --surface-2: var(--fd-card2);
  --ink: var(--fd-ink); --ink-2: var(--fd-ink2); --muted: var(--fd-mut);
  --grid: var(--fd-grid); --baseline: #2a3a57; --border: var(--fd-line);
  --accent: var(--fd-cyan); --gold: var(--fd-gold); --violet: var(--fd-violet);
  --bull: var(--fd-up); --bear: var(--fd-dn);
  /* straddle / thursday / backtest tokens */
  --bg: var(--fd-bg); --surf: var(--fd-card); --surf2: var(--fd-card2); --line: var(--fd-line);
  --mut: var(--fd-mut); --up: var(--fd-up); --dn: var(--fd-dn); --acc: var(--fd-gold);
  /* playbook tokens */
  --s1: var(--fd-card); --s2: var(--fd-card2); --s3: #1c2945; --dim: var(--fd-dim);
}

html, body { background: var(--fd-bg) !important; }
body {
  color: var(--fd-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
code, pre, kbd, .mono { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }
a { color: #7dd3fc; }

/* cards / panels / tiles */
.card, .tile, .panel, .board, .box, .detail, .tile3, .pk, .sc, .tw, .empty, .stat {
  border-radius: 16px !important;
  border-color: var(--fd-line) !important;
}
.card, .tile, .panel, .board, .tile3, .pk, .sc {
  background: linear-gradient(180deg, var(--fd-card), #0f1726) !important;
}
.tile .v, .tile3 .v, .stat b { letter-spacing: -0.01em; }

/* buttons, chips, pills */
button, .btn, select, input { font-family: inherit; }
.btn, .seg, .pill, .chip, .tab, .densbtn {
  border-radius: 10px !important;
}
.btn { background: var(--fd-card) !important; border: 1px solid var(--fd-line) !important; color: var(--fd-ink) !important; font-weight: 600; }
.btn:hover { border-color: #3a4c6e !important; }
.chip, .pill { border-radius: 999px !important; }
input[type=text], input[type=search], input[type=number], select, textarea {
  background: var(--fd-card2); color: var(--fd-ink); border: 1px solid var(--fd-line); border-radius: 9px;
}

/* tables */
table { border-color: var(--fd-line); }
th { color: var(--fd-dim) !important; font-size: 10.5px !important; letter-spacing: .08em; text-transform: uppercase; font-weight: 700 !important; }
td { border-color: var(--fd-grid) !important; }
tr:hover td { background: rgba(56, 217, 245, 0.03); }

/* headings */
h1 { font-weight: 800; letter-spacing: -0.02em; }
h2 { letter-spacing: .01em; }

/* dashboard sidebar */
.sidebar { background: #0d1626 !important; border-right: 1px solid var(--fd-line) !important; }
.sidebar .logo { font-weight: 800 !important; letter-spacing: -0.01em !important; }
.sidebar .nav { border-radius: 10px !important; color: var(--fd-mut) !important; font-weight: 600 !important; font-size: 13px !important; }
.sidebar .nav:hover { background: rgba(255,255,255,.03) !important; color: var(--fd-ink) !important; }
.sidebar .nav.active { background: var(--fd-card2) !important; color: var(--fd-ink) !important; box-shadow: inset 2px 0 0 var(--fd-gold); }
.sidebar .navsect { color: var(--fd-dim) !important; font-size: 10.5px !important; letter-spacing: .12em !important; text-transform: uppercase; font-weight: 700 !important; margin: 14px 10px 4px !important; }

/* shared top tab bar (nav.js) */
.fd-topnav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; margin: -12px -14px 14px; background: rgba(11,18,32,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--fd-line); }
.fd-topnav .fd-logo { font-weight: 800; font-size: 16px; color: var(--fd-ink); text-decoration: none; display: flex; gap: 8px; align-items: center; }
.fd-topnav .fd-logo img { width: 22px; height: 22px; border-radius: 6px; }
.fd-topnav .fd-tabs { margin-left: auto; display: flex; gap: 3px; background: var(--fd-card); border: 1px solid var(--fd-line);
  border-radius: 12px; padding: 3px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.fd-topnav .fd-tabs a { white-space: nowrap; color: var(--fd-mut); text-decoration: none; font: 600 12.5px Inter, sans-serif; padding: 6px 11px; border-radius: 9px; }
.fd-topnav .fd-tabs a.on { background: var(--fd-card2); color: var(--fd-ink); }
.fd-topnav .fd-tabs a:hover { color: var(--fd-ink); }
@media (max-width: 700px) { .fd-topnav .fd-tabs { margin-left: 0; width: 100%; } }
/* the dashboard has its own content padding */
.content .fd-topnav { margin: -20px -24px 16px; }