/* ============================================================
   MMW 双模式主题（参考 mmwx-probe / mm-design）
   作用域：body.mmw-black
   - 默认（未开深色）= mm-design 明亮模式：暖沙金底 #d4c096
   - html.dark（深色开关）= mm-design 暗色模式：暖黑底 #15130f
   全部组件颜色经 --mm-* 变量驱动，随主题开关自动切换。
   ============================================================ */

/* ---------- 明亮模式 token（mm-design light） ---------- */
body.mmw-black {
  --mm-void: #d4c096;
  --mm-void-2: #cbb488;
  --mm-ink: #261d11;
  --mm-ink-soft: #4a3c26;
  --mm-ink-dim: #6d5b3a;
  --mm-ink-faint: #b79d6e;
  --mm-line: rgba(42, 33, 20, 0.12);
  --mm-line-strong: rgba(42, 33, 20, 0.2);
  --mm-gold: #8a5e1e;
  --mm-gold-dim: rgba(138, 94, 30, 0.16);
  --mm-wash: rgba(42, 33, 20, 0.06);
  --mm-plate: rgba(249, 235, 199, 0.85);
  --mm-input-bg: rgba(212, 192, 150, 0.5);
  --mm-chip: #f8f1de;
  --mm-shadow: 0 20px 48px rgba(42, 33, 20, 0.12);
  --mm-serif: "Instrument Serif", "Songti SC", "Noto Serif SC", "STSong", "SimSun", serif;
  --mm-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, Consolas, monospace;

  background: var(--mm-void) !important;
  color: var(--mm-ink);
  transition: background 0.6s cubic-bezier(0.45, 0.05, 0.15, 1), color 0.6s cubic-bezier(0.45, 0.05, 0.15, 1);
}

/* ---------- 暗色模式 token（mm-design dark） ---------- */
html.dark body.mmw-black {
  --mm-void: #15130f;
  --mm-void-2: #1b1914;
  --mm-void-deep: #0e0d0a;
  --mm-ink: #ddd6c8;
  --mm-ink-soft: #ccc5b4;
  --mm-ink-dim: #b6ae9c;
  --mm-ink-faint: #8a8271;
  --mm-line: rgba(221, 214, 200, 0.1);
  --mm-line-strong: rgba(221, 214, 200, 0.2);
  --mm-gold: #c4a56a;
  --mm-gold-dim: rgba(196, 165, 106, 0.14);
  --mm-wash: rgba(213, 208, 196, 0.05);
  --mm-plate: #1e1a12;
  --mm-input-bg: rgba(21, 19, 15, 0.82);
  --mm-chip: #f2efe7;
  --mm-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);

  background:
    radial-gradient(120% 90% at 50% -10%, #201c14 0%, rgba(32, 28, 20, 0) 60%),
    radial-gradient(90% 70% at 85% 110%, #191712 0%, rgba(25, 23, 18, 0) 55%),
    var(--mm-void) !important;
}

/* ---------- 噪点纹理层（mm-design .fx-grain 同款） ---------- */
body.mmw-black .fx-grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 35;
  opacity: 0.22;
  background: url("/css/mm-noise.png");
  background-size: 140px 140px;
  mix-blend-mode: screen;
  filter: brightness(0.42) contrast(2.6);
}
html:not(.dark) body.mmw-black .fx-grain {
  mix-blend-mode: multiply;
  filter: none;
  opacity: 0.13;
}

/* 盖掉自定义壁纸，让主题底色浮出来 */
body.mmw-black #fixed-background { display: none !important; }
body.mmw-black header { background: transparent !important; box-shadow: none !important; }

/* ---------- 顶部操作按钮 ---------- */
body.mmw-black .top-action-icon,
body.mmw-black #sidebarToggle {
  background: var(--mm-plate) !important;
  border: 1px solid var(--mm-line) !important;
  border-radius: 2px !important;
  color: var(--mm-ink) !important;
  box-shadow: none !important;
}
body.mmw-black .top-action-icon:hover,
body.mmw-black #sidebarToggle:hover { border-color: var(--mm-gold) !important; color: var(--mm-gold) !important; }

