:root{
  --bg:#0b0d12; --bg2:#141a26; --panel:rgba(255,255,255,.035); --fg:#eef2f8; --muted:#93a0b6;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.06);
  --up:#34d399; --down:#f87171; --flat:#8b96ab;
  --a1:#5eead4; --a2:#6366f1; --a3:#a855f7;
  --grad:linear-gradient(115deg,#5eead4,#6366f1 55%,#a855f7);
}
html[data-theme="light"]{
  --bg:#f6f7fb; --bg2:#ffffff; --panel:rgba(16,20,37,.025); --fg:#101425; --muted:#5b6579;
  --line:rgba(16,20,37,.12); --line2:rgba(16,20,37,.07);
  --up:#0f9d63; --down:#d64545; --flat:#6b7688;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased;
  min-height:100vh; padding:0 18px 60px; position:relative;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55vw 40vh at 12% -5%, rgba(94,234,212,.13), transparent 60%),
    radial-gradient(50vw 40vh at 88% 5%, rgba(168,85,247,.13), transparent 60%),
    linear-gradient(170deg,var(--bg),var(--bg2) 60%,var(--bg));
}
/* Use the whole monitor - a 28-column table has nothing to gain from a centred column.
   Prose-width blocks opt back in with .narrow. */
.shell{width:100%;max-width:none;margin:0}
.narrow{max-width:820px;margin-left:auto;margin-right:auto}
a{color:inherit}

/* ---------------------------------------------------------------- header */
header{padding:26px 0 14px;display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.brand{flex:1 1 auto;min-width:220px}
.brand h1{
  font-size:clamp(1.9rem,4.6vw,2.7rem);font-weight:800;letter-spacing:-.035em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .tag{margin-top:7px;font-size:.95rem;color:var(--muted);font-weight:300}
nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
nav a,.toggle{
  border:1px solid var(--line);background:var(--panel);color:var(--fg);
  padding:9px 15px;border-radius:11px;text-decoration:none;font-size:.87rem;font-weight:500;
  cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s;
}
nav a:hover,.toggle:hover{border-color:var(--a2)}
nav a.on{background:var(--grad);color:#07100f;border-color:transparent;font-weight:700}
.toggle{width:40px;padding:9px 0;text-align:center}

/* ------------------------------------------------------------ status bar */
.status{
  display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;
  border:1px solid var(--line);background:var(--panel);border-radius:14px;
  padding:12px 16px;margin-bottom:18px;font-size:.85rem;
}
.status .item{display:flex;align-items:center;gap:8px;color:var(--muted)}
.status .item b{color:var(--fg);font-weight:600}
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;
  font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line);
}
.pill.live{color:var(--up);border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.10)}
.pill.delayed{color:#fbbf24;border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.10)}
.pill.closed{color:var(--flat)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.live .dot{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* --------------------------------------------------------------- filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filters label{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:7px}
select,input[type=search]{
  border:1px solid var(--line);background:var(--panel);color:var(--fg);
  padding:9px 13px;border-radius:11px;font-family:inherit;font-size:.87rem;outline:none;
}
select:focus,input:focus{border-color:var(--a2)}
input[type=search]{min-width:190px}

/* ----------------------------------------------------------------- table */
/* The table scrolls horizontally on its own, and vertically within the viewport so the
   sticky header stays put on long lists. */
.tablewrap{
  border:1px solid var(--line);border-radius:16px;background:var(--panel);
  overflow:auto;max-height:calc(100vh - 260px);
  scrollbar-color:var(--a2) transparent;
}
.tablewrap::-webkit-scrollbar{height:12px;width:12px}
.tablewrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.tablewrap::-webkit-scrollbar-thumb:hover{background:var(--a2)}
table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:max-content}
tbody td,thead th{padding-left:11px;padding-right:11px}
thead th{
  text-align:right;padding:13px 14px;font-weight:600;font-size:.76rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);
  white-space:nowrap;cursor:pointer;user-select:none;position:sticky;top:0;
  background:var(--bg2);
}
thead th:first-child,thead th:nth-child(2){text-align:left}
thead th:hover{color:var(--fg)}
thead th .arrow{opacity:.45;font-size:.7rem;margin-left:3px}
tbody td{padding:12px 14px;text-align:right;border-bottom:1px solid var(--line2);white-space:nowrap}
tbody td:first-child,tbody td:nth-child(2){text-align:left}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(99,102,241,.06)}
.sym{font-weight:700;letter-spacing:-.01em}
.sym a{text-decoration:none}
.sym a:hover{text-decoration:underline}
/* Width is a variable so the header grip can drag it. 230px was wider than most names
   need and pushed every other column off-screen. */
