:root {
  --bg: #f4f5f9;
  --card: #ffffff;
  --ink: #111827;
  --sub: #6b7280;
  --line: #eceef3;
  --accent: #4f46e5;
  --accent-2: #6366f1;
  --accent-ink: #ffffff;
  --accent-soft: #eef2ff;
  --due: #e5484d;
  --due-soft: #fdecec;
  --soon: #c2410c;
  --soon-soft: #fff4e5;
  --ok: #15803d;
  --ok-soft: #e8f6ee;
  --muted-soft: #f1f3f7;
  --shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 14px rgba(17, 24, 39, .05);
  --shadow-lg: 0 10px 30px rgba(49, 46, 129, .18);
  --radius: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d12; --card: #151821; --ink: #eef0f5; --sub: #9aa1b1; --line: #242833;
    --accent: #818cf8; --accent-2: #a5b4fc; --accent-soft: #1e1f3d; --due: #ff6b6b; --due-soft: #3a1d1f;
    --soon: #fbbf24; --soon-soft: #3a2c12; --ok: #4ade80; --ok-soft: #14301f; --muted-soft: #1d212b;
    --shadow: none; --shadow-lg: 0 10px 30px rgba(0, 0, 0, .4); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0d12; --card: #151821; --ink: #eef0f5; --sub: #9aa1b1; --line: #242833;
  --accent: #818cf8; --accent-2: #a5b4fc; --accent-soft: #1e1f3d; --due: #ff6b6b; --due-soft: #3a1d1f;
  --soon: #fbbf24; --soon-soft: #3a2c12; --ok: #4ade80; --ok-soft: #14301f; --muted-soft: #1d212b;
  --shadow: none; --shadow-lg: 0 10px 30px rgba(0, 0, 0, .4); color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 12px; padding: 12px 16px; cursor: pointer; font-weight: 600;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-ink); text-decoration: none;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: var(--muted-soft); color: var(--ink); }
.btn.ghost, .btn.danger { background-image: none; }
.btn.danger { background: var(--due-soft); color: var(--due); }
.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn.block { width: 100%; }
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: 13px; color: var(--sub); margin-bottom: 4px; }
input.input, select.input, textarea.input {
  width: 100%; border: 1px solid var(--line); background: var(--card); border-radius: 10px;
  padding: 11px 12px; outline: none; font-size: 16px; /* 16px 以上 iPhone 输入时才不会自动放大 */
}
textarea.input { resize: vertical; min-height: 70px; }
input.input:focus, select.input:focus, textarea.input:focus { border-color: var(--accent); }
.err { color: var(--due); font-size: 14px; min-height: 20px; margin: 4px 0 8px; }
.muted { color: var(--sub); }
.small { font-size: 13px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input.input { padding-right: 48px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 8px;
          color: var(--sub); cursor: pointer; display: flex; border-radius: 8px; }
.pw-eye:hover { color: var(--ink); }