/* algo_log 共用：浅色高级灰白 + 低饱和蓝 / 粉 */
:root {
  --bg: oklch(0.97 0.008 250);
  --paper: oklch(0.995 0.004 250);
  --panel: oklch(0.99 0.006 250);
  --raised: oklch(0.955 0.012 250);
  --line: oklch(0.90 0.014 250);
  --fg: oklch(0.30 0.022 250);
  --muted: oklch(0.50 0.025 250);
  --blue: oklch(0.48 0.07 250);
  --blue-soft: oklch(0.95 0.022 250);
  --pink: oklch(0.55 0.07 8);
  --pink-soft: oklch(0.955 0.022 8);
  --ok: oklch(0.46 0.055 160);
  --ok-soft: oklch(0.95 0.02 160);
  --bad: oklch(0.50 0.07 20);
  --bad-soft: oklch(0.955 0.025 20);
  --accent: var(--blue);
  --link: var(--blue);
  --select: var(--blue-soft);
  --font-sans: "Source Sans 3", "PingFang SC", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
  --font-serif: Fraunces, "Noto Serif SC", "Songti SC", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

.chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 8;
}
.wordmark {
  font-family: var(--font-serif);
  font-optical-sizing: 36;
  font-size: 22px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: -0.03em;
  line-height: 1;
}
.wordmark span {
  color: var(--pink);
}
.chrome nav {
  display: flex;
  gap: 6px;
}
.chrome nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
}
.chrome nav a:hover { color: var(--blue); background: var(--blue-soft); }
.chrome nav a[aria-current="page"] {
  color: var(--blue);
  background: var(--blue-soft);
}

button, input, select {
  font: inherit;
  color: var(--fg);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
}
button { cursor: pointer; }
button.primary {
  background: var(--blue);
  color: oklch(0.99 0.01 250);
  border-color: transparent;
  font-weight: 600;
}
button.primary:disabled { opacity: 0.45; cursor: not-allowed; }
button.ghost {
  background: transparent;
  color: var(--muted);
}
button.ghost:hover { color: var(--blue); background: var(--blue-soft); }

.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--raised);
  color: var(--muted);
}
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }

a { color: var(--link); }
code, .mono { font-family: var(--font-mono); }