/* Gold & Bitcoin Market Intelligence — dark trading-desk theme */

:root{
  --bg:#0b0e14; --bg-2:#111622; --card:#141a26; --card-2:#1a2130;
  --line:#232c3d; --line-soft:#1c2433;
  --ink:#e8edf7; --ink-2:#9aa7bd; --ink-3:#66738c;
  --gold:#e0b155; --btc:#f7931a;
  --up:#26c281; --down:#f0616d; --neutral:#7a8699;
  --accent:#5b8def; --warn:#e8b339;
  --r:12px; --r-sm:8px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  font-feature-settings:"tnum" 1;
  padding-bottom:40px;
}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.01em}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono); font-size:.92em; background:var(--card-2); padding:1px 5px; border-radius:4px; color:var(--gold)}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 22px; background:linear-gradient(180deg,#121826,#0d1119);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-mark{
  width:34px; height:34px; flex:0 0 auto; object-fit:contain; display:block;
  /* The logo is transparent gold, so it needs a glow rather than a plate
     behind it — a solid tile would box in the orbit ring and the sparkle. */
  filter:drop-shadow(0 0 10px rgba(224,177,85,.42));
}
.topbar h1{font-size:16px; white-space:nowrap}
.topbar h1 span{color:var(--ink-2); font-weight:400}
.brand-sub{margin:1px 0 0; font-size:11.5px; color:var(--ink-3)}
.clocks{display:flex; align-items:center; gap:14px}
.clock{text-align:right; line-height:1.2}
.clock-label{display:block; font-size:10px; letter-spacing:.09em; color:var(--ink-3); text-transform:uppercase}
.clock b{font-family:var(--mono); font-size:13.5px; color:var(--ink)}
.btn-ghost{
  background:var(--card-2); border:1px solid var(--line); color:var(--ink-2);
  width:32px; height:32px; border-radius:var(--r-sm); cursor:pointer; font-size:15px;
}
.btn-ghost:hover{color:var(--ink); border-color:var(--accent)}
.btn-ghost.spinning{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- tabs ---------- */
.tabs{
  display:flex; gap:2px; padding:0 22px; background:#0d1119;
  border-bottom:1px solid var(--line); overflow-x:auto;
}
.tab{
  background:none; border:0; border-bottom:2px solid transparent; color:var(--ink-3);
  padding:11px 15px; font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap;
}
.tab:hover{color:var(--ink-2)}
.tab.is-active{color:var(--ink); border-bottom-color:var(--gold)}

/* ---------- disclaimer ---------- */
.disclaimer-bar{
  background:rgba(232,179,57,.09); border-bottom:1px solid rgba(232,179,57,.22);
  color:#e8c98a; font-size:12px; padding:8px 22px; text-align:center;
}

main{max-width:1320px; margin:0 auto; padding:22px}
.panel-group.is-hidden{display:none}
.section-title{
  font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3);
  margin:26px 0 11px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.section-title:first-child{margin-top:0}
.hint{text-transform:none; letter-spacing:0; font-size:11.5px; color:var(--ink-3); opacity:.8; font-weight:400}

.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---------- cards ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--shadow);
}
.card + .card{margin-top:14px}
.card-title{font-size:15px; margin-bottom:4px}
.card-sub{margin:0 0 14px; color:var(--ink-2); font-size:12.5px; max-width:75ch}
.skeleton{
  background:linear-gradient(90deg,var(--card) 25%,var(--card-2) 50%,var(--card) 75%);
  background-size:200% 100%; animation:sk 1.4s infinite;
}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- countdown ---------- */
.event-card{position:relative; overflow:hidden}
.event-card::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--neutral)}
.event-card.imp-high::before{background:var(--down)}
.event-card.imp-med::before{background:var(--warn)}
.event-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.event-name{font-size:14.5px; font-weight:600}
.event-time{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:3px}
.countdown{font-family:var(--mono); font-size:24px; font-weight:600; margin-top:10px; letter-spacing:-.02em}
.countdown.imminent{color:var(--warn)}
.countdown.live{color:var(--down)}
.impact-tags{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap}
.tag{
  font-size:10.5px; padding:2px 7px; border-radius:20px; border:1px solid var(--line);
  color:var(--ink-2); background:var(--card-2); white-space:nowrap;
}
.tag.high{border-color:rgba(240,97,109,.4); color:#ff9aa2}
.tag.med{border-color:rgba(232,179,57,.4); color:#e8c98a}
.tag.gold{border-color:rgba(224,177,85,.45); color:var(--gold)}
.tag.btc{border-color:rgba(247,147,26,.45); color:var(--btc)}

/* ---------- asset panel ---------- */
.asset-card .asset-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px}
.asset-name{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600}
.dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.asset-ticker{font-size:11.5px; color:var(--ink-3); font-family:var(--mono)}
.price-row{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap}
.price{font-family:var(--mono); font-size:29px; font-weight:600; letter-spacing:-.02em}
.chg{font-family:var(--mono); font-size:13.5px; font-weight:600}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--neutral)}
.metrics{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:14px;
  background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-sm); overflow:hidden;
}
.metric{background:var(--card-2); padding:9px 11px}
.metric-label{font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}
.metric-value{font-family:var(--mono); font-size:13px; margin-top:3px}
.trend-line{
  margin-top:12px; padding:9px 11px; border-radius:var(--r-sm);
  background:var(--card-2); border:1px solid var(--line-soft);
}
.trend-label{font-weight:600; font-size:13px}
.trend-detail{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:3px}
.src-note{margin-top:9px; font-size:10.5px; color:var(--ink-3)}

