/* ============================================================
 * 薯灵感 SparkNote · Design System 2.0
 * 商业级视觉规范：品牌红色阶 / 暖灰中性色 / 分层阴影 / 弹簧动效
 * ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 布局：内容区最大宽度（宽屏充分利用横向空间，移动端不受影响） */
  --maxw: 1440px;

  /* 品牌红色阶 */
  --red-50:  #FFF5F6;
  --red-100: #FFEBEE;
  --red-200: #FFD1D9;
  --red-300: #FF9FAD;
  --red-400: #FF5C72;
  --red-500: #FF2442;
  --red-600: #E01230;
  --red-700: #B80D26;

  --primary: var(--red-500);
  --red: var(--red-500);
  --red-deep: var(--red-600);
  --red-light: var(--red-50);

  /* 中性色（暖灰，带轻微红相，画面更干净高级） */
  --ink:   #1F1B1D;
  --ink2:  #5B5457;
  --ink3:  #767076;
  --ink4:  #C9C3C5;
  --line:  #F2EDEE;
  --line2: #E8E2E4;
  --bg:    #FBF9FA;
  --card:  #FFFFFF;

  /* 语义色 */
  --green: #1E9E6A;
  --green-bg: rgba(30, 158, 106, .1);
  --amber: #D98E0B;
  --amber-bg: rgba(217, 142, 11, .12);
  --gray-pill: #66707E;

  /* 渐变 */
  /* 2026-10-17 对比度修复（与 design-tokens.css 同值）：
       · 主按钮渐变亮端 #FF5C72 上白字 2.99 → #EE2740（4.20）
       · hero 渐变亮端 #FF6B7F 上白字 2.74  → #F0324C（3.99） */
  --pink-grad: linear-gradient(135deg, #EE2740 0%, #E01230 52%, #C8102A 100%);
  --pink-grad-soft: linear-gradient(135deg, #FFF5F6, #FFEBEE);
  --hero-grad: linear-gradient(120deg, #F0324C 0%, #E01230 45%, #C8102A 100%);

  /* 圆角体系 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 26px;
  --radius: var(--r-md);
  --radius-lg: var(--r-xl);

  /* 阴影分层（含品牌红光晕） */
  --shadow-xs: 0 1px 2px rgba(31, 27, 29, .04);
  --shadow-sm: 0 2px 8px rgba(31, 27, 29, .05), 0 1px 2px rgba(31, 27, 29, .04);
  --shadow-md: 0 6px 20px rgba(31, 27, 29, .07), 0 2px 6px rgba(31, 27, 29, .04);
  --shadow-lg: 0 16px 40px rgba(31, 27, 29, .1), 0 4px 12px rgba(31, 27, 29, .05);
  --shadow-red:    0 4px 14px rgba(255, 36, 66, .28), 0 1px 3px rgba(255, 36, 66, .18);
  --shadow-red-lg: 0 10px 28px rgba(255, 36, 66, .34), 0 2px 8px rgba(255, 36, 66, .2);

  /* 缓动曲线 */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  /* Galaxy（uiverse.io）签名曲线：Material 标准减速 + 弹跳回环 */
  --ease-galaxy:        cubic-bezier(0, 0, .2, 1);
  --ease-galaxy-bounce: cubic-bezier(.67, .08, .46, 1.5);

  /* 时长 */
  --t-fast: .16s;
  --t-med: .28s;
  --t-slow: .45s;

  /* 字体阶梯 */
  --fs-h1: 22px;
  --fs-h2: 18px;
  --fs-h3: 15px;
  --fs-body: 14px;
  --fs-sm: 12.5px;
  --fs-xs: 11px;
}

/* ---------- 2. 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  /* 分层氛围背景：暖白底 + 顶部品牌红晕 + 角落光斑，固定不滚动 */
  background:
    radial-gradient(1200px 480px at 50% -140px, rgba(255, 36, 66, .07), transparent 62%),
    radial-gradient(720px 420px at 96% 4%, rgba(255, 92, 114, .05), transparent 60%),
    radial-gradient(640px 480px at 2% 42%, rgba(255, 36, 66, .035), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  padding-bottom: 78px; /* 移动端 tabbar 空间 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

::selection { background: rgba(255, 36, 66, .18); }

/* 数字等宽，计数/数据不跳动 */
b, strong, .sv, .score-num, .hot-heat { font-variant-numeric: tabular-nums; }

/* 精致滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--ink4); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink3); }
::-webkit-scrollbar-track { background: transparent; }

/* 键盘可达性焦点 */
:focus-visible {
  outline: 2px solid rgba(255, 36, 66, .55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 3. 动效关键帧 ---------- */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(16px) scale(.995); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.92); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -420px 0; }
  100% { background-position: 420px 0; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50%      { transform: translateY(-12px) rotate(-6deg); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 36, 66, .28); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 36, 66, 0); }
}
@keyframes tabPop {
  0% { transform: scale(.7); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes ringDraw {
  from { stroke-dashoffset: var(--ring-len, 283); }
}

/* 滚动入场（JS IntersectionObserver 添加 .in） */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease-out-expo), transform .55s var(--ease-out-expo);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 4. 顶部导航（玻璃拟态） ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky, 100);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-med) var(--ease-standard), border-color var(--t-med);
}
.topbar.scrolled {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-md);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-12);
  padding: var(--s-12) var(--s-24);
}
.logo {
  display: flex; align-items: center; gap: var(--s-10);
  font-size: 18px; font-weight: 800; letter-spacing: .5px;
  cursor: pointer; user-select: none;
}
.logo-badge {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--pink-grad);
  color: #fff; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-red);
  transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med);
}
.logo:hover .logo-badge {
  transform: rotate(-8deg) scale(1.08);
  box-shadow: var(--shadow-red-lg);
}
.logo-name { line-height: 1.15; }
/* 2026-10-17 final-audit：副标题 10px → 12px，与 index.html 行内 12px 对齐（字号下限 ≥12px） */
.logo small { font-size: 12px; color: var(--ink3); font-weight: 500; display: block; letter-spacing: 1.5px; }

.topnav { display: none; margin-left: auto; gap: var(--s-4); }
@media (min-width: 900px) { .topnav { display: flex; } }
.topnav button, #navMoreBtn {
  /* 2026-10-18：#navMoreBtn 原样式完全依赖 .topnav button 后代选择器，
     10-18 resume/nav 重构把 .nav-more 移出 .topnav 后选择器脱靶，
     按钮退化成浏览器原生样式（灰边框白底方块，园园截图实测）。这里显式补上。 */
  border: none; background: none; cursor: pointer;
  padding: var(--s-8) var(--s-14); border-radius: 999px;
  font-size: 14px; color: var(--ink2); font-weight: 500;
  font-family: inherit;
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
  position: relative;
}
.topnav button:hover, #navMoreBtn:hover { background: var(--red-50); color: var(--red-500-text, #D81B37); }
.topnav button:active, #navMoreBtn:active { transform: scale(.94); }
.topnav button.on {
  background: var(--pink-grad); color: #fff; font-weight: 700;
  box-shadow: var(--shadow-red);
}

/* ---------- 5. 页面容器 ---------- */
.page {
  display: none;
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s-18) var(--s-16) var(--s-24);
}
.page.active { display: block; animation: pageIn .42s var(--ease-out-expo); }
@media (min-width: 900px) { .page { padding: var(--s-28) var(--s-32) var(--s-40); } }

/* ---------- 6. 通用组件 ---------- */
.card {
  background: var(--card);
  border: 1px solid rgba(242, 237, 238, .9);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--t-med) var(--ease-standard), transform var(--t-med) var(--ease-standard);
}
.card-pad { padding: var(--s-18); }

.sec-title {
  font-size: var(--fs-h2); font-weight: 800; letter-spacing: .2px;
  display: flex; align-items: center; gap: var(--s-8);
}
.sec-sub { font-size: var(--fs-sm); color: var(--ink3); margin-top: 6px; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--s-16); gap: var(--s-10); }

/* ---- 按钮系统 ---- */
.btn {
  border: none; cursor: pointer; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  padding: var(--s-8) var(--s-20);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-6);
  font-family: inherit;
  position: relative; overflow: hidden;
  transition: transform var(--t-fast) var(--ease-standard),
              box-shadow var(--t-med) var(--ease-standard),
              background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  will-change: transform;
}
.btn:active { transform: scale(.97); } /* Galaxy 统一按压反馈 0.97 */
.btn[disabled] { opacity: .48; pointer-events: none; }

.btn-primary {
  background: var(--pink-grad); color: #fff;
  box-shadow: var(--shadow-red);
}
/* Galaxy ripple：悬停时圆形光晕自中心扩散（cubic-bezier(0,0,.2,1)，绘制于文字下层） */
.btn-primary::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; border-radius: 9999px;
  background: rgba(255, 255, 255, .26);
  transform: translate(-50%, -50%);
  transition: width .5s var(--ease-galaxy), height .5s var(--ease-galaxy);
  pointer-events: none;
}
.btn-primary:hover::before { width: 240%; height: 520%; }
/* 高光扫过 */
.btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg);
  transition: left .55s var(--ease-out-expo);
}
.btn-primary:hover { box-shadow: var(--shadow-red-lg); transform: translateY(-1px); }
.btn-primary:hover::after { left: 130%; }
.btn-primary:active { transform: scale(.97); }

