/* glass.css -- shared look for the subscriber pages (/gbs and the levels chart).
   Brand tokens are the landing page's own: void navy, amber, blue (calls) / coral
   (puts), IBM Plex Sans + Mono. Glass = translucent surface + hairline edge + a
   soft blur; the only colour in the background is a faint blue/amber glow. */

@font-face{ font-family:'Plex Sans'; font-weight:400; font-style:normal; font-display:swap;
  src:url(/static/fonts/plex-sans-400.woff2) format('woff2'); }
@font-face{ font-family:'Plex Sans'; font-weight:600; font-style:normal; font-display:swap;
  src:url(/static/fonts/plex-sans-600.woff2) format('woff2'); }
@font-face{ font-family:'Plex Mono'; font-weight:500; font-style:normal; font-display:swap;
  src:url(/static/fonts/plex-mono-500.woff2) format('woff2'); }

:root{
  --void:#0a0e16; --void-2:#0d1220;
  --ink-hi:#eef1f6; --ink-md:#aab2c4; --ink-lo:#6d7690;
  --amber:#e0a542; --blue:#5b9bdb; --coral:#e2645f; --up:#3fb68b;
  --glass:rgba(255,255,255,.035); --glass-hi:rgba(255,255,255,.075);
  --edge:rgba(255,255,255,.085); --edge-hi:rgba(255,255,255,.15);
  --sans:'Plex Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'Plex Mono',ui-monospace,Consolas,'Courier New',monospace;
}

html body{
  background-color:var(--void);
  background-image:
    radial-gradient(900px 520px at 6% -8%, rgba(91,155,219,.12), transparent 62%),
    radial-gradient(760px 440px at 98% 0%, rgba(224,165,66,.075), transparent 60%),
    linear-gradient(180deg, var(--void) 0%, var(--void-2) 100%);
  background-attachment:fixed;
  color:var(--ink-hi);
  font-family:var(--sans);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  padding:30px 28px 48px;
}
.wrap{ max-width:1600px; }

/* ---- header ------------------------------------------------------------ */
.top{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--ink-lo); margin-bottom:26px; }
.top a{ color:var(--ink-md); text-decoration:none; transition:color .15s; }
.top a:hover{ color:var(--ink-hi); }
h1{ font:600 27px/1.15 var(--sans); letter-spacing:-.012em; color:var(--ink-hi); margin:0 0 6px; }
.spot-badge{ font:500 13px var(--mono); color:var(--ink-hi); background:var(--glass-hi);
  border:1px solid var(--edge); border-radius:8px; padding:3px 10px; letter-spacing:.01em; }
.exp-label{ font:500 12px var(--mono); color:var(--ink-lo); letter-spacing:.02em; }
.sub{ color:var(--ink-md); font-size:13px; margin:0 0 22px; }

/* ---- glass surfaces ----------------------------------------------------- */
.card,.lc-panel,.locked-note{
  background:linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.022));
  border:1px solid var(--edge);
  border-radius:14px;
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 24px 48px -28px rgba(0,0,0,.75);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.lc-panel,.locked-note{ background:rgba(18,26,40,.94); }
}
.card{ padding:22px; }
.locked-note{ color:var(--ink-lo); font-size:12px; padding:10px 14px; border-radius:10px; }

/* ---- controls: segmented capsules --------------------------------------- */
.statusrow,.modetabs,.hist-bar{ gap:12px; }
.tabs,.lc-seg{ display:inline-flex; gap:2px; padding:3px; background:rgba(255,255,255,.04);
  border:1px solid var(--edge); border-radius:10px; }
.tab,.lc-btn{ background:transparent; border:0; color:var(--ink-md); font:500 12px var(--sans);
  padding:6px 14px; border-radius:7px; cursor:pointer; letter-spacing:.01em;
  transition:background .15s, color .15s; }
