@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap");
/* Shared page shell: one content width, sticky nav with brand, icons and market clock.
   Loaded after each page's own <style>, so these rules win at equal specificity. */

/* Midnight theme (same look as /login, chosen 2026-10-31): always dark, whatever the system setting.
   Overrides every page's own light/dark tokens, including the page-specific chart tokens. */
:root {
  --bg: #0b1220; --panel: #111b30; --ink: #e7ecf5; --muted: #9aa7bf; --line: #1f2b45; --row: #0e1729; --chip: #16233d;
  --accent: #7fb0ff; --on-accent: #0b1220;
  --up: #4ad295; --down: #ff7b72; --buy: #4ad295; --sell: #ff7b72;
  --flat: #2b3954; --heat-up: #138a55; --heat-down: #c0392f;
  --warn: #f0b429; --warn-bg: #2a2412; --flash: #26334f;
  --grid: #18233a; --poc: #f0b429; --vwap: #b88cf0; --va: #7fb0ff;
  --s1: #5b9cff; --s2: #e0773f; --o1: #5b9cff; --o2: #d69e00; --o3: #9d93f0; --o4: #e0629a;
  color-scheme: dark;
}
body { background: var(--bg); color: var(--ink); font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }

/* Data tables on every page: thin rules between rows and columns, a firmer rule under the header and a
   highlight on the row under the pointer, so a stock's row reads straight across */
:root { --rule: #2a3a5e; --rule-strong: #3d527f; }
.wrap table th, .wrap table td { border-bottom: 1px solid var(--rule); }
.wrap table th + th, .wrap table td + td { border-left: 1px solid var(--rule); }
.wrap table thead th, .wrap table tr:first-child > th { border-bottom-color: var(--rule-strong); }
.wrap table tbody tr:hover > td { background-color: color-mix(in srgb, var(--accent) 8%, transparent); }
/* Small key/value tables in tooltips stay plain */
#tip table th, #tip table td { border: 0; background: none; }
h1, h2 { letter-spacing: -0.015em; }
input, select, textarea, button { font-family: inherit; }
.wrap { max-width: 1600px; padding: 0 20px 48px; }

.wrap > nav:first-child {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 2px;
  margin: 0 0 20px; padding-top: 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.wrap > nav:first-child::-webkit-scrollbar { display: none; }
.wrap > nav:first-child .nav-group { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.wrap > nav:first-child .nav-group + .nav-group { margin-left: 7px; padding-left: 7px; border-left: 1px solid var(--line); }
.wrap > nav:first-child .nav-label { display: none; }
.wrap > nav:first-child a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px; color: var(--muted); text-decoration: none; font-size: 13px; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s;
}
.wrap > nav:first-child a:hover { color: var(--ink); }
.wrap > nav:first-child a.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.wrap > nav:first-child a::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: currentColor; opacity: .7;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.wrap > nav:first-child a.on::before { background: var(--accent); opacity: 1; }

/* Icons: 24px grid, 2px strokes */
.wrap > nav:first-child a[href="/"]              { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.wrap > nav:first-child a[href="/ihsg/"]         { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4M8 13h2M14 13h2M8 17h2M14 17h2'/%3E%3C/svg%3E"); }
.wrap > nav:first-child a[href="/watchlist"]     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.3 6.5 20.2l1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E"); }
.wrap > nav:first-child a[href="/heatmap"]       { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='10' height='10' rx='1'/%3E%3Crect x='15' y='3' width='6' height='6' rx='1'/%3E%3Crect x='15' y='11' width='6' height='10' rx='1'/%3E%3Crect x='3' y='15' width='10' height='6' rx='1'/%3E%3C/svg%3E"); }
.wrap > nav:first-child a[href="/running-trade"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-7 4 14 3-7h4'/%3E%3C/svg%3E"); }
.wrap > nav:first-child a[href="/flow"]          { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l5-5 4 3 7-8'/%3E%3Cpath d='M15 7h5v5'/%3E%3C/svg%3E"); }
.wrap > nav:first-child a[href="/footprint"]     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 3v18M17 3v18'/%3E%3Crect x='5' y='7' width='4' height='8' rx='1' fill='%23000'/%3E%3Crect x='15' y='9' width='4' height='7' rx='1'/%3E%3C/svg%3E"); }
.wrap > nav:first-child a[href="/chart"]         { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-5 3 3 5-6'/%3E%3C/svg%3E"); }
.wrap > nav:first-child a[href="/screener"]      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E"); }
.wrap > nav:first-child a[href="/rrg"]           { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3Cpath d='M7 17c1-4 3-6 6-7s4-2 5-4'/%3E%3Ccircle cx='18' cy='6' r='1.5' fill='%23000'/%3E%3C/svg%3E"); }
.wrap > nav:first-child a[href="/backtest"]      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3Cpath d='M3 12H1M23 12h-2'/%3E%3C/svg%3E"); }
.wrap > nav:first-child a[href="/daily-trade"]   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20h16M6 16v-4M10 16V8M14 16v-6M18 16V5'/%3E%3C/svg%3E"); }
.wrap > nav:first-child a[href="/subscriptions"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1' fill='%23000'/%3E%3Ccircle cx='4.5' cy='12' r='1' fill='%23000'/%3E%3Ccircle cx='4.5' cy='18' r='1' fill='%23000'/%3E%3C/svg%3E"); }

/* Brand mark (added by shell.js) */
.wrap > nav:first-child .brand { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 8px 0; margin-right: 6px; color: var(--ink); font-weight: 650; font-size: 13px; letter-spacing: -0.01em; white-space: nowrap; border-right: 1px solid var(--line); }
.wrap > nav:first-child .brand svg { width: 20px; height: 20px; color: var(--accent); }

/* Market session + clock (added by shell.js) */
.wrap > nav:first-child .mkt { margin-left: auto; padding: 0 0 8px 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wrap > nav:first-child .mkt i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .5; }
.wrap > nav:first-child .mkt.open i { background: var(--up, var(--buy, #13804a)); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--up, var(--buy, #13804a)) 22%, transparent); }
.wrap > nav:first-child .mkt.pause i { background: #c98a00; opacity: 1; }
.wrap > nav:first-child .mkt b { color: var(--ink); font-weight: 600; }

/* Page titles: same size everywhere, with a short accent tick */
h1 { font-size: 22px; letter-spacing: -0.01em; }
.wrap > h1::before, header h1::before { content: ""; display: inline-block; width: 4px; height: .8em; margin-right: 10px; border-radius: 2px; background: var(--accent); vertical-align: -0.04em; }

/* Eleven menu items: drop the brand name before the clock gets squeezed */
@media (max-width: 1620px) { .wrap > nav:first-child .brand span, .wrap > nav:first-child .mkt span { display: none; } .wrap > nav:first-child .brand { padding-right: 10px; } }

@media (max-width: 640px) {
  .wrap { padding: 0 16px 40px; }
  .wrap > nav:first-child .brand span, .wrap > nav:first-child .mkt span { display: none; }
}

/* Account / guest trial row under the nav (AUTH=on) */
.acct { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: -8px 0 12px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.acct b { color: var(--ink); font-variant-numeric: tabular-nums; }
.acct.low b { color: var(--down, #c2362b); }
.acct a, .acct button { padding: 3px 12px; border: 1px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.acct a:hover, .acct button:hover { background: var(--accent); color: #fff; }