@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --paper: #eeeeec;
  --ink: #202020;
  --muted: #717171;
  --line: #d0d0d0;
  --accent: #2949e8;
  --selected: #f2ee70;
  --surface: #f8f8f6;
  --bg: var(--paper);
  --bg-elev: var(--surface);
  --bg-soft: #e5e5e2;
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);
  --border-strong: #b9b9b5;
  --primary: var(--accent);
  --primary-hover: #1e3dca;
  --primary-soft: #e9ecff;
  --success: #197346;
  --success-soft: #e5f2ea;
  --danger: #a52e2e;
  --danger-soft: #f7eaea;
  --warning: #805000;
  --warning-soft: #f6efdf;
  --code-bg: #202020;
  --code-text: #eeeeec;
  --radius: 0px;
  --radius-sm: 0px;
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color-scheme: light;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
}

[data-theme="dark"] {
  --paper: #171717;
  --ink: #eeeeec;
  --muted: #b6b6b1;
  --line: #3d3d3a;
  --surface: #202020;
  --bg-soft: #2a2a28;
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);
  --border-strong: #5b5b56;
  --primary: #9ba9ff;
  --primary-hover: #b7c0ff;
  --primary-soft: #292d43;
  --success: #84c69c;
  --success-soft: #26392c;
  --danger: #ff9a91;
  --danger-soft: #452a28;
  --warning: #edc779;
  --warning-soft: #403620;
  --code-bg: #101010;
  --code-text: #eeeeec;
  color-scheme: dark;
  color: var(--ink);
  background: var(--paper);
}

body { min-width: 320px; background: var(--paper); color: var(--ink); font-family: var(--font); line-height: 1.7; }
::selection { background: var(--selected); color: #202020; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
h1, h2, h3, .brand-title, .section-title, .card-title { letter-spacing: 0; }
.container { width: min(100%, 1120px); padding-inline: clamp(16px, 4vw, 48px); }
.site-header { min-height: 88px; background: var(--paper); }
.header-inner { min-height: 88px; height: auto; gap: 24px; }
.brand-title { font-size: 16px; font-weight: 700; }
.brand-mark { color: var(--accent); }
.main-nav { gap: 8px; }
.main-nav a { min-height: 44px; padding: 10px 12px; border-radius: 0; }
.icon-btn { width: 44px; height: 44px; border-radius: 0; color: var(--ink); }
.card, .btn, .badge, .toast, .chip, .progress, .text-input, .admin-textarea, .admin-notice { border-radius: 0; }
.card { background: var(--surface); }
.hero.card { padding-inline: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.home-filters.card { padding-inline: 0; border: 0; background: transparent; }
.btn { min-height: 44px; padding: 9px 14px; }
.btn-sm { min-height: 44px; padding: 8px 12px; }
.badge { min-height: 24px; }
input.text-input, select.text-input, textarea.text-input { min-height: 44px; font-family: var(--font); border-radius: 0; }
textarea.text-input, textarea.admin-textarea { min-height: 88px; }
.site-footer { border: 0; padding: 28px 0; background: var(--ink); color: var(--paper); text-align: left; }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; }
.footer-legal { max-width: 72ch; line-height: 1.7; }
.footer-brand { display: grid; justify-items: end; gap: 6px; white-space: nowrap; }
.footer-brand a { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--paper); }
.footer-brand strong { color: var(--paper); }
.footer-brand > span { color: var(--paper); font-size: 13px; }
.admin-page main.container { min-height: calc(100vh - 190px); }
.admin-page .site-footer { padding-block: 20px; }
.admin-page .footer-inner { grid-template-columns: 1fr; }
.admin-page .footer-brand { display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; transform: translateY(-150%); background: var(--ink); color: var(--paper); }
.skip-link:focus { transform: none; }
.paper-date { letter-spacing: 0; }

@media (max-width: 760px) {
  .header-inner { gap: 10px; }
  .main-nav { gap: 0; }
  .main-nav a { padding-inline: 8px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { justify-items: start; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 600px) {
  .site-header, .header-inner { min-height: 68px; }
  .brand { display: flex; flex: none; }
  .brand-title { font-size: 13px; }
  .main-nav { min-width: 0; overflow-x: auto; }
  .main-nav a { min-height: 44px; padding-inline: 7px; font-size: 12px; }
  .main-nav a[data-nav="changelog"], .main-nav a[data-nav="about"] { display: none; }
  .icon-btn { flex: none; }
  .footer-inner { gap: 14px; }
  .footer-brand { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}