:root{--bg:#0b0f17;--panel:#121826;--panel2:#182033;--bd:#243049;--tx:#e6ebf5;--mut:#8b97ad;--g:#22c55e;--r:#ef4444;--y:#f5c542;--b:#60a5fa;
--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Arial,sans-serif;-webkit-text-size-adjust:100%}
.hidden{display:none!important}
.mut{color:var(--mut)}.small{font-size:12px}.err{color:var(--r);min-height:1.2em}
.mono,.num{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
button,select,input{font:inherit;color:var(--tx);background:var(--panel2);border:1px solid var(--bd);border-radius:10px;padding:9px 12px}
button{cursor:pointer}button:active{transform:scale(.98)}
button.primary{background:var(--y);color:#111;border-color:var(--y);font-weight:700}
button.ghost{background:transparent}
button.icon{padding:6px 10px;font-size:16px;line-height:1}
.top{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:calc(10px + var(--safe-t)) 14px 10px;background:rgba(11,15,23,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--bd)}
.brand{font-weight:800;letter-spacing:.3px;font-size:17px}.brand span{color:var(--y);margin-left:3px}
.top-actions{display:flex;gap:8px;align-items:center}
.menu{position:sticky;top:52px;z-index:25;background:var(--panel);border-bottom:1px solid var(--bd);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.hint{background:#1d2740;border:1px solid var(--bd);border-radius:10px;padding:10px;font-size:13px;margin:0}
main{max-width:960px;margin:0 auto;padding:12px 12px calc(84px + var(--safe-b))}
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;background:rgba(18,24,38,.97);border-top:1px solid var(--bd);padding-bottom:var(--safe-b)}
.tabs a{flex:1;text-align:center;color:var(--mut);text-decoration:none;font-size:11px;padding:8px 0 9px;display:flex;flex-direction:column;align-items:center;gap:2px}
.tabs a span{font-size:18px;filter:grayscale(1)}
.tabs a.on{color:var(--y)}.tabs a.on span{filter:none}
h2{font-size:15px;margin:18px 4px 8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
h2 small{font-weight:400;color:var(--mut);font-size:12px}
.card{background:var(--panel);border:1px solid var(--bd);border-radius:14px;padding:12px;margin-bottom:10px}
.card.q{border-color:var(--y);box-shadow:0 0 0 1px rgba(245,197,66,.25)}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.sym{font-weight:800;font-size:16px}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--bd);color:var(--mut)}
.badge.long{color:var(--g);border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.08)}
.badge.short{color:var(--r);border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.08)}
.badge.win{color:var(--g);border-color:rgba(34,197,94,.5)}.badge.loss{color:var(--r);border-color:rgba(239,68,68,.5)}.badge.open{color:var(--b);border-color:rgba(96,165,250,.5)}
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0 6px}
.lv{background:var(--panel2);border-radius:8px;padding:6px;text-align:center}
.lv b{display:block;font-size:10px;color:var(--mut);font-weight:600;letter-spacing:.3px}
.lv .num{font-size:12px}
.lv.sl .num{color:var(--r)}.lv.tp .num{color:var(--g)}
.meter{display:flex;gap:12px;font-size:12px;color:var(--mut);flex-wrap:wrap}
.meter b{color:var(--tx)}
.reason{font-size:12.5px;color:#c5cee0;margin-top:6px}
.missing{font-size:12px;color:#f59e0b;margin-top:4px}
.empty{color:var(--mut);text-align:center;padding:18px;border:1px dashed var(--bd);border-radius:14px;margin-bottom:10px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.stat{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:10px}
.stat b{display:block;font-size:11px;color:var(--mut);font-weight:600}
.stat .num{font-size:18px;font-weight:700}
.pos{color:var(--g)}.neg{color:var(--r)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bd);border-radius:12px;margin-bottom:10px}
table{border-collapse:collapse;width:100%;font-size:12.5px;white-space:nowrap}
th,td{padding:7px 9px;text-align:right;border-bottom:1px solid var(--bd)}
th{background:var(--panel2);color:var(--mut);font-weight:600;position:sticky;top:0}
td:first-child,th:first-child{text-align:left;position:sticky;left:0;background:var(--panel)}
th:first-child{background:var(--panel2)}
tr:last-child td{border-bottom:0}
details{background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:10px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600}
pre{white-space:pre-wrap;word-break:break-word;font-size:11.5px;color:#c5cee0}
.pair-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.pair-controls select{flex:1;min-width:140px}
.seg{display:flex;border:1px solid var(--bd);border-radius:10px;overflow:hidden}
.seg button{border:0;border-radius:0;background:var(--panel2);padding:8px 11px}
.seg button.on{background:var(--y);color:#111;font-weight:700}
.chart{height:58vh;min-height:320px;border:1px solid var(--bd);border-radius:12px;overflow:hidden;margin:8px 0}
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px}
.gate-box{width:100%;max-width:360px;text-align:center}
.gate-box h1{margin:10px 0 4px}
.gate-box form{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(80px + var(--safe-b));background:var(--panel2);border:1px solid var(--bd);padding:10px 14px;border-radius:10px;z-index:50;max-width:90vw;font-size:13px}
@media (min-width:760px){.levels{grid-template-columns:repeat(5,minmax(90px,1fr))}.cards2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cards2 .card{margin:0}}