/* ============================================================
   optimize-v26.css — taste-skill + impeccable 设计抛光层
   注意：site-enhancements.css 由 nav-component.js 动态注入在最后，
   关键覆盖规则使用 !important 确保生效。
   旋钮: VARIANCE=6 / MOTION=3 / DENSITY=4
   ============================================================ */

/* ---- 设计 token ---- */
:root {
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .18s;
  --dur-med: .28s;
}

/* ---- 1. 色彩一致性：卡片顶边条统一杨梅红 ---- */
.quick-card.indigo::before,
.quick-card.fuchsia::before,
.quick-card.slate::before,
.quick-card.emerald::before,
.wiki-card.indigo::before,
.wiki-card.violet::before,
.wiki-card.fuchsia::before,
.wiki-card.pink::before,
.wiki-card.sky::before,
.wiki-card.emerald::before,
.wiki-card.amber::before,
.wiki-card.orange::before,
.wiki-card.rose::before,
.pick-card.c-indigo::before,
.pick-card.c-emerald::before,
.pick-card.c-amber::before,
.pick-card.c-rose::before,
.pick-card.c-sky::before,
.pick-card.c-violet::before,
.latest-card.c-indigo::before,
.latest-card.c-emerald::before,
.latest-card.c-amber::before,
.latest-card.c-rose::before,
.latest-card.c-sky::before,
.latest-card.c-violet::before {
  background: var(--color-primary) !important;
  opacity: 0;
}
.quick-card:hover::before,
.wiki-card:hover::before,
.pick-card:hover::before,
.latest-card:hover::before { opacity: 1 !important; }

/* 卡片图标底色统一 primary-bg */
.quick-card.slate .quick-icon,
.quick-card.emerald .quick-icon,
.wiki-card.pink .wiki-icon,
.wiki-card.sky .wiki-icon,
.wiki-card.emerald .wiki-icon,
.wiki-card.amber .wiki-icon,
.wiki-card.orange .wiki-icon,
.wiki-card.rose .wiki-icon {
  background: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
}
[data-theme="dark"] .quick-card.slate .quick-icon,
[data-theme="dark"] .quick-card.emerald .quick-icon,
[data-theme="dark"] .wiki-card.pink .wiki-icon,
[data-theme="dark"] .wiki-card.sky .wiki-icon,
[data-theme="dark"] .wiki-card.emerald .wiki-icon,
[data-theme="dark"] .wiki-card.amber .wiki-icon,
[data-theme="dark"] .wiki-card.orange .wiki-icon,
[data-theme="dark"] .wiki-card.rose .wiki-icon {
  background: var(--color-primary-bg) !important;
  color: var(--color-primary-light) !important;
}

/* ---- 2. hover 轻量化 ---- */
.quick-card, .wiki-card, .pick-card, .latest-card {
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out) !important;
}
.quick-card:hover,
.wiki-card:hover,
.pick-card:hover,
.latest-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.12), 0 2px 4px -2px rgb(0 0 0 / 0.06) !important;
}
.entry-card {
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out) !important;
}
.entry-card:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 28px -8px rgb(0 0 0 / 0.25) !important; }

/* ---- 3. tactile 按压 ---- */
.quick-card:active, .wiki-card:active,
.pick-card:active, .latest-card:active,
.entry-card:active, .hot-tag:active,
.hero-search-btn:active, .quick-link:active,
.pick-cat:active, .mc-chip:active {
  transform: scale(0.98) !important;
  transition-duration: .08s !important;
}

/* ---- 4. 热门搜索：emoji → SVG 圆点 ---- */
.hot-search-label::before {
  content: '' !important;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  display: inline-block;
  margin-right: 2px;
}
.hot-search-label { font-size: 12px; font-weight: 600; letter-spacing: .02em; }

.hot-tag.hot-rank-1 { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }
.hot-tag.hot-rank-1:hover { background: var(--color-primary) !important; color: #fff !important; }
.hot-tag.hot-rank-2 { border-color: var(--color-border) !important; color: var(--color-text-secondary) !important; }
.hot-tag.hot-rank-2:hover { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; }
.hot-tag.hot-rank-3 { border-color: var(--color-border) !important; color: var(--color-text-muted) !important; }
.hot-tag.hot-rank-3:hover { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; }

/* ---- 5. 标题字距 ---- */
.hero-title {
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
}
.resource-section-title,
.pick-card-title, .wiki-title, .quick-title {
  letter-spacing: -0.01em;
}

/* ---- 6. 阴影色调 ---- */
:root {
  --shadow-lg: 0 6px 16px -4px rgb(15 23 42 / 0.08), 0 2px 6px -2px rgb(15 23 42 / 0.05);
  --shadow-xl: 0 16px 32px -8px rgb(15 23 42 / 0.12), 0 4px 12px -4px rgb(15 23 42 / 0.06);
}
[data-theme="dark"] {
  --shadow-lg: 0 8px 16px -4px rgb(0 0 0 / 0.4), 0 2px 6px -2px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 16px 32px -8px rgb(0 0 0 / 0.5), 0 4px 12px -4px rgb(0 0 0 / 0.3);
}

/* ---- 7. 搜索空态 ---- */
.search-history-empty { padding: 32px 16px; text-align: center; }
.search-history-empty::before {
  content: '⌕'; display: block; font-size: 28px;
  color: var(--color-text-muted); opacity: .4; margin-bottom: 8px; font-weight: 300;
}

/* ---- 8. 打赏按钮 ---- */
.donate-trigger-btn {
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.donate-trigger-btn:active { transform: scale(0.97); }

/* ---- 9. 响应式 ---- */
@media (max-width: 640px) {
  .quick-grid, .wiki-grid { gap: 14px; }
  .quick-card, .wiki-card { padding: 20px; }
  .hero-title { font-size: clamp(28px, 7vw, 40px); }
}

/* ---- 10. 焦点可见 ---- */
.hero-search-input:focus-visible,
.hot-tag:focus-visible,
.quick-link:focus-visible,
.resource-card:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- 11. 减少动效 ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}