/* ══ DESIGN TOKENS ══ */
:root {
  --bg:         #0d0d0f;
  --bg-el:      #161618;
  --bg-card:    #1a1a1d;
  --bg-hover:   #202024;
  --sep:        rgba(255,255,255,0.07);
  --sep-solid:  #2a2a2e;
  --l1:         rgba(255,255,255,0.92);
  --l2:         rgba(255,255,255,0.50);
  --l3:         rgba(255,255,255,0.28);
  --l4:         rgba(255,255,255,0.12);
  --fill1:      rgba(255,255,255,0.08);
  --fill2:      rgba(255,255,255,0.05);
  --fill3:      rgba(255,255,255,0.04);

  --blue:       #3b82f6;
  --blue-l:     rgba(59,130,246,0.12);
  --green:      #22c55e;
  --green-l:    rgba(34,197,94,0.12);
  --red:        #ef4444;
  --red-l:      rgba(239,68,68,0.10);
  --orange:     #f97316;
  --orange-l:   rgba(249,115,22,0.12);
  --purple:     #a855f7;
  --purple-l:   rgba(168,85,247,0.10);
  --yellow:     #eab308;
  --yellow-l:   rgba(234,179,8,0.12);
  --teal:       #14b8a6;

  --font:  'Mona Sans', -apple-system, sans-serif;
  --mono:  'Geist Mono', monospace;

  --r-xs: 5px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px;
  --sh1: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --sh2: 0 4px 20px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --sh3: 0 20px 60px rgba(0,0,0,.8), 0 8px 20px rgba(0,0,0,.5);
}
[data-theme="light"] {
  --bg:    #f4f4f6;
  --bg-el: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f0f0f4;
  --sep:  rgba(0,0,0,0.07);
  --sep-solid: #e0e0e4;
  --l1:   rgba(0,0,0,0.88);
  --l2:   rgba(0,0,0,0.50);
  --l3:   rgba(0,0,0,0.30);
  --l4:   rgba(0,0,0,0.12);
  --fill1: rgba(0,0,0,0.06);
  --fill2: rgba(0,0,0,0.04);
  --fill3: rgba(0,0,0,0.03);
  --sh1: 0 1px 3px rgba(0,0,0,.08);
  --sh2: 0 4px 16px rgba(0,0,0,.10);
  --sh3: 0 20px 60px rgba(0,0,0,.18);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--l1);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sep-solid);border-radius:8px}

/* ══ LAYOUT ══ */
.app{display:grid;grid-template-columns:220px 1fr;grid-template-rows:52px 1fr;height:100vh;overflow:hidden}

