:root{--g:#0B6E4F;--g2:#0B4F3F;--gold:#C9A227;--ink:#1B2621;--mute:#5F6B66;--bg:#F4F7F5;--card:#fff;--line:#E1E8E4;--red:#B3261E}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.4 -apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
#app{display:flex;flex-direction:column;min-height:100dvh}
.top{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 12px) 18px 12px;background:var(--g);color:#fff}
.brand{font-weight:700;font-size:20px;display:flex;align-items:center;gap:8px}.logo{color:var(--gold);font-size:22px}
.dot{width:10px;height:10px;border-radius:50%;background:#9DB5AA}.dot.on{background:#7CE0A8}.dot.off{background:#F28B82}
main{flex:1;padding:16px 16px calc(84px + env(safe-area-inset-bottom));overflow:auto}
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs button{flex:1;border:0;background:none;padding:10px 4px 8px;font-size:12px;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:2px}
.tabs button span{font-size:20px}.tabs button.active{color:var(--g);font-weight:600}
h1{font-size:22px;margin:4px 0 12px}h2{font-size:17px;margin:18px 0 8px}
.muted{color:var(--mute);font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px}
.bal{background:linear-gradient(135deg,var(--g),var(--g2));color:#fff;border-radius:20px;padding:18px;margin-bottom:14px}
.bal .amt{font-size:34px;font-weight:700;margin:6px 0}.bal .sub{opacity:.85;font-size:13px}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#E3EFE8;color:var(--g)}
.pill.gold{background:#FBF3D5;color:#7a5f0c}.pill.red{background:#FBE1DF;color:var(--red)}.pill.grey{background:#EEE;color:#555}
.pcard{position:relative;border-radius:16px;padding:16px;color:#fff;min-height:118px;margin-bottom:10px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;border:2px solid transparent}
.pcard.sel{border-color:var(--gold)}
.pcard.mir{background:linear-gradient(135deg,#1c6b3a,#0f3d24)}.pcard.adafa{background:linear-gradient(135deg,#0d7a5f,#10403a)}
.pcard.unionpay{background:linear-gradient(135deg,#8b1e2d,#1f2a55)}.pcard.visa{background:linear-gradient(135deg,#1a3c8f,#0c1f4d)}.pcard.mastercard{background:linear-gradient(135deg,#c2410c,#7c2d12)}
.pcard.virtual{background:linear-gradient(135deg,#2b2b2b,#0b0b0b);border:1px dashed var(--gold)}.pcard.balance{background:linear-gradient(135deg,var(--g),var(--g2))}
.pcard .num{font-family:ui-monospace,Menlo,monospace;letter-spacing:2px;font-size:17px}.pcard .lbl{font-size:13px;opacity:.9}.pcard .net{position:absolute;right:14px;top:12px;font-weight:700;font-size:13px;opacity:.9}
.pcard .tag{position:absolute;right:12px;bottom:12px;font-size:11px;background:rgba(255,255,255,.18);padding:2px 8px;border-radius:999px}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:14px;font-size:16px;font-weight:600;background:var(--g);color:#fff;margin-top:10px}
.btn.sec{background:#E3EFE8;color:var(--g)}.btn.ghost{background:none;color:var(--g);border:1px solid var(--line)}.btn.red{background:var(--red)}.btn:disabled{opacity:.5}
.row{display:flex;gap:10px}.row>*{flex:1}
input,select{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px;font-size:16px;background:#fff;margin:6px 0}
label{font-size:13px;color:var(--mute)}
.tile{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:8px;cursor:pointer}
.tile .ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:12px}
.hist{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.hist .m{font-weight:600}.hist .s{font-size:12px;color:var(--mute)}.hist .a{font-weight:700}.hist .a.dec{color:var(--red);text-decoration:line-through}
.wave{width:160px;height:160px;border-radius:50%;margin:24px auto;display:flex;align-items:center;justify-content:center;background:#E3EFE8;color:var(--g);font-size:64px;position:relative}
.wave.scan::before,.wave.scan::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--g);animation:ring 1.6s infinite}
.wave.scan::after{animation-delay:.8s}
@keyframes ring{from{transform:scale(1);opacity:.7}to{transform:scale(1.6);opacity:0}}
.big{font-size:40px;font-weight:700;text-align:center;margin:8px 0}
.center{text-align:center}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;z-index:20}
.sheet-body{background:#fff;width:100%;border-radius:20px 20px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));max-height:88dvh;overflow:auto}
.hidden{display:none!important}
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;z-index:30;max-width:90%}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.mono{font-family:ui-monospace,Menlo,monospace}
.warn{background:#FBF3D5;border-radius:12px;padding:10px 12px;font-size:13px;color:#5f4a06;margin:8px 0}
.ok{color:var(--g);font-weight:600}