:root{
  --bg:#0b0e13;
  --bg-panel:#12161d;
  --bg-panel-2:#171c25;
  --bg-hover:#1c222c;
  --border:#252b36;
  --border-soft:#1c2129;
  --text:#e9e6dd;
  --text-dim:#8b93a3;
  --text-faint:#5a6272;
  --amber:#e8a33d;
  --amber-dim:#8a641f;
  --positive:#3ddc97;
  --negative:#ef5b5b;
  --value-c:#5b9bd5;
  --growth-c:#e8a33d;
  --blend-c:#a08cff;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "IBM Plex Sans", Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);}
body{-webkit-font-smoothing:antialiased;}
::selection{background:var(--amber);color:#0b0e13;}
::-webkit-scrollbar{height:10px;width:10px;}
::-webkit-scrollbar-track{background:var(--bg-panel);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;}
a{color:var(--amber);}

/* ---------- Header ---------- */
header.top{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#0d1117,#0b0e13);
  padding:18px 28px 14px;
  position:sticky; top:0; z-index:50;
}
.top-row{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.brand{display:flex; align-items:baseline; gap:10px;}
.brand .mark{
  font-family:var(--mono); font-weight:700; color:var(--amber); font-size:13px;
  letter-spacing:.12em; border:1px solid var(--amber-dim); padding:3px 7px; border-radius:3px;
}
.brand h1{font-size:19px; margin:0; font-weight:700; letter-spacing:-.01em;}
.brand .sub{font-size:12px; color:var(--text-faint); font-family:var(--mono);}
.meta{display:flex; gap:18px; align-items:center; font-family:var(--mono); font-size:11.5px; color:var(--text-dim);}
.meta .dot{width:6px; height:6px; border-radius:50%; background:var(--positive); display:inline-block; margin-right:6px; box-shadow:0 0 6px var(--positive);}
.search-wrap{margin-top:14px; display:flex; gap:10px; align-items:center;}
#globalSearch{
  flex:1; max-width:420px; background:var(--bg-panel); border:1px solid var(--border); color:var(--text);
  padding:9px 12px; border-radius:6px; font-family:var(--sans); font-size:13.5px; outline:none;
}
#globalSearch:focus{border-color:var(--amber-dim);}
.disclaimer-pill{
  font-size:10.5px; color:var(--text-faint); font-family:var(--mono); border:1px dashed var(--border);
  padding:5px 9px; border-radius:20px;
}
.live-wrap{margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
#finnhubKey{
  background:var(--bg-panel); border:1px solid var(--border); color:var(--text-dim);
  padding:7px 10px; border-radius:6px; font-family:var(--mono); font-size:11.5px; outline:none; width:230px;
}
#finnhubKey:focus{border-color:var(--amber-dim); color:var(--text);}
.live-btn{
  background:rgba(61,220,151,.1); border:1px solid var(--positive); color:var(--positive);
  padding:7px 14px; border-radius:6px; font-family:var(--sans); font-size:12.5px; font-weight:700;
  cursor:pointer; white-space:nowrap;
}
.live-btn.active{background:rgba(239,91,91,.1); border-color:var(--negative); color:var(--negative);}
.live-btn.sheet-btn{background:rgba(91,155,213,.1); border-color:var(--value-c); color:var(--value-c);}
.live-btn.sheet-btn.spinning{opacity:.6; cursor:wait;}
.live-btn:disabled{opacity:.5; cursor:not-allowed;}
.live-status{font-family:var(--mono); font-size:11px; color:var(--text-faint);}
.live-status.on{color:var(--positive);}
.live-status.err{color:var(--negative);}
.live-pulse{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--positive); margin-right:5px; animation:pulseDot 1.4s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1;} 50%{opacity:.25;}}
td.price-live{position:relative;}
td.price-live::after{content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--positive); margin-left:6px; vertical-align:middle;}

/* ---------- Ticker tape ---------- */
.tape-outer{border-bottom:1px solid var(--border); background:var(--bg-panel); overflow:hidden; white-space:nowrap;}
.tape{display:inline-block; padding:7px 0; animation:scrollTape 70s linear infinite;}
.tape-outer:hover .tape{animation-play-state:paused;}
@keyframes scrollTape{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.tape-item{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; padding:0 18px; border-right:1px solid var(--border-soft);}
.tape-item .tk{color:var(--text); font-weight:600;}
.tape-item .chg.pos{color:var(--positive);}
.tape-item .chg.neg{color:var(--negative);}
@media (prefers-reduced-motion: reduce){ .tape{animation:none;} }

/* ---------- Tabs ---------- */
nav.tabs{
  display:flex; gap:2px; padding:0 24px; background:var(--bg-panel); border-bottom:1px solid var(--border);
  overflow-x:auto; position:sticky; top:96px; z-index:40;
}
nav.tabs button{
  background:transparent; border:none; color:var(--text-dim); font-family:var(--sans); font-size:13px;
  font-weight:600; padding:12px 16px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;
  letter-spacing:.01em;
}
nav.tabs button:hover{color:var(--text);}
nav.tabs button.active{color:var(--amber); border-bottom-color:var(--amber);}
nav.tabs .count{font-family:var(--mono); font-size:10.5px; color:var(--text-faint); margin-left:6px;}

main{padding:22px 24px 60px; max-width:1600px; margin:0 auto;}
.panel{display:none;}
.panel.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:22px;}
.card{background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; padding:14px 16px;}
.card .label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-family:var(--mono);}
.card .value{font-size:24px; font-weight:700; font-family:var(--mono); margin-top:6px;}
.card .value.pos{color:var(--positive);}
.card .value.neg{color:var(--negative);}
.card .foot{font-size:11px; color:var(--text-dim); margin-top:3px;}

