/*
 * 榴莲雅思词典 · Living Gold 中浓度视觉壳候选
 * 视觉层限定：无脚本、无 API、无存储、无字体/图片外链。
 * 为保持生产内联样式逐字不动，本文件使用更高选择器优先级覆盖显示层。
 */

:root {
  --lg-ink: #173228;
  --lg-ink-soft: #465b52;
  --lg-green: #123c2d;
  --lg-green-2: #1b5741;
  --lg-green-pale: #edf4ef;
  --lg-gold: #c4933b;
  --lg-gold-deep: #8f681f;
  --lg-gold-pale: #f7ecd2;
  --lg-canvas: #f2efe6;
  --lg-surface: #fffdf8;
  --lg-border: #dcd5c6;
  --lg-error: #913f3f;
  --lg-shadow: 0 16px 42px rgba(25, 48, 38, .10);
}

html {
  background: var(--lg-canvas);
}

html body {
  color: var(--lg-ink);
  background:
    radial-gradient(circle at 86% -4%, rgba(196, 147, 59, .14), transparent 28rem),
    linear-gradient(180deg, #eeece3 0%, #f8f6f0 42%, #f1eee5 100%);
}

html body .top {
  padding: 18px 16px 17px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 87% -44%, rgba(228, 190, 101, .30), transparent 18rem),
    linear-gradient(132deg, #0f3025 0%, var(--lg-green) 58%, #1e6048 100%);
  border-bottom: 1px solid rgba(229, 195, 113, .36);
  box-shadow: 0 18px 44px rgba(17, 47, 36, .24);
}

html body .top::before {
  content: "";
  position: absolute;
  right: -58px;
  top: -84px;
  width: 235px;
  height: 235px;
  border: 1px solid rgba(228, 190, 101, .22);
  border-radius: 50%;
  pointer-events: none;
}

html body .top > * {
  position: relative;
}

html body .top-title {
  grid-template-columns: 1fr;
  margin-bottom: 13px;
}

html body .top-title h1 {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fffdf8;
  font-family: Georgia, "Songti SC", serif;
  font-size: 24px;
  font-weight: 620;
  letter-spacing: -.025em;
}

html body .top-title h1::before {
  content: "";
  display: block;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  background:
    url("./assets/durian-d-leaf-signature.svg") center / 27px 27px no-repeat,
    linear-gradient(145deg, #ecd081, var(--lg-gold));
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 11px 55% 48% 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 18px rgba(0, 0, 0, .14);
  transform: rotate(-2deg);
}

html body .top-title h1::after {
  content: "LIVING GOLD";
  margin-left: auto;
  margin-right: 52px;
  color: #ead28d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .15em;
}

html body .top-subtitle {
  max-width: 680px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  line-height: 1.65;
}

html body .top-metrics {
  gap: 7px;
  margin-bottom: 2px;
}

html body .top-metric {
  min-width: 88px;
  padding: 8px 10px;
  background: rgba(255, 253, 248, .09);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
}

html body .top-metric strong {
  color: #fffdf7;
}

html body .top-metric span {
  color: rgba(255, 255, 255, .68);
}

html body .search-wrap {
  gap: 8px;
  padding: 6px;
  background: rgba(255, 253, 248, .98);
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 12px;
  box-shadow: 0 13px 30px rgba(7, 31, 22, .23);
}

html body #searchInput {
  min-height: 48px;
  color: var(--lg-ink);
  background: #fff;
  border-radius: 8px;
}

html body #searchInput:focus {
  outline: 3px solid rgba(196, 147, 59, .55);
  outline-offset: 1px;
}

html body .root-mode-btn {
  min-width: 44px;
  min-height: 44px;
  color: var(--lg-green);
  background: var(--lg-gold-pale);
  border-color: #d8bd7d;
}

html body .root-mode-btn.active {
  color: #fff;
  background: var(--lg-green);
  border-color: var(--lg-green);
}

html body .clear-btn:focus-visible,
html body .chip-btn:focus-visible,
html body .root-mode-btn:focus-visible,
html body .icon-btn:focus-visible,
html body button:focus-visible,
html body a:focus-visible {
  outline: 3px solid #e0b95c;
  outline-offset: 2px;
}

