:root{
  --bg:#0d1117; --bg2:#131a24; --panel:#161d29; --panel2:#1b2432;
  --line:#232d3d; --line2:#2d3a4d;
  --txt:#e6edf3; --muted:#8b98a9; --muted2:#5b6675;
  --accent:#3b82f6; --accent2:#60a5fa;
  --up:#22c55e; --down:#ef4444; --gold:#f59e0b; --buy:#a855f7;
  --shadow:0 6px 24px rgba(0,0,0,.4);
  --mono:"SF Mono",ui-monospace,"Cascadia Code","Consolas",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--txt);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  display:flex; flex-direction:column; min-height:100vh; overflow:hidden;
}

/* ---------- Header ---------- */
.app-header{
  display:flex; align-items:center; gap:24px; padding:10px 18px;
  background:linear-gradient(180deg,#141c28,#10161f); border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),#7c3aed); color:#fff; font-weight:800; font-size:20px;
}
.app-header h1{font-size:16px; margin:0; letter-spacing:.2px}
.subtitle{margin:0; font-size:11.5px; color:var(--muted)}
.tabs{display:flex; gap:6px; margin-left:8px}
.tab{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:7px 14px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600;
}
.tab:hover{color:var(--txt); border-color:var(--line2)}
.tab.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.data-meta{margin-left:auto; display:flex; gap:14px; font-size:11.5px; color:var(--muted); font-family:var(--mono)}

/* ---------- Views ---------- */
.view{display:none; flex:1 1 auto; min-height:0}
.view.active{display:flex}
#view-chart{overflow:hidden}
#view-scan{flex-direction:column; overflow:hidden}

/* ---------- Controls sidebar ---------- */
.controls{
  width:290px; flex:0 0 290px; background:var(--bg2); border-right:1px solid var(--line);
  overflow-y:auto; padding:12px;
}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:12px}
.lbl{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:6px; font-weight:700}
.lbl.sm{font-size:10px; margin-bottom:4px}
.hint{font-size:11px; color:var(--muted2); margin:6px 0 0}
.inp,.search{
  width:100%; background:var(--panel2); border:1px solid var(--line2); color:var(--txt);
  border-radius:8px; padding:8px 10px; font-size:13px; outline:none;
}
.inp:focus,.search:focus{border-color:var(--accent)}
.inp.sm{padding:5px 8px; width:auto}
.search{margin-bottom:8px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px}
.row{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:12.5px}
.row .k{color:var(--muted)} .row .v{font-family:var(--mono); font-weight:600}
.stock-list{
  width:100%; background:var(--panel2); border:1px solid var(--line2); color:var(--txt);
  border-radius:8px; padding:4px; font-size:13px; outline:none;
}
.stock-list option{padding:4px 6px; border-radius:4px}
.stock-list option:checked{background:var(--accent)}

.chk{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--txt); margin:7px 0; cursor:pointer}
.chk input{accent-color:var(--accent); width:15px; height:15px}

.btn{
  border:1px solid var(--line2); background:var(--panel2); color:var(--txt);
  padding:9px 12px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600;
}
.btn:hover{border-color:var(--accent2)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent2)}
.btn.ghost{background:transparent; color:var(--muted)}
.btn.block{width:100%; margin-top:8px}
.hidden{display:none !important}

.dip-readout{margin-top:10px; background:var(--panel2); border:1px solid var(--line2); border-radius:8px; padding:8px}
.dr-item{display:flex; justify-content:space-between; padding:3px 0; font-size:12.5px}
.dr-item span{color:var(--muted)}
.dr-item b{font-family:var(--mono); color:var(--gold)}

/* ---------- Chart column ---------- */
.chart-col{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; padding:12px; overflow:hidden}
.chart-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:8px}
.chart-head h2{margin:0; font-size:18px}
.pill{display:inline-block; margin-top:4px; font-size:11.5px; color:var(--muted); font-family:var(--mono)}
.value-date{display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.value-date label{font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted)}
.value-date .hint{margin:0}

.chart-wrap{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:10px; flex:0 0 auto; height:46%; min-height:300px}
#chart{display:block; width:100%; height:100%; cursor:crosshair}
.tooltip{
  position:absolute; pointer-events:none; z-index:5; background:rgba(10,14,20,.95);
  border:1px solid var(--line2); border-radius:8px; padding:8px 10px; font-size:12px;
  box-shadow:var(--shadow); min-width:150px; font-family:var(--mono);
}
.tooltip .tt-row{display:flex; justify-content:space-between; gap:16px; padding:1px 0}
.tooltip .tt-row span{color:var(--muted)}
.tooltip .tt-title{font-weight:700; margin-bottom:4px; font-family:inherit}

