*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body {
  font-family: var(--font-sans); font-size: var(--fs-14); line-height: 1.5;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease !important;
}
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
img, svg { display: block; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 16px; height: 16px; }
.ico--xs { width: 14px; height: 14px; }

/* Logo — swap per theme */
.logo { height: 26px; width: auto; }
.logo--light { display: none; }
[data-theme="light"] .logo--dark { display: none; }
[data-theme="light"] .logo--light { display: block; }

/* Buttons */
.btn {
  --h: 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 14px; border-radius: var(--r-md);
  font-size: var(--fs-13); font-weight: 500; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur), color var(--dur), transform var(--dur-fast);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--primary:active { background: var(--accent-press); }
.btn--secondary { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.btn--secondary:hover { background: var(--surface-3); color: var(--text); }
.btn--ghost { color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--sm { --h: 30px; padding: 0 10px; font-size: var(--fs-12); border-radius: var(--r-sm); }
.btn--lg { --h: 48px; padding: 0 20px; font-size: var(--fs-14); }
.btn--block { width: 100%; }
.btn--icon { width: var(--h); padding: 0; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 500; white-space: nowrap;
  background: var(--neutral-soft); color: var(--neutral-ink);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge--plain::before { display: none; }
.badge--info { background: var(--info-soft); color: var(--info-ink); }
.badge--positive { background: var(--positive-soft); color: var(--positive-ink); }
.badge--danger { background: var(--accent-soft); color: var(--accent-ink); }
.badge--muted { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--border-strong); }

.tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px;
  font-size: var(--fs-11); font-weight: 500; color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--border-strong); white-space: nowrap;
}

/* Avatar */
.avatar {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; flex: none;
  background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong);
}
.avatar--me { background: var(--accent); color: #fff; box-shadow: none; }
.avatar--lg { width: 34px; height: 34px; font-size: 12px; }

/* Theme toggle */
.theme-toggle {
  position: relative; display: inline-flex; align-items: center; height: 32px; padding: 3px;
  border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong);
}
.theme-toggle span {
  position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; color: var(--text-3); transition: color var(--dur);
}
.theme-toggle::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 0 0 1px var(--border-strong);
  transition: transform var(--dur-slow) var(--ease-out);
}
[data-theme="dark"] .theme-toggle span:last-child,
[data-theme="light"] .theme-toggle span:first-child { color: var(--text); }
[data-theme="dark"] .theme-toggle::before { transform: translateX(26px); }

/* Inputs */
.input {
  position: relative; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px;
  border-radius: var(--r-md); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: box-shadow var(--dur) var(--ease-out), background-color var(--dur);
}
.input:hover { box-shadow: inset 0 0 0 1px var(--text-3); }
.input:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-ring); }
.input .ico { color: var(--text-3); }
.input:focus-within .ico { color: var(--text-2); }
.input input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-size: var(--fs-14); }
.input input::placeholder { color: var(--text-3); }
.input.is-invalid { box-shadow: inset 0 0 0 1px var(--accent); }

kbd {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3); padding: 1px 6px; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}