.tab:hover,.lc-btn:hover{ color:var(--ink-hi); background:rgba(255,255,255,.05); }
.tab.active,.lc-btn.on{ background:var(--glass-hi); color:var(--ink-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 1px 2px rgba(0,0,0,.3); }
.tab:disabled{ opacity:.35; cursor:not-allowed; }
/* Live / Session History sit outside a capsule: give them their own glass pill */
.modetabs > .tab{ background:var(--glass); border:1px solid var(--edge); border-radius:9px; padding:7px 16px; }
.modetabs > .tab.active{ background:var(--glass-hi); border-color:var(--edge-hi); }
.nav-btn{ background:var(--glass); border:1px solid var(--edge); color:var(--ink-md); border-radius:7px;
  padding:4px 11px; cursor:pointer; font-size:13px; transition:background .15s, color .15s; }
.nav-btn:hover{ background:var(--glass-hi); color:var(--ink-hi); }
.live-btn{ background:rgba(63,182,139,.12); border:1px solid rgba(63,182,139,.32); color:#7fdcb8;
  border-radius:8px; padding:5px 13px; cursor:pointer; font:500 12px var(--mono); letter-spacing:.04em; }
input[type=date]{ background:var(--glass); border:1px solid var(--edge); color:var(--ink-hi);
  border-radius:7px; padding:5px 9px; font:500 12px var(--mono); color-scheme:dark; }
.hist-bar label{ color:var(--ink-lo); font:500 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.scrub-ts{ font-family:var(--mono); color:var(--ink-md); }
.snap-count{ font-family:var(--mono); color:var(--ink-lo); }

/* ---- status pills -------------------------------------------------------- */
.badge,.lc-badge{ display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px;
  font:500 11px var(--mono); letter-spacing:.05em; background:var(--glass); border:1px solid var(--edge);
  color:var(--ink-md); }
.badge.live,.lc-badge.live{ background:rgba(63,182,139,.10); border-color:rgba(63,182,139,.30); color:#7fdcb8; }
.badge.stale,.lc-badge.stale{ background:rgba(224,165,66,.10); border-color:rgba(224,165,66,.30); color:var(--amber); }
.badge.down{ background:rgba(226,100,95,.10); border-color:rgba(226,100,95,.30); color:#ee8a85; }
.badge.live::before,.lc-badge.live::before,.badge.stale::before,.lc-badge.stale::before,.badge.down::before{
  content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ---- hover tooltip ------------------------------------------------------- */
.tooltip{ background:rgba(14,20,32,.78); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--edge-hi); border-radius:9px; padding:9px 13px; font:12px/1.55 var(--mono);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.65); }
.tooltip .strike{ color:var(--ink-hi); font-weight:500; }
.hoverline{ background:rgba(238,241,246,.22); }

/* ---- legend + stat tiles ------------------------------------------------- */
.legend-bar{ padding:14px 2px 4px; gap:18px; }
.leg-item{ color:var(--ink-lo); font:500 11px var(--sans); letter-spacing:.02em; }
.stats-bar{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; padding:12px 0 0; }
.stat-tile{ background:var(--glass); border:1px solid var(--edge); border-radius:11px; padding:11px 15px; gap:4px; }
.stat-lbl{ font:500 10px var(--mono); letter-spacing:.09em; color:var(--ink-lo); }
.stat-val{ font:500 17px var(--mono); letter-spacing:-.01em; }
.foot-note{ color:var(--ink-lo); font-size:12px; }
.empty{ color:var(--ink-md); }

/* ---- levels chart (embedded under GBS, or standalone) --------------------- */
.lc-wrap{ margin-top:38px; }
.lc-wrap h2{ font:600 19px/1.2 var(--sans); letter-spacing:-.008em; color:var(--ink-hi); margin:0 0 5px; }
.lc-sub{ color:var(--ink-md); font-size:13px; margin:0 0 16px; }
.lc-bar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.lc-banner{ background:rgba(224,165,66,.065); border:1px solid rgba(224,165,66,.2); border-left:3px solid var(--amber);
  color:#e6cf9f; border-radius:10px; padding:10px 14px; font-size:13px; line-height:1.5; margin-bottom:14px; }
.lc-grid{ gap:16px; }
.lc-panel{ padding:12px; }
.lc-chartrow{ gap:10px; }
.lc-strip{ border-left:1px solid var(--edge); }
.lc-panel th{ font:500 10px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-lo);
  border-bottom:1px solid var(--edge); padding:6px 8px; }
.lc-panel td{ border-bottom:1px solid rgba(255,255,255,.045); padding:6px 8px; color:var(--ink-md); }
.lc-panel td.r{ font-family:var(--mono); color:var(--ink-hi); }
.lc-panel tbody tr:hover td{ background:rgba(255,255,255,.03); }
.lc-dot{ width:8px; height:8px; margin-right:9px; }
.lc-note{ color:var(--ink-lo); font-size:12px; }
.lc-note a{ color:var(--ink-md); }

/* brand mark centred in the price plot (same asset + treatment as the GBS strike chart):
   behind the candles and level lines; right/bottom insets skip the price scale and time axis */
#lcChart{ position:relative; }
#lcChart::before{ content:''; position:absolute; z-index:0; left:0; top:0; right:70px; bottom:28px;
  background:url(/static/mna_watermark.png) center / clamp(120px, 32%, 240px) auto no-repeat;
  opacity:.22; pointer-events:none; }

/* ==== sign-up / login / forgot / account / status (body.gl) ====================
   Same glass language as /gbs. Scoped to body.gl so the strike chart and price chart
   pages are untouched. Primary action = the brand amber, not neon green. */
body.gl{ box-sizing:border-box; min-height:100vh; height:auto; }
.box{ position:relative; }
body.gl .box,.box{
  background:linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.024));
  border:1px solid var(--edge); border-radius:16px; padding:34px;
  -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 60px -30px rgba(0,0,0,.8);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .box{ background:rgba(18,26,40,.95); } }
