:root{
  --g:#1f6b2a;--g2:#43a047;--g3:#2e7d32;--lime:#d8e14a;--lime2:#eef27a;
  --bg:#f3f6f2;--card:#fff;--line:#e0e6e2;--txt:#1b2620;--mut:#6b7a72;
  --m:#1976d2;--f:#d81b60;--warn-bg:#fff8e1;--warn-bd:#ffe082;--warn-tx:#8d6e00;
  --r:14px;--shadow:0 1px 3px rgba(0,0,0,.05);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,"PingFang HK","Microsoft JhengHei",system-ui,sans-serif;background:var(--bg);color:var(--txt);padding-bottom:calc(40px + env(safe-area-inset-bottom))}
button{font-family:inherit}
input,select,textarea{font-family:inherit}
a{color:var(--g)}
.hidden{display:none!important}

/* ---------- top bar ---------- */
.top{background:linear-gradient(135deg,var(--g),var(--g2));color:#fff;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;position:sticky;top:0;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.top .row{display:flex;align-items:center;gap:10px;max-width:680px;margin:0 auto}
.top .logo{width:34px;height:34px;border-radius:9px;flex:0 0 auto}
.top .ttl{flex:1;min-width:0}
.top .ttl b{display:block;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .ttl span{display:block;font-size:11px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .ic{all:unset;cursor:pointer;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;background:rgba(255,255,255,.14)}
.top .ic:active{background:rgba(255,255,255,.28)}
.codechip{all:unset;cursor:pointer;background:var(--lime);color:#1b2620;font-weight:800;letter-spacing:.12em;padding:6px 10px;border-radius:9px;font-size:13px;font-family:ui-monospace,Menlo,monospace}
.sync{display:inline-flex;align-items:center;gap:5px;font-size:11px;opacity:.95}
.sync i{width:8px;height:8px;border-radius:50%;background:#9e9e9e;display:inline-block}
.sync.ok i{background:#aee571;box-shadow:0 0 0 3px rgba(174,229,113,.25)}
.sync.off i{background:#ffb74d}
.sync.err i{background:#ef5350}

.wrap{max-width:680px;margin:0 auto;padding:14px 14px 0}
h2{font-size:15px;margin:22px 0 10px;color:var(--g);display:flex;align-items:center;gap:8px}
h2 small{font-weight:500;color:var(--mut);font-size:12px;margin-left:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:10px;box-shadow:var(--shadow)}
.empty{color:var(--mut);font-size:13px;text-align:center;padding:18px 8px;line-height:1.6}
small.hint{color:var(--mut);font-size:11px;display:block;margin-top:8px;line-height:1.55}
.warn{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-tx);font-size:12px;padding:9px 11px;border-radius:10px;margin-top:9px;line-height:1.5}

/* ---------- buttons ---------- */
.btns{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.btn{flex:1;min-width:100px;padding:12px;border:none;border-radius:11px;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.2}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn.pri{background:var(--g);color:#fff}
.btn.sec{background:#fff;color:var(--g);border:1.5px solid var(--g2)}
.btn.dng{background:#fff;color:#c62828;border:1.5px solid #f2c9c9}
.btn.exp{background:linear-gradient(135deg,#f9a825,#f57f17);color:#fff}
.btn.lime{background:var(--lime);color:#1b2620}
.btn.sm{padding:8px 10px;font-size:13px;min-width:0;flex:0 0 auto}
.count{font-size:12px;color:var(--mut);text-align:center;margin-top:-4px;line-height:1.5}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.field label{font-size:12px;color:var(--mut);font-weight:600}
.inp{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;background:#fff}
.inp:focus{outline:none;border-color:var(--g2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.addrow{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.addrow input{flex:1;min-width:130px;padding:9px;border:1.5px solid var(--line);border-radius:9px;font-size:15px}
.addrow select{padding:9px;border:1.5px solid var(--line);border-radius:9px;font-size:14px;background:#fff}
.addrow .btn{flex:0 0 auto;min-width:64px;padding:9px 12px}
.codeinp{text-transform:uppercase;letter-spacing:.3em;font-weight:800;font-size:22px!important;text-align:center;font-family:ui-monospace,Menlo,monospace}

/* ---------- players ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:20px;font-size:13px;font-weight:700;border:1.5px solid var(--g2);background:#e8f5e9;color:var(--g)}
.chip.male{border-color:#90caf9;background:#e3f2fd;color:var(--m)}
.chip.female{border-color:#f8bbd0;background:#fce4ec;color:var(--f)}
.chip.out{background:#f1f3f2;border-color:#d8dedb;color:#8e9b95;text-decoration:line-through;opacity:.75}
.chip button{all:unset;cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
.gbtn{all:unset;cursor:pointer;font-size:12px;font-weight:800;padding:0 3px;border-radius:5px}

/* ---------- modes ---------- */
.modes{display:flex;gap:6px;flex-wrap:wrap}
.mode{flex:1;min-width:72px;padding:10px 6px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--mut);font-size:13px;font-weight:700;cursor:pointer;text-align:center}
.mode.on{background:var(--g);border-color:var(--g);color:#fff}

/* ---------- games ---------- */
.game{display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:relative}
.gno{font-weight:700;color:var(--mut);font-size:12px;min-width:44px}
.locked{color:var(--g2)}
.team{flex:1;min-width:112px;font-size:14px;font-weight:600;line-height:1.3}
.rest{font-size:11px;color:var(--mut);width:100%;margin-top:4px}
.score{width:54px;padding:8px 4px;border:1.5px solid var(--line);border-radius:9px;text-align:center;font-size:17px;font-weight:700;background:#fff}
.score:focus{outline:none;border-color:var(--g2)}
.vs{color:var(--mut);font-size:12px;font-weight:700}
.win{background:#e8f5e9;border-color:var(--g2)!important}
.del{position:absolute;top:-6px;right:-4px;background:#fff;border:1px solid #f2c9c9;color:#c62828;border-radius:50%;width:22px;height:22px;font-size:12px;line-height:1;cursor:pointer;padding:0}
.tag{font-size:10px;padding:1px 5px;border-radius:6px;margin-right:4px;font-weight:800;vertical-align:middle}
.tagMX{background:#fce4ec;color:var(--f)}
.tagM{background:#e3f2fd;color:var(--m)}
.tagF{background:#fce4ec;color:var(--f)}
.tagO{background:#eceff1;color:#546e7a}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 5px;text-align:center;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
th{background:#eef4ef;color:var(--g);font-weight:700;font-size:12px}
td.name{text-align:left;font-weight:700}
.bar{height:7px;background:#e6ece8;border-radius:5px;overflow:hidden;margin-top:3px}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--g),var(--g2))}
.rate{font-weight:800;color:var(--g)}

/* ---------- photos ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pgrid .ph{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#e6ece8;cursor:pointer}
.pgrid .ph img{width:100%;height:100%;object-fit:cover;display:block}
.pgrid .ph .cov{position:absolute;left:6px;top:6px;background:var(--lime);color:#1b2620;font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px}
.pgrid .ph.up{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;color:var(--g);font-weight:700;font-size:12px;border:1.5px dashed var(--g2);background:#f4faf4}
.pgrid .ph.up span{font-size:26px}
.prog{height:6px;background:#e6ece8;border-radius:4px;overflow:hidden;margin-top:8px}
.prog i{display:block;height:100%;background:var(--g2);width:0;transition:width .2s}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:0}
.modal .box{background:#fff;width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto}
@media(min-width:600px){.modal{align-items:center;padding:20px}.modal .box{border-radius:20px}}
.modal h3{margin:0 0 12px;font-size:17px;display:flex;align-items:center;gap:8px}
.modal h3 .x{margin-left:auto;all:unset;cursor:pointer;font-size:20px;padding:4px 8px;color:var(--mut)}
.qrbox{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0}
.qrbox canvas,.qrbox img{border-radius:12px;background:#fff;padding:8px;border:1px solid var(--line)}
.bigcode{font-size:38px;font-weight:900;letter-spacing:.25em;font-family:ui-monospace,Menlo,monospace;color:var(--g)}
.linkbox{font-size:12px;color:var(--mut);word-break:break-all;text-align:center}
.lightbox img{width:100%;border-radius:12px;display:block;max-height:60vh;object-fit:contain;background:#000}

/* ---------- toast / banners ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:#1b2620;color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;opacity:0;transition:all .25s;z-index:60;max-width:90vw;text-align:center;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.banner{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));background:var(--g);color:#fff;padding:10px 14px;border-radius:12px;font-size:13px;z-index:55;display:flex;gap:10px;align-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:92vw}
.banner button{all:unset;cursor:pointer;background:var(--lime);color:#1b2620;font-weight:800;padding:6px 10px;border-radius:8px;font-size:13px}

/* ---------- home ---------- */
.hero{text-align:center;padding:26px 10px 10px}
.hero img{width:86px;height:86px;border-radius:22px;box-shadow:0 8px 24px rgba(31,107,42,.3)}
.hero h1{margin:12px 0 4px;font-size:28px;letter-spacing:-.01em}
.hero p{margin:0;color:var(--mut);font-size:13px;line-height:1.6}
.recent{display:flex;flex-direction:column;gap:6px}
.recent a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--txt);background:#fff}
.recent a b{font-family:ui-monospace,Menlo,monospace;letter-spacing:.1em;color:var(--g)}
.recent a span{flex:1;font-size:13px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent a small{color:var(--mut);font-size:11px}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.feat div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;font-size:12px;line-height:1.5;color:var(--mut)}
.feat div b{display:block;color:var(--txt);font-size:13px;margin-bottom:2px}
.foot{font-size:11px;color:var(--mut);text-align:center;margin-top:18px;line-height:1.7}
.exportimg{width:100%;border-radius:14px;display:block}
.ios-hint{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.6;color:var(--mut)}

/* ---------- v1.5: fun ---------- */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:70;display:none}
#achRoot{position:fixed;top:calc(64px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:65;display:flex;flex-direction:column;gap:8px;width:min(92vw,420px);pointer-events:none}
.ach{background:#fff;border-left:5px solid var(--g2);border-radius:12px;padding:10px 14px;box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:14px;font-weight:700;display:flex;gap:10px;align-items:center;animation:achIn .35s cubic-bezier(.2,.9,.3,1.2)}
.ach .em{font-size:24px}
.ach small{display:block;font-weight:500;color:var(--mut);font-size:12px;margin-top:2px}
.ach.gold{border-left-color:#f9a825}
.ach.out{animation:achOut .3s forwards}
@keyframes achIn{from{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:none}}
@keyframes achOut{to{opacity:0;transform:translateY(-10px)}}
.winpop{animation:winpop .6s ease}
@keyframes winpop{0%{transform:scale(1)}40%{transform:scale(1.18);color:var(--g2)}100%{transform:scale(1)}}
.streak{font-size:12px;margin-left:1px}
.balrow{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.tog{all:unset;cursor:pointer;padding:7px 11px;border-radius:9px;border:1.5px solid var(--line);font-size:13px;font-weight:700;color:var(--mut);background:#fff}
.tog.on{background:#fff8e1;border-color:#f9a825;color:#8d6e00}
.hint-inline{font-size:11px;color:var(--mut)}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.presets button{all:unset;cursor:pointer;padding:7px 11px;border-radius:20px;border:1.5px solid var(--line);font-size:13px;font-weight:700;background:#fff;color:var(--txt)}
.presets button:active{background:#eef4ef}
.award{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.award:last-child{border-bottom:none}
.award .em{font-size:22px;width:30px;text-align:center}
.award .t{flex:1;font-weight:700;font-size:14px;min-width:0}
.award select{padding:7px 8px;border:1.5px solid var(--line);border-radius:9px;font-size:14px;background:#fff;max-width:46%}
.award .x{all:unset;cursor:pointer;color:#c62828;padding:4px 6px;font-size:14px}
.ev{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.ev:last-child{border-bottom:none}
.ev .d{flex:0 0 54px;text-align:center;background:#eef4ef;border-radius:10px;padding:6px 4px;color:var(--g)}
.ev .d b{display:block;font-size:20px;line-height:1.1}
.ev .d span{font-size:11px;font-weight:700}
.ev .b{flex:1;min-width:0}
.ev .b b{display:block;font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ev .b span{display:block;font-size:12px;color:var(--mut);margin-top:2px}
.ev .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ev .acts a,.ev .acts button{all:unset;cursor:pointer;font-size:12px;font-weight:700;padding:5px 9px;border-radius:8px;background:#eef4ef;color:var(--g);text-decoration:none}
.ev .acts .rc{background:#e3f2fd;color:var(--m)}
.ev .acts .dl{background:#fff;border:1px solid #f2c9c9;color:#c62828}
.ev.past{opacity:.55}
.ev.hl{background:#fff8e1;margin:0 -12px;padding:10px 12px;border-radius:10px}
.srcb{font-size:10px;font-weight:800;padding:1px 6px;border-radius:6px;background:#e3f2fd;color:var(--m);vertical-align:middle;margin-left:4px}
.nextev{background:linear-gradient(135deg,var(--g),var(--g2));color:#fff;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.nextev b{display:block;font-size:15px}
.nextev span{display:block;font-size:12px;opacity:.9;margin-top:2px}
.nextev .cd{font-size:22px;font-weight:900;margin-top:6px;letter-spacing:.01em}
.remind{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.remind .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:13px}
.remind select{padding:6px 8px;border:1.5px solid var(--line);border-radius:8px;font-size:13px;background:#fff}
.remind label{display:inline-flex;align-items:center;gap:5px;font-size:13px}
.meetpick{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.meetpick input{margin-top:3px}
.meetpick span{color:var(--mut);display:block;font-size:12px}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tabs button{flex:1;padding:8px;border-radius:9px;border:1.5px solid var(--line);background:#fff;font-size:13px;font-weight:700;color:var(--mut);cursor:pointer}
.tabs button.on{background:var(--g);border-color:var(--g);color:#fff}
.preview{background:#f4faf4;border:1px solid #c8e6c9;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.6;margin-top:10px}

/* ---------- v1.6: points format ---------- */
.ptsrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ptsrow button{all:unset;cursor:pointer;text-align:center;padding:10px 6px;border-radius:12px;border:2px solid var(--line);background:#fff;color:var(--txt)}
.ptsrow button b{display:block;font-size:26px;line-height:1;color:var(--g)}
.ptsrow button span{display:block;font-size:11px;color:var(--mut);margin-top:4px}
.ptsrow button.on{border-color:var(--g2);background:#eef8ef;box-shadow:0 0 0 3px rgba(67,160,71,.15)}
.ptsrow.err button{border-color:#ef9a9a;animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ptsbar{display:flex;align-items:center;gap:8px;margin:-6px 0 10px;font-size:13px;color:var(--mut);flex-wrap:wrap}
.ptsbar .pill{background:var(--g);color:#fff;font-weight:800;padding:3px 10px;border-radius:20px;font-size:13px}
.ptsbar button{all:unset;cursor:pointer;color:var(--m);font-weight:700;font-size:12px}
.game .warnpt{grid-column:1/-1;font-size:11px;color:#b26a00;background:#fff8e1;border-radius:6px;padding:3px 8px;margin-top:4px;justify-self:start}

/* v1.9: balance-mode add buttons */
.balnote{font-size:12px;color:#8d6e00;background:#fff8e1;border:1px solid #ffe082;border-radius:10px;padding:8px 12px;margin:-6px 0 12px;line-height:1.5}
#addBtns.bal .btn.pri{flex:2.2}
#addBtns.bal .btn.sec{flex:1;font-size:12px;opacity:.75}

/* v1.9: singles / manual */
.tagS{background:#ede7f6;color:#5e35b1}
.tagC{background:#fff3e0;color:#e65100;margin-left:4px}
.gno.editable{cursor:pointer}
.gno.editable:hover{color:var(--g)}
.metm{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end}
.metm .field{margin:0}
.metm select{margin-bottom:6px}
.vsb{font-weight:900;color:var(--mut);padding-bottom:14px}
#addBtns .btn.sec:last-child{flex-basis:100%}

/* v2.0: identity + 我的 */
.claim{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;background:#f1f8e9;border:1px dashed #a5d6a7;border-radius:10px;padding:8px 12px;margin:8px 0 10px;color:#2e4a2f}
.claim.ok{background:#e8f5e9;border-style:solid}
.claim a{color:var(--g);font-weight:700;margin-left:4px}
.claim button{border:1px solid #c8e6c9;background:#fff;border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer}
.claim.ok button{color:#888;font-size:12px}
.claimbtns{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.claimbtns button.hit{background:#fff8e1;border-color:#ffd54f;font-weight:700}
.cb{font-size:11px;margin-left:3px;opacity:.9}
.freq{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--mut);margin:0 0 10px}
.freq span{width:100%}
.fq{border:1px solid #ddd;background:#fff;border-radius:999px;padding:4px 10px;font-size:13px;cursor:pointer}
.fq.me{border-color:var(--g);color:var(--g);font-weight:700}
.mecard{display:flex;gap:14px;align-items:center}
.meav{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#43a047,#1b5e20);display:flex;align-items:center;justify-content:center;font-size:32px;flex:none}
.meinfo{min-width:0;flex:1}
.mename{font-size:20px;font-weight:800}
.mealias{font-size:12px;color:var(--mut);margin-top:3px;line-height:1.6}
.mut{color:var(--mut);font-weight:500}
.lnk{border:0;background:none;color:var(--g);font-weight:700;cursor:pointer;padding:0;font-size:12px}
.mename .lnk{font-size:14px}
.cand{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #eee}
.cand:first-of-type{border-top:0}
.cand>div:first-child{display:flex;flex-direction:column;min-width:0}
.cand span{font-size:12px;color:var(--mut)}
.cand>div:last-child{display:flex;gap:6px;flex:none}
.aliasrow{display:flex;gap:8px;align-items:center;font-size:13px;flex-wrap:wrap}
.aliasrow input{flex:1;min-width:120px;border:1px solid #ddd;border-radius:8px;padding:7px 10px;font-size:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:10px}
.kpi{background:#fff;border-radius:12px;padding:12px 10px;box-shadow:0 1px 3px rgba(0,0,0,.06);text-align:center}
.kpi b{display:block;font-size:26px;color:var(--g);line-height:1.1}
.kpi span{display:block;font-size:12px;color:#333;margin-top:4px;font-weight:600}
.kpi small{display:block;font-size:11px;color:var(--mut);margin-top:2px}
.mbars{display:flex;gap:10px;align-items:flex-end;justify-content:space-around;height:150px}
.mb{display:flex;flex-direction:column;align-items:center;flex:1;height:100%}
.mb .bar{flex:1;width:100%;max-width:44px;background:#eef3ee;border-radius:8px;display:flex;align-items:flex-end;overflow:hidden}
.mb .bar i{display:block;width:100%;background:linear-gradient(180deg,#66bb6a,#2e7d32);border-radius:8px 8px 0 0}
.mb b{font-size:12px;margin-top:4px}.mb span{font-size:11px;color:#333}.mb small{font-size:10px;color:var(--mut)}
.whos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.who{display:flex;flex-direction:column}
.who span{font-size:12px;color:var(--mut)}.who b{font-size:16px}.who small{font-size:11px;color:var(--mut)}
.awlist>div{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid #eee}
.awlist>div:first-child{border-top:0}
.awlist .e{font-size:22px}.awlist b{flex:1}.awlist small{color:var(--mut);font-size:11px}
.roomlist a{display:flex;flex-direction:column;padding:8px 0;border-top:1px solid #eee;color:inherit;text-decoration:none}
.roomlist a:first-child{border-top:0}
.roomlist span{font-size:12px;color:var(--mut)}.roomlist small{font-size:12px;color:var(--g);font-weight:700}
.evadd{display:flex;gap:8px;align-items:center;font-size:13px;margin-top:10px}
.evadd select{flex:1;border:1px solid #ddd;border-radius:8px;padding:7px 8px;font-size:13px;background:#fff}
.srcb.room{background:#e3f2fd;color:#1565c0}.srcb.mine{background:#f3e5f5;color:#6a1b9a}

/* v2.1: avatars, intro, tour, help */
.cav{width:18px;height:18px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-left:3px;border:1px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.fq .cav{margin:0 4px 0 0}
.cavb{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.cavb.emo{display:inline-flex;align-items:center;justify-content:center;background:#fff;font-size:18px}
.meav{all:unset;position:relative;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#43a047,#1b5e20);display:flex;align-items:center;justify-content:center;font-size:32px;flex:none;cursor:pointer;overflow:visible}
.meav img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.meav i{position:absolute;right:-4px;bottom:-4px;font-size:12px;background:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.2);font-style:normal}
.avpick{text-align:center}
.avbig{width:120px;height:120px;border-radius:50%;margin:4px auto 12px;background:linear-gradient(135deg,#43a047,#1b5e20);display:flex;align-items:center;justify-content:center;font-size:60px;overflow:hidden}
.avbig img{width:100%;height:100%;object-fit:cover}
.emojis{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.emojis button{width:42px;height:42px;border-radius:12px;border:1.5px solid #e0e6e2;background:#fff;font-size:22px;cursor:pointer}
.emojis button.on{border-color:var(--g);background:#e8f5e9}
.intro{background:linear-gradient(135deg,#e8f5e9,#fffde7);border:1px solid #c8e6c9;border-radius:14px;padding:12px 14px;margin:0 0 12px;font-size:13px;line-height:1.6}
.intro>b{display:block;font-size:15px;margin-bottom:2px}
#tourRoot .tour-dim{position:fixed;inset:0;z-index:70}
#tourRoot .tour-spot{position:fixed;z-index:71;border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.62),0 0 0 3px #d8e14a;pointer-events:none;transition:all .25s ease}
#tourRoot .tour-tip{position:fixed;z-index:72;background:#fff;border-radius:14px;padding:14px 14px 12px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:14px;line-height:1.55;transition:top .25s ease,left .25s ease}
#tourRoot .tour-tip:before{content:"";position:absolute;top:-8px;left:50%;margin-left:-8px;border:8px solid transparent;border-top:0;border-bottom-color:#fff}
#tourRoot .tour-tip.up:before{top:auto;bottom:-8px;border:8px solid transparent;border-bottom:0;border-top-color:#fff}
#tourRoot .tour-n{font-size:11px;color:var(--mut);margin-bottom:2px}
#tourRoot .tour-tip b{font-size:15px;color:var(--g)}
#tourRoot .tour-tip p{margin:4px 0 10px;color:#333}
#tourRoot .tour-btns{display:flex;gap:8px;align-items:center}
#tourRoot .tour-btns button{border:0;border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;font-weight:700}
#tourRoot .tour-skip{background:none;color:var(--mut);padding-left:0!important}
#tourRoot .tour-prev{background:#eef3ee;color:#333}
#tourRoot .tour-next{background:var(--g);color:#fff}
.faq details{border-top:1px solid #eee;padding:8px 0}
.faq details:first-child{border-top:0}
.faq summary{font-weight:700;cursor:pointer;font-size:14px}
.faq p{margin:6px 0 0;font-size:13px;color:#333;line-height:1.6}

/* v2.2: profile card, achievements, teams, feed */
.lvl{display:inline-block;font-size:12px;font-weight:800;background:#e8f5e9;color:var(--g);border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:middle}
.metitle{font-size:14px;color:#8d6e00;font-weight:700;margin-top:2px}
.metitle.mut{font-weight:500}
.gear{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.gear span{font-size:12px;background:#f3f6f2;border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.ptsrow.lv button{padding:8px 4px}.ptsrow.lv button b{font-size:15px}
.nudge{background:#fff8e1;border:1px solid #ffe082;border-radius:12px;padding:10px 12px;margin:0 0 12px;font-size:13px;line-height:1.5}
.howto{line-height:1.6;font-size:13px}
.howto>b{display:block;font-size:15px;margin-bottom:6px}
.steps div{display:flex;gap:10px;align-items:flex-start;margin:4px 0}
.steps span{flex:none;width:22px;height:22px;border-radius:50%;background:var(--g);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.achv{text-align:center;background:#f3f6f2;border-radius:12px;padding:10px 4px;opacity:.55;filter:grayscale(1)}
.achv.ok{opacity:1;filter:none;background:linear-gradient(135deg,#fff8e1,#e8f5e9);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.achv .e{display:block;font-size:28px}.achv b{display:block;font-size:12px;margin-top:4px}.achv small{display:block;font-size:10px;color:var(--mut)}
.teamlist a{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #eee;color:inherit;text-decoration:none}
.teamlist a:first-child{border-top:0}
.teamlist a>div{flex:1;min-width:0;display:flex;flex-direction:column}.teamlist span{font-size:12px;color:var(--mut)}.teamlist i{color:var(--mut);font-style:normal;font-size:20px}
.tlogo{width:40px;height:40px;border-radius:12px;object-fit:cover;flex:none}
.tlogo.emo{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px}
.tlogo.big{width:72px;height:72px;border-radius:18px;font-size:30px}
.tlogo.hd{width:32px;height:32px;border-radius:9px;font-size:14px}
.hdlogo{padding:0!important;overflow:hidden}.hdlogo img{width:34px;height:34px;border-radius:9px;object-fit:cover;display:block}
.cap{font-size:10px;background:#fff3e0;color:#e65100;border-radius:999px;padding:1px 7px;margin-left:6px;font-weight:700;vertical-align:middle}
.cap.me{background:#e8f5e9;color:var(--g)}
.colors{display:flex;gap:8px;flex-wrap:wrap}.colors button{width:32px;height:32px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;cursor:pointer}.colors button.on{box-shadow:0 0 0 3px var(--g)}
.tpreview{display:flex;gap:12px;align-items:center;margin-bottom:12px}.tpreview>div{display:flex;flex-direction:column}.tpreview b{font-size:18px}.tpreview span{font-size:12px;color:var(--mut)}.tpreview p{margin:4px 0 0;font-size:13px}
.tcard{display:flex;gap:14px;align-items:center}.tinfo{display:flex;flex-direction:column;min-width:0}.tinfo b{font-size:20px}.tinfo p{margin:2px 0;font-size:13px}.tinfo span{font-size:12px;color:var(--mut)}
table.lb{width:100%;border-collapse:collapse;font-size:13px}
table.lb td{padding:7px 4px;border-top:1px solid #eee;white-space:nowrap}
table.lb tr:first-child td{border-top:0}
table.lb .rk{width:30px;font-weight:800}table.lb .nm{display:flex;align-items:center;gap:8px;white-space:normal}table.lb .rt{text-align:right;color:var(--g)}
.mav{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.mav.emo{display:inline-flex;align-items:center;justify-content:center;background:#e8f5e9;font-size:16px}
.mav.sm{width:22px;height:22px;font-size:12px}
.composer{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.composer input{flex:1;border:1px solid #ddd;border-radius:999px;padding:9px 14px;font-size:14px;min-width:0}
.post{display:flex;gap:10px;padding:10px 0;border-top:1px solid #eee}
.post.sys .pbody{color:var(--mut);font-size:13px}
.pmain{flex:1;min-width:0}.phead{font-size:13px}.phead small{color:var(--mut);margin-left:6px}
.pbody{font-size:14px;line-height:1.55;margin:2px 0 6px;word-break:break-word}
.refcard{display:block;background:#f3f6f2;border-radius:10px;padding:8px 12px;font-size:13px;color:inherit;text-decoration:none;margin-bottom:6px}
.refcard span{float:right;color:var(--g);font-weight:700}
.reacts{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}
.reacts button{border:1px solid #e0e6e2;background:#fff;border-radius:999px;padding:2px 8px;font-size:13px;cursor:pointer}
.reacts button.on{background:#e8f5e9;border-color:var(--g2)}
.cmts{margin-top:4px}.cmt{display:flex;gap:6px;align-items:flex-start;font-size:13px;margin:4px 0;line-height:1.5}.cmt small{color:var(--mut)}
.cmtadd{display:flex;gap:6px;margin-top:4px}.cmtadd input{flex:1;border:1px solid #e0e6e2;border-radius:999px;padding:5px 10px;font-size:13px;min-width:0}.cmtadd button{border:0;background:#eef3ee;border-radius:999px;padding:5px 10px;font-size:12px;cursor:pointer}
.memlist .mem{display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px solid #eee}.memlist .mem:first-child{border-top:0}.mem>div{flex:1;min-width:0;display:flex;flex-direction:column}.mem span{font-size:12px;color:var(--mut)}
.invite{text-align:center}.invite .bigcode{font-size:40px;font-weight:900;letter-spacing:8px;color:var(--g);margin:6px 0}.invite .qr{width:200px;height:200px;margin:8px auto;display:block;border-radius:12px}.invite p{font-size:13px;color:var(--mut)}