:root{
  --bg:#0e1116; --panel:#161b22; --panel-2:#1c232c; --line:#242c37;
  --text:#e6edf3; --muted:#9aa7b4; --dim:#6b7784;
  --accent:#3b82f6; --nifty:#3b82f6; --gold:#f0b429;
  --up:#22c55e; --down:#ef4444;
  --radius:12px;
  font-synthesis-weight:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
h1,h2,h3{margin:0 0 .4em; font-weight:600; letter-spacing:-.01em}
h1{font-size:1.35rem}
h2{font-size:1.05rem}
h3{font-size:.95rem; color:var(--muted); font-weight:600;
   text-transform:uppercase; letter-spacing:.06em; font-size:.72rem}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.login-card{width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px}
.login-card h1{margin-bottom:4px}
.login-card p.sub{color:var(--muted); font-size:.85rem; margin:0 0 24px}

/* ---------- shell ---------- */
header.topbar{
  position:sticky; top:0; z-index:20; background:rgba(14,17,22,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  padding:12px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.brand{font-weight:700; letter-spacing:-.02em; font-size:1.05rem; white-space:nowrap}
.brand span{color:var(--accent)}
.spacer{flex:1}
.whoami{color:var(--muted); font-size:.82rem; white-space:nowrap}
nav.tabs{display:flex; gap:4px; padding:10px 20px 0; flex-wrap:wrap;
  border-bottom:1px solid var(--line); background:var(--bg);
  position:sticky; top:53px; z-index:19}
nav.tabs button{
  background:none; border:none; border-bottom:2px solid transparent; color:var(--muted);
  padding:8px 14px; font-size:.9rem; cursor:pointer; font-family:inherit; border-radius:6px 6px 0 0;
}
nav.tabs button:hover{color:var(--text); background:var(--panel)}
nav.tabs button.on{color:var(--text); border-bottom-color:var(--accent)}
main{padding:20px; max-width:1180px; margin:0 auto}
section.page{display:none}
section.page.on{display:block}

/* ---------- cards ---------- */
.grid{display:grid; gap:14px}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.card.pad-lg{padding:20px}
.stat .label{color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em}
.stat .value{font-size:1.6rem; font-weight:650; letter-spacing:-.02em; margin-top:4px;
  font-variant-numeric:tabular-nums}
.stat .sub{color:var(--dim); font-size:.78rem; margin-top:2px}
.up{color:var(--up)} .down{color:var(--down)} .muted{color:var(--muted)} .dim{color:var(--dim)}

.pill{display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px;
  font-size:.85rem; font-weight:600; border:1px solid var(--line); background:var(--panel-2)}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block}
.dot.NIFTY{background:var(--nifty)} .dot.GOLD{background:var(--gold)} .dot.CASH{background:#64748b}
.badge{display:inline-block; padding:2px 8px; border-radius:5px; font-size:.7rem;
  background:var(--panel-2); color:var(--muted); border:1px solid var(--line);
  text-transform:uppercase; letter-spacing:.05em}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:.88rem}
th,td{padding:9px 12px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap}
th{color:var(--muted); font-weight:600; font-size:.72rem; text-transform:uppercase;
   letter-spacing:.05em; position:sticky; top:0; background:var(--panel)}
th:first-child,td:first-child{text-align:left}
tbody tr:hover{background:var(--panel-2)}
tbody tr.clickable{cursor:pointer}
tr.total td{font-weight:700; border-top:2px solid var(--line)}
td.num{font-variant-numeric:tabular-nums}

/* ---------- forms ---------- */
label{display:block; font-size:.78rem; color:var(--muted); margin:12px 0 5px}
input,select,textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:9px 11px; border-radius:8px; font-size:.9rem; font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:-1px}
button.btn{
  background:var(--accent); color:#fff; border:none; padding:9px 16px; border-radius:8px;
  font-size:.88rem; font-weight:600; cursor:pointer; font-family:inherit; margin-top:14px;
}
button.btn:hover{filter:brightness(1.1)}
button.btn:disabled{opacity:.5; cursor:not-allowed}
button.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--text)}
button.btn.danger{background:var(--down)}
button.btn.sm{padding:5px 10px; font-size:.78rem; margin-top:0}
.row-actions{display:flex; gap:6px; justify-content:flex-end}
.formrow{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

.msg{margin-top:14px; padding:10px 12px; border-radius:8px; font-size:.85rem; display:none}
.msg.err{display:block; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.4); color:#fca5a5}
.msg.ok{display:block; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.4); color:#86efac}

.chart{width:100%; height:360px}
.chart.sm{height:250px}
.note{color:var(--dim); font-size:.78rem; margin-top:10px}
.section-head{display:flex; align-items:center; gap:12px; margin:26px 0 12px; flex-wrap:wrap}
.section-head h2{margin:0}
.section-head .spacer{flex:1}
hr.sep{border:none; border-top:1px solid var(--line); margin:26px 0}

.timeline{display:flex; height:26px; border-radius:6px; overflow:hidden; border:1px solid var(--line)}
.timeline div{height:100%}
.legend{display:flex; gap:16px; margin-top:10px; font-size:.8rem; color:var(--muted); flex-wrap:wrap}

.empty{color:var(--muted); padding:26px; text-align:center; border:1px dashed var(--line);
  border-radius:var(--radius)}
.modal-back{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none;
  align-items:center; justify-content:center; padding:20px; z-index:50}
.modal-back.on{display:flex}
.modal{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; width:100%; max-width:440px; max-height:90vh; overflow:auto}
.cred{background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:12px;
  font-family:Consolas,"Courier New",monospace; font-size:.85rem; margin-top:12px; word-break:break-all}
@media (max-width:640px){
  main{padding:14px}
  .stat .value{font-size:1.3rem}
  nav.tabs{top:49px}
}