/* ---------- Section headers ---------- */
.section-title{display:flex; align-items:center; justify-content:space-between; margin:26px 0 10px;}
.section-title h2{font-size:15px; margin:0; font-weight:700;}
.section-title .eyebrow{font-family:var(--mono); font-size:10.5px; color:var(--amber); letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:2px;}

/* ---------- Style bar ---------- */
.style-bar{display:flex; height:26px; border-radius:5px; overflow:hidden; border:1px solid var(--border);}
.style-bar div{display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:700; color:#0b0e13;}
.style-legend{display:flex; gap:16px; margin-top:8px; font-size:11.5px; color:var(--text-dim); font-family:var(--mono);}
.style-legend span{display:inline-flex; align-items:center; gap:5px;}
.swatch{width:9px; height:9px; border-radius:2px; display:inline-block;}

/* ---------- Filters ---------- */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; align-items:center;}
.filters select, .filters input[type=text]{
  background:var(--bg-panel); border:1px solid var(--border); color:var(--text); padding:7px 10px;
  border-radius:6px; font-family:var(--sans); font-size:12.5px; outline:none;
}
.filters select:focus, .filters input:focus{border-color:var(--amber-dim);}
.filters .result-count{font-family:var(--mono); font-size:11.5px; color:var(--text-faint); margin-left:auto;}
.chip-toggle{
  background:var(--bg-panel); border:1px solid var(--border); color:var(--text-dim); padding:7px 12px;
  border-radius:20px; font-size:12px; font-family:var(--sans); cursor:pointer; font-weight:600;
}
.chip-toggle.on{background:rgba(232,163,61,.12); border-color:var(--amber-dim); color:var(--amber);}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:8px; background:var(--bg-panel);}
table{width:100%; border-collapse:collapse; font-size:12.5px; min-width:700px;}
thead th{
  position:sticky; top:0; background:var(--bg-panel-2); text-align:left; padding:10px 12px; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); border-bottom:1px solid var(--border);
  cursor:pointer; white-space:nowrap; font-family:var(--mono); user-select:none;
}
thead th:hover{color:var(--amber);}
thead th.sorted{color:var(--amber);}
thead th .arrow{font-size:9px; margin-left:3px; opacity:.7;}
tbody tr{border-bottom:1px solid var(--border-soft); cursor:default;}
tbody tr:hover{background:var(--bg-hover);}
tbody tr.expandable{cursor:pointer;}
td{padding:9px 12px; white-space:nowrap; font-family:var(--mono); color:var(--text);}
td.wrap{white-space:normal; font-family:var(--sans);}
td.name-cell{font-family:var(--sans); font-weight:600; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ticker-tag{font-weight:700; color:var(--amber); letter-spacing:.02em; cursor:pointer;}
.ticker-tag:hover{text-decoration:underline; text-underline-offset:3px;}
.num.pos{color:var(--positive);}
.num.neg{color:var(--negative);}

.badge{
  display:inline-block; padding:3px 9px; border-radius:20px; font-size:10.5px; font-weight:700;
  font-family:var(--mono); letter-spacing:.03em;
}
.badge-buy{background:rgba(61,220,151,.14); color:var(--positive);}
.badge-strongbuy{background:rgba(61,220,151,.22); color:var(--positive); box-shadow:0 0 0 1px rgba(61,220,151,.4) inset;}
.badge-hold{background:rgba(139,147,163,.14); color:var(--text-dim);}
.badge-sell{background:rgba(239,91,91,.14); color:var(--negative);}
.badge-strongsell{background:rgba(239,91,91,.22); color:var(--negative); box-shadow:0 0 0 1px rgba(239,91,91,.4) inset;}
.style-tag{display:inline-block; padding:2px 8px; border-radius:4px; font-size:10.5px; font-weight:700; font-family:var(--mono);}
.style-Growth{background:rgba(232,163,61,.14); color:var(--growth-c);}
.style-Value{background:rgba(91,155,213,.14); color:var(--value-c);}
.style-Blend{background:rgba(160,140,255,.14); color:var(--blend-c);}

.range-bar{width:70px; height:6px; background:var(--border); border-radius:3px; position:relative; display:inline-block; vertical-align:middle;}
.range-bar .fill{position:absolute; top:-3px; width:3px; height:12px; background:var(--amber); border-radius:2px;}

.analysis-row td{background:var(--bg-panel-2); font-family:var(--sans); color:var(--text-dim); white-space:normal; font-size:12px; line-height:1.5; padding:14px 16px;}

.chart-row td{background:var(--bg-panel-2); padding:0;}
.chart-container{width:100%; height:420px; position:relative;}
.chart-container iframe{width:100%; height:100%; border:none; border-radius:0;}
.chart-container .chart-loading{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:12px; color:var(--text-faint);
}
.chart-header{
  display:flex; align-items:center; justify-content:space-between; padding:10px 16px;
  background:var(--bg-panel-2); border-bottom:1px solid var(--border);
}
.chart-header .chart-title{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--amber);}
.chart-header .chart-close{
  background:transparent; border:1px solid var(--border); color:var(--text-dim); padding:3px 10px;
  border-radius:14px; font-size:11px; cursor:pointer; font-family:var(--sans);
}
.chart-header .chart-close:hover{color:var(--text); border-color:var(--text-dim);}
.chart-header .chart-link{font-family:var(--mono); font-size:11px; color:var(--text-faint); text-decoration:none;}
.chart-header .chart-link:hover{color:var(--amber);}
.factors{margin-top:6px;}
.factors span{display:inline-block; background:var(--bg-hover); border:1px solid var(--border); color:var(--text-dim); font-family:var(--mono); font-size:10.5px; padding:2px 7px; border-radius:4px; margin:2px 4px 0 0;}

