:root { --ink:#080b10; --panel:#11161e; --line:#252d38; --muted:#8995a5; --lime:#c9ff3d; --cyan:#54e8ff; --font-geist-sans:Inter,Arial,sans-serif; --font-geist-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
* { box-sizing:border-box; }
html { background:var(--ink); }
body { margin:0; color:#f5f7fa; background:radial-gradient(circle at 70% 8%,#16333a55,transparent 28%),var(--ink); font-family:Arial,var(--font-geist-sans),sans-serif; }
button,select { font:inherit; }
main { min-height:100vh; }
.topbar { height:76px; max-width:1240px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:0 24px; }
.brand { color:white; text-decoration:none; font-weight:800; letter-spacing:-.04em; font-size:20px; display:flex; align-items:center; gap:11px; }
.brandMark { background:var(--lime); color:#0a0e12; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-family:var(--font-geist-mono); }
.connection { font:700 11px var(--font-geist-mono); letter-spacing:.12em; color:#ff7a7a; display:flex; gap:8px; align-items:center; }
.connection span { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; }
.connection.live { color:var(--lime); }
.connection.connecting { color:#ffd56a; }
.hero { max-width:1240px; margin:0 auto; padding:42px 24px 30px; display:grid; grid-template-columns:1.45fr .55fr; gap:60px; align-items:end; }
.eyebrow,.sectionLabel { color:var(--lime); font:700 11px var(--font-geist-mono); letter-spacing:.16em; }
h1 { font-size:clamp(38px,4.8vw,64px); line-height:1; letter-spacing:-.055em; margin:13px 0 18px; max-width:850px; }
h1 em { color:var(--lime); font-style:normal; }
.intro { color:#aeb8c5; max-width:700px; font-size:15px; line-height:1.65; }
.liveQuote { border-left:1px solid var(--line); padding-left:28px; display:flex; flex-direction:column; gap:8px; }
.liveQuote span,.liveQuote small { color:var(--muted); font:600 11px var(--font-geist-mono); }
.liveQuote strong { font:700 35px var(--font-geist-mono); }
.liveQuote small b { color:var(--cyan); font-size:17px; margin-left:8px; }
.steps { max-width:1192px; margin:0 auto 18px; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:12px; background:#0d1218; overflow:hidden; }
.steps div { padding:15px 18px; display:grid; grid-template-columns:auto 1fr; column-gap:11px; border-right:1px solid var(--line); }
.steps div:last-child { border-right:0; }
.steps b { grid-row:1/3; color:var(--lime); font:800 20px var(--font-geist-mono); align-self:center; }
.steps span { color:#f5f7fa; font-size:11px; font-weight:900; letter-spacing:.06em; }
.steps small { color:var(--muted); font-size:10px; margin-top:3px; }
.workspace,.analytics { max-width:1240px; margin:auto; padding:0 24px; display:grid; grid-template-columns:360px 1fr; gap:18px; }
.card { background:linear-gradient(145deg,#131922,#0e131a); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 80px #0006; }
.controls { padding:28px; }
.controls label { display:block; color:var(--muted); font-size:12px; font-weight:700; margin:21px 0; }
select,.staticField { margin-top:9px; width:100%; min-height:47px; border:1px solid #303946; border-radius:9px; color:white; background:#0a0e13; padding:0 13px; display:flex; align-items:center; font:700 12px var(--font-geist-mono); }
.rule { padding:16px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }
.rule strong { color:var(--lime); font-family:var(--font-geist-mono); }
.generate { width:100%; border:0; border-radius:10px; padding:16px; background:var(--lime); color:#090d10; font-weight:900; font-size:12px; letter-spacing:.05em; cursor:pointer; box-shadow:0 0 30px #c9ff3d22; }
.generate:disabled { opacity:.45; cursor:not-allowed; }
.buttonHint { color:#7f8a99; font-size:10px; line-height:1.5; text-align:center; margin:10px 4px 0; }
.reconnect,.xmlDownload { width:100%; display:block; text-align:center; color:#aeb8c5; background:transparent; border:0; margin-top:14px; padding:5px; font-size:12px; cursor:pointer; text-decoration:none; }
.xmlDownload { color:var(--cyan); border-top:1px solid var(--line); padding-top:18px; }
.signalPanel { min-height:520px; padding:28px; position:relative; overflow:hidden; }
.signalPanel:after { content:""; position:absolute; inset:auto -20% -60% 20%; height:450px; background:radial-gradient(circle,#c9ff3d12,transparent 65%); pointer-events:none; }
.signalHeader,.cardTitle { display:flex; align-items:center; justify-content:space-between; }
.verified { color:var(--cyan); border:1px solid #54e8ff44; border-radius:99px; padding:7px 10px; font:700 9px var(--font-geist-mono); }
.emptySignal,.signal { min-height:390px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; z-index:1; }
.emptySignal h2 { margin:25px 0 8px; letter-spacing:.04em; }
.emptySignal p { color:var(--muted); font-size:13px; }
.radar { width:105px; height:105px; border:1px solid #35414f; border-radius:50%; display:grid; place-items:center; box-shadow:0 0 50px #54e8ff16; }
.radar:before,.radar:after { content:""; position:absolute; width:70px; height:70px; border:1px solid #27323e; border-radius:50%; }
.radar:after { width:34px; height:34px; }
.radar span { width:8px; height:8px; background:var(--cyan); border-radius:50%; box-shadow:0 0 18px var(--cyan); }
.signal p { color:var(--muted); font:700 10px var(--font-geist-mono); letter-spacing:.15em; }
.digit { font:900 145px/.9 var(--font-geist-mono); color:var(--lime); text-shadow:0 0 45px #c9ff3d33; }
.signal h2 { margin:12px; font-size:30px; }
.confidence { width:280px; max-width:80%; height:7px; background:#28303b; border-radius:9px; overflow:hidden; margin:14px; }
.confidence span { display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--lime)); }
.signal > strong { color:var(--lime); font:700 13px var(--font-geist-mono); }
.probability { color:#8e9aa9; font:10px var(--font-geist-mono); margin-top:9px; }
.result { margin-top:22px; padding:10px 18px; border-radius:99px; font-weight:900; font-size:12px; }
.result.win { color:var(--lime); background:#c9ff3d18; }
.result.loss { color:#ff7474; background:#ff747418; }
.statusLine { position:absolute; bottom:0; left:0; right:0; padding:14px 25px; background:#090d12; border-top:1px solid var(--line); color:var(--muted); font:600 11px var(--font-geist-mono); }
.analytics { grid-template-columns:1.4fr .6fr; margin-top:18px; }
.distribution,.performance { padding:25px; min-height:270px; }
.cardTitle span { font-size:12px; font-weight:800; letter-spacing:.05em; }
.cardTitle small { color:var(--muted); font:10px var(--font-geist-mono); }
.bars { height:185px; display:flex; gap:11px; align-items:flex-end; margin-top:22px; }
.barItem { height:100%; flex:1; text-align:center; display:flex; flex-direction:column; justify-content:flex-end; gap:7px; }
.barItem b { color:var(--muted); font:9px var(--font-geist-mono); }
.barTrack { height:135px; background:#090d12; border-radius:6px; display:flex; align-items:flex-end; overflow:hidden; }
.barTrack span { width:100%; background:linear-gradient(var(--lime),#6b8e16); border-radius:6px 6px 0 0; }
.barItem strong { font:700 13px var(--font-geist-mono); }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:27px 0; }
.stats div { background:#090d12; padding:14px 7px; border-radius:8px; text-align:center; }
.stats b,.stats span { display:block; }
.stats b { font:700 20px var(--font-geist-mono); }
.stats span { color:var(--muted); font-size:8px; margin-top:5px; }
.history div { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; padding:8px 0; border-top:1px solid var(--line); font-size:10px; }
.history p,.history small { color:var(--muted); }
.history .win { color:var(--lime); }.history .loss { color:#ff7474; }
footer { max-width:1240px; margin:38px auto 0; border-top:1px solid var(--line); padding:25px; color:var(--muted); font-size:12px; line-height:1.6; }
footer strong { color:#dce2e9; }
@media (max-width:800px) {
  .hero,.workspace,.analytics { grid-template-columns:1fr; }
  .hero { padding:28px 18px 24px; gap:22px; }
  .steps { margin:0 14px 14px; grid-template-columns:1fr; }
  .steps div { border-right:0; border-bottom:1px solid var(--line); }
  .steps div:last-child { border-bottom:0; }
  .liveQuote { border-left:0; border-top:1px solid var(--line); padding:22px 0 0; }
  .workspace { padding:0 14px; }.analytics { padding:0 14px; }
  .signalPanel { min-height:480px; }.digit { font-size:110px; }
}
@media (max-width:520px) {
  .topbar { height:64px; padding:0 15px; }
  .brand { font-size:16px; }.brandMark { width:30px; height:30px; }
  .connection { font-size:9px; }
  h1 { font-size:37px; line-height:1.02; }
  .intro { font-size:13px; line-height:1.55; }
  .liveQuote strong { font-size:27px; overflow-wrap:anywhere; }
  .controls,.signalPanel,.distribution,.performance { padding:20px; border-radius:14px; }
  .workspace,.analytics { gap:12px; }
  select,.staticField { min-height:52px; font-size:12px; }
  .generate { min-height:54px; }
  .signalHeader { align-items:flex-start; gap:10px; }
  .verified { font-size:8px; white-space:nowrap; }
  .signalPanel { min-height:440px; }
  .emptySignal,.signal { min-height:340px; }
  .digit { font-size:92px; }
  .signal h2 { font-size:25px; }
  .confidence { width:230px; }
  .bars { gap:5px; overflow-x:auto; padding-bottom:5px; }
  .barItem { min-width:24px; }
  .barItem b { font-size:8px; }
  .stats { gap:5px; }
  .stats b { font-size:17px; }
  .history div { grid-template-columns:1fr auto; }
  .history small { display:none; }
}