/* ---------- 搜索引擎切换：等宽字 kicker 风格 ---------- */
body.mmw-black .search-engine-wrapper {
  font-family: var(--mm-mono);
  margin-top: 0.55rem !important;
  margin-bottom: 0 !important;
}
body.mmw-black .search-engine-option span {
  font-family: var(--mm-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--mm-ink-dim) !important;
}
body.mmw-black .search-engine-option.active span,
body.mmw-black .search-engine-option:hover span { color: var(--mm-gold) !important; }
body.mmw-black .search-engine-option,
body.mmw-black .search-engine-option.active { color: var(--mm-gold) !important; }
body.mmw-black .search-engine-option::after { background: var(--mm-ink-faint) !important; }
body.mmw-black .search-engine-option:hover::after,
body.mmw-black .search-engine-option.active::after { background: var(--mm-gold) !important; }

/* ---------- 搜索框 ---------- */
body.mmw-black .search-input-target {
  background: var(--mm-input-bg) !important;
  border: 1px solid var(--mm-line-strong) !important;
  border-radius: 3px !important;
  color: var(--mm-ink) !important;
  box-shadow: var(--mm-shadow) !important;
  backdrop-filter: none !important;
  caret-color: var(--mm-gold) !important;
}
body.mmw-black .search-input-target::placeholder { color: var(--mm-ink-faint) !important; }
body.mmw-black .search-input-target:focus {
  border-color: var(--mm-gold) !important;
  box-shadow: 0 0 0 1px var(--mm-gold-dim), var(--mm-shadow) !important;
}
body.mmw-black .home-search-icon { color: var(--mm-ink-dim) !important; }

/* ---------- 快捷栏 ---------- */
body.mmw-black .quick-strip-item {
  background: var(--mm-plate) !important;
  border: 1px solid var(--mm-line) !important;
  border-radius: 2px !important;
  color: var(--mm-ink-soft) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
body.mmw-black .quick-strip-item:hover {
  background: var(--mm-wash) !important;
  border-color: var(--mm-gold) !important;
  color: var(--mm-ink) !important;
}
body.mmw-black .quick-strip-item.is-pin .quick-strip-name { color: var(--mm-gold) !important; }
body.mmw-black .quick-strip-divider { background: var(--mm-ink-faint) !important; opacity: 0.55 !important; }

/* ---------- 分类标签 ---------- */
body.mmw-black #horizontalCategoryNav .nav-btn,
body.mmw-black #horizontalCategoryNav .nav-btn.inactive,
body.mmw-black #horizontalCategoryNav .nav-btn.active {
  background: var(--mm-plate) !important;
  background-color: var(--mm-plate) !important;
  border: 1px solid var(--mm-line) !important;
  border-radius: 2px !important;
  color: var(--mm-ink-dim) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.mmw-black #horizontalCategoryNav .nav-btn:hover {
  border-color: var(--mm-line-strong) !important;
  color: var(--mm-ink) !important;
}
body.mmw-black #horizontalCategoryNav .nav-btn.active,
body.mmw-black #horizontalCategoryNav .nav-btn.nav-item-active {
  border-color: var(--mm-gold) !important;
  background: var(--mm-gold-dim) !important;
  background-color: var(--mm-gold-dim) !important;
  color: var(--mm-gold) !important;
}