/* ---------- charts ---------- */
.chart-card{padding:14px}
.chart-tabs{display:flex; gap:7px; margin-bottom:12px}
.tv-container{height:460px; border-radius:var(--r-sm); overflow:hidden; background:var(--bg-2)}
.tv-container iframe{border:0; width:100%; height:100%; display:block}

/* ---------- chips / controls ---------- */
.chip{
  background:var(--card-2); border:1px solid var(--line); color:var(--ink-2);
  padding:6px 13px; border-radius:20px; font-size:12.5px; cursor:pointer;
}
.chip:hover{color:var(--ink)}
.chip.is-active{background:rgba(224,177,85,.14); border-color:var(--gold); color:var(--gold)}
.chipset{display:flex; gap:7px; flex-wrap:wrap}
.controls{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.controls-alt{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line)}
.controls-wrap{align-items:flex-end}
.field{display:flex; flex-direction:column; gap:5px; min-width:170px}
.field span{font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}
select,input,.input{
  background:var(--card-2); border:1px solid var(--line); color:var(--ink);
  padding:8px 11px; border-radius:var(--r-sm); font-size:13px; font-family:inherit; min-height:36px;
}
select:focus,input:focus{outline:2px solid rgba(91,141,239,.45); outline-offset:-1px; border-color:var(--accent)}
.input{flex:1; min-width:180px}
.btn{
  background:var(--gold); color:#231a06; border:0; padding:9px 17px; border-radius:var(--r-sm);
  font-size:13px; font-weight:600; cursor:pointer; min-height:36px;
}
.btn:hover{filter:brightness(1.09)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-secondary{background:var(--card-2); color:var(--ink); border:1px solid var(--line)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-sm); margin-top:14px}
table{border-collapse:collapse; width:100%; min-width:760px; font-size:12.5px}
th,td{padding:9px 11px; text-align:right; border-bottom:1px solid var(--line-soft); white-space:nowrap}
th{
  background:var(--card-2); color:var(--ink-3); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.06em; font-weight:600; position:sticky; top:0;
}
td:first-child,th:first-child{text-align:left}
tbody tr:hover{background:rgba(255,255,255,.02)}
tbody tr:last-child td{border-bottom:0}
tfoot td{background:var(--card-2); font-weight:600; border-top:1px solid var(--line)}
.num{font-family:var(--mono)}
.col-gold{background:rgba(224,177,85,.045)}
.col-btc{background:rgba(247,147,26,.045)}
.pill{font-size:10.5px; padding:2px 8px; border-radius:20px; font-weight:600}
.pill.beat{background:rgba(38,194,129,.16); color:var(--up)}
.pill.miss{background:rgba(240,97,109,.16); color:var(--down)}
.pill.inline{background:rgba(122,134,153,.16); color:var(--neutral)}
.pill.pending{background:rgba(91,141,239,.16); color:var(--accent)}

