:root {
  --app-bg: #f2f3ef;
  --app-surface: #ffffff;
  --app-surface-soft: #f7f8f4;
  --app-text: #18201b;
  --app-muted: #59645d;
  --app-subtle: #6b756e;
  --app-line: #d8ddd6;
  --app-line-strong: #c5cdc3;
  --app-primary: #245b3f;
  --app-primary-hover: #1d4b34;
  --app-primary-soft: #e9f1eb;
  --app-brass: #82662f;
  --app-danger: #a8322a;
  --app-danger-soft: #fff1ef;
  --app-success: #287344;
  --app-focus: #2d6f4d;
  --app-radius-sm: 8px;
  --app-radius-md: 12px;
  --app-radius-lg: 18px;
  --app-shadow-modal: 0 24px 70px rgba(24, 32, 27, 0.18);
  --app-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --app-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --app-motion-fast: 150ms;
  --app-motion-standard: 200ms;
  --app-nav-height: 60px;
  --app-content: 1120px;
  --app-reading: 72ch;
  --fg: var(--app-text);
  --muted: var(--app-muted);
  --subtle: var(--app-subtle);
  --border: var(--app-line);
  --border-light: #e8ebe6;
  --bg: var(--app-bg);
  --surface: var(--app-surface);
  --accent: var(--app-primary);
  --accent-hover: var(--app-primary-hover);
  --primary: var(--app-primary) !important;
  --primary-hover: var(--app-primary-hover) !important;
  --text: var(--app-text) !important;
  --muted: var(--app-muted) !important;
  --line: var(--app-line) !important;
  --danger: var(--app-danger) !important;
  --success: var(--app-success) !important;
}

html { scroll-behavior: auto !important; }

