:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c2430; --grid:#30363d;
  --fg:#c9d1d9; --muted:#8b949e; --accent:#58a6ff; --accent2:#f0883e;
  --green:#3fb950; --red:#f85149; --amber:#d29922; --purple:#bc8cff; --cone-stress:#f85149;
  --radius:12px; --maxw:920px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.boot{padding:40px;text-align:center;color:var(--muted)}
.app{max-width:var(--maxw);margin:0 auto;padding:14px 14px 40px}

header.top{display:flex;align-items:center;gap:10px;padding:6px 2px 14px}
header.top .logo{font-size:20px}
header.top h1{font-size:16px;margin:0;font-weight:700;letter-spacing:.2px}
header.top .sub{font-size:11px;color:var(--muted);margin-top:1px}
.spacer{flex:1}
.chip{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--grid);
  color:var(--muted);background:var(--panel);white-space:nowrap}
.chip.live{color:var(--green);border-color:#22381f}
.chip.pub{color:var(--accent);border-color:#17324f}
.chip.demo{color:var(--amber);border-color:#3a3012}
.chip.both{color:var(--purple);border-color:#2c2140}
.chip.click{cursor:pointer;user-select:none}
.chip.click:active{transform:scale(.95)}

.tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;font-size:13px;padding:8px 13px;border-radius:999px;border:1px solid var(--grid);
  background:var(--panel);color:var(--muted);cursor:pointer;user-select:none}
.tab.active{background:var(--accent);border-color:var(--accent);color:#0b1220;font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.card{background:var(--panel);border:1px solid var(--grid);border-radius:var(--radius);padding:13px 14px}
.card h3{margin:0 0 8px;font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.stat .k{font-size:11px;color:var(--muted);margin-bottom:4px}
.stat .v{font-size:22px;font-weight:700;line-height:1.05}
.stat .v.sm{font-size:16px}
.pos{color:var(--green)} .neg{color:var(--red)} .mut{color:var(--muted)}

.chartcard{background:var(--panel);border:1px solid var(--grid);border-radius:var(--radius);
  padding:12px 8px 8px;margin-bottom:12px}
.chartcard h3{margin:0 0 4px;padding:0 6px;font-size:13px;color:var(--fg);font-weight:600}
.chartcard .hint{font-size:11px;color:var(--muted);padding:0 6px 8px}
.chartwrap{width:100%;overflow:hidden}
svg.chart{display:block;width:100%;height:auto}

.legend{display:flex;flex-wrap:wrap;gap:12px;padding:6px 8px 2px;font-size:11px;color:var(--muted)}
.legend .it{display:flex;align-items:center;gap:5px}
.legend .sw{width:14px;height:0;border-top:2px solid var(--fg)}
.legend .sw.dash{border-top-style:dashed}

.rows{display:flex;flex-direction:column;gap:4px}
.row{display:flex;justify-content:space-between;font-size:13px;padding:5px 2px;border-bottom:1px solid #20262e}
.row:last-child{border-bottom:none}
.row .lab{color:var(--fg)} .row .val{font-variant-numeric:tabular-nums;font-weight:600}
.row.sub .lab{color:var(--muted);font-size:12px;padding-left:12px}
.row.tot{font-weight:700}

.badge{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:8px;border:1px solid}
.badge.Confident{color:var(--green);border-color:#22381f;background:#0f1a10}
.badge.Overconfident{color:var(--red);border-color:#3a1d1c;background:#1a0f0f}
.badge.Conservative{color:var(--accent);border-color:#17324f;background:#0d1620}

.tip{position:fixed;pointer-events:none;background:#0b0e13;border:1px solid var(--grid);
  border-radius:8px;padding:7px 9px;font-size:11px;color:var(--fg);opacity:0;transition:opacity .08s;
  z-index:50;box-shadow:0 6px 20px rgba(0,0,0,.5);max-width:220px}
.err{color:var(--red);padding:14px;text-align:center;font-size:13px}
.cta{background:var(--panel2);border:1px solid var(--grid);border-radius:var(--radius);padding:16px;
  text-align:center;margin-top:12px}
.cta p{color:var(--muted);font-size:13px;margin:6px 0}
.foot{color:var(--muted);font-size:11px;text-align:center;padding:16px 0 4px}

/* ---------- pestaña Strategy (analitica) ---------- */
.mt12{margin-top:12px}
.ckgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px}
.ck{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 8px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--grid);cursor:pointer;user-select:none}
.ck input{accent-color:var(--accent)}
.ck .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.tblwrap{overflow-x:auto}
.stat-t{border-collapse:collapse;font-size:12.5px;width:100%}
.stat-t td{padding:5px 8px;border-bottom:1px solid #20262e}
.stat-t .k{color:var(--muted)} .stat-t .v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.duo{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-top:12px}
@media(max-width:719px){.duo{grid-template-columns:1fr}}
.corrwrap{overflow-x:auto}
.corr{border-collapse:collapse;font-size:10px;font-family:ui-monospace,Consolas,monospace}
.corr th,.corr td{padding:3px 6px;border:1px solid #20262e;text-align:center;color:var(--fg);white-space:nowrap}
.corr th{color:var(--muted);font-weight:600}
.selstrat{width:100%;background:var(--panel2);color:var(--fg);border:1px solid var(--grid);
  border-radius:8px;padding:9px 10px;font-size:13px}

/* ---------- pantalla de bienvenida (Qtt Algotrading) ---------- */
.wl{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid #16324e;
  background:
    radial-gradient(900px 420px at 22% 8%, rgba(28,80,140,.28), transparent 60%),
    radial-gradient(900px 480px at 82% 20%, rgba(190,110,40,.14), transparent 60%),
    radial-gradient(1100px 500px at 50% -10%, #0f2038 0%, #0a1020 48%, #060a13 100%);
  padding:12px 14px 0;margin-top:6px}
.wl canvas.flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.wl .mesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.55;pointer-events:none}
.mesh line{stroke:rgba(70,150,220,.30);stroke-width:1px;vector-effect:non-scaling-stroke}
.mesh .mlinks line{stroke-dasharray:2 6;animation:ldash 7s linear infinite}
@keyframes ldash{to{stroke-dashoffset:-56}}
.mesh .mc{fill:#5ecdff}.mesh .mo{fill:#ffb066}
.mesh circle{filter:drop-shadow(0 0 3px currentColor);animation:npulse 2.8s ease-in-out infinite}
.mesh circle.mo{animation-delay:1.4s}
@keyframes npulse{0%,100%{opacity:.4}50%{opacity:1}}
.mesh .cscroll{animation:cscroll 40s linear infinite}
@keyframes cscroll{to{transform:translateX(-100px)}}
.mesh .cscroll line{vector-effect:non-scaling-stroke}
.mesh .cu line{stroke:rgba(63,185,80,.30)}.mesh .cu rect{fill:rgba(63,185,80,.20)}
.mesh .cd line{stroke:rgba(248,81,73,.28)}.mesh .cd rect{fill:rgba(248,81,73,.18)}
.bin{position:absolute;top:104px;bottom:64px;width:16px;overflow:hidden;z-index:0;pointer-events:none;
  font:10px/15px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;user-select:none}
.bin.bl{left:7px;color:rgba(90,200,255,.25)}
.bin.br{right:7px;color:rgba(240,163,94,.20)}
.bin span{display:block;animation:binscroll 12s linear infinite}
@keyframes binscroll{to{transform:translateY(-50%)}}

.wl-strip{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:5px 16px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;letter-spacing:.5px;
  color:#7fa3c4;margin-bottom:10px}
.wl-strip b{color:#bfeaff;font-weight:700}
.wl-title{margin:0;text-align:center;font-size:27px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
  background:linear-gradient(90deg,#6fd3ff 15%,#bfeaff 50%,#f0a35e 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;position:relative;z-index:1;
  text-shadow:0 0 26px rgba(80,180,255,.25)}
.wl-sub{text-align:center;color:#5d7ea0;font-size:10px;letter-spacing:4px;text-transform:uppercase;
  margin:6px 0 16px;position:relative;z-index:1}
.wl-grid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:14px;position:relative;z-index:1;align-items:start}
@media(max-width:719px){.wl-grid{grid-template-columns:1fr}}
.wl-panel{background:rgba(10,17,30,.80);border:1px solid #16324e;border-radius:10px;padding:10px 12px;
  box-shadow:0 0 22px rgba(10,40,80,.35)}
.wl-cap{font-size:10px;letter-spacing:2px;color:#69b7e8;font-weight:700;margin:2px 0 8px}
.wl-cap.out{margin:14px 2px 6px;position:relative;z-index:1}
.wl-frow{display:flex;justify-content:space-between;gap:8px;padding:5px 0;font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;border-bottom:1px solid rgba(30,58,88,.5)}
.wl-frow:last-child{border-bottom:none}
.wl-frow .l{color:#9db8d4}.wl-frow .v{font-weight:700}
.wl-frow.grp{color:#69b7e8;font-weight:700;font-size:10px;letter-spacing:2px;border-bottom:none;padding:9px 0 2px}
.feedwin{height:252px;overflow:hidden;position:relative}
.feedwin::before,.feedwin::after{content:'';position:absolute;left:0;right:0;height:18px;z-index:1;pointer-events:none}
.feedwin::before{top:0;background:linear-gradient(rgba(10,17,30,.95),transparent)}
.feedwin::after{bottom:0;background:linear-gradient(transparent,rgba(10,17,30,.95))}
.feedscroll{animation:feedroll 40s linear infinite}
@keyframes feedroll{to{transform:translateY(-50%)}}

/* censura: texto emborronado ilegible */
.censor{filter:blur(4.5px);user-select:none;pointer-events:none;color:#7fa3c4}

/* carrusel vertical de estrategias */
.stratwin{height:17px;overflow:hidden;margin:-2px 0 8px}
.stratroll{display:flex;flex-direction:column}
.strat{height:17px;line-height:17px;font-family:ui-monospace,Consolas,monospace;font-size:10.5px;
  letter-spacing:.8px;color:#bfeaff;white-space:nowrap}

/* pelota (esfera neuronal) + motor central */
.wl-center{display:flex;flex-direction:column;align-items:center}
.corebox{position:relative;width:min(340px,96%);aspect-ratio:1;margin:-8px auto 0;
  display:flex;align-items:center;justify-content:center}
.corebox canvas.sphere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.headwrap{position:relative;width:68%;aspect-ratio:30/17;display:flex;align-items:center;justify-content:center}
svg.head{width:100%;height:100%;animation:beat 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 22px rgba(64,180,255,.4))}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.head-tags{position:absolute;bottom:8%;left:0;right:0;display:flex;flex-direction:column;
  align-items:center;gap:1px;font-family:ui-monospace,Consolas,monospace;font-size:8px;
  letter-spacing:1.1px;color:#5d7ea0}
.head-tags .on{color:#54d6a8}.head-tags .low{color:#f0c674}
/* latencia: pulsos fluyendo por los circuitos (izq -> der) y rotores latiendo */
.head .tr .flow{stroke-dasharray:5 9;animation:tracef 1.5s linear infinite}
@keyframes tracef{to{stroke-dashoffset:-28}}
.head .trl{animation:latg 2.6s ease-in-out infinite}
.head .trr{animation:latg 2.6s ease-in-out infinite 1.3s}
@keyframes latg{0%,100%{opacity:.45}50%{opacity:1}}
.head .rp{transform-box:fill-box;transform-origin:center;animation:rotp 2.2s ease-in-out infinite}
.head .p2{animation-delay:.4s}.head .p3{animation-delay:1.1s}.head .p4{animation-delay:1.5s}
@keyframes rotp{0%,100%{opacity:.45}50%{opacity:1}}
.head .brain{animation:latg 2s ease-in-out infinite .6s}
.wl-enter{margin:8px auto 12px;display:block;background:linear-gradient(90deg,#1c69b3,#2ea6df);
  color:#eaf6ff;border:1px solid #3ba9e0;border-radius:999px;padding:11px 30px;font-size:13px;
  font-weight:800;letter-spacing:2px;cursor:pointer;box-shadow:0 0 20px rgba(46,166,223,.45)}
.wl-enter:active{transform:scale(.97)}

/* radar sonar */
.radar{position:relative;aspect-ratio:1;max-width:170px;margin:2px auto;border-radius:50%;overflow:hidden;
  border:1px solid #1d4a66;box-shadow:0 0 22px rgba(0,229,255,.12), inset 0 0 30px rgba(0,120,180,.12);
  background:
    radial-gradient(circle, rgba(0,229,255,.07), transparent 72%),
    repeating-radial-gradient(circle at 50% 50%, rgba(64,196,255,.22) 0 1px, transparent 1px 24.5%)}
.radar::before,.radar::after{content:'';position:absolute;background:rgba(64,196,255,.2)}
.radar::before{left:50%;top:0;bottom:0;width:1px}
.radar::after{top:50%;left:0;right:0;height:1px}
.radar .sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(0,255,200,.5), rgba(0,255,200,.12) 55deg, transparent 72deg);
  animation:spin 2.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.radar .blip{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffd166;
  box-shadow:0 0 8px #ffd166;animation:blink 2.8s infinite;
  transition:left 2s ease-in-out, top 2s ease-in-out}
.radar .blip.g{background:#54d6a8;box-shadow:0 0 8px #54d6a8;animation-delay:1.2s}
.radar .blip.off{visibility:hidden}
.radar .diag{position:absolute;left:50%;top:50%;width:150%;height:1px;
  transform:translate(-50%,-50%) rotate(-45deg);transform-origin:center}
.radar .dg{background:linear-gradient(90deg,transparent,rgba(63,185,80,.55),transparent)}
.radar .dr{transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(90deg,transparent,rgba(248,81,73,.55),transparent)}
@keyframes blink{0%,12%{opacity:1}45%,100%{opacity:.12}}
.radar .ax{position:absolute;font-family:ui-monospace,Consolas,monospace;font-size:7.5px;
  letter-spacing:1.2px;color:#69b7e8;opacity:.85}
.radar .axx{right:5%;top:52%}
.radar .axy{left:53%;top:3%}

/* analisis de senal (onda + alerta) */
.wavebox{margin-top:12px;border:1px solid #16324e;border-radius:8px;background:rgba(8,14,26,.7);padding:7px 9px}
svg.wave{display:block;width:100%;height:32px;animation:wfade .7s ease}
@keyframes wfade{from{opacity:0}to{opacity:1}}
.wave path{fill:none;stroke:#5ecdff;stroke-width:1.4;stroke-dasharray:140 100;
  filter:drop-shadow(0 0 4px rgba(94,205,255,.6));animation:dash 3s linear infinite}
@keyframes dash{to{stroke-dashoffset:-240}}
.alert{margin-top:4px;font-family:ui-monospace,Consolas,monospace;font-size:9px;letter-spacing:1.2px;
  color:#ffd166;animation:blink 1.6s infinite}

/* signal strength */
.sigbar{height:14px;border-radius:4px;border:1px solid #1d4a66;background:rgba(8,14,26,.9);overflow:hidden;position:relative}
.sigbar .fill{height:100%;border-radius:3px;transition:width .6s cubic-bezier(.45,0,.3,1);
  background:linear-gradient(90deg,#1e6fb0,#2ea6df 55%,#54d6a8 80%,#f0a35e)}
.sigbar::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 5%, rgba(7,11,20,.95) 5% 6%)}
.sigscale{display:flex;justify-content:space-between;margin-top:3px;font-size:8.5px;
  color:#42618a;font-family:ui-monospace,Consolas,monospace}
.sigmeta{display:flex;justify-content:space-between;margin-top:4px;font-size:10px;letter-spacing:1px;
  color:#5d7ea0;font-family:ui-monospace,Consolas,monospace}
.sigmeta .pct{color:#bfeaff;font-weight:800;font-size:12px}

/* carrusel GENERATED OUTPUTS */
.wl-ticker{margin:0 -14px;padding:9px 0;border-top:1px solid #16324e;overflow:hidden;
  background:rgba(7,12,22,.9);position:relative;z-index:1}
.wl-track{display:flex;width:max-content;animation:marquee 44s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
.wl-tick{display:inline-flex;flex-direction:column;gap:2px;margin-right:40px;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px}
.wl-tick .tt{color:#5d7ea0}
.wl-tick .sg{color:#8fb6d8}
.wl-tick .l2{color:#68809b;font-size:10px}

@media (prefers-reduced-motion: reduce){
  svg.head,.radar .sweep,.radar .blip,.wl-track,.bin span,.wave path,.alert,
  .mesh .mlinks line,.mesh circle,.mesh .cscroll,.feedscroll,.stratroll,
  .head .tr .flow,.head .trl,.head .trr,.head .rp,.head .brain{animation:none}
}
.tbl{border-collapse:collapse;font-size:12.5px;width:100%}
.tbl th,.tbl td{padding:5px 8px;border-bottom:1px solid #20262e;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl th{color:var(--muted);font-weight:600}
.badge.Pending{color:var(--muted);border-color:#2a3038;background:#141920}