:root{
  color-scheme: dark;
  --ground:#05070A; --ground-2:#080B0F;
  --glass:#0D1318; --glass-2:#121A20; --glass-3:#18232B;
  --line:#1A242B; --line-2:#27353E;
  --text:#E6EDEF; --muted:#7E8D95; --faint:#4B5A62;
  --win:#3DF5A0; --win-dim:rgba(61,245,160,.13);
  --loss:#FF5470; --loss-dim:rgba(255,84,112,.13);
  --amber:#FFB547; --amber-dim:rgba(255,181,71,.13);
  --cyan:#4CD8FF; --cyan-dim:rgba(76,216,255,.12);
  --violet:#A98BFF; --gold:#F2C14E; --orange:#FF8A3D; --steel:#9BB0BA;
  --state:var(--win); --state-dim:var(--win-dim);
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--body);font-size:14px;padding-inline:16px;
  background-image:radial-gradient(900px 600px at 38% 45%,rgba(61,245,160,.07),transparent 70%)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:8px}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- stage ---------- */
.stage{min-height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:64px;padding-block:28px}
.phone{position:relative;flex:none;width:390px;height:812px;border-radius:48px;background:var(--ground-2);overflow:hidden;
  box-shadow:0 0 0 9px #0B1014,0 0 0 10px var(--line-2),0 50px 120px -30px rgba(61,245,160,.22)}
.about{max-width:340px;display:flex;flex-direction:column;gap:18px}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--win);margin:0}
.about h1{font:800 40px/1.02 var(--display);letter-spacing:-.01em;margin:0;text-wrap:balance}
.about p{color:var(--muted);line-height:1.55;margin:0}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.facts li{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:baseline;color:var(--muted);line-height:1.45;padding-top:10px;border-top:1px solid var(--line)}
.facts b{font:700 15px/1 var(--display);color:var(--text)}