/* ---------- bias card ---------- */
.bias-card{border-width:1px; border-style:solid}
.bias-Bullish{border-color:rgba(38,194,129,.5)}
.bias-Bearish{border-color:rgba(240,97,109,.5)}
.bias-verdict{display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin:6px 0 14px}
.bias-badge{font-size:19px; font-weight:700; padding:6px 16px; border-radius:var(--r-sm); background:var(--card-2)}
.bias-badge.Bullish{background:rgba(38,194,129,.16); color:var(--up)}
.bias-badge.Bearish{background:rgba(240,97,109,.16); color:var(--down)}
.bias-score{font-family:var(--mono); font-size:13px; color:var(--ink-2)}
.steps{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-sm); overflow:hidden}
.step{
  background:var(--card-2); padding:9px 12px; display:grid;
  grid-template-columns:190px 1fr; gap:12px; align-items:baseline;
}
@media (max-width:640px){.step{grid-template-columns:1fr; gap:2px}}
.step-label{font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em}
.step-value{font-family:var(--mono); font-size:13px}
.step-note{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.disclaimer-inline{
  margin-top:13px; padding:9px 12px; border-radius:var(--r-sm); font-size:11.5px;
  background:rgba(232,179,57,.08); border:1px solid rgba(232,179,57,.2); color:#e8c98a;
}

/* ---------- news ---------- */
.news-item{
  display:flex; gap:13px; padding:12px 0; border-bottom:1px solid var(--line-soft); align-items:flex-start;
}
.news-item:last-child{border-bottom:0}
.news-body{flex:1; min-width:0}
.news-title{font-size:13.5px; line-height:1.45; color:var(--ink); font-weight:500}
.news-meta{display:flex; gap:9px; align-items:center; margin-top:5px; font-size:11px; color:var(--ink-3); flex-wrap:wrap}
.sent{font-size:10.5px; padding:1px 7px; border-radius:20px; font-weight:600}
.sent.pos{background:rgba(38,194,129,.15); color:var(--up)}
.sent.neg{background:rgba(240,97,109,.15); color:var(--down)}
.sent.neu{background:rgba(122,134,153,.15); color:var(--neutral)}
.news-compact{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:4px 18px 10px;
}

/* ---------- misc ---------- */
.empty,.error-box{
  padding:26px; text-align:center; color:var(--ink-3); font-size:13px;
  border:1px dashed var(--line); border-radius:var(--r-sm); margin-top:12px;
}
.error-box{color:#ff9aa2; border-color:rgba(240,97,109,.3); background:rgba(240,97,109,.05)}
.loading{display:flex; align-items:center; gap:10px; color:var(--ink-2); font-size:13px; padding:18px}
.spinner{
  width:15px; height:15px; border:2px solid var(--line); border-top-color:var(--gold);
  border-radius:50%; animation:spin .7s linear infinite; flex:0 0 auto;
}
.source-grid{display:grid; gap:9px}
.source-row{
  display:flex; justify-content:space-between; gap:12px; padding:9px 12px;
  background:var(--card-2); border:1px solid var(--line-soft); border-radius:var(--r-sm); font-size:12.5px;
}
.source-row b{font-weight:600}
.source-row .ok{color:var(--up)}
.code-block{
  background:#0a0d14; border:1px solid var(--line); border-radius:var(--r-sm); padding:13px;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-2); overflow-x:auto; margin:0; line-height:1.6;
}
.row-actions{display:flex; gap:7px; justify-content:flex-end}
.btn-tiny{
  background:var(--card-2); border:1px solid var(--line); color:var(--ink-3);
  padding:3px 9px; border-radius:5px; font-size:11px; cursor:pointer;
}
.btn-tiny:hover{color:var(--down); border-color:var(--down)}
footer{
  max-width:1320px; margin:34px auto 0; padding:20px 22px;
  border-top:1px solid var(--line); color:var(--ink-3); font-size:11.5px; text-align:center;
}
.footer-meta{margin:6px 0 0; opacity:.7}
.basis-note{font-size:9.5px; color:var(--ink-3); margin-left:6px; letter-spacing:.03em}

/* ---------- prominent dual clock ---------- */
.clock{text-align:right; line-height:1.15; min-width:104px}
.clock b{display:block; font-family:var(--mono); font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums}
.clock-date{display:block; font-size:10.5px; color:var(--ink-3); margin-top:1px}
.clock-sep{width:1px; align-self:stretch; background:var(--line); margin:2px 2px}
@media (max-width:720px){
  .clock b{font-size:16px}
  .clock{min-width:88px}
  .brand-sub{display:none}
}

/* ---------- odds panel ---------- */
.odds-grid{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-sm); overflow:hidden; margin-top:6px}
.odds-head,.odds-row{display:grid; grid-template-columns:120px repeat(3,1fr); gap:12px; background:var(--card-2); padding:10px 13px; align-items:center}
.odds-head{background:var(--card); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3)}
.odds-asset{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px}
.odds-cell{display:flex; flex-direction:column; gap:5px}
.odds-pct{font-family:var(--mono); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums}
.odds-bar{height:6px; border-radius:3px; background:rgba(240,97,109,.28); overflow:hidden; position:relative}
.odds-bar span{display:block; height:100%; background:var(--up); border-radius:3px}
.odds-sub{font-size:10.5px; color:var(--ink-3); font-family:var(--mono)}
.odds-split{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-top:14px}
.odds-card{background:var(--card-2); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:11px 13px}
.odds-card h4{margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:600}
.odds-line{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:3px 0}
.odds-line b{font-family:var(--mono); font-variant-numeric:tabular-nums}
.small-n{color:var(--warn)}
@media (max-width:640px){.odds-head,.odds-row{grid-template-columns:82px repeat(3,1fr); gap:8px; padding:9px}}

.event-card[data-jump]{cursor:pointer; transition:border-color .12s, transform .12s}
.event-card[data-jump]:hover{border-color:var(--gold); transform:translateY(-1px)}
.event-card[data-jump]:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.jump-hint{position:absolute; top:14px; right:16px; font-size:10.5px; color:var(--ink-3); opacity:0; transition:opacity .12s}
.event-card[data-jump]:hover .jump-hint{opacity:1; color:var(--gold)}

