:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2330; --line:#30363d;
  --fg:#e6edf3; --muted:#8b949e; --accent:#58a6ff; --good:#3fb950;
  --warn:#d29922; --bad:#f85149; --gold:#e3b341;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,"Segoe UI","Noto Sans TC",system-ui,sans-serif;
  font-size:16px; line-height:1.5; overscroll-behavior-y:none}
h1,h2,h3{margin:.2em 0}
.muted{color:var(--muted); font-size:.88rem}
[hidden]{display:none !important}

.screen{min-height:100vh; display:none; place-items:center; padding:24px}
.screen.active{display:grid}
.auth-box{width:100%; max-width:360px; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:24px}
.auth-box h1{font-size:2rem; letter-spacing:2px}
.tabs{display:flex; gap:6px; margin:16px 0 12px}
.tab{flex:1; padding:10px; background:var(--panel2); border:1px solid var(--line);
  color:var(--muted); border-radius:8px}
.tab.active{color:var(--fg); border-color:var(--accent)}
.authform{display:flex; flex-direction:column; gap:10px}
input,select{width:100%; padding:12px; background:var(--panel2); color:var(--fg);
  border:1px solid var(--line); border-radius:8px; font-size:1rem}
input:focus,select:focus{outline:none; border-color:var(--accent)}

.btn{padding:12px 14px; border:1px solid var(--line); border-radius:9px;
  background:var(--panel2); color:var(--fg); font-size:1rem; cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); color:#0b1220; border-color:var(--accent); font-weight:600}
.btn.ghost{background:transparent}
.btn.small{padding:8px 10px; font-size:.85rem}
.btn.block{width:100%}
.btn[disabled]{opacity:.45}
.row{display:flex; gap:8px; flex-wrap:wrap}
.row.tight{gap:4px}

#app{min-height:100vh; padding-bottom:64px}
#view{padding:12px 12px 20px; max-width:640px; margin:0 auto}
#nav{position:fixed; bottom:0; left:0; right:0; display:flex;
  background:var(--panel); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
#nav button{flex:1; padding:10px 2px; background:none; border:none; color:var(--muted);
  font-size:.78rem}
#nav button.active{color:var(--accent)}

.card{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px; margin-bottom:12px}
.card h3{font-size:1rem; margin-bottom:8px; color:var(--muted); font-weight:600}
.kv{display:flex; justify-content:space-between; gap:8px; padding:3px 0}
.kv .k{color:var(--muted)}
.bar{height:8px; background:var(--panel2); border-radius:5px; overflow:hidden; margin:4px 0}
.bar > i{display:block; height:100%; background:var(--accent)}
.bar.exp > i{background:var(--good)}
.bar.hp > i{background:var(--bad)}
.bar.sp > i{background:var(--accent)}
.pill{display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem;
  background:var(--panel2); border:1px solid var(--line)}
.pill.good{color:var(--good)} .pill.warn{color:var(--warn)} .pill.bad{color:var(--bad)}

.log{background:#0b0e13; border:1px solid var(--line); border-radius:8px;
  padding:8px; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.8rem;
  height:220px; overflow-y:auto; white-space:pre-wrap}
.log .dim{color:var(--muted)}
.log .hit{color:var(--fg)} .log .crit{color:var(--gold)} .log .kill{color:var(--good)}

.list{display:flex; flex-direction:column; gap:8px}
.item{display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.item .sub{color:var(--muted); font-size:.8rem}
.choice{padding:12px; text-align:left; border-radius:10px}
.choice.sel{border-color:var(--accent); background:var(--panel2)}

.toast{position:fixed; left:50%; bottom:80px; transform:translateX(-50%);
  background:var(--panel2); border:1px solid var(--line); color:var(--fg);
  padding:10px 16px; border-radius:10px; z-index:50; max-width:90vw; font-size:.9rem}
.toast.bad{border-color:var(--bad); color:#ffd7d5}

.section-title{display:flex; justify-content:space-between; align-items:center; margin:4px 2px 8px}
.spinner{text-align:center; color:var(--muted); padding:40px}