/* ---------- app shell ---------- */
.app{position:absolute;inset:0;display:flex;flex-direction:column}
.sbar{flex:none;display:flex;justify-content:space-between;align-items:center;padding:16px 30px 4px;font:600 13px var(--body);color:var(--text)}
.sbar svg{height:12px;width:auto;fill:var(--text)}
.top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px 12px}
.brand{display:flex;align-items:center;gap:10px}
.word{font:800 22px/1 var(--display);letter-spacing:.14em}
.live{width:8px;height:8px;border-radius:50%;background:var(--state);box-shadow:0 0 12px var(--state)}
.pill{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--state);background:var(--state-dim);padding:7px 10px;border-radius:99px;white-space:nowrap}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;color:var(--muted)}
.icon-btn:hover{color:var(--text);background:var(--glass-2)}
.icon-btn svg,.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.screens{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.screens::-webkit-scrollbar{display:none}
.screen{padding:2px 16px 28px;display:flex;flex-direction:column;gap:18px}
.tabs{flex:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:rgba(8,11,15,.94);padding:8px 6px 12px}
.tab{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 0;color:var(--faint);font:600 10.5px/1 var(--body);letter-spacing:.04em}
.tab[aria-selected="true"]{color:var(--text)}
.tab[aria-selected="true"] svg{stroke:var(--win);filter:drop-shadow(0 0 6px rgba(61,245,160,.55))}

.label{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
.row-head{display:flex;justify-content:space-between;align-items:baseline}
.sample{font:400 11.5px/1.45 var(--body);color:var(--faint);margin:0}

/* ---------- pulse ---------- */
.clock{text-align:center;margin:0}
.ring-wrap{display:grid;place-items:center;margin-top:-6px}
.ring{width:236px;height:236px;display:block}
.ring .track{fill:none;stroke:var(--line);stroke-width:1}
.ring .tick{stroke:var(--line-2);stroke-width:1}
.ring .tick.major{stroke:var(--faint)}
.ring .arc{fill:none;stroke:var(--state);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--state))}
.ring .spin{transform-origin:120px 120px;animation:spin 7s linear infinite}
.ring .core-a{stop-color:var(--state);stop-opacity:.20}
.ring .core-b{stop-color:var(--state);stop-opacity:0}
.ring .ecg-ghost{fill:none;stroke:var(--state);stroke-opacity:.18;stroke-width:1.6;stroke-linejoin:round}
.ring .ecg-live{fill:none;stroke:var(--state);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:30 100;animation:trace 1.7s linear infinite;filter:drop-shadow(0 0 5px var(--state))}
.ring .state-word{font:700 11px var(--mono);letter-spacing:.24em;fill:var(--state)}
.ring .state-sub{font:400 10px var(--mono);fill:var(--muted)}
.stage[data-state="quiet"] .ring .ecg-live{animation-duration:3.6s}
.stage[data-state="down"] .ring .ecg-live{animation:none;stroke-dasharray:none}
.stage[data-state="down"] .ring .spin{animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes trace{from{stroke-dashoffset:30}to{stroke-dashoffset:-100}}

.calls{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--glass)}
.call-row{display:flex;gap:8px}
.call{flex:1;display:flex;flex-direction:column;gap:6px;padding:9px 10px;border-radius:12px;background:var(--glass-2);text-align:left}
.call b{font:700 10px/1 var(--mono);letter-spacing:.14em}
.call span{font:500 12px/1.2 var(--body);color:var(--muted)}
.call.ok b{color:var(--win)} .call.veto b{color:var(--amber)}
.streak{display:flex;align-items:center;gap:8px;font:400 12px/1.3 var(--body);color:var(--muted)}
.dots{display:flex;gap:4px}
.dots i{width:18px;height:5px;border-radius:3px;background:var(--line-2)}
.dots i.on{background:var(--amber)}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{padding:14px;border-radius:18px;background:var(--glass);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-width:0}
.tile.wide{grid-column:1/-1}
.big{font:700 21px/1 var(--display);letter-spacing:-.01em}
.sub{font:400 12px/1.35 var(--body);color:var(--muted)}
.win{color:var(--win)} .loss{color:var(--loss)} .amb{color:var(--amber)}
.meter{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--cyan);border-radius:3px}
.ladder{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;align-items:end;height:40px;margin-top:2px}
.rung{border-radius:3px 3px 1px 1px;background:var(--line)}
.rung.now{background:var(--win);box-shadow:0 0 10px rgba(61,245,160,.6)}
.rung.peak{background:transparent;border:1px solid var(--win)}
.rung.goal{background:transparent;border:1px dashed var(--gold)}
.ladder-legend{display:flex;justify-content:space-between;font:400 10.5px var(--mono);color:var(--faint)}
.ladder-legend .g{color:var(--gold)}

.trades{display:flex;flex-direction:column;gap:8px}
.trade{padding:12px 14px;border-radius:16px;background:var(--glass);border:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.trade-top{display:flex;align-items:center;gap:6px}
.sym{font:700 14px/1 var(--mono);letter-spacing:.02em;margin-right:2px}
.chip{font:600 9.5px/1 var(--mono);letter-spacing:.12em;padding:4px 6px;border-radius:6px;background:var(--glass-3);color:var(--muted);text-transform:uppercase}
.chip.long{color:var(--win);background:var(--win-dim)} .chip.short{color:var(--loss);background:var(--loss-dim)}
.chip.be{color:var(--cyan);background:var(--cyan-dim)}
.pnl{margin-left:auto;font:700 13px/1 var(--mono)}
.range{position:relative;height:6px;border-radius:4px;background:linear-gradient(90deg,var(--loss-dim),var(--line) 45%,var(--win-dim))}
.range .fill{position:absolute;top:0;bottom:0;background:var(--win);opacity:.55;border-radius:4px}
.range .mk{position:absolute;top:-4px;width:2px;height:14px;background:var(--text);opacity:.55;transform:translateX(-1px);border-radius:1px}
.range .now{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--win);transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--ground-2),0 0 10px var(--win)}
.range-labels{display:flex;justify-content:space-between;font:400 10.5px/1 var(--mono);color:var(--faint)}