/* ---------- 统计行标题：衬线 + 金线 ---------- */
body.mmw-black .home-stats-row h2 {
  color: var(--mm-ink) !important;
  font-family: var(--mm-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}
body.mmw-black .home-stats-row h2::after {
  content: "";
  display: block;
  width: 2.6rem;
  height: 1px;
  margin-top: 0.5rem;
  background: var(--mm-gold);
  opacity: 0.75;
}

/* ---------- 书签卡片 ---------- */
body.mmw-black .site-card,
html body.mmw-black .site-card.frosted-glass-effect,
html.dark body.mmw-black .site-card.frosted-glass-effect,
html.dark body.mmw-black .site-card.card-anim-flipIn.frosted-glass-effect {
  background: var(--mm-plate) !important;
  background-color: var(--mm-plate) !important;
  border: 1px solid var(--mm-line) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.mmw-black .site-card:hover,
html body.mmw-black .site-card.frosted-glass-effect:hover,
html.dark body.mmw-black .site-card.frosted-glass-effect:hover {
  border-color: var(--mm-gold) !important;
  box-shadow: var(--mm-shadow) !important;
}
body.mmw-black .site-card h3 {
  color: var(--mm-ink) !important;
  font-family: var(--mm-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}
body.mmw-black .site-card p,
body.mmw-black .site-card .preview-desc { color: var(--mm-ink-dim) !important; }
body.mmw-black .site-card .site-card-content a,
body.mmw-black .site-card a[class*="text-"] { color: var(--mm-ink-faint) !important; }
body.mmw-black .site-card .card-catelog-badge,
body.mmw-black .site-card [class*="catelog"] {
  background: var(--mm-gold-dim) !important;
  border: 1px solid var(--mm-gold) !important;
  color: var(--mm-gold) !important;
}

/* ---------- 图标芯片 ---------- */
body.mmw-black .site-card img[class*="bg-gray-100"],
body.mmw-black .site-card img[class*="bg-gray-700"] {
  background: var(--mm-chip) !important;
  border-radius: 4px !important;
  padding: 3px;
  box-sizing: border-box;
}
body.mmw-black .quick-strip-icon {
  background: var(--mm-chip) !important;
  border-radius: 3px !important;
  padding: 2px;
  box-sizing: border-box;
}

/* ---------- 页脚 ---------- */
body.mmw-black footer { color: var(--mm-ink-dim) !important; }
body.mmw-black footer .text-gray-300 { color: var(--mm-ink-faint) !important; }
body.mmw-black footer a { color: var(--mm-ink-dim) !important; }
body.mmw-black footer a:hover { color: var(--mm-gold) !important; }

/* ---------- 回到顶部 ---------- */
body.mmw-black #backToTop {
  background: var(--mm-plate) !important;
  border: 1px solid var(--mm-line) !important;
  border-radius: 2px !important;
  color: var(--mm-ink) !important;
}

/* ---------- 移动端微调 ---------- */
@media (max-width: 549px) {
  body.mmw-black .quick-strip-item { max-width: 7.5rem; }
  body.mmw-black .home-stats-row h2 { font-size: 1.3rem !important; }
}

/* ---------- 卡片压缩 + 描述分隔线 ---------- */
body.mmw-black .site-card { padding: 0.75rem 0.85rem !important; }
body.mmw-black .site-card .site-card-content > a > .flex.items-start { margin-bottom: 0 !important; }
body.mmw-black .site-card p {
  border-top: 1px solid var(--mm-line) !important;
  margin-top: 0.6rem !important;
  margin-bottom: 0 !important;
  padding-top: 0.5rem !important;
}

/* ---------- 卡片网址链接：墨色层次替代蓝色 ---------- */
html.dark body.mmw-black .site-card .site-card-content .text-primary-600,
html.dark body.mmw-black .site-card .site-card-content .text-primary-400 {
  color: var(--mm-ink-faint) !important;
}
html:not(.dark) body.mmw-black .site-card .site-card-content .text-primary-600,
html:not(.dark) body.mmw-black .site-card .site-card-content .text-primary-400 {
  color: var(--mm-ink-dim) !important;
}

/* ---------- 移动端页头避让悬浮按钮 ---------- */
@media (max-width: 549px) {
  body.mmw-black #app-scroll > .main-content > header {
    padding-top: 4.5rem !important;
  }
}

/* ---------- 布局：快捷栏置顶、统计标题隐藏 ---------- */
body.mmw-black .home-stats-row { display: none !important; }
body.mmw-black .quick-strip { margin: 0.5rem auto 1.4rem; }
body.mmw-black .quick-strip:not(.hidden) { animation-delay: 0.04s; }
body.mmw-black .home-search-shell { animation-delay: 0.14s; }
body.mmw-black #horizontalCategoryNav { animation-delay: 0.2s; }

/* ---------- 分类下划线：金色（覆盖上游蓝色 ::before） ---------- */
body.mmw-black #horizontalCategoryNav .nav-btn::before { background: var(--mm-gold) !important; }
body.mmw-black #horizontalCategoryNav .nav-btn:hover::before { background: var(--mm-gold) !important; opacity: 0.65; }
body.mmw-black #horizontalCategoryNav .nav-btn.active::before { background: var(--mm-gold) !important; }

/* ---------- 底部固定栏：分组 + 搜索（类 App 吸底布局） ---------- */
.mmw-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 0.5rem 0.9rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  background: var(--mm-void) !important;
  animation: iori-plate-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.28s backwards;
}

