/* Spot Station · Aurora design (mirrors the Android app). Paper = violet, Live = ocean blue. No inline styles are used anywhere (strict CSP). */
:root{
  --bg:#120C26;--surface:#1D1540;--sv:#2B2060;--primary:#5CF2C5;--onprimary:#062B22;--pc:#3B2A7A;--onpc:#EFE8FF;
  --secondary:#FFC857;--tertiary:#FF7EB6;--text:#F4F1FF;--mute:#BDB4E6;--outline:#5646A0;
  --up:#5CF2C5;--down:#FF7184;--gold:#FFC857;--hot:#FF7A3D;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
body.live{
  --bg:#05192E;--surface:#0A2A4A;--sv:#124068;--primary:#5CD6FF;--onprimary:#00283D;--pc:#0F5E8C;--onpc:#F3FCFF;
  --secondary:#9DF0FF;--tertiary:#FFC857;--text:#F5FCFF;--mute:#CDEBFF;--outline:#4E95B7;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text",Roboto,system-ui,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
#app{max-width:680px;margin:0 auto;min-height:100vh;padding:calc(var(--safe-t) + 64px) 0 calc(var(--safe-b) + 84px)}
#top{position:fixed;top:0;left:0;right:0;z-index:30;background:var(--surface);padding-top:var(--safe-t)}
.tbar{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:4px;padding:6px 8px;min-height:56px}
.tbar .ttl{flex:1;min-width:0;padding:0 6px}
.tbar .ttl b{display:block;font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbar .ttl small{display:block;font-size:11px;color:var(--mute);letter-spacing:.02em}
.tb{background:none;border:0;padding:10px 12px;border-radius:20px;color:var(--primary);font-weight:600;font-size:14px}
.tb.menu{font-size:22px;padding:6px 12px;line-height:1}
.tb.exit{color:var(--down)}
#modebar{background:var(--pc);color:var(--onpc);display:flex;align-items:center;gap:10px;padding:6px 16px}
#modebar b{flex:1;font-size:14px}
#modebar .tb{padding:6px 8px;font-size:13px}
#statusline{background:var(--sv);display:flex;justify-content:space-between;padding:6px 16px;font-size:11px;color:var(--mute)}
#statusline .ok{color:var(--up)}#statusline .bad{color:var(--down)}
#menu{position:absolute;left:8px;top:calc(var(--safe-t) + 54px);min-width:230px;background:var(--sv);border-radius:12px;padding:6px 0;box-shadow:0 8px 28px rgba(0,0,0,.5);z-index:40}
#menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:13px 18px;font-size:15px;color:var(--text)}
#menu button:active{background:rgba(255,255,255,.1)}
#scrim{position:fixed;inset:0;z-index:35;background:transparent}
#view{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
#view>*{flex-shrink:0}
nav#tabs{position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--surface);padding:6px 4px calc(var(--safe-b) + 6px);display:flex;justify-content:center;box-shadow:0 -1px 0 rgba(255,255,255,.06)}
nav#tabs .in{display:flex;width:100%;max-width:680px}
nav#tabs button{flex:1;background:none;border:0;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;line-height:12px;padding:4px 0;text-align:center;white-space:pre-line}
nav#tabs button i{font-style:normal;font-size:22px;line-height:28px;width:60px;border-radius:14px;display:block;transition:background .2s}
nav#tabs button.on{color:var(--text);font-weight:600}
nav#tabs button.on i{background:var(--pc)}
/* panels */
.panel{border:1px solid color-mix(in srgb,var(--tint) 40%,transparent);border-radius:20px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 28%,var(--surface)),color-mix(in srgb,var(--tint) 6%,var(--surface)));padding:16px 16px 16px 22px;display:flex;flex-direction:column;gap:8px}
.panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--tint)}
.panel.tight{padding:12px 14px 12px 20px;gap:5px}
.t-mint{--tint:#5CF2C5}.t-blue{--tint:#7AA8FF}.t-violet{--tint:#C08BFF}.t-gold{--tint:#FFC857}.t-pink{--tint:#FF7EB6}.t-cyan{--tint:#4FD8FF}
.t-hot{--tint:#FF7A3D}.t-red{--tint:#FF7184}.t-azure{--tint:#4FA3FF}.t-l1{--tint:#5CF2C5}.t-l2{--tint:#FFC857}.t-l3{--tint:#FF9F43}.t-l4{--tint:#FF5C7A}
.ptitle{font-weight:700;font-size:16px}
.foldh{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;padding:0;text-align:left}
.foldh .ptitle{flex:1}
.foldh .arr{font-size:26px;line-height:20px;color:var(--primary)}
.pbody{display:flex;flex-direction:column;gap:8px}
.gcard{border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:10px;color:#fff}
.g-surge{background:linear-gradient(135deg,#FF7A3D,#FF3D8B)}.g-slow{background:linear-gradient(135deg,#12B5A6,#2F7DFF)}
.g-manual{background:linear-gradient(135deg,#8B5CF6,#5B4BFF)}.g-ai{background:linear-gradient(135deg,#00D4FF,#3FBF8A)}
.g-hero{background:linear-gradient(135deg,#4B2BB0,#C0357F)}.g-heroLive{background:linear-gradient(135deg,#0B4F8A,#0FA3C7)}
.gcard .row{display:flex;align-items:center;gap:10px}
.gcard h2{margin:0;font-size:20px;font-weight:700}
.gcard .tag{font-size:13px;opacity:.85}
.gcard .big{font-size:34px;font-weight:800;line-height:1.1}
.gcard .small{font-size:13px;opacity:.9}
.gcard .xs{font-size:11px;opacity:.85}
.gcard .ico{font-size:30px}
.gcard.click{cursor:pointer}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-block;font-size:11px;font-weight:800;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.22);color:#fff;letter-spacing:.02em}
.chip.green{background:rgba(18,185,129,.9)}.chip.red{background:rgba(224,52,79,.9)}.chip.amber{background:rgba(183,121,31,.9)}
.chip.violet{background:rgba(109,74,255,.9)}.chip.orange{background:rgba(255,122,61,.9)}.chip.grey{background:rgba(74,68,112,.9)}
.mini{display:flex;gap:12px}.mini>div{flex:1;min-width:0}
.mini label{display:block;font-size:11px;opacity:.75}.mini b{font-weight:600;font-size:15px}
.prog{height:4px;border-radius:4px;background:rgba(255,255,255,.25);overflow:hidden}.prog .bar{height:100%;background:#fff;width:0}
/* text bits */
.mute{color:var(--mute)}.up{color:var(--up)}.down{color:var(--down)}.gold{color:var(--gold)}.hot{color:var(--hot)}.prim{color:var(--primary)}
.sm{font-size:12px}.xs{font-size:11px}.b{font-weight:700}.sb{font-weight:600}
.lbl{font-size:12px;color:var(--mute)}
.title{padding:4px 0}.title b{display:block;font-size:20px}.title span{font-size:12px;color:var(--mute)}
.kv{display:flex;justify-content:space-between;gap:10px}.kv span:first-child{color:var(--mute)}.kv span:last-child{font-weight:600;text-align:right}
.hr{height:1px;background:rgba(255,255,255,.12);margin:4px 0}
.row{display:flex;align-items:center;gap:10px}.row.sb{justify-content:space-between}.grow{flex:1;min-width:0}
.col{display:flex;flex-direction:column;gap:2px}
.right{text-align:right}
p{margin:0}
.banner{border-radius:12px;padding:10px 12px;background:rgba(255,200,87,.15);border:1px solid rgba(255,200,87,.5);color:#ffe3a1;font-size:13px}
.banner.err{background:rgba(255,113,132,.15);border-color:rgba(255,113,132,.6);color:#ffc9d1}
.empty{text-align:center;color:var(--mute);padding:20px 8px;font-size:13px}
/* buttons */
.btn{appearance:none;border:0;border-radius:99px;background:var(--primary);color:var(--onprimary);font-weight:600;font-size:14px;padding:11px 20px;text-align:center;line-height:1.2}
.btn.out{background:transparent;border:1px solid var(--outline);color:var(--primary)}
.btn.txt{background:transparent;color:var(--primary);padding:10px 12px}
.btn.danger{background:var(--down);color:#000}
.btn.tonal{background:var(--pc);color:var(--onpc)}
.btn.s{padding:7px 12px;font-size:13px}
.btn.blk{width:100%}
.btn:disabled,.btn.dis{opacity:.4;pointer-events:none}
.btns{display:flex;gap:8px;flex-wrap:wrap}.btns>.btn{flex:1;min-width:0;white-space:nowrap}
.btns.nw>.btn{flex:0 0 auto}
/* switch */
.sw{position:relative;display:inline-block;width:52px;height:32px;flex:none}
.sw input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;z-index:2}
.sw span{position:absolute;inset:0;border-radius:99px;background:var(--sv);border:2px solid var(--outline);transition:.2s}
.sw span::after{content:"";position:absolute;top:50%;left:6px;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--outline);transition:.2s}
.sw input:checked+span{background:var(--primary);border-color:var(--primary)}
.sw input:checked+span::after{left:26px;width:22px;height:22px;margin-top:-11px;left:23px;background:var(--onprimary)}
.sw input:disabled+span{opacity:.4}
.gcard .sw span{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.7)}.gcard .sw span::after{background:rgba(255,255,255,.8)}
.gcard .sw input:checked+span{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.55)}.gcard .sw input:checked+span::after{background:#fff}
.tg{display:flex;align-items:center;justify-content:space-between;gap:12px}.tg>span:first-child{flex:1}
/* inputs */
.fld{display:flex;flex-direction:column;gap:3px}
.fld label{font-size:12px;color:var(--mute)}
input[type=text],input[type=search],input[type=password],input[type=number],textarea,select{width:100%;background:transparent;border:1px solid var(--outline);border-radius:6px;color:var(--text);font:inherit;font-size:16px;padding:12px 12px;outline:0}
input:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
input:disabled{opacity:.5}
.chs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}.chs::-webkit-scrollbar{display:none}
.chs.wrap{flex-wrap:wrap;overflow:visible}
.fc{flex:none;border:1px solid var(--outline);background:transparent;color:var(--text);border-radius:8px;padding:7px 12px;font-size:13px;white-space:nowrap}
.fc.on{background:var(--pc);color:var(--onpc);border-color:var(--pc)}
.fc:disabled{opacity:.4}
input[type=range]{width:100%;accent-color:var(--primary);height:28px;margin:0}
.srow .top{display:flex;justify-content:space-between;font-size:13px}.srow .top b{color:var(--primary)}
/* positions & lists */
.sym b{font-size:16px}.sym small{color:var(--mute)}
.tagx{font-size:10px;font-weight:700;border-radius:6px;padding:2px 6px;background:var(--pc);color:var(--onpc);margin-left:6px;vertical-align:middle}
svg.spark{width:100%;display:block}
.movebar{flex:none}
.step3{display:flex;gap:8px}.step3>div{flex:1;border-radius:12px;padding:8px;text-align:center}
.s-w{background:rgba(92,242,197,.18);color:#5CF2C5}.s-r{background:rgba(255,200,87,.18);color:#FFC857}.s-b{background:rgba(255,122,61,.18);color:#FF7A3D}
.step3 b{display:block;font-weight:800;font-size:12px}.step3 span{display:block;font-size:12px;color:var(--text)}
.block2{border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px}
.mom{display:flex;gap:10px}.mom>div{flex:1;text-align:center;font-size:11px}
.mom svg{width:100%;height:30px;display:block}
/* sheet (dialog) */
#sheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;padding:0}
#sheet .dlg{width:100%;max-width:680px;max-height:92vh;background:var(--surface);border-radius:28px 28px 0 0;display:flex;flex-direction:column;padding:22px 20px calc(var(--safe-b) + 14px)}
#sheet .dlg h3{margin:0 0 10px;font-size:20px;font-weight:600}
#sheet .pin{display:flex;flex-direction:column;gap:9px;margin-bottom:8px}
#sheet .dbody{overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:9px;flex:1;min-height:0;padding-bottom:6px}
#sheet .dbtn{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}
#toast{position:fixed;left:16px;right:16px;bottom:calc(var(--safe-b) + 92px);z-index:80;background:#322a5e;color:#fff;border-radius:12px;padding:12px 14px;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.5);max-width:648px;margin:0 auto}
body.live #toast{background:#0f4a78}
#toast.err{background:#7a1530}
.pairscr{display:flex;flex-direction:column;gap:12px;padding-top:30px}
.cand{background:#0B0E11;border-radius:8px;width:100%;display:block}
.bcard{background:#161A1E;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;color:#EAECEF}
.rank{width:28px;height:28px;border-radius:50%;background:#2B3139;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}.rank.g{background:#F0B90B;color:#000}
.bbar{height:6px;border-radius:3px;background:#2B3139;overflow:hidden}.bbar i{display:block;height:100%;width:0;background:#848E9C}.bbar i.g{background:#0ECB81}
.chk{display:flex;gap:10px;align-items:flex-start;padding:6px 0}.chk input{width:22px;height:22px;accent-color:var(--primary);flex:none;margin-top:2px}
.noscroll{overflow:hidden}
.big20{font-size:20px;font-weight:800}
.step3>div[class^="lv"]{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:10px;font-size:11px;background:rgba(255,255,255,.06)}
.step3>.lv1{background:rgba(14,203,129,.18);color:#5FE3B0}.step3>.lv2{background:rgba(240,185,11,.18);color:#F0B90B}
.step3>.lv3{background:rgba(255,140,40,.2);color:#FFA24C}.step3>.lv4{background:rgba(246,70,93,.2);color:#FF7A8C}
.step3>.off{opacity:.4}
.lvt1{color:#5FE3B0}.lvt2{color:#F0B90B}.lvt3{color:#FFA24C}.lvt4{color:#FF7A8C}
#sheet .dbody>*,#sheet .pin>*{flex-shrink:0}
#sheet .chs{flex-wrap:wrap;overflow:visible}