/* ══ TOPBAR ══ */
.topbar{
  grid-column:1/-1;background:rgba(13,13,15,0.88);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--sep);
  display:flex;align-items:center;padding:0 18px;gap:14px;position:sticky;top:0;z-index:400
}
[data-theme="light"] .topbar{background:rgba(244,244,246,0.88)}
.logo{display:flex;align-items:center;gap:9px;min-width:188px;padding-right:14px;border-right:1px solid var(--sep);flex-shrink:0}
.logo-mark{
  width:26px;height:26px;border-radius:7px;flex-shrink:0;
  background:linear-gradient(145deg,#3b82f6,#6366f1);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(99,102,241,0.4)
}
.logo-name{font-size:14px;font-weight:800;letter-spacing:-.04em;color:var(--l1)}
.logo-tag{font-size:10px;font-weight:500;color:var(--l3);letter-spacing:.02em}
.search-wrap{flex:1;max-width:380px;position:relative}
.search-input{
  width:100%;height:32px;background:var(--fill1);border:1px solid var(--sep);
  border-radius:var(--r-sm);padding:0 32px 0 30px;
  font-family:var(--font);font-size:12.5px;color:var(--l1);outline:none;transition:all .2s
}
.search-input:focus{background:var(--bg-el);border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,0.15)}
.search-input::placeholder{color:var(--l3)}
.search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--l3);pointer-events:none}
.search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--bg-el);border-radius:var(--r);box-shadow:var(--sh3);
  border:1px solid var(--sep);overflow:hidden;display:none;z-index:500;
  max-height:300px;overflow-y:auto
}
.search-results.open{display:block}
.sr-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--sep)}
.sr-item:last-child{border-bottom:none}
.sr-item:hover{background:var(--fill1)}
.sr-sym{font-size:12px;font-weight:700;width:52px;color:var(--blue);font-family:var(--mono)}
.sr-name{font-size:12px;color:var(--l2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-type{font-size:10px;background:var(--fill1);padding:2px 6px;border-radius:100px;color:var(--l3);flex-shrink:0}
.tb-right{display:flex;align-items:center;gap:8px;margin-left:auto;padding-left:14px;border-left:1px solid var(--sep)}
.live-badge{display:flex;align-items:center;gap:5px;background:var(--green-l);border:1px solid rgba(34,197,94,0.2);border-radius:100px;padding:3px 9px;font-size:11px;font-weight:600;color:var(--green)}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.4)}50%{opacity:.6;box-shadow:0 0 0 4px rgba(34,197,94,0)}}
.demo-badge{font-size:10px;padding:3px 9px;border-radius:100px;font-weight:700;background:var(--orange-l);color:var(--orange);border:1px solid rgba(249,115,22,.2);letter-spacing:.04em}
.tb-time{font-family:var(--mono);font-size:12px;color:var(--l3);letter-spacing:.04em}

/* Dark/Light toggle */
.theme-btn{
  width:28px;height:28px;border-radius:var(--r-sm);background:var(--fill1);
  border:1px solid var(--sep);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:all .15s;color:var(--l2)
}
.theme-btn:hover{background:var(--fill2);color:var(--l1)}

/* ══ TICKER STRIP ══ */
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-wrap{flex:1;overflow:hidden;mask-image:linear-gradient(to right,transparent,black 24px,black calc(100% - 24px),transparent)}
.ticker-inner{display:flex;gap:22px;animation:ticker 40s linear infinite;white-space:nowrap}
.t-item{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;cursor:pointer}
.t-sym{font-weight:700;color:var(--l1);font-family:var(--mono)}
.t-price{color:var(--l2);font-family:var(--mono)}
.t-chg{font-weight:600;font-family:var(--mono)}

