* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body { font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; background:#F4F6FA; color:#0F172A; font-variant-numeric:tabular-nums; overflow-x:hidden; }
#app { max-width:480px; margin:0 auto; min-height:100vh; background:#F4F6FA; display:flex; flex-direction:column; position:relative; }
.page { flex:1; display:none; flex-direction:column; min-height:100vh; }
.page.on { display:flex; }
.statusbar { height:28px; background:#fff; display:flex; justify-content:space-between; align-items:center; padding:0 16px; font-size:11px; color:#0F172A; font-weight:600; }
.appbar { background:#fff; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #E8ECF2; flex:none; }
.appbar .t { font-size:17px; font-weight:700; }
.appbar .u { font-size:12px; color:#2563EB; flex:none; margin-left:12px; }
.scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding:0 2px 16px; }
.card { background:#fff; border-radius:12px; margin:12px 16px 0; padding:16px; box-shadow:0 1px 3px rgba(15,23,42,.06); }
.lbl { font-size:12px; color:#475569; font-weight:600; margin-bottom:6px; display:flex; justify-content:space-between; align-items:baseline; gap:6px; flex-wrap:wrap; }
.lbl .main { min-width:0; }
.lbl .dft { color:#94A3B8; font-weight:400; font-size:11px; flex:none; }
.lbl .err { color:#EF4444; font-weight:600; font-size:11px; flex:none; }
.inp { display:flex; align-items:center; background:#F1F5F9; border-radius:8px; padding:0 10px; height:42px; border:1.5px solid transparent; min-width:0; width:100%; }
.inp.bad { border-color:#EF4444; background:#FEF2F2; }
.inp input { flex:1; min-width:0; width:100%; border:none; outline:none; background:transparent; font-size:16px; font-weight:600; color:#0F172A; font-variant-numeric:tabular-nums; }
.inp input::placeholder { font-size:12px; font-weight:400; color:#B6C0CF; }
.inp .unit { font-size:10px; color:#94A3B8; flex:none; margin-left:4px; padding-left:4px; border-left:1px solid #E2E8F0; }
.seg { display:flex; background:#E2E8F0; border-radius:9px; padding:3px; margin:12px 16px 0; flex:none; }
.seg div { flex:1; text-align:center; font-size:14px; font-weight:600; color:#64748B; padding:9px 0; border-radius:7px; cursor:pointer; }
.seg div.on { background:#2563EB; color:#fff; box-shadow:0 2px 6px rgba(37,99,235,.35); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font-size:12px; font-weight:600; color:#2563EB; background:#EFF4FF; border:1px solid #C7D7FE; border-radius:999px; padding:5px 13px; cursor:pointer; user-select:none; }
.chip.on { background:#2563EB; color:#fff; border-color:#2563EB; }
.grid2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.result { background:linear-gradient(135deg,#1D4ED8,#2563EB); border-radius:12px; margin:12px 16px 0; padding:18px; color:#fff; }
.result .cap { font-size:11px; color:#BFD0F5; letter-spacing:2px; font-weight:600; }
.result .main { display:flex; align-items:baseline; gap:6px; margin-top:6px; flex-wrap:wrap; }
.result .main .n { font-size:32px; font-weight:800; }
.result .main .u { font-size:13px; color:#BFD0F5; }
.result .rows { margin-top:12px; border-top:1px solid rgba(255,255,255,.25); padding-top:10px; display:flex; flex-direction:column; gap:7px; }
.result .r { display:flex; justify-content:space-between; font-size:13px; gap:8px; }
.result .r span:first-child { color:#BFD0F5; }
.result .r b { font-size:14px; }
.ton { margin:8px 16px 0; font-size:11px; color:#64748B; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.btn { display:block; width:auto; margin:12px 16px 0; height:46px; border-radius:12px; background:#F59E0B; color:#fff; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(245,158,11,.35); cursor:pointer; border:none; }
.btn:active { opacity:.88; }
.btn.ghost { background:#fff; color:#2563EB; border:1.5px solid #2563EB; box-shadow:none; height:40px; font-size:13px; margin-bottom:2px; }
.btn.red { background:#fff; color:#EF4444; border:1.5px solid #EF4444; box-shadow:none; height:40px; font-size:13px; }
.hello { background:linear-gradient(135deg,#1D4ED8,#3B82F6); padding:18px 16px 22px; color:#fff; }
.hello .hi { font-size:17px; font-weight:800; }
.hello .acct { font-size:11px; color:#BFDBFE; margin-top:4px; }
.cats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin:12px 16px 0; }
.cat { background:#fff; border-radius:12px; padding:12px 4px; text-align:center; box-shadow:0 1px 3px rgba(15,23,42,.06); cursor:pointer; position:relative; min-width:0; }
.cat .ic { font-size:22px; }
.cat .nm { font-size:11px; font-weight:700; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat.off { opacity:.45; cursor:not-allowed; }
.cat.off .nm { color:#64748B; }
.cat .soon { position:absolute; top:6px; right:6px; font-size:8px; background:#FEF3C7; color:#B45309; border-radius:4px; padding:2px 4px; font-weight:700; }
.secT { font-size:13px; font-weight:700; margin:16px 16px 0; display:flex; justify-content:space-between; align-items:center; }
.secT .more { font-size:11px; color:#94A3B8; font-weight:400; cursor:pointer; }
.hist { background:#fff; border-radius:12px; margin:10px 16px 0; padding:12px 14px; box-shadow:0 1px 3px rgba(15,23,42,.06); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.hist .l1 { font-size:13px; font-weight:700; }
.hist .l2 { font-size:11px; color:#94A3B8; margin-top:3px; line-height:1.7; word-break:break-all; }
.hist .pr { text-align:right; flex:none; }
.hist .pr .p { font-size:14px; font-weight:800; color:#F59E0B; }
.hist .pr .d { font-size:10px; color:#94A3B8; }
.tabbar { flex:none; background:#fff; border-top:1px solid #E8ECF2; display:flex; padding:8px 0 calc(12px + env(safe-area-inset-bottom, 0px)); }
.tabbar div { flex:1; text-align:center; font-size:10px; color:#94A3B8; cursor:pointer; }
.tabbar div.on { color:#2563EB; font-weight:700; }
.tabbar .i { font-size:18px; display:block; margin-bottom:2px; }
.toast { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); background:#0F172A; color:#fff; font-size:13px; border-radius:8px; padding:10px 18px; opacity:0; transition:opacity .25s; z-index:99; pointer-events:none; max-width:80vw; }
.toast.on { opacity:.92; }
.login-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; padding:0 24px; }
.logo { width:76px; height:76px; border-radius:22px; background:linear-gradient(135deg,#1D4ED8,#3B82F6); display:flex; align-items:center; justify-content:center; font-size:34px; color:#fff; font-weight:800; box-shadow:0 10px 24px rgba(37,99,235,.35); }
.login-title { font-size:21px; font-weight:800; margin-top:16px; }
.login-sub { font-size:12px; color:#64748B; margin-top:6px; letter-spacing:3px; }
.empty { text-align:center; color:#94A3B8; font-size:12px; padding:40px 0; }
.kv { display:flex; justify-content:space-between; gap:8px; font-size:13px; padding:10px 0; border-bottom:1px solid #F1F5F9; }
.kv span:first-child { color:#64748B; flex:none; }
.kv b { font-weight:600; text-align:right; word-break:break-all; }