/* ============================================================
   MarkZen - Global Styles
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================
   PERFORMANCE OPTIMIZATION (性能优化)
   ============================================ */

/* 窗口失焦时降低渲染优先级 */
body.window-blurred .md-textarea {
  opacity: 0.9;
  transition: opacity 0.3s;
}

/* 懒加载提示动画 */
@keyframes lazyLoadPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 大文档优化模式 */
body.markzen-large-doc .preview-article {
  transition: none; /* 禁用过渡效果 */
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 暗色主题（默认） */
:root, :root.dark-theme {
  --bg-base: #0f1117;
  --bg-panel: #161b27;
  --bg-panel2: #1c2333;
  --bg-hover: #252d40;
  --border: #2a3347;
  --border-light: #3a4560;
  --text-primary: #e8edf5;
  --text-secondary: #8b95a8;
  --text-muted: #5a6478;
  --accent: #6366f1;
  --accent-hover: #7c7ff5;
  --accent-soft: rgba(99,102,241,0.12);
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-md: 0 4px 20px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-content: 'Noto Serif SC', Georgia, 'SimSun', serif;
  --font-code: 'JetBrains Mono', 'Fira Code', monospace;
  --transition: 0.2s ease;
  --nav-h: 54px;
}

/* 亮色主题 */
:root.light-theme {
  --bg-base: #f5f7fa;
  --bg-panel: #ffffff;
  --bg-panel2: #f0f2f5;
  --bg-hover: #e8ebf0;
  --border: #dde1e7;
  --border-light: #c8cdd6;
  --text-primary: #1a1d24;
  --text-secondary: #5a6478;
  --text-muted: #8b95a8;
  --accent: #6366f1;
  --accent-hover: #5254e0;
  --accent-soft: rgba(99,102,241,0.1);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
}

html { font-size: 14px; }
body {
  font-family: var(--font-ui);
  background: var(--bg-base);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ===== TOP NAV ===== */
.top-nav {
  height: var(--nav-h);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
  z-index: 100;
}

/* 一键复制按钮（在nav-actions外） */
#btnCopyResult {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
#btnCopyResult:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}
.logo-icon { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; display: block; }
.logo-text {
  font-size: 17px;
  font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-badge {
  font-size: 10px;
  padding: 2px 7px;
  background: var(--accent-soft);
  color: #a78bfa;
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 99px;
  font-weight: 500;
}
.qrcode-link {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  text-decoration: none;
}
.nav-qrcode {
  height: 28px;
  width: auto;
  border-radius: 4px;
}

/* 公众号悬浮推广 - 右下角 */
.promo-floating {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: promoPulse 2s ease-in-out infinite;
}

@keyframes promoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes promoGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(99,102,241,0.3), 0 0 0 0 rgba(99,102,241,0.4); }
  50% { box-shadow: 0 4px 30px rgba(99,102,241,0.5), 0 0 0 8px rgba(99,102,241,0); }
}

.promo-card {
  background: linear-gradient(145deg, #1e1e2e, #2a2a3e);
  border: 2px solid rgba(99,102,241,0.6);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 30px rgba(99,102,241,0.4);
  animation: promoGlow 2s ease-in-out infinite;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
}

.promo-card:hover {
  transform: scale(1.05);
  border-color: var(--accent);
  box-shadow: 0 8px 40px rgba(99,102,241,0.6);
}

.promo-qrcode {
  width: 100px;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
}

.promo-text {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(99,102,241,0.8);
}

.promo-subtext {
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  text-align: center;
}

/* 悬浮头部提示 */
.promo-arrow {
  background: var(--accent);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  animation: promoBounce 1s ease-in-out infinite;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(99,102,241,0.5);
}

@keyframes promoBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* 关闭按钮 */
.promo-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #ef4444;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  z-index: 10;
  cursor: pointer;
  opacity: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.promo-card:hover .promo-close {
  opacity: 1;
}

/* 公众号大图预览 */
.promo-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.promo-preview-overlay.active {
  opacity: 1;
  visibility: visible;
}
.promo-preview-content {
  position: relative;
  background: #1a1a2e;
  border: 3px solid rgba(99,102,241,0.6);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 0 60px rgba(99,102,241,0.5);
  animation: previewPop 0.3s ease;
}
@keyframes previewPop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.promo-preview-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  background: #ef4444;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(239,68,68,0.4);
  transition: transform 0.2s;
}
.promo-preview-close:hover {
  transform: scale(1.1);
}
.promo-preview-img {
  width: 280px;
  height: auto;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.2);
}
.promo-preview-text {
  font-size: 14px;
  color: #a78bfa;
  font-weight: 600;
  text-align: center;
}

/* 客服悬浮图标 */
.service-floating {
  position: fixed;
  bottom: 100px;
  right: 24px;
  z-index: 9998;
  cursor: pointer;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  padding: 6px 12px 6px 6px;
  border-radius: 25px;
  box-shadow: 0 4px 20px rgba(99,102,241,0.4);
}
.service-floating:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(99,102,241,0.5);
}
.service-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.3);
}
.service-label {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* 客服弹窗 */
.service-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.service-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}
.service-popup-content {
  position: relative;
  background: #1a1a2e;
  border: 2px solid rgba(99,102,241,0.6);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 0 60px rgba(99,102,241,0.5);
  animation: previewPop 0.3s ease;
  max-width: 90vw;
}
.service-popup-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  background: #ef4444;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(239,68,68,0.4);
  transition: transform 0.2s;
}
.service-popup-close:hover {
  transform: scale(1.1);
}
.service-popup-img {
  width: auto;
  max-width: 280px;
  height: auto;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.2);
}

.nav-links {
  display: flex;
  gap: 4px;
}
.nav-btn {
  text-decoration: none;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.nav-btn:hover, .nav-btn.active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-ui);
}
.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-light);
}

/* 主题切换按钮 */
.theme-toggle {
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle .icon-sun { display: none; }
:root.light-theme .theme-toggle .icon-moon { display: none; }
:root.light-theme .theme-toggle .icon-sun { display: block; }
.theme-toggle:hover {
  transform: scale(1.05);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  font-family: var(--font-ui);
  box-shadow: 0 2px 12px rgba(99,102,241,0.4);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-hover), #9d6ef5);
  box-shadow: 0 4px 20px rgba(99,102,241,0.5);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* ===== WORKSPACE ===== */
.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.4fr 260px;
  overflow: hidden;
  min-height: 0; /* 关键：允许grid在flex容器中正确收缩 */
}

/* ===== PANEL SHARED ===== */
.panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
  min-height: 0; /* 关键：允许flex子项收缩，使内部滚动生效 */
  height: 100%;
}
.panel:last-child { border-right: none; }

.panel-header {
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-panel2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.word-count {
  font-size: 11px;
  color: var(--text-muted);
}

/* ===== EDITOR TOOLBAR ===== */
.editor-toolbar {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  gap: 2px;
  background: var(--bg-panel2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
  position: relative;
}
.tb-btn {
  min-width: 30px;
  width: auto;
  padding: 0 6px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  font-family: var(--font-ui);
  position: relative;
  overflow: hidden;
}
.tb-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.tb-btn:active { background: var(--accent-soft); color: var(--accent); transform: scale(0.95); }
.tb-btn-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.tb-btn-text { font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ===== 工具搜索框 ===== */
.tb-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.tb-search-input {
  height: 26px;
  width: 120px;
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  padding: 0 28px 0 8px;
  font-family: var(--font-ui);
  outline: none;
  transition: all 0.2s;
}
.tb-search-input:focus {
  width: 160px;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.tb-search-input::placeholder {
  color: var(--text-muted);
}
.tb-search-clear {
  position: absolute;
  right: 6px;
  width: 16px;
  height: 16px;
  border: none;
  background: var(--text-muted);
  color: var(--bg-panel);
  border-radius: 50%;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tb-search-clear:hover {
  background: var(--accent);
}

/* 搜索高亮 */
.tb-btn.search-highlight {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* ===== 段落格式下拉 ===== */
.tb-format-wrap {
  display: flex;
  align-items: center;
}
.tb-format-select {
  height: 26px;
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  padding: 0 8px;
  cursor: pointer;
  font-family: var(--font-ui);
  outline: none;
  min-width: 80px;
}
.tb-format-select:hover { border-color: var(--accent); }
.tb-format-select option { background: var(--bg-panel2); }

/* ===== 模板按钮 ===== */
.tb-btn-tpl {
  width: auto;
  min-width: 62px;
  padding: 0 8px;
  gap: 4px;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  color: #10b981;
  border-radius: 20px;
}
.tb-btn-tpl:hover {
  background: rgba(16,185,129,0.2);
  color: #059669;
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.15);
  transform: translateY(-1px);
}
.tb-btn-tpl:active {
  transform: translateY(0) scale(0.97);
}

/* ===== 智能格式化按钮 ===== */
.tb-btn-smart {
  width: auto;
  min-width: 62px;
  padding: 0 8px;
  gap: 4px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  color: #f59e0b;
  border-radius: 20px;
}
.tb-btn-smart:hover {
  background: rgba(245,158,11,0.2);
  color: #d97706;
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.15);
  transform: translateY(-1px);
}
.tb-btn-smart:active {
  transform: translateY(0) scale(0.97);
}

/* ===== 素材库按钮 - 更醒目 ===== */
.tb-btn-material {
  width: auto;
  min-width: 70px;
  padding: 0 10px;
  gap: 4px;
  border: 1.5px dashed var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 20px;
  animation: material-pulse 2s ease-in-out infinite;
}
.tb-btn-material:hover {
  background: rgba(99,102,241,0.2);
  border-style: solid;
  color: var(--accent-hover);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.15), 0 2px 8px rgba(99,102,241,0.2);
  transform: translateY(-1px);
  animation: none;
}
.tb-btn-material:active {
  transform: translateY(0) scale(0.97);
}
@keyframes material-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(99,102,241,0); }
}




/* ===== 封面按钮 ===== */


.tb-btn-cover {
  width: auto;
  min-width: 70px;
  padding: 0 8px;
  gap: 4px;
  border: 1.5px solid rgba(139,92,246,0.3);
  color: #8b5cf6;
  background: rgba(139,92,246,0.08);
  border-radius: 20px;
}
.tb-btn-cover:hover {
  background: rgba(139,92,246,0.18);
  border-color: #8b5cf6;
  color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(139,92,246,0.15), 0 2px 8px rgba(139,92,246,0.2);
  transform: translateY(-1px);
}
.tb-btn-cover:active {
  transform: translateY(0) scale(0.97);
}

/* 所有 icon+text 按钮统一 icon 尺寸 */
.tb-btn-tpl .tb-btn-icon,
.tb-btn-smart .tb-btn-icon,
.tb-btn-material .tb-btn-icon,
.tb-btn-cover .tb-btn-icon,
.tb-btn-check .tb-btn-icon {
  font-size: 14px;
  line-height: 1;
}
.tb-btn-tpl .tb-btn-text,
.tb-btn-smart .tb-btn-text,
.tb-btn-material .tb-btn-text,
.tb-btn-cover .tb-btn-text,
.tb-btn-check .tb-btn-text {
  font-size: 12px;
  font-weight: 600;
}

/* ===== 检测按钮 ===== */
.tb-btn-check {
  width: auto;
  min-width: 62px;
  padding: 0 8px;
  gap: 4px;
  border: 1.5px solid rgba(16,185,129,0.3);
  color: #10b981;
  background: rgba(16,185,129,0.08);
  border-radius: 20px;
}
.tb-btn-check:hover {
  background: rgba(16,185,129,0.18);
  border-color: #10b981;
  color: #059669;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.15), 0 2px 8px rgba(16,185,129,0.2);
  transform: translateY(-1px);
}
.tb-btn-check:active {
  transform: translateY(0) scale(0.97);
}

/* ===== 模板弹出层（遮罩） ===== */
.tpl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  animation: fade-in 0.15s ease;
}
.tpl-overlay.hidden { display: none; }
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== 模板弹出卡片 ===== */
.tpl-popup {
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  padding: 18px 20px;
  width: 560px;
  max-width: 95vw;
  animation: popup-rise 0.2s ease;
}
@keyframes popup-rise {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tpl-popup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.tpl-popup-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.tpl-popup-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  flex: 1;
}
.tpl-popup-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  font-family: var(--font-ui);
}
.tpl-popup-close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ===== 模板卡片网格 ===== */
.tpl-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tpl-card {
  background: var(--bg-hover);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tpl-card:hover {
  border-color: #10b981;
  background: rgba(16,185,129,0.07);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(16,185,129,0.15);
}
.tpl-card-icon { font-size: 20px; line-height: 1; }
.tpl-card-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.tpl-card-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* 模板 Tab 切换 */
.tpl-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.tpl-tab {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 5px 12px;
  font-size: 12.5px;
  font-family: var(--font-ui);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.tpl-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.tpl-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* 模板面板容器 */
.tpl-panels { }
.tpl-panel { display: none; }
.tpl-panel.active { display: block; }

/* 开头/结尾文字模板卡片 */
.tpl-cards-text { grid-template-columns: repeat(2, 1fr); }
.tpl-text-card {
  background: var(--bg-hover);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tpl-text-card:hover {
  border-color: #10b981;
  background: rgba(16,185,129,0.07);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(16,185,129,0.15);
}
.tpl-text-icon { font-size: 18px; line-height: 1; }
.tpl-text-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.tpl-text-preview { font-size: 11px; color: var(--text-muted); line-height: 1.4; font-style: italic; }

.tb-divider {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px;
}

/* ===== 粘贴检测提示条 ===== */
.paste-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(245,158,11,0.15), rgba(245,158,11,0.08));
  border-bottom: 1px solid rgba(245,158,11,0.3);
  flex-shrink: 0;
  animation: hint-slide-in 0.25s ease;
}
.paste-hint.hidden { display: none; }
@keyframes hint-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.paste-hint-text {
  font-size: 12.5px;
  color: #d97706;
  flex: 1;
}
.paste-hint-btn {
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-ui);
}
.paste-hint-btn:hover { background: #d97706; }
.paste-hint-dismiss {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
}
.paste-hint-dismiss:hover { color: var(--text-secondary); }

/* ===== MARKDOWN TEXTAREA ===== */
.md-textarea {
  flex: 1;
  min-height: 0; /* 允许flex子项收缩 */
  width: 100%;
  padding: 20px 22px;
  background: var(--bg-panel);
  color: var(--text-primary);
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font-code);
  font-size: 13.5px;
  line-height: 1.8;
  tab-size: 2;
  overflow-y: auto;
}
.md-textarea::placeholder { color: var(--text-muted); }
.md-textarea:focus { background: #131620; }

/* ============================================
   编辑器优化：行号、语法高亮、折叠
   ============================================ */

/* 编辑器包装器 */
.editor-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* 行号区域 */
.line-numbers {
  width: 48px;
  min-width: 48px;
  background: var(--bg-base);
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-code);
  font-size: 13px;
  line-height: 1.8;
  text-align: right;
  padding: 20px 8px 20px 0;
  overflow: hidden;
  user-select: none;
  flex-shrink: 0;
}
.line-numbers .line-num {
  display: block;
  height: calc(13px * 1.8);
  padding-right: 4px;
  transition: color 0.15s;
}
.line-numbers .line-num.active {
  color: var(--accent);
  font-weight: 600;
}
.line-numbers .line-num.folded {
  color: var(--text-muted);
  opacity: 0.5;
}

