:root {
  color-scheme: light;
  --brand-50: #e8f0fe; --brand-100: #d2e3fc; --brand-300: #8ab4f8; --brand-500: #4285f4;
  --brand-600: #1a73e8; --brand-700: #0b57d0;
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
  --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-900: #111827;
  --bg: #ffffff; --surface: #ffffff; --border: var(--gray-200); --control-border: var(--gray-300);
  --fg: var(--gray-900); --fg-muted: var(--gray-600); --fg-faint: var(--gray-500);
  --accent-bg: #111827; --accent-fg: #ffffff;
  --radius-control: 6px; --radius-card: 12px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dark {
  color-scheme: dark;
  --bg: #000000; --surface: #0d0d0d; --border: #1f1f1f; --control-border: #303030;
  --fg: #f3f4f6; --fg-muted: #9ca3af; --fg-faint: #6b7280;
  --accent-bg: #f3f4f6; --accent-fg: #111827;
  --brand-600: #8ab4f8; --brand-700: #8ab4f8; --gray-50: #0d0d0d; --gray-100: #161616;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5;
}
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid rgb(107 114 128 / .4); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.btn-primary {
  background: var(--accent-bg); color: var(--accent-fg); border: none;
  border-radius: 6px; padding: 8px 16px; font-size: 14px; font-weight: 500;
}
.btn-primary:hover { opacity: .9; }
.btn-secondary {
  background: var(--surface); color: var(--fg); border: 1px solid var(--control-border);
  border-radius: 6px; padding: 8px 16px; font-size: 14px;
}
.btn-secondary:hover { background: var(--gray-100); }

.nav {
  height: 56px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
  position: sticky; top: 0; z-index: 10;
}
.nav .brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.nav .brand .logo {
  width: 28px; height: 28px; border-radius: 6px; background: var(--brand-500);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
}
.nav .actions { display: flex; align-items: center; gap: 12px; }
.nav .who { color: var(--fg-muted); font-size: 13px; }

.card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 24px; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-600); font-weight: 600; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.025em; }
.error-box {
  color: #b91c1c; background: #fef2f2; border-radius: 6px; padding: 8px 12px; font-size: 13px; margin-top: 12px;
}
.dark .error-box { color: #f87171; background: #450a0a; }