/* ---------- strategy tester ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-sm); overflow:hidden; margin-top:6px}
.stat{background:var(--card-2); padding:12px 13px}
.stat-label{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3)}
.stat-value{font-family:var(--mono); font-size:19px; font-weight:600; margin-top:4px; font-variant-numeric:tabular-nums}
.stat-note{font-size:10.5px; color:var(--ink-3); margin-top:2px}
.equity-wrap{margin-top:16px; background:var(--card-2); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:14px}
.equity-wrap h4{margin:0 0 10px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:600}
.equity-svg{width:100%; height:190px; display:block; overflow:visible}
.verdict{padding:11px 14px; border-radius:var(--r-sm); margin-top:14px; font-size:13px; line-height:1.55}
.verdict.good{background:rgba(38,194,129,.1); border:1px solid rgba(38,194,129,.3)}
.verdict.bad{background:rgba(240,97,109,.09); border:1px solid rgba(240,97,109,.28)}
.verdict.meh{background:rgba(232,179,57,.09); border:1px solid rgba(232,179,57,.26)}
.reason-pill{font-size:10px; padding:1px 7px; border-radius:20px; background:var(--card); border:1px solid var(--line); color:var(--ink-3)}
.reason-pill.stop{border-color:rgba(240,97,109,.4); color:#ff9aa2}
.reason-pill.target{border-color:rgba(38,194,129,.4); color:var(--up)}
.coarse-flag{margin-left:5px; color:var(--warn); font-size:11px; cursor:help}

/* ============================================================================
   Trading-desk surface: layered depth instead of a flat fill.
   A faint grid gives the eye a reference for dense numeric content, and two
   wide radial washes in the asset accent colours keep the page from reading
   as a dead black rectangle. Both are pinned behind everything and inert.
   ========================================================================== */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(1000px 560px at 10% -10%, rgba(224,177,85,.14), transparent 60%),
    radial-gradient(900px 520px at 90% -6%, rgba(247,147,26,.10), transparent 58%),
    radial-gradient(1100px 700px at 50% 112%, rgba(91,141,239,.09), transparent 66%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 100% 100%, 46px 46px, 46px 46px;
  background-attachment:fixed;
}

/* Cards lift off that surface with a hairline highlight along the top edge. */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 42%), var(--card);
  backdrop-filter:blur(6px);
}
.topbar{
  background:linear-gradient(180deg, rgba(20,26,38,.96), rgba(11,14,20,.92));
  backdrop-filter:blur(12px);
}