/* 语法高亮层 - 覆盖在 textarea 之上 */
.syntax-highlight-layer {
  position: absolute;
  top: 0;
  left: 48px;
  right: 0;
  bottom: 0;
  padding: 20px 22px;
  font-family: var(--font-code);
  font-size: 13.5px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-wrap: break-word;
  pointer-events: none;
  overflow-y: auto;
  color: transparent;
  z-index: 1;
}

/* 语法高亮样式 */
.syntax-highlight-layer .sh-h1 {
  color: var(--accent);
  font-weight: 700;
}
.syntax-highlight-layer .sh-h2 {
  color: #a78bfa;
  font-weight: 600;
}
.syntax-highlight-layer .sh-h3 {
  color: #c4b5fd;
  font-weight: 600;
}
.syntax-highlight-layer .sh-h4,
.syntax-highlight-layer .sh-h5,
.syntax-highlight-layer .sh-h6 {
  color: #d8b4fe;
}
.syntax-highlight-layer .sh-bold {
  color: #fbbf24;
  font-weight: 600;
}
.syntax-highlight-layer .sh-italic {
  color: #f472b6;
  font-style: italic;
}
.syntax-highlight-layer .sh-link {
  color: #34d399;
}
.syntax-highlight-layer .sh-code {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.1);
  border-radius: 3px;
  padding: 0 4px;
}
.syntax-highlight-layer .sh-codeblock {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.08);
  border-left: 3px solid #fb923c;
  padding-left: 8px;
  display: block;
}
.syntax-highlight-layer .sh-quote {
  color: #60a5fa;
}
.syntax-highlight-layer .sh-list {
  color: #f87171;
}
.syntax-highlight-layer .sh-strikethrough {
  color: var(--text-muted);
  text-decoration: line-through;
}
.syntax-highlight-layer .sh-image {
  color: #2dd4bf;
}

/* 折叠栏 */
.editor-fold-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-base);
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.editor-fold-bar.hidden {
  display: none;
}
.fold-hint {
  color: var(--text-secondary);
}
.fold-btns {
  display: flex;
  gap: 8px;
}
.fold-btn {
  padding: 4px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.fold-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* 编辑器包装器（原有） */
.editor-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  transition: outline 0.2s ease;
}

/* 预览区图片样式 - 适配微信 */
.preview-article img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 16px auto;
  border-radius: 8px;
}

/* ===== PREVIEW ===== */
.panel-preview { background: #1a1e2e; }

.preview-controls { display: flex; gap: 6px; align-items: center; }

/* 滚动同步开关 */
.sync-scroll-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  user-select: none;
}
.sync-scroll-toggle:hover {
  background: var(--bg-hover);
}
.sync-scroll-toggle input {
  display: none;
}
.toggle-slider {
  position: relative;
  width: 32px;
  height: 16px;
  background: var(--border);
  border-radius: 8px;
  transition: all 0.25s ease;
}
.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.25s ease;
}
.sync-scroll-toggle input:checked + .toggle-slider {
  background: var(--accent);
}
.sync-scroll-toggle input:checked + .toggle-slider::after {
  transform: translateX(16px);
}
.toggle-label {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-ui);
  white-space: nowrap;
}
.sync-scroll-toggle:has(input:checked) .toggle-label {
  color: var(--accent);
}

.size-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
}
.size-btn:hover, .size-btn.active {
  background: var(--bg-hover);
  border-color: var(--border-light);
  color: var(--text-primary);
}

.preview-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 16px;
  background: #1a1e2e;
  min-height: 0; /* 关键：flex子项滚动必须设置 */
  transition: background 0.3s ease;
}


/* 预览区手机壳样式 */
.preview-phone-frame {
  background: #fff;
  width: 600px;
  max-width: 100%;
  min-height: 400px; /* 最小高度保证美观，不强制撑满 */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: visible; /* 让内容自然撑高，由wrapper滚动 */
  transition: width 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

/* 手机壳顶部状态栏 - 已删除 */
/* 手机壳刘海/摄像头区域 - 已删除 */

/* 缩放控制 */
.preview-zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
}
.preview-zoom-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}
.preview-zoom-btn:hover {
  background: var(--accent);
  color: #fff;
}
.preview-zoom-level {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 36px;
  text-align: center;
}

/* 沉浸模式 */
.preview-immersive {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100% !important;
  padding: 0 !important;
  z-index: 1000;
  background: #1a1e2e;
  display: flex;
  flex-direction: column;
}
.preview-immersive .preview-phone-frame {
  flex: 1;
  max-width: 100%;
  height: 100%;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}
.preview-immersive .panel-header {
  display: none;
}
.preview-immersive .preview-quick-bar {
  display: none;
}

/* 沉浸模式退出按钮 */
.preview-exit-immersive {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 1001;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.preview-immersive ~ .preview-exit-immersive {
  display: flex;
}
.preview-exit-immersive:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.1);
}

/* 阅读模式 */
.reading-mode .panel-editor,
.reading-mode .panel-controls,
.reading-mode .top-nav,
.reading-mode .mobile-tab-bar,
.reading-mode .promo-floating,
.reading-mode .preview-quick-bar {
  display: none !important;
}
.reading-mode .workspace {
  display: flex;
  justify-content: center;
}
.reading-mode .panel-preview {
  flex: 0 0 100%;
  max-width: 720px;
  margin: 0 auto;
}
.reading-mode .panel-header {
  display: none;
}
.reading-mode .preview-wrapper {
  padding: 40px 20px;
}
.reading-mode .preview-phone-frame {
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
}
.reading-mode .preview-exit-immersive {
  display: flex;
  top: auto;
  bottom: 30px;
}

/* 阅读模式退出按钮（顶部） */
.reading-mode .preview-exit-immersive {
  position: fixed;
  top: 20px;
  right: 20px;
  bottom: auto;
}

/* 阅读模式提示条 */
.reading-mode-hint {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--accent);
  color: #fff;
  text-align: center;
  padding: 8px;
  font-size: 12px;
  z-index: 1002;
  display: none;
}
body.reading-mode .reading-mode-hint {
  display: block;
}

.preview-article {
  padding: 32px 28px 40px;
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  font-family: 'Noto Serif SC', Georgia, serif;
  word-break: break-word;
}

/* 预览区基础斜体和加粗样式 */
.preview-article em,
.preview-article i {
  font-style: italic !important;
}
.preview-article strong,
.preview-article b {
  font-weight: bold !important;
}

/* ===== PREVIEW QUICK BAR (预览区悬浮快捷控制栏) ===== */
.preview-quick-bar {
  position: relative;
  background: rgba(22, 27, 39, 0.95);
  border-bottom: 1px solid var(--border);
  padding: 0;
  flex-shrink: 0;
  z-index: 10;
  transition: all 0.25s ease;
}

/* 折叠按钮行 */
.pqb-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 14px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}
.pqb-toggle:hover { color: var(--text-primary); }
.pqb-toggle svg { flex-shrink: 0; }
.pqb-toggle-label { font-weight: 500; letter-spacing: 0.02em; }
/* 折叠态小箭头 */
.pqb-toggle::after {
  content: '▾';
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.2s;
}
.preview-quick-bar.collapsed .pqb-toggle::after {
  transform: rotate(-90deg);
}

/* 控制内容区 */
.pqb-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 4px;
  padding: 6px 14px 10px;
  transition: all 0.25s ease;
  overflow: hidden;
}
.preview-quick-bar.collapsed .pqb-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

/* 分隔线 */
.pqb-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 4px;
}

/* 分组 */
.pqb-group {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.pqb-group-inline { gap: 4px; }

.pqb-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  min-width: 22px;
}

/* 主题点阵 */
.pqb-theme-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  max-width: 220px;
}
.pqb-theme-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  flex-shrink: 0;
  position: relative;
}
.pqb-theme-dot:hover { transform: scale(1.2); }
.pqb-theme-dot.active {
  border-color: #fff;
  transform: scale(1.2);
}
.pqb-theme-dot[title]::after {
  content: attr(title);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
}
.pqb-theme-dot:hover::after { opacity: 1; }

/* "全部"按钮 */
.pqb-more-btn {
  padding: 2px 8px;
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  border-radius: 99px;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: var(--font-ui);
}
.pqb-more-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* +/- 步进按钮 */
.pqb-step-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: var(--font-ui);
  flex-shrink: 0;
}
.pqb-step-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.pqb-step-btn:active { transform: scale(0.9); }

