/* ===== FuturesPro Replay — dark professional theme ===== */
:root{
  --bg:#0a0e17;
  --bg-2:#0f1521;
  --panel:#121a28;
  --panel-2:#162033;
  --line:#1e2a3d;
  --line-2:#27374f;
  --txt:#e6edf6;
  --txt-2:#9fb0c6;
  --muted:#67788f;
  --accent:#3b82f6;
  --accent-2:#2563eb;
  --long:#16c784;
  --long-dim:#0e7d56;
  --short:#f6465d;
  --short-dim:#9c2b3a;
  --gold:#f5b942;
  --bg-grad:#15233b;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --mono:'SF Mono',ui-monospace,'Roboto Mono',Menlo,Consolas,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(1200px 600px at 80% -10%,var(--bg-grad) 0%,var(--bg) 55%) fixed;
  color:var(--txt);
  font-family:var(--sans);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:1480px;margin:0 auto;padding:16px 20px 40px;display:flex;flex-direction:column;gap:16px}
.muted{color:var(--muted)}
.hidden{display:none !important}
b{font-weight:600}
code{font-family:var(--mono);background:var(--panel-2);padding:2px 6px;border-radius:6px;color:var(--txt-2)}

/* ===== Top bar ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 16px;box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  font-weight:800;letter-spacing:.5px;color:#fff;
  background:linear-gradient(135deg,var(--accent) 0%,#7c3aed 100%);
  box-shadow:0 6px 18px rgba(59,130,246,.35);
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-size:16px;font-weight:600}
.brand-name b{color:var(--accent);font-weight:800}
.brand-sub{font-size:11.5px;color:var(--muted)}

.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg-btn{
  border:0;background:transparent;color:var(--txt-2);font-weight:600;font-size:13px;
  padding:7px 12px;border-radius:7px;cursor:pointer;transition:.15s;font-family:var(--mono)
}
.seg-btn:hover{color:var(--txt)}
.seg-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.4)}

.btn{
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--txt);
  padding:9px 16px;border-radius:9px;font-weight:600;font-size:13px;cursor:pointer;transition:.15s;
  display:inline-flex;align-items:center;gap:7px
}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(180deg,var(--accent) 0%,var(--accent-2) 100%);border-color:transparent;color:#fff}
.btn-primary:hover{box-shadow:0 6px 18px rgba(59,130,246,.4)}
.btn-ghost{background:transparent}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* ===== Workspace ===== */
.workspace{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}

.chart-card,.panel,.journal-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.chart-card{overflow:hidden}
.chart-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:8px}
.chart-id{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:12px;font-weight:600;padding:5px 10px;border-radius:7px;background:var(--accent);color:#fff}
.chip.ghost{background:var(--bg);color:var(--txt-2);border:1px solid var(--line)}
.chart-meta{font-size:12px;display:flex;gap:8px;align-items:center}
.sep{color:var(--line-2)}

.chart{width:100%;height:660px;position:relative}

.chart-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--line);gap:12px;flex-wrap:wrap}
.hint{font-size:13px;color:var(--txt-2)}
.reveal-controls{display:flex;gap:8px}

/* ===== Side panel ===== */
.side{display:flex;flex-direction:column;gap:16px}
.panel{padding:16px}
.panel-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:12px}

.dir-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.dir{
  border:1.5px solid var(--line-2);background:var(--bg);border-radius:10px;padding:12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;transition:.15s;color:var(--txt-2)
}
.dir-label{font-weight:800;font-size:16px;letter-spacing:.5px;font-family:var(--mono)}
.dir-sub{font-size:11px}
.dir.long:hover,.dir.long.active{border-color:var(--long);background:rgba(22,199,132,.12);color:var(--long)}
.dir.short:hover,.dir.short.active{border-color:var(--short);background:rgba(246,70,93,.12);color:var(--short)}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:12px;color:var(--txt-2);font-weight:500}
.field input{
  background:var(--bg);border:1px solid var(--line-2);border-radius:8px;color:var(--txt);
  padding:10px 12px;font-size:14px;font-family:var(--mono);font-weight:600;outline:none;transition:.15s;width:100%
}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.readout{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-weight:700;font-size:15px}
.readout.small{font-size:14px;text-align:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.risk-row{display:flex;justify-content:space-between;font-size:13px;margin:6px 0 14px;font-family:var(--mono)}

.btn-submit{
  width:100%;justify-content:center;padding:13px;font-size:14px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#2a3850,#1d2738);color:var(--muted);border-radius:10px;font-weight:700
}
.btn-submit.ready{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;cursor:pointer}
.btn-submit.ready:hover{box-shadow:0 6px 18px rgba(59,130,246,.4)}
.btn-submit:disabled{cursor:not-allowed}
.ticket-note{font-size:11px;margin-top:10px;text-align:center}

/* Result */
.result-badge{font-size:22px;font-weight:800;text-align:center;padding:14px;border-radius:10px;margin-bottom:14px;font-family:var(--mono)}
.result-badge.win{background:rgba(22,199,132,.14);color:var(--long);border:1px solid var(--long-dim)}
.result-badge.loss{background:rgba(246,70,93,.14);color:var(--short);border:1px solid var(--short-dim)}
.result-badge.flat{background:var(--panel-2);color:var(--txt-2);border:1px solid var(--line-2)}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.result-grid>div{display:flex;flex-direction:column;gap:3px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px}
.result-grid b{font-family:var(--mono);font-size:16px}
.wide{width:100%;justify-content:center}

/* Stats */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.stat{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:11px 6px}
.stat-val{font-family:var(--mono);font-weight:700;font-size:16px}
.stat-key{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.link-btn{background:none;border:0;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline;padding:2px}
.link-btn:hover{color:var(--short)}

/* ===== Journal ===== */
.journal-card{padding:16px}
.journal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.journal-wrap{overflow-x:auto}
.journal{width:100%;border-collapse:collapse;font-size:13px}
.journal th{text-align:right;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;border-bottom:1px solid var(--line)}
.journal th:nth-child(-n+4){text-align:left}
.journal td{padding:9px 12px;border-bottom:1px solid var(--line);font-family:var(--mono);text-align:right}
.journal td:nth-child(-n+4){text-align:left}
.journal tr:hover td{background:var(--panel-2)}
.journal .empty td{text-align:center;color:var(--muted);font-family:var(--sans);padding:18px}
.tag{padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700}
.tag.long{background:rgba(22,199,132,.14);color:var(--long)}
.tag.short{background:rgba(246,70,93,.14);color:var(--short)}
.pos{color:var(--long)}
.neg{color:var(--short)}

/* ===== Footer / overlay ===== */
.footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--txt-2);padding:4px 4px 0}
.overlay{position:fixed;inset:0;background:rgba(5,8,13,.78);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:50}
.overlay-box{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;padding:28px;max-width:440px;text-align:center;box-shadow:var(--shadow)}
.overlay-box h3{margin-bottom:10px}
.overlay-box p{line-height:1.5}