.warn-box{border:1px solid var(--amber-dim); background:rgba(232,163,61,.06); border-radius:8px; padding:16px 18px; margin-bottom:20px;}
.warn-box strong{color:var(--amber);}
.warn-box p{margin:6px 0 0; font-size:12.5px; color:var(--text-dim); line-height:1.6;}

.lock-wrap{display:flex; justify-content:center; padding:60px 20px;}
.lock-card{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; padding:36px 40px;
  max-width:380px; text-align:center;
}
.lock-icon{font-size:32px; margin-bottom:10px;}
.lock-card h3{margin:0 0 8px; font-size:15px; color:var(--text);}
.lock-card p{margin:0 0 18px; font-size:12.5px; color:var(--text-dim); line-height:1.5;}
#portfolioLockForm{display:flex; gap:8px;}
#portfolioPassword{
  flex:1; background:var(--bg); border:1px solid var(--border); color:var(--text);
  padding:9px 12px; border-radius:6px; font-family:var(--sans); font-size:13px; outline:none;
}
#portfolioPassword:focus{border-color:var(--amber-dim);}
#portfolioLockForm button{
  background:var(--amber); border:none; color:#0b0e13; font-weight:700; padding:9px 16px;
  border-radius:6px; cursor:pointer; font-family:var(--sans); font-size:13px;
}
.lock-error{margin-top:12px; color:var(--negative); font-size:12px; font-family:var(--mono);}
.lock-status{
  display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11.5px;
  color:var(--positive); margin-bottom:14px;
}
.relock-btn{
  background:transparent; border:1px solid var(--border); color:var(--text-dim); padding:3px 10px;
  border-radius:14px; font-size:11px; cursor:pointer; font-family:var(--sans);
}
.relock-btn:hover{color:var(--text); border-color:var(--text-dim);}

.heat-section{margin-bottom:22px;}
.heat-section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px;}
.heat-cat-name{font-size:13px; font-weight:700; color:var(--text);}
.heat-cat-avg{font-family:var(--mono); font-size:11px;}
.heat-cat-avg.pos{color:var(--positive);}
.heat-cat-avg.neg{color:var(--negative);}
.heat-grid{display:flex; flex-wrap:wrap; gap:4px;}
.heat-grid-align{align-items:flex-end;}
.heat-tile{
  border-radius:5px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); cursor:default;
  transition:transform .1s ease; border:1px solid rgba(255,255,255,.06); flex-shrink:0;
}
.heat-tile:hover{transform:scale(1.06); z-index:2; box-shadow:0 4px 14px rgba(0,0,0,.4);}
.heat-tk{font-family:var(--mono); font-weight:700; font-size:1em;}
.heat-pct{font-family:var(--mono); font-size:0.88em; opacity:.9; margin-top:2px;}
@media (max-width:720px){
  .heat-tile{transform:scale(0.85); transform-origin:top left;}
}

footer{padding:24px; text-align:center; color:var(--text-faint); font-family:var(--mono); font-size:11px; border-top:1px solid var(--border); margin-top:20px;}

@media (max-width:720px){
  header.top{padding:14px 16px;}
  main{padding:16px;}
  nav.tabs{padding:0 12px; top:118px;}
  .brand h1{font-size:16px;}
}