/* ---------- live ticker strip (persists across tabs) ---------- */
.ticker-bar{
  display:flex; align-items:stretch; gap:0;
  background:linear-gradient(180deg,#10151f,#0c1017);
  border-bottom:1px solid var(--line);
  min-height:42px; overflow:hidden;
}
.ticker-live{
  display:flex; align-items:center; gap:7px; padding:0 14px;
  font-size:10px; font-weight:700; letter-spacing:.13em; color:var(--up);
  border-right:1px solid var(--line); flex:0 0 auto; background:rgba(38,194,129,.06);
}
.pulse{width:7px; height:7px; border-radius:50%; background:var(--up); box-shadow:0 0 0 0 rgba(38,194,129,.7); animation:pulse 2s infinite}
@keyframes pulse{
  70%{box-shadow:0 0 0 8px rgba(38,194,129,0)}
  100%{box-shadow:0 0 0 0 rgba(38,194,129,0)}
}
.ticker-items{display:flex; align-items:center; gap:0; flex:1; overflow-x:auto; scrollbar-width:none}
.ticker-items::-webkit-scrollbar{display:none}
.ticker-item{
  display:flex; align-items:baseline; gap:9px; padding:0 18px; white-space:nowrap;
  border-right:1px solid var(--line-soft); height:100%;
}
.ticker-sym{font-size:10.5px; letter-spacing:.09em; color:var(--ink-3); text-transform:uppercase; font-weight:600}
.ticker-px{font-family:var(--mono); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; transition:color .25s}
.ticker-chg{font-family:var(--mono); font-size:11.5px; font-weight:600}
.ticker-spark{margin-left:2px; opacity:.85}
.ticker-item.flash-up .ticker-px{color:var(--up); text-shadow:0 0 14px rgba(38,194,129,.55)}
.ticker-item.flash-down .ticker-px{color:var(--down); text-shadow:0 0 14px rgba(240,97,109,.55)}
.ticker-next{color:var(--warn)}
.skeleton-line{width:280px; height:14px; margin:0 18px; border-radius:4px; background:var(--card-2)}

/* market sessions — London/NY overlap is when gold actually moves */
.sessions{display:flex; align-items:center; gap:7px; padding:0 15px; border-left:1px solid var(--line); flex:0 0 auto}
.session{
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  padding:3px 8px; border-radius:20px; border:1px solid var(--line); color:var(--ink-3); white-space:nowrap;
}
.session.open{border-color:rgba(38,194,129,.45); color:var(--up); background:rgba(38,194,129,.09)}
@media (max-width:860px){ .sessions{display:none} }

/* ---------- sparkline in asset cards ---------- */
.asset-spark{margin:16px 0 4px}
.asset-spark svg{width:100%; height:52px; display:block; overflow:visible}
.spark-meta{display:flex; justify-content:space-between; font-size:10px; color:var(--ink-3); font-family:var(--mono); margin-top:6px; padding-top:6px; border-top:1px solid var(--line-soft)}

/* price flash on the big asset numbers too */
.price{transition:color .3s, text-shadow .3s}
.price.flash-up{color:var(--up); text-shadow:0 0 18px rgba(38,194,129,.4)}
.price.flash-down{color:var(--down); text-shadow:0 0 18px rgba(240,97,109,.4)}

/* ---------- session timeline ---------- */
.sess-head,.sess-row{
  display:grid; grid-template-columns:132px 1fr 58px 66px 118px;
  gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-soft);
}
.sess-row:last-of-type{border-bottom:0}
.sess-head{border-bottom:1px solid var(--line); padding-bottom:7px}
.sess-col-h{font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3)}
.sess-scale{position:relative; height:14px}
.sess-scale span{position:absolute; top:0; transform:translateX(-50%); font-size:9.5px; color:var(--ink-3); font-family:var(--mono)}
.sess-now{position:absolute; top:-2px; width:2px; height:16px; background:var(--warn); transform:translateX(-1px)!important; border-radius:1px; box-shadow:0 0 8px rgba(232,179,57,.8)}
.sess-name{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500}
.sess-dot{width:8px; height:8px; border-radius:50%; background:var(--line); flex:0 0 auto}
.sess-dot.on{box-shadow:0 0 9px currentColor}
.sess-track{position:relative; height:11px; background:var(--card-2); border-radius:6px; overflow:hidden; border:1px solid var(--line-soft)}
.sess-bar{position:absolute; top:0; bottom:0; opacity:.42; border-radius:5px}
.sess-bar.is-open{opacity:.95}
.sess-local{font-family:var(--mono); font-size:12px; color:var(--ink-2)}
.sess-state{font-size:10px; font-weight:700; letter-spacing:.07em}
.sess-next{font-size:11.5px; color:var(--ink-3); font-family:var(--mono)}
.soon-text{color:var(--warn); font-weight:600}
.session.soon{border-color:rgba(232,179,57,.55); color:var(--warn); background:rgba(232,179,57,.1)}
@media (max-width:820px){
  .sess-head,.sess-row{grid-template-columns:100px 1fr 60px; row-gap:4px}
  .sess-local,.sess-col-h:nth-child(3){display:none}
  .sess-next{grid-column:2 / -1; text-align:right}
}

/* ---------- dashboard: main column + sticky session rail ---------- */
.dash-grid{display:grid; grid-template-columns:1fr 268px; gap:18px; align-items:start}
.dash-rail{position:sticky; top:78px}
.rail-card{padding:14px 15px}
@media (max-width:1080px){
  .dash-grid{grid-template-columns:1fr}
  .dash-rail{position:static}
}

/* vertical session list */
.rail-title{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:600; margin:0 0 11px; display:flex; justify-content:space-between; align-items:center}
.rail-sess{display:flex; flex-direction:column; gap:9px}
.rs{
  display:grid; grid-template-columns:9px 1fr auto; gap:9px; align-items:center;
  padding:9px 10px; border-radius:var(--r-sm); background:var(--card-2);
  border:1px solid var(--line-soft); border-left:3px solid var(--line);
}
.rs.open{border-left-color:var(--up); background:rgba(38,194,129,.055)}
.rs.soon{border-left-color:var(--warn); background:rgba(232,179,57,.06)}
.rs-dot{width:8px; height:8px; border-radius:50%; background:var(--line-soft)}
.rs.open .rs-dot{background:var(--up); box-shadow:0 0 8px rgba(38,194,129,.75)}
.rs.soon .rs-dot{background:var(--warn); box-shadow:0 0 8px rgba(232,179,57,.75)}
.rs-name{font-size:12.5px; font-weight:600; line-height:1.25}
.rs-sub{font-size:10.5px; color:var(--ink-3); font-family:var(--mono); margin-top:1px}
.rs-right{text-align:right}
.rs-state{font-size:9.5px; font-weight:700; letter-spacing:.06em}
.rs-next{font-size:10.5px; font-family:var(--mono); color:var(--ink-3); margin-top:2px; white-space:nowrap}
.rail-note{font-size:10.5px; color:var(--ink-3); margin:12px 0 0; line-height:1.5; padding-top:11px; border-top:1px solid var(--line-soft)}