.btn-ghost {
  background: #fff; color: var(--ink2);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { border-color: var(--red-300); color: var(--red-500-text, #D81B37); background: var(--red-50); }

.btn-soft { background: var(--red-50); color: var(--red-500-text, #D81B37); }
.btn-soft:hover { background: var(--red-100); }

/* ---- 筛选 Chip ---- */
.chip {
  border: 1px solid transparent;
  cursor: pointer; font-family: inherit;
  background: #fff; color: var(--ink2);
  border-radius: 999px; padding: var(--s-8) var(--s-16);
  font-size: 13px; white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: all var(--t-fast) var(--ease-standard);
  flex-shrink: 0;
}
.chip:hover { color: var(--red-500-text, #D81B37); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.chip.on {
  background: var(--pink-grad); color: #fff; font-weight: 700;
  box-shadow: var(--shadow-red);
}
.chip:active { transform: scale(.94); }

.tag {
  font-size: var(--fs-xs); color: var(--red-500-text, #D81B37);
  background: var(--red-50);
  border-radius: 999px; padding: 2px var(--s-8);
  display: inline-block; font-weight: 500;
}

/* ---- 空状态 ----
   2026-10-17（site-fix P0-6）：全站空状态唯一规范是 ux-core.css 的 .ux-empty
   （图标 + 标题 + 一句「为什么会空」+ 1 主 1 次行动按钮）。
   这里的 .empty 是 20 处历史遗留壳，迁移期间先**增强成同一视觉语言**
   （虚线卡片 + 达标灰字 + 居中），不改语义、不动调用方；
   业务页逐个迁到 .ux-empty 的工作见交付报告「交给业务 js 专家的迁移清单」。 */
.empty {
  text-align: center; padding: var(--s-32) var(--s-20);
  color: var(--text-muted-soft, #6E6869); font-size: 13px; line-height: 1.7;
  background: var(--card, #fff); border: 1px dashed var(--border-default, #E8E2E4);
  border-radius: var(--radius-lg, 16px);
}
.empty-icon {
  width: 88px; height: 88px; margin: 0 auto var(--s-16);
  border-radius: 50%;
  background: var(--pink-grad-soft);
  border: 1px solid var(--red-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  animation: floatY 3.6s ease-in-out infinite;
}

/* ---------- 7. 移动端底部 TabBar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky, 100);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(31, 27, 29, .06);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 900px) { .tabbar { display: none; } }
.tabbar button {
  flex: 1; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--s-8) 0 var(--s-8);
  font-size: 12px; color: var(--ink3); font-family: inherit;
  transition: color var(--t-fast);
}
.tabbar button .ticon {
  font-size: 21px; line-height: 1;
  transition: transform var(--t-med) var(--ease-spring);
}
.tabbar button.on { color: var(--red-500-text, #D81B37); font-weight: 700; }
.tabbar button.on .ticon { animation: tabPop .38s var(--ease-spring); }

/* ---------- 8. 选题库 · Hero ---------- */
.hero-banner {
  background: var(--hero-grad);
  border-radius: var(--r-2xl);
  color: #fff;
  padding: var(--s-24) var(--s-20);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--s-18);
  box-shadow: var(--shadow-red-lg);
}
/* 装饰光斑层 */
.hero-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(340px 200px at 88% -30%, rgba(255, 255, 255, .22), transparent 65%),
    radial-gradient(280px 220px at 12% 118%, rgba(184, 13, 38, .35), transparent 68%);
  pointer-events: none;
}
.hero-banner::after {
  /* 2026-09-30：取消 floatY 循环浮动（页面常驻动效既分散注意力，
     浮动到上方时还会被右侧「一键安装插件」按钮压住，显得图标残缺） */
  content: '💡';
  position: absolute; right: -6px; bottom: -26px;
  font-size: 112px; opacity: .18; line-height: 1;
  pointer-events: none;
}
.hero-banner h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: .5px; position: relative; }
.hero-banner p { font-size: 13px; opacity: .92; margin-top: var(--s-8); position: relative; }
.hero-stats { display: flex; gap: var(--s-20); margin-top: var(--s-16); position: relative; }
.hero-stats div b { font-size: 19px; display: block; letter-spacing: .3px; }
.hero-stats div span { font-size: 12px; opacity: .85; }
@media (min-width: 900px) {
  .hero-banner { padding: var(--s-32) var(--s-40); }
  .hero-stats { gap: var(--s-48); margin-top: var(--s-20); }
  .hero-stats div b { font-size: 22px; }
}

/* ---------- 9. 搜索 / 表单 ---------- */
.search-box {
  display: flex; align-items: center; gap: var(--s-10);
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px;
  padding: var(--s-4) var(--s-8) var(--s-4) var(--s-18);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--s-14);
  transition: border-color var(--t-fast) var(--ease-out-expo),
              box-shadow var(--t-med) var(--ease-out-expo);
}
.search-box:hover { border-color: var(--red-300); }
.search-box:focus-within {
  border-color: var(--red-300);
  box-shadow: 0 0 0 4px rgba(255, 36, 66, .10), 0 4px 14px rgba(255, 36, 66, .08);
}
.search-box input {
  flex: 1; border: none; outline: none;
  font-size: 15px; font-family: inherit;
  height: 40px; background: transparent; color: var(--ink);
}
.search-box input::placeholder { color: var(--ink3); }
.search-box .sicon { color: var(--ink3); transition: color var(--t-fast) var(--ease-out-expo); }
.search-box:focus-within .sicon { color: var(--red-500-text, #D81B37); }

.cat-scroll {
  display: flex; gap: var(--s-8);
  overflow-x: auto; scrollbar-width: none;
  padding: 2px 2px var(--s-12);
  margin: 0 -2px;
  scroll-snap-type: x proximity;
}
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-scroll .chip { scroll-snap-align: start; }

.sort-bar { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-14); flex-wrap: wrap; }
.sort-label { font-size: 12px; color: var(--ink3); margin-right: var(--s-4); }
.sort-bar .sopt {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--ink2);
  padding: var(--s-4) var(--s-12); border-radius: 999px;
  transition: all var(--t-fast);
}
.sort-bar .sopt:hover { color: var(--red-500-text, #D81B37); }
.sort-bar .sopt.on { color: var(--red-500-text, #D81B37); font-weight: 700; background: var(--red-50); }

/* ---------- 10. 热搜词榜 ---------- */
.hot-board { margin-bottom: var(--s-18); }
.hot-list { display: flex; flex-direction: column; }
.hot-item {
  display: flex; align-items: center; gap: var(--s-10);
  padding: var(--s-12) var(--s-16);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t-fast), padding-left var(--t-fast);
}
.hot-item:last-child { border-bottom: none; }
.hot-item:hover { background: var(--red-50); padding-left: var(--s-20); }
.hot-item:active { background: var(--red-100); }
.hot-rank {
  width: 22px; height: 22px; border-radius: 8px;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  background: var(--line); color: var(--ink3);
  flex-shrink: 0;
}
.hot-rank.top { background: var(--pink-grad); color: #fff; box-shadow: var(--shadow-red); }
.hot-word { flex: 1; font-size: 14px; font-weight: 500; }
.hot-heat { font-size: 12px; color: var(--ink3); }
.hot-trend { font-size: 12px; }
.trend-up { color: var(--red-500-text, #D81B37); }
.trend-flat { color: var(--amber-text, #8A5A00); }
.trend-down { color: var(--green-text, #137A52); }

/* ---------- 11. 选题卡片 ---------- */
.topic-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-14); }
@media (min-width: 640px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .topic-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1500px) { .topic-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-16); } }

.topic-card {
  display: flex; flex-direction: column;
  position: relative;
  transition: transform var(--t-med) var(--ease-out-expo), box-shadow var(--t-med) var(--ease-standard);
}
/* 左侧渐变强调条（hover 展开） */
.topic-card::before {
  content: '';
  position: absolute; left: 0; top: 16px; bottom: 16px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--pink-grad);
  opacity: 0; transform: scaleY(.3);
  transition: opacity var(--t-med), transform var(--t-med) var(--ease-out-expo); pointer-events: none; }
.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.topic-card:hover::before { opacity: 1; transform: scaleY(1); }
.topic-card:active { transform: translateY(-1px) scale(.99); }

.topic-top { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-14) var(--s-16) 0; }
.topic-cat {
  font-size: 12px; color: var(--ink2);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 2px var(--s-8); font-weight: 500;
}
.topic-trend { margin-left: auto; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 2px; }
.topic-title {
  font-size: var(--fs-h3); font-weight: 700; line-height: 1.55;
  padding: var(--s-8) var(--s-16) 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.topic-kw { display: flex; flex-wrap: wrap; gap: var(--s-6); padding: var(--s-8) var(--s-16) 0; }
.topic-direction {
  font-size: 13px; color: var(--ink2); line-height: 1.65;
  padding: var(--s-8) var(--s-16) 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.topic-data {
  display: flex; align-items: center; gap: var(--s-14);
  padding: var(--s-12) var(--s-16);
  margin-top: auto;
  font-size: 12px; color: var(--ink3);
}
.topic-data b { color: var(--ink2); font-weight: 600; }
.heat-bar-wrap { display: flex; align-items: center; gap: var(--s-6); }
.heat-bar {
  width: 46px; height: 6px; border-radius: 4px;
  background: var(--line); overflow: hidden;
}
.heat-bar i {
  display: block; height: 100%; border-radius: 4px;
  background: var(--pink-grad);
  transition: width .8s var(--ease-out-expo);
}
.topic-actions { display: flex; gap: var(--s-8); padding: 0 var(--s-16) var(--s-16); }
.topic-actions .btn { flex: 1; padding: var(--s-8) 0; font-size: 12px; }

/* ---------- 12. 弹窗（移动底部抽屉 / 桌面居中弹簧） ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: var(--z-nav, 200);
  background: rgba(31, 27, 29, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med), visibility var(--t-med);
}
.modal-mask.show { opacity: 1; visibility: visible; }
.modal {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 201);
  background: #fff;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  max-height: 84vh; overflow-y: auto;
  transform: translateY(102%);
  opacity: 0; visibility: hidden;
  transition: transform .36s var(--ease-out-expo), opacity var(--t-med), visibility var(--t-med);
  padding-bottom: calc(var(--s-20) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
}
@media (min-width: 720px) {
  .modal {
    left: 50%; bottom: auto; top: 50%; right: auto;
    width: 580px; border-radius: var(--r-2xl);
    transform: translate(-50%, -46%) scale(.94);
    opacity: 0; visibility: hidden;
    transition: transform .34s var(--ease-spring), opacity var(--t-med), visibility var(--t-med);
  }
  .modal-mask.show + .modal { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
}
.modal-mask.show + .modal { transform: translateY(0); opacity: 1; visibility: visible; }
@media (min-width: 720px) { .modal-mask.show + .modal { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; } }
.modal-head {
  position: sticky; top: 0; z-index: 2;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-16) var(--s-20) var(--s-12);
  border-bottom: 1px solid var(--line);
}
.modal-head b { font-size: 16px; }
.modal-close {
  border: none; background: var(--bg); cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 14px; color: var(--ink2);
  transition: all var(--t-fast);
}
.modal-close:hover { background: var(--red-50); color: var(--red-500-text, #D81B37); transform: rotate(90deg); }
.modal-body { padding: var(--s-18) var(--s-20); }
.kv-block { margin-bottom: var(--s-18); }
.kv-label {
  font-size: 12px; color: var(--red-500-text, #D81B37); font-weight: 700;
  display: flex; align-items: center; gap: var(--s-8);
  margin-bottom: var(--s-8);
}
.kv-label::before { content: ''; width: 4px; height: 13px; border-radius: 3px; background: var(--pink-grad); }
.kv-content { font-size: 14px; color: var(--ink2); line-height: 1.75; }
.hook-quote {
  background: var(--pink-grad-soft);
  border: 1px solid var(--red-100);
  border-radius: var(--r-md); padding: var(--s-12) var(--s-16);
  font-size: 13px; color: var(--ink); line-height: 1.75;
}

/* ---------- 13. 收藏夹 ---------- */
.fav-note-input {
  width: 100%; border: 1.5px solid var(--line2); border-radius: var(--r-md);
  padding: var(--s-12) var(--s-12); font-size: 13px; font-family: inherit;
  resize: none; outline: none; color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.fav-note-input:focus {
  border-color: var(--red-400);
  box-shadow: 0 0 0 4px var(--ring-red);
}

/* ---------- 14. 发布日历 ---------- */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-14); }
.cal-header b { font-size: 17px; }
.cal-nav { display: flex; gap: var(--s-8); }
.cal-nav button {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line2); background: #fff; cursor: pointer;
  font-size: 14px; color: var(--ink2);
  transition: all var(--t-fast);
}
.cal-nav button:hover { border-color: var(--red-300); color: var(--red-500-text, #D81B37); background: var(--red-50); }
/* 2026-10-18（园园手验：切换进发布日历时「表格间距先放大再缩小」）：
 * 1fr 隐含 minmax(auto, 1fr)，格内 .cal-plan-mini 的长标题会把所在列顶宽，
 * 列宽就不再是 (容器宽 - 6×gap)/7 的定值 —— 日期格宽度会随内容变化而变。
 * minmax(0, 1fr) 让列宽完全由容器决定，内容再长也不会改变列宽。 */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-4); }
.cal-dow { text-align: center; font-size: 12px; color: var(--ink3); padding: var(--s-6) 0; font-weight: 600; }
.cal-cell {
  min-height: 58px; border-radius: var(--r-md);
  background: #fff;
  padding: var(--s-6) var(--s-8);
  cursor: pointer;
  /* 2026-10-18：原为 transition: all —— 每次 renderCalendar() 重建格子
   * （app.js 切页一次 + api.js /state 回来后一次 + asset-sync 同步后又一次），
   * width / min-height 都被纳入过渡，插入瞬间会从初始值「涨」到最终值，
   * 视觉上就是日历格子整体膨一下再收，即用户说的「间距先放大再缩小」。
   * 只保留 hover/active 真正需要的四个属性。 */
  transition: background var(--t-fast) var(--ease-standard),
              border-color var(--t-fast) var(--ease-standard),
              box-shadow var(--t-fast) var(--ease-standard),
              transform var(--t-fast) var(--ease-standard);
  border: 1px solid var(--line);
  position: relative;
}
@media (min-width: 900px) { .cal-cell { min-height: 80px; } }
.cal-cell:hover { border-color: var(--red-300); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.cal-cell.out { opacity: .32; }
.cal-cell:active { transform: scale(.97); }
.cal-cell.today { border-color: var(--red-500-text, #D81B37); box-shadow: 0 0 0 3px var(--ring-red); }
/* 2026-10-17 P1-H：日历格已由 ux-core.js 补 role=button + tabindex=0（原先 div 无法 Tab 聚焦），
 * 这里补可见焦点环；坊间默认 outline:none 的写法一律不采用 */
.cal-cell:focus-visible { outline: 3px solid var(--xhs-red-text, #D81B37); outline-offset: 2px; }
.cal-cell.has-plan { background: var(--red-50); border-color: var(--red-100); }
.cal-date { font-size: 12px; font-weight: 600; color: var(--ink2); }
.cal-cell.today .cal-date { color: var(--red-500-text, #D81B37); font-weight: 800; }
.cal-dot {
  position: absolute; right: 7px; top: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--xhs-red-solid, #E01230);
  box-shadow: 0 0 0 3px var(--ring-red-strong);
}
.cal-plan-mini {
  font-size: 12px; color: var(--red-500-text, #D81B37);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 3px; display: none;
}
@media (min-width: 640px) { .cal-plan-mini { display: block; } }

.time-slot {
  display: flex; align-items: center; gap: var(--s-10);
  padding: var(--s-12) var(--s-16);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.time-slot:hover { background: var(--bg); }
.time-slot:last-child { border-bottom: none; }
.time-slot .slot { font-size: 13px; font-weight: 700; width: 118px; flex-shrink: 0; }
.time-slot .meta { flex: 1; min-width: 0; }
.time-slot .meta b { font-size: 12px; display: block; }
.time-slot .meta span { font-size: 12px; color: var(--ink3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.level-stars { color: var(--red-500-text, #D81B37); font-size: 12px; letter-spacing: 1px; }

/* ---------- 15. 标题优化器 ---------- */
.title-input-wrap { position: relative; }
.title-input {
  width: 100%; border: 2px solid var(--line2); border-radius: var(--r-lg);
  padding: var(--s-16) var(--s-16); font-size: 15px; font-family: inherit;
  outline: none; resize: none; line-height: 1.65; color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  min-height: 88px;
  background: #fff;
}
.title-input:focus {
  border-color: var(--red-400);
  box-shadow: 0 0 0 4px var(--ring-red);
}
.title-count { position: absolute; right: 13px; bottom: 11px; font-size: 12px; color: var(--ink3); }

.score-ring-wrap { display: flex; align-items: center; gap: var(--s-20); }
.score-ring {
  width: 100px; height: 100px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
  background: var(--bg);
  box-shadow: inset 0 2px 6px rgba(31, 27, 29, .05);
}
.score-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.score-ring svg .ring-val { animation: ringDraw 1s var(--ease-out-expo); }
.score-ring .score-num { font-size: 29px; font-weight: 800; line-height: 1; }
.score-ring .score-label { font-size: 12px; color: var(--ink3); margin-top: 3px; }

.check-list { display: flex; flex-direction: column; gap: var(--s-8); margin-top: var(--s-4); }
.check-item { display: flex; align-items: flex-start; gap: var(--s-10); font-size: 13px; }
.check-item .ci {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; margin-top: 1px;
}
.check-item.pass .ci { background: var(--green); }
.check-item.fail .ci { background: var(--amber); }
.check-item p { color: var(--ink2); }
.check-item p b { color: var(--ink); }

.suggest-card {
  background: var(--pink-grad-soft);
  border: 1px solid var(--red-100);
  border-radius: var(--r-md);
  padding: var(--s-12) var(--s-16); margin-top: var(--s-8);
  font-size: 13px; line-height: 1.65;
  animation: fadeUp .35s var(--ease-out-expo);
}
.suggest-card .sc-title { font-weight: 700; color: var(--red-500-text, #D81B37); margin-bottom: 2px; display: flex; justify-content: space-between; align-items: center; gap: var(--s-8); }
/* AI 模型池生成的卡片：紫蓝渐变边，与规则模板卡片区分 */
.suggest-card.ai-card { background: linear-gradient(135deg, #F5F3FF 0%, #EFF6FF 100%); border-color: #C4B5FD; }
.suggest-card.ai-card .sc-title { color: #7C3AED; }
.suggest-card.ai-loading { background: #FBF9FA; border-style: dashed; animation: aiPulse 1.2s ease-in-out infinite; }
@keyframes aiPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.pl-ai-row { display: flex; gap: var(--s-10); padding: var(--s-8) 0; border-top: 1px dashed var(--red-100, #FFD9DF); font-size: 13px; line-height: 1.6; }
.pl-ai-row > span { color: #6E6869; flex-shrink: 0; }
.pl-ai-row > div { flex: 1; }
.copy-btn {
  border: none; background: #fff; color: var(--red-500-text, #D81B37); cursor: pointer;
  font-size: 12px; border-radius: 999px; padding: 3px var(--s-12); font-weight: 600;
  font-family: inherit;
  box-shadow: var(--shadow-xs);
  transition: all var(--t-fast);
}
.copy-btn:hover { background: var(--xhs-red-solid, #E01230); color: #fff; }

.formula-card { padding: var(--s-16) var(--s-16); border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
.formula-card:hover { background: var(--bg); }
.formula-card:last-child { border-bottom: none; }
.formula-name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: var(--s-8); }
.formula-tpl {
  font-size: 12px; color: var(--red-500-text, #D81B37);
  background: var(--red-50); border: 1px solid var(--red-100);
  border-radius: var(--r-sm); padding: var(--s-8) var(--s-12); margin-top: var(--s-8);
}
.formula-eg { font-size: 12px; color: var(--ink3); margin-top: var(--s-8); }
.formula-eg b { color: var(--ink2); font-weight: 600; }

/* ---------- 16. 数据复盘 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-14); }
@media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
  padding: var(--s-18);
  transition: transform var(--t-med) var(--ease-out-expo), box-shadow var(--t-med);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card .sl { font-size: 12px; color: var(--ink3); }
.stat-card .sv { font-size: 25px; font-weight: 800; margin-top: var(--s-4); letter-spacing: .3px; }
.stat-card .sd { font-size: 12px; margin-top: var(--s-4); font-weight: 600; }
.sd.up { color: var(--red-500-text, #D81B37); }
.sd.down { color: var(--green-text, #137A52); }

.chart-box { height: 240px; width: 100%; }
@media (min-width: 900px) { .chart-box { height: 280px; } }

.topnote-row {
  display: flex; align-items: center; gap: var(--s-12);
  padding: var(--s-14) var(--s-16);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.topnote-row:hover { background: var(--bg); }
.topnote-row:last-child { border-bottom: none; }
.topnote-rank {
  width: 27px; height: 27px; border-radius: 8px;
  background: var(--line); color: var(--ink3);
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.topnote-rank.top { background: var(--pink-grad); color: #fff; box-shadow: var(--shadow-red); }
.topnote-info { flex: 1; min-width: 0; }
.topnote-info b { font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topnote-info span { font-size: 12px; color: var(--ink3); }
.topnote-rate { font-size: 13px; font-weight: 800; color: var(--red-500-text, #D81B37); flex-shrink: 0; }
.verdict {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 12px; color: var(--ink2);
  padding: var(--s-8) var(--s-12); margin-top: var(--s-8);
}

/* ---------- 17. Toast ----------
   2026-10-17（site-fix P0-6）：全站 Toast 唯一实现收敛为 ux-core 的
   #ux-toast-host + .ux-toast（app.js 的全局 toast() 已委托给 UX.toast）。
   老的 #toast 只作为 ux-core 未就绪时的兜底保留，视觉参数对齐 .ux-toast
   （深色胶囊 / 13px / 10px 14px / 同款阴影），避免同一站出现两套观感。 */
.toast {
  position: fixed; left: 50%; bottom: 84px; z-index: var(--z-toast, 600);
  transform: translateX(-50%) translateY(8px) scale(.96);
  background: rgba(24, 24, 27, .94); color: #fff;
  font-size: 13px; line-height: 1.5; padding: 10px 14px; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms cubic-bezier(.2,.8,.3,1), transform 220ms cubic-bezier(.2,.8,.3,1);
  max-width: min(92vw, 460px); text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
@media (min-width: 900px) { .toast { bottom: 44px; } }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* ---------- 18. 骨架屏 ---------- */
.skeleton-line {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 25%, #FAF6F7 50%, var(--line) 75%);
  background-size: 840px 100%;
  animation: shimmer 1.4s linear infinite;
}

/* 小节间距 */
.mt16 { margin-top: var(--s-16); }
.mb12 { margin-bottom: var(--s-12); }
.mb16 { margin-bottom: var(--s-16); }

/* ============================================================
 * 模块 6 & 7：合规排查 & 口语化改写
 * ============================================================ */

.lv-pill {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-size: 12px; font-weight: 600;
  padding: 3px var(--s-12); border-radius: 99px;
}
.lv-pill-high { background: rgba(255, 36, 66, .13); color: var(--red-600); }
.lv-pill-mid  { background: var(--amber-bg); color: var(--amber-text, #8A5A00); }
.lv-pill-low  { background: rgba(102, 112, 126, .13); color: var(--gray-pill); }

.sens-highlight {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-16);
  font-size: 14px;
  line-height: 2.05;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.sens-word {
  padding: 1px var(--s-4);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid;
  transition: filter var(--t-fast), transform var(--t-fast);
  display: inline-block;
}
.sens-word:hover { filter: brightness(.92); transform: translateY(-1px); }
.sens-word.lv-high { background: rgba(255, 36, 66, .13); color: var(--red-600); border-color: var(--red-500-text, #D81B37); }
.sens-word.lv-mid  { background: var(--amber-bg); color: #8A5A00; border-color: var(--amber-text, #8A5A00); }
.sens-word.lv-low  { background: rgba(102, 112, 126, .13); color: #5A6572; border-color: var(--gray-pill); }

.sens-score-row { display: flex; align-items: center; gap: var(--s-20); }
.sens-score-row .score-ring { position: relative; }

.issue-row {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-14) var(--s-16);
  margin-bottom: var(--s-12);
  background: #fff;
  transition: box-shadow var(--t-med), border-color var(--t-fast), transform var(--t-fast);
}
.issue-row:hover { box-shadow: var(--shadow-sm); }
.issue-row.flash { border-color: var(--red-400); box-shadow: 0 0 0 4px var(--ring-red-strong); }
.issue-head { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.issue-word { font-size: 15px; font-weight: 700; color: var(--ink); }
.issue-reason { font-size: 13px; color: var(--ink2); margin-top: var(--s-8); line-height: 1.65; }
.issue-fix { display: flex; align-items: center; gap: var(--s-8); margin-top: var(--s-12); flex-wrap: wrap; }
.fix-label { font-size: 12px; color: var(--ink3); flex-shrink: 0; }
.fix-btn {
  border: 1.5px dashed var(--red-400);
  background: var(--red-50);
  color: var(--red-500-text, #D81B37);
  font-size: 12px; font-weight: 600;
  padding: var(--s-4) var(--s-12); border-radius: 99px;
  cursor: pointer; font-family: inherit;
  transition: all var(--t-fast);
}
.fix-btn:hover {
  background: var(--pink-grad); color: #fff;
  border-style: solid; border-color: transparent;
  box-shadow: var(--shadow-red);
}

.hz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-10);
  margin-top: var(--s-14);
}
.hz-opt {
  display: flex; align-items: flex-start; gap: var(--s-8);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-12) var(--s-14);
  cursor: pointer; background: #fff;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.hz-opt:hover { border-color: var(--red-300); transform: translateY(-1px); }
.hz-opt input { accent-color: var(--red-500-text, #D81B37); width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.hz-opt b { display: block; font-size: 13px; }
.hz-opt span { display: block; font-size: 12px; color: var(--ink3); margin-top: 2px; line-height: 1.5; }
.hz-opt:has(input:checked) {
  border-color: var(--red-500-text, #D81B37);
  background: var(--red-50);
  box-shadow: 0 0 0 3px var(--ring-red);
}

.hz-score-row { display: flex; align-items: center; gap: var(--s-20); margin-top: var(--s-16); flex-wrap: wrap; }
.hz-score-item { text-align: center; position: relative; }
.hz-score-item b { font-size: 31px; font-weight: 800; }
.hz-score-label { display: block; font-size: 12px; color: var(--ink3); margin-bottom: 2px; }
.hz-delta { position: absolute; top: 4px; right: -32px; font-size: 13px; font-weight: 700; }
.hz-arrow { font-size: 22px; color: var(--ink3); }

.diff-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-14); }
.diff-col {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.diff-col.new { border-color: rgba(30, 158, 106, .4); }
.diff-head {
  padding: var(--s-12) var(--s-16);
  font-size: 13px; font-weight: 700;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s-8);
  background: var(--bg);
}
.diff-col.new .diff-head { background: var(--green-bg); }
.diff-body {
  padding: var(--s-16);
  font-size: 14px;
  line-height: 2.05;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
}
.diff-del {
  background: rgba(255, 36, 66, .11);
  color: #D0112B;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 36, 66, .55);
  border-radius: 4px;
  padding: 0 2px;
}
.diff-ins {
  background: var(--green-bg);
  color: var(--green-text, #137A52);
  font-weight: 600;
  border-radius: 4px;
  padding: 0 2px;
}

@media (max-width: 720px) {
  .tabbar { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar button { flex: 0 0 auto; min-width: 62px; }
  .diff-wrap { grid-template-columns: 1fr; }
  .sens-score-row { gap: var(--s-14); }
}

/* ============================================================
 * 模块 8：内容创作流水线
 * ============================================================ */

.pl-steps {
  display: flex; list-style: none;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: var(--s-10) var(--s-6); margin-bottom: var(--s-18);
  overflow-x: auto; scrollbar-width: none;
  position: sticky; top: 62px; z-index: 50;
}
.pl-steps::-webkit-scrollbar { display: none; }
.pl-steps li {
  flex: 1; min-width: 86px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--s-8) var(--s-4); border-radius: var(--r-md);
  color: var(--ink3); font-size: 12px;
  cursor: default; position: relative;
  transition: all var(--t-fast);
}
.pl-steps li:not(:last-child)::after {
  content: ''; position: absolute; right: -3px; top: 50%;
  width: 6px; height: 2px; background: var(--line2);
}
.pl-steps li.reachable { cursor: pointer; }
.pl-steps li.reachable:hover { color: var(--red-500-text, #D81B37); }
.pl-steps li.active {
  background: var(--red-50); color: var(--red-500-text, #D81B37); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--red-100);
}
.pl-steps li.done { color: var(--green-text, #137A52); }
.pl-step-icon { font-size: 20px; transition: transform var(--t-med) var(--ease-spring); }
.pl-steps li.active .pl-step-icon { transform: scale(1.15); }
.pl-step-name { white-space: nowrap; }

.pl-step-panel { display: none; }
.pl-step-panel.active { display: block; animation: pageIn .4s var(--ease-out-expo); }

.pl-step-title {
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; gap: var(--s-10);
  margin-bottom: var(--s-16);
}
.pl-step-num {
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--pink-grad); color: #fff;
  font-size: 13px; display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-red);
}

.pl-drop-zone {
  border: 2px dashed var(--red-300);
  border-radius: var(--r-lg);
  padding: var(--s-40) var(--s-16);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-8);
  cursor: pointer;
  background: rgba(255, 36, 66, .025);
  transition: all var(--t-med) var(--ease-standard);
  text-align: center;
}
.pl-drop-zone:hover, .pl-drop-zone.drag {
  border-color: var(--red-500-text, #D81B37);
  background: var(--red-50);
  box-shadow: 0 0 0 5px var(--ring-red);
  transform: scale(1.005);
}
.pl-drop-zone b { font-size: 15px; }
.pl-drop-zone span { font-size: 12px; color: var(--ink3); }

.pl-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--s-12); margin-top: var(--s-16);
}
.pl-img-item {
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-med) var(--ease-out-expo), box-shadow var(--t-med);
  animation: popIn .4s var(--ease-out-expo) backwards;
}
.pl-img-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pl-img-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pl-img-style { font-size: 12px; font-weight: 700; color: var(--red-500-text, #D81B37); padding: var(--s-8) var(--s-8) 0; }
.pl-palette { display: flex; gap: var(--s-4); padding: var(--s-6) var(--s-8) var(--s-8); }
.pl-palette i { width: 17px; height: 17px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

.card-inset {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-16);
  margin-top: var(--s-14);
}
.pl-report-row {
  display: flex; align-items: center; gap: var(--s-12);
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.pl-report-row:last-child { border-bottom: none; }
.pl-report-row > span { width: 64px; color: var(--ink3); font-size: 12px; flex-shrink: 0; }
.pl-report-row > b { font-size: 14px; }
.pl-report-row > em { font-style: normal; font-size: 12px; color: var(--ink3); margin-left: auto; text-align: right; }
.pl-style-tag {
  background: var(--pink-grad); color: #fff;
  font-size: 12px; padding: 3px var(--s-12); border-radius: 99px;
  box-shadow: var(--shadow-red);
}
.pl-style-tag.sub { background: rgba(255, 36, 66, .1); color: var(--red-500-text, #D81B37); box-shadow: none; }

.pl-match-card {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-16) var(--s-16);
  margin-bottom: var(--s-12);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-standard);
  background: #fff;
}
.pl-match-card:hover { border-color: var(--red-300); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pl-match-card.selected {
  border-color: var(--red-500-text, #D81B37);
  background: var(--red-50);
  box-shadow: 0 0 0 4px rgba(255, 36, 66, .08), var(--shadow-sm);
}
.pl-match-head { display: flex; gap: var(--s-12); align-items: flex-start; }
.pl-medal { font-size: 22px; }
.pl-match-title { font-size: 15px; font-weight: 700; line-height: 1.55; }
.pl-match-score { text-align: center; flex-shrink: 0; }
.pl-match-score b { font-size: 22px; color: var(--red-500-text, #D81B37); font-weight: 800; display: block; }
.pl-match-score span { font-size: 12px; color: var(--ink3); }
.pl-reasons { margin-top: var(--s-10); display: flex; flex-direction: column; gap: var(--s-4); }
.pl-reason { font-size: 13px; color: var(--ink2); }
.pl-ref-hint { font-size: 12px; color: var(--ink3); margin-top: var(--s-10); text-align: right; }
.pl-match-card.selected .pl-ref-hint { color: var(--red-500-text, #D81B37); font-weight: 600; }

.pl-ref-info {
  background: var(--red-50);
  border: 1px solid var(--red-100);
  border-radius: var(--r-md);
  padding: var(--s-12) var(--s-16);
  font-size: 13px;
  line-height: 1.65;
}

.pl-title-opt {
  display: flex; align-items: center; gap: var(--s-10);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-12) var(--s-16);
  margin-bottom: var(--s-8);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--t-fast);
  background: #fff;
}
.pl-title-opt:hover { border-color: var(--red-300); }
.pl-title-opt.selected {
  border-color: var(--red-500-text, #D81B37);
  background: var(--red-50);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--ring-red);
}
.pl-radio {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--ink4); flex-shrink: 0;
  position: relative;
  transition: border-color var(--t-fast);
}
.pl-title-opt.selected .pl-radio { border-color: var(--red-500-text, #D81B37); }
.pl-title-opt.selected .pl-radio::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--xhs-red-solid, #E01230);
  animation: popIn .25s var(--ease-spring);
}

.pl-sens-row { display: flex; align-items: center; gap: var(--s-18); }
.pl-sens-score { text-align: center; flex-shrink: 0; }
.pl-sens-score b { font-size: 34px; font-weight: 800; display: block; }
.pl-sens-score span { font-size: 12px; color: var(--ink3); }

.note-preview {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #fff;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 12px 32px rgba(255, 36, 66, .1), var(--shadow-md);
}
.note-img-grid { display: grid; gap: 2px; background: var(--line); }
.note-img-grid.count-1 { grid-template-columns: 1fr; }
.note-img-grid.count-2, .note-img-grid.count-4 { grid-template-columns: 1fr 1fr; }
.note-img-grid.count-3, .note-img-grid.count-5, .note-img-grid.count-6,
.note-img-grid.count-7, .note-img-grid.count-8, .note-img-grid.count-9 { grid-template-columns: 1fr 1fr 1fr; }
.note-img-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.note-img-grid.count-1 img { aspect-ratio: 4/3; }
.note-body { padding: var(--s-16) var(--s-16); }
.note-title { font-size: 16px; font-weight: 800; line-height: 1.55; }
.note-text { font-size: 14px; line-height: 1.9; color: var(--ink); margin-top: var(--s-10); word-break: break-word; }
.note-meta {
  display: flex; gap: var(--s-16);
  border-top: 1px solid var(--line);
  margin-top: var(--s-14); padding-top: var(--s-12);
  font-size: 12px; color: var(--ink3);
}

@media (max-width: 720px) {
  .pl-step-title { font-size: 15px; }
  .pl-sens-row { flex-direction: column; align-items: flex-start; }
  .pl-steps { top: 56px; }
}

/* ============================================================
 * 模块 9：产品实拍参考
 * ============================================================ */
.shoot-ref-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-12);
  padding: 0 var(--s-16) var(--s-16);
}
@media (min-width: 900px) { .shoot-ref-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1500px) { .shoot-ref-grid { grid-template-columns: repeat(4, 1fr); } }
.shoot-ref-item {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-med) var(--ease-out-expo), box-shadow var(--t-med);
}
.shoot-ref-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.shoot-ref-item img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  background: var(--line);
}
.shoot-ref-item figcaption { padding: var(--s-8) var(--s-12) var(--s-12); }
.shoot-ref-item figcaption b { font-size: 12px; display: block; line-height: 1.5; }
.shoot-ref-item figcaption span { font-size: 12px; color: var(--ink3); display: block; margin-top: 2px; line-height: 1.5; }

/* ============================================================
 * 模块 10：数据监控面板
 * ============================================================ */
.mon-acct-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-10); flex-wrap: wrap;
  padding: var(--s-16) var(--s-16) var(--s-12);
  border-bottom: 1px solid var(--line);
}
.mon-acct-info { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; min-width: 0; }
.mon-acct-info > b { font-size: 15px; }
.mon-acct-link {
  font-size: 12px; color: var(--red-500-text, #D81B37); text-decoration: none;
  background: var(--red-50); border-radius: 99px; padding: 2px var(--s-10);
}
.mon-acct-link:hover { background: var(--red-100); }
.mon-acct-ops { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.mon-acct-ops .btn { padding: var(--s-8) var(--s-14); font-size: 12px; }

.mon-table-wrap { overflow-x: auto; }
.mon-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.mon-table th {
  font-size: 12px; color: var(--ink3); font-weight: 600;
  padding: var(--s-10) var(--s-12); text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.mon-table th:first-child { text-align: left; }
.mon-table td {
  padding: var(--s-12); font-size: 13px;
  border-bottom: 1px solid var(--line);
  text-align: right; white-space: nowrap;
}
.mon-table tr:last-child td { border-bottom: none; }
.mon-table tbody tr { transition: background var(--t-fast); }
.mon-table tbody tr:hover { background: var(--bg); }
.mon-note-title {
  text-align: left !important; white-space: normal !important;
  max-width: 300px; font-weight: 600; line-height: 1.5;
}
.mon-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.mon-num-bad { color: var(--red-600); font-weight: 800; position: relative; }
.mon-num-bad::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 6px;
  height: 2px; border-radius: 2px; background: var(--red-400);
}
.mon-rate { color: var(--ink2); font-size: 13px; }
.mon-time { color: var(--ink3); font-size: 12px; }
.mon-stale {
  display: inline-block; margin-left: var(--s-4);
  font-size: 12px; color: var(--amber-text, #8A5A00);
  background: var(--amber-bg); border-radius: 5px; padding: 1px var(--s-6);
}
.mon-row-alert { background: linear-gradient(90deg, rgba(255,36,66,.05), transparent 65%); }
.mon-row-alert td:first-child { box-shadow: inset 3px 0 0 var(--red-500); }
.mon-del {
  border: none; background: none; cursor: pointer;
  color: var(--ink4); font-size: 12px; border-radius: 50%;
  width: 24px; height: 24px;
  transition: all var(--t-fast);
}
.mon-del:hover { color: var(--red-500-text, #D81B37); background: var(--red-50); }

/* 规则设置 */
.mon-rules-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-10);
}
@media (min-width: 900px) { .mon-rules-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1500px) { .mon-rules-grid { grid-template-columns: repeat(4, 1fr); } }
.mon-rule-item { display: flex; flex-direction: column; gap: var(--s-8); }
.mon-th-input { resize: none; height: 42px; font-variant-numeric: tabular-nums; }
.mon-push-row { display: flex; gap: var(--s-10); flex-wrap: wrap; }
.mon-push-type { width: 190px; height: 42px; resize: none; }

/* 预警记录 */
.mon-alert-row {
  display: flex; align-items: center; gap: var(--s-12);
  padding: var(--s-12) var(--s-16);
  border-bottom: 1px solid var(--line);
  animation: fadeUp .35s var(--ease-out-expo);
}
.mon-alert-row:last-child { border-bottom: none; }
.mon-alert-row .lv-pill { flex-shrink: 0; }
.mon-alert-body { flex: 1; min-width: 0; }
.mon-alert-body b { font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-alert-body span { font-size: 12px; color: var(--ink3); display: block; margin-top: 1px; }

/* ============================================================
 * 首页数据看板
 * ============================================================ */
.dash-kpi-card { padding: var(--s-16) var(--s-16); }
.dash-kpi-card .sv { font-size: 23px; }
.dash-chart-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-12);
}
@media (min-width: 900px) { .dash-chart-grid { grid-template-columns: 1fr 1fr; } }
.dash-chart { height: 200px; margin-top: var(--s-8); }

/* ============================================================
 * 二级子类目
 * ============================================================ */
.sub-scroll { padding-top: 0; margin-top: -6px; }
.sub-chip {
  font-size: 12px; padding: var(--s-4) var(--s-12);
  background: var(--bg); border: 1px solid var(--line2);
  box-shadow: none; color: var(--ink2);
}
.sub-chip:hover { border-color: var(--red-300); color: var(--red-500-text, #D81B37); transform: none; }
.sub-chip.on { background: var(--xhs-red-solid, #E01230); border-color: var(--red-500-text, #D81B37); box-shadow: var(--shadow-red); }
.sub-chip .sub-n { opacity: .65; font-size: 12px; margin-left: 1px; }

/* 选题卡片子类目标签 */
.topic-sub {
  font-size: 12px; color: var(--red-500-text, #D81B37);
  background: var(--red-50);
  border-radius: 8px; padding: 2px var(--s-8); font-weight: 500;
}

/* ============================================================
 * 选题详情（plog 完整字段版）
 * ============================================================ */
@media (min-width: 720px) { .modal { width: 640px; } }

.td-hero {
  background: var(--pink-grad-soft);
  border: 1px solid var(--red-100);
  border-radius: var(--r-lg);
  padding: var(--s-16) var(--s-16);
  margin-bottom: var(--s-6);
}
.td-meta { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; margin-bottom: var(--s-10); }
.td-title { font-size: 18px; font-weight: 800; line-height: 1.6; letter-spacing: .2px; }
.td-data {
  display: flex; align-items: center; gap: var(--s-16); flex-wrap: wrap;
  margin-top: var(--s-12); font-size: 13px; color: var(--ink3);
}
.td-data b { color: var(--ink2); }

.td-sec {
  padding: var(--s-16) 2px 0;
}
.td-sec + .td-sec { border-top: none; }
.td-sec-title {
  font-size: 14px; font-weight: 800;
  display: flex; align-items: baseline; gap: var(--s-8);
  margin-bottom: var(--s-10);
  padding-left: var(--s-10);
  position: relative;
}
.td-sec-title::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 4px; border-radius: 3px; background: var(--pink-grad);
}
.td-sec-sub { font-size: 12px; color: var(--ink3); font-weight: 400; }

/* 好物清单 */
.td-goods { display: flex; flex-direction: column; gap: var(--s-8); }
.td-good-item {
  display: flex; align-items: flex-start; gap: var(--s-12);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-12) var(--s-12);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.td-good-item:hover { border-color: var(--red-200); transform: translateX(2px); }
.td-good-no {
  width: 22px; height: 22px; border-radius: 8px; flex-shrink: 0;
  background: var(--pink-grad); color: #fff;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-red);
  margin-top: 1px;
}
.td-good-item b { font-size: 14px; display: block; }
.td-good-item span { font-size: 12px; color: var(--ink2); display: block; margin-top: 2px; line-height: 1.55; }

/* 使用体验 */
.td-exp {
  background: var(--bg);
  border-left: 3px solid var(--red-300);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-12) var(--s-14);
  font-size: 13px; line-height: 1.75; color: var(--ink);
  margin-bottom: var(--s-8);
}

/* 标签云 */
.td-tags { display: flex; flex-wrap: wrap; gap: var(--s-8); cursor: pointer; }
.td-tags .tag { font-size: 12px; padding: var(--s-4) var(--s-12); transition: all var(--t-fast); }
.td-tags:hover .tag { background: var(--red-100); }

.td-actions {
  display: flex; gap: var(--s-10);
  margin-top: var(--s-20); padding-top: var(--s-16);
  border-top: 1px solid var(--line);
}

/* ============================================================
 * 排版优化：视觉层级与留白
 * ============================================================ */
/* 区块标题加品牌色引导条，层级更清晰 */
.sec-title { position: relative; padding-left: 2px; }

/* 热搜榜与排序区间距呼吸感 */
.hot-board { box-shadow: var(--shadow-xs); }

/* 卡片标题字号微调，长标题更易读 */
.topic-title { letter-spacing: .15px; }

/* 移动端详情区段左右留白收紧 */
@media (max-width: 720px) {
  .td-hero { padding: var(--s-14); }
  .td-title { font-size: 16px; }
  .td-data { gap: var(--s-12); }
}

/* ============================================================
 * Galaxy 动效与体验增强（参考 uiverse.io 组件规范）
 * ============================================================ */

/* ---- 1. 主输入区聚焦描边（2026-10-03 重构） ----
 * 旧方案：::after 外扩 2px 品牌渐变 + focus-within 浮现，边框画在包装层上。
 * 问题：absolute 装饰层在祖先带 transform（reveal 入场动画）等场景下
 *       以错误的基准渲染，会出现「大红色边框溢出卡片」的错位（用户实测）。
 * 新方案：直接用输入框自身 :focus 的 border-color + box-shadow 光圈
 *       （.title-input:focus 已有定义），紧贴输入框，不存在错位可能。 */

/* ---- 2. AI 加载三点阶梯弹跳（Galaxy loader：200ms 递增延迟 + 弹跳曲线） ---- */
@keyframes aiDotBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-6px); opacity: 1; }
}
.ai-dots { display: flex; gap: var(--s-6); align-items: center; }
.ai-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #7C3AED;
  animation: aiDotBounce 1.2s var(--ease-galaxy-bounce) infinite;
}
.ai-dots i:nth-child(2) { animation-delay: .2s; }
.ai-dots i:nth-child(3) { animation-delay: .4s; }
/* 品牌红版本（流水线正文生成用） */
.ai-dots.red i { background: var(--red-400); }

/* ---- 3. 选题卡片交错入场（Galaxy staggered entrance） ---- */
.topic-grid .topic-card { animation: fadeUp .42s var(--ease-out-expo) backwards; }
.topic-grid .topic-card:nth-child(2) { animation-delay: .04s; }
.topic-grid .topic-card:nth-child(3) { animation-delay: .08s; }
.topic-grid .topic-card:nth-child(4) { animation-delay: .12s; }
.topic-grid .topic-card:nth-child(5) { animation-delay: .16s; }
.topic-grid .topic-card:nth-child(6) { animation-delay: .2s; }
.topic-grid .topic-card:nth-child(n+7) { animation-delay: .24s; }

/* ---- 4. 图片删除角标（流水线 / 实拍截图共用） ---- */
.pl-img-item { position: relative; }
.pl-img-del {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%; border: none;
  background: rgba(31, 27, 29, .62); color: #fff; font-size: 12px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-spring);
}
.pl-img-item:hover .pl-img-del { opacity: 1; }
@media (hover: none) { .pl-img-del { opacity: 1; } } /* 触屏设备常显，无需悬停 */
.pl-img-del:hover { background: var(--xhs-red-solid, #E01230); transform: scale(1.12); }
.pl-img-del:active { transform: scale(.94); }

/* ---- 4b. 实拍截图批量管理（2026-09-19 新增） ---- */
.shoot-batch-bar {
  display: flex; align-items: center; gap: var(--s-10); flex-wrap: wrap;
  margin: var(--s-10) 0 2px; padding: var(--s-10) var(--s-14);
  background: var(--red-50, #FFF5F6); border-radius: 12px; font-size: 13px;
}
.shoot-batch-bar .spacer { flex: 1; }
.shoot-batch-btn {
  border: 1.5px solid var(--red-300, #FFB3C0); background: #fff; color: var(--red-500-text, #D81B37);
  border-radius: 999px; padding: var(--s-6) var(--s-14); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all var(--t-fast);
}
.shoot-batch-btn:hover { background: var(--red-50, #FFF5F6); }
.shoot-batch-btn.primary { background: var(--xhs-red-solid, #E01230); color: #fff; border-color: transparent; }
.shoot-batch-btn.primary:hover { opacity: .92; }
.shoot-batch-btn:disabled { opacity: .45; cursor: default; }
.pl-img-check {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  width: 24px; height: 24px; border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, .9); background: rgba(31, 27, 29, .45);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 13px; font-weight: 800;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: all var(--t-fast);
}
.pl-img-check.on { background: var(--xhs-red-solid, #E01230); border-color: var(--red-500-text, #D81B37); color: #fff; }
.pl-img-item.selecting { cursor: pointer; }
.pl-img-item.selected { outline: 2.5px solid var(--red-500, #FF2442); outline-offset: -2.5px; }

/* ---- 5. 图表容器骨架屏（echarts 未就绪时 shimmer 占位，注入画布后自动消失） ---- */
.chart-box:empty, .dash-chart:empty {
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--line) 25%, #FAF6F7 50%, var(--line) 75%);
  background-size: 840px 100%;
  animation: shimmer 1.4s linear infinite;
}

/* ---- 6. 移动端触控目标加宽（WCAG 建议 ≥ 40px 的关键操作） ---- */
@media (max-width: 720px) {
  .mon-del { width: 34px; height: 34px; font-size: 14px; }
  .modal-close { width: 34px; height: 34px; }
  .cal-nav button { width: 36px; height: 36px; }
  .sort-bar .sopt { padding: var(--s-8) var(--s-12); }
  .copy-btn { padding: var(--s-6) var(--s-14); font-size: 12px; }
  .fix-btn { padding: var(--s-8) var(--s-16); }
  .tabbar button { min-width: 56px; }
  .mon-acct-ops .btn { padding: var(--s-8) var(--s-16); }
  .pl-img-del { width: 28px; height: 28px; font-size: 12px; }
  .hz-opt { padding: var(--s-14); }
  /* 录入弹窗三列数字输入在窄屏保持可点：缩小列间距 */
  #modalBody div[style*="repeat(3,1fr)"] { gap: var(--s-8) !important; }
}

/* ---- 7. 动效降级：省电/减动效模式下关闭 ripple 与 stagger ---- */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before { display: none; }
  .topic-grid .topic-card { animation: none; }
  .ai-dots i { animation-duration: .01ms; animation-iteration-count: 1; opacity: .8; }
}

/* ============================================================
 * 19. AI 每日选题快照：热搜横条 / 统一过滤工具条 / 历史追溯
 * ============================================================ */

/* ---------- 热搜关键词横条（独立于过滤区，紧凑芯片式） ---------- */
.hot-strip {
  display: flex; align-items: center; gap: var(--s-14);
  padding: var(--s-12) var(--s-16); margin-bottom: var(--s-14);
}
.hot-strip-head { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; gap: var(--s-14); }
.hot-strip-txt { display: flex; flex-direction: column; gap: 2px; }
.hot-strip-title { font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.hot-strip-head .sec-sub { font-size: 12px; }
.hot-strip-scroll {
  display: flex; gap: var(--s-8); flex: 1;
  /* 2026-09-19 修复热搜词截断：改横向隐藏滚动为自动换行，全部热词可见 */
  flex-wrap: wrap; overflow: visible; padding: 2px;
}
.hot-strip-scroll::-webkit-scrollbar { display: none; }
.hot-chip {
  display: inline-flex; align-items: center; gap: var(--s-6); flex-shrink: 0;
  white-space: nowrap; border: 1px solid var(--line); background: #fff;
  border-radius: 999px; padding: var(--s-4) var(--s-12) var(--s-4) var(--s-4);
  font-size: 13px; color: var(--ink2); cursor: pointer; font-family: inherit;
  transition: all var(--t-fast);
}
.hot-chip:hover {
  border-color: var(--red-300); color: var(--red-500-text, #D81B37);
  transform: translateY(-1px); box-shadow: var(--shadow-xs);
}
.hot-chip:active { transform: scale(.97); }
.hc-rk {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--line); color: var(--ink3);
}
.hc-rk.top { background: var(--pink-grad); color: #fff; }
.hc-t { font-size: 12px; font-weight: 700; }
.hc-t.up { color: var(--red-500-text, #D81B37); }
.hc-t.down { color: #137A52; }
.hc-t.flat { color: var(--ink3); }
/* 热词真实来源徽标（微博/百度/头条/B站） */
.hc-src {
  font-size: 12px; font-weight: 700; line-height: 1.2;
  padding: 3px var(--s-4); border-radius: 5px;
  /* #E8637A 在 #FFF5F6 上只有 2.80 → 文字档 #D81B37（4.70） */
  background: var(--red-50); color: var(--red-500-text, #D81B37);
  opacity: .85; letter-spacing: .5px;
}

/* ---------- 统一过滤工具条：搜索/品类/子类/排序收拢为一张卡，紧贴选题列表 ---------- */
.filter-bar { padding: var(--s-14) var(--s-14) var(--s-6); margin-bottom: var(--s-16); }
.filter-bar .search-box { margin-bottom: var(--s-10); box-shadow: none; }
.filter-bar .cat-scroll { padding-bottom: var(--s-8); }
.filter-bar .sub-scroll { margin-top: -4px; }
.filter-bar .sort-bar {
  margin-bottom: var(--s-4); padding-top: var(--s-10);
  border-top: 1px dashed var(--line);
}

/* ---------- 数据来源徽章 + 历史日期切换 ---------- */
.snap-badge {
  font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: var(--s-4) var(--s-10); border-radius: 999px;
  background: var(--red-50); color: var(--red-500-text, #D81B37);
}
.snap-badge.history { background: #FFF7E6; color: #8A5A00; }
.snap-badge.loading { background: var(--line); color: var(--ink3); font-weight: 500; }
.snap-badge.offline { background: var(--line); color: var(--ink2); }
.date-nav { display: inline-flex; align-items: center; gap: 2px; }
.date-nav .dnav {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  min-width: 30px; height: 30px; padding: 0 var(--s-8);
  font-size: 13px; color: var(--ink2); cursor: pointer; font-family: inherit;
  transition: all var(--t-fast);
}
.date-nav .dnav:hover { border-color: var(--red-300); color: var(--red-500-text, #D81B37); }
.date-nav .dnav:active { transform: scale(.95); }
.date-nav .date-pick { font-size: 12px; font-weight: 700; }
.date-panel {
  position: fixed; z-index: var(--z-cursor, 900); width: 224px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: var(--s-8);
  max-height: 320px; overflow-y: auto;
  animation: fadeUp .18s var(--ease-galaxy, ease);
}
.dp-head { font-size: 12px; color: var(--ink3); padding: var(--s-6) var(--s-10) var(--s-8); }
.dp-item {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  border: none; background: none; padding: var(--s-8) var(--s-10); border-radius: 8px;
  cursor: pointer; font-family: inherit; font-size: 13px; color: var(--ink);
  transition: background var(--t-fast);
}
.dp-item:hover { background: var(--red-50); }
.dp-item.on { background: var(--red-50); color: var(--red-500-text, #D81B37); font-weight: 700; }
.dp-item span { font-size: 12px; color: var(--ink3); }

@media (max-width: 720px) {
  .hot-strip { flex-direction: column; align-items: stretch; gap: var(--s-8); padding: var(--s-12); }
  .hot-strip-head { flex-direction: row; justify-content: space-between; align-items: center; min-width: 0; }
  .filter-bar { padding: var(--s-10) var(--s-10) 2px; }
  .date-nav .dnav { min-width: 34px; height: 34px; }
  .snap-badge { font-size: 12px; padding: 3px var(--s-8); }
}

/* ============================================================
 * 20. 排版统一层（2026-09-05）
 * 目标：间距阶梯归一 / 视觉层级收敛 / 组件留白一致
 * 说明：同优先级后置覆盖，不改写原始规则，便于追溯与回滚；
 *       数值统一为 4px 基准阶梯（10/12/14/16）。
 * ============================================================ */

/* ---- A. 区块节奏：页内相邻区块统一 16px 垂直间距（原 14/18 混用） ---- */
.hero-banner,
.hot-board,
.hot-strip { margin-bottom: var(--s-16); }

/* ---- B. 网格间距归一：卡片网格统一 14px（选题流 1500px+ 16px 维持不变） ---- */
.dash-chart-grid { gap: var(--s-14); }
.shoot-ref-grid { gap: var(--s-14); }
.mon-rules-grid { gap: var(--s-12); } /* 表单密度刻意收紧一档 */

/* ---- C. 列表行留白归一：数据行 13px 16px，卡头/表头 14px 16px ---- */
.hot-item,
.time-slot,
.topnote-row,
.mon-alert-row { padding: var(--s-12) var(--s-16); }
.formula-card,
.pl-match-card { padding: var(--s-14) var(--s-16); }
.mon-acct-head { padding: var(--s-14) var(--s-16) var(--s-12); }
.diff-head { padding: var(--s-12) var(--s-16); }

/* ---- D. 卡片内边距归一：16px 基准（替代 15/17px 碎片值） ---- */
.diff-body,
.sens-highlight,
.td-hero { padding: var(--s-16); }
.filter-bar { padding: var(--s-14) var(--s-14) var(--s-10); } /* 底部 6→10px，sort-bar 不再贴边 */
.issue-row { padding: var(--s-14) var(--s-16); margin-bottom: var(--s-10); }
.pl-title-opt { padding: var(--s-12) var(--s-14); }
.hook-quote { padding: var(--s-12) var(--s-14); }
.verdict { padding: var(--s-10) var(--s-14); }
.card-inset { padding: var(--s-4) var(--s-16); }
.dash-chart { margin-top: var(--s-10); }
.pl-step-title { margin-bottom: var(--s-16); }

/* ---- E. 视觉层级收敛：页面标题 18 / 卡内标题 16 / 条目标题 15~14.5 / 正文 13.5-14 / 辅助 12 ---- */
.cal-header b { font-size: 16px; }   /* 17→16，与 modal-head / pl-step-title 对齐 */
.formula-name { font-size: 15px; } /* 14→14.5，与 pl-match-title 对齐 */

/* ---- F. 小按钮规格化（与 .mon-acct-ops .btn 尺寸对齐，替代内联样式） ---- */
.btn-sm { padding: var(--s-8) var(--s-14); font-size: 12px; }

/* ---- G. 移动端修正（本层覆盖值在窄屏需重新收紧的项，必须置于最后） ---- */
@media (max-width: 720px) {
  .td-hero { padding: var(--s-14); }
  .filter-bar { padding: var(--s-10) var(--s-10) var(--s-6); }
}

/* ============================================================
 * 21. AI 合规检测 & AI 口语化改写（2026-09-05，?v=20260905g）
 * ============================================================ */
/* AI 判定徽标：与词表命中区分展示，审核人员保留最终裁量 */
.tag-ai {
  background: rgba(103, 77, 219, .10);
  color: #674DDB;
}
/* 口语化风格选择条 */
.hz-style-row {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-top: var(--s-12);
  flex-wrap: wrap;
}
.hz-style-label {
  font-size: 12px;
  color: #6E6869;
  flex-shrink: 0;
}
.hz-style-chip {
  border: 1px solid #EBEBEB;
  background: #FBF9FA;
  color: #666;
  font-size: 13px;
  padding: var(--s-6) var(--s-14);
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
}
.hz-style-chip:hover { border-color: var(--xhs-red-text, #D81B37); color: var(--xhs-red-text, #D81B37); }
.hz-style-chip.on {
  background: rgba(255, 36, 66, .08);
  border-color: var(--xhs-red-text, #D81B37);
  color: var(--xhs-red-text, #D81B37);
  font-weight: 600;
}
@media (max-width: 720px) {
  .hz-style-chip { padding: var(--s-4) var(--s-12); font-size: 12px; }
}


/* ============================================================
 * 选题详情 AI 化 + 好物分享 plog 专区（2026-09-20）
 * ============================================================ */
.td-loading { padding: var(--s-24) var(--s-10); text-align: center; color: #6E6869; font-size: 13px;
  animation: tdPulse 1.6s ease-in-out infinite; }
@keyframes tdPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.td-src { margin-top: var(--s-10); font-size: 12px; color: #6E6869; }

/* 概览条 */
.plog-ov-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-14); flex-wrap: wrap; }
.plog-ov-status { flex: 1; min-width: 240px; font-size: 13px; color: #5B5457; line-height: 1.8; }
.plog-ov-cats { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-12); }
.plog-cat-chip { display: inline-flex; align-items: center; gap: var(--s-4); padding: 3px var(--s-10); border-radius: 999px;
  background: #fff1f2; color: #D81B37; font-size: 12px; font-weight: 600; }
.plog-cat-chip b { font-weight: 700; }

/* 数据来源（多源登记，2026-10-11） */
.plog-src-list { display: flex; flex-direction: column; gap: var(--s-10); margin-top: var(--s-12); }
.plog-src-row { border: 1px solid #EFEAEC; border-radius: 12px; padding: var(--s-10) var(--s-12); background: #FCFAFB; }
.plog-src-head { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.plog-src-head b { font-size: 13.5px; color: #2B2B2B; }
.plog-src-kind { font-size: 12px; color: #6E6869; background: #F2EEF0; border-radius: 999px; padding: 2px 8px; }
.plog-src-badge { font-size: 12px; border-radius: 999px; padding: 2px 8px; background: #F2EEF0; color: #6B6468; font-weight: 600; }
.plog-src-badge-ok { background: #E7F6EF; color: #12794F; }
.plog-src-badge-warn { background: #FFF4E5; color: #9A5A00; }
.plog-src-meta { font-size: 12px; color: #6B6468; margin-top: 4px; line-height: 1.6; word-break: break-all; }
.plog-src-meta code { background: #F5F1F3; padding: 1px 5px; border-radius: 4px; font-size: 12px; color: #4A4448; }

/* 通用 */
.plog-loading { padding: var(--s-28) var(--s-10); text-align: center; color: #6E6869; font-size: 13px;
  animation: tdPulse 1.6s ease-in-out infinite; }
.plog-empty { padding: var(--s-24) var(--s-14); text-align: center; color: #6E6869; font-size: 13px; line-height: 1.8; }
.plog-meta-line { font-size: 12px; color: #6E6869; margin-bottom: var(--s-12); display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }
.plog-input { flex: 1; min-width: 200px; padding: var(--s-10) var(--s-14); border: 1.5px solid #f3d0d7; border-radius: 12px;
  font-size: 13px; outline: none; transition: border-color .25s cubic-bezier(.4,0,.2,1), box-shadow .25s; background: #fff; }
.plog-input:focus { border-color: #f43f5e; box-shadow: 0 0 0 3px var(--ring-red); }
.plog-textarea { width: 100%; padding: var(--s-10) var(--s-14); border: 1.5px solid #f3d0d7; border-radius: 12px; font-size: 13px;
  outline: none; resize: vertical; font-family: inherit; box-sizing: border-box; }
.plog-textarea:focus { border-color: #f43f5e; box-shadow: 0 0 0 3px var(--ring-red); }

/* 预测 */
.plog-signals { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-bottom: var(--s-14); }
.plog-signal { padding: var(--s-4) var(--s-12); border-radius: 999px; background: #eff6ff; color: #2563eb;
  font-size: 12px; font-weight: 600; cursor: default; transition: transform .2s cubic-bezier(.4,0,.2,1); }
.plog-signal:hover { transform: translateY(-1px); }
.plog-pred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s-12); }
.plog-pred-card { background: #fff; border: 1px solid #fbe4e9; border-radius: 14px; padding: var(--s-14);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s; }
.plog-pred-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.plog-pred-head { display: flex; align-items: center; gap: var(--s-8); margin-bottom: var(--s-8); }
.plog-pred-no { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 6px; background: linear-gradient(135deg, #f43f5e, #fb923c); color: #fff; font-size: 12px; font-weight: 700; }
.plog-conf { margin-left: auto; font-size: 12px; font-weight: 700; color: #137A52; }
.plog-pred-title { font-size: 14px; font-weight: 700; color: #1F1B1D; line-height: 1.5; margin-bottom: var(--s-6); }
.plog-pred-angle { font-size: 12px; color: #5B5457; line-height: 1.7; margin-bottom: var(--s-8); }
.plog-pred-reason { font-size: 12px; color: #2A5FD9; background: #f5f3ff; border-radius: 8px; padding: var(--s-6) var(--s-10); line-height: 1.6; }

/* 链接分析 */
.plog-link-bar { display: flex; gap: var(--s-10); align-items: center; flex-wrap: wrap; }
.plog-manual { margin-top: var(--s-12); padding: var(--s-14); background: #fffbeb; border: 1px dashed #fbbf24; border-radius: 12px;
  display: flex; flex-direction: column; gap: var(--s-10); }
.plog-manual-tip { font-size: 12px; color: #b45309; }
#plogAnalyzeResult { margin-top: var(--s-16); background: #fff; border: 1px solid #fbe4e9; border-radius: 16px; padding: var(--s-18); }
.plog-an-note { border-bottom: 1px dashed #fbe4e9; padding-bottom: var(--s-12); margin-bottom: var(--s-14); }
.plog-an-title { font-size: 15px; font-weight: 700; color: #1F1B1D; margin-bottom: var(--s-6); }
.plog-an-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-18); }
.plog-an-scores { display: flex; flex-direction: column; gap: var(--s-10); }
.plog-score-row { display: flex; align-items: center; gap: var(--s-10); font-size: 12px; }
.plog-score-label { width: 62px; color: #5B5457; flex-shrink: 0; }
.plog-score-bar { flex: 1; height: 8px; border-radius: 999px; background: #F5F3F4; overflow: hidden; }
.plog-score-bar i { display: block; height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.4,0,.2,1); }
.plog-score-bar i.good { background: linear-gradient(90deg, #f43f5e, #fb923c); }
.plog-score-bar i.mid { background: linear-gradient(90deg, #fbbf24, #fcd34d); }
.plog-score-bar i.low { background: #D8D1D3; }
.plog-score-row b { width: 26px; text-align: right; color: #1F1B1D; }
.plog-an-verdict p { font-size: 13px; color: #3f3f46; line-height: 1.8; margin: var(--s-4) 0 var(--s-10); }
.plog-an-sec-t { font-size: 13px; font-weight: 700; color: #1F1B1D; margin-bottom: var(--s-6); }
.plog-an-rewrite { background: #fff1f2; border-radius: 8px; padding: var(--s-8) var(--s-12); color: #D81B37 !important; font-weight: 600; }
.plog-an-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-14); margin-top: var(--s-16); }
.plog-li { font-size: 12px; line-height: 1.7; padding: var(--s-4) var(--s-8); border-radius: 8px; margin-bottom: var(--s-4); }
.plog-li.good { color: #15803d; background: #f0fdf4; }
.plog-li.bad { color: #b91c1c; background: #fef2f2; }
.plog-li.tip { color: #1d4ed8; background: #eff6ff; }

/* 公式周报 */
.plog-formula-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s-12); margin-bottom: var(--s-16); }
.plog-formula-card { background: linear-gradient(160deg, #fff, #fff7f8); border: 1px solid #fbe4e9;
  border-radius: 14px; padding: var(--s-14); transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s; }
.plog-formula-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.plog-formula-name { display: flex; align-items: center; gap: var(--s-8); font-size: 14px; font-weight: 700; color: #1F1B1D; margin-bottom: var(--s-8); }
.plog-formula-tpl { font-size: 13px; color: #D81B37; font-weight: 600; background: #fff1f2; border-radius: 8px;
  padding: var(--s-6) var(--s-10); margin-bottom: var(--s-8); line-height: 1.6; }
.plog-formula-eg { font-size: 12px; color: #5B5457; margin-bottom: var(--s-6); line-height: 1.6; }
.plog-formula-desc { font-size: 12px; color: #6E6869; line-height: 1.6; }
.plog-support { margin-left: var(--s-6); color: #2A5FD9; }
.plog-report-dims { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); }
.plog-dim { background: #FBF9FA; border-radius: 12px; padding: var(--s-14); }
.plog-dim p { font-size: 13px; color: #3f3f46; line-height: 1.9; margin: 0; }
.plog-topnotes { display: flex; flex-direction: column; gap: var(--s-8); margin-top: var(--s-8); }
.plog-topnote { display: flex; flex-direction: column; gap: 2px; background: #fffbeb; border-radius: 10px; padding: var(--s-10) var(--s-14); }
.plog-topnote b { font-size: 13px; color: #1F1B1D; }
.plog-topnote span { font-size: 12px; color: #b45309; }
.plog-dodont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-14); margin-top: var(--s-16); }

/* 采集库 */
.plog-filter-bar { display: flex; flex-direction: column; gap: var(--s-10); margin-bottom: var(--s-14); }
.plog-filter-right { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.plog-search { max-width: 220px; }
.plog-note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-12); }
.plog-note-card { background: #fff; border: 1px solid #fbe4e9; border-radius: 14px; padding: var(--s-14);
  display: flex; flex-direction: column; gap: var(--s-8); transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s; }
.plog-note-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.plog-note-head { display: flex; align-items: center; justify-content: space-between; }
.plog-note-date { font-size: 12px; color: #6E6869; }
.plog-note-title { font-size: 14px; font-weight: 700; line-height: 1.55; }
.plog-note-title a { color: #1F1B1D; text-decoration: none; }
.plog-note-title a:hover { color: #D81B37; }
.plog-note-snip { font-size: 12px; color: #5B5457; line-height: 1.7; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plog-note-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.plog-inter { font-size: 12px; color: #5B5457; font-weight: 600; }
.plog-inter.pending { color: #6E6869; font-weight: 400; }
.plog-pager { display: flex; justify-content: center; gap: var(--s-10); margin-top: var(--s-16); }
.plog-page-info { font-size: 12px; color: #6E6869; font-weight: 400; }

/* 移动端适配 */
@media (max-width: 768px) {
  .plog-an-grid, .plog-an-cols, .plog-report-dims, .plog-dodont { grid-template-columns: 1fr; }
  .plog-pred-grid, .plog-formula-grid, .plog-note-grid { grid-template-columns: 1fr; }
  .plog-search { max-width: none; flex: 1; }
  .plog-ov-bar { flex-direction: column; align-items: stretch; }
}

/* plog 筛选 chip 行 */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }


/* ============ 爆款实验室（2026-09-20） ============ */
.lab-pc-form, .lab-mc-form, .lab-sp-form { display: flex; flex-direction: column; gap: var(--s-10); }
.lab-pc-form .btn, .lab-mc-form .btn, .lab-sp-form .btn { align-self: flex-start; }
.plog-pc-cols { margin-top: var(--s-14); }
.lab-hook { background: #fff1f2; border-radius: 10px; padding: var(--s-10) var(--s-14); margin: var(--s-6) 0; font-size: 13px;
  color: #9f1239; line-height: 1.7; cursor: pointer; transition: transform .2s cubic-bezier(.4,0,.2,1); }
.lab-hook:hover { transform: translateX(3px); }
.lab-bo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-12); }
.lab-bo-card { background: #fff; border: 1px solid #dbeafe; border-radius: 14px; padding: var(--s-14);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s; }
.lab-bo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-info); }
.lab-bo-head { display: flex; align-items: center; gap: var(--s-8); margin-bottom: var(--s-8); }
.lab-bo-word { font-size: 14px; font-weight: 700; color: #1e40af; flex: 1; }
.lab-bo-score { font-size: 12px; font-weight: 700; color: #2563eb; background: #eff6ff;
  border-radius: 999px; padding: 3px var(--s-10); }
.lab-bo-meta { font-size: 12px; color: #2A5FD9; margin-bottom: var(--s-8); }
.lab-bo-opp { font-size: 13px; color: #3f3f46; line-height: 1.7; margin-bottom: var(--s-6); }
.lab-bo-angle { font-size: 12px; color: #2563eb; background: #f0f7ff; border-radius: 8px; padding: var(--s-6) var(--s-10); line-height: 1.6; }
.lab-mc-summary { background: #f5f3ff; color: #6d28d9; border-radius: 10px; padding: var(--s-10) var(--s-14);
  font-size: 13px; line-height: 1.7; margin-bottom: var(--s-14); }
.lab-mc-cols { grid-template-columns: 1fr 1.2fr; }
.lab-mc-q { background: #f0fdf4; border-radius: 10px; padding: var(--s-10) var(--s-12); margin-bottom: var(--s-8);
  display: flex; flex-direction: column; gap: 3px; }
.lab-mc-q b { font-size: 13px; color: #15803d; }
.lab-mc-q span { font-size: 12px; color: #137A52; color: #137A52; }
.lab-mc-topic { background: #fff; border: 1px solid #f3d0d7; border-radius: 10px; padding: var(--s-10) var(--s-12);
  margin-bottom: var(--s-8); display: flex; flex-direction: column; gap: 3px; }
.lab-mc-topic b { font-size: 13px; color: #1F1B1D; }
.lab-mc-topic span { font-size: 12px; color: #5B5457; line-height: 1.6; }
.lab-mc-topic em { font-size: 12px; color: #D81B37; font-style: normal; }
.lab-sp-card { background: linear-gradient(160deg, #fff, #fdf4ff); border: 1px solid #f5d0fe;
  border-radius: 14px; padding: var(--s-16); margin-top: var(--s-12); }
.lab-sp-rows { display: flex; flex-direction: column; gap: var(--s-6); margin: var(--s-10) 0; }
.lab-sp-row { display: flex; gap: var(--s-10); font-size: 13px; line-height: 1.7; }
.lab-sp-row b { color: #a21caf; flex-shrink: 0; width: 64px; }
.lab-sp-row span { color: #3f3f46; }
.lab-sp-words { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); margin: var(--s-6) 0;
  font-size: 12px; color: #5B5457; }
.lab-sp-words i { background: #f0fdf4; color: #15803d; border-radius: 999px; padding: 3px var(--s-10); font-style: normal; }
.lab-sp-words.avoid i { background: #fef2f2; color: #b91c1c; }
.lab-sp-actions { display: flex; align-items: center; gap: var(--s-12); margin-top: var(--s-12); flex-wrap: wrap; }

@media (max-width: 768px) {
  .lab-bo-grid { grid-template-columns: 1fr; }
  .lab-mc-cols { grid-template-columns: 1fr; }
}

/* ============ 爆款实验室二期：算法靶点（2026-09-20） ============ */
.lab-ces { margin-top: var(--s-16); background: #f0f7ff; border: 1px solid #dbeafe; border-radius: 12px; padding: var(--s-14); }
.lab-ces-nums { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; font-size: 13px; color: #3f3f46; margin: var(--s-8) 0; }
.lab-ces-nums b { color: #1d4ed8; font-size: 15px; }
.lab-ces-weak { font-size: 13px; color: #1e40af; background: #fff; border-radius: 8px; padding: var(--s-8) var(--s-12); }
.lab-seo-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10); }
.lab-seo-form .btn { grid-column: 1 / -1; justify-self: start; }
.lab-seo-words { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.lab-seo-words i { background: #eff6ff; color: #1d4ed8; border-radius: 999px; padding: var(--s-4) var(--s-14);
  font-style: normal; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .2s cubic-bezier(.4,0,.2,1); }
.lab-seo-words i:hover { transform: translateY(-1px); background: #dbeafe; }
.lab-cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-14); }
.lab-rv-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10); }
@media (max-width: 768px) {
  .lab-seo-form, .lab-rv-row { grid-template-columns: 1fr; }
  .lab-cta-grid { grid-template-columns: 1fr; }
}

/* ============ 爆款实验室 · 统一输入框体系（2026-09-20） ============
   仅作用于 #page-lab：统一尺寸/圆角/边框/背景/占位符/字号 + 四种状态反馈，
   配合表单容器布局规则；纯样式，不改任何功能逻辑与交互行为。 */
#page-lab .plog-input,
#page-lab .plog-textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--s-10) var(--s-14);
  border: 1.5px solid #eadde2;
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  color: #3f3f46;
  outline: none;
  transition: border-color .25s cubic-bezier(.4,0,.2,1),
              box-shadow .25s cubic-bezier(.4,0,.2,1),
              background-color .25s cubic-bezier(.4,0,.2,1);
}
#page-lab .plog-input { height: 42px; line-height: 20px; }
#page-lab .plog-textarea { resize: vertical; min-height: 72px; }

/* 占位符统一 */
#page-lab .plog-input::placeholder,
#page-lab .plog-textarea::placeholder { color: #6E6869; font-size: 13px; }

/* 悬停（未聚焦且未禁用）：边框加深一档，提示可交互 */
#page-lab .plog-input:hover:not(:focus):not(:disabled),
#page-lab .plog-textarea:hover:not(:focus):not(:disabled) { border-color: #e3a8b8; }

/* 聚焦：品牌红描边 + 柔和外发光（Galaxy 风格缓动） */
#page-lab .plog-input:focus,
#page-lab .plog-textarea:focus {
  border-color: #f43f5e;
  box-shadow: 0 0 0 3px var(--ring-red);
  background: #fff;
}

/* 禁用：灰底灰字，明确不可交互 */
#page-lab .plog-input:disabled,
#page-lab .plog-textarea:disabled {
  background: #f6f6f8;
  border-color: #ececf0;
  color: #6E6869;
  cursor: not-allowed;
}
#page-lab .plog-input:disabled::placeholder,
#page-lab .plog-textarea:disabled::placeholder { color: #6E6869; }

/* 错误（.has-error 或 aria-invalid，供校验逻辑按需挂载）：红色警示描边 */
#page-lab .plog-input.has-error,
#page-lab .plog-textarea.has-error,
#page-lab .plog-input[aria-invalid="true"],
#page-lab .plog-textarea[aria-invalid="true"] {
  border-color: #e02424;
  box-shadow: 0 0 0 3px var(--ring-red);
}

/* ---- 表单容器布局：纵向流式 + 统一间距，按钮不再挤在输入行里 ---- */
#page-lab .lab-pc-form,
#page-lab .lab-mc-form,
#page-lab .lab-sp-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  margin-top: var(--s-12);
}
/* SEO 组词器：双列网格，按钮独占一行左对齐 */
#page-lab .lab-seo-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-12);
  margin-top: var(--s-12);
}
#page-lab .lab-seo-form .btn { grid-column: 1 / -1; justify-self: start; }
/* 旧笔记激活的数据行：两输入并排 */
#page-lab .lab-rv-row { display: flex; gap: var(--s-12); }
#page-lab .lab-rv-row .plog-input { flex: 1; }
/* 表单内按钮：左对齐、不拉伸，与输入区间距一致 */
#page-lab .lab-pc-form .btn,
#page-lab .lab-mc-form .btn,
#page-lab .lab-sp-form .btn { align-self: flex-start; }

/* 移动端：全部单列堆叠 */
@media (max-width: 640px) {
  #page-lab .lab-seo-form { grid-template-columns: 1fr; }
  #page-lab .lab-rv-row { flex-direction: column; gap: var(--s-12); }
}

/* ===== 账号分级权限（v2 · 20260920g）===== */
#topnav button.plan-locked, #tabbar button.plan-locked {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.6);
}
#topnav button.plan-locked:hover, #tabbar button.plan-locked:hover {
  opacity: .7;
  transform: none;
}

/* ===== 浏览器插件一键安装入口（20260921a）===== */
/* 2026-09-30：原来绝对定位在 hero 右侧垂直居中，会压住右下角的灯泡装饰图形。
   改为跟随常规流排在数据行的下方行内，彻底消除遮挡，同时移动端无需再特判。 */
.hero-ext { position: static; display: block; margin-top: var(--s-14); z-index: 3; }
.ext-cta {
  display: flex; align-items: center; gap: var(--s-10);
  padding: var(--s-8) var(--s-16) var(--s-8) var(--s-12);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
  font: inherit; text-align: left;
  transition: transform var(--t-fast) var(--ease-galaxy-bounce),
              background var(--t-fast) var(--ease-galaxy),
              box-shadow var(--t-fast) var(--ease-galaxy);
}
.ext-cta:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-lg); }
.ext-cta:active { transform: scale(.96); }
.ext-cta .ext-cta-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--red-500-text, #D81B37);
  font-size: 15px; font-weight: 800; flex-shrink: 0;
}
.ext-cta .ext-cta-txt b { display: block; font-size: 14px; font-weight: 800; letter-spacing: .3px; }
.ext-cta .ext-cta-txt small { display: block; font-size: 12px; opacity: .85; margin-top: 1px; }
/* 已安装状态 */
.ext-cta-on { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); cursor: default; }
.ext-cta-on:hover { transform: none; background: rgba(255, 255, 255, .16); box-shadow: none; }
.ext-cta-on .ext-cta-ico { background: var(--green); color: #fff; }
/* 移动端/降级弱提示 */
.ext-cta-dim { opacity: .88; cursor: default; }
.ext-cta-dim:hover { transform: none; background: rgba(255, 255, 255, .14); box-shadow: none; }
/* 2026-09-30：hero-ext 已改为常规流，该断点补丁作废（保留注释便于追溯） */

/* 安装引导弹窗 */
.ext-modal-mask {
  position: fixed; inset: 0; z-index: var(--z-critical, 9999);
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 27, 29, .5);
  opacity: 0;
  pointer-events: none; transition: opacity var(--t-med) var(--ease-galaxy);
  padding: var(--s-20);
}
.ext-modal-mask.show { opacity: 1; pointer-events: auto; }
.ext-modal {
  width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
  background: var(--card); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.97);
  transition: transform var(--t-med) var(--ease-galaxy-bounce);
}
.ext-modal-mask.show .ext-modal { transform: none; }
.ext-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-16) var(--s-20) var(--s-12); border-bottom: 1px solid var(--line);
}
.ext-modal-title { font-size: var(--fs-h3); font-weight: 800; }
.ext-modal-x {
  border: none; background: none; font-size: 15px; color: var(--ink3);
  cursor: pointer; padding: var(--s-4) var(--s-8); border-radius: var(--r-sm);
  transition: all var(--t-fast) var(--ease-galaxy);
}
.ext-modal-x:hover { color: var(--red-500-text, #D81B37); background: var(--red-50); }
.ext-modal-body { padding: var(--s-18) var(--s-20) var(--s-6); }
.ext-step { display: flex; gap: var(--s-12); margin-bottom: var(--s-16); }
.ext-step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--pink-grad); color: #fff; font-size: 13px; font-weight: 800;
  margin-top: 1px;
}
.ext-step b { font-size: 14px; font-weight: 700; color: var(--ink); }
.ext-step p { font-size: 13px; color: var(--ink2); margin-top: var(--s-4); line-height: 1.65; }
.ext-step p code {
  background: var(--red-50); color: var(--red-600);
  border-radius: 5px; padding: 1px var(--s-8); font-size: 12px;
  font-family: var(--font-mono);
}
.ext-step-tip a { color: var(--red-500-text, #D81B37); font-weight: 600; }
.ext-mini-btn {
  margin-top: var(--s-8); border: 1px solid var(--line2); background: var(--bg);
  border-radius: 999px; padding: var(--s-4) var(--s-14); font-size: 12px; color: var(--ink2);
  cursor: pointer; transition: all var(--t-fast) var(--ease-galaxy);
}
.ext-mini-btn:hover { border-color: var(--red-300); color: var(--red-500-text, #D81B37); background: var(--red-50); }
.ext-modal-foot {
  display: flex; justify-content: flex-end; gap: var(--s-10);
  padding: var(--s-12) var(--s-20) var(--s-18); border-top: 1px solid var(--line); margin-top: var(--s-8);
}
.ext-ghost {
  border: 1px solid var(--line2); background: var(--card); color: var(--ink2);
  border-radius: var(--r-sm); padding: var(--s-8) var(--s-18); font-size: 13px; cursor: pointer;
  transition: all var(--t-fast) var(--ease-galaxy);
}
.ext-ghost:hover { border-color: var(--red-300); color: var(--red-500-text, #D81B37); }
.ext-ghost.ok { border-color: var(--green-text, #137A52); color: var(--green-text, #137A52); background: var(--green-bg); }
.ext-primary {
  border: none; background: var(--pink-grad); color: #fff;
  border-radius: var(--r-sm); padding: var(--s-8) var(--s-24); font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: var(--shadow-red);
  transition: transform var(--t-fast) var(--ease-galaxy-bounce), box-shadow var(--t-fast) var(--ease-galaxy);
}
.ext-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-red-lg); }
.ext-primary:active { transform: scale(.96); }
/* 深色模式适配 */
[data-theme="dark"] .ext-modal { background: #241f22; }
[data-theme="dark"] .ext-modal-head, [data-theme="dark"] .ext-modal-foot { border-color: #3a3337; }
[data-theme="dark"] .ext-step b { color: #f2edf0; }
[data-theme="dark"] .ext-step p { color: #b3aab0; }
[data-theme="dark"] .ext-mini-btn, [data-theme="dark"] .ext-ghost { background: #2c2629; border-color: #453c40; color: #b3aab0; }

/* ===== 顶部导航栏修复与整体优化（20260921d）=====
   问题：13 个导航按钮 + 用户区总宽 ~1730px 超过容器 1392px，
        flex 默认 nowrap 导致右侧用户区（个人中心/退出）被挤出屏幕；
        且 .topnav 与 #spark-auth-badge 双 margin-left:auto 互相挤压。
   修复：导航区内部横滑 + 用户区固定右侧 + 中屏收紧间距 + 移动端精简。
================================================================== */
.topbar-inner { gap: var(--s-10); padding: var(--s-10) var(--s-20); }

/* Logo 与品牌区不被压缩 */
.topbar-inner .logo { flex-shrink: 0; }

/* 导航区：内部横向滚动（不溢出、不换行、隐藏滚动条）
   2026-10-19：padding-right:96px 归零。
   那 96px 是 .nav-more 还在 .topnav 内部（sticky 右缘）时的避让空间；10-18 把
   .nav-more 移出 topnav 后，它变成了 topnav 内部右侧的纯空白，直接把「Brief 转笔记」
   和「更多」之间撑开近 100px（园园：这两个是不是离得太远了）。
   flex 同步从 1 1 auto 改 0 1 auto：不再吃满剩余宽度，nav-more 紧跟最后一个 pill。 */
.topnav {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 0;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  padding-right: 0;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav button { flex: 0 0 auto; }

/* 用户区：固定最右，不压缩（auth.js 注入的 #spark-auth-badge 有内联 margin-left，
   此处用更高优先级矫正，避免双 auto margin 互相挤压） */
#spark-auth-badge { margin-left: var(--s-8) !important; flex-shrink: 0; }

/* 中屏（900–1440px）：收紧按钮间距与字号，减少滚动距离
   2026-10-05 回滚：13px + 收窄 padding 被当成「导航按钮异常缩小」，与 UI 规范
   （14px / padding 8·14）不符。导航区本就是内部横滑，不需要靠缩小字号换空间。 */
@media (max-width: 1440px) and (min-width: 900px) {
  .topbar-inner { padding: var(--s-10) var(--s-14); }
}

/* 窄屏（<900px，顶栏导航隐藏、走底部 TabBar）：精简用户区，防止用户名挤出屏幕 */
@media (max-width: 900px) {
  .topbar-inner { padding: var(--s-10) var(--s-12); gap: var(--s-6); }
  #spark-auth-badge { font-size: 12px !important; gap: var(--s-6) !important; }
  #spark-auth-badge .spark-auth-user { display: none; }          /* 隐藏用户名 */
  #spark-auth-badge button { padding: 3px var(--s-8) !important; font-size: 12px !important; }
  /* 2026-10-18（lt-L1a）：原选择器 #spark-plan-badge 在运行时根本不存在 —— plan.js 渲染的是
     #planBadgeSlot > button.pl-badge。这条规则连同「额度徽标精简」整体落空，是移动端顶栏
     溢出的直接原因之一。改为真实选择器，并让徽标可收缩（index.html 内联样式已同步放开）。 */
  #planBadgeSlot .pl-badge { padding: 2px var(--s-8) !important; font-size: 12px !important; }
  #planBadgeSlot { flex: 0 1 auto !important; min-width: 0; overflow: hidden; }
  /* 「更多」按钮内的当前页名（.nav-more-cur）宽度随页面名 64~175px 浮动，窄屏不可控
     —— 实测 /comment-reply 达 175px，直接把顶栏顶到 539px。窄屏隐藏，宽度收敛为定值。 */
  #navMoreBtn .nav-more-cur { display: none; }
}
/* 手机主断点（<=640）：顶栏子项总宽必须小于视口宽，否则「退出」被挤到视口外点不到。
   额度徽标只保留「3/10」数字，功能名由 .pl-name 承载并在窄屏隐藏（145px -> ~64px）。 */
@media (max-width: 640px) {
  #planBadgeSlot .pl-badge .pl-name { display: none; }
}
/* 超窄屏（<=400，iPhone SE / mini 一类 375px）：品牌文字也让位，只留 logo 徽标 */
@media (max-width: 400px) {
  .topbar-inner .logo > div:not(.logo-badge) { display: none; }
}
/* 超窄屏：个人中心按钮只留图标 */
@media (max-width: 480px) {
  #spark-auth-badge .spark-auth-prof { font-size: 0 !important; }
  #spark-auth-badge .spark-auth-prof::before { content: '👤'; font-size: 13px; }
  #spark-auth-badge button { padding: var(--s-4) var(--s-8) !important; }
}

/* ===== 发布前体检 · 一键优化版（2026-09-20 新增） ===== */
.lab-opt-entry { display: flex; align-items: center; gap: var(--s-10); flex-wrap: wrap; margin-top: var(--s-14); }
.lab-opt-entry-tip { font-size: 12px; color: #5B5457; }
.lab-opt { margin-top: var(--s-14); background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: var(--s-14); }
.lab-opt-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-10); flex-wrap: wrap; margin-bottom: var(--s-10); }
.lab-opt-title { font-size: 15px; font-weight: 700; color: #166534; background: #fff; border-radius: 10px; padding: var(--s-10) var(--s-14); margin: var(--s-6) 0; cursor: pointer; transition: transform .15s cubic-bezier(.34,1.56,.64,1); }
.lab-opt-title:hover { transform: translateX(3px); }
.lab-opt-title:active { transform: scale(.99); }
.lab-opt-body { font-size: 14px; line-height: 1.75; color: #3f3f46; background: #fff; border-radius: 10px; padding: var(--s-12) var(--s-14); margin: var(--s-6) 0; cursor: pointer; white-space: pre-wrap; word-break: break-word; transition: transform .15s cubic-bezier(.34,1.56,.64,1); }
.lab-opt-body:hover { transform: translateX(3px); }
.lab-opt-body:active { transform: scale(.99); }
.lab-opt-tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-8); margin: var(--s-8) 0; font-size: 13px; }
.lab-opt-tag { background: #fff; border: 1px solid #bbf7d0; color: #15803d; border-radius: 999px; padding: 3px var(--s-10); cursor: pointer; transition: background .2s ease, transform .15s cubic-bezier(.34,1.56,.64,1); }
.lab-opt-tag:hover { background: #dcfce7; }
.lab-opt-tag:active { transform: scale(.95); }
.lab-opt-tags-tip { color: #6E6869; }
.lab-opt-tags a { color: #15803d; }
.lab-opt-changes { margin-top: var(--s-10); }
.lab-opt-compliance { margin-top: var(--s-10); font-size: 13px; color: #166534; background: #fff; border-radius: 8px; padding: var(--s-8) var(--s-12); }

/* 深色模式适配 */
[data-theme="dark"] .lab-opt { background: #0d2117; border-color: #14532d; }
[data-theme="dark"] .lab-opt-title { color: #86efac; background: #1F1B1D; }
[data-theme="dark"] .lab-opt-body { color: #D8D1D3; background: #1F1B1D; }
[data-theme="dark"] .lab-opt-tag { background: #1F1B1D; border-color: #14532d; color: #86efac; }
[data-theme="dark"] .lab-opt-tag:hover { background: #14532d; }
[data-theme="dark"] .lab-opt-tags a { color: #86efac; }
[data-theme="dark"] .lab-opt-compliance { color: #86efac; background: #1F1B1D; }
[data-theme="dark"] .lab-opt-entry-tip { color: #767076; }

/* ===== 发布前体检 · 迭代记录与建议分诊（2026-09-20 新增） ===== */
.lab-iter { margin-bottom: var(--s-14); border-radius: 12px; padding: var(--s-12) var(--s-14); border: 1px solid; }
.lab-iter-first { background: #f8fafc; border-color: #e2e8f0; }
.lab-iter-good { background: #f0fdf4; border-color: #bbf7d0; }
.lab-iter-peak { background: #fffbeb; border-color: #fde68a; }
.lab-iter-rollback { background: #fef2f2; border-color: #fecaca; }
.lab-iter-stop { background: #eff6ff; border-color: #bfdbfe; }
.lab-iter-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-10); flex-wrap: wrap; }
.lab-iter-reset { font-size: 12px; color: #5B5457; }
.lab-iter-rounds { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: var(--s-8) 0; font-size: 12px; color: #6E6869; }
.lab-iter-chip { display: inline-block; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 3px var(--s-10); cursor: pointer; font-size: 12px; color: #3f3f46; transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .2s ease; }
.lab-iter-chip:hover { background: #f1f5f9; transform: translateY(-1px); }
.lab-iter-chip:active { transform: scale(.95); }
.lab-iter-chip.best { border-color: #f59e0b; color: #b45309; background: #fffbeb; font-weight: 700; }
.lab-iter-advice { font-size: 13px; line-height: 1.7; color: #1F1B1D; background: #fff; border-radius: 8px; padding: var(--s-8) var(--s-12); }
.lab-tri { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 1px var(--s-8); margin-left: var(--s-4); vertical-align: 1px; }
.lab-tri-adopt { background: #dcfce7; color: #15803d; }
.lab-tri-weigh { background: #fef3c7; color: #b45309; }
.lab-tri-skip { background: #F5F3F4; color: #6E6869; }
.lab-tri-conflict { font-size: 12px; color: #b45309; margin: 3px 0 var(--s-4) var(--s-18); }

/* 深色模式适配 */
[data-theme="dark"] .lab-iter-first { background: #1c1c1f; border-color: #3f3f46; }
[data-theme="dark"] .lab-iter-good { background: #0d2117; border-color: #14532d; }
[data-theme="dark"] .lab-iter-peak { background: #251d07; border-color: #78350f; }
[data-theme="dark"] .lab-iter-rollback { background: #2a0f0f; border-color: #7f1d1d; }
[data-theme="dark"] .lab-iter-stop { background: #0c1a2e; border-color: #1e3a5f; }
[data-theme="dark"] .lab-iter-chip { background: #1F1B1D; border-color: #3f3f46; color: #D8D1D3; }
[data-theme="dark"] .lab-iter-chip:hover { background: #1F1B1D; }
[data-theme="dark"] .lab-iter-chip.best { border-color: #d97706; color: #fbbf24; background: #251d07; }
[data-theme="dark"] .lab-iter-advice { background: #1F1B1D; color: #D8D1D3; }
[data-theme="dark"] .lab-tri-adopt { background: #14532d; color: #86efac; }
[data-theme="dark"] .lab-tri-weigh { background: #78350f; color: #fcd34d; }
[data-theme="dark"] .lab-tri-skip { background: #1F1B1D; color: #767076; }
[data-theme="dark"] .lab-tri-conflict { color: #fcd34d; }
[data-theme="dark"] .lab-iter-reset { color: #767076; }

/* ============================================================
 * 顶部导航「高频直显 + 低频收纳」（20260928c）
 * 桌面：8 个高频按钮直显 + 「更多」分组下拉
 * 移动：4 个高频 Tab + 「更多」底部抽屉（全量 15 功能分组）
 * ============================================================ */

/* ---------- 桌面「更多」下拉 ---------- */
.nav-more { position: relative; flex: 0 0 auto; }
#navMoreBtn .caret {
  display: inline-block; margin-left: 3px; font-size: 12px;
  transition: transform .25s var(--ease-standard);
}
#navMoreBtn.open .caret { transform: rotate(180deg); }
/* 当前页在「更多」收纳组时：与 .topnav button.on 同一套选中语言（红渐变白字），
   原来的 red-50 浅粉底被反馈「底色太浅、对比不足」。
   2026-10-17（site-fix P0-1）：「更多」按钮此前从未被加过激活态 —— 23/31 页切过去后
   整个顶栏一个都不亮。现在 switchPage 会给它加 .has-on，并把当前页名回显到
   #navMoreLabel（面板收起后仍看得出自己在哪）。 */
#navMoreBtn.has-on { background: var(--pink-grad); color: #fff; font-weight: 700; box-shadow: var(--shadow-red); }
#navMoreBtn.has-on .caret { color: #fff; }
.nav-more-cur { font-weight: 700; }
.nav-more-cur:empty { display: none; }
/* 移动端 TabBar 的「更多」：当前页不在 4 个高频里时给同一套激活语言 */
#tabMoreBtn.has-on { color: var(--red-500-text, #D81B37); font-weight: 700; }
#tabMoreBtn.has-on .ticon { color: var(--red-500-text, #D81B37); }

.nav-more-panel {
  position: fixed; z-index: var(--z-panel, 9500); /* 2026-10-11：原 90 会被薯薯立绘层（.ss-stage 9000）盖住底部条目；
                                    9500 高于立绘、低于任务卡（9998） */
  width: 292px; padding: var(--s-8);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: none;
  /* 2026-10-06：功能收进来后内容超高（实测 1287px > 视口 813px），
     底部的「安全审计日志」够不着也点不到。限高 + 内部滚动。 */
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-more-panel::-webkit-scrollbar { width: 6px; }
.nav-more-panel::-webkit-scrollbar-thumb { background: rgba(31,27,29,.16); border-radius: 99px; }
.nav-more-panel::-webkit-scrollbar-track { background: transparent; }
.nav-more-panel.show { display: block; animation: nmpIn .22s var(--ease-out-expo); }
@keyframes nmpIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

.nmp-group + .nmp-group { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.nmp-title {
  font-size: 12px; font-weight: 700; color: var(--ink3);
  letter-spacing: 1.5px; padding: var(--s-4) var(--s-10) 3px;
}
.nav-more-panel button {
  display: flex; align-items: center; gap: var(--s-10); width: 100%;
  padding: var(--s-8) var(--s-10); border: none; background: none; border-radius: 10px;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: background .2s var(--ease-standard), transform .15s var(--ease-standard);
}
.nav-more-panel button:hover { background: var(--red-50); }
.nav-more-panel button:active { transform: scale(.97); }
/* 2026-10-17：浅粉底与 :hover 同色、区分度不够（此前还从没被真正触发过），
   补左侧 3px 品牌色条，扫一眼就能定位当前页 */
.nav-more-panel button.on {
  background: var(--red-50);
  box-shadow: inset 3px 0 0 var(--xhs-red, #FF2442);
}
.nav-more-panel button > span { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; }
.nav-more-panel button b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.nav-more-panel button.on b { color: var(--red-500-text, #D81B37); }
.nav-more-panel button i {
  display: block; font-size: 12px; font-style: normal;
  color: var(--ink3); margin-top: 1px;
}

/* ---------- 移动端「全部功能」底部抽屉 ---------- */
.sheet-mask {
  position: fixed; inset: 0; z-index: var(--z-sheet-mask, 95);
  background: rgba(31,27,29,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-standard);
}
.sheet-mask.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet, 96);
  background: var(--card); border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 40px rgba(31,27,29,.2);
  transform: translateY(105%);
  transition: transform .32s var(--ease-out-expo);
  max-height: 78vh; display: flex; flex-direction: column;
}
.sheet.show { transform: none; }
.sheet-handle {
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--line2); margin: var(--s-10) auto var(--s-4); flex-shrink: 0;
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-8) var(--s-18) var(--s-10); border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.sheet-head b { font-size: 16px; font-weight: 800; color: var(--ink); }
.sheet-close {
  border: none; background: var(--red-50); color: var(--red-500-text, #D81B37);
  width: 30px; height: 30px; border-radius: 999px; font-size: 14px; cursor: pointer;
  transition: transform .15s var(--ease-standard);
}
.sheet-close:active { transform: scale(.9); }
.sheet-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--s-10) var(--s-16) calc(var(--s-20) + env(safe-area-inset-bottom));
}
.sheet-gtitle { font-size: 12px; font-weight: 700; color: var(--ink3); margin: var(--s-14) 0 var(--s-8); }
.sheet-group:first-child .sheet-gtitle { margin-top: var(--s-4); }
.sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-8); }
.sheet-grid button {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  padding: var(--s-12) var(--s-4); border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink2);
  font-size: 12px; font-family: inherit; cursor: pointer;
  transition: all .2s var(--ease-standard);
}
.sheet-grid button span { font-size: 21px; }
.sheet-grid button:active { transform: scale(.94); }
.sheet-grid button.on {
  border-color: var(--red-200); background: var(--red-50);
  color: var(--red-500-text, #D81B37); font-weight: 700;
  /* 2026-10-17：抽屉宫格里 4 列 × 多组，只靠底色容易看漏，补一圈品牌色环 */
  box-shadow: 0 0 0 2px rgba(255, 36, 66, .18);
}

/* 桌面端不显示移动抽屉 */
@media (min-width: 900px) {
  .sheet, .sheet-mask { display: none; }
}

/* 移动 TabBar 精简为 5 项后居中分布（覆盖旧的横滑规则） */
@media (max-width: 900px) {
  .tabbar { justify-content: space-around; overflow-x: visible; }
  .tabbar button { flex: 1 1 0; min-width: 0; }
}

/* ---------- 暗色模式适配 ---------- */
[data-theme="dark"] .nav-more-panel { background: #241f22; border-color: #3a3337; box-shadow: 0 18px 44px rgba(0,0,0,.5); }
[data-theme="dark"] .nmp-group + .nmp-group { border-color: #3a3337; }
[data-theme="dark"] .nav-more-panel button:hover,
[data-theme="dark"] .nav-more-panel button.on { background: rgba(255,36,66,.14); }
[data-theme="dark"] .nav-more-panel button b { color: #f2edf0; }
[data-theme="dark"] .nav-more-panel button.on b { color: #ff8fa0; }
[data-theme="dark"] #navMoreBtn.has-on { background: rgba(255,36,66,.14); color: #ff8fa0; }
[data-theme="dark"] .sheet { background: #241f22; box-shadow: 0 -12px 40px rgba(0,0,0,.55); }
[data-theme="dark"] .sheet-head { border-color: #3a3337; }
[data-theme="dark"] .sheet-head b { color: #f2edf0; }
[data-theme="dark"] .sheet-handle { background: #453c40; }
[data-theme="dark"] .sheet-grid button { background: #2c2629; border-color: #453c40; color: #b3aab0; }
[data-theme="dark"] .sheet-grid button.on { background: rgba(255,36,66,.14); border-color: rgba(255,36,66,.4); color: #ff8fa0; }
[data-theme="dark"] .sheet-close { background: rgba(255,36,66,.14); color: #ff8fa0; }

/* ============================================================
 * plog 采集库内容快照（20260929a）
 * 原帖 xsec_token 过期后，应用内直接展示入库快照
 * ============================================================ */
.plog-nosnap {
  font-size: 12px; font-weight: 700; color: #8A5A00;
  background: rgba(217,142,11,.12); border-radius: 8px; padding: 2px var(--s-8);
  white-space: nowrap;
}
.snap-warn {
  background: rgba(217,142,11,.1); border: 1px solid rgba(217,142,11,.3);
  color: #8a5c05; border-radius: 12px; padding: var(--s-12) var(--s-14);
  font-size: 13px; line-height: 1.7; margin-bottom: var(--s-14);
}
.snap-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6);
  font-size: 13px; color: var(--ink2); margin-bottom: var(--s-10);
}
.snap-dot { color: var(--ink4); }
.snap-inter {
  display: flex; gap: var(--s-14); flex-wrap: wrap;
  font-size: 14px; font-weight: 700; color: var(--red-500-text, #D81B37);
  background: var(--red-50); border-radius: 12px; padding: var(--s-10) var(--s-14); margin-bottom: var(--s-14);
}
.snap-imgs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); margin-bottom: var(--s-14);
}
.snap-imgs a {
  display: block; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 1;
  transition: transform .25s var(--ease-standard), box-shadow .25s var(--ease-standard);
}
.snap-imgs a:hover { transform: scale(1.02); box-shadow: 0 8px 20px rgba(31,27,29,.12); }
.snap-imgs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snap-video { margin-bottom: var(--s-14); font-size: 14px; }
.snap-video a { color: var(--red-500-text, #D81B37); font-weight: 600; }
.snap-desc {
  white-space: pre-wrap; word-break: break-word;
  font-size: 14px; line-height: 1.8; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--s-14) var(--s-16); margin-bottom: var(--s-14);
  max-height: 320px; overflow-y: auto;
}
.snap-tags { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-bottom: var(--s-16); }
.snap-tag {
  font-size: 12px; font-weight: 600; color: var(--red-600);
  background: var(--red-50); border-radius: 999px; padding: var(--s-4) var(--s-10);
}
.snap-foot { display: flex; gap: var(--s-10); justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 640px) {
  .snap-imgs { grid-template-columns: repeat(2, 1fr); }
}
[data-theme="dark"] .snap-warn { background: rgba(217,142,11,.16); border-color: rgba(217,142,11,.4); color: #fcd34d; }
[data-theme="dark"] .snap-desc { background: #2c2629; border-color: #453c40; color: #f2edf0; }
[data-theme="dark"] .snap-meta { color: #b3aab0; }
[data-theme="dark"] .snap-inter { background: rgba(255,36,66,.14); color: #ff8fa0; }
[data-theme="dark"] .snap-tag { background: rgba(255,36,66,.14); color: #ff8fa0; }
[data-theme="dark"] .snap-imgs a { border-color: #453c40; }

/* ---- 浮动标签包装器兜底（2026-09-30）----
 * form-effects 的 floatLabel 会把 input 包进 .sm-float-wrap；若宿主是 flex 容器，
 * 该 span 作为 flex item 会被压到 input 的固有宽度（搜索框曾只剩 166px）。
 * 这里统一给它「占满剩余宽度 + 允许收缩」，并把内部 input 拉满。 */
.sm-float-wrap { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.sm-float-wrap > input,
.sm-float-wrap > textarea { width: 100%; min-width: 0; }


/* ---- 返回工作台链接：图标与文字垂直居中（2026-09-30）----
 * 原先 <a class="back"> 自身是 inline，里面的 <i class="icon"> 是 inline-flex，
 * 二者按基线对齐，箭头比文字明显偏高且间距不稳。改为行内 flex 后二者居中对齐。 */
.back,
.topbar .back a,
header .back a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  line-height: 1;
}
.back > .icon,
.topbar .back a > .icon { width: 16px; height: 16px; }



/* ============================================================
 * UI 统一修复层（2026-09-30）
 * ============================================================ */

/* ---- A. 排序/标签按钮：图标 + 文字垂直居中（含「数据与设置」新增图标）---- */
.sort-bar .sopt {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  line-height: 1;
}
.sort-bar .sopt > .icon,
.sort-bar .sopt .cstab-icon { width: 15px; height: 15px; flex: none; }
#page-console .sort-bar .sopt.on .cstab-icon { color: var(--red-500-text, #D81B37); }

/* ---- B. 今日热搜关键词：标题占独立一行，词条走等高曙格 ---- */
.hot-strip {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-12);
  padding: var(--s-14) var(--s-16);
}
.hot-strip-head {
  width: 100%;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
}
.hot-strip-txt { gap: 3px; min-width: 0; }
.hot-strip-title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  line-height: 1;
}
.hot-strip-title > .icon { width: 17px; height: 17px; flex: none; color: var(--red-500-text, #D81B37); }
.hot-strip-head .sec-sub { line-height: 1.35; }

/* 词条：定列宽曙格，行高一致、不再高低错落 */
.hot-strip-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: var(--s-8);
  width: 100%;
  padding: 0;
  overflow: visible;
  flex-wrap: nowrap;
}
.hot-chip {
  width: 100%;
  height: 32px;
  justify-content: flex-start;
  padding: 0 var(--s-10) 0 var(--s-4);
  box-sizing: border-box;
  line-height: 1;
  font-size: 13px;
}
.hot-chip .hc-w {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.hot-chip .hc-t,
.hot-chip .hc-src { flex: none; }

/* ---- C. 搜索框：尺寸与留白统一，聚焦态更明确 ---- */
.search-box {
  gap: var(--s-8);
  padding: var(--s-4) var(--s-6) var(--s-4) var(--s-16);
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
}
.search-box input {
  height: 42px;
  font-size: 14px;
}
.search-box .sicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--ink3);
}
.search-box:focus-within { border-color: var(--red-400, #FF6B81); }
.search-box:focus-within .sicon { color: var(--red-500-text, #D81B37); }

@media (max-width: 720px) {
  .hot-strip-scroll { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
  .search-box { padding: var(--s-4) var(--s-6) var(--s-4) var(--s-12); }
}

/* ============================================================
 * 2026-09-30 UI 修复层（三）
 * 1) hero 灯泡：原 bottom:-26px / right:-6px 被 overflow:hidden 裁掉一大截，
 *    又被下方通栏的「一键安装插件」压住 → 上移到容器内，完整可见
 * 2) 热搜词条：实测 .hc-w 关键词仅 49px（7 字只显示 3 个），
 *    元信息（趋势箭头/来源/生命周期/匹配度/加号）把关键词挤没了
 *    → 列宽 215→268px，关键词保底 104px，元信息允许收缩、来源超长省略
 * 3) 图标居中：无头实测 block 布局按钮内的图标比相邻文字中心「高 5.5px」
 *    （vertical-align 默认 baseline）→ 改 middle 后偏差降到 1.19px；
 *    .icon-inline 实测偏差仅 0.06px（-0.17em 已调优），保持不动
 * ============================================================ */
.hero-banner::after {
  content: '💡';
  position: absolute; right: 16px; bottom: 8px;
  font-size: 104px; opacity: .22; line-height: 1;
  pointer-events: none;
}

.hot-strip-scroll { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.hot-chip { height: 34px; padding: 0 var(--s-10) 0 var(--s-6); gap: var(--s-6); }
.hot-chip .hc-w {
  flex: 1 1 auto;
  min-width: 104px;
  font-weight: 600;
  color: var(--ink, #1F1B1D);
}
.hot-chip .hc-rk { flex: 0 0 auto; }
.hot-chip > span:not(.hc-w):not(.hc-rk) { flex: 0 1 auto; min-width: 0; }
.hot-chip > span[title="加入我的词库"] { flex: 0 0 auto; }
.hot-chip .hc-src {
  max-width: 60px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 720px) {
  .hot-strip-scroll { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
  .hot-chip .hc-w { min-width: 72px; }
  .hot-chip .hc-src { max-width: 40px; }
}

[data-icon]:not(.icon-inline) { vertical-align: middle; }
/* hero 大标题字号 22px，实测 middle 仍偏低 2.13px，用字号比例值归零 */
.hero-banner h1 [data-icon] { vertical-align: -0.09em; }

/* ============================================================
 * 2026-09-30 UI 修复层（四）：创作流水线页
 * 1) 步骤条内边距对齐卡片内容：原 .pl-steps{padding:var(--s-10) var(--s-6)} 而上下卡片是
 *    .card-pad{padding:var(--s-18)} → 步骤块比卡片内容凸出 12px，全站只有这一页有该偏差
 * 2) 步骤面板由 JS 切换显示，任何情况下都不能被滚动揭示动画藏起来（兜底）
 * ============================================================ */
.pl-steps { padding: var(--s-10) var(--s-18); }
.pl-step-panel.sm-reveal { opacity: 1; transform: none; animation: none; }
@media (max-width: 720px) {
  .pl-steps { padding: var(--s-10) var(--s-10); }
}


/* ============================================================
 * v2.6.2 商单合规 / 口语化：排查前速览（空态引导）
 * ============================================================ */
#sensInput, #hzInput { min-height: 150px; }   /* 防止个别环境下 inline height 失效被压扁 */

.sens-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-10); }
.sg-item {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--s-12) var(--s-14); transition: transform .18s var(--ease, cubic-bezier(.16,1,.3,1)), border-color .18s;
}
.sg-item:hover { transform: translateY(-2px); border-color: var(--red-200); }
.sg-item b { display: block; font-size: 13px; color: var(--red-600); margin-bottom: 5px; }
.sg-item p { font-size: 12.5px; color: var(--ink2); line-height: 1.6; margin: 0 0 5px; }
.sg-item small { font-size: 12px; color: var(--ink3); line-height: 1.5; display: block; }

.sens-guide-steps { display: flex; align-items: center; gap: var(--s-10); flex-wrap: wrap; font-size: 12.5px; color: var(--ink2); }
.sens-guide-steps span { display: inline-flex; align-items: center; gap: 6px; }
.sens-guide-steps i {
  width: 18px; height: 18px; border-radius: 50%; background: var(--pink-grad); color: #fff;
  font-style: normal; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.sg-arr { color: var(--ink3); }

.hz-guide-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-20); }
@media (max-width: 860px) { .hz-guide-grid { grid-template-columns: 1fr; } }
.hz-keep-list { display: flex; flex-direction: column; gap: var(--s-8); }
.hz-keep { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink2); }
.hz-keep .icon { color: var(--green-text, #137A52); }
.hz-vs-list { display: flex; flex-direction: column; gap: var(--s-8); }
.hz-vs {
  font-size: 12.5px; line-height: 1.65; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: var(--s-8) var(--s-12);
}
.hz-vs s { display: block; color: var(--ink3); text-decoration-color: rgba(255,36,66,.4); }
.hz-vs b { display: block; color: var(--ink); font-weight: 600; margin-top: 2px; }


/* ============================================================
 * v2.6.2 子页并入 SPA（AI 工坊 / 商单管理 / 运营台账）+ 布局修复
 * ============================================================ */

/* ---- 0. 选中 tab 图标看不清：实底红 pill 里的图标一律白色 ---- */
.wk-tabs .sopt.on > .icon, .wk-tabs .wk-tab.on > .icon,
.sort-bar .sopt.on > .icon { color: #fff !important; opacity: 1; }
/* 浅红底的选中态（sort-bar 默认样式）保持红字红图标 */
.sort-bar:not(.wk-tabs) .sopt.on { color: var(--red-500-text, #D81B37); }
.sort-bar:not(.wk-tabs) .sopt.on > .icon { color: var(--red-500-text, #D81B37) !important; }

/* ---- 1. 团队/增长/消息等页的「输入+按钮」行：按钮不再被挤到下一行 ---- */
.ws-row .fav-note-input { width: auto; flex: 1 1 200px; min-width: 140px; }
.ws-row .btn { flex: 0 0 auto; }

/* ---- 2. 协作与增长页留白（原排版太紧凑） ---- */
#page-team .card, #page-growth .card, #page-inbox .card, #page-console .card {
  padding: var(--s-20) var(--s-22);
}
#page-team .ws-row, #page-growth .ws-row, #page-inbox .ws-row { margin: var(--s-16) 0; }
#page-team .ws-table td, #page-growth .ws-table td, #page-inbox .ws-table td, #page-console .ws-table td {
  padding: var(--s-14) var(--s-12); line-height: 1.7;
}
#page-team .ws-table th, #page-growth .ws-table th, #page-inbox .ws-table th, #page-console .ws-table th {
  padding: var(--s-12) var(--s-12);
}
#page-team .pl-step-title, #page-growth .pl-step-title, #page-inbox .pl-step-title { margin-top: var(--s-24); }
#page-inbox .sort-bar, #page-growth .sort-bar, #page-console .sort-bar { gap: var(--s-8); margin-bottom: var(--s-18); }
#page-inbox .sort-bar .sopt, #page-growth .sort-bar .sopt, #page-console .sort-bar .sopt {
  padding: var(--s-8) var(--s-16);
}

/* ---- 3. 子页通用（工坊/台账/商单） ---- */
#page-workshop .sw-input, #page-deals .sw-form-grid input,
#page-deals .sw-form-grid select, #page-deals .sw-form-grid textarea,
#page-deals .sw-filters input, #page-deals .sw-filters select,
#page-ledger .sw-filters input, #page-ledger #ledFormGrid input,
#page-ledger #ledFormGrid select, #page-ledger #ledFormGrid textarea {
  width: 100%; border: 1.5px solid var(--line2); border-radius: 10px;
  padding: var(--s-10) var(--s-12); font-size: 13px; font-family: inherit;
  outline: none; background: #fff; color: var(--ink); box-sizing: border-box;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
#page-workshop .sw-input:focus, #page-deals input:focus, #page-deals select:focus,
#page-deals textarea:focus, #page-ledger input:focus, #page-ledger select:focus,
#page-ledger textarea:focus { border-color: var(--red-400); box-shadow: 0 0 0 4px var(--ring-red); }

#page-workshop .sw-row2 { display: flex; gap: var(--s-10); margin-top: var(--s-10); flex-wrap: wrap; }
#page-workshop .sw-row2 > * { flex: 1; min-width: 200px; }
#page-workshop .sw-actions { display: flex; align-items: center; gap: var(--s-12); margin-top: var(--s-14); }
#page-workshop .sw-spin { font-size: 13px; color: var(--ink3); }
#page-workshop .sw-plats { display: flex; gap: var(--s-10); flex-wrap: wrap; margin: var(--s-12) 0; }
#page-workshop .sw-plats label {
  display: inline-flex; align-items: center; gap: var(--s-4); font-size: 13px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: var(--s-8) var(--s-14); cursor: pointer; transition: border-color .18s, background .18s;
}
#page-workshop .sw-plats label:hover { border-color: var(--red-200); background: var(--red-50); }
#page-workshop .sw-plats input { accent-color: var(--xhs-red-text, #D81B37); margin: 0; }
#page-workshop .kv {
  background: var(--bg); border-radius: 10px; padding: var(--s-12) var(--s-14);
  font-size: 13px; line-height: 1.8; white-space: pre-wrap; word-break: break-word;
  margin-bottom: var(--s-8);
}
#page-workshop .titles { margin: var(--s-8) 0; padding-left: var(--s-20); }
#page-workshop .titles li { margin: var(--s-6) 0; font-size: 14px; line-height: 1.7; }
#page-workshop .tag-chips { display: flex; gap: var(--s-6); flex-wrap: wrap; margin: var(--s-8) 0; }
#page-workshop .tag-chip {
  background: var(--red-50, #FFF5F6); color: var(--red-600); border-radius: 999px;
  padding: 3px var(--s-12); font-size: 12px;
}
#page-workshop .senti { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin: var(--s-10) 0 var(--s-6); }
#page-workshop .senti div { height: 100%; }
#page-workshop .senti-legend { display: flex; gap: var(--s-14); font-size: 12px; color: var(--ink2); }
#page-workshop .sw-result .card h2 { font-size: 15px; margin-bottom: var(--s-10); }

/* 子页统计卡 */
.sw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-12); }
.sw-stat {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: var(--s-16) var(--s-18); box-shadow: var(--shadow-sm, 0 1px 4px rgba(31,27,29,.05));
}
.sw-stat b { display: block; font-size: 22px; font-weight: 800; color: var(--red-500-text, #D81B37); margin-bottom: 2px; }
.sw-stat span { font-size: 12px; color: var(--ink3); }
.sw-stat.green b { color: #137A52; }
.sw-stat.amber b { color: #8A5A00; }

/* 子页表单 / 表格 */
.sw-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-12); margin: var(--s-14) 0; }
.sw-form-grid label, #ledFormGrid label { font-size: 12px; color: var(--ink2); display: block; margin-bottom: var(--s-6); font-weight: 600; }
.sw-form-grid .sw-span2 { grid-column: span 2; }
@media (max-width: 640px) { .sw-form-grid .sw-span2 { grid-column: span 1; } }
.sw-row-actions { display: flex; gap: var(--s-10); margin-top: var(--s-4); }
.sw-filters { display: flex; gap: var(--s-10); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-14); }
.sw-filters input, .sw-filters select { width: auto; min-width: 140px; }
#ledFormCard, #formCard { transition: none; }
#ledFormCard[hidden], #formCard[hidden] { display: none; }
.sw-table-wrap { overflow-x: auto; }
.sw-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sw-table th {
  text-align: left; color: var(--ink3); font-weight: 600; padding: var(--s-10) var(--s-10);
  border-bottom: 1.5px solid var(--line); white-space: nowrap;
}
.sw-table td {
  padding: var(--s-12) var(--s-10); border-bottom: 1px solid var(--line);
  vertical-align: top; line-height: 1.65; color: var(--ink);
}
.sw-table tbody tr { transition: background var(--t-fast); }
.sw-table tbody tr:hover { background: var(--bg); }
.sw-table tr.blocked td { background: var(--red-50, #FFF5F6); }
.sw-table .name { font-weight: 700; }
.sw-table .sub { color: var(--ink3); font-size: 12px; }
.sw-table .pill {
  display: inline-block; border-radius: 6px; padding: 1px var(--s-8);
  font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--bg); color: var(--ink2);
}
.sw-table .pill-red { background: var(--red-50, #FFF5F6); color: var(--red-600); }
.sw-table .pill-green { background: #dcfce7; color: #15803d; }
.sw-table .money { white-space: nowrap; }
.sw-table .profit-pos { color: #137A52; font-weight: 700; }
.sw-table .profit-neg { color: var(--red-600); font-weight: 700; }
.sw-table .st {
  display: inline-block; border-radius: 6px; padding: 2px var(--s-8);
  font-size: 12px; font-weight: 700; background: var(--bg); color: var(--ink2);
}
.sw-table .st-done { background: #dcfce7; color: #15803d; }
.sw-table .st-cancelled { background: var(--bg); color: var(--ink3); }
.sw-table .st-contacting { background: #EFF6FF; color: #1d4ed8; }
.sw-table .st-signed { background: var(--red-50, #FFF5F6); color: var(--red-600); }
.sw-table .row-actions { display: flex; gap: var(--s-6); flex-wrap: wrap; }
#ledFormCard, #formCard { display: none; }
#ledFormCard.show, #formCard.show { display: block; }

/* ============================================================
 * v2.6.2 · 关键词挖掘页（#page-keywords，从独立页并入 SPA）
 * ============================================================ */
#page-keywords .kw-chips { display: flex; gap: var(--s-8); flex-wrap: wrap; }
#page-keywords .kw-chips .chip {
  border: 1px solid var(--line); background: #fff; color: var(--ink2);
  border-radius: 999px; padding: var(--s-6) var(--s-14); font-size: 13px;
  cursor: pointer; font-family: inherit;
  transition: all var(--t-fast, .18s);
  display: inline-flex; align-items: center; gap: var(--s-6);
}
#page-keywords .kw-chips .chip:hover { border-color: var(--red-200, #FFC2CC); color: var(--red-500-text, #D81B37); }
#page-keywords .kw-chips .chip.on {
  background: var(--xhs-red-solid, #E01230); color: #fff; border-color: var(--red-500-text, #D81B37); font-weight: 700;
}
#page-keywords .kw-word { font-weight: 700; }
#page-keywords .kw-pill {
  display: inline-block; background: var(--bg, #F5F3F4); border-radius: 6px;
  padding: 1px var(--s-8); font-size: 12px; color: var(--ink3); white-space: nowrap;
}
#page-keywords .ty {
  display: inline-block; border-radius: 6px; padding: 1px var(--s-8);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
#page-keywords .ty-longtail { background: #e0f2fe; color: #0369a1; }
#page-keywords .ty-hot { background: var(--red-50, #FFF5F6); color: var(--red-600); }
#page-keywords .ty-cooccur { background: var(--bg, #F5F3F4); color: var(--ink2); }
#page-keywords .diff-bar {
  width: 90px; height: 8px; background: var(--bg, #F5F3F4); border-radius: 999px;
  overflow: hidden; display: inline-block; vertical-align: middle;
}
#page-keywords .diff-bar i { display: block; height: 100%; border-radius: 999px; }
#page-keywords .diff-num { font-size: 12px; color: var(--ink2); margin-left: var(--s-6); }
#page-keywords .lib-row {
  display: flex; align-items: center; gap: var(--s-10); flex-wrap: wrap;
  padding: var(--s-10) var(--s-8); border-bottom: 1px solid var(--line);
  font-size: 13px; transition: background var(--t-fast, .18s);
}
#page-keywords .lib-row:hover { background: var(--bg, #FBF9FA); }
#page-keywords .lib-word { font-weight: 700; min-width: 120px; }
#page-keywords .lib-meta { color: var(--ink3); font-size: 12px; flex: 1 1 160px; }
@media (max-width: 640px) { #page-keywords .lib-word { min-width: 0; } }

/* ============================================================
 * v2.6.2 · 图标居中兜底
 * 根因：<i data-icon> 宿主是 inline-flex，与文字混排时按基线对齐，
 *       20px 图标会顶出文字上方，看起来「没居中」。
 * 说明：vertical-align 对 flex/inline-flex 容器内的子项无效，
 *       所以 .btn / .sec-title / .sopt 这类 flex 场景不受影响，
 *       只修正 h1~h4、td、label 这类行内混排场景。
 * ============================================================ */
.icon { vertical-align: middle; }
.icon-inline { vertical-align: -0.17em; }
h1 > .icon, h2 > .icon, h3 > .icon, h4 > .icon,
.hint > .icon, td > .icon, th > .icon, label > .icon,
.empty > .icon, .sub > .icon, .meta > .icon {
  width: 1.05em; height: 1.05em; vertical-align: -0.17em;
}


/* ============================================================
   2026-10-04  第 6 条：关键词挖掘页输入框/按钮与其它子页统一
   背景：统一输入框规则只覆盖 #page-workshop / #page-deals / #page-ledger，
        #page-keywords 漏了，三个 input 落在浏览器默认样式上（21px 高、0 圆角、
        2px 灰边框），与团队协作/增长资产的 42px 圆角输入框明显不一致。
   ============================================================ */
#page-keywords .sw-input,
#page-keywords .sw-filters input,
#page-keywords .sw-filters select {
  border: 1.5px solid var(--line2); border-radius: 10px;
  padding: var(--s-10) var(--s-12); font-size: 13px; font-family: inherit;
  outline: none; background: #fff; color: var(--ink);
  box-sizing: border-box;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
#page-keywords .sw-input { flex: 1 1 auto; min-width: 200px; }
#page-keywords input:focus, #page-keywords select:focus {
  border-color: var(--red-400); box-shadow: 0 0 0 4px var(--ring-red);
}
#page-keywords .btn, #page-keywords .chip {
  display: inline-flex; align-items: center; justify-content: center;
}
/* 尺寸类只在大屏生效：移动端要留给 mobile.css 的 44px 触控高度 */
@media (min-width: 901px) {
  #page-keywords .sw-input,
  #page-keywords .sw-filters input,
  #page-keywords .sw-filters select { min-height: 40px; }
  /* 按钮高度实测有 31/33/35/36/38 五种，统一到 36 */
  #page-keywords .btn, #page-keywords .chip { min-height: 36px; }
  #page-keywords .sw-filters .btn, #page-keywords .sw-row2 .btn {
    height: 36px; padding-top: 0; padding-bottom: 0;
  }
}


/* ============================================================
   2026-10-04  P3 视觉统一：单行输入框 / 按钮下限
   体检发现同一站点里单行输入框有 38 / 40 / 42 三种高度、10 / 12 两种圆角；
   次级按钮有 35 / 36 / 38 三种高度。这里统一掉，主搜索框与多行 textarea
   因语义不同保持不变（min-height 只会兜底，不会压扁更高的元素）。
   ============================================================ */
.fav-note-input {
  border-radius: 10px;
  padding: 10px 12px;
}
/* 尺寸类只在大屏生效：移动端要留给 mobile.css 的 44px 触控高度。
   断点 901px 与 mobile.css 的 max-width:899px / 900px 互不重叠。 */
@media (min-width: 901px) {
  .fav-note-input { min-height: 40px; }
  #page-workshop .sw-input, #page-deals .sw-form-grid input,
  #page-deals .sw-form-grid select, #page-deals .sw-filters input,
  #page-deals .sw-filters select, #page-ledger .sw-filters input,
  #page-ledger #ledFormGrid input, #page-ledger #ledFormGrid select {
    min-height: 40px;
  }
  .btn:not(.sm) { min-height: 36px; }
  .btn.btn-ghost:not(.sm), .btn.btn-soft:not(.sm) {
    height: 36px; padding-top: 0; padding-bottom: 0;
  }
}


/* ============================================================
 * 2026-10-03 用户报障修复
 * ============================================================ */

/* [2] AI 工坊：仿写/实拍/评论三个结果容器未渲染时露出空卡片壳 */
#page-workshop .sw-result:not(.show) { display: none; }

/* [5] 一键回到顶部（长页面：爆款选题/爆款实验室等），js/back-top.js 配套
 * 2026-10-05：bottom 88→230。右下角薯薯立绘高约 200px，按钮原先悬在她头顶旁边，
 * 用户反馈太挤要求上移 —— 提到立绘上方，不再重叠。 */
#backTopBtn {
  position: fixed; right: 26px; bottom: 230px; z-index: var(--z-float, 800);
  width: 46px; height: 46px; border: none; border-radius: 50%;
  background: var(--pink-grad); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(255, 36, 66, .32);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px) scale(.82);
  transition: opacity .25s var(--ease-galaxy), transform .25s var(--ease-galaxy), visibility .25s;
}
#backTopBtn[data-show="1"] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
#backTopBtn:hover { transform: translateY(-3px) scale(1.06); }
#backTopBtn:active { transform: scale(.9); }
@media (max-width: 720px) {
  #backTopBtn { right: 14px; bottom: 140px; width: 40px; height: 40px; }
}

/* [6] 2026-10-05：数据与设置页 tab 行「按钮被遮挡」根因修复。
 * 这排 tab 被动态加了 .wk-tabs class，focus-layout.css 的 .wk-tabs 是
 * flex-wrap:nowrap + overflow-x:auto（横向滚动设计），滚动条又隐藏 ——
 * 9 个 tab 超宽时最后一个只露一半，看起来像被裁掉。桌面端改为换行全部展示；
 * 窄屏保持横向滚动（空间小，滚动比折三行更省高度）。 */
@media (min-width: 769px) {
  #page-console .sort-bar.wk-tabs { flex-wrap: wrap; overflow-x: visible; }
}

/* [3] 团队协作/增长资产/数据与设置：输入框与按钮挨太近。
 * 注意：主站 index.html 不加载 spark-ui.css，.ws-row 的 gap 规则此前从未在主站生效
 * （仅个人中心 profile.html 有）。这里补主站定义：gap 14px、上下 16px。 */
.ws-row { gap: var(--s-14); margin: var(--s-16) 0; }


/* ===== 「更多」按钮常驻可视区右缘（20261018-resume/nav） =====
 * .nav-more 已移出 .topnav，作为 .topbar-inner 的 flex 子项自然停靠在最右侧。
 * 原先 sticky 方案在内容溢出时会压住前一个 pill（Brief 转笔记红 pill 与 +更多重叠），
 * 现在不再占用 .topnav 的滚动宽度，也就不会覆盖任何导航项。 */
.topbar-inner .nav-more {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  border-radius: 999px;
}
[data-theme="dark"] .topbar-inner .nav-more { background: rgba(31, 27, 29, .92); }

/* ===== 2026-10-12 上线前验收 ===== */
/* 非管理员不显示「立即采集 / 重新预测 / 立即生成周报 / 重新生成」——
   这几个是全站级动作（后端已收口到 ADMIN_USERS），显示了只能点了才被回绝 */
#page-plog.plog-no-admin .plog-admin-only { display: none !important; }
/* 拍摄页品类 chips 在桌面端 1440px 下要横滑才能看到末尾几个品类，
   这里让它在宽屏自动换行（窄屏保留横滑，手感更好） */
@media (min-width: 1024px) {
  #page-shoot .cat-scroll { overflow-x: visible; flex-wrap: wrap; }
  #page-shoot .cat-scroll .chip { scroll-snap-align: none; }
}

/* ============================================================
 * 看板内联图表（2026-10-18 流畅度专项）
 *   dashboard.js 的两个图表由 echarts 改为内联 SVG，这里补外壳样式。
 * ============================================================ */
.dash-pie { display: flex; align-items: center; gap: var(--s-12); height: 100%; box-sizing: border-box; }
.dash-pie > svg { height: 100%; flex: 0 0 auto; max-width: 46%; }
.dash-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #5B5457;
  max-height: 100%; overflow: hidden; }
.dash-legend li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dash-legend i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dash-legend span { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.dash-legend b { font-weight: 600; color: #2B2325; flex: 0 0 auto; }
.dash-empty { display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 13px; color: var(--ink3); }
@media (max-width: 420px) { .dash-pie > svg { max-width: 40%; } .dash-legend { font-size: 11px; } }

/* 看板 KPI 高度预留（2026-10-18 流畅度专项）
 * dashboard.js 晚于首屏脚本执行，渲染前 #dashKpi 高度为 0，
 * 渲染瞬间由 0 → 120px 把下方「品类分布 / 品类互动量」整块顶下去，
 * 实测这是一次 v≈0.124 的布局跳动（用户感知为「刷新卡一下」）。
 * 按三档视口预留实测高度，使首帧就占好位。
 * 实测：≥900px 120px / 641-899px 249px / ≤640px 265px */
#dashKpi { min-height: 120px; }
@media (max-width: 899px) { #dashKpi { min-height: 250px; } }
@media (max-width: 640px) { #dashKpi { min-height: 266px; } }

/* ============================================================
 * plog 快速翻页 + 加载骨架（2026-10-18 流畅度专项）
 *   .plog-jump / .plog-jump-input：首页·跳页·末页控件（由 plog.js 注入）
 *   .plog-skel-card：替代原来那行裸露的「加载采集库…」文案
 * ============================================================ */
.plog-jump { display: inline-flex; align-items: center; gap: 6px; }
/* 覆盖 .plog-input 的 flex:1 / min-width:200px，跳页框只能是小输入框 */
.plog-jump .plog-jump-input {
  flex: 0 0 auto; min-width: 0; width: 76px; height: 32px;
  padding: 0 8px; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.plog-jump .plog-jump-input::-webkit-outer-spin-button,
.plog-jump .plog-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 640px) {
  .plog-pager { flex-wrap: wrap; }
  .plog-jump .plog-jump-input { width: 64px; }
}

.plog-skel-card { pointer-events: none; }
.plog-sk-line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #F2EDEE 25%, #F8F5F6 37%, #F2EDEE 63%);
  background-size: 400% 100%;
  animation: plogSk 1.2s ease-in-out infinite;
}
.plog-sk-line.w30 { width: 30%; }
.plog-sk-line.w92 { width: 92%; }
.plog-sk-line.w64 { width: 64%; }
@keyframes plogSk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .plog-sk-line { animation: none; } }

/* 发布日历进入动画（2026-10-18 流畅度专项）
 * .page.active 全局用的是 pageIn（translateY(16px) + scale(.995)）。
 * 这套缩放在文字页几乎看不出来，但日历是 7 列等宽网格 + 4px 细间距，
 * 整块 scale 会把「格宽/间距」一起缩放，读起来就是「间距先放大再缩小」。
 * 这里只给日历页保留淡入，不做缩放与位移。 */
#page-calendar.page.active { animation: pageInCal .32s var(--ease-out-expo); }
@keyframes pageInCal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #page-calendar.page.active { animation: none; } }

/* 发布日历：窄屏被「所有 -grid 一律单列」的通用规则误伤（2026-10-18 全站走查发现）
 * mobile.css 里有一条兜底：
 *   main [class*="-grid"]:not(.stat-grid):not(.sheet-grid)... { grid-template-columns: 1fr !important; }
 * .cal-grid 也命中 [class*="-grid"]，于是日历在 375/768 下被压成一列 ——
 * 实测 375px 时 #calGrid 变成 317px 宽 × 2417px 高，一周 7 天竖着排，
 * 日期格宽 317px、完全没法当日历用（桌面不受影响，所以一直没被发现）。
 * 这里用更高特异性（两个 id + 一个 class）把它还原成 7 列。
 * 窄屏同时收紧内边距与字号，保证 375px 下每格仍有 ~42px 可点。 */
@media (max-width: 900px) {
  #page-calendar #calGrid.cal-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 3px;
  }
  #page-calendar .cal-cell {
    padding: 4px 3px;
    min-height: 48px;
    border-radius: 8px;
  }
  #page-calendar .cal-date { font-size: 11px; }
  #page-calendar .cal-dot { right: 4px; top: 4px; width: 5px; height: 5px; }
  #page-calendar .cal-dow { font-size: 11px; padding: 4px 0; }
}