/* Public-site design system. See docs/clarity-ui.md for component ownership. */
:root {
  color-scheme: light;
  --ui-bg: #ffffff;
  --ui-surface: #f5f5f7;
  --ui-text: #1d1d1f;
  --ui-muted: #606064;
  --ui-accent: #266cb3;
  --ui-accent-hover: #1d568f;
  --ui-on-accent: #ffffff;
  --ui-selected: #eaf2fb;
  --ui-line: #dedee2;
  --ui-control-line: #99999f;
  --ui-positive-bg: #eaf3e7;
  --ui-positive: #356222;
  --ui-warning-bg: #fff0df;
  --ui-warning: #884109;
  --ui-error: #b3261e;
  --ui-overlay: rgb(16 17 19 / 60%);
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --motion-ui: 180ms ease;
  --motion-content: 300ms ease;
  --primary: var(--ui-accent);
  --primary-dark: var(--ui-accent);
  --secondary: var(--ui-surface);
  --navy: var(--ui-bg);
  --paper: var(--ui-bg);
  --paper-2: var(--ui-surface);
  --card: var(--ui-bg);
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --warm-line: var(--ui-line);
  --success: var(--ui-positive);
  --error: var(--ui-error);
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --ui-bg: #101113;
  --ui-surface: #202226;
  --ui-text: #f5f5f7;
  --ui-muted: #b0b4bd;
  --ui-accent: #82b8f6;
  --ui-accent-hover: #a2cdff;
  --ui-on-accent: #101113;
  --ui-selected: #20364f;
  --ui-line: #383b42;
  --ui-control-line: #747a84;
  --ui-positive-bg: #203b2a;
  --ui-positive: #b5dfb0;
  --ui-warning-bg: #42301f;
  --ui-warning: #f5c78f;
  --ui-error: #ffb5ae;
  --ui-overlay: rgb(0 0 0 / 72%);
}
html, :root body { background: var(--ui-bg); color: var(--ui-text); }
:root body { font-family: var(--ui-font); line-height: 1.5; letter-spacing: 0; }
:root body::before { content: none; }
:root .shell { width: 100%; max-width: 1200px; margin: 0 auto; border: 0; border-radius: 0; background: var(--ui-bg); box-shadow: none; overflow: visible; }
:root .content { padding: var(--space-6) var(--space-4); background: var(--ui-bg); }
:root .content:has(> .sidebar) { grid-template-columns: 220px minmax(0,1fr); gap: var(--space-4); }
:root .main { min-width: 0; }

/* Header tokens are scoped to these pages; the separate narrator is unchanged. */
:root .dystopian-header {
  --header-ink: var(--ui-text); --header-accent: var(--ui-accent); --header-warm: var(--ui-muted);
  --header-bg: var(--ui-bg); --header-menu: var(--ui-bg); --header-control: var(--ui-bg);
  --header-line: var(--ui-line); --header-selected: var(--ui-selected);
  font-family: var(--ui-font); min-height: 96px;
}
:root .dystopian-header .brand { padding: var(--space-3) var(--space-4); }
:root .dystopian-header .brand-logo, :root .dystopian-header .brand-logo img { width: 64px; height: 64px; }
:root .dystopian-header .brand-logo img, :root .reader-brand img { filter: none; }
:root .dystopian-header .tagline { padding-inline: var(--space-4); }
:root .dystopian-header .tagline span { font-size: 12px; font-weight: 600; letter-spacing: 0; }
:root .top-divider { border: 0; }
:root .site-menu { border-radius: var(--radius-control); }
:root .site-menu a, :root .site-menu a.subitem { font-size: 14px; font-weight: 600; min-height: 44px; }
:root .menu-heading { font-size: 12px; letter-spacing: 0; font-weight: 600; }
.menu-wrap { display: flex; align-items: center; gap: var(--space-1); }
.theme-toggle { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ui-line); border-radius: var(--radius-control); background: var(--ui-bg); color: var(--ui-accent); cursor: pointer; }
.theme-icon { display: block; width: 21px; height: 21px; background: currentColor; mask: url('/assets/icons/moon.svg') center / contain no-repeat; }
[data-theme='dark'] .theme-icon { mask-image: url('/assets/icons/sun.svg'); }

