/* ── tokens ───────────────────────────────────────────── */
:root {
  --bg:        #EFF1F2;
  --surface:   #FFFFFF;
  --sunk:      #F4F6F6;
  --ink:       #0E1416;
  --ink-2:     rgba(14,20,22,.60);
  --ink-3:     rgba(14,20,22,.40);
  --ink-4:     rgba(14,20,22,.26);
  --line:      rgba(14,20,22,.08);
  --line-2:    rgba(14,20,22,.05);
  --accent:    #14605A;
  --warn:      #A66A12;
  --danger:    #B03A31;
  --tint:      rgba(20,96,90,.08);
  --on-accent: #FFFFFF;
  --shadow:    0 1px 2px rgba(14,20,22,.04);
  --shadow-2:  0 -1px 0 var(--line), 0 -8px 24px rgba(14,20,22,.05);
  --shadow-3:  0 10px 40px rgba(14,20,22,.16);
  --r:         12px;
  --sheet-bg:  #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0D1112;
    --surface:   #161C1D;
    --sunk:      #1B2223;
    --ink:       #E8EDEC;
    --ink-2:     rgba(232,237,236,.60);
    --ink-3:     rgba(232,237,236,.40);
    --ink-4:     rgba(232,237,236,.24);
    --line:      rgba(232,237,236,.10);
    --line-2:    rgba(232,237,236,.06);
    --accent:    #4FB0A4;
    --warn:      #D6A046;
    --danger:    #DE7169;
    --tint:      rgba(79,176,164,.12);
    --on-accent: #06110F;
    --shadow:    0 1px 2px rgba(0,0,0,.3);
    --shadow-2:  0 -1px 0 var(--line), 0 -8px 24px rgba(0,0,0,.3);
    --shadow-3:  0 10px 40px rgba(0,0,0,.5);
    --sheet-bg:  #161C1D;
  }
}
:root[data-theme="dark"] {
  --bg:        #0D1112;
  --surface:   #161C1D;
  --sunk:      #1B2223;
  --ink:       #E8EDEC;
  --ink-2:     rgba(232,237,236,.60);
  --ink-3:     rgba(232,237,236,.40);
  --ink-4:     rgba(232,237,236,.24);
  --line:      rgba(232,237,236,.10);
  --line-2:    rgba(232,237,236,.06);
  --accent:    #4FB0A4;
  --warn:      #D6A046;
  --danger:    #DE7169;
  --tint:      rgba(79,176,164,.12);
  --on-accent: #06110F;
  --shadow:    0 1px 2px rgba(0,0,0,.3);
  --shadow-2:  0 -1px 0 var(--line), 0 -8px 24px rgba(0,0,0,.3);
  --shadow-3:  0 10px 40px rgba(0,0,0,.5);
  --sheet-bg:  #161C1D;
}

/* ── base ─────────────────────────────────────────────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "PingFang SC", "Noto Sans CJK SC",
        "Microsoft YaHei", sans-serif;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
input, button { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.icon {
  width: 16px; height: 16px; flex: none; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon.fill { fill: currentColor; stroke-width: 1; }

.app { max-width: 480px; margin: 0 auto; }
@media (min-width: 720px) {
  .app { max-width: 560px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ── 载入与登录 ───────────────────────────────────────── */
.boot, .gate { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.boot { color: var(--ink-3); font-size: 13px; }
.gate-card {
  width: min(360px, calc(100% - 32px)); padding: 24px 22px;
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow);
}
.gate-card h1 { margin: 0 0 3px; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.gate-card .sub { display: block; margin-bottom: 20px; color: var(--ink-3); font-size: 13px; }
.gate-field { display: block; margin-bottom: 14px; }
.gate-field span { display: block; font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px; }
.gate-field input {
  width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--sunk); font-size: 15px;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 150ms;
}
.gate-field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.gate-submit { width: 100%; height: 44px; margin-top: 6px; }
.form-error { margin: 0 0 10px; font-size: 12.5px; color: var(--danger); min-height: 1em; }

/* ── 顶栏 ─────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 6px 0 14px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}
.topbar.is-stuck { border-bottom-color: var(--line); }
.topbar-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.topbar-title b {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-title i {
  font-style: normal; font-size: 11.5px; color: var(--ink-3); flex: none; white-space: nowrap;
}
.topbar-title i.is-dirty { color: var(--warn); }
.top-btn {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: var(--ink-2);
  transition: background 150ms, color 150ms;
}
.top-btn:active { background: var(--line-2); color: var(--ink); }
.top-action {
  flex: none; padding: 0 13px; height: 32px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: opacity 150ms;
}
.top-action:active { opacity: .78; }
.top-action[disabled] { opacity: .5; }