.ctx-menu{
  position:absolute; z-index:20; background:var(--panel2); border:1px solid var(--line2);
  border-radius:8px; box-shadow:var(--shadow); padding:5px; min-width:210px;
}
.ctx-menu .ci{padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13px; display:flex; justify-content:space-between; gap:12px}
.ctx-menu .ci:hover{background:var(--accent)}
.ctx-menu .ci small{color:var(--muted)}
.ctx-menu .ci:hover small{color:#dbeafe}
.ctx-menu .sep{height:1px; background:var(--line); margin:4px 2px}
.ctx-menu .ci.danger:hover{background:var(--down)}

/* ---------- Portfolio ---------- */
.portfolio{flex:1 1 auto; min-height:0; overflow-y:auto; margin-top:12px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:12px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px}
.card .c-lbl{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
.card .c-val{font-size:20px; font-weight:700; font-family:var(--mono); margin-top:4px}
.card .c-sub{font-size:11.5px; color:var(--muted); margin-top:2px; font-family:var(--mono)}

.pf-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:12px}
.pf-block{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px}
.pf-block h3{margin:0 0 10px; font-size:13px; color:var(--accent2)}

.tbl{width:100%; border-collapse:collapse; font-size:12.5px}
.tbl th{text-align:right; color:var(--muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; cursor:default}
.tbl th:first-child,.tbl td:first-child{text-align:center}
.tbl th:nth-child(2),.tbl td:nth-child(2){text-align:left}
.tbl td{text-align:right; padding:6px 8px; border-bottom:1px solid var(--line); font-family:var(--mono); white-space:nowrap}
.tbl tbody tr:hover{background:var(--panel2)}
.empty{color:var(--muted2); font-size:12px; padding:10px 4px}
.del-btn{background:transparent; border:none; color:var(--down); cursor:pointer; font-size:14px; padding:0 4px}
.del-btn:hover{color:#ff6b6b}

.pos{color:var(--up)} .neg{color:var(--down)} .mut{color:var(--muted)}

/* ---------- Compare / Portfolio view ---------- */
#view-compare{overflow:hidden}
.cmp-preset{display:flex; gap:5px; margin-bottom:8px; flex-wrap:wrap}
.btn.mini{padding:5px 8px; font-size:11px; border-radius:6px}
.cmp-list{max-height:340px; overflow-y:auto; border:1px solid var(--line2); border-radius:8px; background:var(--panel2); padding:4px}
.cmp-item{display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:6px; cursor:pointer; font-size:12.5px}
.cmp-item:hover{background:var(--panel)}
.cmp-item input{accent-color:var(--accent); width:14px; height:14px; flex:0 0 auto}
.cmp-item .ci-code{font-weight:700; min-width:52px}
.cmp-item .ci-name{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cmp-item .ci-sw{width:10px; height:10px; border-radius:2px; flex:0 0 auto}
.cmp-wrap{height:52% !important; min-height:320px}
.cmp-legend{display:flex; flex-wrap:wrap; gap:6px 14px; padding:10px 4px; margin-top:8px}
.leg-item{display:flex; align-items:center; gap:7px; font-size:12px; cursor:pointer; padding:3px 8px; border-radius:6px; border:1px solid transparent}
.leg-item:hover{border-color:var(--line2)}
.leg-item.off{opacity:.4}
.leg-item .sw{width:12px; height:3px; border-radius:2px}
.leg-item .lg-name{font-weight:600}
.leg-item .lg-val{font-family:var(--mono); color:var(--muted)}

/* ---------- Scan view ---------- */
.scan-bar{padding:12px 18px; border-bottom:1px solid var(--line); background:var(--bg2)}
.scan-controls{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.scan-controls>div{display:flex; flex-direction:column}
.scan-table-wrap{flex:1 1 auto; overflow:auto; padding:0 18px 18px}
.tbl.scan{font-size:12.5px}
.tbl.scan th{position:sticky; top:0; background:var(--bg2); cursor:pointer; z-index:2; padding:9px 10px}
.tbl.scan th:hover{color:var(--txt)}
.tbl.scan th.sorted{color:var(--accent2)}
.tbl.scan tbody tr{cursor:pointer}
.tbl.scan td.name{text-align:left; color:var(--muted)}
.tbl.scan td.code{text-align:left; font-weight:700; color:var(--txt)}

/* ---------- Footer ---------- */
.app-footer{
  flex:0 0 auto; display:flex; justify-content:space-between; gap:16px;
  padding:7px 18px; border-top:1px solid var(--line); font-size:11px; color:var(--muted2);
  background:#10161f;
}
.app-footer code{background:var(--panel2); padding:1px 6px; border-radius:4px; color:var(--muted); font-family:var(--mono)}

/* scrollbars */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:#2a3546; border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

@media (max-width:1100px){
  .pf-grid{grid-template-columns:1fr}
  .controls{width:250px; flex-basis:250px}
}