body.gl h1{ font:600 22px/1.2 var(--sans); letter-spacing:-.01em; color:var(--ink-hi); margin:0 0 20px; }
body.gl .wrap h1{ font-size:27px; margin:6px 0 22px; }
body.gl p{ color:var(--ink-md); }
body.gl label{ font:500 12px var(--sans); letter-spacing:.02em; color:var(--ink-md); }
body.gl input:not([type=checkbox]):not([type=radio]){
  background:rgba(255,255,255,.04); border:1px solid var(--edge); border-radius:10px; color:var(--ink-hi);
  padding:11px 13px; font:400 14px var(--sans); transition:border-color .15s, box-shadow .15s, background .15s; }
body.gl input:not([type=checkbox]):not([type=radio]):hover{ background:rgba(255,255,255,.06); }
body.gl input:not([type=checkbox]):not([type=radio]):focus{ outline:none; background:rgba(255,255,255,.07);
  border-color:rgba(91,155,219,.65); box-shadow:0 0 0 3px rgba(91,155,219,.16); }
body.gl input[type=radio],body.gl input[type=checkbox]{ accent-color:var(--blue); }
body.gl input::placeholder{ color:var(--ink-lo); }

/* primary action */
body.gl button,body.gl .btn{
  background:var(--amber); color:#1b1304; border:0; border-radius:10px; font:600 14px var(--sans);
  letter-spacing:.01em; padding:11px 16px; cursor:pointer; text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px -10px rgba(224,165,66,.55);
  transition:filter .15s, transform .05s; }
body.gl button:hover,body.gl .btn:hover{ filter:brightness(1.08); }
body.gl button:active,body.gl .btn:active{ transform:translateY(1px); }
body.gl button:disabled{ opacity:.5; cursor:not-allowed; filter:none; }
body.gl .btn.disabled{ background:rgba(255,255,255,.06); color:var(--ink-lo); box-shadow:none; cursor:not-allowed; }
body.gl .btn{ display:inline-block; margin-top:14px; font-size:13px; padding:10px 18px; }
/* quiet buttons (logout etc.) stay glass, not amber */
body.gl .top button{ width:auto; background:var(--glass); color:var(--ink-md); border:1px solid var(--edge);
  box-shadow:none; font:500 12px var(--sans); padding:6px 13px; border-radius:8px; }