/* 分组行：单行横向滚动 */
.mmw-bottom-cats {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--mm-ink-faint) transparent;
  padding-bottom: 2px;
}
.mmw-bottom-cats::-webkit-scrollbar { height: 6px; }
.mmw-bottom-cats::-webkit-scrollbar-track { background: transparent; }
.mmw-bottom-cats::-webkit-scrollbar-thumb { background: var(--mm-ink-faint); border-radius: 3px; }
body.mmw-black #horizontalCategoryNav.iori-cats-scroll {
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* 书签滚动区给吸底栏让位 */
body.mmw-black #app-scroll { padding-bottom: 152px !important; }
@media (max-width: 549px) {
  body.mmw-black #app-scroll { padding-bottom: 168px !important; }
  .mmw-bottom-bar { padding-left: 0.55rem; padding-right: 0.55rem; }
  .mmw-bottom-cats { scrollbar-width: none; }
  .mmw-bottom-cats::-webkit-scrollbar { display: none; }
  /* 手机端分组：纯文字紧凑化（去方框/底色） */
  body.mmw-black #horizontalCategoryNav .nav-btn,
  body.mmw-black #horizontalCategoryNav .nav-btn.active,
  body.mmw-black #horizontalCategoryNav .nav-btn.inactive {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0.25rem 0.55rem !important;
    color: var(--mm-ink-dim) !important;
  }
  body.mmw-black #horizontalCategoryNav .nav-btn.active { color: var(--mm-gold) !important; }
  body.mmw-black #horizontalCategoryNav .nav-btn::before { background: var(--mm-gold) !important; }
  body.mmw-black .home-search-field input.search-input-target {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
  }
  body.mmw-black .search-engine-wrapper { margin-top: 0.3rem !important; }
  body.mmw-black .quick-strip { margin: 0.2rem auto 0.9rem; }
}

/* ---------- 吸底栏呼吸感：分组与搜索拉开、底部留白 ---------- */
.mmw-bottom-cats { margin-bottom: 0; }
.mmw-bottom-search {
  border-top: 1px solid var(--mm-line);
  margin-top: 0.55rem;
  padding-top: 0.65rem;
}
.mmw-bottom-search .home-search-shell { max-width: 46rem !important; }
body.mmw-black .mmw-bottom-search .search-input-target { padding-top: 0.8rem !important; padding-bottom: 0.8rem !important; }
.mmw-bottom-bar { padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px)); }
body.mmw-black #app-scroll { padding-bottom: 195px !important; }
@media (max-width: 549px) {
  body.mmw-black #app-scroll { padding-bottom: 148px !important; }
  .mmw-bottom-bar { padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px)); }
  .mmw-bottom-cats { margin-bottom: 0.35rem; }
  /* 分组间距紧凑化：去最小宽度、缩小间距与字号 */
  body.mmw-black #horizontalCategoryNav.iori-cats-scroll { gap: 0.15rem !important; }
  body.mmw-black #horizontalCategoryNav .nav-btn,
  body.mmw-black #horizontalCategoryNav .nav-btn.active {
    min-width: 0 !important;
    padding: 0.15rem 0.4rem !important;
    font-size: 0.82rem !important;
  }
}