/* ===== Responsive ===== */
@media (max-width:1040px){
  .workspace{grid-template-columns:1fr}
  .chart{height:420px}
}
@media (max-width:560px){
  #app{padding:10px 10px 30px}
  .controls{width:100%;justify-content:flex-start}
  .chart{height:340px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}


/* ---- entry mode + reveal player (v2) ---- */
.entry-mode{display:flex;width:100%;margin-bottom:14px}
.entry-mode .seg-btn{flex:1;text-align:center}
.entry-hint{font-size:11.5px;margin-top:7px;line-height:1.35}
.chart-foot .reveal-controls{align-items:center}
.reveal-progress{font-family:var(--mono);font-size:12px;color:var(--txt-2);margin-right:auto;padding-left:2px;letter-spacing:.02em}
.dir.active{box-shadow:0 0 0 3px rgba(255,255,255,.04)}


/* ---- reveal player (v2) ---- */
.player{display:flex;flex-direction:column;gap:10px;width:100%}
.player-track{height:6px;background:var(--bg);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.player-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#7c3aed);transition:width .15s ease}
.player-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pbtn{border:1px solid var(--line-2);background:var(--panel-2);color:var(--txt);padding:8px 14px;border-radius:9px;font-weight:600;font-size:13px;cursor:pointer;transition:.15s;font-family:var(--mono)}
.pbtn:hover{border-color:var(--accent);transform:translateY(-1px)}
.pbtn.play{min-width:104px;text-align:center}
.pbtn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff}
.player .reveal-progress{margin-left:4px}
.seg.speed{margin-left:auto}
.seg.speed .seg-btn{padding:6px 10px;font-size:12px}


/* ---- start / home screen ---- */
.start-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;overflow:auto;
  background:radial-gradient(1000px 520px at 50% -8%,#16263f 0%,#06090f 62%)}
.start-card{width:100%;max-width:720px;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--shadow);padding:30px}
.start-brand{display:flex;gap:16px;align-items:center;margin-bottom:24px}
.brand-mark.big{width:58px;height:58px;border-radius:15px;font-size:21px}
.start-title{font-size:24px;font-weight:700;line-height:1.1}
.start-title b{color:var(--accent);font-weight:800}
.start-tag{font-size:13px;color:var(--txt-2);margin-top:5px;max-width:540px;line-height:1.45}
.start-section{margin-bottom:18px}
.start-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:10px}
.inst-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.inst-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1.5px solid var(--line-2);background:var(--bg);border-radius:12px;padding:13px 16px;cursor:pointer;transition:.15s;color:var(--txt)}
.inst-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.inst-card.active{border-color:var(--accent);background:rgba(59,130,246,.1)}
.ic-sym{font-family:var(--mono);font-weight:800;font-size:18px;letter-spacing:.5px}
.ic-name{font-size:13px;color:var(--txt-2)}
.ic-meta{font-size:11.5px;color:var(--muted);font-family:var(--mono);margin-top:2px}
.start-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.start-seg{width:100%;display:flex}
.start-seg .seg-btn{flex:1;text-align:center}
.start-go{width:100%;justify-content:center;padding:14px;font-size:15px;margin-top:8px}
.brand-mark#brandMark{cursor:pointer}
@media (max-width:560px){.inst-grid{grid-template-columns:1fr}.start-row{grid-template-columns:1fr}}


/* ---- settings modal + light theme ---- */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(4,8,14,.6);backdrop-filter:blur(3px)}
.modal-card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow);padding:22px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modal-head .panel-title{margin-bottom:0}
.modal-close{background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;line-height:1}
.modal-close:hover{color:var(--short)}
.set-section{margin-bottom:16px}
.set-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:8px}
.set-seg{display:flex;width:100%}
.set-seg .seg-btn{flex:1;text-align:center}
#settingsBtn{font-size:15px;padding:9px 13px}