:root :is(.hero h1, .section-head h2, .modal-title, .coming-soon h1) { font-family: var(--ui-font); color: var(--ui-text); font-weight: 700; letter-spacing: 0; }
:root .hero { min-height: 0; padding: 0 0 var(--space-4); margin-bottom: var(--space-4); border: 0; border-radius: 0; background: transparent; }
:root .hero h1 { font-size: 36px; line-height: 1.2; white-space: normal; text-wrap: balance; }
:root .main > .hero h1 { font-size: 32px; text-wrap: initial; }
:root .hero p { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--ui-muted); }
:root :is(.count-line, .sort-wrap, .meta-row, .status, .note, .side-card, .excerpt, .cn-name, .top-cn, .modal-cn, .member-prices) { color: var(--ui-muted); font-weight: 400; }
:root .count-line { font-size: 16px; }
:root .count-line strong { color: var(--ui-text); font-size: inherit; }
:root .section-head h2 { font-size: 22px; line-height: 1.3; }
:root .section-head p { font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--ui-muted); }
:root .section-head { margin-bottom: var(--space-3); align-items: center; }
:root .top-played { padding: 0 0 var(--space-4); }
:root .tabs-row { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0 0 var(--space-3); }
:root .quick-row { gap: var(--space-1); }
:root .sort-wrap { margin-left: auto; font-size: 14px; flex-wrap: wrap; gap: var(--space-1); }
:root .meta-row { margin-bottom: var(--space-3); font-size: 14px; }