.co{color:var(--muted);font-weight:300;max-width:var(--cow,140px);overflow:hidden;
  text-overflow:ellipsis;display:block}
.up{color:var(--up);font-weight:600}
.down{color:var(--down);font-weight:600}
.flat{color:var(--flat)}
.na{color:var(--flat);opacity:.55}
.score{display:inline-flex;gap:3px;align-items:center}
.score i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}
.score i.on{background:var(--up)}
.score .n{margin-left:7px;font-size:.78rem;color:var(--muted);font-weight:600}
svg.spark{display:block}

/* ------------------------------------------------- provider comparison */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:18px}
.card{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--panel);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px}
.card.td::before{background:linear-gradient(180deg,#5eead4,#6366f1)}
.card.yh::before{background:linear-gradient(180deg,#a855f7,#f472b6)}
.card h4{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:12px}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:.85rem}
.card dt{color:var(--muted);font-weight:300}
.card dd{text-align:right;font-weight:600}

/* grouped table headers */
thead th.grp{text-align:center;font-size:.72rem;letter-spacing:.1em;border-bottom:1px solid var(--line2);cursor:default}
thead th.grp-td{color:var(--a1)}
thead th.grp-y{color:var(--a3)}
thead th.grp-d{color:var(--muted)}
thead th.grp-none{cursor:default}
thead tr:first-child th{position:static}
td.sep,th.sep{border-left:1px solid var(--line)}
.legend{margin-top:14px;font-size:.83rem;color:var(--muted);font-weight:300;line-height:1.7;max-width:760px}
.stale{color:#fbbf24;font-weight:600}
/* --------------------------------------------- wide-monitor readability */
/* Zebra striping plus a stronger band every fifth row, so the eye can track a single
   company across a very wide table without losing its place. */
tbody tr:nth-child(even){background:rgba(127,144,178,.045)}
tbody tr:nth-child(5n){box-shadow:inset 0 -1px 0 var(--line)}
tbody tr:hover{background:rgba(99,102,241,.13)!important}

/* Symbol and company stay pinned while the timeframe columns scroll under them */
thead th:nth-child(1),tbody td:nth-child(1){position:sticky;left:0;z-index:3}
thead th:nth-child(2),tbody td:nth-child(2){position:sticky;left:var(--col1w,96px);z-index:3}
thead th:nth-child(1),thead th:nth-child(2){z-index:5}
tbody td:nth-child(1),tbody td:nth-child(2){background:var(--bg2)}
tbody tr:nth-child(even) td:nth-child(1),
tbody tr:nth-child(even) td:nth-child(2){background:var(--bg)}
tbody td:nth-child(2){box-shadow:1px 0 0 var(--line)}

/* Each timeframe family gets its own faint tint so column groups are distinguishable */
th.tf.intraday,td.tf.intraday{background-image:linear-gradient(rgba(94,234,212,.05),rgba(94,234,212,.05))}
th.tf.daily,td.tf.daily{background-image:linear-gradient(rgba(99,102,241,.06),rgba(99,102,241,.06))}
th.tf.long,td.tf.long{background-image:linear-gradient(rgba(168,85,247,.06),rgba(168,85,247,.06))}
th.tf.decide,td.tf.decide{background-image:linear-gradient(rgba(251,191,36,.06),rgba(251,191,36,.06))}
th.tf.yesterday,td.tf.yesterday{background-image:linear-gradient(rgba(148,163,184,.07),rgba(148,163,184,.07))}

/* 52-week range position, drawn as a small filled bar */
.rng{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.rngbar{width:42px;height:5px;border-radius:3px;background:var(--line);overflow:hidden;display:block}
.rngbar i{display:block;height:100%;background:var(--grad)}

.climb{
  display:inline-block;margin-left:5px;padding:1px 6px;border-radius:6px;
  font-size:.7rem;font-weight:700;letter-spacing:.03em;
  color:#07100f;background:linear-gradient(115deg,#5eead4,#34d399);
}

/* ------------------------------------------------------ news + sentiment */
.temp{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line);text-decoration:none;white-space:nowrap;
}
.temp b{font-weight:800}
.t-positive{color:#34d399;border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.12)}
.t-lean-positive{color:#86efac;border-color:rgba(134,239,172,.35);background:rgba(134,239,172,.08)}
.t-neutral{color:var(--muted)}
.t-lean-negative{color:#fca5a5;border-color:rgba(252,165,165,.35);background:rgba(252,165,165,.08)}
.t-negative{color:#f87171;border-color:rgba(248,113,113,.45);background:rgba(248,113,113,.12)}

.newsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.card.news{
  border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--panel);
  display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden;
}
.card.news::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--line)}
.card.news.t-positive::before{background:linear-gradient(180deg,#5eead4,#34d399)}
.card.news.t-negative::before{background:linear-gradient(180deg,#f87171,#e8544d)}
.card.news.t-lean-positive::before{background:rgba(134,239,172,.6)}
.card.news.t-lean-negative::before{background:rgba(252,165,165,.6)}
.newshead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.75rem;color:var(--muted)}
.newshead .src{font-weight:600;color:var(--fg)}
.headline{font-size:.98rem;font-weight:600;line-height:1.45;text-decoration:none;color:var(--fg)}
.headline:hover{text-decoration:underline;text-decoration-color:var(--a2)}
.sum{font-size:.85rem;font-weight:300;color:var(--muted);line-height:1.6}
.newsfoot{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:2px}
.chip{
  display:inline-block;padding:3px 9px;border-radius:8px;font-size:.75rem;font-weight:700;
  background:rgba(99,102,241,.16);color:var(--fg);text-decoration:none;
}
.chip:hover{background:rgba(99,102,241,.3)}
.why{font-size:.7rem;color:var(--muted);opacity:.65;font-weight:300}

/* -------------------------------------------------------- paper trading */
th.tf.paper,td.tf.paper{background-image:linear-gradient(rgba(52,211,153,.07),rgba(52,211,153,.07))}
.authchip{display:inline-flex;gap:8px;align-items:center}
.authchip a{
  border:1px solid var(--line);background:var(--panel);color:var(--fg);
  padding:9px 14px;border-radius:11px;text-decoration:none;font-size:.85rem;font-weight:500;
}
.authchip a:hover{border-color:var(--a2)}
input.pin{
  width:92px;padding:7px 9px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg2);color:var(--fg);font-family:inherit;font-size:.84rem;
  outline:none;text-align:right;
}
input.pin:focus{border-color:var(--up);box-shadow:0 0 0 3px rgba(52,211,153,.16)}
input.pin::-webkit-outer-spin-button,input.pin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.pin{-moz-appearance:textfield}
.ingroup{display:flex;gap:5px;align-items:center;justify-content:flex-end}
button.pbuy{
  padding:7px 12px;border:0;border-radius:9px;cursor:pointer;font-family:inherit;
  font-size:.78rem;font-weight:700;color:#07100f;background:linear-gradient(115deg,#5eead4,#34d399);
}
button.pbuy:hover{filter:brightness(1.08)}
.held{margin-top:4px;font-size:.72rem;color:var(--muted);font-weight:400;text-align:right}
.held a{color:var(--a1);text-decoration:none}
.held a:hover{text-decoration:underline}

tr.paperrow td{background:rgba(52,211,153,.05);padding:0;border-bottom:1px solid var(--line)}
.paperwrap{padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.papertitle{font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.papertitle .chip{text-transform:none;letter-spacing:0;margin-left:8px;font-weight:600}
.pos{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg2)}
.poshead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.88rem}
.poshead b{font-weight:700}
.posmeta{margin-top:5px;font-size:.76rem;color:var(--muted);font-weight:300}
.badge{
  display:inline-block;padding:2px 9px;border-radius:7px;font-size:.7rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.badge.live{background:rgba(94,234,212,.16);color:var(--a1)}
.badge.done{background:rgba(148,163,184,.16);color:var(--muted)}
button.pclose{
  margin-left:auto;width:24px;height:24px;border-radius:7px;cursor:pointer;line-height:1;
  border:1px solid var(--line);background:transparent;color:var(--muted);font-size:1rem;
}
button.pclose:hover{color:var(--down);border-color:rgba(248,113,113,.4)}
.cks{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.ck{
  display:flex;flex-direction:column;gap:2px;min-width:86px;padding:8px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);
}
.ck b{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ck i{font-style:normal;font-size:.86rem;font-weight:700}
.ck u{text-decoration:none;font-size:.72rem;color:var(--muted);font-weight:300}
.ck.win{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.08)}
.ck.loss{border-color:rgba(248,113,113,.32);background:rgba(248,113,113,.07)}
.ck.pending{opacity:.5}
.ck.pending i{color:var(--muted);font-weight:400;font-size:.78rem}

/* modal */
.modal{
  position:fixed;inset:0;z-index:60;background:rgba(3,6,12,.72);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);
}
.modalbox{
  width:100%;max-width:420px;border:1px solid var(--line);border-radius:18px;
  background:var(--bg2);padding:26px 26px 22px;position:relative;
}
.modalbox h3{font-size:1.15rem;font-weight:700;margin-bottom:8px}
.modalbox .mut{font-size:.85rem;line-height:1.6;margin-bottom:18px}
.modalx{
  position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:8px;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  font-size:1.1rem;line-height:1;cursor:pointer;
}
.modalx:hover{color:var(--fg)}

/* ------------------------------------------------------------- ai picks */
.metrics{display:flex;gap:12px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);font-weight:500}
.metrics span{white-space:nowrap}
.risk{font-size:.82rem;color:var(--muted);font-weight:300;line-height:1.6}
.risk b{color:#fbbf24;font-weight:600}
.reactbox{
  font-size:.8rem;line-height:1.65;color:var(--muted);font-weight:300;
  border-left:2px solid var(--line);padding:8px 0 8px 11px;
}
.reactbox b{color:var(--fg);font-weight:600}
.disclaimer{
  margin-top:26px;border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  background:var(--panel);
}
.disclaimer h4{font-size:.95rem;font-weight:700;margin-bottom:10px}
.disclaimer p{font-size:.87rem;color:var(--muted);font-weight:300;line-height:1.7;margin-bottom:10px}
.disclaimer p:last-child{margin-bottom:0}
.disclaimer b{color:var(--fg);font-weight:600}

/* ----------------------------------------------------------------- admin */
.adminGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px;margin-top:4px}
.adminGrid .card{padding:22px 24px}
.fld{display:block;margin-bottom:16px}
.fld > span{display:block;font-size:.85rem;font-weight:500;margin-bottom:7px;color:var(--fg)}
.fld input[type=text],.fld input[type=password],.fld input[type=email],.fld input[type=number],.fld select{
  width:100%;padding:11px 14px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg2);color:var(--fg);font-family:inherit;font-size:.92rem;outline:none;
}
.fld input:focus,.fld select:focus{border-color:var(--a2);box-shadow:0 0 0 3px rgba(99,102,241,.16)}
.fld small{display:block;margin-top:6px;font-size:.78rem;color:var(--muted);font-weight:300;line-height:1.55}
.fld.row{display:flex;align-items:center;gap:10px}
.fld.row > span{margin:0;font-weight:400;font-size:.88rem}
.fld.row input[type=checkbox]{width:17px;height:17px;accent-color:#6366f1;cursor:pointer}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.btnrow button{
  padding:11px 20px;border-radius:11px;cursor:pointer;font-family:inherit;font-size:.88rem;
  font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--fg);
}
.btnrow button:hover{border-color:var(--a2)}
.btnrow button.primary{background:var(--grad);color:#07100f;border-color:transparent;font-weight:700}
.btnrow button.danger{color:var(--down);border-color:rgba(248,113,113,.4)}
table.mini{width:100%;border-collapse:collapse;font-size:.85rem;min-width:0}
table.mini td{padding:7px 0;border-bottom:1px solid var(--line2);text-align:left;white-space:nowrap}
.mut{color:var(--muted);font-weight:300;font-size:.87rem}
.userform{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.userform input{
  flex:1 1 170px;min-width:0;padding:10px 13px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg2);color:var(--fg);font-family:inherit;font-size:.88rem;outline:none;
}
.userform input:focus{border-color:var(--a2)}
.userform button{
  padding:10px 20px;border:0;border-radius:10px;cursor:pointer;font-family:inherit;
  font-size:.88rem;font-weight:700;color:#07100f;background:var(--grad);
}
table.mini.users{display:block;overflow-x:auto;white-space:nowrap}
table.mini.users th{
  text-align:left;padding:7px 12px 7px 0;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);
}
table.mini.users td{padding:9px 12px 9px 0}
table.mini.users tr.off{opacity:.5}
.uacts{display:flex;gap:6px}
.uacts button{
  padding:5px 11px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:.76rem;
  font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--fg);
}
.uacts button:hover{border-color:var(--a2)}
.uacts button.danger{color:var(--down);border-color:rgba(248,113,113,.35)}
.symgroup{margin-bottom:22px}
.symhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.symhead h3{font-size:1.1rem;font-weight:700}
.symtot{font-size:.83rem;color:var(--muted);font-weight:300}
.symgroup .pos{margin-bottom:10px}

/* ---------------------------------------------------------------- states */
.note{padding:34px 20px;text-align:center;color:var(--muted);font-size:.92rem;font-weight:300}
.note b{color:var(--fg);font-weight:600}
.err{
  border:1px solid rgba(248,113,113,.35);background:rgba(248,113,113,.08);color:#fca5a5;
  padding:12px 16px;border-radius:12px;font-size:.85rem;margin-bottom:16px;
}
.setup{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:26px}
.setup h3{font-size:1.15rem;margin-bottom:12px}
.setup ol{margin:14px 0 0 20px;color:var(--muted);font-weight:300;line-height:1.9;font-size:.9rem}
.setup code{
  background:rgba(99,102,241,.14);padding:2px 7px;border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;color:var(--fg);
}

/* -------------------------------------------------------------- premium */
.premium{
  margin-top:34px;border:1px solid var(--line);border-radius:18px;padding:28px 24px;
  background:var(--panel);text-align:center;max-width:820px;margin-left:auto;margin-right:auto;
}
.premium h3{font-size:clamp(1.1rem,3vw,1.4rem);font-weight:700;margin-bottom:8px}
.premium p{color:var(--muted);font-weight:300;font-size:.93rem;max-width:520px;margin:0 auto;line-height:1.65}
.premium form{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.premium input[type=email]{
  flex:1 1 280px;max-width:360px;padding:14px 17px;border-radius:13px;
  border:1px solid var(--line);background:var(--bg2);color:var(--fg);
  font-family:inherit;font-size:.97rem;outline:none;
}
.premium input[type=email]:focus{border-color:var(--a2);box-shadow:0 0 0 4px rgba(99,102,241,.16)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.premium button{
  padding:14px 26px;border:0;border-radius:13px;cursor:pointer;font-family:inherit;
  font-size:.97rem;font-weight:700;color:#07100f;background:var(--grad);
}
.premium button:hover:not(:disabled){filter:brightness(1.08)}
.premium button:disabled{opacity:.6;cursor:default}
.msg{margin-top:14px;font-size:.88rem;min-height:1.2em;font-weight:500}
.msg.ok{color:var(--up)} .msg.err2{color:var(--down)}

footer{margin-top:36px;text-align:center;font-size:.78rem;color:var(--muted);font-weight:300;line-height:1.8}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.setup p{color:var(--muted);font-weight:300;line-height:1.75;font-size:.95rem;margin-bottom:12px}
.setup p b{color:var(--fg);font-weight:600}
.setup .btn{display:inline-block;margin-top:6px;padding:12px 22px;border-radius:12px;background:var(--grad);color:#07100f;font-weight:700;text-decoration:none;font-size:.92rem}

/* ------------------------------------------------- recommendation meter */
.meterhead{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.mhinfo{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:7px}
svg.gauge{flex:0 0 auto}
.comps{display:flex;flex-direction:column;gap:12px;margin-top:12px;
  border-top:1px solid var(--line);padding-top:14px}
.comp{display:flex;flex-direction:column;gap:5px}
.comphead{display:flex;align-items:center;gap:9px;font-size:.85rem}
.comphead b{font-weight:600}
.comphead .w{font-size:.72rem;color:var(--muted);font-weight:300}
.comphead .cs{margin-left:auto;font-weight:700;font-size:.9rem}
.cbar{display:block;height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.cbar i{display:block;height:100%;border-radius:4px}
.cdet{font-size:.79rem;color:var(--muted);font-weight:300;line-height:1.55}
.caveats{
  font-size:.8rem;line-height:1.6;color:var(--muted);font-weight:300;
  border-left:2px solid rgba(251,191,36,.5);padding:7px 0 7px 11px;
}
.caveats b{color:#fbbf24;font-weight:600}
.caveats ul{margin:4px 0 0 16px}
.caveats li{margin-bottom:2px}

/* --------------------------------------- inline position-value row */
tr.valuerow td{
  background:rgba(52,211,153,.07);border-bottom:1px solid var(--line);
  padding-top:7px;padding-bottom:8px;
}
tr.valuerow .vlabel{text-align:left;font-size:.78rem;color:var(--muted);font-weight:300}
tr.valuerow .vlabel b{color:var(--a1);font-weight:700}
td.vcell{text-align:right;line-height:1.3}
td.vcell .vval{display:block;font-size:.83rem;font-weight:600}
td.vcell .vdelta{display:block;font-size:.72rem;font-weight:600;opacity:.9}

/* ------------------------------------------------------- report section */
.reportpane{
  border:1px solid var(--line);border-radius:16px;background:var(--panel);
  padding:20px 22px;margin-bottom:22px;
}
.reportpane h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.reportpane h4{
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin:18px 0 8px;
}
.reportpane h4:first-of-type{margin-top:10px}
.reportpane table{min-width:0}

/* material-event list inside a meter component */
.evlist{margin:6px 0 0 16px;font-size:.78rem;color:var(--muted);font-weight:300;line-height:1.6}
.evlist li{margin-bottom:3px}
.evlist a{color:var(--fg);text-decoration:none}
.evlist a:hover{text-decoration:underline}


/* ---------------------------------------------------- trend graphs by the company name */
.trendcell{white-space:nowrap}
.trends{display:inline-flex;gap:6px;align-items:center}
.tg{display:inline-flex;flex-direction:column;align-items:center;gap:1px}
.tglab{font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);line-height:1}
.tgna{display:inline-block;width:var(--tgw,44px);text-align:center;color:var(--muted);
  font-size:11px;line-height:20px}

/* ---------------------------------------------------- column move arrows */
thead th{position:relative}
/* Drag handle on the right edge of a resizable header. Only columns whose content can
   actually reflow carry one - the numeric columns are nowrap and cannot shrink. */
/* keep the grip clear of the move arrows so both stay clickable */
thead th.resizable{padding-right:20px}
.rz{position:absolute;top:0;right:0;width:9px;height:100%;cursor:col-resize;
  opacity:.35;transition:opacity .12s;z-index:4}
.rz::after{content:"";position:absolute;top:22%;bottom:22%;right:3px;width:2px;
  background:var(--a2);border-radius:2px}
thead th:hover .rz,.rz.dragging{opacity:.9}
body.resizing{cursor:col-resize;user-select:none}
body.resizing *{cursor:col-resize!important}
@media (hover:none){.rz{opacity:.5}}
/* faintly visible at rest - fully hidden controls are controls nobody finds */
.mv{display:inline-flex;gap:1px;margin-left:5px;vertical-align:middle;opacity:.3;transition:opacity .12s}
thead th:hover .mv,thead th:focus-within .mv{opacity:1}
thead th:hover .rz{opacity:1}
.mv i{font-style:normal;font-size:9px;line-height:1;padding:2px 3px;border-radius:3px;cursor:pointer;
  color:var(--muted);background:var(--chip,rgba(127,127,127,.14));user-select:none}
.mv i:hover{color:var(--fg);background:var(--chip-hover,rgba(127,127,127,.3))}
.mv i.off{opacity:.25;pointer-events:none}
/* the arrows are the one part of the header that must stay reachable without hover */
@media (hover:none){.mv{opacity:1}}

/* ---------------------------------------------------- narrow screens
   The board is a 36-column table; on a phone the two sticky columns alone consumed almost
   the whole viewport, leaving the Shares/Invest/Buy controls unreachable. Below 720px the
   second column unpins and the company name is allowed to wrap. */
@media (max-width:720px){
  thead th:nth-child(2),tbody td:nth-child(2){position:static!important;left:auto!important}
  .co{max-width:min(var(--cow,140px),130px)}
  .trends{gap:4px}
  .toolbar{gap:8px}
  .wrap,.page{padding-left:10px;padding-right:10px}
}

/* =====================================================================
   Density pass. The board is an information display first - the goal is
   to fit as many rows and columns on screen as possible without the
   numbers becoming hard to read. Padding and label sizes come down;
   the figures themselves stay legible.
   ===================================================================== */
table{font-size:.8rem}
thead th{padding:7px 8px;font-size:.66rem;letter-spacing:.045em}
tbody td,thead th{padding-left:8px;padding-right:8px}
tbody td{padding-top:6px;padding-bottom:6px}
.filters{gap:8px;margin-bottom:11px}
.filters label{font-size:.74rem;gap:5px}
.filters select,.filters input{font-size:.78rem;padding:5px 7px}
#notional{width:78px}
#search{min-width:150px}
.reset-cols{font-size:.72rem}
.sym{letter-spacing:-.02em}
.score i{width:6px;height:6px}
.score{gap:2px}
.score .n{font-size:.72rem}

/* the cash a notional stake would have made, under its percentage */
.cash{display:block;font-size:.68rem;line-height:1.25;opacity:.72;font-weight:500;
  font-variant-numeric:tabular-nums}
.cash.flat{opacity:.4}

/* buttons and chips shrink with everything else */
button.pbuy{padding:4px 8px;font-size:.72rem}
button.pclose{padding:3px 7px;font-size:.7rem}
.held{font-size:.66rem}
.btnrow button{padding:7px 12px;font-size:.8rem}
.pill{font-size:.7rem;padding:3px 8px}
.status .item{font-size:.74rem}

/* the value row's figures follow the same scale */
.vval{font-size:.74rem}
.vdelta{font-size:.68rem}
.vlabel{font-size:.74rem}

/* the 2-12h cash legend - two numbers in one cell need saying out loud */
.legend{font-size:.72rem;color:var(--muted);line-height:1.5;margin:-4px 0 11px;max-width:1100px}
.legend b{color:var(--fg);font-weight:600}

/* =====================================================================
   Logomark: three rising bars - small, medium, big - one for each "up"
   in the name, with the trend climbing across their tops and breaking
   out top right. Inline SVG so the bars can take the theme's own accent
   colour; a single mark then works in light and dark.
   ===================================================================== */
.logomark{
  width:clamp(34px,4.4vw,46px);height:auto;flex:0 0 auto;
  margin-top:2px;overflow:visible;
}
.logomark rect{fill:var(--a2)}
.logomark .b1{opacity:.42}
.logomark .b2{opacity:.68}
.logomark .b3{opacity:1}
.logomark .tl{
  fill:none;stroke:var(--up);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;
}

/* the bars grow in on load, shortest first - the name read as an animation */
/* transform only - animating opacity to a literal here would flash each bar to full
   opacity at the end before snapping back to its own .42/.68 value */
@keyframes logogrow{from{transform:scaleY(.12)}to{transform:scaleY(1)}}
.logomark rect{transform-origin:50% 100%;animation:logogrow .5s cubic-bezier(.2,.9,.3,1) backwards}
.logomark .b1{animation-delay:.02s}
.logomark .b2{animation-delay:.12s}
.logomark .b3{animation-delay:.22s}
@keyframes logodraw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
.logomark .tl{stroke-dasharray:60;animation:logodraw .55s ease-out .3s backwards}

@media (prefers-reduced-motion:reduce){
  .logomark rect,.logomark .tl{animation:none}
}
@media (max-width:720px){
  .logomark{width:32px}
}