/* Shared styles. Layout differs by page via body.screener / body.builder.
 *
 * Visual language adapted from Invesco's product site (invesco.com): electric
 * "Invesco blue" #000AD2 as the single brand accent, a deep navy ink, editorial
 * serif headings over a clean grotesque body, hairline cool-gray rules, sharp
 * (square) corners, and quiet light-gray surfaces. Invesco ships proprietary
 * faces (Graphik / InvescoEditor); we substitute the closest free equivalents:
 * Inter for the sans body and Source Serif 4 for the editorial headings. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap');

:root {
  --inv-blue:#000AD2;            /* the one brand accent: links, active, selection */
  --inv-blue-deep:#0007a3;       /* hover / pressed */
  --inv-navy:#0A1331;            /* headings, strong ink */
  --ink:#0a0a0a;                 /* body text */
  --ink-2:#555;                  /* secondary text */
  --ink-3:#767676;               /* muted / captions */
  --ink-4:#9aa0aa;               /* faint */
  --line:#dcdcdc;                /* hairline divider */
  --line-cool:rgba(158,168,188,.35);
  --surface:#fff;
  --surface-2:#f5f6f8;           /* light section band */
  --surface-3:#eceef2;           /* sticky headers */
  --pos:#1a7f37;                 /* up / gain (kept green for finance clarity) */
  --neg:#cf222e;                 /* down / loss */
  --violet:#7b2cf5;              /* secondary accent (multi-theme) */
  --warn:#bf8700;
  --sans:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --r:0px;                       /* sharp corners, Invesco-style */
  --r-sm:2px;                    /* tiny number badges stay legible */
}

* { box-sizing: border-box; }
body { margin:0; height:100vh; font-family:var(--sans); color:var(--ink);
       font-size:14px; -webkit-font-smoothing:antialiased; }
#chart { flex:1; }
h1 { font-family:var(--serif); font-weight:400; font-size:19px; color:var(--inv-navy); margin:0 0 2px; letter-spacing:.005em; }
.navlink { font-size:12px; color:var(--inv-blue); text-decoration:none; font-weight:500; }
.navlink:hover { text-decoration:underline; }
.sub { color:var(--ink-2); font-size:12px; }
.row { display:flex; gap:6px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }

input[type=text] { border:1px solid var(--line); padding:6px 8px; border-radius:var(--r);
                   width:84px; text-transform:uppercase; font-family:var(--sans); font-size:13px; }
input[type=text]:focus { outline:none; border-color:var(--inv-blue); box-shadow:0 0 0 2px rgba(0,10,210,.15); }

button { border:1px solid var(--line); background:var(--surface); padding:6px 11px; border-radius:var(--r);
         cursor:pointer; font-family:var(--sans); font-size:13px; color:var(--ink); transition:background .12s,border-color .12s; }