html body .count-hint {
  color: rgba(255, 255, 255, .74);
}

html body .chip-btn {
  color: #fffdf7;
  background: rgba(255, 253, 248, .11);
  border-color: rgba(235, 207, 139, .34);
}

html body .container {
  max-width: 790px;
  padding-top: 16px;
  padding-bottom: 36px;
}

html body .empty-state {
  color: var(--lg-ink-soft);
}

html body .empty-title {
  color: var(--lg-ink);
}

html body .empty-sub {
  color: #68756e;
}

html body .card,
html body .no-result,
html body .rescue-panel,
html body .hist-card {
  background: var(--lg-surface);
  border-color: var(--lg-border);
  box-shadow: var(--lg-shadow);
}

html body .card {
  border: 1px solid var(--lg-border);
  border-radius: 16px;
}

html body .word-main,
html body .sense-pos,
html body .section-title,
html body .depth-title,
html body .task-label,
html body .compare-word {
  color: var(--lg-green);
}

html body .word-main {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -.02em;
}

html body .section-title::after {
  background: linear-gradient(90deg, rgba(196, 147, 59, .50), rgba(196, 147, 59, 0));
}

html body .icon-btn {
  color: var(--lg-green);
  background: #fffefb;
  border-color: #d6d1c6;
}

html body .icon-btn:hover,
html body .icon-btn:focus {
  color: var(--lg-green);
  background: var(--lg-green-pale);
  border-color: #9db9aa;
}

html body .compare-pill,
html body .family-chip,
html body .phrase-link {
  min-height: 44px;
}

html body #result a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

html body .fav-btn.is-fav {
  color: var(--lg-gold-deep);
  background: var(--lg-gold-pale);
  border-color: #d6b769;
}

html body .badge-t1,
html body .importance-pill {
  color: #285440;
  background: var(--lg-green-pale);
  border-color: #c7dace;
}

html body .core-use,
html body .advice-box,
html body .compare-lab,
html body .example-item {
  background: #fbf6e9;
  border-color: #e6d19b;
}

html body .example-item {
  border-left-color: var(--lg-gold);
}

html body .sense-item,
html body .depth-panel,
html body .task-panel,
html body .t3-box,
html body .progress-panel,
html body .etym-block {
  background: #f5f6f1;
  border-color: #dde2da;
}

html body .family-chip,
html body .phrase-link,
html body .rescue-chip {
  color: var(--lg-green);
  background: var(--lg-green-pale);
  border-color: #bed2c5;
}

html body .load-notice {
  color: #3f5d50;
  background: #eef4f0;
  border-color: #cadbce;
}

html body .pwa-update-banner {
  color: var(--lg-ink);
  background: rgba(255, 253, 248, .98);
  border-color: rgba(196, 147, 59, .48);
  box-shadow: var(--lg-shadow);
}

html body .pwa-update-actions .primary {
  color: #fff;
  background: var(--lg-green);
  border-color: var(--lg-green);
}

html body #global-refresh-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 430px) {
  html body .top {
    padding: 14px 12px 15px;
  }

  html body .top-title h1 {
    font-size: 21px;
  }

  html body .top-title h1::after {
    display: none;
  }

  html body .top-subtitle,
  html body .top-metric span,
  html body .count-hint,
  html body .load-notice,
  html body .section-title,
  html body .field-label,
  html body .pos,
  html body .freq-tag,
  html body .lookup-badge,
  html body .tier-badge,
  html body .hist-jump-hint,
  html body .example-source,
  html body .example-zh,
  html body .example-use,
  html body .task-title,
  html body .task-label,
  html body .depth-note,
  html body .basic-fallback-source,
  html body .ipa-chip,
  html body .compare-ipa,
  html body .compare-example,
  html body .root-part,
  html body .root-meaning,
  html body .lang-badge {
    font-size: 14px;
  }

  html body .container {
    padding: 11px 10px 30px;
  }

  html body .card {
    padding: 15px;
    border-radius: 14px;
  }
}

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