/*
 * 桔子网站视觉微调
 * 只调整颜色、字体、圆角、边框和交互质感，不改变原有页面结构与主布局。
 */

:root {
  --bg: #faf9f7;
  --bg-card: #fffefd;
  --text: #242220;
  --text-muted: #77716b;
  --text-dim: #aaa39c;
  --accent: #b85a20;
  --accent-contrast: #fffefd;
  --accent-dim: #e9b78f;
  --accent-light: #f8eee6;
  --border: #e8e3dd;
  --border-hover: #d8d0c8;
  --orange-light: #fbf3ec;
  --radius: 12px;
  --search-bg: #fffefd;
  --search-border: #d9d2cb;
  --dark-border: #d9d2cb;
  --input-bg: transparent;
  --btn-dark-bg: #242220;
  --btn-dark-color: #fffefd;
  --footer-color: #5f5a55;
  --section-title-color: #242220;
  --site-color: #5f5a55;
  --trial-body-color: #5f5a55;
  --header-bg: rgba(250, 249, 247, 0.96);
  --dropdown-bg: #fffefd;
  --dropdown-hover: #f5f1ed;
  --tab-active-color: #242220;
  --tab-active-border: #b85a20;
  --modal-bg: #fffefd;
  --contact-item-bg: #f5f1ed;
  --shdw-color: rgba(47, 39, 32, 0.08);
}

body.dark {
  --bg: #181716;
  --bg-card: #211f1d;
  --text: #f1ede8;
  --text-muted: #aaa29a;
  --text-dim: #756e68;
  --accent: #e39a62;
  --accent-contrast: #181716;
  --accent-dim: #b87a4b;
  --accent-light: #2d241e;
  --border: #35312e;
  --border-hover: #49423d;
  --orange-light: #2d241e;
  --search-bg: #211f1d;
  --search-border: #49423d;
  --dark-border: #49423d;
  --input-bg: transparent;
  --btn-dark-bg: #f1ede8;
  --btn-dark-color: #181716;
  --footer-color: #c5bdb5;
  --section-title-color: #f1ede8;
  --site-color: #c5bdb5;
  --trial-body-color: #c5bdb5;
  --header-bg: rgba(24, 23, 22, 0.96);
  --dropdown-bg: #252321;
  --dropdown-hover: #2d2a27;
  --tab-active-color: #f1ede8;
  --tab-active-border: #e39a62;
  --modal-bg: #211f1d;
  --contact-item-bg: #292623;
  --shdw-color: rgba(0, 0, 0, 0.28);
}

body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.005em;
}

.nav-banner .banner-slogan {
  color: var(--text-muted);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border-width: 1px;
  box-shadow: 0 4px 18px var(--shdw-color);
}

.theme-toggle:hover {
  border-color: var(--border-hover);
  box-shadow: 0 6px 22px var(--shdw-color);
  transform: translateY(-1px);
}

.main-nav {
  gap: 44px;
}

.nav-tab,
.nav-tab.active {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.035em;
}

.nav-tab {
  color: var(--text-muted);
  border-bottom-width: 1px;
}

.nav-tab.active {
  color: var(--tab-active-color);
}

.nav-page .search-wrap {
  border-width: 1px;
  border-color: var(--search-border);
  box-shadow: 0 8px 30px rgba(47, 39, 32, 0.045);
}

.nav-page .search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.search-engine-btn {
  border-right-width: 1px;
  border-right-color: var(--search-border);
  font-family: inherit;
  font-weight: 600;
}

.nav-page .search-input,
.search-btn {
  font-family: inherit;
  font-weight: 500;
}

.search-btn {
  background: var(--accent);
}

.search-btn:hover {
  filter: brightness(0.94);
}

.nav-page .section-title,
.study-page .section-title,
.shop-page .section-title {
  font-family: inherit;
  font-weight: 650;
  letter-spacing: 0.035em;
}

.nav-page .site {
  color: var(--site-color);
  border-radius: 7px;
}

.nav-page .site:hover {
  color: var(--text);
  background: var(--accent-light);
}

.nav-page .site:hover .site-icon {
  transform: scale(1.06);
}

.book-featured,
.public-book-card,
.product-card,
.trial-chapter {
  border-color: var(--border);
  border-radius: 14px;
}

.book-featured {
  box-shadow: 0 14px 44px rgba(47, 39, 32, 0.045);
}

.book-featured .book-cover {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(47, 39, 32, 0.1);
}

.book-featured .book-cover img {
  border-radius: 8px !important;
}

.book-featured .book-info h2 {
  font-weight: 650;
  letter-spacing: 0.01em;
}

.btn-download,
.btn-pay,
.public-book-card .btn-read,
.product-card .btn-buy {
  border-radius: 9px;
  font-weight: 600;
}

.btn-download,
.product-card .btn-buy,
.public-book-card .btn-read:hover {
  color: var(--accent-contrast);
}

.btn-download:hover {
  background: #a94f18;
}

.study-page .section-title {
  border-bottom: 1px solid var(--border);
}

.trial-chapter,
.public-book-card,
.product-card {
  box-shadow: none;
}

.trial-chapter:hover,
.public-book-card:hover,
.product-card:hover {
  box-shadow: 0 8px 28px rgba(47, 39, 32, 0.055);
  transform: translateY(-1px);
}

.trial-chapter-num {
  color: var(--accent);
  font-weight: 650;
}

.footer {
  color: var(--footer-color);
}

/* 书评图片：保留原始 640:306 比例，只做轻微纸张式倾角。 */
.reader-review-feature {
  width: 100%;
  max-width: 640px;
  margin: -4px auto 52px;
  padding: 9px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(47, 39, 32, 0.1);
  transform: rotate(-0.45deg);
  transform-origin: center center;
}

.reader-review-feature img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 7px;
}

body.dark .reader-review-feature {
  background: #e9e5df;
  border-color: #514a44;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

body.dark .reader-review-feature img {
  filter: brightness(0.92) contrast(0.97);
}

/* 手机页眉：外部主题样式必须显式保留移动字号，避免口号被 flex 压缩截断。 */
@media (max-width: 768px) {
  .nav-banner {
    padding-right: 50px;
  }

  .banner-logo-wrap,
  .nav-banner .banner-slogan {
    flex: 0 0 auto;
  }

  .nav-banner .banner-slogan {
    max-width: none;
    min-width: max-content;
    font-size: 14px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }

  .theme-toggle {
    width: 34px;
    height: 34px;
  }

  .main-nav {
    gap: 16px;
  }

  .nav-tab {
    font-size: 13px;
  }

  .nav-tab.active {
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  .main-nav {
    gap: 26px;
  }

  .reader-review-feature {
    width: calc(100% - 16px);
    max-width: none;
    margin-bottom: 38px;
    padding: 6px;
    border-radius: 10px;
    transform: none;
  }
}

@media (max-width: 480px) {
  .nav-banner {
    padding-right: 42px;
  }

  .nav-banner .banner-slogan {
    font-size: 12px;
  }

  .theme-toggle {
    width: 30px;
    height: 30px;
  }

  .main-nav {
    gap: 12px;
  }

  .nav-tab {
    font-size: 12px;
  }

  .nav-tab.active {
    font-size: 14px;
  }
}

@media (max-width: 374px) {
  .nav-banner .banner-slogan {
    max-width: none;
    font-size: 11px;
  }

  .theme-toggle {
    width: 28px;
    height: 28px;
  }
}

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