body.light{--bg:#eef2f7;--bg-2:#e6ebf2;--panel:#ffffff;--panel-2:#f1f4f9;--line:#e2e8f1;--line-2:#cdd6e2;--txt:#0e1726;--txt-2:#46566b;--muted:#7b899e;--shadow:0 8px 30px rgba(20,40,80,.10)}
body.light{background:radial-gradient(1200px 600px at 80% -10%,#dbe7f7 0%,#eef2f7 55%) fixed}
body.light .seg-btn.active{color:#fff}
body.light .chip.ghost{background:#eef2f7}


/* ---- instrument chip as menu trigger ---- */
.chip-btn{cursor:pointer}
.chip-btn::after{content:" \25BE";opacity:.75}
.chip-btn:hover{filter:brightness(1.12)}


/* ---- chart drawing tools ---- */
.chart-tools{display:flex;gap:6px;align-items:center}
.tool-btn{border:1px solid var(--line-2);background:var(--panel-2);color:var(--txt-2);padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s;font-family:var(--mono)}
.tool-btn:hover{border-color:var(--accent);color:var(--txt)}
.tool-btn.active{background:var(--accent);color:#fff;border-color:transparent}


/* ---- fullscreen chart ---- */
.chart-card:fullscreen{width:100vw;height:100vh;background:var(--bg);display:flex;flex-direction:column;border-radius:0}
.chart-card:fullscreen .chart{height:auto;flex:1 1 auto}


/* ---- manual close button ---- */
.pbtn.close{border-color:var(--gold);color:var(--gold)}
.pbtn.close:hover{background:rgba(245,185,66,.12);border-color:var(--gold)}


/* ---- drawing toolbar (v2) ---- */
.draw-toolbar-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.draw-bar{display:flex;gap:4px;flex-wrap:wrap}
.dtool{min-width:32px;height:30px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--txt-2);border-radius:7px;font-size:13px;font-weight:700;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);padding:0 8px}
.dtool:hover{border-color:var(--accent);color:var(--txt)}
.dtool.active{background:var(--accent);color:#fff;border-color:transparent}
.dtool.danger{color:var(--short)}
.dtool.danger:hover{border-color:var(--short);color:var(--short)}
.draw-style{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ds-sw{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-shadow:0 0 0 1px var(--line-2);display:inline-block}
.ds-sw.active{border-color:var(--txt)}
.ds-sep{width:1px;height:18px;background:var(--line-2);margin:0 3px}
.ds-w,.ds-d{height:26px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--txt-2);border-radius:6px;cursor:pointer;font-size:11px;font-family:var(--mono);padding:0 8px}
.ds-w.active,.ds-d.active{background:var(--accent);color:#fff;border-color:transparent}
.fpdraw-svg{overflow:visible}


/* ---- expanded settings ---- */
.modal-card{max-height:88vh;overflow:auto}
.set-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.set-color{width:46px;height:30px;border:1px solid var(--line-2);border-radius:7px;background:var(--bg);cursor:pointer;padding:2px}
.set-cc{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--txt-2)}
.set-hint{font-size:11.5px;color:var(--muted)}


/* ---- themes + hotkeys ---- */
.theme-seg{flex-wrap:wrap;gap:4px}
.hk-list{display:flex;flex-direction:column;gap:8px}
.hk{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13px}
.hk b{font-family:var(--mono);background:var(--bg);border:1px solid var(--line-2);border-radius:6px;padding:3px 8px;color:var(--txt);font-weight:700}
.hk span{color:var(--txt-2);text-align:right}
#hotkeysBtn{font-size:15px;padding:9px 12px}

.ds-color{width:28px;height:22px;border:1px solid var(--line-2);border-radius:6px;background:var(--bg);cursor:pointer;padding:1px;vertical-align:middle}


/* ===== lighter & simpler pass (2026-06-18) ===== */
:root{ --shadow:0 4px 16px rgba(0,0,0,.18); }
.topbar,.chart-card,.panel,.journal-card{ box-shadow:0 2px 10px rgba(0,0,0,.13); }
.topbar{ background:var(--panel); }
.btn:hover{ transform:none; }
.btn-primary:hover{ transform:none; }
.seg-btn.active{ box-shadow:none; }
.btn-primary{ box-shadow:none; }

/* clean player toolbar */
.player{ display:flex; flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; width:100%; }
.player.hidden{ display:none !important; }
.player .reveal-progress{ margin-left:0; }
.pbtn.icon{ display:inline-flex; width:38px; min-width:38px; padding:8px 0; align-items:center; justify-content:center; font-size:13px; }
.scrub{ -webkit-appearance:none; appearance:none; flex:1 1 160px; min-width:120px; height:6px; padding:0; border:none; border-radius:6px; background:var(--line-2); outline:none; cursor:pointer; align-self:center; }
.scrub::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:15px; height:15px; border-radius:50%; background:var(--accent); border:2px solid var(--panel); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.scrub::-moz-range-thumb{ width:14px; height:14px; border:2px solid var(--panel); border-radius:50%; background:var(--accent); cursor:pointer; }
.reveal-progress{ font-family:var(--mono); font-size:12px; color:var(--txt-2); min-width:52px; text-align:center; }

/* drawing tools toggle */
#toolsToggle.active{ background:var(--accent); color:#fff; border-color:transparent; }
.draw-toolbar-row{ animation:fpfade .16s ease; }
@keyframes fpfade{ from{opacity:0; transform:translateY(-2px);} to{opacity:1; transform:none;} }


/* ===== clean line icons ===== */
.ic{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; display:inline-block; vertical-align:middle; }
.ic-fill{ fill:currentColor; stroke:none; }
.btn, .pbtn, .tool-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.icon-btn{ padding:9px 11px; }
.pbtn.icon{ gap:0; }
.pbtn.icon .ic{ width:15px; height:15px; }
.tool-btn .ic, .btn-ghost .ic{ width:17px; height:17px; }
.start-go .ic{ width:18px; height:18px; }
.result-badge{ display:flex; align-items:center; justify-content:center; gap:9px; }
.result-badge .ic{ width:22px; height:22px; }


/* ===== language select (pretty) ===== */
.set-select{ width:100%; -webkit-appearance:none; appearance:none;
  background-color:var(--bg);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%239fb0c6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center;
  border:1px solid var(--line-2); border-radius:9px; color:var(--txt);
  font-family:var(--sans); font-size:14px; font-weight:600;
  padding:10px 38px 10px 12px; cursor:pointer; transition:.15s; }
.set-select:hover{ border-color:var(--accent); }
.set-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.set-select option{ background:var(--panel); color:var(--txt); font-weight:600; }


/* ===== session selector + synthetic ===== */
.topbar-select{ -webkit-appearance:none; appearance:none; background-color:var(--bg);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="%239fb0c6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat; background-position:right 9px center;
  border:1px solid var(--line); border-radius:10px; color:var(--txt-2);
  font-family:var(--sans); font-size:13px; font-weight:600; padding:8px 28px 8px 11px; cursor:pointer; transition:.15s; }
.topbar-select:hover{ color:var(--txt); border-color:var(--line-2); }
.topbar-select:focus{ outline:none; border-color:var(--accent); }
.topbar-select option{ background:var(--panel); color:var(--txt); font-weight:600; }
.inst-card.syn .ic-sym{ color:var(--accent); }
#chipSession{ background:rgba(59,130,246,.14); color:var(--accent); }


/* ===== equity curve ===== */
.equity{ margin:2px 0 12px; }
.eq-svg{ width:100%; height:54px; display:block; }
.eq-zero{ stroke:var(--line-2); stroke-width:1; stroke-dasharray:3 3; }


/* ===== draw-tool icons ===== */
.dtool{ display:inline-flex; align-items:center; justify-content:center; }
.dtool .ic{ width:16px; height:16px; }


/* ===== leaderboard ===== */
.lb-me{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.lb-prof{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.lb-dot{ width:14px; height:14px; border-radius:50%; flex:none; }
.lb-name-input{ flex:1; min-width:0; background:var(--bg); border:1px solid var(--line-2); border-radius:8px; color:var(--txt); font-family:var(--sans); font-weight:600; font-size:14px; padding:7px 10px; outline:none; transition:.15s; }
.lb-name-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.lb-rankbox{ text-align:right; flex:none; }
.lb-rank-label{ display:block; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.lb-rank{ font-family:var(--mono); font-weight:700; font-size:16px; }
.lb-date{ font-size:12px; margin-bottom:8px; }
.lb-list{ display:flex; flex-direction:column; gap:3px; max-height:46vh; overflow:auto; }
.lb-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; background:var(--bg); font-size:13px; }
.lb-row.me{ background:rgba(59,130,246,.14); outline:1px solid var(--accent); }
.lb-pos{ width:26px; font-family:var(--mono); color:var(--muted); font-weight:700; text-align:center; flex:none; }
.lb-nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.lb-ai{ font-size:9.5px; color:var(--muted); border:1px solid var(--line-2); border-radius:4px; padding:1px 4px; vertical-align:middle; }
.lb-ins{ font-family:var(--mono); font-size:11.5px; color:var(--txt-2); flex:none; }
.lb-r{ font-family:var(--mono); font-weight:700; min-width:58px; text-align:right; flex:none; }
.lb-empty{ text-align:center; color:var(--muted); padding:18px; }
.lb-note{ font-size:11.5px; margin-top:10px; text-align:center; }


/* ===== leaderboard medals ===== */
.lb-pos-1{ color:#f5b942; }
.lb-pos-2{ color:#cbd5e1; }
.lb-pos-3{ color:#d08b5b; }
.lb-row:nth-child(1){ background:rgba(245,185,66,.07); }


/* ===== daily challenge rank reveal ===== */
.daily-rank{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(59,130,246,.1); border:1px solid var(--accent); border-radius:10px; padding:10px 12px; margin-bottom:12px; }
.dr-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dr-label{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.dr-val{ font-family:var(--mono); font-weight:800; font-size:18px; color:var(--accent); }
.dr-btn{ background:var(--accent); color:#fff; border:0; border-radius:8px; padding:8px 13px; font-weight:700; font-size:12px; cursor:pointer; flex:none; transition:.15s; }
.dr-btn:hover{ filter:brightness(1.08); }
.daily-rank.reveal{ animation:drPop .42s cubic-bezier(.2,.8,.2,1); }
@keyframes drPop{ 0%{transform:scale(.85);opacity:0} 60%{transform:scale(1.04)} 100%{transform:scale(1);opacity:1} }


/* ===== ranks & gamification ===== */
.rank-chip{ display:inline-flex; align-items:center; gap:6px; padding:7px 11px; }
.rank-chip .rk-nm{ font-size:13px; font-weight:700; }
.rank-chip .rk-dv{ font-family:var(--mono); font-size:11px; color:var(--muted); font-weight:700; }
.rk-emb{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); flex:none; vertical-align:middle; }
.rank-card{ display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--line-2); border-radius:12px; padding:12px; margin-bottom:12px; }
.rc-emb{ position:relative; flex:none; display:grid; place-items:center; }
.rc-dv{ position:absolute; font-family:var(--mono); font-weight:800; font-size:13px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.rc-main{ flex:1; min-width:0; }
.rc-name{ font-weight:800; font-size:15px; margin-bottom:7px; }
.rc-bar{ height:8px; background:var(--panel-2); border-radius:99px; overflow:hidden; }
.rc-fill{ height:100%; border-radius:99px; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.rc-sub{ font-size:11.5px; color:var(--muted); margin-top:6px; }
.rating-pop{ position:fixed; left:50%; top:36%; transform:translate(-50%,0); font-family:var(--mono); font-weight:800; font-size:30px; pointer-events:none; opacity:0; z-index:120; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.rating-pop.pos{ color:var(--long); } .rating-pop.neg{ color:var(--short); }
.rating-pop.show{ animation:fpRatingFloat 1.15s ease forwards; }
@keyframes fpRatingFloat{ 0%{opacity:0;transform:translate(-50%,12px) scale(.8)} 22%{opacity:1;transform:translate(-50%,-4px) scale(1.12)} 100%{opacity:0;transform:translate(-50%,-64px) scale(1)} }
.rank-toast{ position:fixed; left:50%; top:80px; transform:translateX(-50%); display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line-2); border-radius:14px; padding:12px 18px; box-shadow:0 14px 44px rgba(0,0,0,.5); opacity:0; pointer-events:none; z-index:120; }
.rank-toast.up{ border-color:var(--long); } .rank-toast.down{ border-color:var(--short); }
.rank-toast .rt-h{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.rank-toast .rt-n{ font-weight:800; font-size:16px; }
.rank-toast.show{ animation:fpRankToast 2.6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes fpRankToast{ 0%{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.92)} 8%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} 88%{opacity:1;transform:translateX(-50%) translateY(0)} 100%{opacity:0;transform:translateX(-50%) translateY(-10px)} }


/* ===== interface glow-up: entrance + micro ===== */
.topbar{ animation:fpFadeUp .40s ease both; }
.workspace > .chart-card{ animation:fpFadeUp .46s .04s ease both; }
.workspace > .side{ animation:fpFadeUp .52s .10s ease both; }
.journal-card{ animation:fpFadeUp .58s .16s ease both; }
.start-card{ animation:fpModal .42s cubic-bezier(.2,.8,.2,1); }
.inst-grid .inst-card{ animation:fpFadeUp .42s both; }
.inst-grid .inst-card:nth-child(1){animation-delay:.04s}
.inst-grid .inst-card:nth-child(2){animation-delay:.09s}
.inst-grid .inst-card:nth-child(3){animation-delay:.14s}
.inst-grid .inst-card:nth-child(4){animation-delay:.19s}
.inst-grid .inst-card:nth-child(5){animation-delay:.24s}
.inst-grid .inst-card:nth-child(6){animation-delay:.29s}

/* pulsing daily-challenge dot */
.dot{ animation:fpPulse 2.1s ease-in-out infinite; }
@keyframes fpPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(245,185,66,.45)} 50%{box-shadow:0 0 0 6px rgba(245,185,66,0)} }

/* rank chip subtle depth */
.rank-chip{ background:linear-gradient(180deg, var(--panel-2), var(--bg)); }

/* sleek scrollbars */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--muted); background-clip:padding-box; }

/* unified soft micro-transitions */
.btn,.pbtn,.tool-btn,.seg-btn,.dir,.inst-card,.stat,.dtool,.ds-sw,.chip-btn{ transition:transform .14s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease; }
.chip-btn:hover{ filter:brightness(1.08); }


/* ===== leaderboard tabs + world rows ===== */
.lb-tabs{ display:flex; gap:6px; margin-bottom:10px; }
.lb-tab{ flex:1; background:var(--bg); border:1px solid var(--line); color:var(--txt-2); border-radius:9px; padding:8px 6px; font-weight:700; font-size:12.5px; cursor:pointer; transition:.15s; font-family:var(--sans); }
.lb-tab:hover{ color:var(--txt); }
.lb-tab.active{ background:var(--accent); color:#fff; border-color:transparent; }
.lb-rkmini{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--txt-2); flex:none; }


/* ===== account / auth ===== */
.auth-hint{ font-size:12.5px; color:var(--txt-2); margin-bottom:14px; line-height:1.45; }
.auth-l{ display:block; font-size:12px; color:var(--txt-2); font-weight:600; margin:10px 0 5px; }
.auth-in{ width:100%; background:var(--bg); border:1px solid var(--line-2); border-radius:9px; color:var(--txt); font-size:14px; padding:10px 12px; outline:none; transition:.15s; font-family:var(--sans); }
.auth-in:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.auth-msg{ font-size:12px; color:var(--gold); min-height:16px; margin:10px 0 4px; }
.auth-btns{ display:flex; gap:8px; margin-top:6px; }
.auth-btns .btn{ flex:1; justify-content:center; }
.auth-acc{ font-size:14px; margin-bottom:14px; }
#authBtn.active{ color:var(--accent); border-color:var(--accent); }


/* ===== profile/career tab ===== */
.pf-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:10px; }
.pf-stat{ display:flex; flex-direction:column; gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:10px 12px; }
.pf-v{ font-family:var(--mono); font-weight:700; font-size:17px; }
.pf-k{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.pf-eq{ margin:4px 0 8px; }
.pf-world{ font-size:12.5px; text-align:center; }


/* ===== start-screen profile + grouping ===== */
.start-profile{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:14px 0 2px; }
.sp-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.sp-emb{ flex:none; display:inline-flex; }
.sp-info{ min-width:0; }
.sp-name{ font-weight:800; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-sub{ font-size:11.5px; }
.sp-acc{ flex:none; font-size:12.5px; padding:8px 14px; }
.inst-div{ grid-column:1 / -1; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin:8px 0 -2px; padding-left:2px; }
.inst-card.syn{ border-color:rgba(59,130,246,.28); }
.inst-card.syn:hover{ border-color:var(--accent); }


/* ===== hub tabs: stable height, 4 tabs ===== */
.lb-list{ min-height:248px; }
.lb-date{ min-height:15px; }
.lb-tab{ padding:8px 4px; font-size:12px; }


/* ===== hub: fixed list height (no jump) ===== */
.lb-list{ height:320px; max-height:56vh; min-height:0; }


/* ===== unavailable timeframes (same moment not in data) ===== */
.seg-btn.tf-off{ opacity:.3; cursor:not-allowed; }
.seg-btn.tf-off:hover{ color:var(--txt-2); background:transparent; }


/* disabled selects (e.g. session locked in daily challenge) */
.topbar-select:disabled{ opacity:.4; cursor:not-allowed; }


/* ===== professional minimal polish (2026-06-19) ===== */
:root{ --shadow:0 1px 3px rgba(0,0,0,.16); }
.topbar,.chart-card,.panel,.journal-card{ box-shadow:0 1px 2px rgba(0,0,0,.13); border:1px solid var(--line); }
.topbar{ background:var(--panel); padding:10px 16px; }
.controls{ gap:8px; align-items:center; }
.btn{ min-height:38px; border-radius:10px; }
.btn:hover{ transform:none; }
.btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--txt-2); }
.btn-ghost:hover{ background:var(--panel-2); border-color:var(--line-2); color:var(--txt); }
.icon-btn{ width:38px; height:38px; min-height:38px; padding:0; }
.icon-btn .ic{ width:18px; height:18px; }
.rank-chip{ min-height:38px; }
.topbar-select{ min-height:38px; }
.seg{ background:var(--bg); border:1px solid var(--line); border-radius:10px; }
.btn-primary{ box-shadow:0 2px 12px rgba(59,130,246,.22); }
.btn-primary:hover{ transform:none; filter:brightness(1.05); }
.panel{ padding:16px; }
.panel-title{ letter-spacing:.09em; margin-bottom:12px; }
.field label{ font-size:11.5px; }
.ticket-note{ opacity:.7; font-size:10.5px; }
.footer{ opacity:.8; }
.chip.ghost{ background:var(--bg); border:1px solid var(--line); }


/* ===== minimal polish v3: hierarchy & declutter (2026-06-23) ===== */
/* Quiet utility icons — borderless, reveal background only on hover */
.icon-btn{ background:transparent; border-color:transparent; color:var(--txt-2); }
.icon-btn:hover{ background:var(--panel-2); border-color:transparent; color:var(--txt); }
/* Separate the account/utility cluster from the action buttons */
#authBtn{ margin-left:6px; }
/* Rank chip: quiet card, present but not loud */
.rank-chip{ border:1px solid var(--line); }
/* Daily button calmer until hover */
#dailyBtn{ color:var(--txt-2); }
#dailyBtn:hover{ color:var(--txt); }
/* Logo: lighter shadow to match the flatter surfaces */
.brand-mark{ box-shadow:0 2px 10px rgba(59,130,246,.28); }
/* Chart-head tool buttons: same quiet treatment as topbar icons */
.tool-btn{ background:transparent; border-color:transparent; color:var(--txt-2); }
.tool-btn:hover{ background:var(--panel-2); border-color:transparent; color:var(--txt); }
.tool-btn.active{ background:var(--accent); color:#fff; }

/* ===== Trade analysis "Твои утечки" ===== */
.an-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.an-chip{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px 6px}
.an-v{font-family:var(--mono);font-weight:700;font-size:15px}
.an-k{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;text-align:center}
.an-head{font-size:13px;font-weight:600;color:var(--txt);background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:11px 12px;margin-bottom:10px}
.an-list{display:flex;flex-direction:column;gap:8px}
.an-item{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-left-width:3px;border-radius:9px;padding:10px 12px}
.an-item.leak{border-left-color:var(--short)}
.an-item.warn{border-left-color:var(--gold)}
.an-item.good{border-left-color:var(--long)}
.an-ic{flex:0 0 18px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;margin-top:1px;line-height:1}
.an-item.leak .an-ic{background:var(--short)}
.an-item.warn .an-ic{background:var(--gold);color:#1a1206}
.an-item.good .an-ic{background:var(--long)}
.an-tx{font-size:12.5px;line-height:1.45;color:var(--txt-2)}

/* ===== AI review ===== */
.an-ai-btn{width:100%;margin-top:12px;padding:11px;border:0;background:linear-gradient(180deg,#8b5cf6,#6d28d9);color:#fff;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;transition:.15s}
.an-ai-btn:hover{filter:brightness(1.08)}
.an-ai-btn:disabled{opacity:.6;cursor:not-allowed}
.an-ai-out{margin-top:10px}
.an-ai-think{font-size:12.5px;color:var(--txt-2);text-align:center;padding:10px}
.an-ai-card{background:var(--bg);border:1px solid var(--line);border-left:3px solid #a855f7;border-radius:9px;padding:12px}
.an-ai-h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#a855f7;font-weight:800;margin-bottom:8px}
.an-ai-tx{font-size:12.5px;line-height:1.55;color:var(--txt)}
.an-ai-note{font-size:12px;color:var(--muted);text-align:center;padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:9px}

/* ===== per-trade review ===== */
.best-exit{display:flex;justify-content:space-between;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin-bottom:10px;font-size:12px}
.bx-l{color:var(--muted)}
.bx-v{font-family:var(--mono);font-weight:700;color:var(--long)}

/* ===== welcome / onboarding ===== */
.wel-card{max-width:440px}
.wel-title{font-size:18px;font-weight:800;margin-bottom:14px}
.wel-steps{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.wel-step{display:flex;gap:12px;align-items:flex-start}
.wel-n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--accent),#7c3aed)}
.wel-t{font-size:13.5px;line-height:1.5;color:var(--txt-2);padding-top:3px}

#welcomeModal{z-index:200}

/* ===== design-eng polish (Emil Kowalski + frontend-design principles) ===== */
:root{ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
/* snappy press feedback — the UI feels like it's listening */
.btn,.seg-btn,.pbtn,.tool-btn,.dtool,.dir,.an-ai-btn,.lb-tab,.modal-close,.chip-btn,.link-btn,.sp-acc,.dr-btn,.ds-sw,.btn-submit{ transition: transform .14s var(--ease-out), border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease, filter .15s ease; }
.btn:active,.seg-btn:active,.pbtn:active,.tool-btn:active,.dtool:active,.an-ai-btn:active,.lb-tab:active,.modal-close:active,.chip-btn:active,.dr-btn:active,.sp-acc:active,.btn-submit:active{ transform: scale(0.97); }
.inst-card:active{ transform: scale(0.985); }
/* keyboard focus visible (a11y) — not shown on mouse click */
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus:not(:focus-visible), select:focus:not(:focus-visible){ outline: none; }
/* touch devices: no sticky hover transforms on tap */
@media (hover: none){
  .btn:hover,.inst-card:hover,.seg-btn:hover,.tool-btn:hover,.pbtn:hover,.dir:hover,.lb-tab:hover{ transform: none; }
}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
}
/* mobile refinements */
@media (max-width: 560px){
  .player{ flex-wrap: wrap; gap: 6px; }
  .scrub{ order: 5; flex: 1 1 100%; }
  .brand-sub{ display: none; }
}

/* ===== battles 1v1 ===== */
.bt-card{max-width:380px}
#battleBody .btn{margin-bottom:8px}
.bt-intro{font-size:13px;color:var(--txt-2);line-height:1.5;margin-bottom:14px}
.bt-or{text-align:center;color:var(--muted);font-size:12px;margin:10px 0}
.bt-join{display:flex;gap:8px}
.bt-input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line-2);border-radius:9px;color:var(--txt);padding:10px 12px;font-family:var(--mono);font-weight:700;letter-spacing:4px;text-transform:uppercase;text-align:center;outline:none}
.bt-input:focus{border-color:var(--accent)}
.bt-msg{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;min-height:16px}
.bt-code{font-family:var(--mono);font-weight:800;font-size:34px;letter-spacing:8px;text-align:center;color:var(--accent);background:var(--bg);border:1px dashed var(--line-2);border-radius:12px;padding:18px 10px;margin-bottom:12px}
.bt-result{margin-bottom:12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px}
.bt-res-h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:8px}
.bt-res-row{display:flex;justify-content:space-between;font-size:13px;font-family:var(--mono);margin-bottom:8px;gap:8px}
.bt-verdict{text-align:center;font-weight:800;font-size:15px;padding:8px;border-radius:8px}
.bt-verdict.win{background:rgba(22,199,132,.14);color:var(--long)}
.bt-verdict.loss{background:rgba(246,70,93,.14);color:var(--short)}
.bt-verdict.tie{background:var(--panel-2);color:var(--txt-2)}

/* ===== critique cycle 1: declutter, spinners, session, account ===== */
#battleBtn,#lbBtn{display:none !important}              /* #16 hide battles · #11 drop duplicate leaderboard btn (rank chip is the entry) */
input[type=number]{-moz-appearance:textfield;appearance:textfield}   /* #13 kill spinner arrows */
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.topbar-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:30px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}   /* #14 session select fits theme */
.auth-in{transition:border-color .15s,box-shadow .15s}
.auth-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.15);outline:none}
.auth-msg:not(:empty){margin:6px 0 2px;padding:8px 10px;border-radius:8px;background:rgba(246,70,93,.12);color:var(--short);font-size:12.5px;line-height:1.4}
.auth-msg.ok:not(:empty){background:rgba(22,199,132,.12);color:var(--long)}
.auth-skip{display:block;width:100%;margin-top:12px;background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;padding:6px;transition:color .15s}
.auth-skip:hover{color:var(--txt-2)}
.btn:disabled{opacity:.6;cursor:default}

/* ===== #6 full-screen trade review ===== */
.rv-card{max-width:720px;width:92%;max-height:90vh;overflow-y:auto}
.rv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.rv-verdict .rv-big{font-size:30px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.rv-verdict .rv-sub{color:var(--muted);font-size:13px;margin-top:4px;font-family:var(--mono)}
.rv-verdict.win .rv-big{color:var(--long)}
.rv-verdict.loss .rv-big{color:var(--short)}
.rv-verdict.flat .rv-big{color:var(--txt)}
.rv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.rv-stat{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px}
.rv-stat .rv-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rv-stat .rv-v{font-size:19px;font-weight:800;font-family:var(--mono);margin-top:5px}
.rv-stat .rv-v.pos{color:var(--long)}
.rv-stat .rv-v.neg{color:var(--short)}
.rv-insight{background:var(--panel-2);border-left:3px solid var(--accent);border-radius:8px;padding:12px 14px;font-size:14px;line-height:1.55;color:var(--txt-2)}
.rv-insight b{color:var(--txt)}
.rv-ai{margin-top:14px;min-height:18px}
.rv-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.rv-toggle{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);cursor:pointer;user-select:none}
.rv-toggle input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.rv-actions{display:flex;gap:8px;margin-left:auto}
@media(max-width:560px){.rv-stats{grid-template-columns:repeat(2,1fr)}.rv-card{padding:16px}.rv-verdict .rv-big{font-size:24px}}

/* ===== #9/#17 profile: account banner + bigger stats ===== */
.pf-acc{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.pf-acc.ok{border-color:rgba(22,199,132,.38)}
.pf-acc-ic{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;background:var(--panel-2);color:var(--muted)}
.pf-acc.ok .pf-acc-ic{background:rgba(22,199,132,.16);color:var(--long)}
.pf-acc-t{font-weight:700;font-size:13.5px}
.pf-acc-s{font-size:12px;color:var(--muted);margin-top:1px;word-break:break-all}
.pf-acc-btn{margin-left:auto;flex:none}
.pf-stats{gap:12px!important}
.pf-stat{padding:16px 14px!important}
.pf-stat .pf-v{font-size:23px!important}

/* ===== profile header + analysis polish (Anton critique 2) ===== */
.rank-card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.lb-me{align-items:center;gap:12px;margin-bottom:14px}
.lb-name-input{background:var(--bg);border:1px solid var(--line-2);border-radius:9px;color:var(--txt);padding:9px 12px 9px 34px;font-size:14px;font-weight:700;outline:none;transition:border-color .15s;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:11px center}
.lb-name-input:focus{border-color:var(--accent)}
.lb-name-input::placeholder{color:var(--muted);font-weight:500}
.lb-rankbox{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.lb-rank-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.lb-rank{font-family:var(--mono);font-weight:800;font-size:15px;color:var(--txt)}
.an-metrics{gap:10px}
.an-chip{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 10px}
.an-chip .an-v{font-size:19px;font-weight:800;font-family:var(--mono)}
.an-head{background:var(--panel-2);border-left:3px solid var(--accent);border-radius:9px;padding:11px 13px;font-weight:700;font-size:13.5px;margin:14px 0 10px}
.an-item{border-radius:9px}

/* ===== #2 welcome splash ===== */
.start-splash{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 38%, rgba(124,77,255,.12), transparent 60%), var(--bg);transition:opacity .42s ease, visibility .42s}
.start-splash.hidden{opacity:0;visibility:hidden;pointer-events:none}
.ss-inner{text-align:center;max-width:460px;padding:24px;animation:ssIn .6s cubic-bezier(0.23,1,0.32,1) both}
.ss-logo{width:84px;height:84px;margin:0 auto 22px;border-radius:22px;display:grid;place-items:center;font-size:33px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),#a855f7);box-shadow:0 14px 44px rgba(124,77,255,.42)}
.ss-title{font-size:34px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.ss-title b{color:var(--accent)}
.ss-tag{font-size:15px;line-height:1.55;color:var(--txt-2);margin-bottom:28px}
.ss-go{font-size:16px;padding:14px 30px;display:inline-flex;align-items:center;gap:10px}
.ss-go .ic{width:18px;height:18px}
@keyframes ssIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:560px){.ss-title{font-size:27px}.ss-logo{width:72px;height:72px;font-size:28px}}

/* ===== #3 topbar: tagline slides out on hover ===== */
.brand{cursor:default}
.brand-sub{max-height:0;opacity:0;overflow:hidden;transform:translateY(-3px);transition:max-height .3s cubic-bezier(0.23,1,0.32,1), opacity .22s ease, transform .3s cubic-bezier(0.23,1,0.32,1)}
.brand:hover .brand-sub,.brand:focus-within .brand-sub{max-height:24px;opacity:.62;transform:translateY(0)}

/* ===== splash animations (Anton: "появилось без анимаций") ===== */
.ss-inner{animation:none}
.ss-logo{animation:ssLogoIn .7s cubic-bezier(.34,1.56,.64,1) both, ssGlow 3s ease-in-out 1.1s infinite}
.ss-title{animation:ssUp .6s cubic-bezier(.23,1,.32,1) .18s both}
.ss-tag{animation:ssUp .55s cubic-bezier(.23,1,.32,1) .3s both}
.ss-go{animation:ssUp .55s cubic-bezier(.23,1,.32,1) .44s both}
@keyframes ssLogoIn{0%{opacity:0;transform:scale(.55) translateY(12px)}60%{opacity:1}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes ssUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ssGlow{0%,100%{box-shadow:0 14px 44px rgba(124,77,255,.42)}50%{box-shadow:0 16px 64px rgba(124,77,255,.72)}}
/* reduced-motion killer removed — Anton wants animations */

/* ===== profile/analysis breathing room (Anton: "в кучу всё") ===== */
#lbModal .modal-card{max-width:480px}
.rank-card{margin-bottom:14px}
.lb-me{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.lb-tabs{margin-bottom:16px}
.an-metrics{margin-bottom:4px}
.an-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.an-ai-tx{line-height:1.6}
.an-ai-card{padding:14px;margin-top:4px}

/* ============ CINEMATIC ONBOARDING ============ */
.intro{position:fixed;inset:0;z-index:300;overflow:hidden;background:#08080f;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease, visibility .6s}
.intro.hidden{opacity:0;visibility:hidden;pointer-events:none}
.intro-bg{position:absolute;inset:0;overflow:hidden}
.intro-bg i{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;mix-blend-mode:screen}
.intro-bg i:nth-child(1){width:540px;height:540px;background:#7c4dff;left:-8%;top:-14%;animation:blobA 17s ease-in-out infinite}
.intro-bg i:nth-child(2){width:460px;height:460px;background:#3b82f6;right:-6%;top:6%;animation:blobB 21s ease-in-out infinite}
.intro-bg i:nth-child(3){width:520px;height:520px;background:#d946ef;left:32%;bottom:-20%;animation:blobC 24s ease-in-out infinite}
@keyframes blobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,46px) scale(1.16)}}
@keyframes blobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-54px,64px) scale(1.1)}}
@keyframes blobC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(44px,-54px) scale(1.22)}}
.intro-line{position:absolute;left:0;right:0;bottom:0;width:100%;height:44%;opacity:.15;pointer-events:none}
.intro-line polyline{fill:none;stroke:#a78bfa;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3600;stroke-dashoffset:3600;animation:introDraw 3.2s ease-out .5s forwards}
@keyframes introDraw{to{stroke-dashoffset:0}}
.intro-stage{position:relative;z-index:2;width:100%;max-width:540px;padding:28px;text-align:center}
.scene{display:none}
.scene.active{display:block}
.intro-logo{position:relative;width:122px;height:122px;margin:0 auto 30px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(135deg,#7c4dff,#d946ef);box-shadow:0 22px 72px rgba(124,77,255,.55);animation:logoPop 1s cubic-bezier(.34,1.56,.64,1) both, logoFloat 5s ease-in-out 1.1s infinite}
.intro-logo span{font-size:47px;font-weight:800;color:#fff;letter-spacing:1px}
.intro-logo::before{content:"";position:absolute;inset:-15px;border-radius:42px;background:conic-gradient(from 0deg,transparent,rgba(167,139,250,.65),transparent 42%);animation:introSpin 6s linear infinite;z-index:-1;filter:blur(3px)}
@keyframes logoPop{0%{opacity:0;transform:scale(.4) rotate(-14deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes introSpin{to{transform:rotate(360deg)}}
.intro-title{font-size:43px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px;background:linear-gradient(90deg,#ffffff,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent;animation:introUp .7s cubic-bezier(.23,1,.32,1) .28s both}
.intro-title b{background:linear-gradient(90deg,#a855f7,#d946ef);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro-sub{font-size:16px;color:#b6bcca;margin:0 0 32px;animation:introUp .7s cubic-bezier(.23,1,.32,1) .44s both}
.scene-ic{width:66px;height:66px;margin:0 auto 22px;border-radius:18px;display:grid;place-items:center;background:rgba(124,77,255,.15);color:#a78bfa;animation:introPop .6s cubic-bezier(.34,1.56,.64,1) both}
.scene-ic svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scene-h{font-size:29px;font-weight:800;margin:0 0 12px;color:#f3f4f8;animation:introUp .6s cubic-bezier(.23,1,.32,1) .1s both}
.scene-p{font-size:15.5px;line-height:1.62;color:#aab0bf;margin:0 auto 28px;max-width:430px;animation:introUp .6s cubic-bezier(.23,1,.32,1) .2s both}
@keyframes introUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes introPop{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}
.intro-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,#7c4dff,#a855f7);color:#fff;border:none;border-radius:14px;padding:15px 36px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 10px 30px rgba(124,77,255,.45);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;animation:introUp .6s cubic-bezier(.23,1,.32,1) .52s both}
.intro-cta small{font-size:11px;font-weight:600;opacity:.82;margin-left:2px}
.intro-cta svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.intro-cta:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 42px rgba(124,77,255,.62)}
.intro-cta:active{transform:translateY(-1px) scale(.99)}
.scene[data-scene="hero"] .intro-cta{animation:introUp .6s cubic-bezier(.23,1,.32,1) .52s both, ctaPulse 2.6s ease-in-out 1.6s infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 10px 30px rgba(124,77,255,.45)}50%{box-shadow:0 10px 46px rgba(124,77,255,.78)}}
.intro-ghost{display:block;margin:16px auto 0;background:none;border:none;color:#8a93a6;font-size:13px;cursor:pointer;transition:color .15s;animation:introUp .6s ease .62s both}
.intro-ghost:hover{color:#c4cad6}
.scene-actions{display:flex;flex-direction:column;align-items:center}
.intro-input{display:block;width:100%;max-width:340px;margin:0 auto 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:14px 16px;color:#fff;font-size:15px;outline:none;text-align:center;transition:border-color .15s,background .15s;animation:introUp .6s ease .26s both}
.intro-input:focus{border-color:#a855f7;background:rgba(255,255,255,.07)}
.intro-input::placeholder{color:#6b7180}
.intro-msg{min-height:18px;font-size:12.5px;color:#f6465d;margin-bottom:10px}
.intro-msg.ok{color:#16c784}
.tour-num{width:44px;height:44px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;background:linear-gradient(135deg,#7c4dff,#d946ef);box-shadow:0 8px 24px rgba(124,77,255,.5);animation:introPop .5s cubic-bezier(.34,1.56,.64,1) both}
.tour-dots{display:flex;justify-content:center;gap:8px;margin:22px 0 22px}
.tour-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .35s cubic-bezier(.23,1,.32,1)}
.tour-dots i.on{width:26px;border-radius:4px;background:linear-gradient(90deg,#a855f7,#d946ef)}
@media(max-width:560px){.intro-title{font-size:32px}.intro-logo{width:98px;height:98px}.intro-logo span{font-size:38px}.scene-h{font-size:23px}}
/* reduced-motion killer removed — Anton wants animations */

/* ===== onboarding round 2: depth, parallax, 3D, live chart (refs: wearebrand/hyliox) ===== */
.intro{--px:0;--py:0}
.intro-bg{transform:translate(calc(var(--px)*-26px),calc(var(--py)*-16px));transition:transform .25s ease-out;will-change:transform}
.intro-line{transform:translate(calc(var(--px)*22px),calc(var(--py)*13px));transition:transform .25s ease-out;will-change:transform}
.intro-line path{fill:none;stroke:url(#introGrad);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3600;stroke-dashoffset:3600;animation:introDraw 3.4s ease-out .6s forwards;filter:drop-shadow(0 0 7px rgba(167,139,250,.55))}
.intro-dot{fill:#fff;filter:drop-shadow(0 0 9px rgba(217,70,239,.95))}
.intro-logo-wrap{display:inline-block;transform:perspective(820px) rotateY(calc(var(--px)*20deg)) rotateX(calc(var(--py)*-20deg));transition:transform .18s ease-out;transform-style:preserve-3d;will-change:transform}
.intro-specs span{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:rgba(167,139,250,.45);opacity:0;animation:specIn .9s ease forwards;pointer-events:none;white-space:nowrap}
.intro-specs .s1{top:13%;left:7%;animation-delay:1.1s}
.intro-specs .s2{top:22%;right:8%;animation-delay:1.4s}
.intro-specs .s3{bottom:18%;left:10%;animation-delay:1.7s}
@keyframes specIn{from{opacity:0;transform:translateY(10px)}to{opacity:.45;transform:none}}
@media(max-width:680px){.intro-specs span{display:none}}
/* reduced-motion killer removed — Anton wants animations */

/* ===== onboarding round 3: live particle depth field ===== */
.intro-bg{z-index:0}
.intro-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.intro-line{z-index:1}
.intro-stage{z-index:3}
.intro-specs{z-index:3}

/* ===== onboarding round 4: real WebGL 3D (Three.js, lazy) ===== */
.intro-gl{position:absolute;inset:0;z-index:1;pointer-events:none}
.intro-gl canvas{width:100%!important;height:100%!important;display:block}
.intro-fx{transition:opacity .9s ease}

/* ============ PREMIUM DESIGN LAYER — whole-app glow-up ============ */
body{ background:
  radial-gradient(1100px 760px at 12% -8%, rgba(124,77,255,.10), transparent 55%),
  radial-gradient(1000px 700px at 112% 6%, rgba(59,130,246,.07), transparent 55%),
  var(--bg); }
.topbar{ background:linear-gradient(180deg, rgba(146,109,255,.06), rgba(255,255,255,.012)); border-bottom:1px solid rgba(255,255,255,.07); -webkit-backdrop-filter:blur(12px) saturate(1.15); backdrop-filter:blur(12px) saturate(1.15); }
.chart-card,.start-card,.panel,.modal-card,.rank-card,.rv-card,.bt-card{ border:1px solid rgba(255,255,255,.07); box-shadow:0 14px 44px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.045); }
.modal-card{ -webkit-backdrop-filter:blur(20px) saturate(1.2); backdrop-filter:blur(20px) saturate(1.2); }
.start-card{ background:linear-gradient(180deg, rgba(146,109,255,.05), rgba(255,255,255,.012)), var(--panel); }
.inst-card{ transition:transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s, box-shadow .18s; }
.inst-card:hover{ transform:translateY(-3px); border-color:rgba(168,85,247,.5); box-shadow:0 16px 36px rgba(124,77,255,.22); }
.chip-btn{ transition:transform .15s, border-color .15s, box-shadow .15s; }
.chip-btn:hover{ border-color:rgba(168,85,247,.5); box-shadow:0 4px 14px rgba(124,77,255,.25); }
.btn{ transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, filter .18s, border-color .18s, background .18s; }
.btn-primary{ background:linear-gradient(135deg, #7c4dff, #a855f7); border:none; box-shadow:0 8px 24px rgba(124,77,255,.4); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 34px rgba(124,77,255,.6); filter:brightness(1.06); }
.btn-primary:active{ transform:translateY(0) scale(.99); }
.btn-ghost:hover{ border-color:rgba(168,85,247,.45); }
.seg-btn.active{ box-shadow:0 4px 16px rgba(124,77,255,.42); }
.lb-tab.active{ box-shadow:0 4px 16px rgba(124,77,255,.45); }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(168,85,247,.4); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(168,85,247,.65); }
*::-webkit-scrollbar-track{ background:transparent; }

/* disclaimer line in welcome scene */
.scene-note{font-size:11.5px;line-height:1.45;color:var(--muted);opacity:.72;margin:-14px auto 22px;max-width:380px}
.footer-disc{color:#8a8f9c}

/* title shimmer (kinetic premium) */
.intro-title{background:linear-gradient(110deg,#b9a6f0 0%,#ffffff 48%,#b9a6f0 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:introUp .7s cubic-bezier(.23,1,.32,1) .28s both, titleShine 5.5s ease-in-out 1.8s infinite}
@keyframes titleShine{0%{background-position:0% center}50%{background-position:130% center}100%{background-position:0% center}}

/* ============ PREMIUM WORKSPACE — whole-site level-up (#66) ============ */
/* stat boxes */
.stat{ background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); border:1px solid rgba(255,255,255,.06); border-radius:12px; transition:transform .16s cubic-bezier(.34,1.56,.64,1), border-color .16s, box-shadow .16s; }
.stat:hover{ transform:translateY(-2px); border-color:rgba(168,85,247,.32); box-shadow:0 8px 22px rgba(124,77,255,.16); }
.stat-val{ font-weight:800; }
/* LONG / SHORT direction buttons */
.dir{ transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, border-color .18s, background .18s; }
.dir.long:hover{ border-color:rgba(22,199,132,.6); box-shadow:0 8px 24px rgba(22,199,132,.2); transform:translateY(-1px); }
.dir.short:hover{ border-color:rgba(246,70,93,.6); box-shadow:0 8px 24px rgba(246,70,93,.2); transform:translateY(-1px); }
.dir.long.active{ background:linear-gradient(180deg, rgba(22,199,132,.2), rgba(22,199,132,.06)); border-color:rgba(22,199,132,.7); box-shadow:0 6px 20px rgba(22,199,132,.3); }
.dir.short.active{ background:linear-gradient(180deg, rgba(246,70,93,.2), rgba(246,70,93,.06)); border-color:rgba(246,70,93,.7); box-shadow:0 6px 20px rgba(246,70,93,.3); }
/* inputs & readout */
.field input, .readout{ transition:border-color .15s, box-shadow .15s, background .15s; }
.field input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,77,255,.16); outline:none; }
.readout{ font-weight:700; }
/* result badge richer glass */
.result-badge{ border-radius:12px; }
.result-badge.win{ background:linear-gradient(135deg, rgba(22,199,132,.22), rgba(22,199,132,.07)); box-shadow:0 8px 26px rgba(22,199,132,.2), inset 0 1px 0 rgba(255,255,255,.06); }
.result-badge.loss{ background:linear-gradient(135deg, rgba(246,70,93,.22), rgba(246,70,93,.07)); box-shadow:0 8px 26px rgba(246,70,93,.2), inset 0 1px 0 rgba(255,255,255,.06); }
/* leaderboard rows + modal close hover */
.lb-list .lb-row{ transition:background .15s, transform .15s; }
.lb-list .lb-row:hover{ background:rgba(168,85,247,.07); }
.modal-close{ transition:color .15s, background .15s, transform .15s; border-radius:8px; }
.modal-close:hover{ color:var(--txt); background:rgba(255,255,255,.06); transform:rotate(90deg); }
/* chips press feedback */
.chip-btn:active{ transform:scale(.97); }
/* segmented active subtle inner highlight */
.seg-btn.active{ position:relative; }
.panel-title{ letter-spacing:.02em; }

/* ===== intro: readable text scrim + cinematic scene transitions ===== */
.intro-stage::before{ content:""; position:absolute; inset:-30px -12%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 56% 62% at 50% 52%, rgba(8,8,15,.88) 0%, rgba(8,8,15,.58) 42%, rgba(8,8,15,0) 76%); }
.scene.active{ animation: sceneFadeIn .55s ease both; }
@keyframes sceneFadeIn{ from{ opacity:0 } to{ opacity:1 } }
.scene.leaving{ pointer-events:none; animation: sceneLeave .38s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes sceneLeave{ from{ opacity:1; transform:none; filter:blur(0) } to{ opacity:0; transform:translateY(-20px) scale(.965); filter:blur(5px) } }

/* ============ WILD INTRO ANIMATIONS (agency-level) ============ */
/* kinetic per-word title reveal */
.intro-title{ font-size:43px; font-weight:800; letter-spacing:-.02em; margin:0 0 12px; background:none; -webkit-text-fill-color:initial; animation:none; }
.intro-title .tw{ display:inline-block; overflow:hidden; vertical-align:bottom; line-height:1.08; padding-bottom:.1em; }
.intro-title .tw > i{ display:inline-block; font-style:normal; font-weight:800; transform:translateY(120%); animation: twUp .95s cubic-bezier(.16,1.05,.3,1) both; background:linear-gradient(180deg,#ffffff,#cdb9ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.intro-title .tw:nth-child(1) > i{ animation-delay:.3s }
.intro-title .tw:nth-child(2) > i{ animation-delay:.5s }
.intro-title .tw-g{ background:linear-gradient(180deg,#c879ff,#e64bd0)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important }
@keyframes twUp{ from{ transform:translateY(120%) } to{ transform:translateY(0) } }
@media(max-width:560px){ .intro-title{ font-size:31px } }

/* dramatic scene transitions (override) */
.scene.active{ animation: sceneFadeIn .72s cubic-bezier(.16,1.05,.3,1) both; }
.scene.leaving{ pointer-events:none; animation: sceneLeave .42s cubic-bezier(.55,0,.85,.25) forwards; }
@keyframes sceneFadeIn{ 0%{opacity:0; transform:scale(.9) translateY(28px); filter:blur(10px)} 55%{opacity:1} 100%{opacity:1; transform:none; filter:blur(0)} }
@keyframes sceneLeave{ from{opacity:1; transform:scale(1); filter:blur(0)} to{opacity:0; transform:scale(1.2); filter:blur(16px)} }

/* logo entrance burst ring */
.intro-logo::after{ content:""; position:absolute; inset:0; border-radius:30px; border:2px solid rgba(206,128,255,.85); animation: logoBurst 1.2s cubic-bezier(.2,.8,.2,1) .15s both; pointer-events:none; }
@keyframes logoBurst{ 0%{ transform:scale(1); opacity:.85 } 100%{ transform:scale(2.6); opacity:0 } }
.intro-logo{ animation: logoPop 1.05s cubic-bezier(.2,1.6,.35,1) both, logoFloat 5s ease-in-out 1.2s infinite; }
@keyframes logoPop{ 0%{ opacity:0; transform:scale(.3) rotate(-18deg) } 70%{ opacity:1 } 100%{ opacity:1; transform:scale(1) rotate(0) } }

/* bold staggered entrances */
.intro-sub{ animation: introUpBig .85s cubic-bezier(.16,1.05,.3,1) .62s both; }
.scene[data-scene="hero"] .intro-cta{ animation: introUpBig .85s cubic-bezier(.16,1.05,.3,1) .78s both, ctaPulse 2.6s ease-in-out 1.9s infinite; }
.scene-ic{ animation: introPopBig .8s cubic-bezier(.2,1.5,.35,1) both; }
.scene-h{ animation: introUpBig .7s cubic-bezier(.16,1.05,.3,1) .12s both; }
.scene-p{ animation: introUpBig .7s cubic-bezier(.16,1.05,.3,1) .24s both; }
@keyframes introUpBig{ from{ opacity:0; transform:translateY(36px) scale(.92) } to{ opacity:1; transform:none } }
@keyframes introPopBig{ 0%{ opacity:0; transform:scale(.4) } 100%{ opacity:1; transform:scale(1) } }