.demo{padding:14px;border:1px dashed var(--line-2);border-radius:18px;display:flex;flex-direction:column;gap:10px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{font:600 11.5px/1 var(--body);padding:8px 11px;border-radius:10px;background:var(--glass-2);color:var(--muted);border:1px solid var(--line)}
.seg button[aria-pressed="true"]{color:var(--ground);background:var(--text);border-color:var(--text)}

/* ---------- feed ---------- */
.filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;font:600 12px/1 var(--body);padding:8px 12px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted)}
.filters button[aria-pressed="true"]{background:var(--text);color:var(--ground);border-color:var(--text)}
.events{display:flex;flex-direction:column;gap:8px}
.ev{display:grid;grid-template-columns:54px 1fr;gap:10px;padding:12px 14px 12px 12px;border-radius:16px;background:var(--glass);border:1px solid var(--line)}
.ev-time{font:500 10.5px/1.3 var(--mono);color:var(--faint);padding-top:2px}
.ev-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.ev-head{display:flex;align-items:center;gap:6px}
.tag{font:700 9.5px/1 var(--mono);letter-spacing:.14em;padding:4px 6px;border-radius:6px}
.tag.t-fill{color:var(--win);background:var(--win-dim)}
.tag.t-pend{color:var(--cyan);background:var(--cyan-dim)}
.tag.t-veto{color:var(--amber);background:var(--amber-dim)}
.tag.t-exit{color:var(--steel);background:var(--glass-3)}
.tag.t-win{color:var(--win);background:var(--win-dim)}
.tag.t-loss{color:var(--loss);background:var(--loss-dim)}
.ev-desk{font:500 9.5px/1 var(--mono);letter-spacing:.12em;color:var(--faint)}
.bell{margin-left:auto;color:var(--win);display:flex}
.bell svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.ev-title{font:600 14px/1.3 var(--body)}
.ev-body{font:400 12px/1.45 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.ev-meta{font:400 10.5px/1.4 var(--mono);color:var(--faint);overflow-wrap:anywhere}
.why{align-self:flex-start;font:600 12px/1 var(--body);color:var(--cyan);padding:7px 10px;border-radius:9px;background:var(--cyan-dim)}
.chart{border-radius:10px;background:var(--ground-2);border:1px solid var(--line);overflow:hidden}
.chart svg{display:block;width:100%;height:auto}

/* ---------- agents / chat ---------- */
.agent-list{display:flex;flex-direction:column}
.agent{display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);text-align:left;width:100%}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--display);color:var(--text);
  background:radial-gradient(circle at 30% 25%,var(--glass-3),var(--glass));box-shadow:inset 0 0 0 1.5px var(--hue),0 0 14px -4px var(--hue)}