/* ---------- calendar ---------- */
.cal-bar{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:12px}
.cal-nav{display:flex; gap:7px; align-items:center}
.cal-legend{display:flex; gap:15px; flex-wrap:wrap; font-size:11px; color:var(--ink-3); margin-bottom:13px}
.cal-legend span{display:flex; align-items:center; gap:6px}
.lg{width:9px; height:9px; border-radius:2px; display:inline-block}
.lg-high{background:var(--down)} .lg-med{background:var(--warn)}
.lg-us{background:var(--accent)} .lg-nse{background:var(--gold)}
.lg-today{background:transparent; border:2px solid var(--ink-2); border-radius:3px}
.cal-dows,.cal-weeks{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.cal-dows{margin-bottom:5px}
.cal-dow{font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); text-align:center; padding:4px 0; font-weight:600}
.cal-cell{
  min-height:84px; border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:var(--card-2); padding:6px 7px; display:flex; flex-direction:column; gap:3px;
}
.cal-cell.muted{opacity:.36}
.cal-cell.weekend{background:rgba(255,255,255,.012)}
.cal-cell.today{border-color:var(--ink-2); box-shadow:0 0 0 1px var(--ink-2) inset}
.cal-cell.hol-us{background:rgba(91,141,239,.09); border-color:rgba(91,141,239,.28)}
.cal-cell.hol-nse{background:rgba(224,177,85,.09); border-color:rgba(224,177,85,.3)}
.cal-day{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); font-weight:600}
.cal-ev{
  font-size:9.5px; padding:2px 5px; border-radius:3px; background:rgba(232,179,57,.16);
  color:#e8c98a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:default;
}
.cal-ev.high{background:rgba(240,97,109,.18); color:#ff9aa2}
.cal-hol{font-size:9.5px; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-hol.nse{color:var(--gold)}
.cal-more{font-size:9.5px; color:var(--ink-3)}
.cal-row{display:grid; grid-template-columns:118px 1fr auto; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-soft); align-items:center; font-size:12.5px}
.cal-row:last-child{border-bottom:0}
.cal-row-date{font-family:var(--mono); font-size:11.5px; color:var(--ink-2)}
textarea.input{width:100%; font-family:var(--mono); font-size:12px; line-height:1.6; resize:vertical}
@media (max-width:720px){
  .cal-cell{min-height:64px; padding:4px}
  .cal-ev,.cal-hol{font-size:8.5px}
}

/* ---------- animated session rail ---------- */
.rs{
  display:block; padding:10px 11px; border-radius:var(--r-sm);
  background:var(--card-2); border:1px solid var(--line-soft);
  border-left:3px solid var(--line); transition:border-color .3s, background .3s;
}
.rs-top{display:flex; align-items:center; gap:8px}
.rs-dot{width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:0 0 auto; opacity:.45}
.rs-name{font-size:12.5px; font-weight:600; flex:1; line-height:1.2}
.rs-state{font-size:9.5px; font-weight:700; letter-spacing:.06em}
.rs-win{font-family:var(--mono); font-size:11px; color:var(--ink-2); margin-top:5px; letter-spacing:.01em}
.rs-ist{color:var(--ink-3); font-size:9.5px}
.rs-foot{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:6px}
.rs-next{font-size:10.5px; color:var(--ink-3)}
.rs-next b{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink-2); font-weight:600}
.rs-local{font-family:var(--mono); font-size:9.5px; color:var(--ink-3)}

/* progress through the session */
.rs-progress{height:4px; border-radius:2px; background:rgba(255,255,255,.055); margin-top:8px; overflow:hidden; position:relative}
.rs-fill{display:block; height:100%; width:0; border-radius:2px; background:var(--line); transition:width 1s linear}

/* OPEN: live dot, lit bar, and a sweep so the panel reads as running */
.rs.open{border-left-color:var(--up); background:rgba(38,194,129,.06)}
.rs.open .rs-dot{background:var(--up); opacity:1; animation:sessPulse 2s ease-out infinite}
.rs.open .rs-fill{background:linear-gradient(90deg, rgba(38,194,129,.55), var(--up))}
.rs.open .rs-progress::after{
  content:""; position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation:sessSweep 2.6s ease-in-out infinite;
}
@keyframes sessPulse{
  0%{box-shadow:0 0 0 0 rgba(38,194,129,.65)}
  70%{box-shadow:0 0 0 7px rgba(38,194,129,0)}
  100%{box-shadow:0 0 0 0 rgba(38,194,129,0)}
}
@keyframes sessSweep{
  0%{transform:translateX(-100%)}
  60%,100%{transform:translateX(100%)}
}