/* ══ SIDEBAR ══ */
.sidebar{
  background:rgba(22,22,24,0.6);backdrop-filter:blur(20px);
  border-right:1px solid var(--sep);padding:14px 8px;
  overflow-y:auto;display:flex;flex-direction:column;gap:4px
}
[data-theme="light"] .sidebar{background:rgba(255,255,255,0.7)}
.nav-section{margin-bottom:18px}
.nav-section-label{font-size:10.5px;font-weight:700;color:var(--l4);text-transform:uppercase;letter-spacing:.08em;padding:0 10px 7px}
.nav-item{
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  border-radius:var(--r-sm);cursor:pointer;color:var(--l2);
  font-size:12.5px;font-weight:500;transition:all .15s;user-select:none
}
.nav-item:hover{background:var(--fill1);color:var(--l1)}
.nav-item.active{background:var(--blue-l);color:var(--blue);font-weight:600}
.nav-item.active .nav-icon{background:var(--blue);color:#fff}
.nav-icon{
  width:22px;height:22px;border-radius:var(--r-xs);
  display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;opacity:.8
}
.nav-badge{margin-left:auto;font-size:9px;font-weight:700;padding:2px 5px;border-radius:100px;background:var(--blue);color:#fff}
.nav-ticker-strip{margin-top:auto;padding-top:14px;border-top:1px solid var(--sep)}
.nt-item{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;cursor:pointer;border-radius:var(--r-xs);transition:background .1s}
.nt-item:hover{background:var(--fill1)}
.nt-sym{font-size:12px;font-weight:700;color:var(--l1);font-family:var(--mono)}
.nt-p{font-family:var(--mono);font-size:11px;color:var(--l2)}
.nt-c{font-family:var(--mono);font-size:11px;font-weight:600}

/* ══ MAIN ══ */
.main{overflow-y:auto;background:var(--bg)}
.page{display:none}
.page.active{display:block;animation:page-in .2s ease}
@keyframes page-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.ph{padding:26px 22px 0}
.ph-title{font-size:26px;font-weight:800;letter-spacing:-.05em;color:var(--l1)}
.ph-sub{font-size:13px;color:var(--l3);margin-top:4px}
.g{padding:14px 22px 22px;display:grid;gap:12px}
.g-2{grid-template-columns:1fr 1fr}
.g-3{grid-template-columns:1fr 1fr 1fr}
.span-2{grid-column:span 2}
.span-3{grid-column:span 3}

/* ══ CARDS ══ */
.card{
  background:var(--bg-card);border-radius:var(--r-lg);
  border:1px solid var(--sep);box-shadow:var(--sh1);overflow:hidden;
  transition:box-shadow .2s
}
.card:hover{box-shadow:var(--sh2)}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px 10px;border-bottom:1px solid var(--sep)
}
.card-title{font-size:12.5px;font-weight:600;color:var(--l1)}
.card-action{font-size:12px;color:var(--blue);font-weight:500;cursor:pointer}
.card-action:hover{opacity:.7}
.card-body{padding:14px 16px}
.card-flush{padding:0}

/* ══ INDEX TILES ══ */
.ix-tile{
  background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--sep);
  padding:14px 16px;transition:all .15s;cursor:pointer;position:relative;overflow:hidden
}
.ix-tile::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--tile-accent,rgba(59,130,246,0.04)),transparent);pointer-events:none}
.ix-tile:hover{border-color:rgba(59,130,246,.3);box-shadow:var(--sh2)}
.ix-label{font-size:10.5px;font-weight:700;color:var(--l3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.ix-value{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--l1)}
.ix-change{font-family:var(--mono);font-size:11px;font-weight:600;margin-top:3px}
.ix-spark{display:block;width:100%;height:28px;margin-top:8px}

/* ══ STAT CARDS ══ */
.stat-card{background:var(--bg-card);border:1px solid var(--sep);border-radius:var(--r-lg);padding:14px 16px}
.stat-label{font-size:10.5px;font-weight:700;color:var(--l3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
.stat-value{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--l1)}
.stat-sub{font-size:11px;color:var(--l3);margin-top:3px}

/* ══ COLORS ══ */
.up{color:var(--green)}
.dn{color:var(--red)}
.neu{color:var(--l3)}

/* ══ PILLS ══ */
.pill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:100px;letter-spacing:.02em;display:inline-block}
.pill-green{background:var(--green-l);color:var(--green)}
.pill-red{background:var(--red-l);color:var(--red)}
.pill-blue{background:var(--blue-l);color:var(--blue)}
.pill-orange{background:var(--orange-l);color:var(--orange)}
.pill-purple{background:var(--purple-l);color:var(--purple)}
.pill-yellow{background:var(--yellow-l);color:var(--yellow)}

/* ══ BUTTONS ══ */
.btn{
  font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;
  border:none;border-radius:var(--r-sm);padding:8px 14px;transition:all .15s;display:inline-flex;align-items:center;gap:5px
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#2563eb}
.btn-secondary{background:var(--fill1);color:var(--l1);border:1px solid var(--sep)}
.btn-secondary:hover{background:var(--fill2)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:#16a34a}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#dc2626}
.btn-sm{padding:5px 10px;font-size:11.5px}

/* ══ TABLE ══ */
.t{width:100%;border-collapse:collapse;font-size:12.5px}
.t th{font-size:10.5px;font-weight:700;color:var(--l3);text-transform:uppercase;letter-spacing:.05em;padding:8px 12px;border-bottom:1px solid var(--sep);text-align:left;white-space:nowrap}
.t td{padding:9px 12px;border-bottom:1px solid var(--sep)}
.t tr:last-child td{border-bottom:none}
.t tbody tr{transition:background .1s;cursor:pointer}
.t tbody tr:hover td{background:var(--fill1)}
.t .mono{font-family:var(--mono)}

/* ══ HEATMAP ══ */
.heatmap{display:grid;gap:3px;grid-template-columns:repeat(5,1fr)}
.hm-cell{
  border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;
  transition:all .2s;border:1px solid transparent
}
.hm-cell:hover{border-color:var(--l4);transform:scale(1.02)}
.hm-name{font-size:11px;font-weight:700;color:rgba(255,255,255,0.9);margin-bottom:2px}
.hm-val{font-size:11px;font-weight:600;color:rgba(255,255,255,0.75);font-family:var(--mono)}

/* ══ STOCKS PAGE ══ */
.stocks-layout{display:grid;grid-template-columns:260px 1fr;gap:0;height:calc(100vh - 52px)}
.sk-list{overflow-y:auto;border-right:1px solid var(--sep);padding:12px 8px}
.sk-search{display:flex;align-items:center;gap:8px;background:var(--fill1);border:1px solid var(--sep);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:8px}
.sk-search input{background:none;border:none;outline:none;font-family:var(--font);font-size:13px;color:var(--l1);flex:1}
.sk-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;transition:background .1s;margin-bottom:2px}
.sk-row:hover{background:var(--fill1)}
.sk-row.active{background:var(--blue-l)}
.sk-logo{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0}
.sk-info{flex:1;min-width:0}
.sk-sym{font-size:13px;font-weight:700;color:var(--l1);font-family:var(--mono)}
.sk-name{font-size:11px;color:var(--l3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-price-col{text-align:right;flex-shrink:0}
.sk-pv{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--l1)}
.sk-pc{font-family:var(--mono);font-size:11px;font-weight:600}
.chart-container{background:var(--bg-card);border-bottom:1px solid var(--sep);padding-bottom:0}
.chart-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 12px}
.chart-sym{font-size:18px;font-weight:800;letter-spacing:-.03em}
.chart-price{font-family:var(--mono);font-size:24px;font-weight:600;transition:color .3s}
.chart-change{font-family:var(--mono);font-size:12px;font-weight:600}
.tf-btns{display:flex;gap:2px}
.tf-btn{padding:4px 9px;font-size:11.5px;font-weight:600;border-radius:var(--r-xs);border:none;background:transparent;color:var(--l3);cursor:pointer;font-family:var(--font);transition:all .12s}
.tf-btn:hover{background:var(--fill1);color:var(--l1)}
.tf-btn.active{background:var(--blue);color:#fff}
#tvChart{width:100%;height:300px}

/* ══ JOURNAL ══ */
.jnl-layout{display:grid;grid-template-columns:1fr 300px;gap:14px}
.jnl-inp,.jnl-sel,.jnl-ta{
  width:100%;background:var(--fill1);border:1px solid var(--sep);border-radius:var(--r-sm);
  padding:9px 12px;font-family:var(--font);font-size:12.5px;color:var(--l1);outline:none;transition:all .15s
}
.jnl-inp:focus,.jnl-sel:focus,.jnl-ta:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.12);background:var(--bg-el)}
.jnl-ta{resize:vertical;min-height:68px}
.jnl-label{font-size:10.5px;font-weight:700;color:var(--l3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;display:block}
.jnl-sel option{background:var(--bg-el);color:var(--l1)}
.trade-card{
  background:var(--bg-card);border:1px solid var(--sep);border-radius:var(--r);
  padding:11px 14px;display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:8px;cursor:pointer;transition:all .15s;margin-bottom:5px
}
.trade-card:hover{box-shadow:var(--sh2);border-color:var(--blue)}
.dir-badge{padding:3px 9px;border-radius:100px;font-size:10.5px;font-weight:800;letter-spacing:.04em}
.dir-long{background:var(--green-l);color:var(--green)}
.dir-short{background:var(--red-l);color:var(--red)}

/* ══ MACRO TILES ══ */
.macro-tile{
  background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--sep);
  padding:18px 20px;cursor:pointer;transition:all .15s;box-shadow:var(--sh1)
}
.macro-tile:hover{box-shadow:var(--sh2)}
.mt-icon{font-size:20px;margin-bottom:8px}
.mt-label{font-size:10.5px;font-weight:700;color:var(--l3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.mt-value{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:-.03em;color:var(--l1);transition:all .4s}
.mt-trend{font-size:11.5px;font-weight:600;margin-top:3px}
.mt-context{font-size:11.5px;color:var(--l3);margin-top:7px;line-height:1.5}

/* ══ MODAL ══ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:600;display:none;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--bg-el);border-radius:var(--r-xl);padding:24px 26px;max-width:500px;width:92%;box-shadow:var(--sh3);border:1px solid var(--sep);animation:modal-in .22s cubic-bezier(.34,1.56,.64,1);max-height:85vh;overflow-y:auto}
.modal-lg{max-width:680px}
@keyframes modal-in{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
.modal-title{font-size:18px;font-weight:800;letter-spacing:-.03em;margin-bottom:18px}
.modal-close{float:right;background:var(--fill1);border:none;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:14px;color:var(--l2);display:flex;align-items:center;justify-content:center;transition:background .12s;margin-top:-4px}
.modal-close:hover{background:var(--fill2)}

/* ══ AI CARDS ══ */
.ai-card{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--sep);padding:16px 18px;cursor:pointer;transition:all .18s;box-shadow:var(--sh1)}
.ai-card:hover{box-shadow:var(--sh2);transform:translateY(-2px);border-color:var(--blue)}
.ai-type{font-size:10px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px}
.ai-title{font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--l1);margin-bottom:7px;line-height:1.35}
.ai-body{font-size:12px;color:var(--l2);line-height:1.6;margin-bottom:12px}
.ai-conf-row{display:flex;align-items:center;gap:8px;padding-top:11px;border-top:1px solid var(--sep)}
.ai-conf-bar{flex:1;height:3px;background:var(--fill1);border-radius:100px;overflow:hidden}
.ai-conf-fill{height:100%;border-radius:100px}

/* ══ NARR ══ */
.narr-row{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--sep)}
.narr-row:last-child{border-bottom:none}
.narr-bar{width:3px;border-radius:100px;flex-shrink:0;align-self:stretch}
.narr-body{flex:1}
.narr-title{font-size:13.5px;font-weight:700;color:var(--l1);margin-bottom:3px}
.narr-desc{font-size:12px;color:var(--l2);line-height:1.55}
.narr-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.ntag{font-size:10px;padding:2px 7px;border-radius:100px;background:var(--fill1);color:var(--l3);font-weight:500}