.av.sm{width:30px;height:30px;font-size:10px}
.agent-name{font:600 15px/1.2 var(--body)}
.agent-model{font:400 10.5px/1.2 var(--mono);color:var(--faint);margin-left:6px}
.agent-last{font:400 12.5px/1.35 var(--body);color:var(--muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px}
.agent-time{font:400 10.5px/1 var(--mono);color:var(--faint);align-self:start;padding-top:4px}
.thread-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.thread-head .t-name{font:600 15px/1.2 var(--body)}
.thread-head .t-model{font:400 10.5px/1.2 var(--mono);color:var(--faint)}
.msgs{display:flex;flex-direction:column;gap:10px}
.msg{max-width:84%;padding:10px 13px;border-radius:18px;font:400 14px/1.45 var(--body)}
.msg.me{align-self:flex-end;background:var(--text);color:var(--ground);border-bottom-right-radius:6px}
.msg.them{align-self:flex-start;background:var(--glass-2);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg .who{display:block;font:600 11px/1 var(--mono);letter-spacing:.06em;margin-bottom:6px;color:var(--hue)}
.msg .n{font-family:var(--mono);font-size:12.5px}
.typing{display:inline-flex;gap:4px;padding:4px 2px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.quick{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick button{flex:none;font:500 12px/1 var(--body);padding:8px 11px;border-radius:99px;border:1px solid var(--line-2);color:var(--text)}
.composer{display:flex;gap:8px;align-items:center}
.composer input{flex:1;min-width:0;height:42px;border-radius:21px;border:1px solid var(--line-2);background:var(--glass);color:var(--text);padding:0 16px;font:400 14px var(--body)}
.composer input::placeholder{color:var(--faint)}
.round{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--glass-2);border:1px solid var(--line-2);color:var(--text)}
.round.go{background:var(--win);border-color:var(--win);color:var(--ground)}
.round svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.room-heads{display:flex}
.room-heads .av{margin-left:-8px;box-shadow:inset 0 0 0 1.5px var(--hue),0 0 0 2px var(--ground-2)}
.room-heads .av:first-child{margin-left:0}

/* ---------- settings ---------- */
.set-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--glass);overflow:hidden}
.set{display:flex;flex-direction:column;gap:9px;padding:13px 14px;border-bottom:1px solid var(--line)}
.set:last-child{border-bottom:0}
.set-title{font:600 14px/1.25 var(--body)}
.set-note{font:400 12px/1.4 var(--body);color:var(--muted)}
.mini-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;align-self:flex-start}
.mini-seg button{font:600 11.5px/1 var(--body);padding:7px 12px;color:var(--muted)}
.mini-seg button[aria-pressed="true"]{background:var(--win);color:var(--ground)}
.mini-seg button[data-v="off"][aria-pressed="true"]{background:var(--line-2);color:var(--text)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--muted)}
.kv span:last-child{font-family:var(--mono);font-size:12px;text-align:right}

/* ---------- push + sheet ---------- */
.push{position:absolute;left:10px;right:10px;top:44px;z-index:20;padding:12px 14px;border-radius:22px;background:rgba(24,33,40,.97);border:1px solid var(--line-2);
  box-shadow:0 18px 50px rgba(0,0,0,.6);transform:translateY(-140%);transition:transform .45s cubic-bezier(.2,.9,.25,1.1);display:flex;flex-direction:column;gap:8px}
.push.show{transform:translateY(0)}
.push-app{display:flex;align-items:center;gap:8px;font:500 11.5px/1 var(--body);color:var(--muted)}
.push-ico{width:18px;height:18px;border-radius:5px;background:var(--ground);box-shadow:inset 0 0 0 1px var(--win);display:grid;place-items:center;font:800 7px/1 var(--display);color:var(--win);letter-spacing:.04em}
.push-title{font:700 14px/1.25 var(--body)}
.push-body{font:400 13px/1.4 var(--body);color:var(--muted)}
.push-acts{display:flex;gap:16px;padding-top:2px}
.push-acts button{font:700 12.5px/1 var(--body);color:var(--win)}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:30;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:31;max-height:78%;overflow-y:auto;background:var(--glass);border-top:1px solid var(--line-2);border-radius:26px 26px 0 0;
  padding:10px 18px 24px;transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.9,.25,1);display:flex;flex-direction:column;gap:14px}
.sheet.show{transform:translateY(0)}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line-2);align-self:center}
.sheet h2{font:700 18px/1.2 var(--display);margin:0;text-wrap:balance}
.src{font:400 11px/1.4 var(--mono);color:var(--faint);margin:0}
.quote{font:400 14px/1.55 var(--body);margin:0;padding:12px 14px;border-radius:14px;background:var(--glass-2);border:1px solid var(--line)}
.plan{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.plan dt{font:400 12px var(--body);color:var(--muted)}
.plan dd{margin:0;font:500 12.5px var(--mono);text-align:right}

@media (prefers-reduced-motion: reduce){
  .ring .spin,.ring .ecg-live,.typing i{animation:none}
  .ring .ecg-live{stroke-dasharray:none}
  .push,.sheet,.scrim{transition:none}
}
@media (max-width:820px){
  body{padding-inline:0;background-image:none}
  .stage{display:block;padding:0;height:100%;min-height:0}
  .phone{width:100%;height:100%;border-radius:0;box-shadow:none}
  .about,.sbar{display:none}
  .push{top:10px}
}