:root{--bg:#0b1020;--card:#151c36;--card2:#1e2748;--line:#2a3562;--text:#e9edfb;--mute:#8e9bc4;--amber:#f5b800;--green:#2ecc71;--red:#e5484d;
--b:#f5a623;--i:#2ecc71;--n:#3b82f6;--g:#ef4444;--o:#9b59f5;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Noto Sans Ethiopic","Nyala",sans-serif;font-size:15px}
body{padding:calc(env(safe-area-inset-top,0px) + 8px) 12px calc(env(safe-area-inset-bottom,0px) + 16px);max-width:520px;margin:0 auto;min-height:100vh}
.hidden{display:none!important}
.top{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:6px 2px 12px}
.bal small{display:block;color:var(--mute);font-size:11px}
.bal b{font-size:22px;color:var(--green)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--red);display:inline-block}.dot.on{background:var(--green)}
.btn{border:0;border-radius:12px;padding:12px 16px;font:inherit;font-weight:700;background:var(--amber);color:#10162a;cursor:pointer}
.btn.sm{padding:8px 12px;font-size:13px}.btn.ghost{background:var(--card2);color:var(--text)}.btn.red{background:var(--red);color:#fff}.btn.green{background:var(--green)}
.btn:disabled{opacity:.5}.btn.full{width:100%}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.stats.three{grid-template-columns:repeat(3,1fr)}
.stat{background:var(--card);border-radius:12px;padding:9px 4px;text-align:center;color:var(--mute);font-size:11px}
.stat b{display:block;color:var(--text);font-size:15px;margin-top:3px}
.panel{background:var(--card);border-radius:16px;padding:12px;margin-bottom:12px}
h2{margin:0 0 10px;font-size:18px}
.count{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.count b{font-size:26px;color:var(--amber)}
.picker{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.pn{border:0;border-radius:9px;height:40px;background:var(--card2);color:var(--text);font:inherit;font-weight:700}
.pn.taken{background:var(--red);color:#fff}.pn.mine{background:var(--amber);color:#10162a}
.legend{display:flex;gap:14px;color:var(--mute);font-size:12px;margin:10px 2px 0}
.ballrow{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:10px}
.ball{width:92px;height:92px;border-radius:50%;background:var(--amber);color:#10162a;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900;box-shadow:0 0 28px rgba(245,184,0,.45)}
.ball[data-l="0"]{background:var(--b)}.ball[data-l="1"]{background:var(--i)}.ball[data-l="2"]{background:var(--n);color:#fff}.ball[data-l="3"]{background:var(--g);color:#fff}.ball[data-l="4"]{background:var(--o);color:#fff}
.chip{width:42px;height:42px;border-radius:50%;background:var(--card2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.play{display:flex;gap:10px;align-items:flex-start}
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;flex:0 0 138px}
.board i,.card5 i{font-style:normal;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--card);font-size:11px;font-weight:700;height:22px;color:var(--mute)}
.board .hd,.card5 .hd{background:none;color:var(--text);font-weight:900;font-size:13px}
.board .on{color:#fff}.on.l0{background:var(--b)}.on.l1{background:var(--i)}.on.l2{background:var(--n)}.on.l3{background:var(--g)}.on.l4{background:var(--o)}
.mycard{flex:1;min-width:0}
.card5{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.card5 i{height:44px;font-size:16px;background:var(--card2);color:var(--text);border-radius:10px}
.card5 .hd{height:30px;color:#10162a;font-size:15px;border-radius:50px}
.card5 .m{background:#1f8a4c;color:#fff}.card5 .free{background:var(--green);color:#10162a}.card5 .win{outline:3px solid var(--amber)}
.banner{background:var(--card2);border-radius:12px;padding:12px;color:var(--mute);margin-bottom:12px;text-align:center}
.modal{position:fixed;inset:0;background:rgba(5,8,18,.78);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.modal .box{background:var(--card);width:100%;max-width:520px;border-radius:22px 22px 0 0;padding:18px 16px calc(env(safe-area-inset-bottom,0px) + 18px);max-height:92vh;overflow:auto}
.modal.center{align-items:center;padding:16px}.modal.center .box{border-radius:22px}
.tabs{display:flex;gap:6px;margin-bottom:12px}.tabs button{flex:1;border:0;border-radius:10px;padding:10px;background:var(--card2);color:var(--mute);font:inherit;font-weight:700}
.tabs button.on{background:var(--amber);color:#10162a}
label{display:block;color:var(--mute);font-size:12px;margin:10px 0 4px}
input,select{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
.acct{background:var(--card2);border-radius:12px;padding:10px;margin-bottom:8px;display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:13px}
.row{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.st-pending{color:var(--amber)}.st-approved,.st-completed{color:var(--green)}.st-rejected{color:var(--red)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#fff;color:#10162a;padding:11px 16px;border-radius:12px;font-weight:700;z-index:50;max-width:90vw;text-align:center}
.big{font-size:34px;font-weight:900;text-align:center;margin:4px 0;color:var(--amber)}
.mute{color:var(--mute);font-size:13px}.center{text-align:center}

/* v2.1 polish */
body{background:radial-gradient(1200px 500px at 50% -10%,#1a2350 0%,var(--bg) 60%) fixed}
.brand{font-weight:900;font-size:17px;background:linear-gradient(90deg,#f5b800,#ff7a59);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.3px}
.top .right{display:flex;gap:8px;align-items:center}
.iconbtn{border:0;width:38px;height:38px;border-radius:12px;background:var(--card2);color:var(--text);font-size:17px}
.stat.hl{background:linear-gradient(135deg,#3a2c05,#5a4308);color:#ffe08a;box-shadow:inset 0 0 0 1px rgba(245,184,0,.35)}.stat.hl b{color:var(--amber)}
.panel{box-shadow:0 8px 24px rgba(0,0,0,.25)}
.bar{height:6px;border-radius:6px;background:var(--card2);overflow:hidden;margin:2px 0 12px}.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--amber));transition:width .3s linear}
.pn{transition:transform .08s,background .2s}.pn:active{transform:scale(.92)}
.pn.mine{box-shadow:0 0 0 2px #fff3 inset,0 0 14px rgba(245,184,0,.5)}
@keyframes pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}100%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
.ball.pop{animation:pop .55s cubic-bezier(.2,.9,.3,1.3)}
.board .on.fresh{animation:pulse 1s ease-out}
.chip{transition:background .3s}
.card5 i{transition:background .3s}
.card5 .m{box-shadow:0 0 10px rgba(46,204,113,.45)}
.fall{position:fixed;top:-30px;font-size:24px;z-index:60;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.9}}
.win-title{font-size:38px;font-weight:900;text-align:center;color:var(--amber);text-shadow:0 0 22px rgba(245,184,0,.6)}

textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;resize:vertical}
.fb{background:var(--card2);border-radius:12px;padding:10px;margin-bottom:8px;font-size:13px}
.fb .rep{margin-top:6px;padding:8px;border-radius:8px;background:rgba(46,204,113,.12);color:#b8f1cf}

/* rooms */
.roombar{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.room{display:block;width:100%;text-align:left;border:0;border-radius:18px;padding:14px;margin-bottom:12px;background:var(--card);color:var(--text);font:inherit;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.room.vip{background:linear-gradient(135deg,#2b2208,#3d2f0a 60%,#1d1a2e);box-shadow:inset 0 0 0 1px rgba(245,184,0,.45),0 8px 24px rgba(0,0,0,.3)}
.room .t{display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:800}
.room .s{color:var(--mute);font-size:13px;margin-top:6px;line-height:1.5}
.room .b{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700;background:rgba(46,204,113,.15);color:#7ee2a8}
.pill{padding:3px 10px;border-radius:20px;font-size:12px;font-weight:800}
.pill.on{background:rgba(46,204,113,.18);color:#7ee2a8}.pill.off{background:rgba(142,155,196,.18);color:var(--mute)}.pill.live{background:rgba(229,72,77,.2);color:#ff8f93}

/* v2.8 */
.tabs{flex-wrap:wrap}.tabs button{flex:1 1 30%;font-size:13px;padding:9px 4px}
.card5.small{gap:3px}.card5.small i{height:30px;font-size:13px;border-radius:7px}.card5.small .hd{height:22px;font-size:12px}
.ct{color:var(--mute);font-size:12px;margin:8px 0 4px}
.fair{font-size:11px;color:var(--mute);margin:6px 0;word-break:break-all}
.winrow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}.winrow b{color:var(--amber)}
.rule{margin-bottom:10px;font-size:13px;line-height:1.5}.rule b{display:block;margin-bottom:2px;font-size:14px}
.chk{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:14px;color:var(--text)}.chk input{width:auto;margin-top:3px}
.opt{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.linkbox{word-break:break-all;background:var(--card2);padding:10px;border-radius:10px;font-size:13px}
.prog{height:8px;border-radius:8px;background:var(--card2);overflow:hidden;margin:8px 0 2px}.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--amber))}
#rooms>.btn{margin-top:4px}