/* ══ FLOW ══ */
.flow-row{padding:9px 0;border-bottom:1px solid var(--sep)}
.flow-row:last-child{border-bottom:none}
.flow-top{display:flex;justify-content:space-between;margin-bottom:5px}
.flow-name{font-size:12.5px;font-weight:600;color:var(--l1)}
.flow-val{font-family:var(--mono);font-size:12px;font-weight:700}
.flow-bar{height:3px;background:var(--fill1);border-radius:100px;overflow:hidden}
.flow-fill{height:100%;border-radius:100px;transition:width .8s ease}

/* ══ NEWS ══ */
.news-item{padding:10px 16px;border-bottom:1px solid var(--sep);cursor:pointer;transition:background .1s}
.news-item:hover{background:var(--fill1)}
.news-item:last-child{border-bottom:none}
.news-cat{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.news-headline{font-size:12px;font-weight:600;color:var(--l1);line-height:1.45;margin-bottom:3px}
.news-time{font-size:10px;color:var(--l4)}

/* ══ RISK ══ */
.risk-item{display:flex;align-items:flex-start;gap:11px;padding:12px;border-radius:var(--r);margin-bottom:7px;border:1px solid}
.risk-high{background:rgba(239,68,68,.04);border-color:rgba(239,68,68,.18)}
.risk-med{background:rgba(249,115,22,.04);border-color:rgba(249,115,22,.18)}
.risk-low{background:rgba(59,130,246,.04);border-color:rgba(59,130,246,.18)}
.risk-ok{background:rgba(34,197,94,.04);border-color:rgba(34,197,94,.18)}
.risk-title{font-size:12.5px;font-weight:700;margin-bottom:2px;color:var(--l1)}
.risk-desc{font-size:11.5px;color:var(--l2);line-height:1.5}

/* ══ EARNINGS ══ */
.earn-bar{height:4px;background:var(--fill1);border-radius:100px;overflow:hidden;margin-top:3px}
.earn-fill{height:100%;border-radius:100px}

/* ══ HERO ══ */
.hero-card{
  background:linear-gradient(135deg,#0a1628,#1a1f3a);
  border-radius:var(--r-xl);padding:32px 36px;
  display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;
  position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.06)
}
.hero-card::before{content:'';position:absolute;top:-80px;right:-80px;width:360px;height:360px;background:radial-gradient(circle,rgba(59,130,246,.12),transparent 70%);pointer-events:none}
.hero-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:rgba(59,130,246,.8);text-transform:uppercase;margin-bottom:10px}
.hero-title{font-size:30px;font-weight:800;letter-spacing:-.05em;color:#fff;line-height:1.15;margin-bottom:14px}
.hero-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:18px}
.hero-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hero-metric{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);padding:13px 15px}
.hm-l{font-size:10.5px;color:rgba(255,255,255,.45);margin-bottom:4px}
.hm-v{font-family:var(--mono);font-size:20px;font-weight:700;color:#fff}

/* ══ FLASH ANIMS ══ */
@keyframes flash-up{0%{color:var(--green)}100%{color:inherit}}
@keyframes flash-dn{0%{color:var(--red)}100%{color:inherit}}
.flash-up{animation:flash-up 1.4s ease}
.flash-dn{animation:flash-dn 1.4s ease}

/* ══ ROW ITEM ══ */
.row-item{display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid var(--sep)}
.row-item:last-child{border-bottom:none}

/* ══ DEMO NOTICE ══ */
.demo-notice{
  display:flex;align-items:center;gap:10px;
  background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);
  border-radius:var(--r);padding:10px 14px;margin-bottom:0;
  font-size:12px;color:var(--orange)
}
.demo-notice strong{font-weight:700}

