/* Panda — white & mint. Layout: one phone-width column, cards on a soft mint-tinted white, bottom tab bar. */
:root{
  --bg:#f5faf7; --glow:#d3f4e5; --surface:#ffffff; --surface-2:#f0f7f3; --line:#dce8e2; --line-2:#cddcd5;
  --text:#11201a; --muted:#5d6f68; --sub:#6c7d76;
  --mint:#3fd6a0; --mint-strong:#20b984; --mint-ink:#0b7c55; --mint-soft:#dcf6ea; --on-mint:#05281b;
  --green:#0d9a62; --red:#d93d52; --red-soft:#fde5e8; --amber:#a5670f; --amber-soft:#fcf0d9;
  --live-glow:#fbe0e0;
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% -10%,var(--glow) 0%,#ebf8f2 24%,var(--bg) 55%);background-color:var(--bg);min-height:100vh;color:var(--text)}
body.live{background:radial-gradient(ellipse at 50% -10%,var(--live-glow) 0%,#fbf3f2 24%,var(--bg) 55%);background-color:var(--bg)}
a{color:var(--mint-ink);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
.app{max-width:520px;margin:auto;padding-block:22px 110px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top{display:flex;justify-content:space-between;align-items:center}
.brand{font-size:20px;font-weight:750;letter-spacing:-.3px}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;box-shadow:0 0 0 2px var(--mint)}
.avatar svg{width:100%;height:100%;display:block}
.muted{color:var(--muted)}.tiny{font-size:12px}
.top-right{display:flex;align-items:center;gap:10px}
.pill{border-radius:99px;background:var(--surface-2);border:1px solid var(--line);padding:6px 11px;font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap}
.pill.live{background:var(--red-soft);border-color:#f6c6cd;color:var(--red)}
.pill.paper{background:var(--mint-soft);border-color:#b9ecd6;color:var(--mint-ink)}
.iconbtn{background:none;border:0;color:var(--text);font-size:22px;cursor:pointer;padding:4px}
.balance{text-align:center;margin:34px 0 24px}
.balance .label{color:var(--muted);font-size:14px}
.balance h1{font-size:clamp(44px,12vw,62px);letter-spacing:-2.6px;margin:8px 0 4px;font-weight:750;font-variant-numeric:tabular-nums}
.gain{font-size:17px;color:var(--green);font-weight:650}.gain.neg{color:var(--red)}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:22px 0 24px}
.action{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:17px 8px;text-align:center;color:var(--text);font:inherit;cursor:pointer;box-shadow:0 1px 2px #10302410}
.action:hover{border-color:var(--mint)}
.action b{display:block;font-size:24px;color:var(--mint-strong);margin-bottom:6px}.action span{font-size:13px;font-weight:600}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:24px 1px 11px;font-weight:700;font-size:17px;gap:8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;margin:10px 0;box-shadow:0 1px 2px #10302408}
.card.tap{cursor:pointer}
.status{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#b4c2bc;margin-right:7px}
.dot.on{background:var(--mint-strong);box-shadow:0 0 0 4px var(--mint-soft)}.dot.warn{background:#e2a33a;box-shadow:0 0 0 4px var(--amber-soft)}
.btn{border:0;border-radius:14px;padding:13px 18px;font-weight:800;font-size:14px;background:var(--mint);color:var(--on-mint);cursor:pointer;font-family:inherit}
.btn:hover{background:var(--mint-strong);color:#fff}
.btn.stop{background:var(--red);color:#fff}.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--mint-strong);color:var(--mint-ink);background:var(--surface)}
.btn.small{padding:9px 12px;font-size:13px;border-radius:12px}.btn.full{width:100%}
.btn:focus-visible,.tab:focus-visible,.action:focus-visible,.secondary:focus-visible,.filter button:focus-visible{outline:3px solid #8fe9c6;outline-offset:2px}
.secondary{border:1px solid var(--line-2);background:var(--surface);color:var(--text);border-radius:12px;padding:8px 12px;cursor:pointer;font:inherit;font-size:13px;font-weight:600}
.secondary:hover{border-color:var(--mint-strong);color:var(--mint-ink)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--surface);border-radius:18px;border:1px solid var(--line);padding:14px;min-width:0}
.stat strong{display:block;font-size:20px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.stat.tap{cursor:pointer}.stat.tap:hover{border-color:var(--mint)}
.green{color:var(--green)}.red{color:var(--red)}.purple{color:var(--mint-ink)}.amber{color:var(--amber)}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.row+.row{margin-top:13px}
.row>div{min-width:0}
.name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub{font-size:12px;color:var(--sub);margin-top:4px;line-height:1.4}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;word-break:break-all}
.token{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--mint-soft);color:var(--mint-ink);font-weight:800;flex-shrink:0;font-size:13px;text-transform:uppercase}
.token.buy{background:var(--mint-soft);color:var(--mint-ink)}.token.sell{background:var(--red-soft);color:var(--red)}.token.tx{background:var(--amber-soft);color:var(--amber)}
.line{height:1px;background:var(--line);margin:14px 0}
.tag{font-size:11px;font-weight:750;border-radius:8px;padding:5px 8px;background:var(--mint-soft);color:var(--mint-ink);white-space:nowrap;letter-spacing:.3px}
.tag.fire{background:var(--red-soft);color:var(--red)}.tag.hire{background:var(--mint-soft);color:var(--mint-ink)}.tag.warn{background:var(--amber-soft);color:var(--amber)}.tag.gray{background:var(--surface-2);color:var(--muted)}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.list .item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.list .item:last-child{border-bottom:0}
.list .item .grow{flex:1;min-width:0}
.list .item .right{text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;background:#fffffff2;border-top:1px solid var(--line);backdrop-filter:blur(12px);z-index:3;padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.tabs-inner{display:grid;grid-template-columns:repeat(4,1fr);width:min(520px,100%)}
.tab{padding:12px 4px 16px;color:#8a9a93;background:none;border:0;font:inherit;font-size:11px;font-weight:600;cursor:pointer}
.tab .ico{font-size:22px;display:block;margin-bottom:3px}.tab.active{color:var(--mint-ink)}
.page{display:none}.page.active{display:block}
.empty{color:var(--muted);font-size:14px;line-height:1.5}
.progress{height:9px;background:#e2eee8;border-radius:9px;overflow:hidden;margin-top:12px}
.progress>div{height:100%;background:linear-gradient(90deg,#8ff3cc,var(--mint-strong));width:0;transition:width .6s}
.notice{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:13px;font-size:12px;line-height:1.5;color:var(--muted);margin:16px 0}
.banner{border-radius:16px;padding:14px;margin:12px 0;font-size:13px;line-height:1.5}
.banner.red{background:var(--red-soft);border:1px solid #f4c3ca;color:#8f2233}
.banner.amber{background:var(--amber-soft);border:1px solid #f0d7a6;color:#7a4b08}
.banner.purple{background:var(--mint-soft);border:1px solid #b6ead3;color:#0a5c40}
.filter{display:flex;gap:7px;flex-wrap:wrap}
.filter button{border:1px solid var(--line-2);border-radius:99px;background:var(--surface);color:var(--muted);padding:8px 12px;cursor:pointer;font:inherit;font-size:13px;font-weight:600}
.filter button.selected{background:var(--mint);color:var(--on-mint);border-color:transparent}
.toast{position:fixed;bottom:calc(92px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--text);color:#fff;padding:12px 18px;border-radius:12px;max-width:90vw;text-align:center;display:none;font-size:13px;z-index:20}
.toast.err{background:var(--red)}
button:disabled{opacity:.45;cursor:not-allowed}
input,select,textarea{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:12px;padding:11px 12px;font:inherit;font-size:14px}
textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
input:focus,textarea:focus{outline:2px solid var(--mint);border-color:transparent}
input[type="checkbox"]{accent-color:var(--mint-strong)}
label.field{display:block;margin:12px 0}
label.field span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.rulegrid{display:grid;grid-template-columns:1fr 110px;gap:10px 12px;align-items:center}
.rulegrid label{font-size:14px}.rulegrid .help{grid-column:1/-1;font-size:11.5px;color:var(--muted);margin-top:-6px}
.rulegrid input{text-align:right;padding:9px 10px;font-variant-numeric:tabular-nums}
/* bottom sheet */
.sheet-bg{position:fixed;inset:0;background:#10201a55;z-index:10;display:none}
.sheet-bg.open{display:block}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(520px,100%);max-height:88vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;padding:18px max(18px,env(safe-area-inset-right,0px)) calc(34px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));z-index:11;display:none;box-shadow:0 -10px 40px #10302420}
.sheet.open{display:block}
.sheet h2{margin:4px 0 12px;font-size:20px}
.grab{width:40px;height:5px;border-radius:9px;background:var(--line-2);margin:0 auto 10px}
.sheet-x{position:sticky;top:0;float:right;margin:-6px -4px 0 0;font-size:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:50%;width:34px;height:34px;padding:0;z-index:1;color:var(--text)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13px}
.kv div:nth-child(odd){color:var(--muted)}.kv div:nth-child(even){text-align:right;font-variant-numeric:tabular-nums}
/* login */
.login{max-width:360px;margin:16vh auto;padding-inline:18px;text-align:center}
.login .avatar{width:72px;height:72px;margin:0 auto 14px}
@media (min-width:900px){.app{max-width:560px}}
@media (prefers-reduced-motion:reduce){.progress>div{transition:none}}