:root .grid { gap: var(--space-3); }
:root .card, :root .top-card, :root .top-card.featured { background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: var(--radius-card); box-shadow: none; color: var(--ui-text); transition: border-color var(--motion-content), background-color var(--motion-content); }
:root .card { grid-template-columns: 72px minmax(0,1fr); gap: var(--space-2); padding: var(--space-3); min-height: 0; }
:root .card:hover, :root .top-card:hover { transform: none; box-shadow: none; border-color: var(--ui-accent); }
:root .cover, :root .top-cover, :root .modal-cover { background: var(--ui-surface); border: 0; border-radius: 8px; box-shadow: none; }
:root .card .cover { width: 72px; height: 96px; }
:root .cover img, :root .top-cover img, :root .modal-cover img { object-fit: contain; border-radius: 0; }
:root .name { color: var(--ui-text); font-size: 17px; line-height: 1.4; font-weight: 650; -webkit-line-clamp: 3; }
:root .cn-name { font-size: 14px; line-height: 1.5; }
:root .top-card, :root .top-card.featured { padding: var(--space-2); gap: var(--space-2); flex-basis: 248px; }
:root .top-name, :root .top-card.featured .top-name { font-size: 15px; line-height: 1.4; font-weight: 650; color: var(--ui-text); }
:root .top-cn { font-size: 12px; line-height: 1.5; }
:root .top-rank { background: var(--ui-selected); color: var(--ui-accent); font-size: 12px; font-weight: 700; height: auto; min-height: 26px; padding: 4px 8px; }
:root .top-played-grid { gap: var(--space-2); scrollbar-color: var(--ui-control-line) var(--ui-surface); }
:root .top-played-controls { display: flex; }
:root .facts { margin-top: var(--space-2); font-size: 13px; line-height: 1.5; font-weight: 500; gap: var(--space-1); color: var(--ui-muted); }
:root .fact { min-height: 32px; padding: 5px 8px; background: var(--ui-surface); color: var(--ui-text); }
:root .fact strong { color: var(--ui-text); font-weight: 500; }
:root .fact svg { color: var(--ui-muted); width: 14px; height: 14px; }
:root .fact.rating svg { color: var(--ui-warning); }
:root :is(.labels, .tags, .tag-list) { gap: var(--space-1); }
:root :is(.label, .stock, .tag-chip, .type-badge) { height: auto; min-height: 26px; max-width: 100%; padding: 4px 8px; font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
:root .tag-chip { overflow: visible; border-color: var(--ui-line); }
:root :is(.tag-chip, .type-badge, .label.status, .stock.ask) { background: var(--ui-selected); color: var(--ui-accent); }
:root :is(.label.chinese, .stock.in) { background: var(--ui-positive-bg); color: var(--ui-positive); }
:root :is(.label.expansion, .stock.low) { background: var(--ui-warning-bg); color: var(--ui-warning); }
:root .label.member { background: var(--ui-surface); color: var(--ui-text); }
:root .price { color: var(--ui-text); font-size: 20px; font-weight: 700; }
:root .member-prices { font-size: 13px; line-height: 1.5; gap: 4px; }
:root .member-prices span { white-space: normal; }
:root .excerpt { font-size: 14px; line-height: 1.6; }
:root .fallback-cover { background: var(--ui-selected); color: var(--ui-accent); font-size: 12px; padding: 8px; line-height: 1.4; }
:root .case-cover { padding: 12px; }
:root .case-cover strong { font-family: var(--ui-font); color: var(--ui-text); }
:root .case-cover::before, :root .case-cover::after, :root .case-cover span { color: var(--ui-muted); font-size: 12px; letter-spacing: 0; }

:root .sidebar { padding: 0 var(--space-3) var(--space-3) 0; background: var(--ui-bg); border: 0; border-right: 1px solid var(--ui-line); border-radius: 0; box-shadow: none; max-height: var(--filter-panel-max-height,calc(100dvh - 180px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--ui-control-line) var(--ui-bg); }
:root .filter-block { padding: var(--space-3) 0; border-bottom: 1px solid var(--ui-line); }
:root .filter-block:last-child { border: 0; }
:root .filter-title { margin: 0; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; }
:root .filter-title button { min-height: 56px; padding: 16px 0; }
:root .player-list { background: var(--ui-bg); border-color: var(--ui-line); }
:root .player-option { min-height: 44px; height: auto; padding: 10px 12px; background: transparent; color: var(--ui-text); border-color: var(--ui-line); font-size: 14px; font-weight: 400; line-height: 1.5; }
:root .player-option::after { background: var(--ui-bg); border-color: var(--ui-control-line); }
:root .player-option.active { background: var(--ui-selected); color: var(--ui-accent); font-weight: 600; }
:root .player-option.active::after { background: var(--ui-accent); color: var(--ui-on-accent); border-color: var(--ui-accent); }
:root .check-row { min-height: 44px; padding-block: 8px; color: var(--ui-text); font-size: 14px; font-weight: 400; }
:root input[type='checkbox'] { accent-color: var(--ui-accent); }
:root :is(.search, .mobile-search, .sidebar-select, .filter-select, .sort-wrap select),
:root input:not([type='checkbox']), :root textarea { border: 1px solid var(--ui-control-line); border-radius: var(--radius-control); background: var(--ui-bg); color: var(--ui-text); box-shadow: none; min-height: 46px; font-size: 16px; font-weight: 400; }
:root .search, :root .mobile-search { height: 46px; padding-inline: var(--space-2); }
:root .search input, :root .mobile-search input { min-height: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; }
:root .search span, :root .mobile-search span, :root input::placeholder, :root textarea::placeholder { color: var(--ui-muted); opacity: 1; }
:root .search:focus-within, :root .mobile-search:focus-within { outline: 2px solid var(--ui-accent); outline-offset: 2px; box-shadow: none; }
:root .sidebar-select, :root .filter-select, :root .sort-wrap select { padding: 10px 12px; height: auto; font-size: 14px; }
.select-control { position: relative; display: block; min-width: 0; }
.select-control::after { content: ''; position: absolute; width: 18px; height: 18px; right: 12px; top: 50%; transform: translateY(-50%); background: var(--ui-muted); mask: url('/assets/icons/chevron-down.svg') center / contain no-repeat; pointer-events: none; }
:root .select-control select { display: block; appearance: none; -webkit-appearance: none; width: 100%; padding-right: 42px; text-overflow: ellipsis; }
:root .sort-wrap .select-control { min-width: 194px; }
:root label { color: var(--ui-text); font-size: 14px; font-weight: 600; }
:root .required { color: var(--ui-error); }
:root :is(.pill, .clear-btn, .submit-btn, .rulebook-link) { min-height: 46px; height: auto; padding: 10px 16px; border: 1px solid var(--ui-line); border-radius: var(--radius-pill); box-shadow: none; font-size: 14px; line-height: 1.5; font-weight: 600; background: var(--ui-bg); color: var(--ui-text); }
:root .pill { min-width: 0; }
:root .pill.active, :root .submit-btn { background: var(--ui-accent); color: var(--ui-on-accent); border-color: var(--ui-accent); }
:root .pill:hover:not(.active), :root .clear-btn:hover, :root .rulebook-link:hover { background: var(--ui-selected); color: var(--ui-accent); border-color: var(--ui-accent); }
:root .submit-btn:hover:not(:disabled) { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); }
:root :is(.menu-btn, .theme-toggle, .close, .reader-icon, .top-played-controls button, .filter-toggle, .filter-close) { min-width: 44px; min-height: 44px; border: 1px solid var(--ui-line); border-radius: var(--radius-control); color: var(--ui-text); background: var(--ui-bg); box-shadow: none; }
:root .close { width: 44px; height: 44px; flex-shrink: 0; }
:root .filter-toggle { width: 46px; height: 46px; }
:root .top-played-controls button:hover:not(:disabled), :root .reader-icon:hover:not(:disabled), :root .close:hover { background: var(--ui-selected); color: var(--ui-accent); }
:root :is(button, .rulebook-link, .site-menu a) { transition: background-color var(--motion-ui), color var(--motion-ui), border-color var(--motion-ui); }
:root button:active:not(:disabled) { border-color: var(--ui-accent); }
:root button:disabled { opacity: .5; cursor: not-allowed; }
:root :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
[data-theme='dark'] .filter-title img, [data-theme='dark'] .top-played-controls img { filter: brightness(0) invert(.9); }

:root .modal, :root .filter-scrim { background: var(--ui-overlay); }
:root .dialog { border: 1px solid var(--ui-line); border-radius: var(--radius-card); background: var(--ui-bg); box-shadow: 0 16px 48px rgb(0 0 0 / 20%); max-height: calc(100dvh - 48px); }
:root .dialog-head { position: sticky; top: 0; z-index: 2; padding: 12px 12px 0; background: var(--ui-bg); }
:root .dialog-body { padding: 12px 24px 24px; gap: var(--space-4); }
:root .dialog-body > * { min-width: 0; }
:root .modal-title { font-size: 28px; line-height: 1.25; overflow-wrap: anywhere; }
:root .modal-cn { font-size: 16px; line-height: 1.5; }
:root .description { color: var(--ui-text); border-color: var(--ui-line); font-size: 16px; font-weight: 400; line-height: 1.7; margin-top: var(--space-4); padding-top: var(--space-3); overflow-wrap: anywhere; }
:root .description.loading { color: var(--ui-muted); }
:root .rental-box { background: transparent; border: 0; gap: var(--space-3); padding: 0; }
:root .rental-item { background: var(--ui-surface); border: 0; border-radius: 8px; padding: var(--space-3); }
:root .rental-label { color: var(--ui-muted); font-size: 13px; font-weight: 500; }
:root .rental-value { color: var(--ui-text); font-size: 18px; font-weight: 700; }
:root .not-rent-label { background: var(--ui-surface); color: var(--ui-muted); font-size: 12px; letter-spacing: 0; padding: 8px 12px; }
:root .empty, :root .empty-state { padding: var(--space-5); background: var(--ui-surface); color: var(--ui-muted); border: 1px solid var(--ui-line); border-radius: var(--radius-card); }
:root .status.error { color: var(--ui-error); }
:root .status.success { color: var(--ui-positive); }
:root .note, :root .side-card { font-size: 14px; line-height: 1.6; }
:root .coming-soon h1 { font-size: 48px; }
:root .coming-soon p { color: var(--ui-muted); }

@media (min-width: 721px) and (max-width: 1100px) {
  :root .content:has(> .sidebar) { grid-template-columns: 190px minmax(0,1fr); }
  :root .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 800px) {
  :root .content { padding: var(--space-5) var(--space-3); }
  :root .hero h1, :root .main > .hero h1 { font-size: 28px; }
  :root .modal-title { font-size: 24px; }
  :root .dystopian-header .brand { padding: var(--space-3); }
  :root .dystopian-header .tagline { padding: 0 var(--space-3) var(--space-3); }
  :root .dystopian-header .menu-wrap { margin: 0 var(--space-3) 0 0; }
  :root .section-head h2 { font-size: 20px; }
}
@media (max-width: 720px) {
  :root .content:has(> .sidebar) { grid-template-columns: minmax(0,1fr); }
  :root .main > .hero { padding: 0 0 var(--space-4); margin: 0; }
  :root .sidebar { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); border: 0; background: var(--ui-bg); max-height: 100dvh; }
  :root .quick-row { display: none; }
  :root .mobile-filterbar { min-height: 0; margin-bottom: var(--space-4); }
  :root .grid { grid-template-columns: minmax(0,1fr); }
  :root .card { grid-template-columns: 88px minmax(0,1fr); }
  :root .card .cover { width: 88px; height: 120px; }
  :root .top-card, :root .top-card.featured { flex-basis: 248px; }
  :root .sort-wrap { margin-left: 0; }
  :root .sort-wrap .select-control { flex: 1; min-width: 0; max-width: 100%; }
  :root .sort-wrap select { min-width: 0; max-width: 100%; }
  :root .dialog-body { grid-template-columns: minmax(0,1fr); padding: 12px 16px 24px; }
  :root .modal { padding: 12px; }
  :root .dialog { max-height: calc(100dvh - 24px); }
  :root .coming-soon h1 { font-size: 32px; }
}
@media (max-width: 380px) {
  :root .card { grid-template-columns: 64px minmax(0,1fr); }
  :root .card .cover { width: 64px; height: 88px; }
  :root .case-cover { padding: 8px; }
  :root .case-cover::before, :root .case-cover::after, :root .case-cover span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  :root .select-control select { appearance: auto; -webkit-appearance: auto; padding-right: 12px; }
  .select-control::after { display: none; }
}