/* ------------------------------------------------------------------ *
 *  水落津門經史子集 — shared design system
 *  Neutral surfaces, one accent, 8px grid, hairline dividers.
 * ------------------------------------------------------------------ */
:root{
  --bg:#ffffff;
  --surface:#f6f8fa;
  --surface-2:#eef1f4;
  --border:#d1d9e0;
  --text:#1f2328;
  --muted:#59636e;
  --accent:#0969da;
  --accent-fg:#ffffff;
  --stage:#eaedf1;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r1:6px; --r2:10px;
  --nav:56px;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
    "PingFang TC","Noto Sans CJK TC","Microsoft JhengHei",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1117; --surface:#161b22; --surface-2:#21262d;
    --border:#30363d; --text:#e6edf3; --muted:#8b949e;
    --accent:#4493f8; --accent-fg:#0d1117; --stage:#010409;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:13px; line-height:1.5;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}

/* ---- top navigation ------------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:var(--s3);
  height:calc(var(--nav) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) var(--s4) 0;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav h1{font-size:16px; font-weight:600; margin:0; letter-spacing:.02em}
.nav .spacer{flex:1}
.muted{color:var(--muted)}

/* ---- buttons ------------------------------------------------------- */
.btn{
  appearance:none; display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 var(--s3);
  font:inherit; font-size:13px; color:var(--text);
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r1); cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.btn:hover{background:var(--surface)}
.btn:active{background:var(--surface-2)}
.btn.icon{width:32px; padding:0; justify-content:center; font-size:15px}
.btn.ghost{border-color:transparent; background:transparent}
.btn.ghost:hover{background:var(--surface)}
.btn.on{border-color:var(--accent); color:var(--accent)}

/* ---- inputs -------------------------------------------------------- */
.field{
  height:32px; padding:0 var(--s3);
  font:inherit; font-size:13px; color:var(--text);
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r1);
}
.field:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}

/* ---- pill badge ---------------------------------------------------- */
.badge{
  display:inline-block; font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--muted); background:var(--surface); border:1px solid var(--border);
  padding:1px 7px; border-radius:999px; letter-spacing:.06em;
}

mark{background:color-mix(in srgb,var(--accent) 26%,transparent); color:inherit; border-radius:2px}