/* within 30 min of opening, or of closing */
.rs.soon{border-left-color:var(--warn); background:rgba(232,179,57,.07)}
.rs.soon .rs-dot{background:var(--warn); opacity:1; animation:sessPulse 1.1s ease-out infinite}
.rs.closing{border-left-color:var(--warn)}
.rs.closing .rs-dot{animation:sessPulse 1.1s ease-out infinite}
.rail-now b{font-family:var(--mono); color:var(--ink-2); font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  .rs.open .rs-dot,.rs.soon .rs-dot,.rs.closing .rs-dot{animation:none}
  .rs.open .rs-progress::after{animation:none; opacity:0}
  .rs-fill{transition:none}
}

/* ---------- "also scheduled" strip ---------- */
.also-strip{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:11px}
.also-strip:empty{display:none}
.also-label{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600}
.also-item{
  font-size:11.5px; padding:4px 10px; border-radius:20px; background:var(--card-2);
  border:1px solid var(--line); color:var(--ink-2); cursor:pointer; white-space:nowrap; transition:border-color .12s,color .12s;
}
.also-item:hover{border-color:var(--gold); color:var(--ink)}
.also-item:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.also-item b{font-family:var(--mono); color:var(--ink-3); font-weight:600; margin-right:4px}

/* ---------- session overlaps ---------- */
.rail-ovl{display:flex; flex-direction:column; gap:7px}
.ovl{
  padding:8px 10px; border-radius:var(--r-sm); background:var(--card-2);
  border:1px solid var(--line-soft); border-left:3px solid var(--line);
}
.ovl.active{border-left-color:var(--warn); background:rgba(232,179,57,.08); border-color:rgba(232,179,57,.26)}
.ovl-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.ovl-pair{font-size:12px; font-weight:600; letter-spacing:.02em}
.ovl-pair b{font-family:var(--mono)}
.ovl-when{font-size:10px; color:var(--ink-3); font-family:var(--mono); white-space:nowrap}
.ovl-live{
  background:var(--warn); color:#231a06; padding:1px 5px; border-radius:3px;
  font-weight:700; letter-spacing:.05em; animation:ovlBlink 1.8s ease-in-out infinite;
}
@keyframes ovlBlink{50%{opacity:.45}}
.ovl-win{font-family:var(--mono); font-size:10.5px; color:var(--ink-2); margin-top:3px}
.ovl-bar{height:3px; border-radius:2px; background:rgba(255,255,255,.07); margin-top:6px; overflow:hidden}
.ovl-bar span{display:block; height:100%; background:var(--warn); border-radius:2px; transition:width 1s linear}
.ovl-note{font-size:10px; color:var(--ink-3); margin-top:4px; line-height:1.35}
.ovl.active .ovl-note{color:#e8c98a}
.ovl-none{font-size:11px; color:var(--ink-3)}
@media (prefers-reduced-motion: reduce){ .ovl-live{animation:none} }

/* ---------- live alert toasts ---------- */
.toast-stack{
  position:fixed; right:18px; bottom:18px; z-index:200;
  display:flex; flex-direction:column; gap:9px; width:min(360px, calc(100vw - 36px));
  pointer-events:none;
}
.toast{
  pointer-events:auto; position:relative; display:flex; gap:10px; align-items:flex-start;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--card);
  border:1px solid var(--line); border-radius:var(--r); padding:11px 12px 11px 14px;
  box-shadow:0 10px 34px -12px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.5);
  opacity:0; transform:translateY(10px) scale(.98);
  transition:opacity .24s ease, transform .24s cubic-bezier(.2,.8,.3,1);
  backdrop-filter:blur(8px);
}
.toast.in{opacity:1; transform:none}
.toast.out{opacity:0; transform:translateY(6px) scale(.98)}
.toast.is-link{cursor:pointer}
.toast.is-link:hover{border-color:var(--gold)}
.toast-bar{position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:var(--r) 0 0 var(--r); background:var(--accent)}
.toast-news .toast-bar{background:var(--gold)}
.toast-event .toast-bar{background:var(--down)}
.toast-ok .toast-bar{background:var(--up)}
.toast-body{flex:1; min-width:0}
.toast-title{font-size:12.5px; font-weight:600; line-height:1.4; color:var(--ink)}
.toast-text{font-size:11.5px; color:var(--ink-2); margin-top:3px; line-height:1.45}
.toast-meta{font-size:10.5px; color:var(--ink-3); margin-top:5px; font-family:var(--mono)}
.toast-x{
  background:none; border:0; color:var(--ink-3); font-size:17px; line-height:1;
  cursor:pointer; padding:0 2px; flex:0 0 auto;
}
.toast-x:hover{color:var(--ink)}
@media (max-width:640px){ .toast-stack{right:10px; left:10px; bottom:10px; width:auto} }
@media (prefers-reduced-motion: reduce){ .toast{transition:opacity .2s} }