/* ══ FX MACRO ══ */
.badge-neut{background:rgba(255,255,255,.06);color:var(--l3)}
#fxm-overview-strip .card:hover{transform:translateY(-2px);transition:all .2s}
#fxm-ind-table thead th{background:var(--bg-el);position:sticky;top:0;z-index:2}

/* FX Macro Subfunctions CSS */
.fxm-section-label{font-size:10.5px;font-weight:700;color:var(--l4);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.fxm-signal-bar-wrap{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.fxm-signal-bar-wrap>div{flex:1;height:6px;background:var(--fill1);border-radius:100px;overflow:hidden;display:flex}
.fxm-sig-bar{display:block}
.fxm-sig-counts{display:flex;gap:14px}
.fxm-sig-lbl{font-size:10px;color:var(--l4)}
.fxm-sig-val{font-family:var(--mono);font-size:14px;font-weight:700}
.fxm-agreement{margin-top:8px;font-size:11.5px;color:var(--l3)}
.fxm-agreement-val{font-weight:700;color:var(--l1)}
.fxm-score-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--sep)}
.fxm-score-period{font-size:12px;color:var(--l3)}
.fxm-score-num{font-family:var(--mono);font-size:12px;font-weight:700}
.fxm-scenarios-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.fxm-sc-card{background:var(--fill1);border-radius:var(--r);padding:14px}
.fxm-sc-label{font-size:11px;font-weight:700;margin-bottom:5px}
.fxm-sc-prob{font-family:var(--mono);font-size:20px;font-weight:700;margin-bottom:5px}
.fxm-sc-pcts{display:flex;gap:10px;margin-bottom:8px}
.fxm-sc-period{font-size:9px;color:var(--l4)}
.fxm-sc-pct{font-family:var(--mono);font-size:12px;font-weight:700}
.fxm-sc-kat{font-size:11px;color:var(--l3);line-height:1.5}
.fxm-driver-row{padding-left:12px}
.fxm-driver-body{flex:1}
.fxm-driver-meta{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.fxm-driver-info{font-size:10px;color:var(--l4)}
.fxm-driver-name{font-size:12.5px;font-weight:600}
.fxm-driver-val{font-family:var(--mono);font-size:11px;color:var(--l3);margin-top:2px}
.fxm-driver-desc{font-size:11px;color:var(--l3);margin-top:2px}
.fxm-risk-row{}
.fxm-risk-icon{font-size:14px;flex-shrink:0}
.fxm-risk-text{font-size:12.5px;color:var(--l2)}
.fxm-cat-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fxm-cat-name{font-size:11.5px;font-weight:600;width:140px;flex-shrink:0}
.fxm-cat-bar-wrap{flex:1;height:5px;background:var(--fill1);border-radius:100px;overflow:hidden;display:flex}
.fxm-cat-val{font-family:var(--mono);font-size:11px;font-weight:700;width:40px;text-align:right}
.fxm-empty{padding:16px;color:var(--l4);font-size:12px;text-align:center}

/* Regime Engine classes */
.re-asset-name{font-family:var(--mono);font-size:14px;font-weight:800}
.re-asset-price{font-family:var(--mono);font-size:20px;font-weight:700;margin-bottom:4px}
.re-asset-chg{font-family:var(--mono);font-size:12px;font-weight:600;margin-bottom:10px}
.re-section-hdr{font-size:10.5px;color:var(--l3);margin-bottom:3px;display:flex;justify-content:space-between}
.re-gauge-track{height:4px;background:var(--fill1);border-radius:100px;overflow:hidden}
.re-gauge-fill{height:100%;border-radius:100px}
.re-hmm-labels{display:flex;justify-content:space-between;margin-top:2px}
.re-hmm-lbl{font-size:9px;color:var(--l4)}
.re-filter-status{font-size:11px;font-weight:700;text-align:center;padding:4px 0;border-top:1px solid var(--sep);margin-top:4px}

/* Watchlist */
.wl-sym{font-family:var(--mono);font-size:14px;font-weight:800}
.wl-price{font-family:var(--mono);font-size:20px;font-weight:700;margin-bottom:4px}
.wl-chg{font-family:var(--mono);font-size:12px;font-weight:600;margin-bottom:10px}

/* Common utility patterns */
.row-center{display:flex;justify-content:center;align-items:center}
.col-gap-8{display:flex;flex-direction:column;gap:8px}
.grid-2-eq{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sticky-top{position:sticky;top:0;z-index:2;background:var(--bg-el)}
.text-mono-sm{font-family:var(--mono);font-size:11px}
.text-mono-md{font-family:var(--mono);font-size:13px;font-weight:600}
.label-xs{font-size:10px;font-weight:700;color:var(--l4);text-transform:uppercase;letter-spacing:.06em}
.separator-h{border-top:1px solid var(--sep);margin:8px 0}
.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:100px;font-size:10px;font-weight:700}

/* ══ UTILITY CLASSES (ersetzt 100+ Inline-Styles) ══ */
/* Text */
.txt-xs   { font-size:10.5px }
.txt-sm   { font-size:11.5px }
.txt-base { font-size:12.5px }
.txt-md   { font-size:13px }
.txt-muted{ color:var(--l3) }
.txt-dim  { color:var(--l4) }
.txt-mono { font-family:var(--mono) }
.txt-700  { font-weight:700 }
.txt-800  { font-weight:800 }
.lh-6     { line-height:1.6 }
.lh-7     { line-height:1.7 }
.lh-8     { line-height:1.8 }
.ls-wide  { letter-spacing:.07em }
.label-xs { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--l4) }
.label-sm { font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--l4) }
/* Spacing */
.mb-4  { margin-bottom:4px }
.mb-6  { margin-bottom:6px }
.mb-8  { margin-bottom:8px }
.mb-10 { margin-bottom:10px }
.mb-12 { margin-bottom:12px }
.mb-14 { margin-bottom:14px }
.mt-8  { margin-top:8px }
.mt-10 { margin-top:10px }
.mt-12 { margin-top:12px }
.mt-14 { margin-top:14px }
.p-12  { padding:12px }
.p-14  { padding:14px }
.p-16  { padding:16px }
/* Flex */
.flex         { display:flex }
.flex-col     { display:flex;flex-direction:column }
.flex-center  { display:flex;align-items:center }
.flex-between { display:flex;align-items:center;justify-content:space-between }
.flex-end     { display:flex;justify-content:flex-end }
.gap-6        { gap:6px }
.gap-8        { gap:8px }
.gap-10       { gap:10px }
.gap-12       { gap:12px }
.gap-14       { gap:14px }
.flex-1       { flex:1 }
.shrink-0     { flex-shrink:0 }
/* Grid helpers */
.g-2col       { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.g-3col       { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px }
.g-4col       { display:grid;grid-template-columns:repeat(4,1fr);gap:10px }
.g-flush      { display:grid;gap:12px;padding:0 }
/* Backgrounds / Borders */
.fill-1       { background:var(--fill1) }
.fill-2       { background:var(--fill2) }
.radius       { border-radius:var(--r) }
.radius-sm    { border-radius:var(--r-sm) }
.sep-line     { border-bottom:1px solid var(--sep) }
/* stat display */
.stat-block   { text-align:center }
.stat-label   { font-size:10.5px;color:var(--l4);margin-bottom:4px }
.stat-value   { font-family:var(--mono);font-size:20px;font-weight:700 }
/* row items */
.row-item     { display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--sep) }
.row-item:last-child { border-bottom:none }
/* pills */
.pill         { display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;letter-spacing:.04em }
.pill-green   { background:var(--green-l);color:var(--green) }
.pill-red     { background:var(--red-l);color:var(--red) }
.pill-orange  { background:var(--orange-l);color:var(--orange) }
.pill-blue    { background:var(--blue-l);color:var(--blue) }
.pill-purple  { background:var(--purple-l);color:var(--purple) }
/* card variants */
.card-metric  { background:var(--fill1);border-radius:var(--r);padding:14px 16px }
.card-metric .metric-label { font-size:10.5px;color:var(--l4);margin-bottom:5px }
.card-metric .metric-val   { font-family:var(--mono);font-size:22px;font-weight:700 }
/* section headers inside cards */
.section-title { font-size:11px;font-weight:700;color:var(--l3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px }
/* ph helpers */
.ph-row   { display:flex;align-items:flex-end;justify-content:space-between }
.ph-actions { padding-bottom:0;display:flex;gap:8px;align-items:center }
/* demo notice */
.demo-notice  { display:flex;gap:8px;align-items:flex-start;padding:10px 14px;background:rgba(249,115,22,.07);border:1px solid rgba(249,115,22,.15);border-radius:var(--r-sm);font-size:12px;color:var(--orange) }
/* nav badge */
.nav-badge    { font-size:9px;font-weight:700;background:var(--blue-l);color:var(--blue);padding:1px 5px;border-radius:100px;margin-left:auto }
/* chip */
.chip         { font-size:9.5px;padding:1px 7px;border-radius:100px;font-weight:700 }
/* progress bars */
.prog-track   { height:5px;background:var(--fill1);border-radius:100px;overflow:hidden }
.prog-bar     { height:100%;border-radius:100px;transition:width .4s }
/* ══ RESPONSIVE ══ */
@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{display:none}.stocks-layout{grid-template-columns:1fr}}