/* 数值显示 */
.pqb-val {
  min-width: 28px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 字体切换按钮组 */
.pqb-font-btns {
  display: flex;
  gap: 3px;
}
.pqb-font-btn {
  padding: 2px 9px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-ui);
  white-space: nowrap;
}
.pqb-font-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.pqb-font-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* 移动端下预览区快捷栏紧凑布局 */
@media (max-width: 767px) {
  .preview-quick-bar {
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .pqb-body {
    gap: 6px 3px;
    padding: 5px 10px 8px;
  }
  .pqb-theme-row {
    max-width: 160px;
  }
  .pqb-sep {
    height: 18px;
    margin: 0 2px;
  }
}

/* ===== CONTROLS ===== */
.panel-controls { background: var(--bg-panel); overflow: hidden; }
.controls-body {
  flex: 1;
  min-height: 0; /* 允许flex子项收缩 */
  overflow-y: auto;
  padding: 12px;
}

.ctrl-section { margin-bottom: 18px; }
.ctrl-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}

/* Theme Grid */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.theme-card {
  position: relative;
  background: var(--bg-panel2);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
  overflow: hidden;
}
.theme-card:hover { 
  border-color: var(--border-light); 
  background: var(--bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.theme-card.active { 
  border-color: var(--accent); 
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.theme-card.active::before {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* 热门标识 */
.theme-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
  font-size: 9px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.5px;
  z-index: 10;
}

/* 主题预览区 */
.theme-preview {
  padding: 14px 12px;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.tp-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}
.tp-text {
  font-size: 9px;
  opacity: 0.7;
  line-height: 1.4;
}
.tp-quote {
  font-size: 8px;
  opacity: 0.6;
  padding-left: 6px;
  border-left-width: 2px;
  border-left-style: solid;
  margin-top: 2px;
}

/* 主题信息区 */
.theme-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
}
.theme-name {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 600;
}
.theme-tag {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--bg-panel2);
  border-radius: 99px;
  color: var(--text-muted);
}
.theme-card.active .theme-name { color: var(--accent); }

/* Range Inputs */
.range-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--accent-soft);
  transition: var(--transition);
}
input[type=range]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.range-value {
  font-size: 11px;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: right;
}

/* Select */
.ctrl-select {
  width: 100%;
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 12px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: var(--transition);
}
.ctrl-select:hover { border-color: var(--border-light); }
.ctrl-select:focus { border-color: var(--accent); }
.ctrl-select option { background: var(--bg-panel2); }

/* Divider */
.ctrl-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0 18px;
}

/* Action Buttons */
.action-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.action-btn {
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-ui);
}
.action-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); }
.action-btn.primary {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.action-btn.primary:hover {
  background: linear-gradient(135deg, var(--accent-hover), #9d6ef5);
  box-shadow: 0 4px 16px rgba(99,102,241,0.4);
  transform: translateY(-1px);
}

/* Stats */
.stats-box {
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.stat-item { text-align: center; }
.stat-label {
  font-size: 10px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 3px;
}
.stat-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ===== TOAST ===== */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e2537;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  padding: 10px 20px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 9999;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.success { border-color: rgba(34,197,94,0.4); color: var(--success); }
.toast.error { border-color: rgba(239,68,68,0.4); color: var(--danger); }

/* ===== 新手引导 ===== */
.guide-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.guide-overlay.hidden {
  display: none !important;
}
.guide-container {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 20px;
  padding: 40px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 25px 80px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  animation: guideSlideIn 0.4s ease;
}
@keyframes guideSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.guide-header {
  text-align: center;
  margin-bottom: 32px;
}
.guide-icon {
  font-size: 56px;
  margin-bottom: 16px;
  animation: guideBounce 1s ease infinite;
}
@keyframes guideBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.guide-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.guide-subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}
.guide-steps {
  margin-bottom: 32px;
}
.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}
.guide-step:last-child {
  margin-bottom: 0;
}
.step-number {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}
.step-content {
  flex: 1;
}
.step-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.step-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}
.guide-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.guide-btn {
  width: 100%;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.guide-btn.primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}