/* alert checkboxes */
.alert-opts{display:flex; flex-direction:column; gap:9px}
.chk{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2); cursor:pointer}
.chk input{width:15px; height:15px; min-height:0; accent-color:var(--gold); cursor:pointer}
.chk:hover{color:var(--ink)}

/* ---------- NSE flow ---------- */
.nse-name{font-size:10px; color:var(--ink-3); font-weight:400; margin-top:2px; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vol-cell{display:flex; align-items:center; gap:8px; justify-content:flex-end}
.vol-bar{display:block; width:62px; height:5px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; flex:0 0 auto}
.vol-bar span{display:block; height:100%; border-radius:3px}
.pill.sig-buy{background:rgba(38,194,129,.2); color:var(--up)}
.pill.sig-acc{background:rgba(38,194,129,.12); color:#7fd8ae}
.pill.sig-sell{background:rgba(240,97,109,.2); color:var(--down)}
.pill.sig-dist{background:rgba(240,97,109,.12); color:#ffb3ba}
.pill.sig-flat{background:rgba(232,179,57,.16); color:#e8c98a}
.pill.sig-normal{background:rgba(122,134,153,.14); color:var(--neutral)}
.flow-bar{display:block; width:110px; height:6px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden}
.flow-bar span{display:block; height:100%; border-radius:3px}
.deal-client{max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px}

/* ---------- deal filter bar ---------- */
.filter-bar{
  display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
  padding:12px 13px; margin-bottom:14px; border-radius:var(--r-sm);
  background:var(--card-2); border:1px solid var(--line-soft);
}
.filter-bar .input{flex:1 1 230px; min-width:180px}
.field-sm{min-width:118px}
.field-sm select,.field-sm input{width:100%}

/* ---------- quick filter presets ---------- */
.quick-bar{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:10px}
.quick-label{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600; margin-right:2px}
.qchip{
  background:var(--card-2); border:1px solid var(--line); color:var(--ink-2);
  padding:6px 12px; border-radius:20px; font-size:12px; cursor:pointer; white-space:nowrap;
  transition:border-color .12s, color .12s, background .12s;
}
.qchip:hover{color:var(--ink); border-color:var(--ink-3)}
.qchip.is-active{background:rgba(224,177,85,.16); border-color:var(--gold); color:var(--gold); font-weight:600}

/* ---------- world map ---------- */
.map-wrap{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--bg-2)}
.world-svg{width:100%; height:auto; display:block}
.map-grid line{stroke:rgba(190,225,255,.10); stroke-width:1}
.map-land path{fill:url(#landG); stroke:#8fb89a; stroke-width:.5; stroke-opacity:.45}
/* Night is a blue-shifted wash, not black — an unlit ocean still scatters light,
   and a pure black half kills every colour underneath it. */
.map-night{fill:#050b1c; fill-opacity:.60; pointer-events:none}
.map-twilight{fill:none; stroke:#ff9d5c; stroke-width:6; stroke-opacity:.5; pointer-events:none}
#map-sun{pointer-events:none}
#map-sunwash{pointer-events:none}
.mk{cursor:pointer}
.mk-dot{fill:var(--neutral); stroke:#08101f; stroke-width:1.5}
.mk-label{fill:#cfe3ff; font-size:11px; font-family:var(--mono); font-weight:600; text-anchor:middle; paint-order:stroke; stroke:#05101f; stroke-width:3.5}
.mk-open .mk-dot{fill:var(--up)}
.mk-open .mk-label{fill:var(--up)}
.mk-open .mk-ring{fill:none; stroke:var(--up); stroke-width:2; opacity:.9; animation:mkPulse 2s ease-out infinite}
.mk-closed .mk-dot{fill:#ff6b7a; opacity:.8}
.mk-closed .mk-label{fill:#ffa7b0; opacity:.75}
.mk-soon .mk-dot{fill:var(--warn)}
.mk-soon .mk-label{fill:var(--warn)}
.mk:hover .mk-dot{stroke:var(--ink); stroke-width:2}
.mk.is-sel .mk-dot{stroke:var(--gold); stroke-width:2.5}
.mk:focus-visible{outline:none}
.mk:focus-visible .mk-dot{stroke:var(--accent); stroke-width:2.5}
@keyframes mkPulse{
  0%{r:4; opacity:.9}
  100%{r:16; opacity:0}
}
.map-legend{display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:11px; font-size:11px; color:var(--ink-3)}
.map-legend span{display:flex; align-items:center; gap:6px}
.lgd{width:9px; height:9px; border-radius:50%; display:inline-block}
.lgd-open{background:var(--up)} .lgd-closed{background:var(--down); opacity:.55}
.lgd-night{background:#050b1c; border:1px solid #2a3a5c; border-radius:2px}
.lgd-sun{background:radial-gradient(circle,#fff6d5,#ffb347); border-radius:50%}
@media (prefers-reduced-motion: reduce){ .mk-open .mk-ring{animation:none; opacity:.35} }