button:hover { background:var(--surface-2); border-color:#c4c4c4; }
button.primary { background:var(--inv-blue); border-color:var(--inv-blue); color:#fff; font-weight:500; }
button.primary:hover { background:var(--inv-blue-deep); border-color:var(--inv-blue-deep); }
button.danger { background:var(--neg); border-color:#b91c25; color:#fff; font-weight:500; }
button.danger:hover { background:#b91c25; }
button.active { outline:2px solid var(--inv-blue); outline-offset:-1px; }

hr { border:none; border-top:1px solid var(--line); margin:12px 0; }
kbd { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:0 4px; font-size:11px; font-family:ui-monospace,Consolas,monospace; }
.seclabel { font-size:11px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; margin:4px 0; }
.chip { font-size:11px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:1px 7px; color:var(--ink-2); }

/* Segmented control (timeframe / scale) */
.seg { display:inline-flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.seg button { border:none; border-radius:0; padding:5px 12px; background:var(--surface); }
.seg button + button { border-left:1px solid var(--line); }
.seg button.active { background:var(--inv-blue); color:#fff; }
.seg button:hover:not(.active) { background:var(--surface-2); }

/* ---------- BUILDER: chart left, panel right ---------- */
body.builder { display:flex; }
body.builder #chart { height:100vh; }
body.builder #panel { width:340px; background:var(--surface-2); border-left:1px solid var(--line); padding:16px; overflow-y:auto; }
.hdrrow { display:flex; align-items:baseline; justify-content:space-between; }
.card { border:1px solid var(--line); border-radius:var(--r); padding:12px; margin:8px 0; background:var(--surface); }
.card .hd { display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; }
.swatch { width:14px; height:14px; border-radius:var(--r-sm); flex:none; }
.feat { color:var(--ink-2); font-size:12px; margin-top:6px; line-height:1.6; }
.hint { color:var(--ink-2); font-size:11px; margin-top:6px; line-height:1.5; }
#queue { font-size:12px; color:var(--ink-2); margin-bottom:8px; }
#status { font-size:12px; color:var(--ink-2); min-height:18px; }

/* ---------- LEFT SIDEBAR (shared nav across Home / Private / Themes) ---------- */
.sidenav { width:150px; flex:none; background:var(--surface-2); border-right:1px solid var(--line);
           display:flex; flex-direction:column; }
.sidenav .brand { font-family:var(--serif); font-weight:400; font-size:18px; color:var(--inv-navy);
                  padding:16px 16px 13px; border-bottom:1px solid var(--line); }
.sidenav .navitem { padding:9px 16px; color:var(--ink-2); text-decoration:none; font-size:13px;
                    border-left:3px solid transparent; }
.sidenav .navitem:hover { background:var(--surface-3); color:var(--ink); }
.sidenav .navitem.active { color:var(--inv-blue); font-weight:600; background:var(--surface);
                           border-left-color:var(--inv-blue); }
.sidenav .navfoot { margin-top:auto; padding:10px 16px; font-size:11px; color:var(--ink-4);
                    border-top:1px solid var(--line); text-transform:uppercase; letter-spacing:.06em; }
/* the page body to the right of the sidebar: stacks toolbar over content */
.page { flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; }

/* ---------- SCREENER: top toolbar (Invesco blue band), chart + scanner below ---------- */
body.screener { display:flex; flex-direction:row; }
/* Preact mounts the whole screener into #app; display:contents lets #topbar and
   #main remain flex children of .page so the existing layout holds. */
body.screener #app { display:contents; }

/* The toolbar is the brand "hero band": electric Invesco blue, white controls. */
#topbar { display:flex; align-items:center; gap:10px; padding:9px 16px;
          background:var(--inv-blue); color:#fff; font-size:13px; flex:none; }
#topbar .brand { font-family:var(--serif); font-weight:400; font-size:19px; color:#fff; letter-spacing:.01em; }
#topbar .spacer { flex:1; }
#topbar #hdr { color:rgba(255,255,255,.82); font-size:12px; white-space:nowrap; }
#topbar #status { color:rgba(255,255,255,.62); font-size:11px; min-height:0; }
#topbar .navlink { color:#fff; }
/* ghost-white controls so they read on the blue band */
#topbar input[type=text] { background:#fff; color:var(--ink); border-color:transparent; }
#topbar input[type=text]:focus { box-shadow:0 0 0 2px rgba(255,255,255,.55); }
#topbar button { background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
#topbar button:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.7); }
#topbar .dateSel { background:#fff; color:var(--ink); border:1px solid transparent; border-radius:var(--r);
                   padding:6px 8px; font-family:var(--sans); font-size:12px; cursor:pointer; }
#topbar .seg { border-color:rgba(255,255,255,.5); }
#topbar .seg button { background:transparent; color:#fff; }
#topbar .seg button + button { border-left-color:rgba(255,255,255,.32); }
#topbar .seg button.active { background:#fff; color:var(--inv-blue); }
#topbar .seg button:hover:not(.active) { background:rgba(255,255,255,.16); }

#main { flex:1; min-height:0; display:flex; }
/* selected-name info — lives in the panel (no chart overlap) */
#selInfo { padding:10px 12px; border-bottom:1px solid var(--line); background:var(--surface-2); font-size:12px; }
#selInfo .ss1 { font-weight:600; color:var(--inv-navy); }
#selInfo .ss2 { margin-top:3px; }
#selInfo .muted { color:var(--ink-4); font-weight:400; }
#selInfo .pos { color:var(--pos); font-weight:600; }
#selInfo .neg { color:var(--neg); font-weight:600; }
#selInfo .etflink { color:var(--inv-blue); font-weight:600; cursor:pointer; }
#selInfo .etflink:hover { text-decoration:underline; }

/* panel mode toggle (Scanner | Themes) */
#panelMode { margin-right:auto; }
.pm { font-size:11px; font-weight:600; padding:4px 10px; border:1px solid var(--line);
      background:var(--surface); color:var(--ink-2); cursor:pointer; }
.pm:first-child { border-radius:var(--r) 0 0 var(--r); }
.pm:last-child { border-radius:0 var(--r) var(--r) 0; border-left:0; }
.pm.active { background:var(--inv-blue); color:#fff; border-color:var(--inv-blue); }

/* selected theme's "portfolio" (member stocks) — click a name to drill in */
#portfolio { border-bottom:1px solid var(--line); background:var(--surface-2); flex:none;
             max-height:46%; overflow-y:auto; }
.pfhead { display:flex; align-items:center; gap:8px; font-size:12px; padding:9px 12px 6px;
          position:sticky; top:0; background:var(--surface-2); }
.pfhead .pftitle { font-weight:600; color:var(--inv-navy); }
.pfhead .pfn { color:var(--ink-4); }
.pfhead .etflink { color:var(--inv-blue); cursor:pointer; margin-left:auto; font-weight:500; }
.pfhead .etflink:hover { text-decoration:underline; }
/* member holdings, each with its own channel position (the setup read) */
.mlist { display:flex; flex-direction:column; }
.mrow { display:flex; align-items:center; gap:9px; padding:5px 12px; cursor:pointer; font-size:12px;
        border-top:1px solid #eef0f3; }
.mrow:hover { background:var(--surface-3); }
.mrow.on { background:rgba(0,10,210,.06); }
.mrow.setup { box-shadow:inset 3px 0 0 var(--pos); }      /* member at its lower rail */
.mrow .mtkr { width:62px; flex:none; font-weight:600; color:var(--inv-blue); }
.mrow .mpos { width:46px; text-align:right; font-weight:600; }
.mrow .mpos.pos { color:var(--pos); } .mrow .mpos.neg { color:var(--neg); } .mrow .mpos.muted { color:var(--ink-4); }
.mrow .mlast { width:60px; text-align:right; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.mtrk { position:relative; flex:1; height:4px; border-radius:2px;
        background:linear-gradient(90deg, rgba(26,127,55,.30), rgba(207,34,46,.30)); }
.mtrk.none { background:repeating-linear-gradient(90deg,var(--line),var(--line) 2px,transparent 2px,transparent 5px); opacity:.6; }
.mtrk i { position:absolute; top:-3px; width:3px; height:10px; border-radius:1px; background:var(--inv-navy); transform:translateX(-1px); }

/* selected theme's setup track record (win rates + past setups, click → as-of) */
#setuprec { border-bottom:1px solid var(--line); background:var(--surface-2); padding:8px 12px; flex:none; }
.srhead { font-size:11px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em;
          display:flex; justify-content:space-between; }
.srhead .srn { font-weight:400; color:var(--ink-4); letter-spacing:0; text-transform:none; }
.srwins { display:flex; gap:10px; margin:6px 0; font-size:11px; color:var(--ink-2); }
.srwins .srwin b { color:var(--ink); }
.srlist { display:flex; flex-wrap:wrap; gap:4px; }
.srchip { font-size:10px; border:1px solid var(--line); border-radius:var(--r-sm); padding:1px 5px; cursor:pointer; color:var(--ink-2); }
.srchip:hover { background:var(--surface-3); }
.srchip.pos { border-color:rgba(26,127,55,.4); color:var(--pos); } .srchip.neg { border-color:rgba(207,34,46,.4); color:var(--neg); }
.srnone { font-size:11px; color:var(--ink-4); }

/* themes leaderboard */
#themesBoard { overflow-y:auto; flex:1; }
.tbhead, .trow { display:flex; align-items:center; gap:6px; padding:6px 12px; font-size:12px; }
.tbhead { position:sticky; top:0; background:var(--surface-3); border-bottom:1px solid var(--line);
          color:var(--ink-3); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.tbhead span { cursor:pointer; user-select:none; }
.tbhead span.act { color:var(--inv-blue); }
.trow { border-bottom:1px solid #eef0f3; cursor:pointer; }
.trow:hover { background:rgba(0,10,210,.04); }
.trow.selrow { background:rgba(0,10,210,.07); box-shadow:inset 3px 0 0 var(--inv-blue); }
.trow .tname { flex:1; min-width:0; font-weight:600; color:var(--inv-navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trow .spark, .tbhead .spark { width:40px; flex:none; margin-right:8px; overflow:hidden; white-space:nowrap;
                               font-family:ui-monospace,Consolas,monospace; color:var(--ink-2); font-size:13px; line-height:1; }
.trow .tex { width:50px; text-align:right; font-weight:700; }
.trow .tex12 { width:50px; text-align:right; color:var(--ink-4); }
.trow .tex12.pos { color:var(--pos); } .trow .tex12.neg { color:var(--neg); }
.trow .twin { width:40px; text-align:right; color:var(--ink-2); }
.trow .tn { width:48px; text-align:right; color:var(--ink-4); }
.trow .tex.pos { color:var(--pos); } .trow .tex.neg { color:var(--neg); }
.trow.thin { opacity:.55; }
.trow .chpos { width:54px; text-align:right; font-weight:700; font-size:11px; }
.trow .chpos.pos { color:var(--pos); } .trow .chpos.neg { color:var(--neg); } .trow .chpos.muted { color:var(--ink-4); font-weight:400; }
.trow.setup { box-shadow:inset 3px 0 0 var(--pos); }     /* theme near its lower rail */
/* theme history: date section headers */
.datehdr { position:sticky; top:0; background:var(--surface-3); border-bottom:1px solid var(--line);
           padding:5px 12px; font-size:11px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
/* active theme filter chip */
.filterchip { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
              background:rgba(0,10,210,.08); color:var(--inv-blue); border-radius:var(--r-sm); padding:2px 5px 2px 9px; }
.filterchip b { cursor:pointer; font-size:13px; line-height:1; }
body.screener #chart { height:100%; }
body.screener #panel { width:510px; background:var(--surface); border-left:1px solid var(--line);
                       display:flex; flex-direction:column; min-height:0; }
#panelHead { display:flex; justify-content:space-between; align-items:center;
             padding:9px 12px; font-size:12px; color:var(--ink-2); border-bottom:1px solid var(--line); flex:none; }
#setups { overflow-y:auto; flex:1; }

/* sortable scanner table */
table.scan { width:100%; border-collapse:collapse; font-size:12px; }
table.scan thead th { position:sticky; top:0; z-index:1; background:var(--surface-3); color:var(--ink-3);
  font-size:10px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; padding:6px 6px;
  cursor:pointer; user-select:none; white-space:nowrap; border-bottom:1px solid var(--line); }
table.scan thead th.r { text-align:right; } table.scan thead th.l { text-align:left; }
table.scan thead th:hover { color:var(--ink); }
table.scan thead th.act { color:var(--inv-blue); }
table.scan tbody tr { border-bottom:1px solid #eef0f3; cursor:pointer; }
table.scan tbody tr:hover { background:var(--surface-2); }
table.scan tbody tr.sel { background:rgba(0,10,210,.07); box-shadow:inset 3px 0 0 var(--inv-blue); }
table.scan td { padding:5px 6px; white-space:nowrap; }
table.scan td.ema .emab { font-size:10px; font-weight:600; color:var(--pos);
  background:rgba(26,127,55,.10); border-radius:var(--r-sm); padding:1px 5px; }   /* not overextended */
table.scan td.ema .emab.ext { color:var(--neg); background:rgba(207,34,46,.08); }  /* stretched above EMAs */
table.scan td.slope .slopeb { font-size:10px; font-weight:600; color:var(--inv-blue);
  background:rgba(0,10,210,.07); border-radius:var(--r-sm); padding:1px 5px; white-space:nowrap; }  /* steep uptrend channel */
table.scan td.slope .slopeb.flat { color:var(--ink-4); background:transparent; }   /* sideways / range-bound */
table.scan td.l { text-align:left; } table.scan td.r { text-align:right; font-variant-numeric:tabular-nums; }
table.scan td.tkr { font-weight:600; color:var(--inv-navy); }
table.scan td.px { color:var(--ink-2); }
table.scan td.th { color:var(--ink-3); max-width:132px; overflow:hidden; text-overflow:ellipsis;
  text-transform:capitalize; }
table.scan td.muted { color:var(--ink-4); }
table.scan td.pos { color:var(--pos); font-weight:600; } table.scan td.neg { color:var(--neg); font-weight:600; }
/* Support column: per-timeframe distance-from-support (gauge w/ a dot per channel + clickable badges) */
table.scan td.supp { white-space:nowrap; }
.scan .sgauge { position:relative; display:inline-block; width:58px; height:5px; border-radius:3px;
  vertical-align:middle; margin-right:7px; background:linear-gradient(90deg, rgba(26,127,55,.5), rgba(207,34,46,.28)); }
.scan .sgauge i { position:absolute; top:-3px; width:3px; height:11px; border-radius:1px;
  background:var(--inv-navy); transform:translateX(-1px); }
.scan .tfb { font-size:10px; color:var(--inv-blue); cursor:pointer; margin-right:5px; }
.scan .tfb.setup { color:var(--pos); font-weight:700; }
.scan .tfb:hover { text-decoration:underline; }
table.scan td .knife { color:var(--warn); margin-left:3px; cursor:help; }
/* the PerfChip / FreshBadge sit inside cells — strip their block margins */
table.scan td .perf, table.scan td .fresh { display:inline-block; }

/* scanner rows */
.setup { display:flex; gap:8px; padding:9px 12px; border-bottom:1px solid #eef0f3; cursor:pointer; }
.setup:hover { background:rgba(0,10,210,.04); }
.setup.sel { background:rgba(0,10,210,.07); box-shadow:inset 3px 0 0 var(--inv-blue); }
.stripe { width:4px; border-radius:0; flex:none; }
.rowmain { flex:1; min-width:0; }
.line1 { display:flex; align-items:baseline; gap:6px; }
.line1 .tkr { font-weight:700; font-size:14px; color:var(--inv-navy); }
.line1 .px { color:var(--ink-2); font-size:11px; }
.line1 .th { color:var(--ink-4); font-size:10px; white-space:nowrap;
             overflow:hidden; text-overflow:ellipsis; max-width:120px; }
.line1 .r1spacer { margin-left:auto; }              /* pushes chip+theme to the right */
/* theme tailwind/laggard chip — market-relative excess at the clean horizon */
.perf { font-size:10px; font-weight:700; border-radius:var(--r-sm); padding:1px 5px; white-space:nowrap; }
.perf.up { color:var(--pos); background:#dafbe1; }
.perf.down { color:var(--neg); background:#ffebe9; }
.perf.thin { opacity:.55; }                         /* small sample → faded */
.line2 { display:flex; align-items:center; gap:8px; margin-top:6px; }
/* signal-freshness badge: NEW when first identified recently */
.fresh { font-size:10px; font-weight:700; border-radius:var(--r-sm); padding:1px 5px; white-space:nowrap; flex:none; }
.fresh.new { color:var(--inv-blue); background:rgba(0,10,210,.1); }
.fresh.stale { color:var(--ink-4); background:var(--surface-3); }
.knife { font-size:11px; color:var(--warn); flex:none; cursor:help; }   /* 3-TF falling-knife caution */
.gauge { position:relative; flex:1; height:5px; border-radius:var(--r-sm);
         background:linear-gradient(90deg,rgba(26,127,55,.28),rgba(207,34,46,.22)); }
.gauge i { position:absolute; top:-3px; width:3px; height:11px; border-radius:0; background:var(--pos); }
.tfbadges { display:flex; gap:4px; }
.tfbadge { font-size:10px; font-weight:700; color:#fff; background:var(--inv-blue); border-radius:var(--r-sm); padding:1px 5px; cursor:pointer; }
.tfbadge:hover { background:var(--inv-blue-deep); }

/* filters popover */
#filterPop { position:absolute; top:50px; right:14px; width:280px; background:var(--surface);
             border:1px solid var(--line); border-radius:var(--r); box-shadow:0 8px 28px rgba(10,19,49,.18);
             padding:16px; z-index:30; }
#filterPop.hidden { display:none; }
#filterPop label { font-size:12px; color:var(--ink-2); }
#themesChips { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0; max-height:130px; overflow-y:auto; }
.range { width:100%; accent-color:var(--inv-blue); }

/* ---------- HOME: directory of leading themes + stocks (chart-less public face) ---------- */
#homewrap { flex:1; overflow-y:auto; padding:34px 28px; }
.hhead { max-width:780px; margin:0 auto 22px; }
.hhead h1 { font-family:var(--serif); font-weight:400; font-size:30px; color:var(--inv-navy); margin:0 0 5px; }
.hhead .hsubtitle { color:var(--ink-2); font-size:14px; }
.hcols { display:flex; gap:24px; max-width:900px; margin:0 auto; align-items:flex-start; }
.hhead { max-width:900px; }
.hfoot { max-width:900px; }
.hcol.hcolwide { flex:1.5; }
.lead .lpos { white-space:nowrap; }
.hcolsub { font-weight:400; font-size:11px; color:var(--ink-4); text-transform:none; letter-spacing:0; }
.lead .lext { font-size:11px; font-weight:600; color:var(--pos); white-space:nowrap; margin-left:auto; }
.lead .lslope { font-size:11px; font-weight:600; color:var(--inv-blue); white-space:nowrap; }
.hcol { flex:1; min-width:0; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.hcolhd { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3);
          padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.lead { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; border-bottom:1px solid #f0f1f3; }
.lead:last-child { border-bottom:none; }
.lead:hover { background:rgba(0,10,210,.05); }
.lead .rank { width:18px; flex:none; color:var(--ink-4); font-size:12px; font-variant-numeric:tabular-nums; }
.lead .lname { flex:1; min-width:0; font-weight:500; text-transform:capitalize; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lead .lchg { font-weight:600; font-variant-numeric:tabular-nums; }
.lead .lchg.pos { color:var(--pos); } .lead .lchg.neg { color:var(--neg); }
.lead .ltk { width:60px; flex:none; font-weight:600; color:var(--inv-blue); }
.lead .lth { flex:1; min-width:0; color:var(--ink-2); font-size:12px; text-transform:capitalize; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lead .lpos { color:var(--pos); font-size:12px; font-weight:500; flex:none; }
/* leading stock with investor-hat why/what */
.lead.leadx { display:block; }
.leadhdr { display:flex; align-items:center; gap:10px; }
.leadwhy, .leadwhat { font-size:11.5px; line-height:1.45; color:var(--ink-2); margin-top:3px; }
.leadwhat { color:var(--ink-3); }
.leadwhy b, .leadwhat b { color:var(--inv-navy); font-weight:600; font-size:10px;
                          text-transform:uppercase; letter-spacing:.04em; margin-right:5px; }
.hwait { padding:14px; font-size:12px; color:var(--ink-3); }
.hfoot { max-width:780px; margin:22px auto 0; font-size:11px; color:var(--ink-4); line-height:1.5; }

/* ---------- LOGIN (two-panel password gate, payrollhk-style) ---------- */
.loginwrap { display:flex; min-height:100vh; }
.loginleft { flex:1; background:linear-gradient(150deg, var(--inv-navy) 0%, #0a1a5c 55%, var(--inv-blue) 130%);
             color:#fff; padding:48px 44px; display:flex; flex-direction:column; justify-content:space-between; min-height:520px; }
.loginleft .lbrand { font-family:var(--serif); font-weight:400; font-size:24px; }
.loginleft .lhero { font-family:var(--serif); font-weight:400; font-size:34px; line-height:1.2; margin-bottom:10px; }
.loginleft .lherosub { font-size:14px; color:rgba(255,255,255,.7); line-height:1.6; margin-bottom:28px; max-width:380px; }
.loginleft .lfeat { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.loginleft .lfeat li { display:flex; flex-direction:column; }
.loginleft .lfeat b { font-size:14px; font-weight:600; }
.loginleft .lfeat span { font-size:12px; color:rgba(255,255,255,.5); }
.loginleft .lfootnote { font-size:11px; color:rgba(255,255,255,.4); }

.loginright { flex:1; display:flex; align-items:center; justify-content:center; padding:40px 32px; background:var(--surface); }
.lform { width:100%; max-width:360px; }
.lform .ltitle { font-family:var(--serif); font-weight:400; font-size:24px; color:var(--inv-navy); margin-bottom:4px; }
.lform .lsub { font-size:13px; color:var(--ink-2); margin-bottom:26px; }
.lform .llabel { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.lform .linput { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r);
                 font-size:14px; font-family:var(--sans); outline:none; }
.lform .linput:focus { border-color:var(--inv-blue); box-shadow:0 0 0 2px rgba(0,10,210,.15); }
.lform .lerr { margin-top:12px; padding:8px 12px; border-radius:var(--r); font-size:12px;
               color:var(--neg); background:rgba(207,34,46,.08); border:1px solid rgba(207,34,46,.3); }
.lform .lbtn { width:100%; margin-top:20px; padding:12px 16px; border:none; border-radius:var(--r);
               font-family:var(--sans); font-size:14px; font-weight:600; color:#fff; background:var(--inv-blue); cursor:pointer; }
.lform .lbtn:hover:not(:disabled) { background:var(--inv-blue-deep); }
.lform .lbtn:disabled { background:var(--ink-4); cursor:not-allowed; }
.lform .lprivacy { margin-top:18px; text-align:center; font-size:11px; color:var(--ink-4); }
@media (max-width:760px){ .loginleft { display:none; } }

/* ---------- LABEL: fast keyboard channel labeler ---------- */
#topbar .tagline { font-size:11px; color:rgba(255,255,255,.8); white-space:nowrap; }
.labelpanel { width:300px; }
.scaleBtn { font-size:11px; padding:3px 10px; border:1px solid var(--line); border-radius:var(--r);
            background:var(--surface-2); color:var(--ink-2); cursor:pointer; }
.scaleBtn:hover { background:var(--surface-3); color:var(--inv-blue); border-color:var(--inv-blue); }
.ldraw { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:9px 12px;
         border-bottom:1px solid var(--line); background:var(--surface-2); }
.ldraw.on { background:rgba(212,167,44,.10); }    /* amber tint when channels are drawn */
.ldraw .ldrawn { font-size:12px; font-weight:600; color:#9a6700; margin-right:auto; }
.lhelp { padding:12px; font-size:12px; color:var(--ink-2); display:flex; flex-direction:column; gap:6px; }
.lhelp b { color:var(--inv-navy); font-family:ui-monospace,Consolas,monospace; }
.lhelp .lnote { margin-top:6px; font-size:11px; color:var(--ink-4); line-height:1.5; }