body {
  color: var(--app-text) !important;
  background: var(--app-bg) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea { font: inherit; }

button,
a { touch-action: manipulation; }

:focus-visible {
  outline: 3px solid var(--app-focus) !important;
  outline-offset: 3px !important;
}

.site-nav {
  position: sticky;
  inset: 0 0 auto;
  z-index: 1000;
  min-height: var(--app-nav-height);
  padding: 6px clamp(12px, 3vw, 32px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  color: var(--app-text);
  background: rgba(242, 243, 239, 0.94);
  border-bottom: 1px solid var(--app-line);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.site-nav__brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--app-text) !important;
  text-decoration: none !important;
  font-size: 0.92rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.site-nav__mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--app-primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.site-nav__brand small {
  color: var(--app-muted);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-nav__links {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.site-nav__links a {
  min-height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--app-radius-sm);
  color: var(--app-muted) !important;
  text-decoration: none !important;
  font-size: 0.8125rem;
  font-weight: 620;
  white-space: nowrap;
}

.site-nav__links a[aria-current="page"] {
  color: var(--app-primary) !important;
  background: var(--app-primary-soft);
}

.site-nav__actions {
  min-width: 44px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.site-nav__menu-button {
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  color: var(--app-text);
  background: var(--app-surface);
  cursor: pointer;
}

.site-nav__menu-button svg { width: 20px; height: 20px; }
.site-nav__menu-button .site-nav__close { display: none; }
.site-nav__menu-button[aria-expanded="true"] .site-nav__open { display: none; }
.site-nav__menu-button[aria-expanded="true"] .site-nav__close { display: block; }

@media (hover: hover) and (pointer: fine) {
  .site-nav__links a:hover,
  .site-nav__brand:hover { background: rgba(36, 91, 63, 0.07); }
}

@media (max-width: 760px) {
  .site-nav {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    padding-inline: 10px;
  }

  .site-nav__brand small { display: none; }
  .site-nav__menu-button { display: grid; }
  .site-nav__links {
    position: absolute;
    top: calc(100% + 1px);
    left: 10px;
    right: 10px;
    display: none;
    padding: 8px;
    border: 1px solid var(--app-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 40px rgba(24, 32, 27, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .site-nav[data-open="true"] .site-nav__links { display: grid; }
  .site-nav__links a { width: 100%; padding-inline: 14px; }
}

.internal-userbar {
  position: static !important;
  inset: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.internal-userbar__name {
  color: var(--app-muted);
  padding: 0 6px !important;
  font-size: 0.75rem;
}
.internal-userbar__tier {
  color: #075fae;
  background: #eaf3fc;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.internal-userbar a,
.internal-userbar button {
  min-width: 44px;
  min-height: 44px !important;
  padding: 0 10px !important;
  border-radius: var(--app-radius-sm) !important;
  color: var(--app-primary) !important;
}

.internal-userbar button { color: var(--app-danger) !important; }

.internal-userbar--floating {
  position: fixed !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 1000;
  padding: 4px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius-md) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 10px 32px rgba(24, 32, 27, 0.12) !important;
}

body > .shell .intro { background: #183c2b !important; }
body > .shell .intro p { color: #dce8df !important; }
body > .shell .privacy { color: #b9cabf !important; }
body > .shell { box-shadow: 0 20px 60px rgba(24, 32, 27, 0.1) !important; }
.field input:focus { border-color: var(--app-primary) !important; }
#submit.btn { background: var(--app-primary) !important; color: #fff !important; }

.app-dialog {
  width: min(calc(100% - 32px), 440px);
  padding: 0;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-lg);
  color: var(--app-text);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-modal);
}

.app-dialog::backdrop { background: rgba(18, 25, 20, 0.42); }
.app-dialog form { padding: 24px; }
.app-dialog h2 { margin: 0 0 8px; font-size: 1.15rem; }
.app-dialog p { margin: 0; color: var(--app-muted); white-space: pre-line; }
.app-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.app-dialog__actions button { min-height: 44px; padding: 0 16px; border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: #fff; color: var(--app-text); cursor: pointer; }
.app-dialog__actions .primary { border-color: var(--app-primary); background: var(--app-primary); color: #fff; }
.app-dialog__actions .danger { border-color: var(--app-danger); background: var(--app-danger); }

.app-notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1200;
  max-width: calc(100% - 32px);
  padding: 11px 16px;
  border: 1px solid var(--app-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--app-text);
  box-shadow: 0 12px 36px rgba(24, 32, 27, 0.14);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 150ms ease, transform 150ms var(--app-ease-out);
}
.app-notice.show { opacity: 1; transform: translate(-50%, 0); }

.btn,
.submit,
.cat-btn,
.rate-btn,
.row-actions button,
.toggle,
.btn-reset {
  min-height: 44px !important;
  border-radius: var(--app-radius-sm) !important;
}

.btn.primary,
.btn-blue,
.submit,
.rate-easy {
  color: #fff !important;
  background: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
}

.btn-reset {
  color: var(--app-danger) !important;
  border-color: rgba(168, 50, 42, 0.35) !important;
  background: var(--app-danger-soft) !important;
}

.is-pointer-pressed {
  transform: scale(0.97) !important;
  transition: transform var(--app-motion-fast) var(--app-ease-out) !important;
}

.page-header,
.header,
.progress,
.card,
.qcard,
.panel,
.shell,
.term-card,
.bc,
.search-result,
.link-card {
  border-color: var(--app-line) !important;
}

.page-header h1,
.header h1,
.hero h1 { color: var(--app-text) !important; }

.page-header .sub,
.header p,
.header .sub,
.hero p,
.article-item .zh-title,
.search-result-snippet,
.progress-text,
.card-h .zh,
.card .zh,
.term-card p,
.footer,
.page-footer { color: var(--app-muted) !important; }

.stat-num,
.stat .n,
.bc .n,
.progress .pp,
.card-count,
.cs,
.language-label,
.points,
.result-head .total,
.fg-result strong { color: var(--app-primary) !important; }

.hero h1 span {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--app-primary) !important;
}

.progress-track > .progress-bar {
  width: 100% !important;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--app-primary) !important;
  transition: none !important;
}

.card-body,
.cat-body,
.card-toggle,
.cat-arrow,
.cs .ti { transition: none !important; }

.bc,
.card,
.term-card,
.link-card,
.search-result { transition: none !important; }

@media (hover: hover) and (pointer: fine) {
  .bc:hover,
  .card:hover,
  .term-card:hover,
  .link-card:hover,
  .search-result:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

.qmeta,
.answer-hint,
.search-result-category,
.card-header h2 small,
.article-item .zh-title,
.link-card .link-label small,
.card-h .zh,
.card-meta,
.card-hint,
.stats,
.legal-note { font-size: max(0.75rem, 12px) !important; }

.fg-pill { font-size: 0.75rem !important; }

dialog {
  color: var(--app-text);
  border: 1px solid var(--app-line) !important;
  box-shadow: var(--app-shadow-modal) !important;
}

dialog::backdrop { background: rgba(16, 24, 19, 0.52) !important; }

dialog[open] {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--app-motion-standard) var(--app-ease-out), transform var(--app-motion-standard) var(--app-ease-out);
}

@starting-style {
  dialog[open] { opacity: 0; transform: scale(0.97); }
}

.article-container { max-width: 78rem !important; }
.article-container > article { max-width: var(--app-reading); margin-inline: auto; }
.article-container figure,
.article-container table,
.article-container .ai-teaching-figure { max-width: 100%; }

@media (max-width: 700px) {
  .cat-body-inner { overflow-x: auto; overscroll-behavior-inline: contain; }
  .cat-body table { min-width: 720px; }
  .cat-body td:nth-child(4),
  .cat-body th:nth-child(4) { display: table-cell !important; }
}

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

  .is-pointer-pressed { transform: none !important; filter: brightness(0.96); }
  dialog[open] { transform: none !important; transition: opacity var(--app-motion-standard) ease !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-nav,
  .site-nav__links {
    background: var(--app-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  .site-nav,
  .site-nav__links {
    background: #fff !important;
    border-color: var(--app-text) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}