.guide-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}
.guide-btn-link {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.guide-btn-link:hover {
  color: rgba(255,255,255,0.8);
}
.guide-skip {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 8px;
}
.guide-skip:hover {
  color: rgba(255,255,255,0.5);
}

/* ===== PREVIEW ARTICLE STYLES (light bg) ===== */

/* -- Default Theme: Modern -- */
.theme-modern .preview-article h1 {
  font-size: 26px; font-weight: 700; color: #6366f1;
  margin: 0 0 8px; padding-bottom: 12px;
  border-bottom: 3px solid #6366f1;
}
.theme-modern .preview-article h2 {
  font-size: 20px; font-weight: 700; color: #2d3a5a;
  margin: 28px 0 12px;
  padding-left: 12px;
  border-left: 4px solid #6366f1;
}
.theme-modern .preview-article h3 {
  font-size: 17px; font-weight: 600; color: #3d4e72;
  margin: 20px 0 8px;
}
.theme-modern .preview-article p { margin-bottom: 16px; color: #444; }
.theme-modern .preview-article strong { color: #1a1a2e; }
.theme-modern .preview-article em { color: #6366f1; }
.theme-modern .preview-article a { color: #6366f1; text-decoration: none; border-bottom: 1px dashed #6366f1; }
.theme-modern .preview-article blockquote {
  margin: 20px 0; padding: 14px 20px;
  background: #f5f4ff; border-left: 4px solid #6366f1;
  border-radius: 0 8px 8px 0; color: #555;
  font-style: italic;
}
.theme-modern .preview-article ul, .theme-modern .preview-article ol {
  margin: 12px 0 16px; padding-left: 22px; color: #444;
}
.theme-modern .preview-article li { margin-bottom: 6px; }
.theme-modern .preview-article code {
  background: #f0efff; color: #6366f1;
  padding: 2px 6px; border-radius: 4px;
  font-family: var(--font-code); font-size: 0.88em;
}
.theme-modern .preview-article pre {
  margin: 16px 0; border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.theme-modern .preview-article pre code { background: transparent; color: inherit; padding: 0; }
.theme-modern .preview-article hr {
  margin: 28px 0; border: none;
  height: 1px; background: linear-gradient(to right, transparent, #6366f1, transparent);
}
.theme-modern .preview-article img { max-width: 100%; border-radius: 8px; margin: 12px 0; }

/* -- Elegant Theme (serif/warm) -- */
.theme-elegant .preview-article {
  font-family: 'Noto Serif SC', Georgia, serif;
  color: #3c3128;
}
.theme-elegant .preview-article h1 {
  font-size: 28px; font-weight: 700; color: #2c1a0e;
  text-align: center; margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 2px solid #c8a882;
}
.theme-elegant .preview-article h2 {
  font-size: 20px; font-weight: 700; color: #4a3020;
  margin: 30px 0 14px;
  text-align: center;
  position: relative;
}
.theme-elegant .preview-article h2::after {
  content: '';
  display: block;
  width: 40px; height: 2px;
  background: #c8a882;
  margin: 8px auto 0;
}
.theme-elegant .preview-article h3 { font-size: 17px; font-weight: 600; color: #5a3828; margin: 20px 0 10px; }
.theme-elegant .preview-article p { margin-bottom: 18px; color: #4a3c30; line-height: 1.9; }
.theme-elegant .preview-article strong { color: #2c1a0e; }
.theme-elegant .preview-article blockquote {
  margin: 22px 0; padding: 16px 22px;
  background: #fdf6ed; border-left: 4px solid #c8a882;
  border-radius: 0 8px 8px 0; color: #6a5040;
  font-style: italic;
}
.theme-elegant .preview-article ul, .theme-elegant .preview-article ol { margin: 12px 0 18px; padding-left: 22px; color: #4a3c30; }
.theme-elegant .preview-article li { margin-bottom: 8px; }
.theme-elegant .preview-article code { background: #fdf0e0; color: #a05020; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
.theme-elegant .preview-article pre { margin: 16px 0; border-radius: 10px; overflow: hidden; }
.theme-elegant .preview-article pre code { background: transparent; color: inherit; padding: 0; }
.theme-elegant .preview-article hr { margin: 28px 0; border: none; height: 1px; background: linear-gradient(to right, transparent, #c8a882, transparent); }
.theme-elegant .preview-article a { color: #a05020; border-bottom: 1px dashed #c8a882; text-decoration: none; }

/* -- Tech Dark (dark preview) -- */
.theme-tech .preview-phone-frame { background: #1a1e2e; }
.theme-tech .preview-article {
  color: #c9d1e0;
  font-family: 'Inter', sans-serif;
}
.theme-tech .preview-article h1 {
  font-size: 26px; font-weight: 700;
  color: #c9d1e0;
  margin: 0 0 8px; padding-bottom: 14px;
  border-bottom: 1px solid #2a3347;
}
.theme-tech .preview-article h2 {
  font-size: 19px; font-weight: 700; color: #6ee7f7;
  margin: 28px 0 12px; padding: 6px 14px;
  background: rgba(110,231,247,0.07); border-radius: 6px;
}
.theme-tech .preview-article h3 { font-size: 16px; font-weight: 600; color: #a0c8f5; margin: 20px 0 8px; }
.theme-tech .preview-article p { color: #b0bdd0; margin-bottom: 14px; }
.theme-tech .preview-article strong { color: #e0eaf8; }
.theme-tech .preview-article blockquote {
  margin: 18px 0; padding: 12px 18px;
  background: rgba(99,102,241,0.1); border-left: 3px solid #6366f1;
  border-radius: 0 6px 6px 0; color: #8899bb;
}
.theme-tech .preview-article ul, .theme-tech .preview-article ol { margin: 10px 0 14px; padding-left: 20px; color: #b0bdd0; }
.theme-tech .preview-article code { background: rgba(99,102,241,0.2); color: #a78bfa; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
.theme-tech .preview-article pre { margin: 14px 0; border-radius: 10px; overflow: hidden; border: 1px solid #2a3347; }
.theme-tech .preview-article pre code { background: transparent; color: inherit; padding: 0; }
.theme-tech .preview-article hr { margin: 24px 0; border: none; height: 1px; background: #2a3347; }
.theme-tech .preview-article a { color: #6ee7f7; text-decoration: none; }
.theme-tech .preview-article img { max-width: 100%; border-radius: 8px; margin: 10px 0; border: 1px solid #2a3347; }

/* -- Minimal Clean -- */
.theme-minimal .preview-article {
  font-family: 'Inter', -apple-system, sans-serif;
  color: #555;
}
.theme-minimal .preview-article h1 { font-size: 26px; font-weight: 700; color: #111; margin: 0 0 20px; }
.theme-minimal .preview-article h2 { font-size: 19px; font-weight: 700; color: #222; margin: 26px 0 12px; }
.theme-minimal .preview-article h3 { font-size: 16px; font-weight: 600; color: #333; margin: 18px 0 8px; }
.theme-minimal .preview-article p { color: #555; margin-bottom: 16px; }
.theme-minimal .preview-article strong { color: #111; }
.theme-minimal .preview-article blockquote {
  margin: 18px 0; padding: 12px 18px;
  border-left: 3px solid #ddd; color: #888;
}
.theme-minimal .preview-article ul, .theme-minimal .preview-article ol { margin: 10px 0 14px; padding-left: 20px; color: #555; }
.theme-minimal .preview-article code { background: #f5f5f5; color: #e83e8c; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
.theme-minimal .preview-article pre { margin: 14px 0; border-radius: 8px; overflow: hidden; }
.theme-minimal .preview-article pre code { background: transparent; color: inherit; padding: 0; }
.theme-minimal .preview-article hr { margin: 24px 0; border: none; border-top: 1px solid #eee; }
.theme-minimal .preview-article a { color: #333; }

/* -- Business -- */
.theme-business .preview-article {
  font-family: 'Inter', sans-serif;
  color: #37474f;
}
.theme-business .preview-article h1 {
  font-size: 25px; font-weight: 700; color: #1b3a5c;
  margin: 0 0 8px; padding-bottom: 12px;
  border-bottom: 2px solid #1565c0;
}
.theme-business .preview-article h2 {
  font-size: 18px; font-weight: 700;
  color: #fff; background: #1565c0;
  padding: 8px 14px; border-radius: 4px;
  margin: 26px 0 12px;
}
.theme-business .preview-article h3 { font-size: 16px; font-weight: 600; color: #1565c0; margin: 18px 0 8px; }
.theme-business .preview-article p { color: #37474f; margin-bottom: 14px; }
.theme-business .preview-article strong { color: #1b3a5c; }
.theme-business .preview-article blockquote {
  margin: 18px 0; padding: 12px 18px;
  background: #e3f2fd; border-left: 4px solid #1565c0;
  border-radius: 0 6px 6px 0; color: #2a4e7a;
}
.theme-business .preview-article ul, .theme-business .preview-article ol { margin: 10px 0 14px; padding-left: 22px; color: #37474f; }
.theme-business .preview-article code { background: #e3f2fd; color: #1565c0; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
.theme-business .preview-article pre { margin: 14px 0; border-radius: 8px; overflow: hidden; }
.theme-business .preview-article pre code { background: transparent; color: inherit; padding: 0; }
.theme-business .preview-article hr { margin: 22px 0; border: none; border-top: 1px solid #b3d4f8; }
.theme-business .preview-article a { color: #1565c0; }

/* -- Green Nature -- */
.theme-nature .preview-article {
  font-family: 'Noto Serif SC', serif;
  color: #2d4a32;
}
.theme-nature .preview-article h1 {
  font-size: 26px; font-weight: 700; color: #1a3620;
  margin: 0 0 8px; padding-bottom: 12px;
  border-bottom: 2px solid #4caf50;
}
.theme-nature .preview-article h2 {
  font-size: 19px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  padding: 8px 16px; border-radius: 6px;
  margin: 26px 0 12px;
}
.theme-nature .preview-article h3 { font-size: 16px; font-weight: 600; color: #2e7d32; margin: 18px 0 8px; }
.theme-nature .preview-article p { color: #3a5c3f; margin-bottom: 16px; }
.theme-nature .preview-article strong { color: #1a3620; }
.theme-nature .preview-article blockquote {
  margin: 18px 0; padding: 12px 18px;
  background: #e8f5e9; border-left: 4px solid #4caf50;
  border-radius: 0 8px 8px 0; color: #4a6e50;
}
.theme-nature .preview-article ul, .theme-nature .preview-article ol { margin: 10px 0 14px; padding-left: 22px; color: #3a5c3f; }
.theme-nature .preview-article code { background: #e8f5e9; color: #2e7d32; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
.theme-nature .preview-article pre { margin: 14px 0; border-radius: 10px; overflow: hidden; }
.theme-nature .preview-article pre code { background: transparent; color: inherit; padding: 0; }
.theme-nature .preview-article hr { margin: 24px 0; border: none; border-top: 1px solid #c8e6c9; }
.theme-nature .preview-article a { color: #2e7d32; }

/* -- Sunset Rose -- */
.theme-sunset .preview-article {
  font-family: 'Inter', sans-serif;
  color: #4a2040;
}
.theme-sunset .preview-article h1 {
  font-size: 26px; font-weight: 700;
  color: #880e4f;
  margin: 0 0 8px; padding-bottom: 12px;
  border-bottom: 2px solid #f48fb1;
}
.theme-sunset .preview-article h2 {
  font-size: 19px; font-weight: 700; color: #880e4f;
  margin: 26px 0 12px; padding-left: 14px;
  border-left: 4px solid #e91e63;
}
.theme-sunset .preview-article h3 { font-size: 16px; font-weight: 600; color: #ad1457; margin: 18px 0 8px; }
.theme-sunset .preview-article p { color: #5c3050; margin-bottom: 16px; }
.theme-sunset .preview-article strong { color: #4a1040; }
.theme-sunset .preview-article blockquote {
  margin: 18px 0; padding: 12px 18px;
  background: #fce4ec; border-left: 4px solid #e91e63;
  border-radius: 0 8px 8px 0; color: #7b3060;
}
.theme-sunset .preview-article ul, .theme-sunset .preview-article ol { margin: 10px 0 14px; padding-left: 22px; color: #5c3050; }
.theme-sunset .preview-article code { background: #fce4ec; color: #c2185b; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
.theme-sunset .preview-article pre { margin: 14px 0; border-radius: 10px; overflow: hidden; }
.theme-sunset .preview-article pre code { background: transparent; color: inherit; padding: 0; }
.theme-sunset .preview-article hr { margin: 24px 0; border: none; height: 1px; background: linear-gradient(to right, transparent, #e91e63, transparent); }
.theme-sunset .preview-article a { color: #c2185b; }

/* -- Night Sky -- */
.theme-night .preview-phone-frame { background: #0d1117; }
.theme-night .preview-article { color: #b0c4de; font-family: 'Inter', sans-serif; }
.theme-night .preview-article h1 {
  font-size: 26px; font-weight: 700; color: #fff;
  margin: 0 0 8px; padding-bottom: 12px;
  border-bottom: 1px solid #21262d;
}
.theme-night .preview-article h2 {
  font-size: 19px; font-weight: 700; color: #c9d1d9;
  margin: 26px 0 12px; padding-left: 12px;
  border-left: 3px solid #58a6ff;
}
.theme-night .preview-article h3 { font-size: 16px; font-weight: 600; color: #8b949e; margin: 18px 0 8px; }
.theme-night .preview-article p { color: #8b949e; margin-bottom: 14px; }
.theme-night .preview-article strong { color: #c9d1d9; }
.theme-night .preview-article blockquote {
  margin: 18px 0; padding: 12px 18px;
  background: #161b22; border-left: 3px solid #30363d;
  border-radius: 0 6px 6px 0; color: #8b949e;
}
.theme-night .preview-article ul, .theme-night .preview-article ol { margin: 10px 0 14px; padding-left: 20px; color: #8b949e; }
.theme-night .preview-article code { background: rgba(110,118,129,0.1); color: #ff7b72; padding: 2px 6px; border-radius: 6px; font-size: 0.88em; border: 1px solid rgba(110,118,129,0.4); }
.theme-night .preview-article pre { margin: 14px 0; border-radius: 10px; overflow: hidden; border: 1px solid #30363d; }
.theme-night .preview-article pre code { background: transparent; color: inherit; padding: 0; border: none; }
.theme-night .preview-article hr { margin: 22px 0; border: none; border-top: 1px solid #21262d; }
.theme-night .preview-article a { color: #58a6ff; }

/* -- Ocean Blue -- */
.theme-ocean .preview-article { font-family: 'Inter', sans-serif; color: #1a3a5c; }
.theme-ocean .preview-article h1 {
  font-size: 26px; font-weight: 700; color: #0d2137;
  margin: 0 0 8px; padding-bottom: 12px;
  border-bottom: 3px solid #0288d1;
}
.theme-ocean .preview-article h2 {
  font-size: 19px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #0288d1, #01579b);
  padding: 8px 16px; border-radius: 6px;
  margin: 26px 0 12px;
}
.theme-ocean .preview-article h3 { font-size: 16px; font-weight: 600; color: #0277bd; margin: 18px 0 8px; }
.theme-ocean .preview-article p { color: #2a4e6e; margin-bottom: 16px; }
.theme-ocean .preview-article strong { color: #0d2137; }
.theme-ocean .preview-article blockquote {
  margin: 18px 0; padding: 12px 18px;
  background: #e1f5fe; border-left: 4px solid #0288d1;
  border-radius: 0 8px 8px 0; color: #0a4870;
}
.theme-ocean .preview-article ul, .theme-ocean .preview-article ol { margin: 10px 0 14px; padding-left: 22px; color: #2a4e6e; }
.theme-ocean .preview-article code { background: #e1f5fe; color: #0277bd; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
.theme-ocean .preview-article pre { margin: 14px 0; border-radius: 10px; overflow: hidden; }
.theme-ocean .preview-article pre code { background: transparent; color: inherit; padding: 0; }
.theme-ocean .preview-article hr { margin: 24px 0; border: none; border-top: 1px solid #b3e5fc; }
.theme-ocean .preview-article a { color: #0277bd; }

/* -- Golden Amber -- */
.theme-golden .preview-article { font-family: 'Noto Serif SC', Georgia, serif; color: #5a4a3a; }
.theme-golden .preview-article h1 {
  font-size: 26px; font-weight: 700; color: #8b6914;
  margin: 0 0 12px; padding-bottom: 16px;
  border-bottom: 2px solid #d4a574;
  text-align: center;
}
.theme-golden .preview-article h2 {
  font-size: 20px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #d4a574, #b8956c);
  padding: 10px 20px; border-radius: 8px;
  margin: 28px 0 14px;
}
.theme-golden .preview-article h3 { font-size: 17px; font-weight: 600; color: #8b6914; margin: 20px 0 10px; }
.theme-golden .preview-article p { margin-bottom: 18px; color: #5a4a3a; line-height: 1.9; }
.theme-golden .preview-article strong { color: #6b5214; }
.theme-golden .preview-article blockquote {
  margin: 20px 0; padding: 16px 24px;
  background: #fdf8f0; border: 1px solid #e8d4b8;
  border-left: 4px solid #d4a574;
  border-radius: 0 8px 8px 0; color: #7a5a3a;
  font-style: italic;
}
.theme-golden .preview-article ul, .theme-golden .preview-article ol { margin: 12px 0 18px; padding-left: 24px; color: #5a4a3a; }
.theme-golden .preview-article li { margin-bottom: 8px; }
.theme-golden .preview-article code { background: #fdf0e0; color: #8b6914; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
.theme-golden .preview-article pre { margin: 16px 0; border-radius: 10px; overflow: hidden; }
.theme-golden .preview-article pre code { background: transparent; color: inherit; padding: 0; }
.theme-golden .preview-article hr { margin: 28px 0; border: none; height: 1px; background: linear-gradient(to right, transparent, #d4a574, transparent); }
.theme-golden .preview-article a { color: #8b6914; border-bottom: 1px dashed #d4a574; }

/* -- Mint Green -- */
.theme-mint .preview-article { font-family: 'Inter', sans-serif; color: #374151; }
.theme-mint .preview-article h1 {
  font-size: 26px; font-weight: 700; color: #059669;
  margin: 0 0 12px; padding-bottom: 14px;
  border-bottom: 3px solid #10b981;
}
.theme-mint .preview-article h2 {
  font-size: 20px; font-weight: 700; color: #059669;
  margin: 28px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid #a7f3d0;
}
.theme-mint .preview-article h3 { font-size: 17px; font-weight: 600; color: #047857; margin: 20px 0 10px; }
.theme-mint .preview-article p { margin-bottom: 16px; color: #374151; line-height: 1.85; }
.theme-mint .preview-article strong { color: #047857; }
.theme-mint .preview-article blockquote {
  margin: 18px 0; padding: 14px 20px;
  background: #ecfdf5; border-left: 4px solid #10b981;
  border-radius: 0 8px 8px 0; color: #065f46;
}
.theme-mint .preview-article ul, .theme-mint .preview-article ol { margin: 10px 0 14px; padding-left: 22px; color: #374151; }
.theme-mint .preview-article li { margin-bottom: 6px; }
.theme-mint .preview-article code { background: #d1fae5; color: #047857; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
.theme-mint .preview-article pre { margin: 14px 0; border-radius: 10px; overflow: hidden; }
.theme-mint .preview-article pre code { background: transparent; color: inherit; padding: 0; }
.theme-mint .preview-article hr { margin: 24px 0; border: none; border-top: 2px dashed #a7f3d0; }
.theme-mint .preview-article a { color: #047857; }

/* -- Lavender Purple -- */
.theme-lavender .preview-article { font-family: 'Noto Serif SC', serif; color: #4c1d95; }
.theme-lavender .preview-article h1 {
  font-size: 26px; font-weight: 700;
  color: #6d28d9;
  margin: 0 0 14px;
}
.theme-lavender .preview-article h2 {
  font-size: 20px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  padding: 10px 20px; border-radius: 20px;
  margin: 28px 0 14px;
}
.theme-lavender .preview-article h3 { font-size: 17px; font-weight: 600; color: #6d28d9; margin: 20px 0 10px; }
.theme-lavender .preview-article p { margin-bottom: 16px; color: #4c1d95; line-height: 1.9; }
.theme-lavender .preview-article strong { color: #7c3aed; }
.theme-lavender .preview-article blockquote {
  margin: 20px 0; padding: 16px 24px;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border: 2px solid #c4b5fd;
  border-radius: 16px; color: #5b21b6;
  position: relative;
}
.theme-lavender .preview-article ul, .theme-lavender .preview-article ol { margin: 12px 0 18px; padding-left: 24px; color: #5b21b6; }
.theme-lavender .preview-article li { margin-bottom: 8px; }
.theme-lavender .preview-article code { background: #ede9fe; color: #7c3aed; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
.theme-lavender .preview-article pre { margin: 16px 0; border-radius: 12px; overflow: hidden; }
.theme-lavender .preview-article pre code { background: transparent; color: inherit; padding: 0; }
.theme-lavender .preview-article hr { margin: 28px 0; border: none; height: 2px; background: linear-gradient(to right, transparent, #c4b5fd, transparent); }
.theme-lavender .preview-article a { color: #7c3aed; }

/* ══════════════════════════════════════════════════════════════════
   高级设计师新主题
   ══════════════════════════════════════════════════════════════════ */

/* -- 墨韵 · 中国水墨风 -- */
.theme-ink .preview-phone-frame { background: #fdf5e6; }
.theme-ink .preview-article {
  font-family: 'Noto Serif SC', SimSun, serif;
  color: #3d2b1f;
}
.theme-ink .preview-article h1 {
  font-size: 28px; font-weight: 700; color: #1a0f08;
  text-align: center; margin: 0 0 10px;
  padding: 0 0 18px; border-bottom: 2px solid #c0362c;
  font-family: 'Noto Serif SC', SimSun, serif;
}
.theme-ink .preview-article h2 {
  font-size: 20px; font-weight: 700; color: #c0362c;
  margin: 30px 0 14px; padding: 8px 0 8px 16px;
  border-left: 4px solid #c0362c;
  font-family: 'Noto Serif SC', SimSun, serif;
}
.theme-ink .preview-article h3 {
  font-size: 17px; font-weight: 600; color: #5c3a28;
  margin: 22px 0 10px;
  font-family: 'Noto Serif SC', SimSun, serif;
}
.theme-ink .preview-article p { margin-bottom: 18px; color: #3d2b1f; line-height: 2; }
.theme-ink .preview-article strong { color: #c0362c; font-weight: 700; }
.theme-ink .preview-article blockquote {
  margin: 22px 0; padding: 16px 24px;
  border: 1px solid #d4b896; border-left: 4px solid #c0362c;
  color: #5c3a28; font-style: italic;
}
.theme-ink .preview-article ul, .theme-ink .preview-article ol { margin: 14px 0 20px; padding-left: 26px; color: #3d2b1f; }
.theme-ink .preview-article li { margin-bottom: 8px; }
.theme-ink .preview-article code { background: #f5ede0; color: #8b4513; padding: 2px 6px; font-size: 0.88em; }
.theme-ink .preview-article pre { margin: 16px 0; background: #2d1a0e; }
.theme-ink .preview-article pre code { background: transparent; color: #f5ede0; padding: 16px; display: block; }
.theme-ink .preview-article hr { margin: 32px 0; border: none; border-top: 2px solid #d4b896; }
.theme-ink .preview-article a { color: #c0362c; text-decoration: none; }
.theme-ink .preview-article img { max-width: 100%; margin: 14px 0; }

/* -- 都市红 · 时尚杂志风 -- */
.theme-urban .preview-phone-frame { background: #fff8f5; }
.theme-urban .preview-article {
  font-family: 'Inter', -apple-system, sans-serif;
  color: #2c0808;
}
.theme-urban .preview-article h1 {
  font-size: 27px; font-weight: 800; color: #1a0505;
  text-align: center; margin: 0 0 12px;
  padding: 0 0 16px; border-bottom: 3px solid #c0392b;
  letter-spacing: 2px;
}
.theme-urban .preview-article h2 {
  font-size: 19px; font-weight: 700; color: #fff;
  background: #c0392b; padding: 10px 18px;
  margin: 28px 0 14px;
}
.theme-urban .preview-article h3 {
  font-size: 16px; font-weight: 700; color: #c0392b;
  margin: 22px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid #f5c6c2;
}
.theme-urban .preview-article p { margin-bottom: 16px; color: #2c0808; line-height: 1.9; }
.theme-urban .preview-article strong { color: #1a0505; font-weight: 800; }
.theme-urban .preview-article blockquote {
  margin: 22px 0; padding: 16px 22px;
  border-left: 4px solid #c0392b; background: #fff8f5;
  color: #5c2828; font-style: italic;
}
.theme-urban .preview-article ul, .theme-urban .preview-article ol { margin: 12px 0 18px; padding-left: 24px; color: #2c0808; }
.theme-urban .preview-article li { margin-bottom: 7px; }
.theme-urban .preview-article code { background: #fde8e6; color: #a93226; padding: 2px 6px; font-size: 0.88em; }
.theme-urban .preview-article pre { margin: 16px 0; background: #1a0505; }
.theme-urban .preview-article pre code { background: transparent; color: #ffeaea; padding: 16px; display: block; }
.theme-urban .preview-article hr { margin: 28px 0; border: none; border-top: 1px solid #f5c6c2; }
.theme-urban .preview-article a { color: #c0392b; text-decoration: none; }
.theme-urban .preview-article img { max-width: 100%; margin: 14px 0; }

/* -- 胶片 · 复古报纸风 -- */
.theme-film .preview-phone-frame { background: #fdf6e8; }
.theme-film .preview-article {
  font-family: Georgia, 'Times New Roman', serif;
  color: #2c1a0e;
}
.theme-film .preview-article h1 {
  font-size: 26px; font-weight: 800; color: #1e1108;
  text-align: center; margin: 0 0 10px;
  padding: 0 0 14px; border-bottom: 3px double #b8860b;
}
.theme-film .preview-article h2 {
  font-size: 19px; font-weight: 700; color: #1e1108;
  margin: 28px 0 12px; padding: 6px 14px;
  background: #f0e4c4; border-left: 4px solid #b8860b;
}
.theme-film .preview-article h3 {
  font-size: 16px; font-weight: 700; color: #4a3010;
  margin: 22px 0 8px;
}
.theme-film .preview-article p { margin-bottom: 16px; color: #2c1a0e; line-height: 1.85; }
.theme-film .preview-article strong { color: #1e1108; font-weight: 800; }
.theme-film .preview-article blockquote {
  margin: 20px 0; padding: 14px 20px;
  border: 1px solid #d4b896; border-left: 4px solid #b8860b;
  background: #f8f0d8; color: #5c4020; font-style: italic;
}
.theme-film .preview-article ul, .theme-film .preview-article ol { margin: 10px 0 16px; padding-left: 24px; color: #2c1a0e; }
.theme-film .preview-article li { margin-bottom: 6px; }
.theme-film .preview-article code { background: #f0e4c4; color: #8b6914; padding: 2px 6px; font-size: 0.88em; }
.theme-film .preview-article pre { margin: 16px 0; background: #2c1a0e; }
.theme-film .preview-article pre code { background: transparent; color: #f8f0d8; padding: 16px; display: block; }
.theme-film .preview-article hr { margin: 28px 0; border: none; border-top: 1px solid #d4b896; }
.theme-film .preview-article a { color: #8b6914; text-decoration: none; }
.theme-film .preview-article img { max-width: 100%; margin: 12px 0; }

/* -- 青花 · 古典瓷器风 -- */
.theme-porcelain .preview-phone-frame { background: #e8f4fb; }
.theme-porcelain .preview-article {
  font-family: 'Noto Serif SC', SimSun, serif;
  color: #1a3050;
}
.theme-porcelain .preview-article h1 {
  font-size: 27px; font-weight: 700; color: #0a2040;
  text-align: center; margin: 0 0 10px;
  padding: 0 0 16px; border-bottom: 2px solid #1a4a6e;
  font-family: 'Noto Serif SC', SimSun, serif;
}
.theme-porcelain .preview-article h2 {
  font-size: 19px; font-weight: 700; color: #fff;
  background: #1a4a6e; padding: 10px 18px;
  margin: 28px 0 14px;
}
.theme-porcelain .preview-article h3 {
  font-size: 16px; font-weight: 600; color: #1a4a6e;
  margin: 22px 0 10px;
  font-family: 'Noto Serif SC', SimSun, serif;
}
.theme-porcelain .preview-article p { margin-bottom: 16px; color: #1a3050; line-height: 1.9; }
.theme-porcelain .preview-article strong { color: #0a2040; }
.theme-porcelain .preview-article blockquote {
  margin: 20px 0; padding: 16px 22px;
  border: 1px solid #c5ddf0; border-left: 4px solid #1a4a6e;
  background: #e8f4fb; color: #1a3050; font-style: italic;
}
.theme-porcelain .preview-article ul, .theme-porcelain .preview-article ol { margin: 12px 0 18px; padding-left: 24px; color: #1a3050; }
.theme-porcelain .preview-article li { margin-bottom: 7px; }
.theme-porcelain .preview-article code { background: #c5ddf0; color: #004080; padding: 2px 6px; font-size: 0.88em; }
.theme-porcelain .preview-article pre { margin: 16px 0; background: #0a2040; }
.theme-porcelain .preview-article pre code { background: transparent; color: #e8f4fb; padding: 16px; display: block; }
.theme-porcelain .preview-article hr { margin: 28px 0; border: none; border-top: 2px solid #c5ddf0; }
.theme-porcelain .preview-article a { color: #004080; text-decoration: none; }
.theme-porcelain .preview-article img { max-width: 100%; margin: 14px 0; }

/* -- 极光极 · 北欧极简风 -- */
.theme-nordic .preview-phone-frame { background: #0f1a14; }
.theme-nordic .preview-article {
  font-family: 'Inter', -apple-system, sans-serif;
  color: #e8eee9;
}
.theme-nordic .preview-article h1 {
  font-size: 26px; font-weight: 700; color: #e8eee9;
  text-align: center; margin: 0 0 12px;
  padding: 0 0 18px; border-bottom: 1px solid #3a5a40;
}
.theme-nordic .preview-article h2 {
  font-size: 19px; font-weight: 700; color: #52b788;
  margin: 28px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid #d4e8da;
}
.theme-nordic .preview-article h3 {
  font-size: 16px; font-weight: 600; color: #3a5a40; margin: 22px 0 10px;
}
.theme-nordic .preview-article p { margin-bottom: 16px; color: #e8eee9; line-height: 1.9; }
.theme-nordic .preview-article strong { color: #a8d5b8; font-weight: 700; }
.theme-nordic .preview-article blockquote {
  margin: 20px 0; padding: 14px 20px;
  border: 1px solid #3a5a40; border-left: 4px solid #52b788;
  color: #a8d5b8; font-style: italic;
}
.theme-nordic .preview-article ul, .theme-nordic .preview-article ol { margin: 12px 0 18px; padding-left: 24px; color: #e8eee9; }
.theme-nordic .preview-article li { margin-bottom: 7px; }
.theme-nordic .preview-article code { background: #1e2d20; color: #52b788; padding: 2px 6px; font-size: 0.88em; }
.theme-nordic .preview-article pre { margin: 16px 0; background: #111a14; }
.theme-nordic .preview-article pre code { background: transparent; color: #d4e8da; padding: 16px; display: block; }
.theme-nordic .preview-article hr { margin: 28px 0; border: none; border-top: 1px solid #3a5a40; }
.theme-nordic .preview-article a { color: #52b788; text-decoration: none; }
.theme-nordic .preview-article img { max-width: 100%; margin: 14px 0; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr 1fr 220px; }
}
@media (max-width: 860px) {
  .workspace { grid-template-columns: 1fr 1fr; }
  .panel-controls { display: none; }
}

/* ===== MOBILE (≤ 767px) ===== */
@media (max-width: 767px) {

  /* 底部安全区支持 */
  :root { --mobile-tab-h: 54px; }

  /* body 不再 overflow:hidden，由各 panel 自己滚动 */
  body { overflow: hidden; }

  /* ── 顶部导航精简 ── */
  .top-nav {
    padding: 0 12px;
    gap: 8px;
  }
  .logo-badge { display: none; }
  .nav-qrcode { display: none; }
  .draft-title-bar { flex: 1; min-width: 0; }
  .draft-name-input { font-size: 13px; }

  /* 顶部操作区：只保留关键按钮，其余隐藏 */
  .nav-actions { gap: 4px; }
  .nav-actions .btn-ghost.theme-toggle,
  .nav-actions .btn-ghost#btnCheck { display: flex; }
  .platform-btns { display: none !important; }
  .platform-btn.zhihu,
  .platform-btn.juejin,
  .platform-btn.weibo { display: none !important; }
  .btn-ghost#btnImport,
  .btn-ghost#btnExport { display: none; }

  /* ── 工作区：单列，各面板占满 ── */
  .workspace {
    display: block;
    position: relative;
    overflow: hidden;
    height: calc(100vh - var(--nav-h) - var(--mobile-tab-h));
  }

  /* 每个 panel 全屏覆盖，默认隐藏 */
  .workspace .panel {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    overflow: visible;
  }

  /* 激活的 panel 显示 */
  .workspace .panel.mobile-active {
    display: flex;
  }

  /* ── 编辑区工具栏：横向滚动 ── */
  .editor-toolbar {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 8px;
    gap: 2px;
  }
  .editor-toolbar::-webkit-scrollbar { display: none; }
  .tb-btn { flex-shrink: 0; padding: 5px 8px; font-size: 12px; }
  .tb-divider { flex-shrink: 0; }

  /* 编辑区 textarea 占满剩余空间 */
  .panel-editor { display: flex; flex-direction: column; }
  .md-textarea {
    flex: 1;
    min-height: 0;
    resize: none;
    font-size: 15px;
    line-height: 1.7;
    padding: 12px;
    padding-bottom: calc(12px + var(--mobile-tab-h)) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 预览区自适应宽度 */
  .preview-wrapper {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    padding-bottom: calc(12px + var(--mobile-tab-h)) !important;
  }
  
  /* 确保 preview-phone-frame 也能滚动到底部 */
  .preview-phone-frame {
    padding-bottom: calc(24px + var(--mobile-tab-h)) !important;
  }
  .preview-phone-frame {
    width: 100% !important;
    box-shadow: none;
    border-radius: 0;
  }
  .preview-article {
    padding: 16px 14px 24px;
    font-size: 15px;
  }

  /* 设置面板可滚动 */
  .panel-controls {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .controls-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
  }

  /* ── 底部 Tab Bar ── */
  .mobile-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--mobile-tab-h);
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: stretch;
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 10px;
    cursor: pointer;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-tab-item .tab-icon { font-size: 18px; line-height: 1; }
  .mobile-tab-item.active { color: var(--accent); }
  .mobile-tab-item.active .tab-icon { transform: scale(1.1); }

  /* ── 顶部导航：移动端隐藏多余按钮 ── */
  #btnHotTracks { display: none !important; }
  #btnDraftList { display: none !important; }
  #btnSetQrcode { display: none !important; }
  /* #btnClearEditor 保留可见 */
  #btnImport { display: none !important; }
  #btnExport { display: none !important; }
  .platform-btns { display: none !important; }

  /* 移动端隐藏草稿名称（保留一键复制功能） */
  .draft-title-bar { display: none !important; }



  /* ── 工具栏右侧滚动渐隐提示 ── */
  .panel-editor { position: relative; }
  .editor-toolbar-wrap { position: relative; }
  
  /* 移动端隐藏预览面板的header */
  .panel-preview .panel-header { display: none !important; }
  .editor-toolbar::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    width: 32px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--bg-panel));
    pointer-events: none;
    flex-shrink: 0;
  }

  /* ── 快捷键区域移动端隐藏 ── */
  .shortcuts-box { display: none !important; }

  /* ── 悬浮推广卡片移动端位置修复 ── */
  .promo-floating {
    bottom: calc(var(--mobile-tab-h) + 12px);
    right: 12px;
  }

  /* 桌面端隐藏 Tab Bar */
}

/* 桌面端不显示 Tab Bar */
@media (min-width: 768px) {
  .mobile-tab-bar { display: none; }
}

/* ===== 热门赛道入口按钮 ===== */
.btn-hot-tracks {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  padding: 5px 12px;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(245,158,11,0.15));
  border: 1px solid rgba(239,68,68,0.35);
  color: #fbbf24;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.btn-hot-tracks:hover {
  background: linear-gradient(135deg, rgba(239,68,68,0.28), rgba(245,158,11,0.28));
  border-color: rgba(239,68,68,0.6);
  color: #fcd34d;
  transform: scale(1.03);
}

/* ===== 爆款标题库 ===== */
.headline-lib-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.headline-tab {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.headline-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.headline-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.headline-list {
  max-height: 400px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.headline-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.headline-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}
.headline-item:last-child {
  margin-bottom: 0;
}
.headline-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.headline-content {
  flex: 1;
}
.headline-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 6px;
}
.headline-type {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}
.headline-copy {
  color: var(--accent);
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.2s;
}
.headline-item:hover .headline-copy {
  opacity: 1;
}

/* ===== 数据看板 ===== */
.stats-dashboard {
  text-align: center;
}
.stats-header {
  margin-bottom: 24px;
}
.stats-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.stats-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
}
.stat-card .stat-icon {
  font-size: 28px;
  margin-bottom: 8px;
}
.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}
.stat-card .stat-label {
  font-size: 12px;
  color: var(--text-muted);
}
.stats-tips {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  text-align: left;
}
.tips-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
}
.tips-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.stats-actions {
  text-align: center;
}
.stats-reset-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.stats-reset-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ===== 热门赛道抽屉 ===== */
.tracks-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.tracks-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.tracks-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 460px;
  max-width: 95vw;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-lg);
}
.tracks-drawer.open {
  transform: translateX(0);
}

/* 抽屉头部 */
.tracks-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(245,158,11,0.08));
}
.tracks-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tracks-header-icon {
  font-size: 28px;
  line-height: 1;
}
.tracks-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.tracks-header-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.tracks-drawer-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.tracks-drawer-close:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

/* 赛道 Tab 导航 */
.tracks-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-panel2);
}
.tracks-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tracks-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-light);
}
.tracks-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* 内容区 */
.tracks-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* 赛道简介卡片 */
.track-hero {
  background: var(--bg-panel2);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.track-hero-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.track-hero-icon { font-size: 26px; line-height: 1; }
.track-hero-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.track-hero-trend {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
.track-hero-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}
.track-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.track-tag {
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 500;
}

/* 账号列表标题 */
.track-accounts-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  padding-left: 2px;
}

/* 账号列表 */
.track-accounts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.track-account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-panel2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border: 1px solid var(--border);
  transition: all 0.18s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.track-account-item:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(99,102,241,0.12);
}
/* 跳转箭头 */
.track-account-goto {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  margin-left: 3px;
}
.track-account-item:hover .track-account-goto {
  opacity: 1;
  transform: translateX(3px);
  color: var(--accent);
}
/* 标题右侧提示 */
.track-accounts-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
}
.track-account-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.track-account-info {
  flex: 1;
  min-width: 0;
}
.track-account-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.track-account-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-account-tag {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 底部提示 */
.track-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 移动端适配 */
@media (max-width: 767px) {
  .tracks-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}


/* ===== MOBILE 弹窗/面板适配 ===== */
@media (max-width: 767px) {

  /* 颜色面板 */
  .color-panel {
    left: 50% !important;
    top: auto !important;
    bottom: calc(var(--mobile-tab-h) + 8px);
    transform: translateX(-50%);
    width: calc(100vw - 24px);
    max-width: 360px;
  }

  /* 格式面板 */
  .format-panel {
    left: 50% !important;
    top: auto !important;
    bottom: calc(var(--mobile-tab-h) + 8px);
    transform: translateX(-50%);
    width: calc(100vw - 24px);
    max-width: 360px;
  }

  /* Emoji 面板 */
  .emoji-panel {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: var(--mobile-tab-h);
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 60vh;
  }

  /* 模态框 */
  .modal {
    width: calc(100vw - 24px);
    max-height: 90vh;
    margin: 0 auto;
  }
  .modal-body { overflow-y: auto; max-height: calc(90vh - 110px); }

  /* 素材抽屉 */
  .materials-drawer {
    width: 100%;
    max-width: 100%;
  }

  /* 草稿侧边栏 */
  .draft-sidebar {
    width: 80%;
    max-width: 300px;
  }

  /* 模板弹窗 */
  .tpl-popup {
    width: calc(100vw - 24px);
    max-height: 80vh;
    overflow-y: auto;
  }
  .tpl-cards { grid-template-columns: 1fr 1fr; }

  /* 粘贴提示条 */
  .paste-hint {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }

  /* 封面生成器 */
  .cover-modal { width: calc(100vw - 16px); }
  .cover-preview canvas { width: 100%; height: auto; }
  .cover-styles { flex-wrap: wrap; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════════
   新增功能样式
   ══════════════════════════════════════════════════════════════════ */

/* ── 顶部草稿标题栏 ─────────────────────────────────────────── */
.draft-title-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.draft-name-input {
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-ui);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  max-width: 150px;
  width: 100%;
  text-align: center;
  transition: var(--transition);
}
.draft-name-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-hover);
}
.save-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.save-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-dot 2s infinite;
}
.save-status.saving .save-dot { background: var(--warning); animation: spin 1s linear infinite; }
.save-status.unsaved .save-dot { background: var(--danger); animation: none; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── 平台分发按钮 ───────────────────────────────────────────── */
.platform-btns {
  display: flex;
  align-items: center;
  gap: 3px;
}
.platform-btn {
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
  gap: 4px;
}
.platform-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); }
.platform-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.platform-btn.wechat.active { border-color: #07c160; color: #07c160; background: rgba(7,193,96,0.1); }
.platform-btn.zhihu.active { border-color: #0066ff; color: #0066ff; background: rgba(0,102,255,0.1); }
.platform-btn.juejin.active { border-color: #0071e3; color: #0071e3; background: rgba(0,113,227,0.1); }
.platform-btn.weibo.active { border-color: #e6162d; color: #e6162d; background: rgba(230,22,45,0.1); }

/* ── 编辑器顶部栏 ──────────────────────────────────────────── */
.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  background: var(--bg-panel2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.editor-stats {
  display: flex;
  align-items: center;
  gap: 12px;
}
.editor-stats span {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── 草稿侧边栏 ───────────────────────────────────────────── */
.draft-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.draft-sidebar.open { transform: translateX(0); }
.draft-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
}
.draft-sidebar-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.draft-sidebar-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.draft-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.draft-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 4px;
  gap: 8px;
}
.draft-item:hover { background: var(--bg-hover); }
.draft-item.active { background: var(--accent-soft); border: 1px solid rgba(99,102,241,0.3); }
.draft-item-info { flex: 1; min-width: 0; }
.draft-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draft-item-date {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.draft-item-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  transition: var(--transition);
  flex-shrink: 0;
}
.draft-item:hover .draft-item-delete { opacity: 1; }
.draft-item-delete:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
.draft-sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.btn-new-draft {
  width: 100%;
  background: var(--accent-soft);
  border: 1px dashed rgba(99,102,241,0.4);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  padding: 9px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: var(--transition);
}
.btn-new-draft:hover {
  background: rgba(99,102,241,0.2);
  border-color: var(--accent);
}
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.sidebar-overlay.show { opacity: 1; pointer-events: auto; }

/* ── 深色/浅色编辑器 ─────────────────────────────────────────── */
.light-editor { background: var(--bg-panel); color: var(--text-primary); }
.dark-editor {
  background: #0d1117;
  color: #c9d1d9;
  caret-color: #58a6ff;
}

/* ── 素材库抽屉 ─────────────────────────────────────────────── */
.materials-drawer {
  position: fixed;
  top: var(--nav-h);
  right: 0;
  width: 320px;
  height: calc(100vh - var(--nav-h));
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 200;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}
.materials-drawer.open {
  transform: translateX(0);
}
.materials-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-panel2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.materials-drawer-header span {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.materials-drawer-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
.materials-drawer-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* 素材库搜索框 */
.materials-search-box {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.materials-search-box input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel2);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.materials-search-box input:focus {
  border-color: var(--accent);
}
.materials-search-box input::placeholder {
  color: var(--text-muted);
}
.materials-search-clear {
  padding: 6px;
  border: none;
  background: var(--bg-hover);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}
.materials-search-clear:hover {
  background: var(--bg-panel);
}

/* 素材库分类标签 */
.materials-category-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.materials-category-tabs::-webkit-scrollbar {
  display: none;
}
.material-cat-tab {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.material-cat-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.material-cat-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 隐藏的素材分类 */
.material-group.hidden-category {
  display: none;
}

.materials-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.material-group { margin-bottom: 16px; }
.material-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding-left: 2px;
}
.material-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.material-card {
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  font-family: var(--font-ui);
}
.material-card:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}
.material-card:active { transform: translateY(0); }
.material-icon { font-size: 20px; margin-bottom: 4px; }
.material-label { font-size: 11px; color: var(--text-secondary); font-weight: 500; }

/* 抽屉遮罩 */
.materials-overlay {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 320px;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 199;
}
.materials-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* ── 快捷键说明 ─────────────────────────────────────────────── */
.shortcuts-box {}
.shortcut-list { display: flex; flex-direction: column; gap: 6px; }
.shortcut-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}
.shortcut-item span { margin-left: auto; color: var(--text-muted); }
kbd {
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-ui);
  min-width: 22px;
  text-align: center;
  display: inline-block;
}

/* ── 扩展统计 ───────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.stat-item { text-align: center; }
.stat-label { font-size: 10px; color: var(--text-muted); display: block; margin-bottom: 3px; }
.stat-val { font-size: 15px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: opacity 0.2s ease;
}
.modal-overlay.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}
.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  width: 440px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: scale(1);
  transition: transform 0.2s ease;
}
.modal-overlay.hidden .modal { transform: scale(0.95); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: var(--transition);
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}

/* ── 排版检测报告 ───────────────────────────────────────────── */
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.check-item:last-child { border-bottom: none; }
.check-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.check-icon.pass { color: var(--success); }
.check-icon.warn { color: var(--warning); }
.check-icon.fail { color: var(--danger); }
.check-text { flex: 1; }
.check-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.check-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* ── 检测完成按钮 ───────────────────────────────────────────── */
.check-ok-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border: none;
  border-radius: 24px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(16,185,129,0.3);
}

.check-ok-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16,185,129,0.4);
}

.check-ok-btn:active {
  transform: translateY(0);
}

.check-ok-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  font-size: 14px;
}

/* ── 封面图生成器 ───────────────────────────────────────────── */
.cover-modal {
  width: 960px;
  max-width: 95vw;
}
.cover-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.cover-form-item label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cover-form-item input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-ui);
}
.cover-form-item input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cover-styles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cover-style-btn {
  padding: 6px 14px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--bg-panel2);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cover-style-btn:hover {
  border-color: var(--border-light);
  transform: translateY(-1px);
}
.cover-style-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.cover-preview {
  background: var(--bg-panel2);
  border-radius: var(--radius-md);
  padding: 10px;
  display: flex;
  justify-content: center;
}
.cover-preview canvas {
  max-width: 100%;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* ── 标题优化按钮 ──────────────────────────────────────────── */
.title-optimize-btn {
  margin-left: 10px;
  padding: 4px 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.title-optimize-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(245,158,11,0.4);
}

/* ── 标题优化弹窗 ───────────────────────────────────────────── */
.title-opt-modal .modal-body {
  padding: 20px;
}

.title-opt-original {
  background: var(--bg-hover);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.title-opt-label {
  font-size: 12px;
  color: var(--text-muted);
}

.title-opt-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.title-opt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.title-opt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.title-opt-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.title-opt-icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
}

.title-opt-type {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-hover);
  border-radius: 10px;
  white-space: nowrap;
}

.title-opt-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.title-opt-use {
  padding: 4px 12px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.title-opt-item:hover .title-opt-use {
  opacity: 1;
}

/* ── 封面按钮组 ─────────────────────────────────────────────── */
.cover-modal .modal-footer {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.cover-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-panel2);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 160px;
}

.cover-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.cover-btn-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg-hover);
}

.cover-btn-text {
  font-weight: 600;
  font-family: var(--font-ui);
}

.cover-btn-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

/* 下载按钮 */
.cover-btn-download {
  border-color: #6366f1;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(99,102,241,0.05));
}

.cover-btn-download:hover {
  background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(99,102,241,0.1));
  border-color: #6366f1;
}

.cover-btn-download .cover-btn-icon {
  background: rgba(99,102,241,0.2);
  color: #6366f1;
}

/* 插入按钮 */
.cover-btn-insert {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05));
}

.cover-btn-insert:hover {
  background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(16,185,129,0.1));
  border-color: #10b981;
}

.cover-btn-insert .cover-btn-icon {
  background: rgba(16,185,129,0.2);
  color: #10b981;
}

/* ── 导出按钮组 ─────────────────────────────────────────────── */
.export-btns {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.export-btns .action-btn {
  flex: 1;
  font-size: 12px;
  padding: 6px 8px;
}

/* ── hidden ─────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── 按钮激活状态 ───────────────────────────────────────────── */
.nav-btn.active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ── 表情包面板 ─────────────────────────────────────────────── */
.emoji-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.emoji-overlay.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}

.emoji-panel {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  max-height: 70vh;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  z-index: 2000 !important;
  overflow: hidden;
}
.emoji-panel.hidden {
  display: none !important;
}

.emoji-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-panel2);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.emoji-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.emoji-panel-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.emoji-search-box {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.emoji-search-box input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
}
.emoji-search-box input:focus {
  outline: none;
  border-color: var(--accent);
}

.emoji-search-btn {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.emoji-search-btn:hover {
  background: var(--accent-hover);
}

.emoji-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.emoji-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}
.emoji-tab:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.emoji-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.emoji-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.emoji-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.emoji-cat-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-panel2);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.emoji-cat-btn:hover {
  border-color: var(--border-light);
  color: var(--text-primary);
}
.emoji-cat-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.emoji-item {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
  background: none;
  border: none;
}
.emoji-item:hover {
  background: var(--bg-hover);
  transform: scale(1.15);
}
.emoji-item:active {
  transform: scale(0.95);
}

.sticker-results {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.sticker-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
  background: var(--bg-panel2);
  border: 1px solid var(--border);
}
.sticker-item:hover {
  transform: scale(1.05);
  border-color: var(--accent);
}
.sticker-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.emoji-loading {
  text-align: center;
  padding: 30px;
  color: var(--text-muted);
  font-size: 14px;
}

.emoji-no-result {
  text-align: center;
  padding: 30px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── 颜色选择面板 ─────────────────────────────────────────────── */
.color-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
}
.color-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 999;
  padding: 16px;
}
.color-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.color-panel-header span {
  font-weight: 600;
  font-size: 14px;
}
.color-panel-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.color-panel-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.color-presets {
  margin-bottom: 12px;
}
.color-preset-label,
.color-custom-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.color-preset-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.color-preset {
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.color-preset:hover {
  transform: scale(1.1);
  border-color: var(--accent);
}
.color-preset.selected {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--accent);
}
.color-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-custom-row input[type="color"] {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px;
  background: var(--bg-panel);
}
.color-custom-row input[type="text"] {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg-input);
  color: var(--text-primary);
}
.color-custom-row input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
.color-apply-btn {
  padding: 6px 12px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.color-apply-btn:hover {
  opacity: 0.9;
}
.color-hint {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

/* ── 文章列表弹窗 ─────────────────────────────────────────────── */
.article-modal {
  position: fixed;
  top: 0;
  right: 0;
  width: 580px;
  height: 100vh;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-light);
  box-shadow: -8px 0 30px rgba(0,0,0,0.2);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.article-modal.open {
  transform: translateX(0);
}
.article-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel2);
  flex-shrink: 0;
  gap: 12px;
}
.article-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-ui);
}
.article-modal-icon {
  font-size: 18px;
}
.article-modal-sub {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
}
.article-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.article-modal-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-ui);
  color: var(--accent);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  transition: all 0.2s;
}
.article-modal-open-btn:hover {
  background: var(--accent);
  color: #fff;
}
.article-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
  line-height: 1;
}
.article-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.article-modal-body {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.article-modal-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .article-modal {
    width: 100vw;
    height: 80vh;
    top: auto;
    bottom: 0;
    border-left: none;
    border-top: 1px solid var(--border-light);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .article-modal.open {
    transform: translateY(0);
  }
}

/* ===== FORMAT PANEL (组合格式面板) ===== */
.format-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1001;
}
.format-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  width: 280px;
  z-index: 1002;
}
.format-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.format-panel-header span {
  font-weight: 600;
  font-size: 14px;
}
.format-panel-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.format-panel-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.format-options {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.format-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 14px;
  background: var(--bg-input);
  border-radius: 8px;
  transition: background 0.15s;
}
.format-option:hover {
  background: var(--bg-hover);
}
.format-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.format-option-label {
  font-size: 14px;
}
.format-colors {
  margin-bottom: 14px;
}
.format-color-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.format-color-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.format-color {
  width: 32px;
  height: 32px;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.format-color:hover {
  transform: scale(1.1);
}
.format-color.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.3);
}
.format-apply-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.format-apply-btn:hover {
  opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════════
   新功能面板通用样式
══════════════════════════════════════════════════════════════ */
.feature-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 800;
  backdrop-filter: blur(2px);
}
.feature-overlay.hidden { display: none; }

.feature-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 620px;
  max-width: 95vw;
  max-height: 85vh;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  z-index: 801;
  display: flex;
  flex-direction: column;
  animation: panel-pop-in 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.feature-panel.hidden { display: none; }
@keyframes panel-pop-in {
  from { opacity: 0; transform: translate(-50%, -52%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.feature-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-panel2);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.feature-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-ui);
}
.feature-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.feature-panel-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.feature-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-intro {
  font-size: 12.5px;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  line-height: 1.5;
}

/* 通用表单元素 */
.feature-form { display: flex; flex-direction: column; gap: 10px; }
.feature-textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13.5px;
  font-family: var(--font-ui);
  padding: 10px 12px;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.feature-textarea:focus { outline: none; border-color: var(--accent); }
.feature-textarea::placeholder { color: var(--text-muted); }
.feature-form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.feature-select {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-ui);
  padding: 8px 10px;
  cursor: pointer;
}
.feature-select:focus { outline: none; border-color: var(--accent); }
/* 风格标签选择器 */
.style-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.style-tab {
  background: var(--bg-hover);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.style-tab:hover { border-color: var(--accent); color: var(--accent); }
.style-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.feature-btn {
  background: var(--bg-hover);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-ui);
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.feature-btn:hover { border-color: var(--accent); color: var(--accent); }
.feature-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.feature-btn.primary:hover { opacity: 0.88; }

/* Loading 状态 */
.feature-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
}
.feature-loading.hidden { display: none; }
.feature-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 结果区 */
.feature-results.hidden { display: none; }
.feature-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature-result-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
}
.feature-result-item:hover {
  border-color: var(--accent);
  background: rgba(99,102,241,0.06);
}
.feature-result-item.used {
  border-color: #10b981;
  background: rgba(16,185,129,0.08);
}
.feature-result-rank {
  min-width: 22px;
  height: 22px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.feature-result-item.used .feature-result-rank { background: #10b981; }
.feature-result-text { flex: 1; font-size: 13.5px; color: var(--text-primary); line-height: 1.5; }
.feature-result-copy {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  font-family: var(--font-ui);
}
.feature-result-copy:hover { border-color: var(--accent); color: var(--accent); }

/* ── 选题灵感库 ── */
.topic-track-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.topic-track-tab {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-family: var(--font-ui);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.topic-track-tab:hover { border-color: var(--accent); color: var(--accent); }
.topic-track-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.topic-list { display: flex; flex-direction: column; gap: 8px; }
.topic-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
}
.topic-item:hover { border-color: var(--accent); }
.topic-rank {
  min-width: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.topic-rank.top { color: #f59e0b; }
.topic-info { flex: 1; }
.topic-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.topic-meta { font-size: 11px; color: var(--text-muted); }
.topic-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

/* ── 涨粉路径指南 ── */
.growth-stage-select {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.growth-stage-btn {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-size: 12.5px;
  font-family: var(--font-ui);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.growth-stage-btn:hover { border-color: var(--accent); color: var(--accent); }
.growth-stage-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.growth-content { display: flex; flex-direction: column; gap: 12px; }
.growth-card {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.growth-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.growth-card-body { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.growth-card-body li { margin-bottom: 4px; }
.growth-card.highlight { border-color: var(--accent); background: rgba(99,102,241,0.05); }

/* ── 发文时间建议 ── */
.post-time-form { display: flex; flex-direction: column; gap: 16px; }
.post-time-section { display: flex; flex-direction: column; gap: 8px; }
.post-time-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.post-time-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.post-time-tag {
  background: var(--bg-hover);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 12px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.post-time-tag:hover { border-color: var(--accent); color: var(--accent); }
.post-time-tag.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.post-time-result.hidden { display: none; }
.post-time-result { display: flex; flex-direction: column; gap: 10px; }
.post-time-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.post-time-card.best { border-color: #10b981; background: rgba(16,185,129,0.06); }
.post-time-icon { font-size: 24px; flex-shrink: 0; }
.post-time-info { flex: 1; }
.post-time-label { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.post-time-value { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.post-time-reason { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.post-time-score {
  font-size: 20px;
  font-weight: 800;
  color: #10b981;
  flex-shrink: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .feature-panel {
    width: 100vw;
    max-height: 90vh;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    border-radius: 16px 16px 0 0;
    animation: panel-slide-up 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @keyframes panel-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  
  /* 触摸友好：增大按钮触摸区域 */
  .tb-btn, .btn-ghost, .feature-btn, .style-tab, .topic-track-tab, 
  .growth-stage-btn, .post-time-tag, .tpl-card, .tpl-tab,
  .feature-result-item, .topic-item {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* 触摸反馈 */
  .tb-btn:active, .btn-ghost:active, .feature-btn:active,
  .style-tab:active, .topic-track-tab:active, .growth-stage-btn:active,
  .post-time-tag:active, .tpl-card:active, .tpl-tab:active {
    opacity: 0.7;
    transform: scale(0.98);
  }
  
  /* 面板关闭按钮更大 */
  .feature-panel-close {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  
  /* 底部安全区 */
  .feature-panel-body {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* ── 对标账号分析 - 已删除 ──────────────────────────────────────────────── */
.analyze-search-box {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.analyze-search-box input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-ui);
}

.analyze-search-box input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.analyze-search-box button {
  padding: 10px 20px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  font-family: var(--font-ui);
}

.analyze-search-box button:hover {
  opacity: 0.9;
}

.analyze-result {
  background: var(--bg-panel2);
  border-radius: var(--radius-md);
  padding: 16px;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
}

.analyze-hint {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 40px 0;
}

.analyze-loading {
  text-align: center;
  padding: 40px 0;
  color: var(--text-muted);
}

.analyze-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 12px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.analyze-account-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.analyze-account-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.analyze-account-info {
  flex: 1;
}

.analyze-account-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.analyze-account-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.analyze-section {
  margin-bottom: 16px;
}

.analyze-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.analyze-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.analyze-tag {
  padding: 4px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.analyze-article-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analyze-article-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
}

.analyze-article-date {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 50px;
  flex-shrink: 0;
}

.analyze-article-title {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}

.analyze-summary {
  background: var(--bg-hover);
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.analyze-summary strong {
  color: var(--text-primary);
}

.analyze-error {
  text-align: center;
  padding: 40px 0;
  color: var(--danger);
}



/* ── 标题套路卡片 ─────────────────────────────── */
.pattern-blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pattern-block {
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
}

.pattern-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.pattern-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 4px;
}

.pattern-count {
  font-size: 11px;
  color: var(--text-muted);
}

.pattern-examples {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pattern-example {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  padding-left: 4px;
  border-left: 2px solid var(--border);
  font-style: italic;
}

/* ── 仿写建议区块 ─────────────────────────────── */
.imitation-section .analyze-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.imitation-btn {
  font-size: 12px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  font-family: var(--font-ui);
}

.imitation-btn:hover {
  opacity: 0.85;
  transform: scale(1.03);
}

.imitation-hint {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 16px 0;
}

.imitation-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 0;
  color: var(--text-muted);
  font-size: 13px;
}

.imitation-loading .spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.imitation-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  transition: background 0.15s;
}

.imitation-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.imitation-title {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}

.imitation-copy {
  font-size: 11px;
  padding: 3px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: var(--font-ui);
}

.imitation-copy:hover {
  background: var(--accent);
  color: white;
}

.imitation-copy.copied {
  background: var(--success);
  color: white;
}

/* ── 关键词标签强化 ─────────────────────────── */
.analyze-tag.keyword-tag {
  cursor: default;
}

.analyze-tag.keyword-tag:hover {
  background: var(--accent-soft);
}

/* ── 移动端 ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .analyze-search-box {
    flex-direction: column;
  }
  .analyze-search-box button {
    width: 100%;
  }
}

/* ── 关注公众号弹窗 ───────────────────────────────────────────── */
#followModal {
  z-index: 9999;
}

.follow-modal-content {
  position: relative;
  background: linear-gradient(145deg, #1e1e2e, #2a2a3e);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 28px 32px 20px;
  max-width: 320px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: follow-pop-in 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

/* ===== MOBILE TOOLS BOTTOM SHEET ===== */
.mobile-tools-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 500;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mobile-tools-overlay.visible {
  display: block;
  opacity: 1;
}

.mobile-tools-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 501;
  background: var(--bg-panel);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  max-height: 80vh;
  overflow-y: auto;
}
.mobile-tools-sheet.open {
  transform: translateY(0);
}

.tools-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  z-index: 1;
}
.tools-sheet-handle {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
}
.tools-sheet-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-ui);
}
.tools-sheet-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.tools-sheet-close:active { background: var(--bg-hover); }

.tools-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 16px 12px 8px;
}
.tools-sheet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 6px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
  min-height: 72px;
}
.tools-sheet-item:active {
  background: rgba(99,102,241,0.15);
  border-color: var(--accent);
  transform: scale(0.96);
}
.tools-item-icon {
  font-size: 24px;
  line-height: 1;
}
.tools-item-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  font-family: var(--font-ui);
  text-align: center;
  line-height: 1.3;
}

.tools-sheet-copy {
  padding: 8px 16px 4px;
}
.tools-copy-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
  letter-spacing: 0.5px;
}
.tools-copy-btn:active { opacity: 0.85; }

/* 仅移动端显示工具抽屉 */
@media (min-width: 768px) {
  .mobile-tools-overlay,
  .mobile-tools-sheet { display: none !important; }
}

/* ===== MOBILE PREVIEW COPY BAR ===== */
.mobile-preview-copy-bar {
  display: none;
  padding: 8px 16px 8px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.mobile-preview-copy-btn {
  width: 100%;
  padding: 13px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.mobile-preview-copy-btn:active { opacity: 0.82; }

/* 移动端预览面板：底部给复制栏留空间 */
@media (max-width: 767px) {
  .mobile-preview-copy-bar { display: block; }

  /* 预览面板内，wrapper 去掉 overflow 部分，让内容不被按钮遮挡 */
  .panel-preview .preview-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
}

/* ===== MOBILE FLOATING COPY BUTTON ===== */
.mobile-floating-copy {
  display: none;
  position: fixed;
  bottom: calc(var(--mobile-tab-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mobile-floating-copy.visible {
  opacity: 1;
  pointer-events: auto;
}
.mobile-floating-copy-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 99px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 20px rgba(99,102,241,0.4);
  transition: transform 0.15s, opacity 0.15s;
}
.mobile-floating-copy-btn:active {
  transform: scale(0.96);
  opacity: 0.85;
}

/* 桌面端隐藏 */
@media (min-width: 768px) {
  .mobile-floating-copy { display: none !important; }
}



@keyframes follow-pop-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.follow-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #888;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all 0.2s;
}

.follow-modal-close:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.follow-modal-header {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 20px;
}

.follow-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.follow-qrcode {
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 4px 20px rgba(99,102,241,0.3);
  max-width: 200px;
}

.follow-qrcode img {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: contain;
}

.follow-tip {
  text-align: center;
}

.follow-tip-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.follow-tip-desc {
  font-size: 13px;
  color: #888;
}

.follow-modal-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.follow-no-remind {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: #666;
}

.follow-no-remind input {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .follow-modal-content {
    padding: 24px 20px 16px;
  }
  .follow-qrcode img {
    width: 150px;
    height: 150px;
  }
}

/* ── 运营干货分享 ── */
.tips-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.tips-cat-tab {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-family: var(--font-ui);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.tips-cat-tab:hover { border-color: var(--accent); color: var(--accent); }
.tips-cat-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.tips-content-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 450px;
  overflow-y: auto;
}
.tips-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 8px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.tips-card {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.tips-card:hover {
  border-color: var(--accent);
  transform: translateX(2px);
}
.tips-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tips-card-content {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.tips-card-content li {
  margin-bottom: 4px;
  padding-left: 4px;
}
.tips-card.highlight {
  border-color: var(--accent);
  background: rgba(99,102,241,0.05);
}
.tips-card.highlight .tips-card-title {
  color: var(--accent);
}
.tips-tip-box {
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.05));
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.tips-tip-box strong {
  color: var(--accent);
}
.tips-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
  margin-left: 4px;
}

/* 干货展开详情 */
.tips-detail {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.tips-card.expanded .tips-detail {
  display: block;
}
.tips-detail-content {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.tips-detail-content p {
  margin-bottom: 8px;
}
.tips-detail-content strong {
  color: var(--text-primary);
  font-weight: 600;
}
.tips-example {
  background: var(--bg-panel2);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12px;
}
.tips-expand-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── 往期文章推荐 ── */
.past-articles-search {
  margin-bottom: 10px;
}
.past-articles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}
.past-article-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-hover);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.past-article-card:hover {
  border-color: var(--accent-soft);
}
.past-article-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.past-article-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.15s;
  font-size: 11px;
  color: transparent;
}
.past-article-card.selected .past-article-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.past-article-info {
  flex: 1;
  min-width: 0;
}
.past-article-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.past-article-card.selected .past-article-title {
  color: var(--accent);
}
.past-article-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
}
.past-article-preview {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
.past-articles-selected {
  background: var(--accent-soft);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-top: 4px;
}
.past-selected-title {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}
.past-selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.past-selected-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  border-radius: 12px;
  font-size: 11px;
  color: var(--accent);
}
.past-selected-tag button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 10px;
  padding: 0 2px;
  line-height: 1;
}
/* ─── 往期文章样式选择器 ─── */
.past-articles-styles {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(99, 102, 241, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.1);
}
.past-styles-title {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
  font-weight: 500;
}
.past-styles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.past-style-btn {
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.past-style-btn:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.05);
}
.past-style-btn.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.past-articles-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.past-articles-actions .feature-btn {
  flex: 1;
}
.past-articles-actions .feature-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.past-article-empty {
  text-align: center;
  padding: 30px 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* ─── 运营工具箱 ─── */
.tools-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.tools-cat-tab {
  padding: 5px 10px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.tools-cat-tab:hover {
  border-color: #6366f1;
  color: #6366f1;
}
.tools-cat-tab.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.tools-list {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}
.tools-list::-webkit-scrollbar {
  width: 4px;
}
.tools-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}
.tool-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(30,41,59,0.5);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
}
.tool-card:hover {
  background: rgba(99,102,241,0.2);
  border-color: rgba(99,102,241,0.3);
}
.tool-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(99,102,241,0.25);
}
.tool-info {
  flex: 1;
  min-width: 0;
}
.tool-name {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 2px;
}
.tool-name a {
  color: inherit;
  text-decoration: none;
}
.tool-name a:hover {
  color: #6366f1;
  text-decoration: underline;
}
.tool-desc {
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tool-url {
  font-size: 11px;
  color: #64748b;
  font-weight: 400;
  margin-left: 6px;
}
.tool-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  color: #6366f1;
  flex-shrink: 0;
  margin-top: 2px;
}
.tool-url {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
  margin-left: 6px;
}