/* pulse — committed dark theme (trading convention).
   Tokens follow the validated dark-surface palette:
   surface #1a1a19 / page #0d0d0d, gain #0ca30c, loss #d03b3b, accent #3987e5 */
:root{
  --page:#0d0d0d; --surface:#1a1a19; --panel:#212120; --border:#2c2c2a;
  --ink:#ffffff; --ink2:#c3c2b7; --muted:#898781;
  --up:#0ca30c; --down:#d03b3b; --accent:#3987e5;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--page);color:var(--ink);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex;flex-direction:column}
.num{font-variant-numeric:tabular-nums}
.dim{color:var(--muted)} .grow{flex:1}
.up{color:var(--up)} .down{color:var(--down)}
button{font:inherit;color:var(--ink);background:var(--panel);
  border:1px solid var(--border);border-radius:6px;padding:.35rem .7rem;cursor:pointer}
button:hover{border-color:var(--muted)}
button.ghost{background:none;color:var(--ink2)}
input{font:inherit;background:var(--page);color:var(--ink);
  border:1px solid var(--border);border-radius:6px;padding:.45rem .6rem;width:100%}
input:focus{outline:none;border-color:var(--accent)}

header{display:flex;align-items:center;gap:1.1rem;padding:.55rem 1rem;
  background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap}
.brand{font-weight:700;font-size:1.05rem;letter-spacing:.02em}
.stat{display:flex;align-items:baseline;gap:.45rem}
.stat .label{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.stat b{font-size:1.02rem}
.small{font-size:.8rem}
.feed{font-size:.75rem;color:var(--up)}
.feed.stale{color:var(--down)}
.who{color:var(--ink2)}
#spark{opacity:.9}

main{display:grid;grid-template-columns:230px 1fr 265px;gap:1px;
  background:var(--border);flex:1;min-height:340px}
main>*{background:var(--surface);min-width:0}

/* watchlist */
#watchlist{overflow-y:auto;display:flex;flex-direction:column}
.search-wrap{padding:.5rem .6rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}
#search{width:100%;font-size:.82rem;padding:.4rem .55rem}
#watch-rows{overflow-y:auto;flex:1}
.wrow{display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;
  padding:.5rem .8rem;cursor:pointer;border-bottom:1px solid var(--border)}
.wrow:hover{background:var(--panel)}
.wrow.on{background:var(--panel);box-shadow:inset 2px 0 0 var(--accent)}
.wrow .sym{font-weight:600}
.wrow .name{grid-column:1;color:var(--muted);font-size:.72rem}
.wrow .px{text-align:right}
.wrow .chg{grid-column:2;text-align:right;font-size:.75rem}
.small-pad{padding-left:.5rem;font-size:.75rem;align-self:center}
.flash-up{animation:fup .5s} .flash-down{animation:fdn .5s}
@keyframes fup{0%{background:rgba(12,163,12,.25)}100%{background:none}}
@keyframes fdn{0%{background:rgba(208,59,59,.25)}100%{background:none}}

/* chart */
#chartwrap{display:flex;flex-direction:column}
#chartbar{display:flex;align-items:center;gap:.8rem;padding:.5rem .8rem;
  border-bottom:1px solid var(--border)}
#intervals button{padding:.2rem .55rem;border:none;background:none;color:var(--muted)}
#intervals button.on{color:var(--ink);background:var(--panel);border-radius:6px}
#chart{flex:1;min-height:300px}

/* trade panel */
#trade{padding: .8rem;display:flex;flex-direction:column;gap:.65rem}
.seg{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.seg button{flex:1;border:none;border-radius:0;background:none;color:var(--muted)}
.seg button.on{color:var(--ink);background:var(--panel)}
.seg button.buy.on{background:rgba(12,163,12,.18);color:var(--up)}
.seg button.sell.on{background:rgba(208,59,59,.18);color:var(--down)}
#trade label{display:flex;flex-direction:column;gap:.25rem;color:var(--ink2);font-size:.8rem}
.quick{display:flex;gap:.4rem}
.quick button{flex:1;padding:.25rem 0;font-size:.75rem;color:var(--ink2)}
.place{padding:.6rem;font-weight:700;border:none}
.place.buy{background:var(--up)} .place.sell{background:var(--down)}
#trade-msg{min-height:1.2em;font-size:.8rem;color:var(--ink2)}
.fine{color:var(--muted);font-size:.7rem}
.sip-box{border-top:1px solid var(--border);padding-top:.7rem;margin-top:.2rem;
  display:flex;flex-direction:column;gap:.45rem}
.sip-title{font-size:.78rem;color:var(--ink2);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.row-check{flex-direction:row!important;align-items:center;gap:.45rem!important;font-size:.78rem}
.row-check input{width:auto}

/* analytics pies */
#analytics{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:1px;background:var(--border);
  border-top:1px solid var(--border)}
.pie-card{background:var(--surface);padding:.8rem 1rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-start}
.pie-card h3{width:100%;font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.pie-leg{flex:1;min-width:140px;font-size:.75rem}
.leg-row{display:grid;grid-template-columns:10px 1fr auto auto;gap:.35rem .5rem;align-items:center;padding:.15rem 0}
.swatch{width:10px;height:10px;border-radius:2px;display:inline-block}
.xirr-card{flex-direction:column}
.xirr-line{font-size:.95rem}
.sip-actions{display:flex;gap:.25rem;flex-wrap:wrap}

/* asset class tabs */
#asset-tabs{display:flex;gap:.35rem;padding:.4rem 1rem;background:var(--surface);
  border-bottom:1px solid var(--border)}
#asset-tabs button{border:1px solid var(--border);background:var(--panel);
  color:var(--ink2);padding:.35rem .9rem;border-radius:999px;font-size:.82rem}
#asset-tabs button.on{background:rgba(57,135,229,.18);border-color:var(--accent);color:var(--ink)}

/* bottom tables */
#bottom{background:var(--surface);border-top:1px solid var(--border);
  height:260px;display:flex;flex-direction:column}
#tabs{display:flex;gap:.2rem;padding:.35rem .8rem 0}
#tabs button{border:none;background:none;color:var(--muted);padding:.35rem .8rem}
#tabs button.on{color:var(--ink);border-bottom:2px solid var(--accent)}
#panel{overflow:auto;flex:1;padding:.3rem .8rem .8rem}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th{color:var(--muted);text-align:left;font-weight:500;padding:.35rem .5rem;
  position:sticky;top:0;background:var(--surface)}
td{padding:.35rem .5rem;border-top:1px solid var(--border);vertical-align:top}
td.num,th.num,.r{text-align:right}
.sub{color:var(--muted);font-size:.72rem}
.muted{color:var(--muted)}
.empty{color:var(--muted);padding:1.2rem;text-align:center}

/* login */
#login[hidden]{display:none}
#login{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;
  align-items:center;justify-content:center;z-index:10}
#login .card{background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:1.6rem;width:minmax(0,26rem);max-width:26rem;
  display:flex;flex-direction:column;gap:.9rem}
#login p{color:var(--ink2)}
#login .primary{background:var(--accent);border:none;font-weight:700;padding:.65rem}
#login details{color:var(--ink2)}
#login form{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem}
#login .row{display:flex;gap:.5rem}
#autherr{color:var(--down);font-size:.8rem}

@media (max-width:900px){
  main{grid-template-columns:1fr;grid-template-rows:auto 340px auto}
  #watchlist{max-height:180px}
  #bottom{height:auto;max-height:300px}
  #spark{display:none}
  #analytics{grid-template-columns:1fr}
  header .stat:nth-child(n+5){display:none}
}