body.gl .top button:hover{ color:var(--ink-hi); background:var(--glass-hi); filter:none; }
body.gl .top span{ color:var(--ink-lo); font:500 12px var(--mono); letter-spacing:.03em; }

/* error line */
body.gl .err{ background:rgba(226,100,95,.08); border:1px solid rgba(226,100,95,.28); color:#f0a09c;
  border-radius:10px; padding:10px 13px; font-size:13px; line-height:1.5; }
body.gl .err a{ color:inherit; }
body.gl a{ color:var(--ink-md); }
body.gl a:hover{ color:var(--ink-hi); }

/* sign-up: symbol picker + tier cards */
.sym-toggle{ display:inline-flex; gap:2px; padding:3px; background:rgba(255,255,255,.04); border:1px solid var(--edge);
  border-radius:11px; margin:-2px 0 18px; }
body.gl .sym-btn{ flex:1; background:transparent; color:var(--ink-md); border:0; border-radius:8px; box-shadow:none;
  font:500 12px var(--mono); letter-spacing:.06em; padding:7px 18px; }
body.gl .sym-btn:hover{ color:var(--ink-hi); background:rgba(255,255,255,.05); filter:none; }
body.gl .sym-btn.active{ background:var(--glass-hi); color:var(--ink-hi); box-shadow:inset 0 1px 0 rgba(255,255,255,.09); }
.tiers{ gap:10px; }
body.gl .tier,body.gl .addon{
  background:var(--glass); border:1px solid var(--edge); border-radius:13px; padding:13px 15px; gap:12px;
  transition:border-color .15s, background .15s; }
body.gl .tier:hover,body.gl .addon:hover{ background:rgba(255,255,255,.055); border-color:var(--edge-hi); }
body.gl .tier.active{ background:rgba(91,155,219,.09); border-color:rgba(91,155,219,.55); }
body.gl .tier .name,body.gl .addon .name{ color:var(--ink-hi); font:600 14px var(--sans); }
body.gl .tier .desc{ color:var(--ink-md); font-size:12px; line-height:1.45; margin-top:2px; }
body.gl .tier .price,body.gl .addon .price{ color:var(--ink-hi); font:500 14px var(--mono); }
body.gl .addon-bundled{ color:var(--ink-lo); font-size:12px; }

/* account / status rows and notes */
body.gl .card{ padding:22px; margin-bottom:16px; }
body.gl .row{ border-bottom:1px solid rgba(255,255,255,.06); padding:9px 0; font-size:13px; }
body.gl .row span:first-child{ color:var(--ink-md); }
body.gl .row span:last-child{ color:var(--ink-hi); font-family:var(--mono); font-weight:500; }
body.gl .note{ color:var(--ink-lo); font-size:12px; line-height:1.55; }
body.gl .meta{ color:var(--ink-md); }
body.gl td{ border-bottom:1px solid rgba(255,255,255,.06); color:var(--ink-md); }
body.gl td:last-child{ color:var(--ink-hi); font-family:var(--mono); }
body.gl .override{ font-family:var(--mono); background:rgba(0,0,0,.28); border:1px solid var(--edge);
  border-radius:10px; color:var(--ink-hi); }
body.gl .badge.ok{ background:rgba(63,182,139,.10); border:1px solid rgba(63,182,139,.30); color:#7fdcb8; }
body.gl .badge.bad{ background:rgba(226,100,95,.10); border:1px solid rgba(226,100,95,.30); color:#ee8a85; }
body.gl .badge.neutral{ background:rgba(224,165,66,.10); border:1px solid rgba(224,165,66,.30); color:var(--amber); }

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


/* ---- themed scrollbars (2026-09-30): the browser default is a bright white bar on this dark UI ---- */
html{ color-scheme:dark; }
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.30); background-clip:padding-box; }