/* ================================================================
   AI Meeting Minutes — Modern Design System (Light & Vibrant)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-deep: #f0f4f8;
  --bg-base: #f7f9fc;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-hover: #f0f4f8;
  --bg-input: #f4f6f9;

  --border: #e2e8f0;
  --border-hover: #cbd5e1;
  --border-focus: #2f5bbf;

  --primary: #2f5bbf;
  --primary-hover: #2552a8;
  --primary-light: #5b8def;
  --primary-dim: rgba(47,91,191,0.08);
  --primary-glow: rgba(47,91,191,0.15);

  --accent: #8b5cf6;
  --accent-dim: rgba(139,92,246,0.08);

  --success: #10b981;
  --success-dim: rgba(16,185,129,0.08);
  --warning: #f59e0b;
  --warning-dim: rgba(245,158,11,0.08);
  --danger: #ef4444;
  --danger-dim: rgba(239,68,68,0.08);

  --cyan: #06b6d4;
  --cyan-dim: rgba(6,182,212,0.08);

  --text: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-dim: #cbd5e1;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --shadow-surface: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-modal: 0 20px 60px -12px rgba(0,0,0,0.2);
  --shadow-toast: 0 8px 32px rgba(0,0,0,0.14);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 200ms;
  --duration-slow: 350ms;
}

[data-theme="dark"] {
  --bg-deep: #0f172a;
  --bg-base: #0f172a;
  --bg-card: #1e293b;
  --bg-elevated: #1e293b;
  --bg-hover: #334155;
  --bg-input: #1e293b;

  --border: #334155;
  --border-hover: #475569;
  --border-focus: #5b8def;

  --primary-dim: rgba(91,141,239,0.1);
  --primary-glow: rgba(91,141,239,0.12);
  --accent-dim: rgba(167,139,250,0.1);
  --success-dim: rgba(52,211,153,0.1);
  --warning-dim: rgba(251,191,36,0.1);
  --danger-dim: rgba(248,113,113,0.1);
  --cyan-dim: rgba(34,211,238,0.1);

  --text: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --shadow-surface: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-modal: 0 20px 60px -12px rgba(0,0,0,0.5);
  --shadow-toast: 0 8px 32px rgba(0,0,0,0.35);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.4);
}

html { background: var(--bg-deep); }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
  background: var(--bg-base);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app { position: relative; z-index: 1; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

a { color: inherit; text-decoration: none; }

/* ================================================================
   TOP NAV
   ================================================================ */
.top-nav {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid #e4e9f2;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.nav-left { display: flex; align-items: center; gap: 30px; margin-left: 40px; margin-right: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0 0 0 40px; padding: 0; margin-right: auto; }
.nav-links .nav-link { color: #44506b; font-size: .88rem; transition: color .2s; }
.nav-links .nav-link:hover { color: #2f5bbf; }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  color: #10203f;
  letter-spacing: .01em;
}
.nav-logo .logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #5b8def 0%, #2f5bbf 52%, #2552a8 100%);
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.nav-link {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 0;
  letter-spacing: 0.01em;
  transition: color var(--duration) var(--ease);
  position: relative;
}
.nav-link:hover { color: var(--primary); }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 1px;
  transition: width var(--duration) var(--ease);
}
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: #2f5bbf; }
.nav-link.active::after { width: 100%; }

/* 带图标的导航链接：与其他菜单项一致的文本链接样式，仅对齐图标 */
.nav-link-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-link-icon::after { display: none; }

/* AI能力下拉菜单 */
.nav-ai-menu { position: relative; }
#btn-ai-menu {
  padding: 7px 14px;
  border-radius: 9px;
  background: var(--primary-dim);
  border: 1px solid rgba(47, 91, 191,0.15);
  color: var(--primary);
  transition: all var(--duration) var(--ease);
}
#btn-ai-menu:hover {
  background: rgba(47, 91, 191,0.12);
  border-color: rgba(47, 91, 191,0.3);
}
.nav-ai-menu.active #btn-ai-menu {
  background: rgba(47, 91, 191,0.14);
  border-color: rgba(47, 91, 191,0.35);
}
.nav-ai-menu .nav-chevron {
  color: var(--primary);
  transition: transform var(--duration) var(--ease);
  animation: navAiChevron 1.8s ease-in-out infinite;
}
.nav-ai-menu.open .nav-chevron,
.nav-ai-menu:hover .nav-chevron {
  transform: rotate(180deg);
  animation: none;
}
/* 箭头上下轻浮动，提示可展开 */
@keyframes navAiChevron {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

.nav-ai-dropdown {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  transform: translate(-50%, 8px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  min-width: 272px;
  z-index: 200;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: all calc(var(--duration) * 1.5) var(--ease);
}
/* 顶部透明桥接：避免鼠标移向下拉时面板收起 */
.nav-ai-dropdown::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-ai-menu:hover .nav-ai-dropdown,
.nav-ai-menu.open .nav-ai-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav-ai-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  transition: background var(--duration) var(--ease);
}
.nav-ai-item + .nav-ai-item { margin-top: 2px; }
.nav-ai-item:hover { background: var(--primary-dim); }
/* AI 能力下拉项未开放（管理站功能开关关闭）：置灰且不响应 hover 高亮 */
.nav-ai-item-off { opacity: 0.65; cursor: not-allowed; }
.nav-ai-item-off:hover { background: transparent; }
.nav-ai-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--primary-dim);
  color: var(--primary);
  flex-shrink: 0;
  transition: all var(--duration) var(--ease);
}
.nav-ai-item:hover .nav-ai-icon {
  background: var(--primary);
  color: #fff;
}
.nav-ai-text { display: flex; flex-direction: column; gap: 2px; }
.nav-ai-text b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: color var(--duration) var(--ease);
}
.nav-ai-item:hover .nav-ai-text b { color: var(--primary); }
.nav-ai-text small { font-size: 11px; color: var(--text-muted); }
.nav-ai-soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-dim);
  border: 1px solid rgba(47, 91, 191,0.18);
  border-radius: 6px;
  padding: 3px 8px;
  flex-shrink: 0;
}

.nav-right { display: flex; align-items: center; gap: 14px; }

/* 空间切换器：仅多空间用户可见（个人版不渲染，不影响既有布局） */
.nav-space { position: relative; }
.nav-space-btn {
  padding: 7px 12px;
  border-radius: 9px;
  background: var(--primary-dim);
  border: 1px solid rgba(47, 91, 191,0.15);
  color: var(--primary);
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all var(--duration) var(--ease);
}
.nav-space-btn:hover { background: rgba(47, 91, 191,0.12); border-color: rgba(47, 91, 191,0.3); }
.nav-space-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
}
.nav-space .nav-chevron { transition: transform var(--duration) var(--ease); }
.nav-space.open .nav-chevron,
.nav-space:hover .nav-chevron { transform: rotate(180deg); }
.nav-space-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all calc(var(--duration) * 1.5) var(--ease);
}
/* 顶部透明桥接：鼠标移向下拉时面板不收起 */
.nav-space-dropdown::before {
  content: '';
  position: absolute;
  top: -12px; left: 0; right: 0; height: 12px;
}
.nav-space:hover .nav-space-dropdown,
.nav-space.open .nav-space-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-space-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: background var(--duration) var(--ease);
}
.nav-space-item + .nav-space-item { margin-top: 2px; }
.nav-space-item:hover { background: var(--primary-dim); }
.nav-space-item.is-active { background: var(--primary-dim); }
.nav-space-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--r-sm);
  background: rgba(47, 91, 191,0.12);
  color: var(--primary);
}
.nav-space-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-space-txt b {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-space-txt small { font-size: 11px; color: var(--text-muted); }
.nav-space-ok { margin-left: auto; color: var(--primary); font-weight: 700; }

.nav-user { position: relative; cursor: pointer; }
.nav-username {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: var(--r-full);
  background: var(--primary-dim);
  border: 1px solid rgba(47, 91, 191,0.15);
  color: var(--primary);
  transition: all var(--duration) var(--ease);
}
.nav-username:hover {
  background: rgba(47, 91, 191,0.12);
  border-color: rgba(47, 91, 191,0.3);
}

.nav-chevron {
  transition: transform var(--duration) var(--ease);
}
.nav-user.open .nav-chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  z-index: 200;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all calc(var(--duration) * 1.5) var(--ease);
}
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 24px;
  width: 10px;
  height: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-right: none;
  border-bottom: none;
  transform: rotate(45deg);
}
.nav-user:hover .nav-dropdown,
.nav-user.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-sm);
  transition: all var(--duration) var(--ease);
}
.nav-dropdown a:hover {
  background: var(--primary-dim);
  color: var(--primary);
}
.nav-dropdown a.danger {
  color: #ef4444;
}
.nav-dropdown a.danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}

.btn-nav-login {
  padding: 9px 26px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  transition: all var(--duration) var(--ease);
}
.btn-nav-login:hover {
  background: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--primary-glow);
}

/* 单页右上角登录态：与首页 nav-login/nav-cta 保持一致 */
.nav-login {
  color: var(--text-secondary);
  font-size: .88rem;
  transition: color var(--duration) var(--ease);
}
.nav-login:hover { color: var(--primary); }
.nav-cta {
  padding: 9px 20px;
  background: linear-gradient(135deg, #2f5bbf, #8b5cf6);
  color: #fff !important;
  border: none;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--duration) var(--ease);
}
.nav-cta:hover { filter: brightness(1.08); }
.nav-logout {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 500;
  transition: all var(--duration) var(--ease);
}
.nav-logout:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(217, 48, 37, 0.08);
}

/* ================================================================
   top-nav 优化（听脑蓝主题 · 方案 B）
   ================================================================ */
.top-nav { border-bottom-color: #e6eef9; }
.top-nav .nav-logo { color: #13254a; }
.top-nav .nav-logo .logo { background: linear-gradient(135deg, #5b8def 0%, #2f5bbf 52%, #2552a8 100%); }

/* 导航链接：圆角胶囊 + 蓝调 */
.top-nav .nav-link { border-radius: 9px; padding: 8px 13px; }
.top-nav .nav-link::after { display: none; }
.top-nav .nav-link:hover { color: #2f5bbf; background: #f0f6ff; }
.top-nav .nav-link.active { color: #2f5bbf; background: #e8f0fe; }

/* AI能力下拉触发按钮 */
.top-nav #btn-ai-menu {
  background: #e8f0fe;
  border-color: #d6e6fb;
  color: #2f5bbf;
}
.top-nav #btn-ai-menu:hover { background: #dcecff; border-color: #a9ccf9; color: #2f5bbf; }
.top-nav .nav-ai-menu.active #btn-ai-menu { background: #dcecff; border-color: #a9ccf9; }
.top-nav .nav-chevron { color: #2f5bbf; }

/* 下拉面板 */
.top-nav .nav-ai-item:hover { background: #f0f6ff; }
.top-nav .nav-ai-icon { background: #e8f0fe; color: #2f5bbf; }
.top-nav .nav-ai-item:hover .nav-ai-icon { background: #2f5bbf; color: #fff; }
.top-nav .nav-ai-item:hover .nav-ai-text b { color: #2f5bbf; }
.top-nav .nav-ent-badge { font-size: .6rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #2f5bbf, #5b8def); padding: 2px 7px; border-radius: 6px; margin-left: 6px; vertical-align: middle; letter-spacing: .04em; }
.top-nav .nav-ai-item.active { background: #f0f6ff; }
.top-nav .nav-ai-item.active .nav-ai-text b { color: #2f5bbf; }
.top-nav .nav-ai-soon {
  color: #2f5bbf;
  background: #e8f0fe;
  border-color: rgba(47, 91, 191, 0.2);
}

/* 用户按钮 / 下拉 */
.top-nav .nav-username {
  background: #e8f0fe;
  border-color: rgba(47, 91, 191, 0.16);
  color: #2f5bbf;
}
.top-nav .nav-username:hover {
  background: #dcecff;
  border-color: rgba(47, 91, 191, 0.32);
}
.top-nav .nav-dropdown a:hover { background: #f0f6ff; color: #2f5bbf; }

/* 登录态 */
.top-nav .btn-nav-login { background: #2f5bbf; }
.top-nav .btn-nav-login:hover { background: #2f5bbf; box-shadow: 0 4px 16px rgba(47, 91, 191, 0.28); }
.top-nav .nav-login:hover { color: #2f5bbf; }
.top-nav .nav-cta {
  background: linear-gradient(135deg, #2f5bbf, #5b8def);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(47, 91, 191, 0.24);
  transition: filter .2s, transform .2s;
}
.top-nav .nav-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
.top-nav .nav-logout { border-radius: 10px; }

/* ================================================================
   会议页 top-nav（全宽 + 渐变过渡条 + record-hero 紧贴顶栏）
   ================================================================ */
.top-nav.nav-meeting .nav-inner { max-width: none; }
.top-nav.nav-meeting .nav-space-label {
  font-size: 13px;
  font-weight: 600;
  color: #44506b;
  padding: 6px 12px;
  background: #f0f6ff;
  border-radius: 9px;
  white-space: nowrap;
}
.top-nav.nav-meeting::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, rgba(47, 91, 191,0) 0%, #2f5bbf 28%, #5b8def 72%, rgba(47, 91, 191,0) 100%);
  pointer-events: none;
}
.meeting-page-body .record-hero {
  border-radius: 0 0 18px 18px;
}

/* ================================================================
   LAYOUT
   ================================================================ */
.page-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.page-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* ===== Footer ===== */
.footer { background: #071632; color: #8b99b8; padding: 44px 28px; }
.footer-bottom { max-width: 1200px; margin: 0 auto; font-size: .8rem; color: #64708f; text-align: center; }

.sidebar {
  width: 230px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 24px 14px;
  flex-shrink: 0;
  overflow-y: auto;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  margin-bottom: 4px;
  transition: all var(--duration) var(--ease);
}
.sidebar-item:hover {
  color: #2f5bbf;
  background: #F6F7F9;
}
.sidebar-item.active {
  color: #2f5bbf;
  background: #EEF5FF;
  font-weight: 700;
}

.page-content {
  flex: 1;
  padding: 36px;
  overflow-y: auto;
  background: var(--bg-base);
}
.page-content h2 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 28px;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* AI写作 / AI PPT 页面：隐藏滚动条（保持可滚动） */
.writing-page::-webkit-scrollbar,
.ppt-page::-webkit-scrollbar { width: 0; height: 0; display: none; }
.writing-page,
.ppt-page { scrollbar-width: none; scrollbar-color: transparent transparent; }

/* 功能介绍单页：整页滚动，页脚位于内容底部而非首屏固定 */
.page-layout--intro {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}
.page-layout--intro > .page-body {
  overflow: visible;
}
.page-layout--intro > .page-body > .page-content {
  overflow: visible;
  height: auto;
  padding-bottom: 0;
}

/* 宽屏变体（会员套餐 / 加油包页）：内容全宽铺满时，导航与页脚内容同步放开
   1200px 限宽、边距对齐 40px，避免出现「logo 缩在中间、页面标题贴边」的错位。
   仅这两个页面挂此变体，不影响功能介绍页与其他标准内容页。 */
.page-layout--wide .nav-inner { max-width: none; padding: 0 40px; }
.page-layout--wide .app-footer .app-footer-inner { max-width: none; padding: 64px 40px 30px; }

/* ================================================================
   FORMS & CARDS
   ================================================================ */
.form-card,
.checkout-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  transition: border-color var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease);
}
.form-card:hover,
.checkout-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.form-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.form-row:last-of-type { margin-bottom: 0; }
.form-row label {
  width: 80px;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 13px;
  flex-shrink: 0;
}
.form-row input,
.form-row select {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--text);
  background: var(--bg-input);
  outline: none;
  transition: all var(--duration) var(--ease);
}
.form-row input::placeholder { color: var(--text-muted); }
.form-row input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

.form-actions {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

/* Account head (profile page) */
.account-head {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, #f5f7ff 0%, var(--bg-card) 60%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 20px;
  transition: border-color var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease);
}
.account-head:hover {
  border-color: #D6E8FF;
  box-shadow: var(--shadow-md);
}
.account-avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2f5bbf, #5484FF);
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(47, 91, 191, 0.28);
}
.account-head-info { flex: 1; min-width: 0; }
.account-name {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 8px;
}
.account-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.account-meta .am-item {
  font-size: 13px;
  color: #8999B5;
  padding: 3px 10px;
  background: #f0f3f7;
  border-radius: 7px;
  white-space: nowrap;
}
.account-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: var(--r-full);
  background: #e8f0fe;
  color: #2f5bbf;
  border: 1px solid #D6E8FF;
  white-space: nowrap;
}

/* Support card (contact customer service) */
/* ===== 联系客服 ===== */
.support-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(47, 91, 191,.08), var(--bg-card) 60%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.support-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: #e8f0fe;
  color: #2f5bbf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.support-hero-icon svg { width: 26px; height: 26px; }
.support-hero-text { flex: 1; min-width: 0; }
.support-hero-text h2 { margin: 0 0 4px; font-size: 20px; }
.support-hero-text p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.support-online {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.2);
  padding: 5px 12px;
  border-radius: 99px;
}
.support-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.22);
  animation: support-pulse 1.6s ease-in-out infinite;
}
@keyframes support-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.22); }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,.10); }
}

.support-card {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  transition: border-color var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease);
}
.support-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }

.support-qr-col { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.support-qr-frame {
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15,23,42,.05);
}
.support-qr-placeholder {
  width: 170px;
  height: 170px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-hover);
}
.support-qr-placeholder svg { opacity: .4; }
.support-qr-img {
  width: 170px;
  height: 170px;
  border-radius: 10px;
  display: block;
  object-fit: contain;
}
.support-qr-sub { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.support-qr-hint { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

.support-info { flex: 1; min-width: 0; }
.support-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.support-item { margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.support-item:last-child { margin-bottom: 0; }
.support-item-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.support-item-ic svg { width: 19px; height: 19px; }
.support-ic-wechat { background: #EAF7EF; color: #1CBD2C; }
.support-ic-email { background: #F3F0FF; color: #7C5CFF; }
.support-ic-time { background: #e8f0fe; color: #2f5bbf; }
.support-ic-scene { background: #FFF3E6; color: #F17D43; }
.support-item-body { flex: 1; min-width: 0; }
.support-item-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.support-item-value { font-size: 15px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 10px; }
.support-scenes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.support-scenes span {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 12px;
  font-weight: 500;
}

.btn-copy {
  padding: 5px 14px; font-size: 12px; font-weight: 600; border-radius: 8px;
  background: #e8f0fe; color: #2f5bbf; border: none; cursor: pointer;
  transition: all .2s;
}
.btn-copy:hover { background: #2f5bbf; color: #fff; }

.support-tip {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}
.support-tip-ic { color: #2f5bbf; display: flex; }
.support-tip-ic svg { width: 16px; height: 16px; }

/* Security card (account security page) */
.security-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease);
}
.security-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}
.security-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
}
.security-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--warning-dim);
  color: var(--warning);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.security-head-info { flex: 1; min-width: 0; }
.security-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.security-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.security-form { border: none; border-radius: 0; box-shadow: none; }
.security-form:hover { box-shadow: none; }

/* 账号中心卡片 */
.acct-card .security-head {
  padding: 0 0 18px;
  background: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.acct-card .security-icon {
  width: 42px;
  height: 42px;
}
.acct-card .security-icon.security-icon-netdisk {
  background: transparent;
  padding: 0;
}
.security-icon.security-icon-netdisk .ndlogo {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 14px;
}

/* 账号中心 Tab */
.acct-tabs {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.acct-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.acct-tab svg { width: 16px; height: 16px; }
.acct-tab:hover { color: var(--text); border-color: var(--border-hover); }
.acct-tab.active {
  color: var(--primary);
  background: #e8f0fe;
  border-color: #D6E8FF;
}
.acct-pane {
  display: none;
}
.acct-pane.active { display: block; }

/* 垂直表单布局（label 在上，input 在下） */
.form-row-v {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.form-row-v label {
  width: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.form-row-v input {
  width: 100%;
  max-width: 420px;
}

/* 密码安全面板：紧凑布局 */
#acct-pane-security .form-card { padding: 22px 26px; }
#acct-pane-security .security-head { padding: 0 0 12px; margin-bottom: 14px; }
#acct-pane-security .security-title { font-size: 15px; }
#acct-pane-security .security-desc { font-size: 12px; }
#acct-pane-security .form-row-v { gap: 6px; margin-bottom: 14px; }
#acct-pane-security .form-row-v input { max-width: 360px; padding: 10px 14px; }

/* Form row with icon labels */
.form-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 30px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: all var(--duration) var(--ease);
}
.btn-primary:hover {
  background: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--primary-glow);
}
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 30px;
  background: transparent;
  color: var(--primary);
  border: 1.5px solid rgba(47, 91, 191,0.3);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--duration) var(--ease);
}
.btn-outline:hover {
  background: var(--primary-dim);
  border-color: var(--primary);
}

.btn-sm {
  padding: 7px 16px;
  font-size: 12px;
}

/* 图文纪要「编辑」按钮（弹窗 / 沉浸视图 / 文本纪要共用） */
.btn-edit-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover, var(--primary)));
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  box-shadow: 0 2px 8px var(--primary-glow, rgba(47, 91, 191, .25));
  transition: filter .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s var(--ease);
}
.btn-edit-summary svg { width: 13px; height: 13px; flex: none; }
.btn-edit-summary:hover:not(:disabled) {
  filter: brightness(1.06) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px var(--primary-glow, rgba(47, 91, 191, .32));
}
.btn-edit-summary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px var(--primary-glow, rgba(47, 91, 191, .25));
}
.btn-edit-summary:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.25);
  transform: none;
}

/* ================================================================
   LOGIN PAGE
   ================================================================ */
.auth-page { display: flex; min-height: calc(100vh - 64px); }

.auth-left {
  flex: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 56px;
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(640px 420px at 12% 0%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(640px 440px at 90% 110%, rgba(255,255,255,.15), transparent 60%),
    linear-gradient(135deg, #1e63c8, #3c87ef);
}
.auth-left::before {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  top: -110px;
  left: -90px;
  background: radial-gradient(circle, rgba(255,255,255,.4), transparent 70%);
  filter: blur(60px);
  opacity: .4;
  animation: loginDrift 16s ease-in-out infinite;
}
.auth-left::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  bottom: -90px;
  right: -70px;
  background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%);
  filter: blur(60px);
  opacity: .4;
  animation: loginDrift 16s ease-in-out infinite;
  animation-delay: -5s;
}
@keyframes loginDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(22px, -16px) scale(1.05); }
  66% { transform: translate(-16px, 12px) scale(.97); }
}
.auth-dots {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 40% 40%, #000, transparent);
          mask-image: radial-gradient(ellipse 85% 80% at 40% 40%, #000, transparent);
}
.auth-side-in { position: relative; z-index: 2; width: 100%; max-width: 470px; display: flex; flex-direction: column; box-sizing: border-box; }

.auth-msg { margin: 6px 0 32px; }
.auth-msg h1 { font-size: 40px; line-height: 1.22; font-weight: 800; letter-spacing: .5px; color: #fff; margin: 0 0 12px; white-space: nowrap; }
.auth-msg .auth-hl { background: linear-gradient(90deg, #fff, #e0ecff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.auth-msg p { font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.75; margin: 0; max-width: 420px; }

.auth-phone { position: relative; margin-bottom: 32px; }
.auth-corner {
  position: absolute;
  right: -12px;
  top: -12px;
  z-index: 3;
  background: #fff;
  color: #1e63c8;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: 0 10px 24px -6px rgba(30,99,200,.4);
}
.auth-pcard { background: linear-gradient(180deg, #fff, #f2f6fd); border-radius: 18px; box-shadow: 0 30px 70px -24px rgba(2,12,42,.4), 0 6px 18px rgba(2,12,42,.15); overflow: hidden; }
.auth-phead { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 12px; font-weight: 700; color: #2d3543; background: linear-gradient(180deg, #fff, #f4f8ff); border-bottom: 1px solid #e8eefc; }
.auth-rec { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: loginPulse 1.6s ease-out infinite; }
@keyframes loginPulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); } 70% { box-shadow: 0 0 0 7px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.auth-phead .auth-tt { flex: 1; color: #5b6b84; font-weight: 600; }
.auth-phead .auth-dur { color: #9aa7bd; font-weight: 600; }
.auth-pbody { padding: 14px 16px 4px; }
.auth-talk { display: flex; gap: 10px; margin-bottom: 12px; }
.auth-av { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.auth-av--a { background: linear-gradient(135deg, #1e63c8, #59a7f0); }
.auth-av--b { background: linear-gradient(135deg, #0aa2c0, #4fd1e5); }
.auth-talk b { display: block; font-size: 11.5px; color: #7d8aa0; font-weight: 700; margin-bottom: 3px; }
.auth-talk p { font-size: 12.5px; color: #3d4a63; line-height: 1.6; margin: 0; }
.auth-talk p em { font-style: normal; background: #eaf2ff; border-radius: 4px; padding: 0 4px; color: #1e63c8; }
.auth-waveline { display: flex; align-items: flex-end; gap: 2.5px; height: 24px; margin: 4px 0 6px; }
.auth-waveline i { flex: 1; border-radius: 2px; background: linear-gradient(180deg, #8cb8f8, #1e63c8); opacity: .85; }
.auth-pfoot { display: flex; gap: 8px; padding: 2px 16px 14px; margin-top: 6px; }
.auth-pfoot span { font-size: 11.5px; font-weight: 600; color: #3d5b86; background: #fff; border: 1px solid #dfe8f7; border-radius: 999px; padding: 5px 12px; }
.auth-pfoot .auth-export { margin-left: auto; color: #fff; background: linear-gradient(90deg, #1e63c8, #8cb8f8); border: none; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.auth-pfoot .auth-export svg { width: 11px; height: 11px; }

.auth-features { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.auth-features span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 7px 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.auth-features span svg { width: 13px; height: 13px; color: #fff; flex: none; }

.auth-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 32px;
  background:
    radial-gradient(600px 360px at 100% 0%, rgba(140,184,248,.4), transparent 55%),
    linear-gradient(180deg, #eef5ff, #fafcff 45%, #ffffff);
}
.auth-card-wrap { width: 100%; max-width: 400px; }

.auth-card {
  width: 100%;
  background: #fff;
  border: 1px solid #e3ecfa;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 70px -26px rgba(30,99,200,.28), 0 4px 14px rgba(30,99,200,.05);
  padding: 24px 28px 20px;
  text-align: center;
}
.auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #1e63c8, #8cb8f8); }
.auth-card h2 { font-size: 20px; font-weight: 800; margin: 2px 0 0; color: var(--text); letter-spacing: .5px; }
.auth-card .auth-sub { font-size: 12.5px; color: var(--text-secondary); margin: 6px 0 14px; }

.auth-tabs { display: flex; gap: 4px; padding: 3px; margin-bottom: 14px; background: #f0f5fd; border: 1px solid #e0eafb; border-radius: 10px; }
.auth-tab {
  flex: 1;
  padding: 7px;
  background: none;
  border: none;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: all var(--duration) var(--ease);
}
.auth-tab.active { background: #fff; color: #1e63c8; box-shadow: 0 4px 12px rgba(30,99,200,.18); }

.auth-form .form-group { margin-bottom: 11px; }
.auth-form label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #3d4a5f;
  margin-bottom: 5px;
  text-align: left;
}
.auth-form input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #dfe8f7;
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  background: #f9fbff;
  outline: none;
  transition: all var(--duration) var(--ease);
}
.auth-form input::placeholder { color: var(--text-muted); }
.auth-form input:focus { border-color: #1e63c8; background: #fff; box-shadow: 0 0 0 3px rgba(30,99,200,.12); }

/* 短信验证码行：输入框 + 发送按钮 + 倒计时态 */
.auth-form .sms-row { display: flex; gap: 10px; align-items: stretch; }
.auth-form .sms-row input { flex: 1 1 auto; min-width: 0; }
.auth-form .sms-row .sms-send-btn {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  border: 1.5px solid #dfe8f7;
  background: #f9fbff;
  color: #1e63c8;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.auth-form .sms-row .sms-send-btn:hover:not(:disabled) {
  border-color: #1e63c8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(30,99,200,.12);
}
.auth-form .sms-row .sms-send-btn:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: .7;
}

/* 滑块悬浮气泡（点「获取验证码」拉起，悬浮在按钮上方；无遮罩）*/
.sms-captcha-anchor {
  position: relative;
}
.sms-captcha-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 340px;
  max-width: 90vw;
  padding: 0 0 16px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.06);
  z-index: 50;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.sms-captcha-popover.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.sms-captcha-popover[hidden] { display: none; }
.sms-captcha-popover-arrow {
  position: absolute;
  right: 28px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: var(--bg-card, #fff);
  border-right: 1px solid var(--border, #e2e8f0);
  border-bottom: 1px solid var(--border, #e2e8f0);
  transform: rotate(45deg);
  z-index: -1;
}
.sms-captcha-popover-stripe {
  height: 4px;
  background: linear-gradient(90deg, #2f5bbf 0%, #8b5cf6 50%, #ec4899 100%);
  margin-bottom: 14px;
}
.sms-captcha-popover-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  margin-bottom: 4px;
}
.sms-captcha-popover-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1f2937);
}
.sms-captcha-popover-ico {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(47, 91, 191,.12), rgba(139,92,246,.12));
  color: #2f5bbf;
}
.sms-captcha-popover-ico svg {
  width: 13px;
  height: 13px;
}
.sms-captcha-popover-close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted, #94a3b8);
  padding: 4px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all .2s cubic-bezier(.4,0,.2,1);
}
.sms-captcha-popover-close svg {
  width: 14px;
  height: 14px;
}
.sms-captcha-popover-close:hover {
  color: var(--text, #1f2937);
  background: rgba(15,23,42,.06);
  transform: rotate(90deg);
}
.sms-captcha-popover-sub {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  padding: 0 18px;
  margin-bottom: 12px;
}
.sms-captcha-popover-track-wrap {
  margin: 0 18px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(47, 91, 191,.04), rgba(139,92,246,.04));
  border: 1px solid rgba(47, 91, 191,.08);
  border-radius: 10px;
}
.sms-captcha-popover-hint {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  padding: 0 18px;
  margin-top: 10px;
  text-align: center;
}
.sms-captcha-popover-hint b {
  color: var(--text, #1f2937);
  font-weight: 600;
}

.auth-error { color: var(--danger); font-size: 12.5px; margin-bottom: 10px; min-height: 18px; text-align: left; }

.auth-submit {
  width: 100%;
  padding: 11px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(90deg, #1e63c8, #8cb8f8);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 28px -6px rgba(30,99,200,.5);
}
.auth-submit:hover { filter: brightness(1.07); transform: translateY(-1px); }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; }

.auth-footer { text-align: center; margin-top: 12px; font-size: 12.5px; color: var(--text-muted); }
.auth-footer a { color: #1e63c8; font-weight: 600; }
.auth-footer a:hover { text-decoration: underline; }

.auth-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.auth-chips span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #3d5b86; background: rgba(255,255,255,.85); border: 1px solid #e0eafb; border-radius: 999px; padding: 6px 12px; box-shadow: 0 4px 12px rgba(30,99,200,.06); }
.auth-chips svg { width: 12px; height: 12px; color: #1e63c8; }
.auth-side-mini { margin-top: 18px; text-align: center; font-size: 12px; color: var(--text-muted); }
.auth-side-mini b { color: #3d7bcc; font-weight: 600; }

.auth-agreement { margin-bottom: 10px; }
.auth-agreement-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
  margin-bottom: 0;
  text-align: left;
}
.auth-agreement-label input[type="checkbox"] { width: 15px; height: 15px; margin: 2px 0 0; flex-shrink: 0; accent-color: #1e63c8; cursor: pointer; }
.auth-agreement-label a { color: #1e63c8; font-weight: 600; text-decoration: none; }
.auth-agreement-label a:hover { text-decoration: underline; }

.agreement-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 36px 24px 80px;
}
.agreement-head { margin-bottom: 28px; }
.agreement-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
  text-decoration: none;
}
.agreement-back:hover { text-decoration: underline; }
.agreement-head h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.agreement-updated {
  font-size: 12px;
  color: var(--text-muted);
}
.agreement-body {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 36px;
}
.agreement-section { margin-bottom: 24px; }
.agreement-section:last-child { margin-bottom: 0; }
.agreement-section h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.agreement-section p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* ================================================================
   MEMBERSHIP PAGE
   ================================================================ */
/* 全宽布局：内容随窗口伸展（安全边距 40px），1920px 以上触顶不再拉伸，
   避免 4K 屏下单卡被拉到 800px+ 的离谱宽度。原为 max-width:1240 居中限宽，
   宽屏下两侧各留 300px+、套餐卡恒定 222px 不随屏幕变宽（用户反馈"不是宽屏"）。
   导航/页脚内容经 .page-layout--wide 同步全宽，保持同一左缘。 */
.membership-page {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 16px;
}


/* ===== 订阅套餐：标题行 + 全宽套餐卡 + 免费体验条 + 福利区 + 置底结算条 ===== */
/* 布局沿革：福利区原本是「左侧 252px 窄栏」——8 项挤在窄栏里，又会把右侧卡片压到 ~230px，
   整页发闷。改成卡片下方的全宽区块后卡片约 290px，纵向留白也拉开了。改动时别再退回窄栏。 */
.mem-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.mem-head h1 { margin: 0; font-size: 22px; font-weight: 900; color: var(--text); letter-spacing: -.02em; }
.mem-head p { margin: 0; font-size: 13.5px; color: var(--text-muted); }
/* 加油包入口：弹层菜单的「加油包」项已去掉，收敛为「顶栏胶囊（仅个人空间）+ 本链接（全空间）」。
   弱化文字链，不抢套餐卡与开通条的主 CTA；企业空间点入后由加油包页自己的提示条说明域边界。 */
.mem-topup-link {
  font-size: 12.5px;
  font-weight: 700;
  color: #2f5bbf;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.mem-topup-link:hover { border-bottom-color: #2f5bbf; }
.mem-head-state {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: #2f5bbf;
  background: #e8f0fe;
  border: 1px solid #cfe0ff;
  border-radius: 10px;
  padding: 4px 12px;
}

/* 套餐卡：全宽四列 + 大间距。
   圆角一律 8~14px —— 用户明确不喜欢胶囊形（999px），改这里时别再退回全圆 pill。 */
/* 一排四张（用户要求）。左栏收窄到 240px + 卡间距 14px 后每张约 222px，
   因此卡内 padding / 价格字号同步下调 —— 直接沿用 18px padding + 34px 价格会挤 */
.mem-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.mem-plan {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 10px -6px rgba(28, 39, 64, .18);
  transition: transform .18s, box-shadow .18s, border-color .18s, background .18s;
}
/* 顶部 3px 细色带：hover 显橙、选中显金 */
.mem-plan::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background .18s;
}
.mem-plan:hover { transform: translateY(-4px); border-color: #bcd0f7; box-shadow: 0 18px 34px -20px rgba(47, 91, 191, .32); }
.mem-plan:hover::before { background: linear-gradient(90deg, #5b8def, #2f5bbf); }
.mem-plan.on {
  border-color: #2f5bbf;
  background: linear-gradient(180deg, #f5f8ff 0%, #eaf1ff 100%);
  box-shadow: 0 18px 34px -18px rgba(47, 91, 191, .5);
}
.mem-plan.on::before { background: linear-gradient(90deg, #5b8def, #2f5bbf); }

/* 卡头：名称 + 「推荐」角标（行内右对齐）。「立省」改为贴卡角的斜角标（.mp-save），不再挤在卡头行内 */
.mp-head { display: flex; align-items: center; gap: 6px; min-height: 24px; flex-wrap: nowrap; }
/* 名称吃掉剩余空间 → 角标/「当前」徽章统一靠右，四张卡的卡头右端对齐 */
.mp-name { margin-right: 0; min-width: 0; white-space: nowrap; font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.mp-ribbon {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #5b8def, #2f5bbf);
  border-radius: 8px;
  padding: 3px 9px;
  letter-spacing: .02em;
  box-shadow: 0 4px 10px -4px rgba(47, 91, 191, .5);
}
/* 立省% 斜角标：挂卡片右上角，旋转 45°；卡片 overflow:hidden 裁成折角。玫红渐变，非蓝 */
.mp-save {
  position: absolute;
  top: 14px;
  right: -34px;
  width: 124px;
  transform: rotate(45deg);
  transform-origin: center;
  background: linear-gradient(135deg, #38bdf8, #f43f5e);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  padding: 4px 0;
  letter-spacing: .02em;
  box-shadow: 0 4px 10px -4px rgba(244, 63, 94, .5);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.mp-cur {
  flex-shrink: 0;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #2f5bbf;
  background: #e8f0fe;
  border: 1px solid #cfe0ff;
  border-radius: 8px;
  padding: 2px 8px;
}
/* 价格行：¥ + 大数字 + 周期，划线原价跟在周期后面（不再单独占一行） */
.mp-price { display: flex; align-items: baseline; gap: 3px; margin-top: 12px; }
.mp-price i { font-style: normal; font-size: 15px; font-weight: 800; color: #2f5bbf; }
.mp-price b { font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: #2f5bbf; }
.mp-price u { text-decoration: none; font-size: 12.5px; color: var(--text-muted); }
.mp-price s { margin-left: 5px; font-size: 12px; color: var(--text-muted); text-decoration: line-through; }
/* 折合月价 + 总时长：一行放下，价格区不再堆三行 */
.mp-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 18px; }
.mp-per { font-size: 11.5px; color: var(--text-muted); }
.mp-total {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #2f5bbf;
  background: #e8f0fe;
  border-radius: 7px;
  padding: 2px 8px;
}
.mem-plan.on .mp-total { background: linear-gradient(90deg, #5b8def, #2f5bbf); color: #fff; }
/* 分隔线把「价格区」与「权益区」切开，层次比全部堆在一起清楚 */
.mp-div { height: 1px; margin: 14px 0 12px; background: linear-gradient(90deg, var(--border), rgba(0, 0, 0, 0)); }
.mp-feats { flex: 1; list-style: none; margin: 0; padding: 0; }
.mp-feats li { display: flex; align-items: flex-start; gap: 7px; padding: 4px 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.mp-feats li svg { width: 14px; height: 14px; margin-top: 2px; color: #2fa65a; flex-shrink: 0; }
.mp-feats li:first-child { font-weight: 700; color: var(--text); }
.mp-cta {
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 800;
  border-radius: 10px;
  padding: 10px 0;
  color: #2f5bbf;
  background: #fff;
  border: 1.5px solid #bcd0f7;
  transition: color .15s, background .15s, border-color .15s, box-shadow .15s;
}
.mem-plan:hover .mp-cta { border-color: #2f5bbf; color: #1e4aa8; background: #f3f7ff; }
.mem-plan.on .mp-cta {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #5b8def, #2f5bbf);
  box-shadow: 0 8px 18px -8px rgba(47, 91, 191, .55);
}
/* 当前套餐卡：不可选，鼠标默认、CTA 中性灰，hover 不变蓝 */
.mem-plan[data-selectable="0"] { cursor: default; }
.mem-plan[data-selectable="0"]:hover { transform: none; box-shadow: var(--card-shadow, 0 6px 20px -10px rgba(20,30,60,.12)); }
.mp-cta--disabled { color: #97a0b0; background: #f1f3f7; border-color: #e3e7ee; cursor: default; }
.mem-plan[data-selectable="0"]:hover .mp-cta--disabled { color: #97a0b0; background: #f1f3f7; border-color: #e3e7ee; }

/* 免费体验条 */
.mem-free-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  /* 与结算条的间距由 .mem-wrap 统一给，这里再留一份会在免费条隐藏时丢间距、显示时叠加 */
  margin-bottom: 0;
  background: #f6f8fb;
  border: 1px dashed #c9d4e4;
  border-radius: 14px;
  padding: 14px 18px;
}
.mem-free-strip .ic {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 11px;
  background: #fff;
  border: 1px solid #e1e8f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.mem-free-strip b { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); }
.mem-free-strip small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }

/* 会员专属福利：套餐卡左侧的独立卡片（240px 固定宽，sticky 跟随滚动）。
   沿革：252px 窄栏 + 4 列卡（两边都挤）→ 全宽平铺（丢了左栏）→ 现在「240px 左栏 + 一排四张」。
   一排四张时每张卡约 222px，所以卡内 padding / 价格字号是配套的，单独调大其中一个就会挤。 */
.mem-wrap { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 20px; }
.mem-cards { flex: 1; min-width: 0; }
.mem-benefits {
  flex: 0 0 240px;
  width: 240px;
  /* 跟随滚动：福利栏比卡片区矮，不 sticky 会在下方留一大片空白 */
  position: sticky;
  top: 8px;
  padding: 16px 14px 12px;
  border-radius: 14px;
  background: linear-gradient(170deg, #f4f7ff 0%, #e9f0ff 55%, #ffffff 100%);
  border: 1.5px solid #dbe7ff;
  box-shadow: 0 10px 26px -20px rgba(28, 39, 64, .55);
}
.mem-bf-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #cfdcf7;
}
.mem-bf-head .ic {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #6c8cff, #3f5fd8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  box-shadow: 0 8px 16px -8px rgba(63, 95, 216, .75);
}
.mem-bf-head h3 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.mem-bf-head p { margin: 3px 0 0; font-size: 11.5px; color: var(--text-muted); }
.mem-benefit-list { display: flex; flex-direction: column; margin-top: 6px; }
.mem-benefit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.mem-benefit:hover { background: #fff; transform: translateX(2px); box-shadow: 0 6px 14px -10px rgba(28, 39, 64, .6); }
.mem-benefit .ic {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #dbe7ff;
  box-shadow: 0 4px 8px -6px rgba(28, 39, 64, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.mem-benefit b { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.mem-benefit small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }

/* 结算条：会员页与加油包页共用，置底固定（不贴死边缘：bottom/margin-bottom 均 18px）。
   原实现只有 position:sticky;bottom:0，但开通条的自然位置紧跟套餐卡、首屏即在视野内，
   sticky 的 bottom 只在「自然位置低于折叠线」时才吸底 → 永不触发，滚动后条子照常滚走。
   现行机制（见下方「置底固定」块）：flex 列 + margin-top:auto 把自然位置压到容器底部，
   短内容=可视区底部上方 18px；自然位置低于折叠线后 sticky 接替吸底（bottom:18px），
   滚到尽头回归自然位（停在页脚上方 18px，不遮页脚）。 */
.mem-paybar {
  position: sticky;
  bottom: 18px;
  z-index: 6;
  margin-top: auto;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1.5px solid #cfe0ff;
  border-radius: 14px;
  padding: 16px 22px;
  box-shadow: 0 -10px 28px -14px rgba(28, 39, 64, .38), 0 10px 26px -18px rgba(47, 91, 191, .30);
}

/* ══ 开通条置底固定（会员套餐 / 加油包页共用，仅这两个页面挂 page-layout--wide） ══
   链路：.page-layout(列flex, min-height:100%) > .page-body(flex:1) > .membership-page
   把 .membership-page 变列 flex 并撑满 .page-body，条子 margin-top:auto 吃掉剩余空间。
   不用 fixed：天然避开侧栏宽度（232px / ≤1100px 208px）与 z-index 博弈，壳内外同一套规则；
   条子仍占文档流，不会盖住页脚（壳内页脚本就隐藏，guest 模式滚到尽头条子停在页脚上方）。 */
.page-layout--wide > .page-body > .membership-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
/* 加油包页多一层 .tp-page 包着 Hero/档位/条子，必须接力撑满，否则 auto margin 没有空间可吃 */
.tp-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mpb-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mpb-label { font-size: 13px; color: var(--text-muted); }
.mpb-price { display: flex; align-items: baseline; gap: 2px; color: #2f5bbf; }
.mpb-price i { font-style: normal; font-size: 14px; font-weight: 800; }
.mpb-price b { font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.mpb-desc { font-size: 12.5px; color: var(--text-secondary); }
.mpb-note { font-size: 11.5px; font-weight: 600; color: #2f5bbf; background: #e8f0fe; border-radius: 6px; padding: 2px 8px; }
.btn-mem-pay {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #5b8def, #2f5bbf);
  border-radius: 10px;
  padding: 12px 34px;
  box-shadow: 0 10px 22px -10px rgba(47, 91, 191, .55);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-mem-pay:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 26px -10px rgba(47, 91, 191, .6); }

/* 一排四张需要 ~800px 以上的卡片区；中屏放不下就先让福利栏回顶部全宽，把整幅宽度让给卡片，
   仍保持一排四张。顺序不能反 —— 先牺牲栏位，再牺牲「一排四张」。 */
@media (max-width: 1180px) {
  .mem-wrap { flex-direction: column; }
  .mem-benefits { flex: none; width: 100%; position: static; }
  .mem-benefit-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 22px; }
}
@media (max-width: 1024px) {
  /* 再窄就只能 2×2，否则每张卡会被压到 150px 以下 */
  .mem-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .mem-head { margin-bottom: 14px; }
  .mem-head-state { margin-left: 0; }
  .mem-plans { grid-template-columns: 1fr; }
  .mem-benefit-list { grid-template-columns: 1fr; }
  .mem-benefits { padding: 16px 14px 12px; }
  .mem-paybar { flex-direction: column; align-items: stretch; }
}

/* ===== 加油包独立页（布局：Hero + 计费规则 + 时长卡 + 置底应付条） ===== */
/* 注意：.tp-page 不要设 padding-bottom —— 应付条是 sticky bottom:18px（与 margin-bottom:18px 配套，
   离视口底部留一点间距，避免「卡」在边缘），留了内边距吸底就会有缝 */
.tp-page { padding-bottom: 0; }
/* 企业空间提示：会员套餐 / 加油包都属个人会员域，与企业空间不是一套。两页共用 */
.mem-space-tip, .tp-space-tip {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, .35);
  background: rgba(245, 158, 11, .08);
  font-size: 13px;
  line-height: 1.6;
}
.mem-space-tip .sub, .tp-space-tip .sub { margin-top: 6px; opacity: .75; }

/* Hero：标题 + 卖点 + 当前剩余分钟 + 计费规则（合并为单张卡片） */
.tp-hero {
  padding: 20px 22px 18px;
  margin-bottom: 22px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #2f5bbf 0%, #4b7de5 55%, #6a8ff0 100%);
  box-shadow: 0 14px 30px -18px rgba(47, 91, 191, .8);
}
.tp-hero-top { display: flex; align-items: center; gap: 16px; /* 全宽下右侧「当前可用时长」推至右缘，避免中间空洞 */ justify-content: space-between; }
.tp-hero-ic {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.tp-hero-txt { flex: 1; min-width: 0; }
.tp-hero-txt h1 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.tp-hero-txt p { margin: 5px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .85); }
.tp-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.tp-chip {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
}
.tp-hero-left { flex-shrink: 0; text-align: right; padding-left: 8px; }
.tp-hero-left .lb { font-size: 12px; color: rgba(255, 255, 255, .8); }
.tp-hero-left .num { font-size: 30px; font-weight: 900; line-height: 1.15; letter-spacing: -.02em; }
.tp-hero-left .num small { font-size: 13px; font-weight: 700; margin-left: 3px; }
.tp-hero-left .unit { margin-top: 2px; font-size: 11.5px; color: rgba(255, 255, 255, .72); }

/* 计费规则：与 Hero 合并为同卡片底部的浅色 inset 条（按量计费 / 长期有效 / 个人空间专用） */
.tp-hero-notes {
  margin-top: 16px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 18px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 12px;
}
.tp-note-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 14px;
  border-left: 1px solid rgba(255, 255, 255, .20);
}
.tp-note-item:first-child { border-left: none; padding-left: 0; }
.tp-note-ic {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .30);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.tp-note-t { font-size: 13px; font-weight: 800; color: #fff; }
.tp-note-d { margin-top: 3px; font-size: 11.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); }

/* 时长卡 */
.tp-sec-title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.tp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 16px; }
.tp-opt {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 20px 18px 15px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border: 1.5px solid var(--border);
  transition: transform .16s, box-shadow .16s, border-color .16s, background .16s;
}
/* 顶部细色带：hover 显橙、选中显金，比整块边框突变更柔和 */
.tp-opt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background .16s;
}
.tp-opt:hover { transform: translateY(-3px); border-color: #bcd0f7; box-shadow: 0 16px 30px -18px rgba(28, 39, 64, .38); }
.tp-opt:hover::before { background: linear-gradient(90deg, #5b8def, #2f5bbf); }
.tp-opt.on {
  border-color: #2f5bbf;
  background: linear-gradient(165deg, #f5f8ff 0%, #eaf1ff 100%);
  box-shadow: 0 18px 34px -18px rgba(47, 91, 191, .5);
}
.tp-opt.on::before { background: linear-gradient(90deg, #5b8def, #2f5bbf); }
/* 卡头：时长 + 角标（角标行内右对齐，与套餐卡 .mp-ribbon 同一手法） */
.tp-opt-head { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.tp-opt-tag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #5b8def, #2f5bbf);
  padding: 3px 9px;
  border-radius: 8px;
  letter-spacing: .02em;
  box-shadow: 0 4px 10px -4px rgba(47, 91, 191, .5);
}
.tp-opt-min {
  margin-right: auto;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 30px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.tp-opt-min em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.tp-opt-price { margin-top: 10px; display: flex; align-items: baseline; gap: 2px; color: #2f5bbf; }
.tp-opt-price i { font-style: normal; font-size: 15px; font-weight: 800; }
.tp-opt-price b { font-size: 26px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.tp-opt-sub {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px dashed rgba(28, 39, 64, .13);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.tp-opt.on .tp-opt-sub { border-top-color: rgba(47, 91, 191, .35); }
.tp-loading, .tp-err { font-size: 14px; color: var(--text-muted); padding: 20px 0; }

/* 应付条复用会员页 .mem-paybar / .mpb-* / .btn-mem-pay，这里只补锁定态 */
.btn-mem-pay--locked {
  background: linear-gradient(135deg, #c3c8d2, #a8aebb);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-mem-pay--locked svg { width: 14px; height: 14px; }
/* 置底能力已在 .mem-paybar 基础规则里（会员页与加油包页共用），这里不重复声明 */
/* 应付条右侧操作区：按钮 + 锁定说明。不可省 —— 少了它 .tp-tip 会被 flex 拉成右侧长条 */
.tp-pay-act { flex-shrink: 0; text-align: right; }
.tp-tip { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 720px) {
  .tp-hero { padding: 18px 16px 16px; }
  .tp-hero-top { flex-direction: column; align-items: flex-start; }
  .tp-hero-left { text-align: left; padding-left: 0; }
  .tp-hero-notes { grid-template-columns: 1fr; gap: 0; padding: 6px 14px; }
  .tp-note-item { border-left: none; border-top: 1px solid rgba(255, 255, 255, .18); padding: 10px 0; }
  .tp-note-item:first-child { border-top: none; padding-top: 2px; }
  .tp-pay-act { text-align: left; }
}

.plan-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 20px 26px;
  text-align: center;
  position: relative;
  transition: all var(--duration-slow) var(--ease);
  display: flex;
  flex-direction: column;
}
.plan-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}
.plan-card.current {
  border-color: #2f5bbf;
  box-shadow: 0 0 0 2px rgba(47, 91, 191,0.15), var(--shadow-md);
}
.plan-card.featured {
  border-color: rgba(47, 91, 191,0.4);
  border-width: 1.5px;
  background: linear-gradient(180deg, #ffffff, #f3f7ff);
  box-shadow: 0 12px 36px rgba(47, 91, 191,0.12);
}
.plan-card.featured:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 44px rgba(47, 91, 191,0.16);
}

.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2f5bbf, #5b8def);
  color: #fff;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(47, 91, 191,0.35);
}

.plan-icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 18px;
  border-radius: 18px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(15,23,42,0.14);
}
.plan-icon-free { background: linear-gradient(135deg, #94a3b8, #64748b); }
.plan-icon-minute { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.plan-icon-monthly { background: linear-gradient(135deg, #2f5bbf, #2f5bbf); }
.plan-icon-quarterly { background: linear-gradient(135deg, #8b7cf6, #6d5ae0); }
.plan-icon-half_year { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.plan-icon-yearly { background: linear-gradient(135deg, #5b8def, #2552a8); }
.plan-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.plan-tagline {
  font-size: 12px;
  font-weight: 700;
  color: #2f5bbf;
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 0 6px;
}
.plan-name-add {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  transform: translateY(-4px);
  padding: 1px 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  font-style: normal;
  line-height: 1.6;
  box-shadow: 0 3px 8px rgba(16,185,129,0.3);
}
.plan-price { margin-bottom: 14px; line-height: 1; }
.plan-off {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f43f5e, #fb923c);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(244,63,94,0.32);
}

.plan-save { margin: 0 0 16px; }
.plan-save-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--success-dim);
  color: var(--success);
  border: 1px solid rgba(16,185,129,0.2);
  font-size: 12px;
  font-weight: 700;
}
.price-free {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-muted);
}
.price-currency {
  font-size: 15px;
  font-weight: 600;
  color: #2f5bbf;
  vertical-align: top;
  position: relative;
  top: 6px;
}
.price-num {
  font-size: 40px;
  font-weight: 900;
  color: #2f5bbf;
  letter-spacing: -0.04em;
}
.price-unit {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.plan-features {
  list-style: none;
  text-align: left;
  margin-bottom: 22px;
  flex: 1;
}
.plan-features li {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--r-xs);
  margin-bottom: 2px;
  color: var(--text-secondary);
}
.plan-features li svg { flex-shrink: 0; opacity: 0.7; color: var(--success); }
.plan-features li.pf1 { color: var(--text-secondary); }
.plan-features li.pf2 { color: var(--text-secondary); }
.plan-features li.pf3 { color: var(--text-secondary); }
.plan-features li.pf4 { color: var(--text-secondary); }
.plan-features li.pf5 { color: var(--text-secondary); }
.plan-features li.pf6 { color: var(--text-secondary); }

.btn-plan {
  width: 100%;
  padding: 12px;
  border: 1.5px solid rgba(47, 91, 191,0.3);
  background: transparent;
  color: #2f5bbf;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  margin-top: auto;
  transition: all var(--duration) var(--ease);
}
.btn-plan:hover {
  background: #2f5bbf;
  color: #fff;
  border-color: #2f5bbf;
  box-shadow: 0 6px 18px rgba(47, 91, 191,0.28);
}
.btn-plan.current {
  background: var(--bg-hover);
  color: var(--text-muted);
  border-color: var(--border);
  cursor: default;
  box-shadow: none;
}
.plan-card.featured .btn-plan:not(.current) {
  background: linear-gradient(135deg, #2f5bbf, #5b8def);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(47, 91, 191,0.32);
}
.plan-card.featured .btn-plan:not(.current):hover {
  filter: brightness(1.08);
}

/* ================================================================
   MEMBERSHIP CARD (User Center)
   ================================================================ */
.membership-card {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
  box-shadow: 0 14px 40px rgba(47, 91, 191,0.14);
  transition: box-shadow var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}
.membership-card.free {
  background: linear-gradient(160deg, var(--bg-card) 0%, #F6F7F9 100%);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
}
.membership-card.paid {
  background: linear-gradient(135deg, #5b8def 0%, #2f5bbf 52%, #2552a8 100%);
  border: none;
  color: #fff;
  box-shadow: 0 18px 48px rgba(47, 91, 191,0.32);
}
.membership-card-glow {
  position: absolute;
  top: -90px;
  right: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
}
.membership-card.free .membership-card-glow {
  background: radial-gradient(circle, rgba(47, 91, 191,0.10) 0%, transparent 70%);
}
.membership-card.paid .membership-card-glow {
  background: radial-gradient(circle, rgba(255,255,255,0.20) 0%, transparent 70%);
}
.membership-card-ring {
  position: absolute;
  left: 50%;
  bottom: -140px;
  transform: translateX(-50%);
  width: 440px;
  height: 260px;
  border-radius: 50%;
  pointer-events: none;
}
.membership-card.free .membership-card-ring {
  border: 1px solid rgba(47, 91, 191,0.10);
}
.membership-card.paid .membership-card-ring {
  border: 1px solid rgba(255,255,255,0.16);
}

.membership-card-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 30px 20px;
}
.membership-card.free .membership-card-header {
  border-bottom: 1px solid var(--border);
}

.membership-card-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.membership-card-icon {
  font-size: 30px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(47, 91, 191,0.18);
}
.membership-card.free .membership-card-icon {
  background: #e8f0fe;
  box-shadow: 0 4px 14px rgba(47, 91, 191,0.14);
}
.membership-card.paid .membership-card-icon {
  background: rgba(255,255,255,0.20);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.membership-card-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 12px;
  border-radius: var(--r-full);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.membership-card.free .membership-card-badge {
  background: #e8f0fe;
  color: #2f5bbf;
  border: 1px solid rgba(47, 91, 191,0.18);
}
.membership-card.paid .membership-card-badge {
  background: rgba(255,255,255,0.22);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.32);
}
.membership-card-type { font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.membership-card.free .membership-card-type { color: var(--text); }
.membership-card.paid .membership-card-type { color: #fff; }
.membership-card-status {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.membership-card.free .membership-card-status { color: #8999B5; }
.membership-card.paid .membership-card-status { color: rgba(255,255,255,0.82); }
.membership-card-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #1CBD2C;
  box-shadow: 0 0 8px rgba(28,189,44,0.5);
}
.membership-card.free .membership-card-status::before { background: #94a3b8; box-shadow: none; }
.membership-card.expired .membership-card-status::before,
.membership-card-status:has(.membership-card-expired)::before { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.5); }

.membership-card-btn {
  position: relative;
  padding: 9px 22px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-white {
  background: #fff;
  color: #2f5bbf;
  border: 1px solid rgba(255,255,255,0.4);
}
.btn-white:hover {
  background: #f0f6ff;
  border-color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
}
.btn-outline-white {
  background: rgba(255,255,255,0.16);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.45);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.28);
  border-color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.membership-card-body {
  position: relative;
  padding: 18px 30px 24px;
}
.membership-card.free .membership-card-body { background: var(--bg-card); }
.membership-card.paid .membership-card-body { background: rgba(255,255,255,0.06); }
.membership-card-row {
  display: flex;
  gap: 0;
}
.membership-card-cell {
  flex: 1;
  min-width: 0;
  padding: 6px 22px;
  border-radius: 0;
  background: transparent;
  transition: background var(--duration) var(--ease);
}
.membership-card-cell:first-child { padding-left: 0; }
.membership-card-cell + .membership-card-cell { border-left: 1px solid var(--border); }
.membership-card.free .membership-card-cell + .membership-card-cell {
  border-left: 1px solid #e4e9f0;
}
.membership-card.paid .membership-card-cell + .membership-card-cell {
  border-left: 1px solid rgba(255,255,255,0.18);
}
.membership-card-cell-label {
  font-size: 11px;
  margin-bottom: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.membership-card.free .membership-card-cell-label { color: #8999B5; }
.membership-card.paid .membership-card-cell-label { color: rgba(255,255,255,0.78); }
.membership-card-cell-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.membership-card-cell-value small {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 2px;
}
.membership-card.free .membership-card-cell-value { color: #2f5bbf; }
.membership-card.paid .membership-card-cell-value { color: #fff; }
.membership-card.paid .membership-card-cell-value small { color: rgba(255,255,255,0.72); }
.membership-card-expired { color: var(--danger); font-weight: 800; }

.membership-quota-bar {
  display: block;
  height: 6px;
  background: rgba(47, 91, 191,0.10);
  border-radius: 4px;
  margin: 8px 0 6px;
  overflow: hidden;
}
.membership-card.paid .membership-quota-bar { background: rgba(255,255,255,0.20); }
.membership-quota-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2f5bbf, #2f5bbf);
  border-radius: 4px;
  transition: width 0.8s var(--ease);
}
.membership-card.paid .membership-quota-fill {
  background: linear-gradient(90deg, #fff, #dbe7ff);
}
.membership-quota-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.membership-card.paid .membership-quota-text { color: rgba(255,255,255,0.72); }

/* Usage stats strip (below membership card) */
/* 会员信息 · 声波状态卡 */
.membership-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-radius: 24px;
  padding: 24px 28px;
  margin-bottom: 24px;
}
.membership-hero.paid {
  color: #fff;
  background:
    radial-gradient(130% 150% at 10% 0%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 48%),
    linear-gradient(128deg, #2B7BFF 0%, #0E5CE8 42%, #08409F 100%);
  box-shadow: 0 18px 44px rgba(11, 69, 179, 0.32);
}
.membership-hero.free {
  color: #1F2937;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(47, 91, 191, 0.09), rgba(47, 91, 191, 0) 55%),
    linear-gradient(120deg, #F5F8FF 0%, #FFFFFF 60%, #EDF3FF 100%);
  border: 1px solid #E4ECFB;
  box-shadow: var(--shadow-sm);
}
.membership-hero.paid::after {
  content: '';
  position: absolute; left: -16%; top: -55%;
  width: 58%; height: 165%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 62%);
  transform: rotate(9deg);
  pointer-events: none;
}
.membership-hero-glow {
  position: absolute; right: -40px; bottom: -110px;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(126, 211, 255, 0.4), rgba(126, 211, 255, 0));
  pointer-events: none;
}
.membership-hero.free .membership-hero-glow {
  background: radial-gradient(closest-side, rgba(47, 91, 191, 0.1), rgba(47, 91, 191, 0));
}
.membership-hero-wave {
  position: absolute; right: -8px; bottom: -18px;
  width: 320px; height: 175px;
  color: #fff; opacity: 0.16;
  pointer-events: none;
}
.membership-hero.free .membership-hero-wave { color: #2f5bbf; opacity: 0.1; }
.membership-hero-cols {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 24px;
  width: 100%;
}
.membership-hero-info { flex: 1; min-width: 0; }
.membership-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  white-space: nowrap; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.membership-hero.free .membership-hero-badge {
  background: rgba(47, 91, 191, 0.08); color: #2f5bbf;
  border-color: rgba(47, 91, 191, 0.18);
  box-shadow: none;
}
.mhb-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.membership-hero-badge .mhb-dot { background: #3DDC97; box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.3); }
.membership-hero.free .membership-hero-badge .mhb-dot {
  background: #38BDF8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22);
}
.membership-hero-name {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em;
}
.membership-hero-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px;
  font-size: 18px; line-height: 1; flex-shrink: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 16px rgba(9, 54, 139, 0.35);
}
.membership-hero.free .membership-hero-icon {
  background: #fff; border-color: #E4ECFB;
  box-shadow: 0 6px 16px rgba(47, 91, 191, 0.12);
}
.membership-hero-status {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 8px; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
}
.membership-hero.free .membership-hero-status {
  background: rgba(47, 91, 191, 0.06);
  border-color: rgba(47, 91, 191, 0.12);
  color: #5B6B80;
}
.mhs-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.mhs-dot.is-good { background: #3DDC97; box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.25); }
.mhs-dot.is-bad { background: #FF5B6A; box-shadow: 0 0 0 3px rgba(255, 91, 106, 0.24); }
.mhs-dot.is-flat { background: #38BDF8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.24); }
.membership-hero-foot {
  display: flex; flex-wrap: wrap; gap: 0 34px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.membership-hero.free .membership-hero-foot { border-top-color: rgba(47, 91, 191, 0.1); }
.membership-hero-stat {
  position: relative; min-width: 0;
  display: inline-flex; align-items: baseline; gap: 7px;
}
.membership-hero-stat + .membership-hero-stat::before {
  content: ''; position: absolute; left: -17px; top: 1px; bottom: 1px;
  width: 1px; background: rgba(255, 255, 255, 0.18);
}
.membership-hero.free .membership-hero-stat + .membership-hero-stat::before {
  background: rgba(47, 91, 191, 0.12);
}
.membership-hero-stat-label {
  font-size: 11px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}
.membership-hero.free .membership-hero-stat-label { color: #94A3B8; }
.membership-hero-stat-value {
  font-size: 15px; font-weight: 700;
  white-space: nowrap;
}
.membership-hero-side {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.membership-hero-cta {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700;
  background: #fff; color: #2f5bbf;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
  transition: all var(--duration) var(--ease);
}
.membership-hero-cta svg { width: 14px; height: 14px; }
.membership-hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.26);
}
.membership-hero-cta.ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: none;
}
.membership-hero-cta.ghost:hover { background: #fff; color: #2f5bbf; }

/* 会员信息 · 成长轨道 */
.membership-track {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 26px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.membership-track-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.membership-track-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #475569;
}
.membership-track-ic { width: 16px; height: 16px; color: #2f5bbf; }
.membership-track-next { font-size: 12.5px; color: #64748B; }
.membership-track-next b { color: #2f5bbf; font-weight: 700; }
.membership-track-steps { display: flex; margin-top: 20px; }
.membership-step {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-decoration: none;
}
.membership-step + .membership-step::before {
  content: ''; position: absolute; top: 12px; left: calc(-50% + 20px);
  width: calc(100% - 40px); height: 3px; border-radius: 2px;
  background: #E9EEF6;
}
.membership-step.done + .membership-step::before {
  background: linear-gradient(90deg, #2f5bbf, #38BDF8);
}
.membership-step-dot {
  position: relative; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid #D7DFEA; color: #fff;
}
.membership-step.done .membership-step-dot {
  background: linear-gradient(135deg, #2f5bbf, #38BDF8);
  border-color: transparent;
}
.membership-step.done .membership-step-dot svg { width: 12px; height: 12px; }
.membership-step.current .membership-step-dot {
  background: linear-gradient(135deg, #2f5bbf, #2552a8);
  border-color: transparent;
  box-shadow: 0 0 0 5px rgba(47, 91, 191, 0.14);
}
.membership-step.current .membership-step-dot::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: #fff;
}
.membership-step-name {
  font-size: 12.5px; font-weight: 600;
  color: #94A3B8; white-space: nowrap;
}
.membership-step.done .membership-step-name,
.membership-step.current .membership-step-name { color: #2f5bbf; font-weight: 700; }
.membership-step-tag {
  margin-top: 1px; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  background: rgba(47, 91, 191, 0.1); color: #2f5bbf;
}

@media (max-width: 680px) {
  .membership-hero { padding: 26px 24px; }
  .membership-hero-cols { flex-direction: column; align-items: flex-start; gap: 22px; }
  .membership-hero-side {
    flex-direction: row; width: 100%; justify-content: space-between;
  }
  .membership-track-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Perks */
.membership-perks {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
}
.membership-perks-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #475569;
}
.membership-perks-title svg { color: #2f5bbf; }
.membership-perks-title::after {
  content: '';
  flex: 1;
  height: 1px;
  margin-left: 8px;
  background: linear-gradient(90deg, #e5e9f0, transparent);
}
.membership-perks-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 18px;
}
.membership-perks-head .membership-perks-title { margin-bottom: 0; }
.membership-perks-count {
  flex-shrink: 0;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(47, 91, 191, 0.08);
  color: #2f5bbf;
}
.membership-perks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.membership-perk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--duration) var(--ease);
}
.membership-perk-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15,23,42,0.1);
}
.membership-perk-dot {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.6);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04);
}
.membership-perk-item.c1 { background: #e8f0fe; color: #2f5bbf; border: 1px solid rgba(47, 91, 191,0.14); }
.membership-perk-item.c1 .membership-perk-dot { color: #2f5bbf; }
.membership-perk-item.c2 { background: rgba(139,92,246,0.08); color: #8b5cf6; border: 1px solid rgba(139,92,246,0.15); }
.membership-perk-item.c2 .membership-perk-dot { color: #8b5cf6; }
.membership-perk-item.c3 { background: var(--success-dim); color: var(--success); border: 1px solid rgba(16,185,129,0.15); }
.membership-perk-item.c3 .membership-perk-dot { color: var(--success); }
.membership-perk-item.c4 { background: var(--warning-dim); color: var(--warning); border: 1px solid rgba(245,158,11,0.15); }
.membership-perk-item.c4 .membership-perk-dot { color: var(--warning); }
.membership-perk-item.c5 { background: rgba(236,72,153,0.08); color: #ec4899; border: 1px solid rgba(236,72,153,0.15); }
.membership-perk-item.c5 .membership-perk-dot { color: #ec4899; }
.membership-perk-item.c6 { background: var(--cyan-dim); color: var(--cyan); border: 1px solid rgba(6,182,212,0.15); }
.membership-perk-item.c6 .membership-perk-dot { color: var(--cyan); }

/* ================================================================
   USAGE DASHBOARD
   ================================================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 16px 0 24px;
  align-items: stretch;
}
.s-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  overflow: hidden;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.s-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  opacity: 0.12;
  pointer-events: none;
  filter: blur(2px);
}
.s-card-plan::before { background: radial-gradient(circle, #2f5bbf 0%, transparent 70%); }
.s-card-stat::before { background: radial-gradient(circle, #DCE6F5 0%, transparent 70%); }
.s-card:hover {
  border-color: #D6E8FF;
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.s-card-plan {
  background: linear-gradient(135deg, rgba(47, 91, 191,0.07), var(--bg-card) 60%);
}
.s-card-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.s-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.s-ci-plan { background: #e8f0fe; color: #2f5bbf; }
.s-ci-meetings { background: #EAF7EF; color: #1CBD2C; }
.s-ci-duration { background: #FFF3E6; color: #F17D43; }
.s-card-top-mid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.s-card-sub {
  font-size: 11px;
  color: #8999B5;
  font-weight: 500;
}
.s-plan {
  font-size: 14px;
  font-weight: 700;
  color: #2f5bbf;
  width: fit-content;
  padding: 3px 12px;
  border-radius: var(--r-full);
  background: #e8f0fe;
}
.s-upgrade {
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #2f5bbf, #0B58D8);
  border: none;
  padding: 8px 12px;
  border-radius: 9px;
  cursor: pointer;
  margin-top: 12px;
  box-shadow: 0 5px 14px rgba(47, 91, 191,.22);
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.s-upgrade:hover {
  background: #0B58D8;
  transform: translateY(-1px);
}
.s-card-stat { display: flex; flex-direction: column; }
.s-card-stat .s-num {
  margin: 8px 0 4px;
}
.s-quota {
  position: relative;
}
.s-quota-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.s-quota-used {
  font-size: 12px;
  font-weight: 500;
  color: #8999B5;
}
.s-quota-pct {
  font-size: 12px;
  font-weight: 700;
  color: #2f5bbf;
  font-family: 'JetBrains Mono', monospace;
}
.s-ring {
  position: relative;
  height: 7px;
  background: var(--bg-hover);
  border-radius: 4px;
  overflow: hidden;
  margin: 0 0 9px;
}
.s-ring-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #2f5bbf, #5484FF);
  transition: width 0.6s ease;
}
.s-ring-label {
  position: relative;
  font-size: 12px;
  color: #8999B5;
  font-weight: 500;
}
.s-unlimited {
  font-size: 15px;
  font-weight: 700;
  color: #1CBD2C;
  margin-top: 14px;
}
.s-num {
  font-size: 30px;
  font-weight: 900;
  color: #352F44;
  letter-spacing: -0.02em;
  line-height: 1.15;
  background: linear-gradient(135deg, #352F44, #4E6181);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.s-num-meetings {
  background: linear-gradient(135deg, #1CBD2C, #129E1D);
  -webkit-background-clip: text;
  background-clip: text;
}
.s-num-duration {
  background: linear-gradient(135deg, #F17D43, #E25E1F);
  -webkit-background-clip: text;
  background-clip: text;
}
.s-lbl {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #8999B5;
  font-weight: 500;
}
.s-lbl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.s-dot-meetings { background: #1CBD2C; }
.s-dot-duration { background: #F17D43; }

/* ================================================================
   MEETING PAGE
   ================================================================ */
.meeting-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 0;
}
.meeting-controls-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.meeting-controls-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recovery-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--primary-dim);
  border: 1px solid var(--primary);
  border-radius: var(--r-sm);
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text);
}
.recovery-bar-icon { font-size: 16px; flex-shrink: 0; }
.recovery-bar-text { flex: 1; }
.btn-recovery {
  padding: 6px 14px;
  font-size: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--r-xs);
  cursor: pointer;
  font-weight: 600;
}
.btn-recovery:hover { background: var(--primary-hover); }
.btn-recovery-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-recovery-secondary:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.btn-recovery-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}
.btn-recovery-close:hover { background: var(--bg-hover); color: var(--text); }

.meeting-btns { display: flex; gap: 10px; }

.btn-meeting {
  padding: 9px 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all var(--duration) var(--ease);
  color: var(--text-secondary);
  position: relative;
}
.btn-meeting:hover:not(:disabled):not(.loading) {
  border-color: var(--border-hover);
  background: var(--bg-hover);
  color: var(--text);
}
.btn-meeting:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-meeting.loading { pointer-events: none; opacity: 0.7; }

.btn-start {
  background: var(--success-dim);
  color: var(--success);
  border-color: rgba(16,185,129,0.2);
}
.btn-start:hover:not(:disabled):not(.loading) {
  background: rgba(16,185,129,0.15);
  border-color: var(--success);
}

.btn-stop {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: rgba(239,68,68,0.2);
}
.btn-stop:hover:not(:disabled):not(.loading) {
  background: rgba(239,68,68,0.15);
  border-color: var(--danger);
}

.btn-pause, .btn-resume {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(47, 91, 191,0.2);
}

.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

/* Settings toggle */
.btn-settings-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.btn-settings-toggle:hover {
  border-color: var(--border-hover);
  color: var(--text-secondary);
  background: var(--bg-hover);
}
.btn-settings-toggle.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-dim);
}

/* 会议记录按钮 */
.btn-history-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
}
.btn-history-link:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-dim);
}
.btn-history-link svg {
  width: 14px;
  height: 14px;
}

/* Settings panel (collapsible) */
.meeting-settings-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease), padding var(--duration-slow) var(--ease), opacity var(--duration) var(--ease);
  opacity: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  margin-bottom: 18px;
}
.meeting-settings-panel.open {
  max-height: 100px;
  opacity: 1;
  padding: 14px 22px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.setting-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  transition: background var(--duration) var(--ease);
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--duration) var(--ease);
}
.switch input:checked + .switch-track {
  background: var(--primary);
}
.switch input:checked + .switch-track::after {
  transform: translateX(18px);
}
.switch input:disabled + .switch-track {
  opacity: 0.55;
}
.switch input:disabled ~ .switch-track {
  cursor: not-allowed;
}

.setting-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.backend-config-inline {
  display: flex;
  align-items: center;
  gap: 12px;
}
.backend-config-inline label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.backend-config-inline input {
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-input);
  font-family: 'JetBrains Mono', monospace;
  width: 320px;
  outline: none;
  transition: all var(--duration) var(--ease);
}
.backend-config-inline input::placeholder { color: var(--text-muted); }
.backend-config-inline input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

.status {
  padding: 7px 18px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-hover);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}
.status.running {
  background: var(--success-dim);
  color: var(--success);
  border-color: rgba(16,185,129,0.2);
}
.status.running::before {
  background: var(--success);
  animation: pulse 2s ease-in-out infinite;
}
.status.paused {
  background: var(--warning-dim);
  color: var(--warning);
  border-color: rgba(245,158,11,0.2);
}
.status.paused::before { background: var(--warning); }
.status.error {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: rgba(239,68,68,0.2);
}
.status.error::before { background: var(--danger); }

/* ================================================================
   实时录音转写 · 顶部录音面板（Hero）
   ================================================================ */
.record-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #10214a, #2f5bbf 135%);
  border-radius: 18px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.record-hero::after {
  content: '';
  position: absolute;
  bottom: -140px;
  right: -70px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 91, 191,.6), transparent 70%);
  pointer-events: none;
}
.rec-mainbtn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; }
.rec-main {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.rec-main svg { width: 28px; height: 28px; }
.rec-main:hover:not(:disabled) { transform: scale(1.06); box-shadow: 0 12px 28px rgba(0,0,0,.32); }
.rec-main:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  color: var(--text-muted);
}
.rec-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.rec-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rec-sub { font-size: 12.5px; opacity: .82; margin-top: 9px; position: relative; z-index: 1; }
.rec-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.rec-meta-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rec-meta-item .v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1; }
.rec-meta-item .l { font-size: 11px; opacity: .8; }

/* 主面板内的 status / timer / viz 深色适配 */
.record-hero .status {
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 13px;
  background: rgba(255,255,255,.14);
  border: none;
  color: #fff;
}
.record-hero .status::before { width: 8px; height: 8px; background: #b8c4e0; }
.record-hero .status.running { background: rgba(255,255,255,.2); color: #fff; }
.record-hero .status.running::before { background: #fff; animation: recBlink 1.2s infinite; }
.record-hero .status.paused { background: rgba(255,255,255,.18); color: #fff; }
.record-hero .status.paused::before { background: #fbbf24; }
.record-hero .status.error { background: rgba(242,59,59,.3); color: #fff; }
.record-hero .status.error::before { background: #f87171; }
.record-hero .meeting-timer {
  background: none;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  min-width: auto;
  width: auto;
  text-align: left;
  opacity: .55;
  padding: 0;
}
.record-hero .meeting-timer.active { opacity: 1; color: #fff; background: none; border: none; }

/* 波形：空闲=静态高低起伏的波形条，录音中=波动动画(真实音量 meter 覆盖为实时高度) */
.record-hero .meeting-audio-viz {
  opacity: 1;
  visibility: visible;
  height: 30px;
  align-items: flex-end;
  gap: 4px;
  padding: 0 4px;
}
.record-hero .meeting-audio-viz span {
  width: 5px;
  border-radius: 3px;
  background: #fff;
}
/* 空闲：静态不同高度 */
.record-hero .meeting-audio-viz span:nth-child(1){height:12px;opacity:.55}
.record-hero .meeting-audio-viz span:nth-child(2){height:22px;opacity:.55}
.record-hero .meeting-audio-viz span:nth-child(3){height:16px;opacity:.55}
.record-hero .meeting-audio-viz span:nth-child(4){height:26px;opacity:.55}
.record-hero .meeting-audio-viz span:nth-child(5){height:18px;opacity:.55}
.record-hero .meeting-audio-viz span:nth-child(6){height:24px;opacity:.55}
.record-hero .meeting-audio-viz span:nth-child(7){height:14px;opacity:.55}
.record-hero .meeting-audio-viz span:nth-child(8){height:20px;opacity:.55}
/* 录音中：波动动画（真实音量 meter 会覆盖为实时高度） */
.record-hero .meeting-audio-viz.active span {
  height: 8px;
  opacity: 1;
  animation: heroWave 1s ease-in-out infinite;
}
.record-hero .meeting-audio-viz.active span:nth-child(1){animation-delay:0s}
.record-hero .meeting-audio-viz.active span:nth-child(2){animation-delay:.12s}
.record-hero .meeting-audio-viz.active span:nth-child(3){animation-delay:.24s}
.record-hero .meeting-audio-viz.active span:nth-child(4){animation-delay:.36s}
.record-hero .meeting-audio-viz.active span:nth-child(5){animation-delay:.1s}
.record-hero .meeting-audio-viz.active span:nth-child(6){animation-delay:.22s}
.record-hero .meeting-audio-viz.active span:nth-child(7){animation-delay:.3s}
.record-hero .meeting-audio-viz.active span:nth-child(8){animation-delay:.18s}
/* 暂停：点点点 */
.record-hero .meeting-audio-viz.paused {
  align-items: center !important;
  gap: 7px !important;
}
.record-hero .meeting-audio-viz.paused span {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #fff;
  opacity: .55 !important;
  animation: none !important;
}
@keyframes heroWave { 0%,100% { height: 8px; opacity: .5; } 50% { height: 30px; opacity: 1; } }
@keyframes recBlink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.rec-ctrls { display: flex; align-items: center; gap: 9px; flex-shrink: 0; position: relative; z-index: 1; }
.rec-sec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 11px;
  cursor: pointer;
  transition: all .2s;
}
.rec-sec svg { width: 14px; height: 14px; }
.rec-sec:hover:not(:disabled) { background: rgba(255,255,255,.24); }
.rec-sec:disabled { opacity: .35; cursor: not-allowed; }
.rec-sec.rec-stop { background: rgba(242,59,59,.55); border-color: rgba(242,59,59,.7); }
.rec-sec.rec-stop:hover:not(:disabled) { background: rgba(242,59,59,.7); }
.rec-sec.rec-start { background: #fff; color: var(--primary); border-color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.22); }
.rec-sec.rec-start:hover:not(:disabled) { background: #eaf2ff; color: var(--primary); }
.rec-sec.rec-start:disabled { color: #7a86a0; background: rgba(255,255,255,.85); border-color: rgba(255,255,255,.85); box-shadow: none; }

.rec-side { display: flex; align-items: center; gap: 9px; flex-shrink: 0; position: relative; z-index: 1; }
.rec-side .btn-history-link,
.rec-side .btn-import-audio,
.rec-side .btn-settings-toggle {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.rec-side .btn-history-link:hover,
.rec-side .btn-import-audio:hover:not(:disabled),
.rec-side .btn-settings-toggle:hover { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.35); }

@media (max-width: 1100px) {
  .record-hero { flex-wrap: wrap; }
  .rec-side { width: 100%; justify-content: flex-start; padding-top: 4px; }
}


/* Meeting timer */
.meeting-timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 6px 14px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  letter-spacing: 0.06em;
  min-width: 60px;
  text-align: center;
  transition: all var(--duration) var(--ease);
}
.meeting-timer.active {
  color: var(--success);
  background: var(--success-dim);
  border-color: rgba(16,185,129,0.2);
}

/* Audio waveform visualization */
.meeting-audio-viz {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  padding: 0 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.meeting-audio-viz.active {
  opacity: 1;
  visibility: visible;
}
.meeting-audio-viz span {
  display: block;
  width: 3px;
  background: var(--success);
  border-radius: 2px;
  animation: waveBar 1.2s ease-in-out infinite;
}
.meeting-audio-viz span:nth-child(1) { height: 8px; animation-delay: 0s; }
.meeting-audio-viz span:nth-child(2) { height: 16px; animation-delay: 0.15s; }
.meeting-audio-viz span:nth-child(3) { height: 24px; animation-delay: 0.3s; }
.meeting-audio-viz span:nth-child(4) { height: 14px; animation-delay: 0.45s; }
.meeting-audio-viz span:nth-child(5) { height: 10px; animation-delay: 0.6s; }

@keyframes waveBar {
  0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,0.4); transform: scale(1); }
  50% { opacity: 0.6; box-shadow: 0 0 0 10px rgba(16,185,129,0); transform: scale(1.35); }
}



/* ── Toast 统一提示 ── */
.toast-wrap {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 80vw;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-toast);
  animation: toastIn 0.2s var(--ease);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.success { border-left-color: var(--success); }
.toast.success .toast-icon { color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.error .toast-icon { color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast.warning .toast-icon { color: var(--warning); }
.toast.hide { opacity: 0; transform: translateY(-8px); }
.toast-icon { font-size: 14px; line-height: 1; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Meeting page body — 固定高度，让内部面板处理滚动 */
.meeting-page-body { overflow: hidden !important; }

/* Meeting panels — transcript 50% / summary 50% */
.meeting-panels { display: flex; gap: 18px; flex: 1; min-height: 0; }

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Summary panel expand animation */
@keyframes summaryExpand {
  from { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
  to { max-height: 2000px; opacity: 1; }
}
.summary-final-title, .summary-body {
  overflow: hidden;
  animation: summaryExpand 0.5s var(--ease);
}
.panel-transcript { flex: 1; }
.panel-summary { flex: 1; }

/* ── 纪要 Tab（图文纪要 / 文本纪要） ── */
.summary-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 8px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.summary-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}
.summary-tab svg { width: 15px; height: 15px; }
.summary-tab:hover { color: #2f5bbf; background: #f0f6ff; }
.summary-tab.active {
  color: #2f5bbf;
  background: #e8f0fe;
  border-color: #cddffb;
  font-weight: 700;
}
.summary-pane { display: none; }
.summary-pane.active { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.summary-pane-text { position: relative; overflow: hidden; }
.summary-pane-text.active { overflow: hidden; }
.summary-pane-graphic.active { overflow-y: auto; }
.summary-graphic-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 20px;
  background: #fbfcfe;
  border-bottom: 1px solid var(--border);
}
.summary-graphic-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 20px;
}

/* 会议页空态优化（参照 demo，蓝调） */
.meeting-panels .empty-icon {
  background: #e8f0fe;
  border: 1px solid #cddffb;
  color: #2f5bbf;
}
.meeting-panels .empty-icon svg { width: 26px; height: 26px; }

/* 文本纪要外壳（设计稿 v4：md-wrap 头部 + 文档视图/MD 原文 切换 + 编辑） */
.md-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 10px 22px 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.md-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}
.md-head .tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: #1e293b;
  color: #fff;
  letter-spacing: 0.02em;
}
.md-head .l { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.md-head .l b { color: var(--text); }
.md-head .spacer { flex: 1; }

/* 文档视图 / MD 原文 分段控件 */
.seg { display: flex; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg .summary-text-mode {
  border: none;
  background: transparent;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.15s, color 0.15s;
}
.seg .summary-text-mode:hover { color: var(--text); }
.seg .summary-text-mode.active { background: var(--primary); color: #fff; }

/* 头部操作按钮（编辑） */
.md-head .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s, color 0.15s;
}
.md-head .btn svg { width: 12px; height: 12px; }
.md-head .btn:hover { border-color: var(--primary); color: var(--primary); }

/* MD 原文：深色编程风格视图 */
.md-box {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: #0f172a;
  color: #e2e8f0;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 12.5px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 16px 20px;
}
.md-box::before {
  content: '● ● ●';
  display: block;
  color: #475569;
  font-size: 10px;
  letter-spacing: 6px;
  line-height: 1;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.md-box:empty::before { display: none; }

/* ── 图文纪要卡片（设计稿 v4：渐变图标 / 彩色 chip / 序号议题 / 决策行 / 带头像待办） ── */
.summary-graphic {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 24px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
.summary-graphic .card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.summary-graphic .mod-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.summary-graphic .icon-square {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.summary-graphic .icon-square svg { width: 20px; height: 20px; }
.summary-graphic .sq-indigo  { background: linear-gradient(135deg, #5b8def, #2f5bbf); }
.summary-graphic .sq-cyan    { background: linear-gradient(135deg, #22d3ee, #06b6d4); }
.summary-graphic .sq-amber   { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.summary-graphic .sq-violet  { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.summary-graphic .sq-emerald { background: linear-gradient(135deg, #34d399, #10b981); }

.summary-graphic .mod-title { font-size: 15px; font-weight: 700; color: #1e293b; }
.summary-graphic .mod-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.summary-graphic .mod-meta  { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

.summary-graphic .ov-summary {
  background: linear-gradient(180deg, #f3f6ff, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 14px;
  color: #1f2937;
  line-height: 1.9;
}

/* 关键词彩色 chip */
.summary-graphic .kw-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.summary-graphic .kw {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 999px;
  border: 1px solid transparent;
}
.summary-graphic .kw.indigo  { background: #e8f0fe; color: #2552a8; }
.summary-graphic .kw.cyan    { background: #ecfeff; color: #0e7490; }
.summary-graphic .kw.amber   { background: #fffbeb; color: #b45309; }
.summary-graphic .kw.emerald { background: #ecfdf5; color: #047857; }
.summary-graphic .kw.violet  { background: #eef3ff; color: #6d28d9; }

/* 议题（序号方块 + 分色） */
.summary-graphic .topic { display: flex; gap: 12px; padding: 14px 0; border-top: 1px dashed var(--border); }
.summary-graphic .topic:first-of-type { border-top: none; padding-top: 2px; }
.summary-graphic .t-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tint-dim, #f1f5f9);
  color: var(--tint, #64748b);
  font-weight: 700;
  font-size: 12.5px;
  margin-top: 2px;
}
.summary-graphic .t-body { flex: 1; min-width: 0; }
.summary-graphic .t-name { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
.summary-graphic .t-rows { display: flex; flex-direction: column; gap: 3px; }
.summary-graphic .t-row { font-size: 13px; line-height: 1.75; color: var(--text-secondary); }
.summary-graphic .t-row b { color: #1e293b; font-weight: 600; margin-right: 4px; }

/* 决策结论：行样式 */
.summary-graphic .decide { display: flex; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--border); }
.summary-graphic .decide:first-of-type { border-top: none; padding-top: 0; }
.summary-graphic .d-icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--warning);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}
.summary-graphic .d-icon svg { width: 12px; height: 12px; }
.summary-graphic .d-text { flex: 1; font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); }
.summary-graphic .d-text b { color: #1e293b; }

/* 待办：头像 + 责任人 + 截止时间 */
.summary-graphic .todo-list { display: flex; flex-direction: column; gap: 9px; }
.summary-graphic .todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.summary-graphic .todo-check {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
}
.summary-graphic .todo-task {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: #1e293b;
  word-break: break-word;
}
.summary-graphic .todo-who {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.summary-graphic .todo-who .avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e8f0fe;
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.summary-graphic .todo-due {
  flex: none;
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 2px 9px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* ════ 图文纪要 v2（重设计）：Hero 全景卡 + 结构化四段卡片 ════ */
.summary-graphic {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 26px 30px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.summary-graphic .gr-card {
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 2px 10px rgba(15, 26, 41, 0.04);
}
.summary-graphic .gr-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.summary-graphic .gr-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}
.summary-graphic .gr-ic svg { width: 17px; height: 17px; }
.summary-graphic .gr-ic--indigo { background: linear-gradient(135deg, #5b8def, #2f5bbf); }
.summary-graphic .gr-ic--cyan   { background: linear-gradient(135deg, #22d3ee, #0ea5e9); }
.summary-graphic .gr-ic--amber  { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.summary-graphic .gr-ic--emerald{ background: linear-gradient(135deg, #34d399, #10b981); }
.summary-graphic .gr-head-t { flex: 1; min-width: 0; }
.summary-graphic .gr-head-title { font-size: 16px; font-weight: 800; color: #0f172a; letter-spacing: .2px; }
.summary-graphic .gr-head-desc { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.summary-graphic .gr-head-count {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e6ecf4;
  padding: 3px 11px;
  border-radius: 999px;
  margin-top: 2px;
}

/* Hero 全宽卡（素雅白卡，与下方卡片一致） */
.summary-graphic .gr-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  color: #1e293b;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #e8ecf4;
  box-shadow: 0 2px 10px rgba(15, 26, 41, 0.04);
}
.summary-graphic .gr-hero-bg { display: none; }
.summary-graphic .gr-hero-top { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.summary-graphic .gr-badge {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #5b8def, #2f5bbf);
  box-shadow: 0 4px 10px rgba(47, 91, 191, 0.25);
}
.summary-graphic .gr-badge svg { width: 17px; height: 17px; }
.summary-graphic .gr-hero-kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: #94a3b8; }
.summary-graphic .gr-hero-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.4; margin-top: 2px; color: #0f172a; }
.summary-graphic .gr-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.summary-graphic .gr-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #eef1f6;
  padding: 3px 11px;
  border-radius: 999px;
}
.summary-graphic .gr-meta-pill svg { width: 13px; height: 13px; color: #94a3b8; }
.summary-graphic .gr-overview {
  position: relative;
  margin-top: 14px;
  background: #f8fafc;
  border: 1px solid #eef1f6;
  border-radius: 10px;
  padding: 12px 14px;
}
.summary-graphic .gr-overview-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #94a3b8; margin-bottom: 4px; }
.summary-graphic .gr-overview p { margin: 0; font-size: 13.5px; line-height: 1.85; color: #475569; }

/* 关键词 chips */
.summary-graphic .gr-chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.summary-graphic .gr-chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: default;
  transition: transform .12s ease, box-shadow .12s ease;
}
.summary-graphic .gr-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07); }
.summary-graphic .gr-chip--indigo { background: #e8f0fe; color: #2552a8; }
.summary-graphic .gr-chip--cyan   { background: #ecfeff; color: #0e7490; }
.summary-graphic .gr-chip--amber  { background: #fffbeb; color: #b45309; }
.summary-graphic .gr-chip--emerald{ background: #ecfdf5; color: #047857; }
.summary-graphic .gr-chip--violet { background: #eef3ff; color: #6d28d9; }

/* 主要内容（议题编号色卡） */
.summary-graphic .gr-topic { display: flex; gap: 14px; padding: 14px 0; }
.summary-graphic .gr-topic + .gr-topic { border-top: 1px dashed #e6eaf2; }
.summary-graphic .gr-tnum {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--gt, #64748b);
  background: var(--gd, #f1f5f9);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.summary-graphic .gr-tbody { flex: 1; min-width: 0; }
.summary-graphic .gr-tname { font-size: 14.5px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.summary-graphic .gr-titems { display: flex; flex-direction: column; gap: 5px; }
.summary-graphic .gr-titem { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.75; color: #475569; }
.summary-graphic .gr-titem::before { content: ''; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #c7cdd9; }
.summary-graphic .gr-titem b { color: #0f172a; font-weight: 600; margin-right: 4px; }

/* 决策结论 */
.summary-graphic .gr-decide { display: flex; gap: 10px; padding: 10px 0; }
.summary-graphic .gr-decide + .gr-decide { border-top: 1px dashed #e6eaf2; }
.summary-graphic .gr-dcheck {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.summary-graphic .gr-dcheck svg { width: 11px; height: 11px; }
.summary-graphic .gr-dtext { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.7; color: #475569; }
.summary-graphic .gr-dtext b { color: #0f172a; font-weight: 600; margin-right: 4px; }

/* 待办事项 */
.summary-graphic .gr-todos { display: flex; flex-direction: column; gap: 9px; }
.summary-graphic .gr-todo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.summary-graphic .gr-todo:hover { border-color: #d8e2f5; box-shadow: 0 2px 8px rgba(15, 26, 41, 0.05); }
.summary-graphic .gr-tcheck {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.6px solid #c6cfdd;
  background: #fff;
}
.summary-graphic .gr-ttask { flex: 1; min-width: 0; font-size: 13.5px; color: #1e293b; word-break: break-word; }
.summary-graphic .gr-who {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #475569;
}
.summary-graphic .gr-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  background: linear-gradient(135deg, #dbeafe, #c3dafe);
  color: #1e40af;
}
.summary-graphic .gr-due {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: #92400e;
  background: #fff7e6;
  border: 1px solid #ffe8bd;
  padding: 2px 9px;
  border-radius: 999px;
}
.summary-graphic .gr-due svg { width: 12px; height: 12px; color: #f59e0b; }

/* 图文纪要卡片编辑表单（SummaryGraphic.renderEditor） */
.summary-graphic-editor { display: block; }
.summary-graphic-editor .sg-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px 22px;
}
.summary-graphic-editor .sg-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
  box-shadow: var(--shadow-surface);
}
.summary-graphic-editor .sg-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
}
.summary-graphic-editor .sg-head-text { min-width: 0; }
.summary-graphic-editor .sg-head-title { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: .2px; }
.summary-graphic-editor .sg-head-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.summary-graphic-editor .sg-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.summary-graphic-editor .sg-icon svg { width: 16px; height: 16px; }
.summary-graphic-editor .sg-icon--indigo { background: linear-gradient(135deg, #5b8def, #2f5bbf); }
.summary-graphic-editor .sg-icon--cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); }
.summary-graphic-editor .sg-icon--amber { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.summary-graphic-editor .sg-icon--emerald { background: linear-gradient(135deg, #34d399, #10b981); }
.summary-graphic-editor .sg-body { padding: 12px 16px 14px; }

.summary-graphic-editor .sg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.summary-graphic-editor .sg-topic {
  border-bottom: 1px dashed var(--border);
  padding: 4px 0 6px;
}
.summary-graphic-editor .sg-topic:last-of-type { border-bottom: none; }
.summary-graphic-editor .sg-topic-items {
  margin: 2px 0 4px 14px;
  padding-left: 11px;
  border-left: 2px solid var(--border);
}

.summary-graphic-editor .sg-overview-box { display: flex; flex-direction: column; gap: 9px; }
.summary-graphic-editor .sg-card--overview .sg-body {
  background: linear-gradient(180deg, var(--primary-dim), rgba(255, 255, 255, 0));
}
.summary-graphic-editor .sg-overview {
  min-height: 112px;
  font-size: 14px;
  line-height: 1.85;
  padding: 12px 14px;
  border-radius: 10px;
  border-color: var(--border-hover);
  background: var(--bg-elevated);
}
.summary-graphic-editor .sg-overview:hover { border-color: var(--border-hover); }
.summary-graphic-editor .sg-overview:focus {
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px var(--primary-dim), 0 2px 10px rgba(15, 23, 42, .05);
}
.summary-graphic-editor .sg-overview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 0 2px;
}
.summary-graphic-editor .sg-overview-hint { display: inline-flex; align-items: center; gap: 5px; }
.summary-graphic-editor .sg-overview-hint svg { opacity: .75; }
.summary-graphic-editor .sg-overview-count { font-variant-numeric: tabular-nums; }

.summary-graphic-editor input[type="text"],
.summary-graphic-editor textarea {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-input);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.summary-graphic-editor input[type="text"]:hover,
.summary-graphic-editor textarea:hover { border-color: var(--border-hover); }
.summary-graphic-editor input[type="text"]:focus,
.summary-graphic-editor textarea:focus {
  border-color: var(--primary);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px var(--primary-dim);
}
.summary-graphic-editor textarea { resize: vertical; line-height: 1.7; }

.summary-graphic-editor .sg-todo-task { flex: 1.4; }
.summary-graphic-editor .sg-todo-assignee { flex: 1; max-width: 170px; }
.summary-graphic-editor .sg-todo-due { flex: 1; max-width: 140px; }

.summary-graphic-editor .sg-del {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.summary-graphic-editor .sg-del:hover {
  opacity: 1;
  background: var(--danger-dim);
  border-color: var(--danger);
  color: var(--danger);
}

.summary-graphic-editor .sg-add {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.summary-graphic-editor .sg-topic .sg-add { display: flex; width: 100%; justify-content: center; }
.summary-graphic-editor .sg-add:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-dim);
}

.panel h2 {
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 800;
  border-bottom: 1px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.01em;
}
.panel h2 .icon {
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2f5bbf;
  background: #e8f0fe;
  border-radius: 9px;
}
.panel h2 .icon svg { width: 16px; height: 16px; }

.panel-badge {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.text-area {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}
.text-area > div:not(.markdown-body):not(.summary-body):not(.empty-state):not(.transcript-line):not(.partial) {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  word-break: break-word;
}
.text-area > div:last-child { border-bottom: none; }
.text-area div.partial {
  color: var(--text-muted);
  font-style: italic;
  background: transparent;
  border-left: none;
  padding-left: 0;
  margin-left: 0;
  border-bottom: none;
  font-size: 13px;
}

/* 转写行（参照 demo：左右留白、悬停高亮、无分隔线） */
.text-area .transcript-line {
  display: flex;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  border-bottom: none;
  margin: 0 -6px;
  transition: background 0.15s;
}
.text-area .transcript-line:hover { background: #f5f7fb; }
.text-area .transcript-line.paragraph-bg-highlight { background: #fff3ec; box-shadow: inset 3px 0 0 var(--primary); }
.text-area .transcript-line.paragraph-bg-highlight .transcript-text { color: var(--primary); }
.text-area .transcript-timestamp {
  font-size: 11px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  padding-top: 4px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}
.text-area .transcript-text {
  font-size: 14px;
  line-height: 1.65;
  color: #3b4a63;
  min-width: 0;
  word-break: break-word;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  text-align: center;
  padding: 40px 20px;
}
.empty-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-dim), rgba(47, 91, 191, 0.12));
  border: 1px solid rgba(47, 91, 191, 0.15);
  border-radius: 18px;
  color: var(--primary);
  margin-bottom: 18px;
  opacity: 0.75;
}
.empty-icon svg { width: 26px; height: 26px; }
.empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-family: 'Inter', sans-serif;
}
.empty-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  font-family: 'Inter', sans-serif;
}

#summary-md-doc {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 26px 32px;
  background: #fff;
  line-height: 1.75;
}
#summary-md-doc .summary-generating {
  min-height: 200px;
}
#summary-md-doc .summary-final-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  padding: 4px 2px 14px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.02em;
}
/* 历史详情页：文档视图外壳（白色文档页，外层 md-wrap 提供边框） */
#detail-summary-doc {
  padding: 26px 32px;
  background: #fff;
}

/* ── 终稿生成中状态 ── */
.summary-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 200px;
  padding: 40px 24px;
  color: var(--text-secondary);
  font-size: 14px;
}
.summary-generating .btn-spinner {
  width: 32px;
  height: 32px;
  border-width: 3px;
  border-color: var(--primary);
  border-top-color: transparent;
}
.summary-generating-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.summary-generating-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.summary-generating-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.detail-speaker-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-elevated, rgba(0, 0, 0, 0.03));
  color: var(--text-secondary);
  font-size: 13px;
}
.detail-speaker-status .btn-spinner {
  flex: none;
  width: 18px;
  height: 18px;
  border-width: 2px;
  border-color: var(--primary);
  border-top-color: transparent;
}

/* ================================================================
   MARKDOWN BODY — 会议纪要渲染
   ================================================================ */
.markdown-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
  word-break: break-word;
}
.markdown-body > *:first-child { margin-top: 0 !important; }
.markdown-body > *:last-child { margin-bottom: 0 !important; }
.markdown-body p { margin: 6px 0; }

/* PDF 导出专用配色：固定深色，避免暗色主题导出浅色文字 */
.summary-pdf-export,
.summary-pdf-export h1,
.summary-pdf-export h2,
.summary-pdf-export h3,
.summary-pdf-export h4,
.summary-pdf-export p,
.summary-pdf-export li,
.summary-pdf-export blockquote,
.summary-pdf-export td,
.summary-pdf-export th { color: #1f2937; }
.summary-pdf-export { background: #fff; }
.summary-pdf-export code,
.summary-pdf-export pre { color: #1f2937; background: #f3f4f6; }
.summary-pdf-export blockquote { border-left-color: #d1d5db; }
.summary-pdf-export h1,
.summary-pdf-export h2 { border-bottom-color: #e5e7eb; }
.summary-pdf-export a { color: #2563eb; }

/* ── Headings ── */
.markdown-body h1 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.markdown-body h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.markdown-body h3 {
  font-size: 13.5px;
  font-weight: 700;
  margin: 14px 0 6px;
  color: var(--text);
}
.markdown-body h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Lists ── */
.markdown-body ul,
.markdown-body ol {
  padding-left: 6px;
  margin: 6px 0;
  list-style: none;
}
.markdown-body li {
  margin: 4px 0;
  padding-left: 18px;
  position: relative;
}
.markdown-body ul > li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 5px;
  height: 5px;
  background: var(--primary-light);
  border-radius: 50%;
}
.markdown-body ol {
  counter-reset: md-counter;
  list-style: none;
}
.markdown-body ol > li {
  counter-increment: md-counter;
}
.markdown-body ol > li::before {
  content: counter(md-counter);
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.markdown-body li > ul,
.markdown-body li > ol {
  margin: 3px 0;
}

/* ── Inline ── */
.markdown-body strong {
  font-weight: 700;
  color: var(--text);
}
.markdown-body em {
  font-style: italic;
  color: var(--text-secondary);
}
.markdown-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: var(--primary-dim);
  color: var(--primary);
  padding: 1px 5px;
  border-radius: 4px;
}
.markdown-body pre {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  overflow-x: auto;
  margin: 12px 0;
}
.markdown-body pre code {
  background: none;
  padding: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.7;
}

/* ── Blockquote ── */
.markdown-body blockquote {
  border-left: 3px solid var(--primary);
  margin: 12px 0;
  padding: 8px 14px;
  background: var(--primary-dim);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  color: var(--text-secondary);
  font-size: 13px;
}
.markdown-body blockquote p { margin: 3px 0; }

/* ── HR ── */
.markdown-body hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

/* ── Table ── */
.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 12.5px;
}
.markdown-body th,
.markdown-body td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}
.markdown-body th {
  background: var(--bg-hover);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.markdown-body tr:nth-child(even) td {
  background: rgba(47, 91, 191,0.02);
}

/* ── Links ── */
.markdown-body a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.markdown-body a:hover {
  text-decoration: underline;
}

/* ── Images ── */
.markdown-body img {
  max-width: 100%;
  border-radius: var(--r-sm);
}

/* ================================================================
   MEETING HISTORY
   ================================================================ */
.meeting-list { display: flex; flex-direction: column; gap: 12px; }

/* SaaS 式布局：图标(来源着色) | 标题行+meta行+分隔线+底部分区 */
.meeting-list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px 14px;
  box-shadow: 0 1px 2px rgba(23, 43, 99, 0.04);
  transition: border-color var(--duration) var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.meeting-list-item:hover {
  /* 浮起：边框让位给双层阴影（近距接触影+远距环境影），轮廓柔和有层次，无硬边框线 */
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(23, 43, 99, 0.06), 0 8px 24px rgba(23, 43, 99, 0.12);
  transform: translateY(-3px);
}

.meeting-list-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform var(--duration) var(--ease);
}
.meeting-list-icon.is-netdisk { background: #2f5bbf; }
.meeting-list-icon.is-import { background: #8B5CF6; }
.meeting-list-icon.is-live { background: #0EA5E9; }
.meeting-list-item:hover .meeting-list-icon { transform: scale(1.06); }

.meeting-list-body {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
/* 可点行由 .is-clickable 标记（行导航已改容器事件委托，不再依赖内联 onclick 属性判别） */
.meeting-list-body:not(.is-clickable) { cursor: default; }
/* 不可点行：hover 反馈同样抑制，避免「看着能点却点不动」 */
.meeting-list-body:not(.is-clickable):hover .meeting-list-title { color: #2B3650; }

.meeting-list-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  min-width: 0;
}
.meeting-list-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: #2B3650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--duration) var(--ease);
}
.meeting-list-body:hover .meeting-list-title { color: #2f5bbf; }
.meeting-list-tags {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 记录状态徽章：转写中 / 转写失败（入 meta 行右侧） */
.meeting-list-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 10px;
  vertical-align: middle;
  white-space: nowrap;
}
.badge-processing {
  color: #E18500;
  background: #FFF4E0;
}
.badge-processing::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 5px;
  animation: nd-process-dot 1.2s ease-in-out infinite;
}
@keyframes nd-process-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
.badge-failed {
  color: #E5484D;
  background: #FFECEC;
}

/* 记录来源标签：网盘导入 / 音频导入 / 实时转写 / 示例 */
.meeting-list-source {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 10px;
  vertical-align: middle;
  white-space: nowrap;
}
.meeting-list-source.src-netdisk { color: #2f5bbf; background: #ECF3FF; }
.meeting-list-source.src-import { color: #8B5CF6; background: #F3EEFF; }
.meeting-list-source.src-live { color: #0891B2; background: #E0F5FA; box-shadow: inset 0 0 0 1px rgba(8,145,178,.18); }
.meeting-list-source.src-demo { color: #F17D43; background: #FFF3E6; }
.meeting-list-source.src-shared { color: #2f5bbf; background: #ECF3FF; }
/* 团队可见：与「已分享」（外链）区分开——一个是空间内成员可见，一个是拿到链接的人可见 */
.meeting-list-source.src-team { color: #0F766E; background: #E6F7F4; box-shadow: inset 0 0 0 1px rgba(15,118,110,.16); }

/* 录音存储类型（标题右侧标签排）：云端存储=平台对象存储、可回放；网盘存储=用户百度网盘、平台内不可回放。
   用「描边 chip」与实心底的来源标签区分层级；网盘存储取紫，避免与「网盘导入」（蓝）混淆。 */
.meeting-list-source.src-cloud {
  color: #1D4ED8;
  background: #EFF5FF;
  box-shadow: inset 0 0 0 1px rgba(29, 78, 216, .28);
}
.meeting-list-source.src-netdisk-store {
  color: #7C3AED;
  background: #F5F1FF;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .28);
}
.meeting-list-source.src-cloud svg,
.meeting-list-source.src-netdisk-store svg {
  width: 12px;
  height: 12px;
  opacity: 0.85;
}

/* meta 行：日期 · 时长 + 状态徽章 */
.meeting-list-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.meeting-list-meta svg {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  color: #42506C;
  opacity: 0.8;
}
.meeting-list-date {
  font-size: 12px;
  font-weight: 500;
  color: #42506C;
}
/* 团队共享会议的创建者：让成员一眼看出「这条不是我的」 */
.meeting-list-owner {
  font-size: 12px;
  font-weight: 500;
  color: #5B6B8C;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.meeting-list-sep {
  color: #D3DCE8;
  font-size: 12px;
}
.meeting-list-duration {
  font-size: 12px;
  font-weight: 500;
  color: #42506C;
}

/* 分隔线 + 底部分区：摘要/状态在左，查看详情在右 */
.meeting-list-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0 10px;
}
.meeting-list-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.meeting-list-summary {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: #52607A;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.meeting-list-summary.is-empty { color: #C6D0DE; }
.meeting-list-status-hint {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #42506C;
}
.meeting-list-open {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary, #4F6EF7);
  white-space: nowrap;
  transition: transform var(--duration) var(--ease);
}
.meeting-list-body:hover .meeting-list-open { transform: translateX(3px); }
.meeting-list-open svg { flex: none; }
.meeting-list-progress {
  color: var(--brand, #4F6EF7);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.meeting-list-progress:hover {
  text-decoration: underline;
}

/* Meeting list — 查看更多按钮（不再滚动触发） */
.meeting-list-loadmore {
  display: flex;
  justify-content: center;
  padding-top: 2px;
}
.btn-load-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 30px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
}
.btn-load-more:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-dim);
}
.btn-load-more:disabled {
  opacity: 0.55;
  cursor: default;
}

/* 会议列表加载失败态：文案 + 重试按钮，居中排版 */
.meeting-list-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  text-align: center;
}
.meeting-list-error p {
  margin: 0;
  font-size: 13px;
}

/* 转写中/失败记录：不可点详情，整体弱化 */
.meeting-list-item.is-processing,
.meeting-list-item.is-failed {
  cursor: default;
}
.meeting-list-item.is-processing .meeting-list-icon,
.meeting-list-item.is-failed .meeting-list-icon { opacity: 0.55; }
.meeting-list-item.is-processing .meeting-list-title,
.meeting-list-item.is-failed .meeting-list-title { color: #7C88A0; }
.meeting-list-item.is-processing:hover .meeting-list-title,
.meeting-list-item.is-failed:hover .meeting-list-title { color: #7C88A0; }
.meeting-list-foot .meeting-list-open.is-muted {
  color: #A3AED0;
  transform: none;
}
/* 列表项「删除录音」（仅云端存储且本人可编辑时展示）：仿 .meeting-list-open 的行内操作链接，用危险红强调 */
.meeting-list-del-audio {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #E5484D;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--duration) var(--ease);
}
.meeting-list-del-audio:hover { opacity: 0.78; text-decoration: underline; }

/* 批导入非成功行（转写中/失败）：整行可点回批进度页，弱化态上恢复可点视觉 */
.meeting-list-item.is-batch-actionable {
  cursor: pointer;
}
.meeting-list-item.is-batch-actionable .meeting-list-icon { opacity: 0.8; }
.meeting-list-item.is-batch-actionable .meeting-list-title { color: inherit; }
.meeting-list-item.is-batch-actionable:hover {
  border-color: var(--brand, #4F6EF7);
  box-shadow: 0 2px 8px rgba(79, 110, 247, 0.12);
}
.meeting-list-item.is-processing:hover {
  border-color: var(--border);
  background: var(--bg-card);
  box-shadow: none;
}
.meeting-list-item.is-failed:hover {
  border-color: #FFD9DA;
  background: #FFF6F6;
  box-shadow: none;
}

/* Meeting list — head / search */
.meeting-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.meeting-list-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-import-audio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--primary);
  border-radius: var(--r-full);
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
}
.btn-import-audio:hover:not(:disabled) {
  background: var(--primary);
  color: #fff;
}
.btn-import-audio .perm-badge {
  font-size: 11px;
}

/* 导入音频转写弹窗 */
.import-drop {
  border: 2px dashed #c3dafe;
  border-radius: var(--r-md);
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  background: #f5f7ff;
}
.import-drop:hover, .import-drop.dragging {
  border-color: var(--primary);
  background: #e8edff;
}
.import-drop-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.import-drop-icon svg { width: 22px; height: 22px; }
.import-drop-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.import-drop-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.import-file-name {
  margin-top: 10px;
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  word-break: break-all;
}
.import-title-row {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.import-title-row--inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.import-title-input {
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-xs);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-card);
  outline: none;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.import-title-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.import-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.import-status-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  text-align: center;
}
.import-progress-track {
  height: 8px;
  background: var(--bg-hover);
  border-radius: var(--r-full);
  overflow: hidden;
}
.import-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--r-full);
  transition: width var(--duration) var(--ease);
}
.import-status-desc {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.meeting-list-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.meeting-list-search {
  width: 280px;
  padding: 9px 34px 9px 38px;
  border: 1px solid #e4e9f1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
  outline: none;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.meeting-list-search:hover {
  border-color: #CBD4E4;
}
.meeting-list-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow), 0 1px 2px rgba(16, 24, 40, 0.04);
}
.meeting-list-search::placeholder {
  color: #A7B2C6;
  font-weight: 400;
}
.meeting-list-search-icon {
  position: absolute;
  left: 12px;
  color: #8A96AD;
  display: flex;
  pointer-events: none;
  transition: color var(--duration) var(--ease);
}
.meeting-list-search-icon svg { width: 16px; height: 16px; }
.meeting-list-search-wrap:focus-within .meeting-list-search-icon { color: var(--primary); }
.meeting-list-search-clear {
  position: absolute;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  background: #F0F3F9;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  transition: all var(--duration) var(--ease);
}
.meeting-list-search-clear:hover {
  background: #E2E8F4;
  color: var(--text);
}
.meeting-list-search-clear:active {
  transform: scale(0.92);
}

/* Meeting list — batch bar */
.meeting-list-batch-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: var(--primary-dim);
  border: 1px solid rgba(47, 91, 191,0.15);
  border-radius: var(--r-md);
  animation: fadeIn 0.2s ease;
}
.meeting-batch-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}
.btn-batch-delete {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  border: 1.5px solid var(--danger);
  background: var(--danger-dim);
  color: var(--danger);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.btn-batch-delete:hover {
  background: var(--danger);
  color: #fff;
}

/* Meeting list — checkbox */
.meeting-list-checkbox {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  position: relative;
  cursor: pointer;
}
.meeting-list-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}
.meeting-list-cb-mark {
  position: absolute;
  inset: 0;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  transition: all var(--duration) var(--ease);
}
.meeting-list-checkbox input:checked + .meeting-list-cb-mark {
  background: var(--primary);
  border-color: var(--primary);
}
.meeting-list-checkbox input:checked + .meeting-list-cb-mark::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.meeting-list-checkbox:hover .meeting-list-cb-mark {
  border-color: var(--primary);
}
.meeting-list-checkbox input:disabled {
  cursor: not-allowed;
}
.meeting-list-checkbox input:disabled + .meeting-list-cb-mark {
  opacity: 0.35;
  border-color: var(--border);
  background: var(--bg-hover);
  cursor: not-allowed;
}
.meeting-list-checkbox:hover input:disabled + .meeting-list-cb-mark {
  border-color: var(--border);
}

/* ================================================================
   PROFILE DASHBOARD
   ================================================================ */
.quick-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.qa {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 132px;
  padding: 20px;
  border-radius: 18px;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(150deg, var(--qa-d1, #3D82FF), var(--qa-d2, #164FC4));
  box-shadow: 0 10px 22px var(--qa-soft, rgba(47, 123, 255, 0.30));
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.qa::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
.qa::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 38px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
.qa:hover { transform: translateY(-5px); box-shadow: 0 18px 34px var(--qa-soft, rgba(47, 123, 255, 0.40)); }
.qa:active { transform: translateY(-2px); }
.qa .top { position: relative; display: flex; align-items: center; gap: 10px; }
.qa .qi {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(2px);
}
.qa .qi .ic { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.qa .qi .ic svg { width: 18px; height: 18px; flex-shrink: 0; }
.qa .qi .ic svg.ndlogo { width: 34px; height: 34px; flex-shrink: 0; }
.qa .k { position: relative; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.85; }
.qa .qt { position: relative; font-size: 16px; font-weight: 800; line-height: 1.35; margin-top: 12px; }
.qa .tail { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.qa .qd { font-size: 11.5px; opacity: 0.8; letter-spacing: 0.02em; }
.qa .arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  transition: transform var(--duration) var(--ease);
}
.qa:hover .arrow { transform: translateX(3px); }

/* 三个快捷模块主题配色（大色块） */
.qa:nth-child(1) { --qa-d1: #3D82FF; --qa-d2: #164FC4; --qa-soft: rgba(47, 123, 255, 0.34); }
.qa:nth-child(2) { --qa-d1: #2FC48D; --qa-d2: #0E7C52; --qa-soft: rgba(31, 166, 119, 0.34); }
.qa:nth-child(3) { --qa-d1: #8F74FF; --qa-d2: #5337C9; --qa-soft: rgba(122, 92, 255, 0.38); }

.sec-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  margin-bottom: 6px;
}
.sec-title h3 { font-size: 16px; font-weight: 700; color: #352F44; }
.sec-title .more { font-size: 13px; color: #2f5bbf; cursor: pointer; font-weight: 600; }
.sec-title .more:hover { text-decoration: underline; }

.wb-sec { margin-top: 26px; }
.wb-sec:first-of-type { margin-top: 4px; }
.wb-sec .sec-title { margin-top: 0; margin-bottom: 14px; }
.wb-sec .sec-title h3 { font-size: 15px; }
.wb-sec .quick-row { margin-top: 0; }
@media (max-width: 780px) {
  .quick-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .quick-row { grid-template-columns: 1fr; }
}
.wb-sec .stats-row { margin: 0; }
.wb-sec .meeting-list-section { margin-top: 0; }

.sect-lbl { font-size: 15px; font-weight: 700; color: #352F44; margin-bottom: 16px; }
.profile-empty { color: #8999B5; font-size: 14px; padding: 12px 0; }


/* ================================================================
   CHECKOUT PAGE
   ================================================================ */
.checkout-page { max-width: 880px; width: 100%; margin: 0 auto; }

.checkout-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 28px;
  transition: color var(--duration) var(--ease);
}
.checkout-back:hover { color: #2f5bbf; }

.checkout-title {
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 30px;
  letter-spacing: -0.02em;
}

.checkout-divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

.checkout-plan-icon {
  font-size: 30px;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2f5bbf, #5b8def);
  border-radius: var(--r-lg);
  flex-shrink: 0;
  box-shadow: 0 8px 22px rgba(47, 91, 191,0.28);
}
.checkout-plan-preview {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: #f5f8ff;
  border: 1px solid #e1ebff;
  border-radius: 14px;
}
.checkout-plan-info { flex: 1; min-width: 0; }
.checkout-preview-tag {
  font-size: 11.5px;
  font-weight: 700;
  color: #2f5bbf;
  letter-spacing: .04em;
  margin-bottom: 3px;
}
.checkout-plan-name { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.checkout-plan-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkout-plan-price { font-size: 30px; font-weight: 900; color: #2f5bbf; letter-spacing: -0.03em; }
.checkout-plan-price small { font-size: 13px; font-weight: 400; color: var(--text-muted); margin-left: 4px; }

.checkout-sec-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .04em;
  margin: 26px 0 14px;
}

.checkout-detail { display: flex; flex-direction: column; gap: 16px; }
.checkout-detail-row { display: flex; justify-content: space-between; align-items: center; }
.checkout-detail-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.checkout-detail-value { font-size: 14px; font-weight: 600; }
.checkout-detail-value.checkout-save { color: var(--success); }

/* PC 双栏结算：≥880px 左(购买项目+订单详情) 右(支付+应付+按钮)；窄屏自动落回单列 */
.co-grid { display: grid; grid-template-columns: 1fr; }
.co-side .checkout-sec-label { margin-top: 0; }
@media (min-width: 880px) {
  .co-grid { grid-template-columns: 1.15fr .9fr; column-gap: 40px; }
  .co-split { display: none; }
  .co-side { border-left: 1px solid var(--border); padding-left: 32px; }
}

.pay-options { display: flex; gap: 10px; }
.pay-option {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
}
.pay-option input { display: none; }
.pay-option:hover { border-color: var(--border-hover); background: var(--bg-hover); }
.pay-option.active {
  border-color: #2f5bbf;
  background: #e8f0fe;
  color: #2f5bbf;
  font-weight: 600;
}
.pay-option-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pay-option-icon svg { width: 18px; height: 18px; }
.pay-option[data-method="wechat"] .pay-option-icon { background: rgba(7,193,96,0.12); color: #07c160; }
.pay-option[data-method="alipay"] .pay-option-icon { background: rgba(22,119,255,0.12); color: #1677ff; }
.pay-option-name { flex: 1; text-align: left; white-space: nowrap; }

@media (max-width: 420px) {
  .pay-options { flex-direction: column; }
}

.checkout-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  padding: 16px 18px;
  background: #f5f8ff;
  border: 1px solid #e1ebff;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}
.checkout-total-price {
  font-size: 34px;
  font-weight: 900;
  color: #2f5bbf;
  letter-spacing: -0.03em;
}

.btn-pay-full {
  width: 100%;
  padding: 17px;
  background: linear-gradient(135deg, #2f5bbf, #5b8def);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(47, 91, 191,0.3);
}
.btn-pay-full:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(47, 91, 191,0.36);
}
.btn-pay-full:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 支付页：会员服务协议勾选 */
.pay-agreement {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  cursor: pointer;
}
.pay-agreement input[type="checkbox"] { margin-top: 3px; accent-color: #2f5bbf; cursor: pointer; flex-shrink: 0; }
.pay-agreement a { color: #2f5bbf; text-decoration: none; }
.pay-agreement a:hover { text-decoration: underline; }

/* 协议页：第三方共享清单表格 */
.agreement-table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 13px;
}
.agreement-table th,
.agreement-table td {
  border: 1px solid var(--line, #e4e9f2);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  word-break: break-all;
}
.agreement-table th { background: var(--bg-soft, #f5f8ff); font-weight: 600; white-space: nowrap; }

.pay-loading {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.checkout-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 36px;
  background: var(--success-dim);
  border: 1px solid rgba(16,185,129,0.15);
  border-radius: var(--r-lg);
}
.checkout-success-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  animation: popIn 0.4s ease-out;
  box-shadow: 0 8px 32px rgba(16,185,129,0.2);
}
@keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.checkout-success-title { font-size: 24px; font-weight: 800; margin-bottom: 10px; color: var(--success); }
.checkout-success-text { font-size: 14px; color: var(--text-secondary); }

/* ================================================================
   PAY MODAL (多渠道支付弹层)
   ================================================================ */
.pay-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.pay-modal {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(15,23,42,0.25);
  padding: 28px;
  animation: popIn 0.25s ease-out;
  text-align: center;
}
.pay-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--r-full);
  background: var(--bg-hover);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pay-modal-close:hover { background: var(--border); color: var(--text); }
.pay-modal-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.pay-modal-tip { font-size: 13px; color: var(--text-muted); margin-top: 16px; line-height: 1.6; }
.pay-modal-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.pay-qr-box { margin: 20px auto 0; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); display: inline-block; }
.pay-qr-box img { display: block; width: 220px; height: 220px; }
.pay-qr-fallback { font-size: 12px; color: var(--text-secondary); word-break: break-all; }
.pay-qr-fallback code { display: block; margin-top: 8px; font-size: 11px; color: var(--text-muted); word-break: break-all; }

/* ================================================================
   MEMBERSHIP BADGES
   ================================================================ */
.membership-badge {
  display: inline-block;
  padding: 7px 20px;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.membership-badge.FREE { background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); }
.membership-badge.MONTHLY,
.membership-badge.MINUTE,
.membership-badge.QUARTERLY { background: var(--primary-dim); color: var(--primary); border: 1px solid rgba(47, 91, 191,0.15); }
.membership-badge.HALF_YEAR,
.membership-badge.YEARLY { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(139,92,246,0.15); }

.text-danger { color: var(--danger); font-weight: 600; }

/* ================================================================
   MINDMAP EXPORT
   ================================================================ */
.btn-summary-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #cddffb;
  border-radius: 10px;
  background: #e8f0fe;
  color: #2f5bbf;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-summary-export:hover:not(:disabled) {
  background: #2f5bbf;
  color: #fff;
  border-color: #2f5bbf;
}
.btn-summary-export:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
}
.btn-summary-export:disabled:hover {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
}

/* Mindmap overlay */
.mindmap-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.2s var(--ease);
}
.mindmap-overlay.open {
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.mindmap-modal {
  width: 92vw;
  height: 88vh;
  max-width: 1400px;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn 0.25s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.mindmap-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.mindmap-toolbar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mindmap-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-mindmap-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.btn-mindmap-tool:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-dim);
}
.btn-mindmap-close {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  font-size: 16px;
}
.btn-mindmap-close:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-dim);
}

.mindmap-container {
  flex: 1;
  overflow: hidden;
  background: var(--bg-base);
  cursor: grab;
}
.mindmap-container:active { cursor: grabbing; }
.mindmap-container svg {
  width: 100%;
  height: 100%;
}
.mindmap-container .markmap-node text {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 13px;
  fill: var(--text) !important;
  paint-order: stroke fill;
  stroke: var(--bg-card);
  stroke-width: 5px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mindmap-container .markmap-link {
  stroke: var(--border-hover);
  stroke-width: 1.5;
  fill: none;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1280px) { .plans-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .auth-page { flex-direction: column; }
  /* 移动端隐藏营销大屏（手机样机/特性），让登录/注册卡片直接置顶全屏，避免表单被挤到页面底部 */
  .auth-left { display: none; }
  .auth-right { padding: 32px 20px; }
  .auth-msg { margin-bottom: 24px; }
  .auth-msg h1 { font-size: 30px; }
  .auth-msg p { font-size: 13px; }
  .auth-phone { width: 100%; max-width: 340px; }
  .auth-features { margin-bottom: 4px; }
  .auth-card { padding: 28px 24px 22px; }
  .auth-float { display: none; }
  .plans-grid { grid-template-columns: 1fr; }
  .sidebar { width: 180px; padding: 16px 10px; }
  .page-content { padding: 24px; }
  .meeting-panels { flex-direction: column; }
  .panel-transcript, .panel-summary { flex: none; }
  .meeting-controls-left { gap: 10px; }
  .meeting-timer { font-size: 13px; padding: 5px 10px; min-width: 50px; }
  .meeting-audio-viz { display: none !important; }
  .stats-row { grid-template-columns: 1fr; }
  .top-nav { padding: 0 20px; }
  .nav-left { gap: 20px; }
}

/* ── 历史会议详情弹窗 ── */
.detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.2s var(--ease);
}
.detail-overlay.open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-modal {
  width: 92vw;
  height: 88vh;
  max-width: 1000px;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn 0.25s var(--ease);
}
.detail-modal--import {
  height: auto;
  max-height: 88vh;
}
.detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
  flex-shrink: 0;
}
.detail-toolbar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.detail-toolbar-title,
#detail-page .page-header__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.detail-tt-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-toolbar-title .detail-tt-text { max-width: 42vw; white-space: nowrap; }
#detail-page .page-header__title .detail-tt-text { max-width: 40vw; white-space: nowrap; }
.detail-tt-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.detail-tt-edit svg { width: 13px; height: 13px; }
.detail-tt-edit:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}
.detail-tt-input {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg, #fff);
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 4px 10px;
  outline: none;
  min-width: 0;
}
.detail-toolbar-title .detail-tt-input { width: 240px; }
#detail-page .page-header__title .detail-tt-input { width: 320px; }
.detail-tt-actions {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.detail-tt-ok,
.detail-tt-cancel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.detail-tt-ok { background: var(--primary); color: #fff; }
.detail-tt-ok:hover { background: var(--primary-hover); }
.detail-tt-ok:disabled { opacity: 0.6; cursor: default; }
.detail-tt-cancel { background: var(--bg-hover); color: var(--text-muted); }
.detail-tt-cancel:hover { color: var(--text); }
.detail-source-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 22px;
  font-size: 13px;
  color: var(--danger, #cf5b4e);
  background: color-mix(in srgb, var(--danger, #cf5b4e) 8%, transparent);
  border-bottom: 1px solid var(--border);
}
.detail-source-banner svg { width: 14px; height: 14px; }
.detail-toolbar-actions {
  display: flex;
  gap: 8px;
}
.detail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-hover);
}
.detail-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.detail-tab svg { width: 15px; height: 15px; }
.detail-tab:hover { color: var(--text); }
.detail-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* 图文纪要「编辑」悬浮按钮：随内容滚动，吸附在内容区右上角 */
.sg-float-actions {
  position: sticky;
  float: right;
  z-index: 6;
}
.sg-float-actions--full { top: 26px; height: 0; overflow: visible; margin: 0 28px 0 0; transform: translateY(0); }
#full-panel-text .sg-float-actions--full { top: 14px; }

/* ── 纪要 Markdown 编辑 ── */
.summary-view-toolbar,
.summary-edit-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
  flex-shrink: 0;
}
.summary-edit-split {
  display: flex;
  flex: 1;
  min-height: 0;
}
.summary-edit-textarea {
  flex: 1;
  resize: none;
  border: none;
  border-right: 1px solid var(--border);
  padding: 20px 24px;
  font-size: 13px;
  font-family: var(--font-mono, monospace);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  outline: none;
}
.summary-edit-preview {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* ================================================================
   会员权限标签
   ================================================================ */

/* 权益标签 — 按钮/Tab 旁的小标签 */
.perm-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
  margin-left: 4px;
}

/* 带权限标签的按钮 */
.btn-with-perm {
  position: relative;
}

.btn-with-perm .perm-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 9px;
  padding: 1px 5px;
}

/* 录音下载按钮 */
.btn-audio-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 20px;
  border: none;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, #60a5fa, #2f5bbf);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  transition: filter 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn-audio-download:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.btn-audio-download:active { transform: scale(0.97); }


/* 录音回放区遮罩 */
.audio-perm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  z-index: 10;
}

.audio-perm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 16px;
  margin: 8px 0;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  text-align: center;
}

.audio-perm-lock {
  font-size: 24px;
  color: var(--text-secondary);
}

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

.audio-perm-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.btn-upgrade {
  margin-top: 4px;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}
.btn-upgrade:hover {
  background: var(--primary-hover);
  color: #fff;
}

.audio-perm-overlay .perm-overlay-icon {
  font-size: 28px;
}

.audio-perm-overlay .perm-overlay-text {
  font-size: 13px;
  color: #6b7280;
}

.audio-perm-overlay .perm-overlay-btn {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
}

/* 锁定的历史记录条目 */
.meeting-item.locked {
  opacity: 0.6;
}

.meeting-item-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: #9ca3af;
}

.meeting-item-lock-icon {
  font-size: 16px;
}

/* ==================== 音频播放器 ==================== */
.audio-player-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 0 14px;
  background: linear-gradient(135deg, #a5d8ff 0%, #63b7f2 55%, #3d9fdf 100%);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.audio-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f5bbf, #2552a8);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.4);
  transition: filter 0.15s var(--ease);
}
.audio-play-btn:hover {
  filter: brightness(1.12);
}

.audio-progress-wrap {
  flex: 1;
  height: 4px;
  background: rgba(13, 42, 90, 0.18);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.audio-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #2f5bbf, #2552a8);
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}

.audio-time {
  font-size: 12px;
  color: #0b2545;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 700;
}


/* ==================== 转写时间轴 ==================== */
.transcript-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  transition: background var(--duration) var(--ease);
}
.transcript-line:hover {
  background: var(--bg-hover, rgba(47, 91, 191, 0.04));
}

.transcript-timestamp {
  font-size: 12px;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--primary-dim);
  transition: all var(--duration) var(--ease);
  user-select: none;
}
.transcript-timestamp:hover {
  background: var(--primary);
  color: #fff;
}

/* ── 升级引导弹窗 ── */
.perm-upgrade-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}
.perm-upgrade-overlay.closing {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.perm-upgrade-modal {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 380px;
  max-width: 90vw;
  padding: 36px 32px 28px;
  text-align: center;
  animation: modalIn 0.25s var(--ease);
  position: relative;
}
.perm-upgrade-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration) var(--ease);
}
.perm-upgrade-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.perm-upgrade-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.perm-upgrade-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.perm-upgrade-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 6px;
}
.perm-upgrade-plan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 12px 0 20px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
}
.perm-upgrade-btn {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.perm-upgrade-btn:hover {
  background: var(--primary-hover);
}
.perm-upgrade-btn:active {
  transform: scale(0.98);
}
.perm-upgrade-btn.btn-login {
  background: var(--success);
}
.perm-upgrade-btn.btn-login:hover {
  background: #059669;
}

.transcript-text {
  flex: 1;
  line-height: 1.6;
  word-break: break-word;
}

/* ================================================================
   IMAGE TOOLS PAGE
   ================================================================ */
.image-tools-page {
  width: 100%; max-width: 1200px; margin: 0 auto;
  /* 与 AI 写作页同源的靛蓝色板（--w-*） */
  --w: #2f5bbf;
  --w-deep: #2552a8;
  --w-light: #5b8def;
  --w-dim: rgba(47,91,191,0.10);
  --w-wash-1: #eff4ff;
  --w-wash-2: #eaf1ff;
  --w-wash-3: #f7faff;
  --w-edge: #a9c4f5;
}

/* ---- 工具中心 Hero：靛蓝柔和底 + 深色文字（与 AI 写作页同源） ---- */
.image-tools-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: 16px 22px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(125% 150% at 92% 0%, rgba(47,91,191,0.16) 0%, rgba(91,141,239,0.06) 42%, transparent 64%),
    linear-gradient(135deg, var(--w-wash-1) 0%, var(--w-wash-2) 52%, var(--w-wash-3) 100%);
  box-shadow: 0 14px 34px -20px rgba(47,91,191,0.30);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.image-tools-hero-glow { display: none; }
.image-tools-hero-copy {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 620px;
}
.image-tools-hero-badge {
  flex: none;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--w), var(--w-light));
  box-shadow: 0 8px 16px -6px rgba(47,91,191,0.45);
}
.image-tools-hero-badge svg { width: 22px; height: 22px; }
.image-tools-hero-text { min-width: 0; }
.image-tools-hero h1 {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  font-size: 21px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); margin: 0 0 2px;
}
.image-tools-hero-tagline {
  position: relative;
  font-size: 13px; line-height: 1.55;
  color: var(--text-secondary); margin: 0; max-width: 520px;
}
.image-tools-hero-actions { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.image-tools-hero .tool-quota {
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.image-tools-hero .tool-quota b { color: var(--w-deep); }
.image-tools-hero .tool-quota-unlimited { color: var(--success); }
.doc-history-hero-btn {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600;
  color: #fff;
  background: var(--w);
  border: 1px solid var(--w);
  padding: 7px 15px; border-radius: var(--r-full);
  text-decoration: none; white-space: nowrap;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.doc-history-hero-btn:hover { background: var(--w-deep); transform: translateY(-1px); }
.doc-history-hero-btn svg { width: 15px; height: 15px; }
.doc-history-hero-count { color: #fff; opacity: .85; font-weight: 800; }

/* ---- 工具卡片网格：与 AI 写作页同源的卡片语言 ---- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.tool-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 24px 22px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.tool-entry::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--w), var(--w-light));
}
.tool-entry:hover {
  transform: translateY(-4px);
  border-color: var(--w-edge);
  box-shadow: 0 18px 40px -16px rgba(47,91,191,0.42);
}
.tool-entry-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.tool-entry-icon {
  width: 52px; height: 52px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--w), var(--w-light));
  box-shadow: 0 10px 20px -6px rgba(47,91,191,0.45);
  transition: transform var(--duration) var(--ease);
}
.tool-entry-icon svg { width: 26px; height: 26px; }
.tool-entry:hover .tool-entry-icon { transform: scale(1.06) rotate(-3deg); }
.tool-entry-title { font-size: 16px; font-weight: 700; color: var(--text); }
.tool-entry-desc { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.6; }
.tool-entry-sample { font-size: 12.5px; color: var(--text-secondary); margin-top: 12px; line-height: 1.6; }
.tool-entry-sample b { color: var(--w-deep); font-weight: 600; }
.tool-entry-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  margin-top: auto;
  border-top: 1px dashed var(--border);
}
.tool-entry-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--w-deep);
  background: var(--w-dim);
  padding: 7px 16px;
  border-radius: var(--r-full);
  text-decoration: none;
  white-space: nowrap;
  transition: gap var(--duration) var(--ease), background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.tool-entry:hover .tool-entry-go { gap: 10px; background: var(--w); color: #fff; }
.tool-entry-disabled { opacity: 0.6; }
.tool-entry-disabled:hover { transform: none; }
.tool-entry-lock {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 12px;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.25);
  padding: 5px 12px;
  border-radius: var(--r-full);
  z-index: 1;
}
.tool-entry-coming {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 7px 16px;
  border-radius: var(--r-full);
  cursor: not-allowed;
}
/* 工具中心未开放提示条（管理站功能开关关闭时展示） */
.tool-entry-offline-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
}
.tool-entry .btn-primary { text-decoration: none; }

/* ---- 去水印页头部 ---- */
.image-tools-head { margin-bottom: 22px; }
.image-tools-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 14px;
  transition: color var(--duration) var(--ease);
}
.image-tools-back:hover { color: var(--primary); }
.image-tools-back-icon { display: inline-flex; flex: none; }
.image-tools-back-icon svg { width: 15px; height: 15px; }
.image-tools-head-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.image-tools-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.image-tools-head-title h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.image-tools-head-title h1 svg { width: 26px; height: 26px; color: var(--primary); }
.image-tools-sub { color: var(--text-muted); font-size: 14px; }
.pdf-expiry-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.pdf-expiry-hint svg { width: 15px; height: 15px; color: var(--primary); flex: none; }

/* ---- 配额徽章 ---- */
.tool-quota {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-dim);
  border: 1px solid rgba(47, 91, 191,0.25);
  padding: 8px 14px;
  border-radius: var(--r-full);
}
.tool-quota-unlimited { color: var(--success); }
.tool-quota-locked { color: #f59e0b; font-weight: 600; }
.tool-quota-disabled { color: #ef4444; }
/* 「未开通 · 去升级」可点击变体：hover 加深 + 下箭头暗示行动 */
.tool-quota-action { cursor: pointer; transition: color var(--duration) var(--ease); }
.tool-quota-action:hover { color: #d97706; text-decoration: underline; }

/* ==================== AI 写作页 ==================== */
/* 靛蓝单一色相主题令牌：与全站蓝色品牌同源，仅作用于写作页 / 分享查看页。
   刻意去掉原先「蓝 + 紫」双色混搭，避免色调发脏；生活分类用同冷色系的天蓝区分。 */
.writing-page,
.writing-shared-page {
  --w: #2f5bbf;                      /* 主靛蓝（= 品牌主色） */
  --w-deep: #2552a8;                 /* 深蓝（hover / 文字） */
  --w-light: #5b8def;                /* 浅蓝（同色系渐变末端） */
  --w-dim: rgba(47,91,191,0.10);
  --w-alt: #0ea5e9;                  /* 日常生活分类·天蓝（同冷色系） */
  --w-alt-dim: rgba(14,165,233,0.10);
  --w-wash-1: #eff4ff;               /* 冷底渐变 */
  --w-wash-2: #eaf1ff;
  --w-wash-3: #f7faff;
  --w-edge: #a9c4f5;                 /* hover 描边 */
}
.writing-page { width: 100%; max-width: 1200px; margin: 0 auto; }
/* ---- 列表页 Hero：冷蓝柔和底 + 深色文字（与全站浅色基调同源） ---- */
.writing-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: 16px 22px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(125% 150% at 92% 0%, rgba(47,91,191,0.16) 0%, rgba(91,141,239,0.06) 42%, transparent 64%),
    linear-gradient(135deg, var(--w-wash-1) 0%, var(--w-wash-2) 52%, var(--w-wash-3) 100%);
  box-shadow: 0 14px 34px -20px rgba(47,91,191,0.30);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.writing-hero-glow { display: none; }
.writing-hero-copy {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 620px;
}
.writing-hero-badge {
  flex: none;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--w), var(--w-light));
  box-shadow: 0 8px 16px -6px rgba(47,91,191,0.45);
}
.writing-hero-text { min-width: 0; }
.writing-hero h1 {
  display: flex; align-items: center; gap: 10px;
  font-size: 21px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); margin: 0 0 2px;
}
.writing-hero-tagline {
  font-size: 13px; line-height: 1.55;
  color: var(--text-secondary); margin: 0; max-width: 520px;
}
.writing-hero-actions { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.writing-hero-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600;
  color: #fff;
  background: var(--w);
  border: 1px solid var(--w);
  padding: 7px 15px; border-radius: var(--r-full);
  text-decoration: none; white-space: nowrap;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.writing-hero-btn:hover { background: var(--w-deep); transform: translateY(-1px); }
.writing-hero-btn svg { width: 15px; height: 15px; }
.writing-hero-btn .writing-history-hero-count { color: #fff; opacity: .85; font-weight: 800; }
.writing-hero .tool-quota {
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.writing-hero .tool-quota b { color: var(--w-deep); }
.writing-hero .tool-quota-unlimited { color: var(--success); }

/* ---- 分类筛选胶囊 ---- */
.writing-cat-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.writing-cat-pill {
  padding: 8px 20px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.writing-cat-pill:hover { border-color: var(--w-edge); color: var(--w-deep); }
.writing-cat-pill.active {
  border-color: var(--w);
  background: var(--w-dim);
  color: var(--w-deep);
}

/* ---- 工具卡片网格：写作页专属暖色语言 ---- */
.writing-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}
.writing-tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 24px 22px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.writing-tool-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--w), var(--w-light));
}
.writing-tool-card[data-cat="life"]::before {
  background: linear-gradient(90deg, var(--w-alt), #38bdf8);
}
.writing-tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--w-edge);
  box-shadow: 0 18px 40px -16px rgba(47,91,191,0.42);
}
.writing-tool-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.writing-tool-icon {
  width: 52px; height: 52px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--w), var(--w-light));
  box-shadow: 0 10px 20px -6px rgba(47,91,191,0.45);
  transition: transform var(--duration) var(--ease);
}
.writing-tool-card[data-cat="life"] .writing-tool-icon {
  background: linear-gradient(135deg, var(--w-alt), #38bdf8);
  box-shadow: 0 10px 20px -6px rgba(14,165,233,0.40);
}
.writing-tool-card:hover .writing-tool-icon { transform: scale(1.06) rotate(-3deg); }
.writing-tool-meta { flex: 1; min-width: 0; }
.writing-tool-title { font-size: 16px; font-weight: 700; color: var(--text); }
.writing-tool-desc { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.6; }
.writing-tool-sample { font-size: 12.5px; color: var(--text-secondary); margin-top: 12px; line-height: 1.6; }
.writing-tool-sample b { color: var(--w-deep); font-weight: 600; }
.writing-tool-card[data-cat="life"] .writing-tool-sample b { color: var(--w-alt); }
.writing-tool-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  margin-top: auto;
  border-top: 1px dashed var(--border);
}
.writing-tool-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--w-deep);
  background: var(--w-dim);
  padding: 7px 16px;
  border-radius: var(--r-full);
  transition: gap var(--duration) var(--ease), background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.writing-tool-card[data-cat="life"] .writing-tool-go { color: var(--w-alt); background: var(--w-alt-dim); }
.writing-tool-card:hover .writing-tool-go { gap: 10px; background: var(--w); color: #fff; }
.writing-tool-card[data-cat="life"]:hover .writing-tool-go { background: var(--w-alt); color: #fff; }
/* 分类标签：我的写作记录页沿用，暖色系区分职场 / 生活 */
.writing-tool-tag {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-full);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.writing-tool-tag--work { color: #2f5bbf; background: rgba(47,91,191,0.10); border: 1px solid rgba(47,91,191,0.20); }
.writing-tool-tag--life { color: #0284c7; background: rgba(14,165,233,0.10); border: 1px solid rgba(14,165,233,0.20); }

.writing-main { display: flex; flex-direction: column; gap: 16px; }

/* ---- 工具详情页 ---- */
.writing-tool-head { margin-bottom: 22px; }
.writing-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 14px;
  transition: color var(--duration) var(--ease);
}
.writing-back:hover { color: var(--w-deep); }
.writing-back-icon { display: inline-flex; flex: none; }
.writing-back-icon svg { width: 15px; height: 15px; }
.writing-tool-head-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.writing-tool-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.writing-tool-head-title h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}
.writing-tool-sub { color: var(--text-muted); font-size: 14px; margin: 0; }
.writing-tool-history-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: var(--r-full);
  text-decoration: none;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.writing-tool-history-link:hover { color: var(--w-deep); border-color: var(--w); box-shadow: 0 0 0 3px var(--w-dim); }
.writing-tool-history-link svg { width: 14px; height: 14px; }

/* 左表单右结果双栏工作区 */
.writing-workspace {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.writing-workspace .writing-form-card { position: sticky; top: 88px; }
.writing-workspace .writing-result { min-height: 460px; }
.writing-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 24px;
}
.writing-empty-icon { font-size: 42px; margin-bottom: 14px; opacity: 0.85; }
.writing-empty p { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.writing-empty span { font-size: 12.5px; color: var(--text-muted); }

/* 底部其他工具快捷入口 */
.writing-others { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.writing-others-label { font-size: 13px; color: var(--text-muted); }
.writing-others-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--duration) var(--ease);
}
.writing-others-chip:hover { border-color: var(--w); color: var(--w-deep); background: var(--w-dim); }
.writing-form-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 28px;
}
.writing-form-head h2 { margin: 0 0 4px; font-size: 18px; }
.writing-form-head p { margin: 0 0 20px; color: var(--text-muted); font-size: 13px; }
.writing-form-card .form-row textarea {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-input);
  outline: none;
  resize: vertical;
  min-height: 120px;
  transition: all var(--duration) var(--ease);
}
.writing-form-card .form-row textarea::placeholder { color: var(--text-muted); }
.writing-form-card .form-row textarea:focus {
  border-color: var(--w);
  box-shadow: 0 0 0 3px var(--w-dim);
}
.writing-form-card .form-row.writing-row-textarea { align-items: flex-start; }
.writing-result {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 28px;
}
.writing-result .writing-empty {
  border: 1.5px dashed var(--border-hover);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-base));
}
.writing-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.writing-result-head h3 { margin: 0; font-size: 16px; }
.writing-result-actions { display: flex; gap: 8px; }
.writing-result-body {
  max-height: 480px;
  overflow: auto;
  line-height: 1.7;
  font-size: 14px;
  color: var(--text);
}
/* 打字机光标 */
.typing-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--w);
  animation: typingBlink 0.9s steps(1) infinite;
}
@keyframes typingBlink { 50% { opacity: 0; } }
.writing-login-tip {
  text-align: center;
  padding: 56px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.writing-login-icon { font-size: 34px; margin-bottom: 12px; }
.writing-login-tip p { color: var(--text-muted); margin: 0 0 20px; }

/* ---- 记录入口 ---- */
/* ---- 记录页筛选 ---- */
.writing-history-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.writing-history-list { display: flex; flex-direction: column; gap: 16px; }
.writing-loading { text-align: center; padding: 40px; color: var(--text-muted); }
.writing-history-loadmore { text-align: center; margin-top: 16px; }

/* ---- 记录卡片 ---- */
.writing-history-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  transition: all var(--duration) var(--ease);
}
.writing-history-card:hover { border-color: var(--w); box-shadow: 0 4px 16px -4px rgba(47,91,191,0.18); }
.writing-history-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.writing-history-card-icon {
  width: 42px; height: 42px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--w-light) 0%, var(--w) 55%, var(--w-deep) 100%);
  box-shadow: 0 6px 14px -6px rgba(47,91,191,0.45);
}
.writing-history-card-title-row { display: flex; align-items: center; gap: 8px; }
.writing-history-card-title-row .writing-tool-tag { flex: none; }
.writing-history-card-info { flex: 1; min-width: 0; }
.writing-history-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.writing-history-card-date { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.writing-history-shared {
  font-size: 11px;
  color: var(--w-deep);
  background: var(--w-dim);
  padding: 3px 10px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.writing-history-shared.is-clickable { cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease; }
.writing-history-shared.is-clickable:hover { background: rgba(47,91,191,0.18); box-shadow: 0 0 0 3px rgba(47,91,191,0.08); }
.writing-history-card-preview {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.writing-history-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- 分享弹窗 ---- */
.writing-share-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.writing-share-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.writing-share-dialog {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.25);
}
.writing-share-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.writing-share-icon { font-size: 28px; }
.writing-share-header h3 { margin: 0; font-size: 18px; }
.writing-share-tip { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }
.writing-share-url-box {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.writing-share-url-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-base);
  outline: none;
}
.writing-share-disclaimer {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.writing-share-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---- 分享配置（有效期/提取码）与结果区：wsx- 前缀，与会议分享面板同交互 ---- */
.wsx-config { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.wsx-row { display: flex; align-items: flex-start; gap: 12px; }
.wsx-label { flex: none; width: 56px; font-size: 13px; color: var(--text-muted); line-height: 32px; }
.wsx-expiry { display: flex; gap: 8px; }
.wsx-exp-btn {
  padding: 6px 14px; font-size: 13px; border-radius: var(--r-sm, 8px);
  border: 1px solid var(--border, #e2e8f0); background: var(--bg, #fff); color: var(--text); cursor: pointer;
}
.wsx-exp-btn.is-active { border-color: var(--primary, #4f6ef7); color: var(--primary, #4f6ef7); font-weight: 600; background: rgba(79, 110, 247, 0.06); }
.wsx-pwd-wrap { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wsx-switch { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); line-height: 32px; cursor: pointer; }
.wsx-switch input { accent-color: var(--primary, #4f6ef7); }
.wsx-pwd-row { display: flex; align-items: center; gap: 8px; }
.wsx-pwd-input {
  flex: 1; max-width: 200px; padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-sm, 8px); color: var(--text);
}
.wsx-btn-sm {
  padding: 6px 12px; font-size: 12px; border-radius: var(--r-sm, 8px);
  border: 1px solid var(--border, #e2e8f0); background: var(--bg, #fff); color: var(--text-muted); cursor: pointer;
}
.wsx-btn-sm:hover { color: var(--primary, #4f6ef7); border-color: var(--primary, #4f6ef7); }
.wsx-result { margin-bottom: 16px; }
.wsx-result-title { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.wsx-url-row { display: flex; gap: 8px; align-items: center; }
.wsx-code-row {
  margin-top: 10px; padding: 8px 12px; border-radius: var(--r-sm, 8px);
  background: rgba(79, 110, 247, 0.06); font-size: 13px; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.wsx-code-label { color: var(--text-muted); font-size: 12px; }
.wsx-meta { margin-top: 8px; font-size: 12px; color: var(--text-muted); }

/* ---- 分享查看页提取码门 ---- */
.writing-shared-gate { display: flex; justify-content: center; padding: 80px 0 40px; }
.wsx-gate-card {
  width: 320px; padding: 36px 28px; text-align: center;
  background: var(--bg-card, #fff); border-radius: var(--r-lg, 16px);
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.12);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.wsx-gate-icon { font-size: 36px; }
.wsx-gate-title { font-size: 17px; font-weight: 700; color: var(--text); }
.wsx-gate-tip { font-size: 13px; color: var(--text-muted); }
.wsx-gate-input {
  width: 100%; padding: 10px 12px; font-size: 14px; text-align: center; letter-spacing: 2px;
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-sm, 8px); color: var(--text);
}
.wsx-gate-err { min-height: 18px; font-size: 12px; color: #e5484d; }
.wsx-gate-card .btn-primary { width: 100%; }

/* ---- 记录详情弹窗 ---- */
/* ---- AI 写作记录详情弹框（大版面：hero 头 + 滚动正文 + 底部操作条） ---- */
.writing-record-detail-dialog {
  max-width: 880px;
  width: 92%;
  max-height: 88vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wrd-hero {
  position: relative;
  overflow: hidden;
  flex: none;
  padding: 24px 32px 20px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(120% 160% at 90% 0%, rgba(47,91,191,0.14) 0%, rgba(91,141,239,0.05) 45%, transparent 68%),
    linear-gradient(135deg, var(--w-wash-1, #eff4ff) 0%, var(--w-wash-2, #eaf1ff) 55%, var(--w-wash-3, #f7faff) 100%);
}
.wrd-hero-glow {
  position: absolute;
  top: -70px;
  right: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,141,239,0.28) 0%, transparent 70%);
  pointer-events: none;
}
.wrd-hero-row { display: flex; align-items: flex-start; gap: 14px; position: relative; }
.wrd-hero-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(47,91,191,0.16);
  box-shadow: 0 4px 14px -6px rgba(47,91,191,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.wrd-hero-info { min-width: 0; }
.wrd-hero-info h2 {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.4;
  color: var(--text-primary, #1d2129);
  word-break: break-word;
}
.wrd-hero-meta { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.writing-record-detail-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px 32px;
  margin: 0;
  line-height: 1.85;
  font-size: 15px;
}
.writing-record-detail-dialog .wrd-actions {
  flex: none;
  margin: 0;
  padding: 14px 24px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  background: #fbfcfe;
}

/* ---- 分享查看页 ---- */
.writing-shared-page { width: 100%; max-width: 960px; margin: 0 auto; }
.writing-shared-loading {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted);
  font-size: 15px;
}
.writing-shared-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: 32px 36px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  background:
    radial-gradient(125% 150% at 92% 0%, rgba(47,91,191,0.16) 0%, rgba(91,141,239,0.06) 42%, transparent 64%),
    linear-gradient(135deg, var(--w-wash-1) 0%, var(--w-wash-2) 52%, var(--w-wash-3) 100%);
  box-shadow: 0 14px 34px -20px rgba(47,91,191,0.30);
}
.writing-shared-hero h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text);
}
.writing-shared-hero p {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}
/* 用户输入卡片 */
.writing-shared-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.writing-shared-input-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.writing-shared-input-row {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.writing-shared-input-row:last-child { margin-bottom: 0; }
.writing-shared-input-label {
  flex-shrink: 0;
  color: var(--text-secondary);
  min-width: 70px;
}
.writing-shared-input-value {
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
}
/* 生成结果 */
.writing-shared-body {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 36px;
  line-height: 1.8;
  font-size: 15px;
  margin-bottom: 24px;
}
.writing-shared-cta {
  text-align: center;
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.writing-shared-cta p {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.writing-shared-cta .btn-primary {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* ---- 分享查看页 · 视觉增强 ---- */
/* hero 光斑（全局 hero-glow 默认隐藏，仅分享查看页启用） */
.writing-shared-page .writing-hero-glow {
  display: block;
  position: absolute;
  top: -70px;
  right: -50px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 141, 239, 0.28) 0%, transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}
/* 类型徽章 */
.wsx-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary, #2f5bbb);
  background: rgba(91, 141, 239, 0.12);
  border: 1px solid rgba(91, 141, 239, 0.25);
  border-radius: 999px;
}
/* hero 右上角复制全文 */
.wsx-copy-all {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.wsx-copy-all:hover { color: var(--primary, #2f5bbb); border-color: var(--primary, #2f5bbb); transform: translateY(-1px); }
/* 正文卡片质感与排版 */
.writing-shared-body {
  box-shadow: 0 12px 32px -20px rgba(15, 23, 42, 0.20);
}
.writing-shared-body > :first-child { margin-top: 0; }
.writing-shared-body > :last-child { margin-bottom: 0; }
.writing-shared-body h1, .writing-shared-body h2 { margin-top: 1.6em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
.writing-shared-body h1:first-child, .writing-shared-body h2:first-child { border-bottom: none; }
/* CTA 渐变与悬停 */
.writing-shared-cta {
  background: linear-gradient(135deg, rgba(91, 141, 239, 0.10) 0%, rgba(47, 91, 191, 0.05) 100%);
}
.writing-shared-cta .btn-primary {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.writing-shared-cta .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(47, 91, 191, 0.45);
}
/* loading spinner */
.writing-shared-loading { display: flex; align-items: center; justify-content: center; gap: 10px; }
.wsx-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(91, 141, 239, 0.25);
  border-top-color: var(--primary, #2f5bbb);
  border-radius: 50%;
  animation: wsx-spin 0.8s linear infinite;
}
@keyframes wsx-spin { to { transform: rotate(360deg); } }
/* 提取码门增强 */
.wsx-gate-input:focus {
  outline: none;
  border-color: var(--primary, #2f5bbb);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.18);
}
.wsx-gate-card .btn-primary {
  padding: 11px 0;
  border-radius: var(--r-sm, 8px);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wsx-gate-card .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(47, 91, 191, 0.45);
}

/* ---- 分享查看页轻量顶栏（wsx-top）：复用 top-nav 毛玻璃底，内容精简 ---- */
.wsx-top .wsx-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
.wsx-top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wsx-top-logo { font-size: 17px; flex: none; }
.wsx-top-divider { width: 1px; height: 18px; background: #d9e2f2; flex: none; }
.wsx-top-tag {
  font-size: 13px;
  color: var(--w-deep, #2552a8);
  background: var(--w-dim, rgba(47,91,191,0.08));
  border: 1px solid rgba(47,91,191,0.18);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wsx-top-right { display: flex; align-items: center; gap: 10px; flex: none; }
.wsx-top-cta {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #5b8def 0%, #2f5bbf 100%);
  box-shadow: 0 4px 14px -6px rgba(47,91,191,0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wsx-top-cta:hover { transform: translateY(-1px); box-shadow: 0 7px 18px -6px rgba(47,91,191,0.6); color: #fff; }
@media (max-width: 640px) {
  .wsx-top-tag { display: none; }
  .wsx-top .wsx-top-inner { padding: 0 14px; }
}

@media (max-width: 860px) {
  .writing-tool-grid { grid-template-columns: 1fr; }
  .writing-workspace { grid-template-columns: 1fr; }
  .writing-workspace .writing-form-card { position: static; }
}


/* ---- 主卡片 ---- */
.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
}
.tool-card-body { padding: 36px 40px 40px; }

/* ---- 上传区 ---- */
.img-upload-zone {
  position: relative;
  border: 2px dashed rgba(47, 91, 191,0.4);
  border-radius: var(--r-md);
  padding: 80px 40px;
  text-align: center;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  background:
    radial-gradient(720px 220px at 50% -30px, rgba(47, 91, 191,0.1), transparent),
    var(--bg-card);
}
.img-upload-zone:hover, .img-upload-zone.dragging {
  border-color: var(--primary);
  background:
    radial-gradient(620px 200px at 50% -30px, rgba(47, 91, 191,0.16), transparent),
    var(--bg-card);
  transform: translateY(-2px);
}
.img-upload-icon {
  width: 68px; height: 68px;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  box-shadow: 0 12px 24px -6px rgba(47, 91, 191,0.5);
}
.img-upload-icon svg { width: 32px; height: 32px; }
.img-upload-text { font-size: 17px; font-weight: 600; color: var(--text); }
.img-upload-tips { font-size: 13px; color: var(--text-muted); margin-top: 10px; }

/* ---- 编辑工具栏 ---- */
.img-editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.img-editor-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.img-editor-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.img-editor-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.img-editor-hint b { color: var(--primary); }

/* 分段控件（macOS 风格） */
.img-tool-group {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}
.img-tool-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all .18s var(--ease);
  white-space: nowrap;
}
.img-tool-btn svg { width: 15px; height: 15px; }
.img-tool-btn:hover { color: var(--primary); }
.img-tool-btn.active {
  background: var(--primary-dim);
  color: var(--primary);
}

/* 笔触控件 */
.img-brush-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  transition: opacity var(--duration) var(--ease);
}
.img-brush-controls.disabled { opacity: 0.4; pointer-events: none; }
.img-brush-label { font-size: 14px; color: var(--text-muted); }
.img-brush-range {
  width: 120px;
  accent-color: var(--primary);
  cursor: pointer;
}
.img-brush-range:disabled { opacity: .4; cursor: not-allowed; }
.img-brush-preview {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card);
  flex: none;
}
.img-brush-preview i {
  display: block;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff82b3, #ff4d94);
  transition: width .15s var(--ease), height .15s var(--ease);
}

/* 图标按钮 */
.img-icon-btn {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.img-icon-btn svg { width: 17px; height: 17px; }
.img-text-btn { width: auto; height: 36px; padding: 0 16px; font-size: 14px; font-weight: 400; gap: 7px; }
.img-text-btn svg { width: 15px; height: 15px; }
.img-icon-btn:hover {
  color: var(--primary);
  border-color: rgba(47, 91, 191,0.4);
  background: var(--primary-dim);
}

/* ---- 画布 ---- */
.img-editor-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  padding: 36px;
  background:
    radial-gradient(1000px 320px at 50% -80px, rgba(47, 91, 191,0.06), transparent),
    var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  user-select: none;
}
.img-editor-wrap img { display: block; max-width: 100%; }
.img-editor-stage {
  position: relative;
  display: inline-block;
  line-height: 0;
  background: repeating-conic-gradient(#f4f4f8 0% 25%, #fff 0% 50%) 0 0 / 20px 20px;
  border-radius: var(--r-xs);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(15,23,42,0.16), 0 2px 6px rgba(15,23,42,0.06);
}
.img-editor-stage canvas {
  position: absolute;
  left: 0; top: 0;
  cursor: crosshair;
}

/* 区域列表 */
.img-editor-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  min-height: 26px;
}
.img-region-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  background: var(--primary-dim);
  border: 1px solid rgba(47, 91, 191,0.28);
  border-radius: var(--r-full);
  padding: 5px 7px 5px 14px;
}
.img-region-del {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 50%;
}
.img-region-del:hover { color: var(--danger); background: var(--danger-dim); }

/* ---- 操作按钮 ---- */
.img-editor-actions {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
.img-editor-actions .btn-primary {
  min-width: 280px;
  padding: 14px 40px;
  font-size: 16px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 10px 24px -8px rgba(47, 91, 191,0.6);
}
.img-editor-actions .btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover), var(--accent));
  box-shadow: 0 14px 30px -8px rgba(47, 91, 191,0.7);
}

/* ---- 处理中 ---- */
.img-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}
.img-processing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 56px 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-base));
  box-shadow: var(--shadow-sm);
}
.img-processing-spinner {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 10px;
}
.img-processing-ring {
  position: absolute;
  inset: 0;
  border: 3px solid var(--primary-dim);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.img-processing-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.img-processing-icon svg { width: 28px; height: 28px; }
.img-processing-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.img-processing-text {
  font-size: 13px;
  color: var(--text-muted);
}
.img-processing-progress {
  width: 200px;
  height: 4px;
  margin-top: 14px;
  border-radius: 99px;
  background: var(--border);
  overflow: hidden;
}
.img-processing-bar {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  animation: processing-slide 1.1s ease-in-out infinite;
}
.img-processing-tip {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
@keyframes processing-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(340%); }
}

/* ---- 结果区 ---- */
.img-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.img-result-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.img-result-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--success);
}
.img-result-title svg { width: 18px; height: 18px; }
.img-result-compare { display: flex; justify-content: center; }

/* 对比滑块 */
.img-compare {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: repeating-conic-gradient(#f4f4f8 0% 25%, #fff 0% 50%) 0 0 / 20px 20px;
  cursor: ew-resize;
  user-select: none;
  max-width: 100%;
  box-shadow: 0 12px 32px rgba(15,23,42,0.12);
}
.img-compare img { display: block; width: 100%; height: 100%; }
.img-compare-top {
  position: absolute;
  left: 0; top: 0;
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}
.img-compare-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 1px rgba(47, 91, 191,0.45);
  pointer-events: none;
}
.img-compare-handle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 3px 10px rgba(0,0,0,0.28);
}
.img-compare-handle::before,
.img-compare-handle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 2px;
  background: var(--primary);
  border-radius: 2px;
}
.img-compare-handle::before { transform: translate(calc(-100% - 2px), -50%); }
.img-compare-handle::after { transform: translate(2px, -50%); }
.img-compare-label {
  position: absolute;
  top: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--r-full);
  pointer-events: none;
  letter-spacing: .5px;
}
.img-compare-label-before { left: 12px; background: rgba(15,23,42,0.7); }
.img-compare-label-after { right: 12px; background: rgba(16,185,129,0.92); }

/* 结果操作 */
.img-result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.img-result-quota { font-size: 14px; color: var(--text-muted); }
.img-result-quota b { color: var(--primary); }

/* ---- 证件照换底色 ---- */
.id-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.id-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background:
    radial-gradient(720px 220px at 50% -30px, rgba(47, 91, 191,0.06), transparent),
    var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.id-editor-body {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: nowrap;
}
.id-color-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 12px;
  background:
    radial-gradient(720px 220px at 50% -30px, rgba(47, 91, 191,0.06), transparent),
    var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-width: 100px;
  flex-shrink: 0;
}
.id-color-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.id-preview-wrap,
.id-result-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(720px 220px at 50% -30px, rgba(47, 91, 191,0.08), transparent),
    var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
}
.id-preview-wrap img,
.id-result-preview img {
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.28);
}
.id-color-swatches {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.id-color-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.id-color-swatch {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 2px solid var(--border);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: all var(--duration) var(--ease);
  display: flex; align-items: center; justify-content: center;
}
.id-color-swatch:hover { transform: translateY(-2px); }
.id-color-swatch.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(47, 91, 191,0.25);
}
.id-color-check {
  font-style: normal;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  display: none;
}
.id-color-swatch.active .id-color-check { display: block; }
.id-color-swatch[data-color="blue"] .id-color-check,
.id-color-swatch[data-color="red"] .id-color-check { color: #fff; }
.id-result-preview img { max-height: 420px; }

@media (max-width: 768px) {
  .id-editor-body {
    flex-direction: column;
  }
  .id-color-panel {
    flex-direction: row;
    justify-content: center;
    min-width: 0;
  }
  .id-color-swatches {
    flex-direction: row;
  }
}
@media (max-width: 640px) {
  .image-tools-hero { padding: 14px 16px; }
  .image-tools-hero h1 { font-size: 18px; }
  .ppt-hero { padding: 14px 16px; }
  .ppt-hero h1 { font-size: 18px; }
  .tool-card-body { padding: 18px 16px 22px; }
  .img-editor-wrap { padding: 16px 12px; }
  .img-editor-bar { align-items: flex-start; flex-direction: column; }
  .img-brush-controls { border-left: none; padding-left: 0; }
}

/* ================================================================
   文档处理 · PDF转图片
   ================================================================ */
.pdf-params {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pdf-params-file {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
  padding: 12px 16px;
  background:
    radial-gradient(720px 220px at 50% -30px, rgba(47, 91, 191,0.06), transparent),
    var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.pdf-params-file-icon { display: inline-flex; color: var(--primary); flex: none; }
.pdf-params-file-icon svg { width: 18px; height: 18px; }
.pdf-params-file-name {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-params-file .img-text-btn {
  flex: none;
  white-space: nowrap;
}
.pdf-param-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pdf-param-label {
  width: 76px;
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.pdf-param-options {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-base);
}
.pdf-option-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  height: 34px;
  padding: 0 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.pdf-option-btn:hover { color: var(--text); }
.pdf-option-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 10px -2px rgba(47, 91, 191,0.5);
}
.pdf-param-hint { font-size: 12px; color: var(--text-dim); }
.pdf-param-input {
  flex: 1 1 auto;
  min-width: 200px;
  max-width: 420px;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.pdf-param-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(47, 91, 191,0.18);
}
.pdf-params-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* 图片转PDF · 图片列表（拖拽排序） */
.imgpdf-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.imgpdf-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: grab;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.imgpdf-item:hover { border-color: var(--primary); }
.imgpdf-item:active { cursor: grabbing; }
.imgpdf-item-thumb {
  width: 100%;
  height: 128px;
  object-fit: contain;
  border-radius: calc(var(--r-md) - 4px);
  background: #fff;
  border: 1px solid var(--border);
}
.imgpdf-item-index {
  position: absolute;
  top: 16px;
  left: 16px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(15, 23, 42, 0.72);
  border-radius: 99px;
}
.imgpdf-item-name {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imgpdf-item .img-text-btn {
  flex: none;
  align-self: flex-end;
}
.imgpdf-param-hint { margin-top: -6px; }

/* 图片转PDF · 自动美化开关 */
.imgpdf-polish { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.imgpdf-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.imgpdf-switch input { opacity: 0; width: 0; height: 0; }
.imgpdf-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--border);
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.imgpdf-switch-slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
}
.imgpdf-switch input:checked + .imgpdf-switch-slider {
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.imgpdf-switch input:checked + .imgpdf-switch-slider::before { transform: translateX(20px); }
.imgpdf-polish-text { font-size: 12.5px; color: var(--text-muted); max-width: 430px; line-height: 1.6; }

/* 图片转PDF · 完成结果卡 */
.imgpdf-done {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.imgpdf-done-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background:
    radial-gradient(600px 220px at 16% -40px, rgba(16, 185, 129, 0.16), transparent),
    linear-gradient(135deg, rgba(5, 150, 105, 0.08), rgba(16, 185, 129, 0.02));
  border-bottom: 1px solid var(--border);
}
.imgpdf-done-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #10b981, #34d399);
  box-shadow: 0 10px 22px -6px rgba(16, 185, 129, 0.55);
}
.imgpdf-done-icon svg { width: 22px; height: 22px; }
.imgpdf-done-titles { flex: 1 1 auto; min-width: 0; }
.imgpdf-done-title { font-size: 17px; font-weight: 800; color: var(--text); }
.imgpdf-done-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.imgpdf-done-again { flex: none; white-space: nowrap; }
.imgpdf-done-body { padding: 22px 24px 4px; }
.imgpdf-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.imgpdf-meta-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-base);
}
.imgpdf-meta-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--primary);
  background: rgba(47, 91, 191, 0.1);
}
.imgpdf-meta-icon svg { width: 17px; height: 17px; }
.imgpdf-meta-desc {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.imgpdf-meta-desc b {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imgpdf-meta-desc i { font-style: normal; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.imgpdf-done-actions {
  display: flex;
  justify-content: center;
  padding: 22px 0 6px;
}
.imgpdf-done-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 14px 24px 16px;
  background: var(--bg-base);
  border-top: 1px solid var(--border);
}

.btn-lg {
  padding: 13px 46px;
  font-size: 15px;
  border-radius: 12px;
}

/* 处理进度（静态宽度，展示真实进度） */
.pdf-processing-bar {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .6s var(--ease);
}

/* ---- 结果区 ---- */
.pdf-result { display: flex; flex-direction: column; gap: 16px; }
.pdf-result-info { font-size: 14px; color: var(--text-secondary); }
.pdf-expiry-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #92400e;
}
.pdf-expiry-notice.expired {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
}
.pdf-expiry-icon { flex: none; display: inline-flex; }
.pdf-expiry-icon svg { width: 18px; height: 18px; }
.pdf-expiry-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
}
.pdf-expiry-main { font-size: 13px; font-weight: 600; }
.pdf-expiry-countdown {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pdf-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.pdf-thumb-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-base);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.pdf-thumb-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pdf-thumb-img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  background:
    repeating-conic-gradient(#f4f4f8 0% 25%, #fff 0% 50%) 0 0 / 20px 20px;
}
.pdf-thumb-label {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  border-top: 1px solid var(--border);
}
.pdf-thumb-loading {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .pdf-param-label { width: auto; min-width: 64px; }
}

/* ================================================================
   文档处理 · 历史记录页
   ================================================================ */
.doc-history-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: var(--r-full);
  text-decoration: none;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.doc-history-link:hover { color: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.doc-history-link svg { width: 14px; height: 14px; }

.doc-history-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.doc-history-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.doc-history-stat-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.doc-history-stat-num-success { color: var(--success); }
.doc-history-stat-num-expired { color: var(--danger); }
.doc-history-stat-label { font-size: 13px; color: var(--text-muted); }

.doc-history-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.doc-history-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 8px 16px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.doc-history-filter:hover { border-color: var(--border-hover); color: var(--text); }
.doc-history-filter.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 6px 16px -6px rgba(47, 91, 191,0.5);
}

.doc-history-list { display: flex; flex-direction: column; gap: 14px; }
.doc-history-loading { text-align: center; padding: 48px; color: var(--text-muted); }
.doc-history-loadmore { text-align: center; margin-top: 16px; }

.doc-history-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.doc-history-card:hover { border-color: var(--primary); box-shadow: 0 4px 16px -4px rgba(47, 91, 191,0.15); }
.doc-history-card-top { display: flex; align-items: flex-start; gap: 14px; }
.doc-history-card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #f97316);
  box-shadow: 0 8px 16px -6px rgba(239,68,68,0.4);
}
.doc-history-card-icon svg { width: 20px; height: 20px; }
.doc-history-card-icon-ppt {
  background: linear-gradient(135deg, #f97316, #eab308);
  box-shadow: 0 8px 16px -6px rgba(249,115,22,0.4);
}
.doc-history-card-info { flex: 1; min-width: 0; }
.doc-history-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-history-card-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; }
.doc-history-card-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 340px; }
.doc-history-card-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.doc-history-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-full);
}
.doc-history-badge-running { color: var(--primary); background: var(--primary-dim); }
.doc-history-badge-success { color: var(--success); background: rgba(16,185,129,0.12); }
.doc-history-badge-failed { color: var(--danger); background: rgba(239,68,68,0.1); }

.doc-history-expiry { font-size: 12px; color: var(--text-secondary); }
.doc-history-expired {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--danger);
  background: rgba(239,68,68,0.1);
  padding: 3px 9px;
  border-radius: var(--r-full);
}
.doc-history-msg { font-size: 12.5px; color: var(--danger); margin-top: 6px; }

.doc-history-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.doc-history-action-note { font-size: 12.5px; color: var(--text-muted); }

.doc-history-empty { text-align: center; padding: 56px 20px; color: var(--text-muted); }
.doc-history-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 50%;
  color: var(--primary);
  background: var(--primary-dim);
}
.doc-history-empty-icon svg { width: 26px; height: 26px; }
.doc-history-empty p { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.doc-history-empty span { font-size: 12.5px; }

@media (max-width: 768px) {
  .doc-history-stats { grid-template-columns: repeat(2, 1fr); }
  .doc-history-card-side { max-width: 100%; align-items: flex-start; }
}

/* ================================================================
   AI PPT 制作
   ================================================================ */
.ppt-page {
  width: 100%; max-width: 1200px; margin: 0 auto;
  /* 与 AI 写作页同源的靛蓝色板（--w-*） */
  --w: #2f5bbf;
  --w-deep: #2552a8;
  --w-light: #5b8def;
  --w-dim: rgba(47,91,191,0.10);
  --w-wash-1: #eff4ff;
  --w-wash-2: #eaf1ff;
  --w-wash-3: #f7faff;
  --w-edge: #a9c4f5;
}
/* ---- PPT Hero：靛蓝柔和底 + 深色文字（与 AI 写作页同源） ---- */
.ppt-hero {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  padding: 16px 22px; margin-bottom: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(125% 150% at 92% 0%, rgba(47,91,191,0.16) 0%, rgba(91,141,239,0.06) 42%, transparent 64%),
    linear-gradient(135deg, var(--w-wash-1) 0%, var(--w-wash-2) 52%, var(--w-wash-3) 100%);
  box-shadow: 0 14px 34px -20px rgba(47,91,191,0.30);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.ppt-hero-glow { display: none; }
.ppt-hero-copy {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  max-width: 620px;
}
.ppt-hero-badge {
  flex: none;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--w), var(--w-light));
  box-shadow: 0 8px 16px -6px rgba(47,91,191,0.45);
}
.ppt-hero-badge svg { width: 22px; height: 22px; }
.ppt-hero-text { min-width: 0; }
.ppt-hero h1 {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  font-size: 21px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); margin: 0 0 2px;
}
.ppt-hero-tagline {
  position: relative;
  font-size: 13px; line-height: 1.55;
  color: var(--text-secondary); margin: 0; max-width: 520px;
}
.ppt-hero-actions { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ppt-hero .tool-quota {
  position: static;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.ppt-hero .tool-quota b { color: var(--w-deep); }
.ppt-hero .tool-quota-unlimited { color: var(--success); }
.ppt-hero .tool-quota-disabled { color: #ef4444; }

.ppt-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.ppt-step {
  padding: 8px 18px; border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary); font-size: 13px; font-weight: 600;
}
.ppt-step.active { border-color: var(--primary); background: var(--primary-dim); color: var(--primary); }
.ppt-step.done { color: var(--success); border-color: var(--success); }

.ppt-layout { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.ppt-form-card {
  position: relative;
  background:
    radial-gradient(120% 120% at 100% 0%, var(--primary-glow), transparent 45%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 30px 26px;
  transition: border-color var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease);
}
.ppt-form-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }
.ppt-form-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.ppt-form-card .ppt-form-head { margin-bottom: 22px; }
.ppt-form-card .ppt-form-head h2 { margin: 0 0 6px; font-size: 22px; }
.ppt-form-card .ppt-form-head p { margin: 0; color: var(--text-muted); font-size: 13px; }
.ppt-hint { color: var(--text-muted); font-size: 12px; }
.ppt-tip { margin-top: 16px; color: var(--text-muted); font-size: 12px; }
/* 无套餐权限提示行：琥珀色与维护提示区分（维护=灰、权限=琥珀引导升级） */
.ppt-perm-tip { color: #d97706; font-weight: 600; }
.ppt-perm-tip a { color: var(--primary); font-weight: 700; text-decoration: underline; }
.ppt-perm-tip a:hover { color: var(--primary-dark, #1e40af); }
.ppt-loading { padding: 48px 0; text-align: center; color: var(--text-muted); }

/* 表单字段（纵向布局 + 美化下拉框） */
.ppt-field { margin-bottom: 18px; }
.ppt-field:last-of-type { margin-bottom: 4px; }
.ppt-field-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 18px; margin-bottom: 18px;
}
.ppt-field-row .ppt-field { margin-bottom: 0; }
.ppt-field-row .ppt-field-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppt-field-label {
  display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700;
  color: var(--text-secondary); letter-spacing: 0.01em;
}
.ppt-field-label em { font-style: normal; color: #f43f5e; margin-left: 2px; }
.ppt-field input,
.ppt-field select,
.ppt-field textarea {
  width: 100%; height: 46px; box-sizing: border-box;
  padding: 0 16px; border: 1.5px solid var(--border);
  border-radius: var(--r-sm); font-size: 14px; font-family: inherit; color: var(--text);
  background: var(--bg-input); outline: none;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background var(--duration) var(--ease);
}
.ppt-field input:hover,
.ppt-field select:hover,
.ppt-field textarea:hover { border-color: var(--border-hover); }
.ppt-field input:focus,
.ppt-field select:focus,
.ppt-field textarea:focus {
  border-color: var(--primary); background: var(--bg-card);
  box-shadow: 0 0 0 4px var(--primary-dim);
}
.ppt-field input::placeholder,
.ppt-field textarea::placeholder { color: var(--text-muted); }
.ppt-field textarea {
  height: auto; min-height: 80px; padding: 12px 16px; resize: vertical;
  line-height: 1.6; vertical-align: top;
}
.ppt-field-note {
  display: block; margin-top: 6px; padding-left: 2px;
  font-size: 12px; color: var(--text-muted);
}

/* 自绘下拉框：弹层自定义样式、与控件左对齐、仅可点选 */
.ppt-dropdown { position: relative; }
.ppt-dropdown-trigger {
  width: 100%; height: 46px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 16px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-family: inherit; font-size: 14px; color: var(--text);
  background: var(--bg-input); cursor: pointer; text-align: left;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background var(--duration) var(--ease);
}
.ppt-dropdown-trigger:hover { border-color: var(--border-hover); }
.ppt-dropdown.open .ppt-dropdown-trigger,
.ppt-dropdown-trigger:focus-visible {
  border-color: var(--primary); background: var(--bg-card);
  box-shadow: 0 0 0 4px var(--primary-dim); outline: none;
}
.ppt-dd-label {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.ppt-dd-placeholder { color: var(--text-muted); }
.ppt-dropdown-trigger::after {
  content: ''; flex: none; width: 8px; height: 8px; margin-right: 2px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.ppt-dropdown.open .ppt-dropdown-trigger::after {
  transform: rotate(225deg); margin-bottom: 4px; border-color: var(--primary);
}
.ppt-dropdown-list {
  position: absolute; top: calc(100% + 6px); left: 0; width: 100%;
  margin: 0; padding: 6px; list-style: none;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  max-height: 240px; overflow-y: auto;
  display: none; z-index: 30;
}
.ppt-dropdown.open .ppt-dropdown-list { display: block; }
.ppt-dd-item {
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--text); cursor: pointer;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.ppt-dd-item:hover { background: var(--bg-hover); }
.ppt-dd-item.selected { color: var(--primary); font-weight: 700; background: var(--primary-dim); }
.ppt-dd-empty { color: var(--text-muted); font-style: normal; }

@media (max-width: 760px) {
  .ppt-field-row { grid-template-columns: 1fr; gap: 18px 0; }
}

.ppt-tasks-card {
  position: relative; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px;
  box-shadow: var(--shadow-sm);
}
.ppt-tasks-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
}
.ppt-tasks-head h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 16px; }
.ppt-tasks-head h3 svg { color: var(--primary); }
.ppt-tasks-empty { padding: 24px 0; text-align: center; color: var(--text-muted); font-size: 13px; }
.ppt-tasks-empty p { margin: 0 0 4px; }
.ppt-task-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border);
  font-size: 13px;
}
.ppt-task-row:first-of-type { border-top: none; }
.ppt-task-status {
  flex: none; padding: 2px 8px; border-radius: var(--r-full); font-size: 11px;
  background: var(--bg-base); color: var(--text-secondary);
}
.ppt-task-status.done { background: var(--success-dim, #e7f6ec); color: var(--success); }
.ppt-task-status.running, .ppt-task-status.pending { background: var(--primary-dim); color: var(--primary); }
.ppt-task-status.failed { background: #fde8e8; color: #dc2626; }
.ppt-task-topic { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppt-task-time { flex: none; color: var(--text-muted); font-size: 12px; }

.ppt-edit-wrap { max-width: 1200px; margin: 0 auto; }
.ppt-edit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ppt-edit-title h2 { margin: 0 0 6px; font-size: 22px; }
.ppt-edit-title p { margin: 0; color: var(--text-muted); font-size: 13px; }
.ppt-edit-chip {
  flex: none; padding: 6px 14px; border-radius: var(--r-full); font-size: 13px; font-weight: 700;
  color: var(--primary); background: var(--primary-dim);
}
.ppt-title-editor {
  background: linear-gradient(135deg, var(--primary), #6d5ef7);
  border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 18px; color: #fff;
  box-shadow: var(--shadow-lg);
}
.ppt-title-editor label { display: block; font-size: 13px; opacity: .85; margin-bottom: 8px; font-weight: 600; }
.ppt-title-editor input {
  width: 100%; border: none; background: rgba(255,255,255,.96); color: var(--text);
  border-radius: var(--r-md); padding: 12px 14px; font-size: 16px; font-weight: 600; outline: none;
}
.ppt-title-editor input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.35); }

.ppt-section-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.ppt-section-editor {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-card);
  overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: box-shadow var(--duration) var(--ease);
}
.ppt-section-editor:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.ppt-section-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
}
.ppt-sec-collapse {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-secondary); cursor: pointer; display: grid; place-items: center;
  font-size: 12px; line-height: 1; transition: all var(--duration) var(--ease);
}
.ppt-sec-collapse:hover { border-color: var(--primary); color: var(--primary); }
.ppt-chev { display: inline-block; transition: transform .2s var(--ease); }
.ppt-section-editor.collapsed .ppt-chev { transform: rotate(-90deg); }
.ppt-section-editor.collapsed .ppt-section-body { display: none; }
.ppt-section-badge {
  flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--primary), #6d5ef7);
}
.ppt-section-title {
  flex: 1; border: none; background: transparent; font-size: 15px; font-weight: 700;
  color: var(--text); outline: none; padding: 6px 0;
}
.ppt-section-title::placeholder { color: var(--text-muted); }
.ppt-section-ops { flex: none; display: flex; align-items: center; gap: 6px; }
.ppt-sec-op {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-secondary); cursor: pointer; display: grid; place-items: center;
  font-size: 14px; line-height: 1; transition: all var(--duration) var(--ease);
}
.ppt-sec-op:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.ppt-sec-op.danger:hover:not(:disabled) { border-color: #dc2626; color: #dc2626; }
.ppt-sec-op:disabled { opacity: .35; cursor: not-allowed; }
.ppt-section-body { padding: 16px 18px 18px; }
.ppt-bullet-label { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--text-secondary); }
.ppt-bullet-label span { font-weight: 400; color: var(--text-muted); font-size: 12px; }

/* 要点：每条一个独立输入行 */
.ppt-bullet-list { display: flex; flex-direction: column; gap: 8px; }
.ppt-bullet-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-md);
  background: var(--bg-base); border: 1px solid var(--border);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ppt-bullet-row:hover { border-color: var(--primary-light); }
.ppt-bullet-row:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.ppt-bullet-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #6d5ef7);
}
.ppt-bullet-input {
  flex: 1; border: none; background: transparent; font-size: 14px; color: var(--text);
  outline: none; line-height: 1.5; min-width: 0;
}
.ppt-bullet-input::placeholder { color: var(--text-muted); }
.ppt-bullet-del {
  flex: none; width: 24px; height: 24px; border-radius: 6px; border: none;
  background: transparent; color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--duration) var(--ease);
}
.ppt-bullet-del svg { width: 14px; height: 14px; display: block; color: inherit; }
.ppt-bullet-item:hover .ppt-bullet-del { color: #dc2626; background: #fde8e8; }
.ppt-bullet-del:hover { background: #fde8e8; color: #dc2626; }
.ppt-bullet-add {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px; padding: 6px 14px; border: 1px dashed var(--border); border-radius: var(--r-md);
  background: transparent; color: var(--primary); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--duration) var(--ease);
}
.ppt-bullet-add:hover { border-color: var(--primary); background: var(--primary-dim); }

/* 新的 bullets 结构：每条要点包含标题和多个内容项 */
.ppt-bullet-item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: var(--r-md);
  background: var(--bg-base); border: 1px solid var(--border);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ppt-bullet-item:hover { border-color: var(--primary-light); }
.ppt-bullet-item:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }

.ppt-bullet-header {
  display: flex; align-items: center; gap: 10px;
}
.ppt-bullet-title {
  flex: 1; border: none; background: transparent; font-size: 14px; font-weight: 600; color: var(--text);
  outline: none; line-height: 1.5; min-width: 0;
}
.ppt-bullet-title::placeholder { color: var(--text-muted); font-weight: 400; }

.ppt-bullet-contents {
  display: flex; flex-direction: column; gap: 6px;
  margin-left: 17px; padding-left: 12px;
  border-left: 2px solid var(--border);
}
.ppt-bullet-content-row {
  display: flex; align-items: center; gap: 8px;
}
.ppt-bullet-content-dot {
  flex: none; color: var(--primary); font-size: 16px; line-height: 1;
}
.ppt-bullet-content-input {
  flex: 1; border: none; background: transparent; font-size: 13px; color: var(--text-secondary);
  outline: none; line-height: 1.5; min-width: 0;
}
.ppt-bullet-content-input::placeholder { color: var(--text-muted); }
.ppt-bullet-sub-title-field {
  flex: 0 1 auto; min-width: 96px; max-width: 40%;
  display: flex; align-items: center; gap: 4px;
}
.ppt-bullet-sub-title {
  width: 100%; border: none; border-bottom: 1px dashed var(--border); background: transparent;
  font-size: 13px; font-weight: 600; color: var(--text); outline: none; line-height: 1.5; min-width: 0;
}
.ppt-bullet-sub-title::placeholder { color: var(--text-muted); font-weight: 400; }
.ppt-bullet-sub-title:focus { border-bottom-color: var(--primary); }
.ppt-bullet-content-del {
  flex: none; width: 20px; height: 20px; border-radius: 4px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; display: grid; place-items: center;
  transition: all var(--duration) var(--ease); opacity: 0;
}
.ppt-bullet-content-del svg { width: 12px; height: 12px; }
.ppt-bullet-content-row:hover .ppt-bullet-content-del { opacity: 1; }
.ppt-bullet-content-del:hover { background: #fde8e8; color: #dc2626; }

.ppt-bullet-content-add {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; padding: 4px 10px; border: 1px dashed var(--border); border-radius: var(--r-sm);
  background: transparent; color: var(--primary); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all var(--duration) var(--ease);
  align-self: flex-start;
}
.ppt-bullet-content-add:hover { border-color: var(--primary); background: var(--primary-dim); }

/* 模板推荐样式 */
.ppt-recommend-tip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 12px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fbbf24; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600; color: #92400e;
}
.ppt-recommend-icon { font-size: 16px; }

.ppt-tpl-card.recommended {
  position: relative;
  border: 2px solid #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2);
}
.ppt-recommend-badge {
  position: absolute; top: -8px; right: -8px;
  padding: 2px 8px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff; font-size: 11px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(251, 191, 36, 0.4);
  z-index: 1;
}

.ppt-add-section {
  width: 100%; padding: 14px; border: 1.5px dashed var(--border); border-radius: var(--r-lg);
  background: transparent; color: var(--primary); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.ppt-add-section:hover { border-color: var(--primary); background: var(--primary-dim); }
.ppt-add-row { display: flex; gap: 10px; align-items: stretch; }
.ppt-add-row .ppt-add-section { width: auto; flex: 1; }
.ppt-expand-btn {
  flex: none; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-card); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.ppt-expand-btn:hover { border-color: var(--primary); color: var(--primary); }

.ppt-edit-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
}
.ppt-edit-summary { color: var(--text-muted); font-size: 12px; }
.ppt-edit-actions { display: flex; gap: 10px; }
.ppt-actions-spacer { flex: 1; }

/* 逐页内容编辑器 */
.ppt-edit-subtitle {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 800; color: var(--text);
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}
.ppt-edit-subtitle::before {
  content: ''; width: 4px; height: 16px; border-radius: 2px;
  background: linear-gradient(135deg, var(--primary), #6d5ef7);
}
.ppt-edit-subtitle-tip { color: var(--text-muted); font-size: 12px; margin: 6px 0 14px; }
.ppt-pages-list { display: flex; flex-direction: column; gap: 12px; }

/* 章节卡片内嵌套内容页：树形层级结构 */
.ppt-section-count { flex: none; font-size: 11px; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-full); padding: 2px 10px; }
.ppt-section-title-static { flex: 1; font-size: 15px; font-weight: 700; color: var(--text); }
.ppt-section-orphan { border-style: dashed; }
.ppt-section-orphan .ppt-section-badge.orphan { background: var(--border); color: var(--text-secondary); }
.ppt-orphan-tip { margin: 0 0 12px; font-size: 12px; color: var(--text-muted); }

/* 树形连接线：内容页缩进在章节下，左侧垂直引导线 + 每页分支刻度 */
.ppt-chapter-pages {
  display: flex; flex-direction: column; gap: 10px;
  margin: 4px 0 2px 34px; padding-left: 26px;
}
.ppt-page-block-label.chapter {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border);
  font-size: 13px;
}
.ppt-page-editor {
  position: relative; overflow: visible;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-card);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: box-shadow var(--duration) var(--ease);
}
.ppt-page-editor:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.ppt-page-head {
  position: relative;
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--bg-base);
  border-radius: 18px 18px 0 0;
}
/* 垂直引导线：仅非末页绘制，向下延伸衔接下一页，末页无悬挂尾巴 */
.ppt-page-editor:not(:last-child)::before {
  content: ''; position: absolute; left: -26px; top: 0; bottom: -10px;
  width: 2px; background: linear-gradient(180deg, var(--primary-light), var(--border));
}
/* 分支刻度：从引导线连接到页面 */
.ppt-page-head::before {
  content: ''; position: absolute; left: -26px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 2px; background: var(--border);
}
/* 分支节点圆点：落在引导线与刻度的交点上 */
.ppt-page-head::after {
  content: ''; position: absolute; left: -30.5px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--primary-light);
}
.ppt-page-badge {
  flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--primary), #6d5ef7);
}
.ppt-page-type {
  flex: none; padding: 2px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 700;
  background: var(--primary-dim); color: var(--primary);
}
.ppt-page-title {
  flex: 1; border: none; background: transparent; font-size: 14px; font-weight: 700;
  color: var(--text); outline: none; padding: 4px 0; min-width: 0;
}
.ppt-page-title::placeholder { color: var(--text-muted); font-weight: 400; }
.ppt-page-body { padding: 12px 16px 14px; }
.ppt-page-block-label { font-size: 12px; font-weight: 700; margin-bottom: 8px; color: var(--text-secondary); }
.ppt-page-block-label span { font-weight: 400; color: var(--text-muted); }

.ppt-pair-row, .ppt-triple-row, .ppt-timeline-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.ppt-pair-row input, .ppt-triple-row input, .ppt-timeline-row input {
  border: 1px solid var(--border); background: var(--bg-base); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 13px; color: var(--text); outline: none; min-width: 0;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ppt-pair-row input:focus, .ppt-triple-row input:focus, .ppt-timeline-row input:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim);
}
.ppt-pair-k { flex: 1; font-weight: 600; }
.ppt-pair-v { flex: 2; }
.ppt-stat-v { flex: 1; }
.ppt-stat-l { flex: 2; }
.ppt-stat-u { flex: 1; }
.ppt-tl-time { flex: 1; }
.ppt-tl-title { flex: 1.4; font-weight: 600; }
.ppt-tl-desc { flex: 2; }
.ppt-pair-del {
  flex: none; width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; display: grid; place-items: center;
  transition: all var(--duration) var(--ease); opacity: 0;
}
.ppt-pair-del svg { width: 14px; height: 14px; }
.ppt-pair-row:hover .ppt-pair-del, .ppt-triple-row:hover .ppt-pair-del, .ppt-timeline-row:hover .ppt-pair-del { opacity: 1; }
.ppt-pair-del:hover { background: #fde8e8; color: #dc2626; }
.ppt-pair-add {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 2px; padding: 6px 12px; border: 1px dashed var(--border); border-radius: var(--r-md);
  background: transparent; color: var(--primary); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all var(--duration) var(--ease);
}
.ppt-pair-add:hover { border-color: var(--primary); background: var(--primary-dim); }

.ppt-templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 22px; }
.ppt-template-card {
  padding: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  cursor: pointer; text-align: left; transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.ppt-template-card:hover { transform: translateY(-3px); border-color: var(--primary-light); box-shadow: var(--shadow-lg); }
.ppt-template-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.ppt-template-cover {
  height: 130px; border-radius: var(--r-md); margin-bottom: 10px; position: relative;
  overflow: hidden; background: #f0f0f0;
}
.ppt-template-preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-md);
}
.ppt-template-ratio {
  position: absolute; right: 8px; top: 8px; padding: 2px 8px; border-radius: 4px;
  background: rgba(0,0,0,0.45); color: #fff; font-size: 11px; backdrop-filter: blur(4px);
}
.ppt-template-name { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.ppt-template-desc { color: var(--text-muted); font-size: 12px; line-height: 1.4; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ppt-template-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ppt-tag {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  background: var(--bg-base); color: var(--text-muted); font-size: 11px;
}

.ppt-tpl-picker { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; }
.ppt-tpl-picker::-webkit-scrollbar { height: 6px; }
.ppt-tpl-picker::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-full); }
.ppt-tpl-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; }
.ppt-tpl-card {
  flex: 0 0 150px; display: flex; flex-direction: column; gap: 6px; padding: 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  cursor: pointer; text-align: left; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ppt-tpl-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); }
.ppt-tpl-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.ppt-tpl-preview {
  position: relative; height: 84px; border-radius: var(--r-sm); overflow: hidden; background: #f0f0f0;
  display: flex; align-items: center; justify-content: center;
}
.ppt-tpl-preview img { width: 100%; height: 100%; object-fit: contain; }
.ppt-tpl-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppt-tpl-info { color: var(--text-muted); font-size: 11px; }
.ppt-tpl-preview-btn {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: #fff; border-radius: 6px;
  font-size: 13px; cursor: pointer; z-index: 1; border: none; line-height: 1;
}
.ppt-tpl-card:hover .ppt-tpl-preview-btn { display: inline-flex; }

/* 容量徽标：消费后端 roleCapacities，让用户在选模板时就看到"每页能放几条" */
.ppt-tpl-cap {
  font-size: 10px; font-weight: 600; color: var(--primary);
  background: var(--primary-dim); border-radius: var(--r-full);
  padding: 1px 6px; align-self: flex-start;
}
/* 装不下当前大纲：标红但不禁用——用户仍可选，只是提交前会被拦 */
.ppt-tpl-cap-over { color: var(--danger); background: var(--danger-dim); }
.ppt-tpl-card-over { border-color: var(--danger); border-style: dashed; }
.ppt-tpl-card-over:hover { border-color: var(--danger); }
.ppt-tpl-card-over.selected { box-shadow: 0 0 0 3px var(--danger-dim); }

/* 容量不足 / 失败态的补充说明行 */
.ppt-failed-hint {
  margin-top: 6px; font-size: 12px; color: var(--text-muted);
  background: var(--primary-dim); border-radius: var(--r-sm);
  padding: 8px 10px; text-align: left; line-height: 1.6;
}

/* 模板预览 Modal */
.tpl-preview-modal {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s;
}
.tpl-preview-dialog {
  position: relative; background: var(--bg-card); border-radius: 16px;
  width: 90vw; max-width: 800px; max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden;
}
.tpl-preview-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4); color: #fff; border: none; border-radius: 8px;
  font-size: 20px; cursor: pointer; line-height: 1;
}
.tpl-preview-close:hover { background: rgba(0,0,0,0.6); }
.tpl-preview-main {
  position: relative; display: flex; align-items: center;
  min-height: 320px; background: #111; overflow: hidden;
}
.tpl-preview-slide-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px; min-height: 320px;
}
.tpl-preview-slide {
  display: none; max-width: 100%; max-height: 56vh; object-fit: contain; border-radius: 6px;
}
.tpl-preview-slide.active { display: block; }
.tpl-preview-empty { color: #888; font-size: 14px; }
.tpl-preview-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.9); border: none; border-radius: 50%;
  font-size: 22px; color: #333; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.tpl-preview-arrow:hover { background: #fff; }
.tpl-preview-prev { left: 12px; }
.tpl-preview-next { right: 12px; }
.tpl-preview-footer { padding: 16px 20px; border-top: 1px solid var(--border); }
.tpl-preview-info { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.tpl-preview-name { font-size: 16px; font-weight: 700; }
.tpl-preview-meta { font-size: 13px; color: var(--text-muted); }
.tpl-preview-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.tpl-preview-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border);
  cursor: pointer; transition: background 0.2s;
}
.tpl-preview-dot.active { background: var(--primary); }
.tpl-preview-nav-btns { display: flex; gap: 10px; justify-content: center; }
.tpl-preview-nav-btn {
  padding: 6px 16px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); font-size: 13px; cursor: pointer; color: var(--text);
}
.tpl-preview-nav-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.tpl-preview-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ppt-generating { text-align: center; padding: 56px 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); }
.ppt-generating h3 { margin: 16px 0 6px; font-size: 18px; }
.ppt-generating p { color: var(--text-muted); margin: 0 0 20px; }
.ppt-generating-spinner {
  width: 46px; height: 46px; margin: 0 auto; border-radius: 50%;
  border: 4px solid var(--primary-dim); border-top-color: var(--primary);
  animation: ppt-spin 0.9s linear infinite;
}
@keyframes ppt-spin { to { transform: rotate(360deg); } }
.ppt-progress { height: 8px; max-width: 420px; margin: 0 auto 14px; border-radius: var(--r-full); background: var(--bg-base); overflow: hidden; }
.ppt-progress-bar { height: 100%; border-radius: var(--r-full); background: var(--primary); transition: width 0.4s var(--ease); }

.ppt-failed { text-align: center; padding: 56px 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); }
.ppt-failed-icon { font-size: 40px; }
.ppt-failed h3 { margin: 12px 0 6px; font-size: 18px; }
.ppt-failed p { color: var(--text-muted); margin: 0 0 20px; }
.ppt-failed .form-actions { justify-content: center; }

.ppt-result-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.ppt-result-head h2 { margin: 0 0 4px; font-size: 20px; }
.ppt-result-head p { margin: 0; color: var(--text-muted); font-size: 13px; }
.ppt-result-actions { display: flex; gap: 10px; }

.ppt-preview-stage {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px;
}
.ppt-slide-wrap {
  position: relative; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 6px 6px 24px; box-shadow: var(--shadow-sm);
}
.ppt-slide-canvas {
  /* 4:3 宽高比，宽度跟随网格列宽自适应 */
  width: 100%; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden;
  background: #fff;
}
.ppt-slide-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
}
.ppt-slide-img-wrap.ppt-slide-img-error {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 13px; background: var(--bg-muted);
}
.ppt-slide-no {
  position: absolute; left: 0; right: 0; bottom: 4px; text-align: center;
  color: var(--text-muted); font-size: 12px;
}
.ppt-s { position: relative; width: 100%; height: 100%; }
.ppt-t {
  position: absolute; display: flex; flex-direction: column; justify-content: flex-start;
  overflow: hidden; line-height: 1.35;
}
.ppt-section-no-deco {
  position: absolute; right: 6%; bottom: 8%; font-size: 200px; font-weight: 800;
  color: rgba(255,255,255,0.14); line-height: 1; font-family: Arial, sans-serif;
}
.ppt-blk { position: absolute; overflow: hidden; }
.ppt-blk-text {
  display: flex; flex-direction: column; box-sizing: border-box;
  line-height: 1.35; padding: 2px 4px;
}

@media (max-width: 1024px) {
  .ppt-layout { grid-template-columns: 1fr; }
  .ppt-preview-stage { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
}
@media (max-width: 768px) {
  .ppt-page { padding: 24px 16px; }
  .ppt-preview-stage { grid-template-columns: 1fr; }
}

/* ===== 大纲页体验升级（对标大厂）：步骤条 / 双栏布局 / 章节卡片 / 实时预览 ===== */

/* --- 步骤条：连接线 + 状态圆点 --- */
.ppt-steps {
  display: flex; align-items: center; gap: 0; margin-bottom: 22px;
  padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.ppt-step {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border: none; background: transparent; border-radius: var(--r-md);
  color: var(--text-secondary); font-size: 13px; font-weight: 600;
  transition: background var(--duration) var(--ease);
}
.ppt-step:hover { background: var(--bg-hover); }
.ppt-step.active { background: var(--primary-dim); }
.ppt-step-dot {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
  color: var(--text-muted); background: var(--bg-base); border: 2px solid var(--border);
  transition: all .25s var(--ease);
}
.ppt-step.active .ppt-step-dot {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--primary), #6d5ef7);
  box-shadow: 0 0 0 4px var(--primary-dim), 0 4px 12px rgba(47, 91, 191, .35);
}
.ppt-step.done .ppt-step-dot {
  border-color: transparent; color: #fff; background: var(--success);
  box-shadow: 0 0 0 3px var(--success-dim, #e7f6ec);
}
.ppt-step-check { display: none; }
.ppt-step.done .ppt-step-num { display: none; }
.ppt-step.done .ppt-step-check { display: grid; }
.ppt-step-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.ppt-step.active .ppt-step-label { color: var(--primary); }
.ppt-step.done .ppt-step-label { color: var(--success); }
.ppt-step-line {
  flex: 1; height: 2px; min-width: 20px; margin: 0 2px; border-radius: 2px;
  background: var(--border); transition: background .3s var(--ease);
}
.ppt-step-line.done { background: var(--success); }

/* --- 编辑区：主列 + 侧边实时预览 --- */
.ppt-edit-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start;
}
.ppt-edit-main { min-width: 0; }
.ppt-edit-aside { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }

.ppt-aside-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; box-shadow: var(--shadow-sm);
}
.ppt-aside-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 800; color: var(--text-secondary); margin-bottom: 14px;
}
.ppt-aside-head svg { color: var(--primary); }

.ppt-pv-title {
  font-size: 17px; font-weight: 800; padding: 10px 12px; margin-bottom: 10px;
  border-radius: var(--r-md); color: #fff; word-break: break-all;
  background: linear-gradient(135deg, var(--primary), #6d5ef7);
}
.ppt-pv-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow: auto; padding-right: 2px; }
.ppt-pv-sec { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; background: var(--bg-base); }
.ppt-pv-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ppt-pv-num {
  flex: none; font-size: 10px; font-weight: 800; color: var(--primary);
  background: var(--primary-dim); border-radius: 6px; padding: 1px 5px;
}
.ppt-pv-sec-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppt-pv-count { flex: none; font-size: 11px; color: var(--text-muted); }
.ppt-pv-bullets { margin: 0; padding-left: 16px; }
.ppt-pv-bullets li { font-size: 12px; color: var(--text-secondary); line-height: 1.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppt-pv-empty { color: var(--text-muted); opacity: .7; }

.ppt-stat-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ppt-stat-ring {
  flex: none; width: 66px; height: 66px; border-radius: 50%;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--bg-base) 0);
  display: grid; place-items: center;
}
.ppt-stat-ring span {
  width: 52px; height: 52px; border-radius: 50%; background: var(--bg-card);
  display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--primary);
}
.ppt-stat-detail { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ppt-stat-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.ppt-stat-row b { color: var(--text); font-size: 13px; }
.ppt-stat-tip {
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
  background: var(--bg-base); border: 1px dashed var(--border); border-radius: var(--r-sm); padding: 8px 10px;
}

/* --- 章节卡片：拖动手柄 / 折叠动画 / 入场动效 --- */
.ppt-section-editor {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-card);
  overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
  animation: pptFadeUp .4s var(--ease) both;
}
.ppt-section-editor:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .09); border-color: var(--border-hover); }
.ppt-section-editor.dragging { opacity: .45; }
.ppt-section-editor.drag-above { border-top: 3px solid var(--primary); }
.ppt-section-editor.drag-below { border-bottom: 3px solid var(--primary); }
@keyframes pptFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ppt-section-head { padding: 12px 14px; }
.ppt-sec-drag {
  flex: none; width: 14px; height: 22px; cursor: grab; color: var(--text-muted); opacity: .45;
  background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.6px);
  background-size: 5px 5px; background-position: 0 2px;
  transition: opacity var(--duration) var(--ease);
}
.ppt-sec-drag:hover { opacity: .95; color: var(--primary); }
.ppt-sec-drag[draggable="false"] { cursor: default; }

.ppt-section-title-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ppt-section-count {
  flex: none; font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-full); padding: 2px 9px;
}

.ppt-section-body { display: grid; grid-template-rows: 1fr; padding: 0; transition: grid-template-rows .28s var(--ease); }
.ppt-section-body-inner { overflow: hidden; min-height: 0; }
.ppt-section-body-pad { padding: 14px 16px 16px; }
.ppt-section-editor.collapsed .ppt-section-body { grid-template-rows: 0fr; display: grid; }

/* --- 要点卡片：左侧强调色 + 拖动排序 --- */
.ppt-bullet-item {
  position: relative; border-left: 3px solid var(--primary-light);
  animation: pptFadeUp .35s var(--ease) both;
}
.ppt-bullet-item.dragging { opacity: .45; }
.ppt-bullet-item.drag-above { box-shadow: 0 -3px 0 0 var(--primary); }
.ppt-bullet-item.drag-below { box-shadow: 0 3px 0 0 var(--primary); }
.ppt-bullet-drag {
  flex: none; width: 12px; height: 20px; cursor: grab; color: var(--text-muted); opacity: .45;
  background-image: radial-gradient(circle, currentColor 1.3px, transparent 1.5px);
  background-size: 4px 4px; background-position: 0 2px;
  transition: opacity var(--duration) var(--ease);
}
.ppt-bullet-drag:hover { opacity: .95; color: var(--primary); }
.ppt-bullet-drag[draggable="false"] { cursor: default; }

.ppt-bullet-title-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ppt-bullet-content-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }

/* --- 字数统计 --- */
.ppt-char-count {
  flex: none; font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-full);
  padding: 1px 7px; line-height: 16px; white-space: nowrap;
  transition: all var(--duration) var(--ease);
}
.ppt-char-count.warn { color: #d97706; background: #fef3c7; border-color: #fcd34d; }
.ppt-title-editor .ppt-char-count { color: #fff; background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .4); }
.ppt-title-editor .ppt-char-count.warn { background: rgba(255, 255, 255, .4); }

/* 添加章节按钮增强 */
.ppt-add-row { margin-bottom: 18px; }
.ppt-add-section {
  width: 100%; padding: 14px; border: 1.5px dashed var(--border); border-radius: var(--r-lg);
  background: transparent; color: var(--primary); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.ppt-add-section:hover { border-color: var(--primary); background: var(--primary-dim); box-shadow: 0 2px 10px rgba(47, 91, 191, .12); }

/* 编辑页底部动作 */
.ppt-edit-actions .btn-primary { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 980px) {
  .ppt-edit-layout { grid-template-columns: 1fr; }
  .ppt-edit-aside { position: static; order: -1; flex-direction: row; gap: 14px; }
  .ppt-edit-aside .ppt-aside-card { flex: 1; min-width: 0; }
  .ppt-pv-list { max-height: 200px; }
}
@media (max-width: 640px) {
  .ppt-step-label { display: none; }
  .ppt-step { padding: 6px; }
  .ppt-edit-aside { flex-direction: column; }
  .ppt-add-row { flex-direction: column; }
}

/* ===== 大纲流水线：生成中骨架屏 + 阶段动画 ===== */

.ppt-streaming {
  padding: 30px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
}
.ppt-streaming-head { text-align: center; margin-bottom: 22px; }
.ppt-streaming-spinner {
  width: 36px; height: 36px; margin: 0 auto 14px; border-radius: 50%;
  border: 4px solid var(--primary-dim); border-top-color: var(--primary);
  animation: ppt-spin .8s linear infinite;
}
.ppt-streaming-head h3 { margin: 0 0 6px; font-size: 18px; }
.ppt-streaming-head p { margin: 0; color: var(--text-muted); font-size: 13px; }

.ppt-streaming-pipeline { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.ppt-stream-phase {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  border: 1px solid var(--border); border-radius: var(--r-full); font-size: 13px; font-weight: 600;
  color: var(--text-muted); background: var(--bg-base);
  transition: all .3s var(--ease);
}
.ppt-stream-phase .ppt-phase-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border);
  transition: all .3s var(--ease);
}
.ppt-stream-phase.active { border-color: var(--primary); color: var(--primary); background: var(--primary-dim); }
.ppt-stream-phase.active .ppt-phase-dot { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-dim); }

.ppt-skeleton-list { display: flex; flex-direction: column; gap: 14px; }
.ppt-skeleton-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; background: var(--bg-base); }
.ppt-skeleton-line {
  height: 12px; border-radius: 6px; margin-bottom: 10px;
  background: linear-gradient(90deg, var(--bg-hover) 25%, var(--border) 50%, var(--bg-hover) 75%);
  background-size: 200% 100%; animation: pptShimmer 1.4s infinite linear;
}
.ppt-skeleton-line:last-child { margin-bottom: 0; }
.ppt-skeleton-line.w50 { width: 50%; }
.ppt-skeleton-line.w55 { width: 55%; }
.ppt-skeleton-line.w60 { width: 60%; }
.ppt-skeleton-line.w70 { width: 70%; }
.ppt-skeleton-line.w75 { width: 75%; }
.ppt-skeleton-line.w80 { width: 80%; }
.ppt-skeleton-line.w85 { width: 85%; }
.ppt-skeleton-line.w88 { width: 88%; }
.ppt-skeleton-line.w90 { width: 90%; }
@keyframes pptShimmer { to { background-position: -200% 0; } }

/* 流水线期间的按钮禁用态 */
.ppt-add-section:disabled,
.ppt-expand-btn:disabled,
.ppt-edit-actions .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ==================== 订单记录 ==================== */
.orders-head-tip { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.order-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.order-card {
  background: #fff;
  border: 1px solid #E7EBF2;
  border-radius: 16px;
  padding: 18px 20px 0;
  box-shadow: 0 1px 3px rgba(17,24,39,.04);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.order-card:hover {
  border-color: #C8DDFD;
  box-shadow: 0 10px 24px rgba(47, 91, 191,.08);
}

.a-top { display: flex; align-items: center; gap: 12px; }
.a-icon.plan-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  font-size: 0;
  margin: 0;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(15,23,42,.10);
}
.a-icon svg { width: 20px; height: 20px; }
.a-plans {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.a-name {
  font-size: 15px;
  font-weight: 800;
  color: #1B2330;
  white-space: nowrap;
  flex-shrink: 0;
}
.a-type {
  font-size: 11.5px;
  color: #8A97AD;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a-side { text-align: right; flex-shrink: 0; }
.a-price {
  font-size: 17px;
  font-weight: 800;
  color: #1640a6;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.a-pillrow { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }

.pill {
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 99px;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}
.pill.ok   { background: rgba(34,197,94,.10); color: #15803d; }
.pill.wait { background: rgba(234,179,8,.14); color: #a16207; }
.pill.ref  { background: rgba(239,68,68,.10); color: #dc2626; }
.pill.off  { background: #F1F3F7;              color: #8A97AD; }

.a-quota {
  font-size: 12px;
  color: #69778C;
  line-height: 1.7;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #F1F4F9;
}
.a-quota b { color: #2f5bbf; font-weight: 600; }

.a-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 0;
  border-top: 1px solid #F1F4F9;
}
.a-no {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: #98A2B3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a-copy {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #2f5bbf;
  cursor: pointer;
  transition: opacity .15s var(--ease);
}
.a-copy:hover { opacity: .78; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding: 12px 0;
}
.pagination-btn {
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.pagination-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pagination-btn:disabled { opacity: .4; cursor: not-allowed; }
.pagination-info { font-size: 13px; color: var(--text-muted); }

/* ===== AI 生成内容显式标识（《人工智能生成合成内容标识办法》）===== */
.ai-badge {
  display: inline-block;
  padding: 0 8px;
  margin-left: 6px;
  font-size: 11px;
  line-height: 18px;
  font-weight: normal;
  color: var(--text-muted);
  background: rgba(125, 138, 165, .1);
  border: 1px solid rgba(125, 138, 165, .45);
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

/* AI 生成内容底部提示 */
.ai-content-disclaimer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(125, 138, 165, .05);
  border: 1px solid rgba(125, 138, 165, .2);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--text-muted);
}
.ai-disclaimer-text {
  font-size: 12px;
  color: var(--text-muted);
}

.meeting-ai-disclaimer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 0 4px;
  font-size: 11.5px;
  color: #A6B1C2;
}

/* ============================================================
   精讲AI会议纪要 介绍页（/intro/meeting）
   ============================================================ */

.intro-meeting-page { width: 100%; margin: 0 auto; padding: 0; }

/* ---- Hero（与首页 hero 统一：背景全宽 + 内容限宽 1200px 居中） ---- */
.intro-hero {
  position: relative;
  overflow: hidden;
  padding: 48px 0 130px;
  margin: 0 0 32px;
  width: 100%;
  color: #fff;
  background: linear-gradient(135deg, #2552a8 0%, #7c3aed 45%, #0e7490 100%);
}
.intro-meeting-page > *:not(.intro-hero) { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; }
.intro-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; box-sizing: border-box; }
.intro-hero-glow {
  position: absolute;
  top: -50%;
  right: -8%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 55%);
  pointer-events: none;
}
.intro-hero::after {
  content: '';
  position: absolute;
  left: -60px;
  bottom: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 55%);
  pointer-events: none;
}
.intro-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.intro-hero h1 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 16px;
  line-height: 1.2;
}
.intro-hero h1 svg { width: 40px; height: 40px; flex-shrink: 0; }
.intro-hero-sub {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  margin: 0 0 14px;
}
.intro-hero-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  margin: 0 0 32px;
  max-width: 500px;
  line-height: 1.75;
}
.intro-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.intro-hero-actions .btn-hero-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08);
}
.intro-hero-actions .btn-hero-outline:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.6);
}
/* Hero 右侧视觉区 */
.intro-hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  box-sizing: border-box;
}
.intro-hero-cards {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 300px;
}
.intro-hero-float {
  position: absolute;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  animation: introFloat 4s ease-in-out infinite;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.intro-hero-float:nth-child(1) { top: 0; left: 18%; animation-delay: 0s; }
.intro-hero-float:nth-child(2) { top: 96px; right: 0; animation-delay: 0.6s; }
.intro-hero-float:nth-child(3) { bottom: 136px; left: 0; animation-delay: 1.2s; }
.intro-hero-float:nth-child(4) { bottom: 40px; right: 18%; animation-delay: 1.8s; }
.intro-hero-float-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.intro-hero-float-icon svg { width: 18px; height: 18px; }
.intro-hero-float-text { display: flex; flex-direction: column; gap: 2px; }
.intro-hero-float-text small { font-size: 11px; font-weight: 400; opacity: 0.75; }
@keyframes introFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---- 会议页 Hero 专属布局（作用域限定 .intro-hero-meeting，不影响其他介绍页） ---- */
.intro-hero-meeting .intro-hero-desc { margin-bottom: 22px; }
.intro-hero-meeting .intro-hero-chips { margin: 0 0 24px; padding-top: 0; }
.intro-hero-meeting .intro-hero-points { margin-top: 20px; }

/* 右侧能力磁贴：规整 2×2 网格（取代原 4 个绝对定位漂浮卡，避免位置写死错位） */
.intro-hero-meeting .intro-hero-visual { padding: 0; }
.intro-hero-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 470px;
}
.intro-hero-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.intro-hero-tile:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.34);
}
.intro-hero-tile-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-hero-tile-icon svg { width: 20px; height: 20px; }
.intro-hero-tile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.intro-hero-tile-text b { font-size: 13.5px; font-weight: 700; color: #fff; }
.intro-hero-tile-text small { font-size: 11.5px; font-weight: 400; color: rgba(255, 255, 255, 0.72); line-height: 1.5; }

@media (max-width: 1024px) {
  .intro-hero-meeting .intro-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .intro-hero-tiles { max-width: 560px; margin: 0 auto; }
}

/* ---- 核心数据 ---- */
.intro-stats {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: -105px;
  margin-bottom: 40px;
  padding: 30px 28px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-top: none;
  border-left: none;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(2, 12, 42, 0.16);
}
.intro-stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 10px;
}
.intro-stat-item + .intro-stat-item { border-left: 1px solid rgba(102, 102, 102, 0.2); }
.intro-stat-ico {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
}
.intro-stat-ico svg { width: 24px; height: 24px; }
.intro-stat-ico-a { background: linear-gradient(135deg, #2f5bbf, #5b8def); box-shadow: 0 8px 16px -6px rgba(47, 91, 191,.5); }
.intro-stat-ico-b { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 8px 16px -6px rgba(245,158,11,.45); }
.intro-stat-ico-c { background: linear-gradient(135deg, #10b981, #06b6d4); box-shadow: 0 8px 16px -6px rgba(16,185,129,.45); }
.intro-stat-ico-d { background: linear-gradient(135deg, #8b5cf6, #2f5bbf); box-shadow: 0 8px 16px -6px rgba(139,92,246,.45); }
.intro-stat-body { display: flex; flex-direction: column; }
.intro-stat-num {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
}
.intro-stat-unit { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin-left: 3px; }
.intro-stat-label { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }

/* ---- 通用 section ---- */
.intro-section { margin-bottom: 36px; }
.intro-section-title {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 28px;
  position: relative;
}
.intro-section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
background: linear-gradient(90deg, #2f5bbf, #5b8def);
  border-radius: 2px;
  margin: 12px auto 0;
}

/* ---- 三步流程 ---- */
.intro-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
.intro-step {
  flex: 1;
  max-width: 280px;
  text-align: center;
  padding: 24px 20px;
}
.intro-step-num {
  width: 28px;
  height: 28px;
  margin: 0 auto 14px;
  line-height: 28px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2f5bbf, #5b8def);
  border-radius: 50%;
}
.intro-step-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #e8f0fe;
  color: #2f5bbf;
}
.intro-step-icon svg { width: 28px; height: 28px; }
.intro-step-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.intro-step-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
}
.intro-step-arrow {
  display: flex;
  align-items: center;
  padding-top: 60px;
  color: var(--text-muted);
  opacity: 0.4;
}
.intro-step-arrow svg { width: 24px; height: 24px; }

/* ---- 核心功能 ---- */
.intro-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.intro-feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-elevated);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.intro-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.intro-feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 16px;
  color: #fff;
}
.intro-feature-icon svg { width: 24px; height: 24px; }
.intro-feature-icon-mic { background: linear-gradient(135deg, #2f5bbf, #5b8def); box-shadow: 0 8px 16px -4px rgba(47, 91, 191,0.45); }
.intro-feature-icon-graphic { background: linear-gradient(135deg, #5b8def, #93b4f5); box-shadow: 0 8px 16px -4px rgba(47, 91, 191,0.4); }
.intro-feature-icon-text { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 8px 16px -4px rgba(245,158,11,0.4); }
.intro-feature-icon-export { background: linear-gradient(135deg, #10b981, #06b6d4); box-shadow: 0 8px 16px -4px rgba(16,185,129,0.4); }
.intro-feature-icon-control { background: linear-gradient(135deg, #f97316, #fbbf24); box-shadow: 0 8px 16px -4px rgba(249,115,22,0.4); }
.intro-feature-icon-import { background: linear-gradient(135deg, #ec4899, #f43f5e); box-shadow: 0 8px 16px -4px rgba(236,72,153,0.4); }
.intro-feature-icon-edit { background: linear-gradient(135deg, #8b5cf6, #a855f7); box-shadow: 0 8px 16px -4px rgba(139,92,246,0.4); }
.intro-feature-icon-mindmap { background: linear-gradient(135deg, #7c3aed, #2f5bbf); box-shadow: 0 8px 16px -4px rgba(124,58,237,0.4); }
.intro-feature-icon-history { background: linear-gradient(135deg, #2f5bbf, #2f5bbf); box-shadow: 0 8px 16px -4px rgba(47, 91, 191,0.4); }
.intro-feature-icon-replay { background: linear-gradient(135deg, #10b981, #22c55e); box-shadow: 0 8px 16px -4px rgba(16,185,129,0.35); }
.intro-feature-icon-storage { background: linear-gradient(135deg, #06b6d4, #0ea5e9); box-shadow: 0 8px 16px -4px rgba(6,182,212,0.4); }
.intro-section-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin: -6px 0 22px;
}
.intro-kv { padding-bottom: 8px; }
.intro-kv-group { margin-bottom: 40px; }
.intro-kv-group:last-child { margin-bottom: 0; }
.intro-kv-group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.intro-kv-num {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #2f5bbf;
  background: rgba(47, 91, 191, 0.08);
  border: 1px solid rgba(47, 91, 191, 0.25);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.intro-kv-title { font-size: 19px; font-weight: 800; color: var(--text); }
.intro-kv-slogan { font-size: 13px; color: var(--text-secondary); margin-left: auto; white-space: nowrap; }
.intro-features--kv { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.intro-features--kv .intro-feature-card { padding: 24px; }
.intro-features--kv .intro-feature-icon { margin-bottom: 14px; }
.intro-feature-desc p { font-size: 13px; line-height: 1.8; color: var(--text-secondary); margin: 0; }
.intro-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
}
.intro-hero-points span { display: inline-flex; align-items: center; gap: 6px; }
.intro-hero-points svg { width: 14px; height: 14px; color: #93b4f5; }
.intro-feature-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.intro-feature-desc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.intro-feature-desc li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.8;
}
.intro-feature-desc li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f5bbf;
  opacity: 0.6;
}

/* ---- 演示面板 ---- */
.intro-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.intro-demo-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
}
.intro-demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
}
.intro-demo-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.intro-demo-tag svg { width: 15px; height: 15px; color: #2f5bbf; }
.intro-demo-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #e11d48;
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.25);
  padding: 2px 9px;
  border-radius: var(--r-full);
}
.intro-demo-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e11d48;
  animation: introPulse 1.2s ease-in-out infinite;
}
@keyframes introPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
.intro-demo-live--done { color: #059669; background: rgba(5, 150, 105, 0.08); border-color: rgba(5, 150, 105, 0.25); }
.intro-demo-live--done .intro-demo-live-dot { background: #059669; }
.intro-demo-badge {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2px 10px;
  border-radius: var(--r-full);
}
.intro-demo-ai-badge {
  font-size: 11px;
  font-weight: 600;
  color: #2f5bbf;
  background: #e8f0fe;
  padding: 3px 10px;
  border-radius: var(--r-full);
  border: 1px solid rgba(47, 91, 191,0.25);
}
.intro-demo-body {
  padding: 20px;
  min-height: 320px;
  max-height: 400px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text);
}
.intro-demo-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.intro-demo-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--bg-hover);
  color: var(--text-muted);
}
.intro-demo-empty-icon svg { width: 24px; height: 24px; }
.intro-demo-empty-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.intro-demo-empty-desc { font-size: 13px; }
.intro-demo-line {
  position: relative;
  margin: 0 0 12px;
  padding: 10px 16px 10px 18px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px 12px 12px 12px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
  animation: introLineIn 0.3s ease;
}
.intro-demo-line::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #2f5bbf, #5b8def);
  opacity: 0.7;
}
.intro-demo-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  background: #2f5bbf;
  border-radius: 2px;
  animation: introBlink 0.8s steps(2, start) infinite;
}
.intro-demo-line-time {
  display: inline-block;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px dashed var(--border);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #2f5bbf;
}
@keyframes introBlink { 50% { opacity: 0; } }
.intro-demo-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-hover);
  font-size: 12px;
  color: var(--text-secondary);
}
.intro-demo-wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.intro-demo-wave i { width: 3px; border-radius: 2px; background: #2f5bbf; animation: introWave 1s ease-in-out infinite; }
.intro-demo-wave i:nth-child(1) { height: 6px; }
.intro-demo-wave i:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.intro-demo-wave i:nth-child(3) { height: 8px; animation-delay: 0.3s; }
.intro-demo-wave i:nth-child(4) { height: 14px; animation-delay: 0.45s; }
.intro-demo-wave i:nth-child(5) { height: 10px; animation-delay: 0.6s; }
@keyframes introWave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1.1); }
}
.intro-demo-wave--done i { animation: none; background: #9ca3af; }
@keyframes introLineIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.intro-demo-summary-content { animation: introLineIn 0.4s ease; }
.intro-demo-summary-section { margin-bottom: 18px; }
.intro-demo-summary-section:last-child { margin-bottom: 0; }
.intro-demo-summary-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.intro-demo-summary-head svg { width: 16px; height: 16px; color: #2f5bbf; }
.intro-demo-summary-section p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.intro-demo-keywords { display: flex; flex-wrap: wrap; gap: 6px; }
.intro-demo-kw {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: var(--r-full);
  background: #e8f0fe;
  color: #2f5bbf;
  border: 1px solid rgba(47, 91, 191,0.2);
}
.intro-demo-topic {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 14px;
  background: var(--bg-hover);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}
.intro-demo-topic-icon {
  width: 26px;
  height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #2f5bbf, #5b8def);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.intro-demo-todo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-hover);
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 6px;
}
.intro-demo-todo-check {
  flex: none;
  color: var(--success);
}
.intro-demo-todo-check svg { width: 14px; height: 14px; }

/* ---- 适用场景 ---- */
.intro-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.intro-scenario {
  text-align: center;
  padding: 28px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-elevated);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.intro-scenario:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.intro-scenario-icon {
  font-size: 36px;
  margin-bottom: 12px;
}
.intro-scenario-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.intro-scenario-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---- 会员权益 ---- */
.intro-perks {
  max-width: 560px;
  margin: 0 auto;
}
.intro-perk {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 10px;
  box-shadow: var(--shadow-elevated);
}
.intro-perk-check {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(16,185,129,0.1);
  color: var(--success);
}
.intro-perk-check svg { width: 16px; height: 16px; }
.intro-perk-text {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

/* ---- CTA ---- */
.intro-meeting-page .intro-cta {
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  margin: 0;
  width: auto;
  max-width: none;
  text-align: center;
  color: #fff;
  background: radial-gradient(700px 300px at 15% 0%, rgba(140,184,248,.35), transparent 60%), radial-gradient(700px 320px at 85% 100%, rgba(140,184,248,.25), transparent 60%), linear-gradient(135deg, #041b40, #12438f);
  box-shadow: 0 24px 56px -14px rgba(30,99,200,0.35);
}
.intro-cta-glow {
  display: none;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 60%);
  pointer-events: none;
}
.intro-cta-content { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.intro-cta-content h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.intro-cta-content p {
  font-size: .95rem;
  color: rgba(255,255,255,0.75);
  margin: 14px 0 30px;
}
.intro-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.intro-cta-actions .btn-primary {
  background: linear-gradient(90deg, #1e63c8, #8cb8f8);
  border-color: transparent;
  color: #fff;
  height: 48px;
  padding: 0 36px;
  font-size: 15px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(30,99,200,.32);
}
.intro-cta-actions .btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.intro-cta-actions .btn-hero-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.1);
}
.intro-cta-actions .btn-hero-outline:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.65);
}

/* ---- 响应式 ---- */
@media (max-width: 768px) {
  .intro-hero { padding: 72px 20px 96px; }
  .intro-hero-inner { grid-template-columns: 1fr; }
  .intro-hero-content, .intro-hero-visual { padding: 24px; text-align: center; }
  .intro-hero h1 { font-size: 24px; justify-content: center; }
  .intro-hero h1 svg { width: 28px; height: 28px; }
  .intro-hero-sub { font-size: 16px; }
  .intro-hero-desc { margin: 0 auto 28px; }
  .intro-hero-actions { justify-content: center; }
  .intro-hero-visual { display: none; }
  .intro-meeting-page > *:not(.intro-hero) { padding-left: 20px; padding-right: 20px; }
  .intro-stats { grid-template-columns: repeat(2, 1fr); padding: 22px 18px; margin-top: -48px; gap: 16px; }
  .intro-stat-item { padding: 8px 6px; }
  .intro-stat-item + .intro-stat-item { border-left: none; border-top: 1px solid rgba(102, 102, 102, 0.12); }
  .intro-steps { flex-direction: column; align-items: center; }
  .intro-step-arrow { transform: rotate(90deg); padding: 8px 0; }
  .intro-features { grid-template-columns: 1fr; }
  .intro-demo { grid-template-columns: 1fr; }
  .intro-scenarios { grid-template-columns: 1fr; }
  .intro-cta.intro-meeting-page .intro-cta { padding: 56px 0; margin: 0 -24px 0; }
  .intro-compare { flex-direction: column; align-items: center; }
  .intro-compare-vs { transform: rotate(90deg); padding: 8px 0; }
  .intro-tools-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-features-2col { grid-template-columns: 1fr; }
  .intro-features-3col { grid-template-columns: 1fr; }
  .intro-kv-slogan { margin-left: 0; white-space: normal; }
  .intro-features--kv { grid-template-columns: 1fr; }
  .intro-kv-title { font-size: 17px; }
}

/* ---- PPT Hero 变体 ---- */
.intro-hero-ppt {
  background:
    radial-gradient(110% 95% at 12% 0%, rgba(255,255,255,.16), transparent 48%),
    linear-gradient(135deg, #5b4cf0 0%, #2c6ce9 46%, #0b8fba 100%);
}
.intro-hero-ppt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,18,40,0) 38%, rgba(10,18,40,.28) 100%);
  pointer-events: none;
  z-index: 0;
}
.intro-hero-ppt .intro-hero-inner,
.intro-hero-ppt .intro-hero-glow {
  position: relative;
  z-index: 1;
}
.intro-hero-ppt .intro-hero-visual { position: relative; z-index: 1; }

/* ---- Writing Hero 变体 ---- */
.intro-hero-writing {
  background: linear-gradient(135deg, #8b5cf6 0%, #2f5bbf 45%, #ec4899 100%);
}

/* ---- Image Hero 变体 ---- */
.intro-hero-image {
  background: linear-gradient(135deg, #06b6d4 0%, #2f5bbf 45%, #2f5bbf 100%);
}

/* ---- Doc Hero 变体 ---- */
.intro-hero-doc {
  background: linear-gradient(135deg, #10b981 0%, #06b6d4 45%, #2f5bbf 100%);
}

/* ---- 工具矩阵 ---- */
.intro-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.intro-tool-card {
  text-align: center;
  padding: 24px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-elevated);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.intro-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.intro-tool-icon { font-size: 32px; margin-bottom: 10px; }
.intro-tool-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.intro-tool-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-bottom: 10px; }
.intro-tool-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #2f5bbf;
  background: #e8f0fe;
  border: 1px solid rgba(47, 91, 191,0.2);
  padding: 2px 10px;
  border-radius: var(--r-full);
}

/* ---- 双列功能卡片 ---- */
.intro-features-2col {
  grid-template-columns: repeat(2, 1fr);
}
/* 三列功能卡片（图片处理：去水印 / 换底色 / 证件照制作） */
.intro-features-3col {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1180px) {
  .intro-features-3col { grid-template-columns: repeat(2, 1fr); }
}
.intro-feature-highlight {
  padding: 32px;
}
.intro-feature-steps-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.intro-feature-step {
  font-size: 12px;
  font-weight: 600;
  color: #2f5bbf;
  background: #e8f0fe;
  border: 1px solid rgba(47, 91, 191,0.2);
  padding: 4px 12px;
  border-radius: var(--r-full);
}
.intro-feature-step-arrow {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.5;
}

/* ---- 对比卡片 ---- */
.intro-compare {
  display: flex;
  align-items: stretch;
  gap: 20px;
  justify-content: center;
}
.intro-compare-card {
  flex: 1;
  max-width: 400px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-elevated);
}
.intro-compare-before { border-top: 3px solid var(--text-muted); }
.intro-compare-after { border-top: 3px solid #2f5bbf; }
.intro-compare-head {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  text-align: center;
}
.intro-compare-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.intro-compare-card li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 13px;
  line-height: 1.7;
}
.intro-compare-before li { color: var(--text-muted); }
.intro-compare-before li::before {
  content: '✗';
  position: absolute;
  left: 0;
  color: var(--danger);
  font-weight: 700;
}
.intro-compare-after li { color: var(--text-secondary); }
.intro-compare-after li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}
.intro-compare-vs {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-muted);
  opacity: 0.5;
}

/* ============================================================
   AI PPT 页 (intro-ppt.js) 专属优化 — 仅作用域限定 .intro-ppt-page
   ============================================================ */
.intro-ppt-page .intro-stats { gap: 18px; }

.intro-ppt-page .intro-step-num {
  background: linear-gradient(135deg, #2552a8, #2f5bbf);
}
.intro-ppt-page .intro-step-icon {
  background: #EEF0FF;
  color: #2552a8;
  box-shadow: 0 8px 18px -8px rgba(79, 70, 229, .35);
}
.intro-ppt-page .intro-step-icon svg { width: 30px; height: 30px; }

.intro-ppt-page .intro-feature-card:hover {
  border-color: #ccd8fb;
  box-shadow: 0 20px 44px -18px rgba(47, 91, 191, .26);
}
.intro-ppt-page .intro-feature-title::after {
  content: '';
  display: block;
  width: 26px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2552a8, #2f5bbf);
}

.intro-ppt-page .intro-compare-after {
  border: 1px solid #c9d6fb;
  background: linear-gradient(180deg, #ffffff 0%, #e8f0fe 100%);
  box-shadow: 0 16px 36px -16px rgba(47, 91, 191, .28);
}
.intro-ppt-page .intro-compare-after .intro-compare-head { color: #2f5bbf; }
.intro-ppt-page .intro-compare-vs {
  color: #2552a8;
  opacity: 1;
  background: #EEF0FF;
  width: 52px;
  height: 52px;
  align-self: center;
  justify-content: center;
  border-radius: 50%;
}

/* ============================================================
   AI 写作 / 图片处理 / 文档处理 页专属优化 — 作用域限定
   ============================================================ */
/* ---- AI 写作页 · 紫粉主题 ---- */
.intro-writing-page .intro-step-num { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.intro-writing-page .intro-step-icon { background: #f6ecff; color: #8b5cf6; box-shadow: 0 8px 18px -8px rgba(139, 92, 246, .35); }
.intro-writing-page .intro-step-icon svg { width: 30px; height: 30px; }
.intro-writing-page .intro-feature-card:hover { border-color: #ead6fb; box-shadow: 0 20px 44px -18px rgba(139, 92, 246, .26); }
.intro-writing-page .intro-feature-title::after { content: ''; display: block; width: 26px; height: 3px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, #8b5cf6, #ec4899); }

/* ---- 图片处理页 · 青蓝主题 ---- */
.intro-image-page .intro-feature-card:hover { border-color: #c5ecf8; box-shadow: 0 20px 44px -18px rgba(6, 182, 212, .26); }
.intro-image-page .intro-feature-title::after { content: ''; display: block; width: 26px; height: 3px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, #06b6d4, #2f5bbf); }

/* ---- 文档处理页 · 绿青主题 ---- */
.intro-doc-page .intro-feature-card:hover { border-color: #c6ecd7; box-shadow: 0 20px 44px -18px rgba(16, 185, 129, .26); }
.intro-doc-page .intro-feature-title::after { content: ''; display: block; width: 26px; height: 3px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, #10b981, #0ea5e9); }

/* ---- Hero 响应式 ---- */


/* ============================================================
   首页 (index.html) 样式：与单页共用同一 style.css。
   所有规则限定到 .home 作用域下，变量使用 --home-xxx 前缀，
   与单页样式互不污染。
   ============================================================ */

.home {
        --home-navy: #0a1f44;
        --home-navy-deep: #071632;
        --home-blue: #1e5eff;
        --home-blue-strong: #2552a8;
        --home-blue-soft: #eef4ff;
        --home-ink: #10203f;
        --home-ink-secondary: #44506b;
        --home-ink-muted: #7d8aa5;
        --home-line: #e4e9f2;
        --home-bg: #ffffff;
        --home-bg-soft: #f5f8ff;
        --home-green: #0f9d58;
        --home-green-soft: #e8f7ef;
        --home-red: #d93025;
        --home-shadow-sm: 0 1px 3px rgba(10,31,68,.08);
        --home-shadow-md: 0 6px 24px rgba(10,31,68,.1);
    }
    body.home { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body.home {
        font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
        background: var(--home-bg); color: var(--home-ink); line-height: 1.6;
        -webkit-font-smoothing: antialiased;
    }
    .home a { text-decoration: none; color: inherit; }
    .home button { font-family: inherit; cursor: pointer; border: none; background: none; }

    /* ===== Navbar（听脑蓝主题，与单页 top-nav 统一） ===== */
    .home .navbar { background: rgba(255,255,255,0.85); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #e6eef9; }
    .home .navbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
    .home .nav-logo { color: var(--home-ink); font-size: 1.1rem; font-weight: 700; letter-spacing: .01em; display: flex; align-items: center; gap: 10px; }
    .home .nav-logo-mark { width: 36px; height: 36px; background: linear-gradient(135deg, #5b8def 0%, #2f5bbf 52%, #2552a8 100%); border-radius: 10px; display: grid; place-items: center; color: #fff; }
    .home .nav-links { display: flex; align-items: center; gap: 8px; list-style: none; margin-left: 40px; margin-right: auto; }
    .home .nav-links a { color: var(--home-ink-secondary); font-size: .88rem; transition: color .2s; }
    .home .nav-links a:hover { color: #2f5bbf; }
    .home .nav-link { padding: 8px 13px; border-radius: 9px; position: relative; transition: background .2s, color .2s; }
    .home .nav-link::after { display: none; }
    .home .nav-link:hover { color: #2f5bbf; background: #f0f6ff; }
    .home .nav-link.active { color: #2f5bbf; background: #e8f0fe; }
    .home .nav-right { display: flex; align-items: center; gap: 16px; }
    .home .nav-login { color: var(--home-ink-secondary); font-size: .88rem; }
    .home .nav-login:hover { color: #2f5bbf; }
    .home .nav-cta { padding: 9px 20px; background: linear-gradient(135deg, #2f5bbf, #5b8def); color: #fff !important; border-radius: 10px; font-size: .88rem; font-weight: 600; box-shadow: 0 6px 18px rgba(47, 91, 191,0.24); transition: filter .2s, transform .2s; }
    .home .nav-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
    .home .mobile-menu-btn { display: none; color: var(--home-ink); font-size: 1.4rem; }

    /* ===== 共享导航（utils/site-nav.js）：AI 能力下拉 + 企业团队版入口 =====
       由 index.html / enterprise.html / app 内五个 #/intro/* 介绍页共用。
       注意：下拉 li 用 .nav-dd 而非 .nav-dropdown，避免与全局用户菜单 .nav-dropdown 冲突被隐藏 */
    .home .nav-link-ent { color: var(--home-blue); font-weight: 700; }
    .home .nav-link-ent:hover { background: var(--home-blue-soft); }
    .home .nav-tag { font-size: .62rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #2f5bbf, #5b8def); padding: 2px 7px; border-radius: 6px; margin-left: 6px; vertical-align: middle; letter-spacing: .04em; }
    .home .nav-dd { position: relative; }
    .home .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
    .home .nav-caret { font-size: .72rem; line-height: 1; opacity: .6; transition: transform .2s ease; }
    .home .nav-dd:hover .nav-caret,
    .home .nav-dd:focus-within .nav-caret,
    .home .nav-dd.open .nav-caret { transform: rotate(180deg); }
    .home .nav-dd-menu {
      position: absolute; top: calc(100% + 10px); left: 0; min-width: 296px; margin: 0; padding: 10px;
      display: flex; flex-direction: column; gap: 4px; z-index: 200;
      background: #fff; border: 1px solid var(--home-line); border-radius: 16px;
      box-shadow: 0 18px 44px rgba(16,32,63,.18);
      opacity: 0; visibility: hidden; transform: translateY(-8px);
      transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }
    .home .nav-dd-menu::before {
      content: ''; position: absolute; top: -6px; left: 24px; width: 11px; height: 11px;
      background: #fff; border: 1px solid var(--home-line); border-right: none; border-bottom: none;
      transform: rotate(45deg); border-top-left-radius: 3px;
    }
    .home .nav-dd:hover .nav-dd-menu,
    .home .nav-dd:focus-within .nav-dd-menu,
    .home .nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
    .home .nav-dd-menu .nav-dd-item {
      display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
      color: var(--home-ink); white-space: nowrap; text-decoration: none;
      transition: background .16s ease, transform .16s ease;
    }
    .home .nav-dd-menu .nav-dd-ico {
      width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
      background: linear-gradient(135deg, #eef4ff, #e2ecff); font-size: 1.15rem; line-height: 1;
      transition: background .16s ease, transform .16s ease;
    }
    .home .nav-dd-menu .nav-dd-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .home .nav-dd-menu .nav-dd-txt b { font-size: .9rem; font-weight: 600; color: var(--home-ink); line-height: 1.3; }
    .home .nav-dd-menu .nav-dd-txt small { font-size: .74rem; color: var(--home-ink-secondary); line-height: 1.4; }
    .home .nav-dd-menu .nav-dd-core {
      margin-left: auto; flex: none; font-size: .6rem; font-weight: 700; color: #fff;
      background: linear-gradient(135deg, #2f5bbf, #5b8def); padding: 2px 7px; border-radius: 6px; letter-spacing: .05em;
    }
    .home .nav-dd-menu .nav-dd-item:hover { background: #f2f7ff; transform: translateX(2px); }
    .home .nav-dd-menu .nav-dd-item:hover .nav-dd-ico { background: linear-gradient(135deg, #dfeaff, #cfe0ff); transform: scale(1.05); }
    .home .nav-dd-menu .nav-dd-item.active { background: linear-gradient(135deg, #eef4ff, #e8f0fe); }
    .home .nav-dd-menu .nav-dd-item.active .nav-dd-txt b { color: #2f5bbf; }
    @media (max-width: 620px) {
      .home .nav-dd-menu { position: static; box-shadow: none; border: none; background: transparent; min-width: 0; padding: 0; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: none; }
      .home .nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; max-height: 420px; padding: 4px 0 4px 6px; }
      .home .nav-dd-menu .nav-dd-item { padding: 8px 10px; gap: 10px; }
      .home .nav-dd-menu .nav-dd-ico { width: 32px; height: 32px; font-size: 1rem; border-radius: 9px; }
      .home .nav-dd-menu .nav-dd-txt small { font-size: .7rem; }
      .home .nav-dd-menu::before { display: none; }
    }

    /* ===== Hero ===== */
    .home .hero {
        background:
            radial-gradient(60% 90% at 18% 0%, rgba(147,197,255,.16) 0%, transparent 58%),
            radial-gradient(50% 75% at 92% 15%, rgba(47, 91, 191,.22) 0%, transparent 55%),
            radial-gradient(45% 60% at 78% 95%, rgba(47, 91, 191,.12) 0%, transparent 60%),
            linear-gradient(135deg, #07153f 0%, #0a2f7d 45%, #0a4fd6 100%);
        color: #fff; padding: 72px 28px 140px; position: relative; overflow: hidden;
    }
    .home .hero::before { content: ''; position: absolute; left: -10%; bottom: -30%; width: 45%; height: 90%; background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.06) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
    .home .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 0%, rgba(255,255,255,.07) 0%, transparent 70%); pointer-events: none; }
    .home .hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
    .home .hero-title { margin: 0 0 20px; font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.18; }
    .home .hero-title .hl { color: #cfe2ff; }
    .home .hero-sub { margin: 0 0 24px; max-width: 540px; color: rgba(255,255,255,0.9); font-size: 1.04rem; font-weight: 500; line-height: 1.7; }
    .home .hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
    .home .hero-chip { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,0.94); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); padding: 5px 14px; border-radius: 8px; }
    .home .hero-actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
    .home .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; border-radius: 10px; font-size: .95rem; font-weight: 600; transition: all .2s; }
    .home .btn-primary { background: linear-gradient(135deg, #2f5bbf, #5b8def); color: #fff; box-shadow: 0 8px 24px rgba(47, 91, 191,.4); }
    .home .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .home .btn-ghost { border: 1px solid rgba(255,255,255,.3); color: #fff; }
    .home .btn-ghost:hover { background: rgba(255,255,255,.08); }

    /* ===== Hero 波浪过渡（参看 demo） ===== */
    .home .waves { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; height: 90px; overflow: hidden; }
    .home .waves svg { display: block; width: 100%; height: 90px; }
    .home .waves .w1 { fill: #fff; animation: homeWave 22s linear infinite; }
    .home .waves .w2 { fill: #f5f8ff; opacity: .55; margin-top: -28px; animation: homeWave 14s linear infinite reverse; }
    .home .waves .w3 { fill: #eef3fc; opacity: .35; animation: homeWave 9s linear infinite; }
    @keyframes homeWave { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-96px, 0, 0); } }

    /* ===== 实时转写动态示例 ===== */
    .home .demo-wrap { text-align: left; min-width: 0; }
    .home .demo {
        background: #fff; border-radius: 18px; overflow: hidden;
        box-shadow: 0 25px 65px rgba(10,31,68,.18), 0 0 0 1px rgba(200,215,240,.5);
        position: relative;
    }
    .home .demo::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent 10%, rgba(255,255,255,.6) 50%, transparent 90%);
        z-index: 2;
    }

    /* --- header --- */
    .home .demo-header {
        display: flex; align-items: center; gap: 12px;
        padding: 15px 22px;
        background: linear-gradient(135deg, #0746b8 0%, #2f5bbf 50%, #2f5bbf 100%);
        position: relative; overflow: hidden;
    }
    .home .demo-header::before {
        content: ''; position: absolute; inset: 0;
        background: repeating-linear-gradient(120deg, transparent, transparent 40px, rgba(255,255,255,.03) 40px, rgba(255,255,255,.03) 80px);
    }
    .home .demo-header::after {
        content: ''; position: absolute; top: -60%; right: -15%; width: 160px; height: 160px;
        background: radial-gradient(circle, rgba(255,255,255,.15), transparent 65%);
        border-radius: 50%; pointer-events: none;
    }
    .home .demo-dots { display: flex; gap: 8px; position: relative; z-index: 1; }
    .home .demo-dot { width: 12px; height: 12px; border-radius: 50%; opacity: .92; transition: transform .2s; }
    .home .demo-dots:hover .demo-dot { transform: scale(1.15); }
    .home .demo-dot:nth-child(1) { background: #ff6b6b; }
    .home .demo-dot:nth-child(2) { background: #fbbf24; }
    .home .demo-dot:nth-child(3) { background: #34d399; }
    .home .demo-title {
        font-size: .82rem; color: rgba(255,255,255,.95);
        display: flex; align-items: center; gap: 8px; font-weight: 600;
        letter-spacing: .01em; position: relative; z-index: 1;
    }
    .home .rec-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: #ff6b6b; box-shadow: 0 0 8px rgba(255,107,107,.6);
        animation: b2b-pulse 1.4s ease-in-out infinite;
    }
    @keyframes b2b-pulse { 50% { opacity: .25; transform: scale(.8); } }
    .home .demo-live {
        margin-left: auto; font-size: .72rem; color: #4ade80; font-weight: 700;
        display: flex; align-items: center; gap: 5px;
        position: relative; z-index: 1;
    }
    .home .demo-live::before {
        content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
        box-shadow: 0 0 6px rgba(74,222,128,.5);
        animation: live-dot 1.6s ease-in-out infinite;
    }
    @keyframes live-dot { 50% { opacity: .35; } }

    /* --- body --- */
    .home .demo-body {
        padding: 14px 18px; height: 220px; overflow-y: auto;
        background: linear-gradient(180deg, #f2f5fa 0%, #f8fafd 100%);
        display: flex; flex-direction: column; gap: 8px;
    }
    .home .demo-body::-webkit-scrollbar { width: 4px; }
    .home .demo-body::-webkit-scrollbar-track { background: transparent; }
    .home .demo-body::-webkit-scrollbar-thumb { background: #c5cfe0; border-radius: 4px; }
    .home .demo-body::-webkit-scrollbar-thumb:hover { background: #a8b5ca; }

    /* --- transcript line cards --- */
    .home .t-line {
        display: flex; gap: 10px; align-items: flex-start;
        padding: 12px 16px; border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(10,31,68,.04), 0 0 0 1px rgba(230,236,245,.8);
        transition: all .3s ease; line-height: 1.7;
        position: relative;
    }
    .home .t-line::after {
        content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px;
        background: linear-gradient(90deg, transparent, #eef1f6 30%, #eef1f6 70%, transparent);
        opacity: .6;
    }
    .home .t-line:last-child::after { display: none; }
    .home .t-line:hover {
        border-color: transparent; box-shadow: 0 4px 14px rgba(10,31,68,.08), 0 0 0 1px rgba(180,200,230,.6);
        transform: translateY(-1px);
    }

    /* --- timestamp badge --- */
    .home .t-ts {
        flex-shrink: 0; font-size: .66rem; font-weight: 700;
        color: #2f5bbf; font-family: 'JetBrains Mono', monospace;
        background: rgba(47, 91, 191,.08);
        padding: 3px 9px; border-radius: 6px;
        margin-top: 2px; letter-spacing: .04em;
        line-height: 1.3; border: 1px solid rgba(47, 91, 191,.12);
    }

    /* --- text --- */
    .home .t-text {
        font-size: .85rem; color: #2d3a4e; flex: 1; font-weight: 500;
        word-break: break-word;
    }

    /* --- active line --- */
    .home .t-line.active {
        background: linear-gradient(135deg, #eef4ff 0%, #f5f8ff 40%, #fff 100%);
        box-shadow: 0 4px 18px rgba(47, 91, 191,.1), 0 0 0 1px rgba(120,160,255,.4);
        transform: translateX(2px);
    }
    .home .t-line.active .t-text { color: #0c1929; }
    .home .t-line.active .t-ts {
        background: #2f5bbf; color: #fff;
        border-color: #2f5bbf;
        box-shadow: 0 2px 10px rgba(47, 91, 191,.35);
    }

    /* --- footer --- */
    .home .demo-footer {
        display: flex; flex-wrap: wrap; gap: 10px;
        padding: 14px 22px; border-top: 1px solid #eef1f6;
        background: linear-gradient(180deg, #f8fafd, #f4f7fc);
    }
    .home .tag {
        font-size: .72rem; padding: 5px 14px; border-radius: 8px;
        font-weight: 600; display: inline-flex; align-items: center; gap: 5px;
        background: linear-gradient(135deg, rgba(47, 91, 191,.06), rgba(47, 91, 191,.1));
        color: #2f5bbf; border: 1px solid rgba(47, 91, 191,.12);
        transition: all .2s;
    }
    .home .tag:hover { background: rgba(47, 91, 191,.12); border-color: rgba(47, 91, 191,.2); }
    .home .tag.green {
        background: linear-gradient(135deg, rgba(16,185,129,.06), rgba(16,185,129,.1));
        color: #0f9d58; border-color: rgba(16,185,129,.15);
    }
    .home .tag.green:hover { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.25); }
    .home .demo-delay {
        margin-left: auto; font-size: .72rem; color: #94a3b8;
        align-self: center; font-weight: 500;
        display: flex; align-items: center; gap: 4px;
    }
    .home .demo-delay::before {
        content: ''; width: 4px; height: 4px; border-radius: 50%;
        background: #c1cad8;
    }

    /* ===== Metrics band ===== */
    .home .intro-stats { max-width: 1200px; margin: 64px auto 0; padding: 26px 28px; }

    /* ===== Sections ===== */
    .home section { padding: 84px 28px; }
    .home .sec-header { max-width: 700px; margin: 0 auto 52px; text-align: center; }
    .home .sec-eyebrow { font-size: .78rem; font-weight: 700; color: var(--home-blue); letter-spacing: .12em; text-transform: uppercase; }
    .home .sec-title { display: block; text-align: center; margin: 12px 0 14px; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; color: var(--home-ink); }
    .home .sec-desc { font-size: 1rem; color: var(--home-ink-secondary); }
    .home .container { max-width: 1200px; margin: 0 auto; }

    /* ===== AI 能力矩阵 ===== */
    .home .suite-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
    .home .suite-card {
        position: relative; background: #fff; border: 1px solid var(--home-line); border-radius: 14px;
        padding: 26px 22px 20px; display: flex; flex-direction: column; overflow: hidden;
        box-shadow: var(--home-shadow-sm);
        transition: transform .25s, box-shadow .25s, border-color .25s;
    }
    .home .suite-card::before { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #2f5bbf, #5b8def); opacity: 0; transition: opacity .25s; }
    .home .suite-card:hover { transform: translateY(-4px); box-shadow: var(--home-shadow-md); border-color: #cfe2ff; }
    .home .suite-card:hover::before { opacity: 1; }
    .home .suite-icon {
        width: 48px; height: 48px; border-radius: 12px; background: var(--home-blue-soft); color: var(--home-blue);
        display: grid; place-items: center; margin-bottom: 16px;
    }
    .home .suite-card.soon .suite-icon { background: #f1f3f8; color: #9aa5bb; }
    .home .suite-badge { position: absolute; top: 14px; right: 14px; font-size: .66rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
    .home .suite-badge.live { background: var(--home-green-soft); color: var(--home-green); }
    .home .suite-badge.soon { background: #eef1f8; color: #7d8aa5; }
    .home .suite-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
    .home .suite-card > p { font-size: .84rem; color: var(--home-ink-secondary); }
    .home .suite-feats { list-style: none; margin: 14px 0 18px; flex: 1; }
    .home .suite-feats li { font-size: .8rem; color: var(--home-ink-secondary); padding: 3px 0; }
    .home .suite-feats li::before { content: '✓'; color: var(--home-blue); font-weight: 700; margin-right: 8px; }
    .home .suite-card.soon .suite-feats li::before { color: #c6cddb; }
    .home .suite-more { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 10px 0 0; border-top: 1px solid var(--home-line); margin-top: 6px; font-size: .83rem; font-weight: 600; color: var(--home-blue); transition: color .2s, gap .2s; }
    .home .suite-more:hover { color: var(--home-blue-strong); gap: 7px; }
    .home .suite-cta { text-align: center; padding: 10px; border-radius: 6px; font-size: .88rem; font-weight: 600; transition: all .2s; }
    .home .suite-cta.primary { background: var(--home-blue); color: #fff; }
    .home .suite-cta.primary:hover { background: var(--home-blue-strong); }
    .home .suite-cta.disabled { background: #f1f3f8; color: #9aa5bb; cursor: default; }

    /* ===== Steps (numbered list) ===== */
    .home .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
    .home .step-card { position: relative; border: 1px solid var(--home-line); border-radius: 14px; padding: 30px 20px 26px; background: #fff; text-align: center; box-shadow: var(--home-shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s; }
    .home .step-card:hover { transform: translateY(-4px); box-shadow: var(--home-shadow-md); border-color: #cfe2ff; }
    .home .step-card:not(:last-child)::after { content: ''; position: absolute; top: 53px; right: -21px; width: 42px; border-top: 2px dashed #cdd9f5; }
    .home .step-no { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%; background: linear-gradient(135deg, #2f5bbf, #5b8def); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 1.05rem; box-shadow: 0 6px 16px rgba(47, 91, 191,.32); }
    .home .step-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
    .home .step-card p { font-size: .85rem; color: var(--home-ink-secondary); line-height: 1.7; }

    /* ===== 会员方案推荐 ===== */
    .home .home-plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; }
    .home .home-plan-card { position: relative; display: flex; flex-direction: column; padding: 36px 28px 28px; border: 1px solid var(--home-line); border-radius: 16px; background: #fff; box-shadow: var(--home-shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s; }
    .home .home-plan-card:hover { transform: translateY(-5px); box-shadow: var(--home-shadow-md); border-color: #cfe2ff; }
    .home .home-plan-card.hot { border: 1.5px solid rgba(47, 91, 191,.45); background: linear-gradient(180deg, #ffffff, #f3f7ff); box-shadow: 0 14px 40px rgba(47, 91, 191,.14); }
    .home .home-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 5px 16px; border-radius: 999px; background: linear-gradient(135deg, #ff9f43, #ff7a00); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; box-shadow: 0 4px 12px rgba(255,122,0,.35); }
    .home .home-plan-name { font-size: 1.05rem; font-weight: 800; color: var(--home-ink); margin-bottom: 14px; text-align: center; }
    .home .home-plan-price { text-align: center; font-weight: 800; font-size: 2rem; color: var(--home-ink); letter-spacing: -.02em; line-height: 1; }
    .home .home-plan-price .hpp-cur { font-size: 1rem; font-weight: 700; color: var(--home-blue); vertical-align: top; position: relative; top: 4px; margin-right: 2px; }
    .home .home-plan-price .hpp-period { font-size: .82rem; font-weight: 600; color: var(--home-ink-muted); }
    .home .home-plan-card.hot .home-plan-price { color: #2f5bbf; }
    .home .home-plan-card.hot .home-plan-price .hpp-cur { color: #2f5bbf; }
    .home .home-plan-permin { text-align: center; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--home-line); font-size: .78rem; font-weight: 600; color: var(--home-ink-muted); }
    .home .home-plan-permin b { margin-right: 2px; font-weight: 800; color: var(--home-green); }
    .home .home-plan-save { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--home-green-soft); color: var(--home-green); font-size: .68rem; font-weight: 800; vertical-align: 1px; }
    .home .home-plan-card.hot .home-plan-permin b { color: #2f5bbf; }
    .home .home-plan-card.hot .home-plan-save { background: #e8f0fe; color: #2f5bbf; }
    .home .home-plan-dur { text-align: center; font-size: .78rem; color: var(--home-ink-secondary); margin-top: 8px; }
    .home .home-plan-feats { list-style: none; margin: 22px 0 26px; padding: 0; flex: 1; }
    .home .home-plan-feats li { position: relative; text-align: left; padding: 8px 0 8px 26px; font-size: .85rem; color: var(--home-ink-secondary); border-bottom: 1px dashed var(--home-line); }
    .home .home-plan-feats li:last-child { border-bottom: none; }
    .home .home-plan-feats li::before { content: '✓'; position: absolute; left: 6px; top: 7px; color: var(--home-green); font-weight: 800; font-size: .78rem; }
    .home .home-plan-btn { display: block; text-align: center; padding: 12px 20px; border-radius: 10px; font-size: .9rem; font-weight: 700; text-decoration: none; transition: all .2s; border: 1px solid var(--home-line); color: var(--home-ink); }
    .home .home-plan-btn:hover { border-color: var(--home-blue); color: var(--home-blue); background: #f0f6ff; }
    .home .home-plan-card.hot .home-plan-btn { background: linear-gradient(135deg, #2f5bbf, #5b8def); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(47, 91, 191,.32); }
    .home .home-plan-card.hot .home-plan-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .home .pricing-note { text-align: center; font-size: .82rem; color: var(--home-ink-muted); margin-top: 26px; }
    .home .pricing-link { color: var(--home-blue); text-decoration: none; font-weight: 600; }
    .home .pricing-link:hover { text-decoration: underline; }
    @media (max-width: 1100px) {
        .home .home-plan-grid { gap: 16px; }
    }
    @media (max-width: 1024px) {
        .home .home-plan-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 620px) {
        .home .home-plan-grid { grid-template-columns: 1fr; }
    }

    /* ===== Download ===== */
    .home .download-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .home .download-card { border: 1px solid var(--home-line); border-radius: 8px; padding: 26px 20px; text-align: center; background: #fff; transition: transform .2s, box-shadow .2s; display: block; }
    .home .download-card:hover { transform: translateY(-3px); box-shadow: var(--home-shadow-md); }
    .home .download-card .os { font-size: .72rem; font-weight: 700; color: var(--home-blue); letter-spacing: .1em; text-transform: uppercase; }
    .home .download-card h4 { font-size: 1.05rem; font-weight: 700; margin: 8px 0 4px; }
    .home .download-card p { font-size: .8rem; color: var(--home-ink-muted); }

    /* ===== CTA ===== */
    .home .cta { background: linear-gradient(135deg, #2f5bbf, #2552a8); border-radius: 14px; padding: 56px 32px; text-align: center; color: #fff; box-shadow: 0 20px 50px rgba(47, 91, 191,.28); position: relative; overflow: hidden; }
    .home .cta::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 0%, rgba(255,255,255,.16) 0%, transparent 70%); pointer-events: none; }
    .home .cta h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; position: relative; }
    .home .cta p { margin: 14px 0 30px; color: #d6e4ff; position: relative; }
    .home .cta .btn { background: #fff; color: #2f5bbf; position: relative; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
    .home .cta .btn:hover { background: #f0f6ff; color: #2f5bbf; }

    /* ===== CTA 横幅（新版，参考站风格） ===== */
    .home .home-cta-band { position: relative; overflow: hidden; text-align: center; color: #fff; padding: 72px 0; background: radial-gradient(700px 300px at 15% 0%, rgba(140,184,248,.35), transparent 60%), radial-gradient(700px 320px at 85% 100%, rgba(140,184,248,.25), transparent 60%), linear-gradient(135deg, #041b40, #12438f); }
    .home .home-cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
    .home .home-cta-band p { margin: 14px 0 30px; font-size: .95rem; color: rgba(255,255,255,.75); }
    .home .home-cta-band .btn { height: 48px; padding: 0 36px; }
    .home .btn-grad { background: linear-gradient(90deg, #1e63c8, #8cb8f8); color: #fff; box-shadow: 0 8px 24px rgba(30,99,200,.32); }
    .home .btn-grad:hover { filter: brightness(1.08); transform: translateY(-1px); }

    /* ===== 页脚（新版，参考站风格） ===== */
    .home .home-footer { background: #092753; color: #fff; }
    .home .home-footer .home-footer-inner { max-width: 1200px; margin: 0 auto; padding: 64px 28px 30px; }
    .home .home-footer-logo { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 700; color: #fff; }
    .home .home-footer-logo-icon { width: 34px; height: 34px; flex: none; }
    .home .home-footer-logo-icon svg { display: block; width: 100%; height: 100%; }
    .home .home-footer-main { display: flex; justify-content: space-between; gap: 60px; flex-wrap: wrap; }
    .home .home-footer-brand { max-width: 300px; }
    .home .home-footer-brand p { font-size: .84rem; line-height: 1.9; color: rgba(255,255,255,.62); margin: 14px 0 0; }
    .home .home-footer-cols { display: flex; gap: 80px; flex-wrap: wrap; }
    .home .home-footer-col h4 { font-size: .95rem; font-weight: 700; color: #fff; margin: 0 0 16px; }
    .home .home-footer-col ul { list-style: none; margin: 0; padding: 0; }
    .home .home-footer-col li { font-size: .84rem; color: rgba(255,255,255,.62); margin-bottom: 10px; }
    .home .home-footer-col a, .home .home-footer-col span { color: rgba(255,255,255,.62); text-decoration: none; transition: color .2s; }
    .home .home-footer-col a:hover { color: #fff; }
    .home .home-footer-divider { height: 1px; background: rgba(255,255,255,.18); margin: 40px 0 22px; }
    .home .home-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .82rem; color: rgba(255,255,255,.5); }

    /* 应用内（精讲页等）共享页脚：与首页同款深藏青 */
    .home .home-footer,
    .app-footer { background: #092753; color: #fff; }
    .home .home-footer .home-footer-inner,
    .app-footer .app-footer-inner { max-width: 1200px; margin: 0 auto; padding: 64px 28px 30px; }
    .home .home-footer-logo,
    .app-footer-logo { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 700; color: #fff; }
    .home .home-footer-logo-icon,
    .app-footer-logo-icon { width: 34px; height: 34px; flex: none; }
    .home .home-footer-logo-icon svg,
    .app-footer-logo-icon svg { display: block; width: 100%; height: 100%; }
    .home .home-footer-main,
    .app-footer-main { display: flex; justify-content: space-between; gap: 60px; flex-wrap: wrap; }
    .home .home-footer-brand,
    .app-footer-brand { max-width: 300px; }
    .home .home-footer-brand p,
    .app-footer-brand p { font-size: .84rem; line-height: 1.9; color: rgba(255,255,255,.62); margin: 14px 0 0; }
    .home .home-footer-cols,
    .app-footer-cols { display: flex; gap: 80px; flex-wrap: wrap; }
    .home .home-footer-col h4,
    .app-footer-col h4 { font-size: .95rem; font-weight: 700; color: #fff; margin: 0 0 16px; }
    .home .home-footer-col ul,
    .app-footer-col ul { list-style: none; margin: 0; padding: 0; }
    .home .home-footer-col li,
    .app-footer-col li { font-size: .84rem; color: rgba(255,255,255,.62); margin-bottom: 10px; }
    .home .home-footer-col a, .home .home-footer-col li > span,
    .app-footer-col a, .app-footer-col li > span { color: rgba(255,255,255,.62); text-decoration: none; transition: color .2s; }
    .home .home-footer-col a:hover,
    .app-footer-col a:hover { color: #fff; }
    .home .home-footer-divider,
    .app-footer-divider { height: 1px; background: rgba(255,255,255,.18); margin: 40px 0 22px; }
    .home .home-footer-bottom,
    .app-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .82rem; color: rgba(255,255,255,.5); }
    .home .home-footer-bottom a,
    .app-footer-bottom a { color: inherit; text-decoration: none; }
    .home .home-footer-bottom a:hover,
    .app-footer-bottom a:hover { color: rgba(255,255,255,.85); text-decoration: underline; }
    @media (max-width: 720px) {
        .home .home-footer-main,
        .app-footer-main { flex-direction: column; gap: 32px; }
        .home .home-footer-cols,
        .app-footer-cols { gap: 32px; }
    }


    /* 数据指标（玻璃卡，与 hero 叠层，参看 demo 风格） */
    .home .stats-wrap { position: relative; z-index: 3; margin-top: -96px; }
    .home .stats {
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 2px solid #fff;
      border-top: none;
      border-left: none;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(30,99,200,.12);
      display: flex;
      align-items: stretch;
    }
    .home .stat { flex: 1; display: flex; align-items: center; gap: 16px; padding: 26px 32px; justify-content: center; }
    .home .stat + .stat { border-left: 1px solid rgba(102,102,102,.28); }
    .home .stat-ico { width: 52px; height: 52px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; }
    .home .sa { background: linear-gradient(90deg, #1e63c8, #8cb8f8); }
    .home .sb { background: linear-gradient(135deg, #0aa2c0, #1e63c8); }
    .home .sc { background: linear-gradient(135deg, #1e63c8, #6440e8); }
    .home .stat .num { font-size: 38px; font-weight: 700; line-height: 1; color: var(--home-ink); }
    .home .stat .num small { font-size: 17px; font-weight: 700; margin-left: 2px; }
    .home .stat .label { margin-top: 5px; font-size: 13px; color: var(--home-ink-secondary); }
    @media (max-width: 720px) {
        .home .stats { flex-direction: column; }
        .home .stat { justify-content: flex-start; padding: 18px 24px; }
        .home .stat + .stat { border-left: none; border-top: 1px solid rgba(102,102,102,.28); }
    }

    /* ===== Reveal ===== */
    .home .reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
    .home .reveal.in { opacity: 1; transform: translateY(0); }

    /* ===== Responsive ===== */
    @media (max-width: 960px) {
        .home .suite-grid { grid-template-columns: repeat(2, 1fr); }
        .home .steps-grid { grid-template-columns: repeat(2, 1fr); }
        .home .download-grid { grid-template-columns: repeat(2, 1fr); }
        .home .hero-inner { grid-template-columns: 1fr; gap: 40px; }
        .home .hero-title, .home .hero-sub { margin: 0 auto; text-align: center; }
        .home .hero-chips { justify-content: center; }
        .home .hero-actions { justify-content: center; }
    }
    @media (max-width: 620px) {
        .home .nav-links { display: none; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: #fff; padding: 16px 28px; gap: 18px; }
        .home .nav-links.active { display: flex; }
        .home .mobile-menu-btn { display: block; }
        .home .suite-grid, .home .steps-grid, .home .download-grid { grid-template-columns: 1fr; }
    }

/* ==================== 从百度网盘导入（浏览 + 选择） ==================== */
.detail-modal--netdisk {
  width: 92vw;
  max-width: 840px;
  height: 84vh;
}
.nd-picker {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nd-picker-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.nd-picker-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.nd-provider-card {
  margin-top: 28px;
  width: 100%;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nd-provider-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(47, 91, 191, 0.12);
}
.nd-provider-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nd-provider-logo svg { width: 44px; height: 44px; }
.nd-provider-info { flex: 1; }
.nd-provider-name { font-size: 14px; font-weight: 700; color: var(--text); }
.nd-provider-desc { margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.nd-provider-arrow { color: var(--text-muted); }
.nd-picker-tip {
  margin-top: 24px;
  max-width: 460px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}
.nd-connect {
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.nd-connect-logo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nd-connect-logo svg { width: 36px; height: 36px; }
.nd-connect-title { margin-top: 16px; font-size: 17px; font-weight: 700; color: var(--text); }
.nd-connect-desc { margin-top: 8px; max-width: 420px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.nd-connect .form-actions { margin-top: 24px; }
.nd-loading {
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.nd-loading-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--primary-dim);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.nd-loading-text { font-size: 13px; color: var(--text-muted); }

.nd-error {
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.nd-error-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(245, 158, 11, .18), rgba(245, 158, 11, .05));
  color: #f59e0b;
  margin-bottom: 12px;
}
.nd-error-icon svg { width: 26px; height: 26px; }
.nd-error-title { font-size: 14px; font-weight: 600; color: var(--text); }
.nd-error-hint { font-size: 12px; color: var(--text-muted); line-height: 1.7; max-width: 280px; }
.nd-error-actions { margin-top: 18px; display: flex; gap: 10px; }

/* 浏览区：工具栏置顶、列表滚动、底部操作栏固定 */
.nd-browse {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.nd-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
}
.nd-back {
  border: none;
  background: none;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 4px 6px;
  border-radius: 6px;
}
.nd-back:hover { color: var(--primary); background: var(--primary-dim); }
.nd-back:disabled { opacity: 0.4; cursor: default; color: var(--text-muted); }
.nd-crumbs {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  min-width: 0;
}
.nd-crumb {
  color: var(--primary);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}
.nd-crumb:hover { text-decoration: none; background: var(--primary-dim); }
.nd-crumb-cur {
  color: var(--text);
  font-weight: 700;
  background: var(--primary-dim);
}
.nd-toolbar-right { display: flex; align-items: center; gap: 8px; }
.nd-filter {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
}
.nd-filter-seg {
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.nd-filter-seg.nd-on { background: var(--primary); color: #fff; }
.nd-refresh {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 8px;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nd-refresh:hover { color: var(--primary); border-color: var(--primary); }
/* 列头 */
.nd-head {
  display: grid;
  grid-template-columns: 20px 30px 1fr 56px 92px 76px 16px;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  user-select: none;
  flex-shrink: 0;
}
.nd-head-date { text-align: left; }
.nd-head-size { text-align: right; }
.nd-list {
  flex: 1;
  overflow-y: auto;
}
.nd-row {
  display: grid;
  grid-template-columns: 20px 30px 1fr 56px 92px 76px 16px;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.nd-row:hover { background: var(--bg-hover); }
.nd-row.nd-row-sel { background: linear-gradient(90deg, var(--primary-dim), rgba(47, 91, 191, 0) 75%); }
.nd-row.nd-row-sel .nd-row-name { color: var(--primary); font-weight: 700; }
.nd-row-dir .nd-row-name { color: var(--primary); font-weight: 600; }
.nd-check-blank { width: 18px; }
.nd-row-icon {
  display: flex;
  align-items: center;
}
.nd-icon-chip {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nd-icon-chip svg { width: 15px; height: 15px; }
.nd-chip-dir { background: rgba(245, 179, 1, 0.14); color: #f5b301; }
.nd-chip-video { background: var(--primary-dim); color: var(--primary); }
.nd-chip-audio { background: rgba(16, 185, 129, 0.12); color: #0ea86c; }
.nd-chip-file { background: var(--bg-hover); color: var(--text-muted); }
.nd-row-name {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nd-row-cat-cell { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
.nd-row-cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--bg-hover);
  color: var(--text-muted);
  white-space: nowrap;
}
.nd-row-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.nd-row-size { font-size: 12px; color: var(--text-muted); text-align: right; }
.nd-row-arrow { color: var(--text-muted); display: flex; align-items: center; }
.nd-row .meeting-list-checkbox { margin-top: 0; }
.nd-empty {
  padding: 56px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.nd-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.nd-empty-icon svg { width: 26px; height: 26px; }
.nd-more {
  display: block;
  width: 100%;
  padding: 11px;
  border: none;
  border-top: 1px solid var(--border);
  background: none;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.nd-more:hover { color: var(--primary); background: var(--bg-hover); }
/* 已选文件区域 */
.nd-selected {
  flex-shrink: 0;
  max-height: 148px;
  overflow-y: auto;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-hover);
}
.nd-selected-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.nd-selected-head b { color: var(--primary); }
.nd-selected-clear {
  margin-left: auto;
  border: none;
  background: none;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
}
.nd-selected-clear:hover { color: var(--primary); background: var(--primary-dim); }
.nd-sel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.nd-sel-item:hover { border-color: var(--primary); }
.nd-sel-chip { width: 22px; height: 22px; border-radius: 6px; }
.nd-sel-chip svg { width: 13px; height: 13px; }
.nd-sel-meta { flex: 1; min-width: 0; }
.nd-sel-name {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nd-sel-path {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nd-sel-size { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.nd-sel-remove {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 6px;
}
.nd-sel-remove:hover { color: #ef4444; background: var(--bg-hover); }
@media (max-width: 600px) {
  .nd-sel-path { display: none; }
}
/* 通用确认弹窗 */
.nd-confirm { width: 92vw; max-width: 380px; max-height: none; }
.nd-confirm-body { padding: 28px 24px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.nd-confirm-title { font-size: 16px; font-weight: 700; color: var(--text); }
.nd-confirm-msg { margin-top: 10px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.nd-confirm-actions { margin-top: 22px; display: flex; gap: 10px; }
.nd-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.nd-footer-info { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }
.nd-footer-info b { color: var(--primary); }
.nd-footer-actions { display: flex; align-items: center; gap: 14px; }
.nd-push { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; user-select: none; }
.nd-push input { accent-color: var(--primary); cursor: pointer; }
.nd-push-locked { opacity: .6; cursor: not-allowed; }
.nd-push-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--bg-hover);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
  cursor: help;
  user-select: none;
  flex-shrink: 0;
}
.nd-push-tip:hover { color: var(--primary); background: var(--primary-dim); }
.nd-sel-pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-dim);
  color: var(--primary);
  font-weight: 600;
}
.nd-sel-size { font-size: 12px; color: var(--text-muted); }
.nd-foot-count { font-size: 12px; color: var(--text-muted); }
.nd-import-idle { opacity: 0.55; }

@media (max-width: 600px) {
  .nd-row, .nd-head { grid-template-columns: 20px 30px 1fr 16px; }
  .nd-head-date, .nd-head-size { display: none; }
  .nd-row .nd-row-cat-cell, .nd-row .nd-row-date, .nd-row .nd-row-size { display: none; }
  .nd-toolbar { padding: 8px 12px; }
  .nd-row { padding: 10px 12px; }
  .nd-back { font-size: 11px; }
}

/* ==================== 网盘批进度页 ==================== */
.nd-batch-page { max-width: 1060px; margin: 0 auto; padding: 30px 32px 64px; animation: nd-page-in .4s var(--ease); }
@keyframes nd-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; background: radial-gradient(900px 460px at 16% -8%, var(--primary-glow), transparent 60%), radial-gradient(820px 420px at 94% -4%, var(--cyan-dim), transparent 55%), var(--bg-base); }
.nd-batch-page .nd-batch-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 20px; background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card)); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-elevated); }
.nd-batch-page .nd-batch-head::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--primary), var(--cyan)); }
.nd-batch-page .nd-batch-back { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all .15s var(--ease); flex-shrink: 0; box-shadow: var(--shadow-sm); }
.nd-batch-page .nd-batch-back svg { width: 16px; height: 16px; transition: transform .15s var(--ease); }
.nd-batch-page .nd-batch-back:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-glow); box-shadow: 0 4px 12px var(--primary-glow); }
.nd-batch-page .nd-batch-back:hover svg { transform: translateX(-2px); }
.nd-batch-page .nd-batch-divider { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; margin: 0 2px; }
.nd-batch-page .nd-batch-titlebar { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.nd-batch-page .nd-batch-logo { width: 46px; height: 46px; border-radius: 15px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--cyan)); color: #fff; box-shadow: 0 0 0 4px var(--primary-glow), 0 8px 20px var(--primary-glow); }
.nd-batch-page .nd-batch-logo svg { width: 25px; height: 25px; }
.nd-batch-page .nd-batch-title-text { min-width: 0; }
.nd-batch-page .nd-batch-title { font-size: 19px; font-weight: 800; color: var(--text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.nd-batch-page .nd-batch-subtitle { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.nd-batch-page .nd-batch-live { width: 6px; height: 6px; border-radius: 50%; background: var(--success); display: inline-block; box-shadow: 0 0 0 0 rgba(16,185,129,.35); animation: nd-live 1.8s var(--ease) infinite; }
@keyframes nd-live { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.35); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.nd-batch-page .nd-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--bg-elevated), var(--bg-base)); border: 1px solid var(--border); border-radius: 20px; padding: 24px 26px; box-shadow: var(--shadow-elevated); }
.nd-batch-page .nd-hero::before, .nd-batch-page .nd-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.nd-batch-page .nd-hero::before { top: -90px; right: -70px; width: 300px; height: 300px; background: radial-gradient(closest-side, var(--primary-glow), transparent 72%); }
.nd-batch-page .nd-hero::after { bottom: -110px; left: -60px; width: 300px; height: 300px; background: radial-gradient(closest-side, var(--cyan-dim), transparent 72%); }
.nd-batch-page .nd-hero > * { position: relative; }
.nd-batch-page .nd-hero-top { display: flex; align-items: center; gap: 24px; }
.nd-batch-page .nd-hero-pct { display: flex; align-items: baseline; flex-shrink: 0; }
.nd-batch-page .nd-hero-num { font-size: 48px; font-weight: 900; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, var(--primary), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nd-batch-page .nd-hero-percent { font-size: 20px; font-weight: 700; color: var(--text-muted); margin-left: 3px; }
.nd-batch-page .nd-hero-side { flex: 1; min-width: 0; }
.nd-batch-page .nd-hero-status { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.nd-batch-page .nd-hero-msg { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-batch-page .nd-batch-badge { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 0 0 1px rgba(120,128,160,.16); }
.nd-batch-page .nd-batch-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nd-batch-page .nd-st-run { background: var(--primary-dim); color: var(--primary); }
.nd-batch-page .nd-st-run::before { animation: nd-pulse 1.4s var(--ease) infinite; }
@keyframes nd-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.8); } }
.nd-batch-page .nd-st-ok { background: var(--success-dim); color: var(--success); }
.nd-batch-page .nd-st-fail { background: var(--danger-dim); color: var(--danger); }
.nd-batch-page .nd-progress { height: 10px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.nd-batch-page .nd-progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-light) 60%, var(--accent)); box-shadow: 0 1px 8px rgba(47, 91, 191,.4); transition: width .4s ease; }
.nd-batch-page .nd-progress-anim { background-image: linear-gradient(135deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.3) 75%, transparent 75%, transparent); background-size: 24px 24px; animation: nd-stripes .9s linear infinite; }
@keyframes nd-stripes { from { background-position: 0 0; } to { background-position: 24px 0; } }
.nd-batch-page .nd-hero-foot { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.nd-batch-page .nd-hero-foot b { color: var(--text); font-weight: 700; }
.nd-batch-page .nd-hero-foot b:first-child { color: var(--primary); }

.nd-batch-page .nd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.nd-batch-page .nd-stat { display: flex; align-items: center; gap: 11px; padding: 13px 15px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; min-width: 0; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease); }
.nd-batch-page .nd-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); border-color: var(--border-hover); }
.nd-batch-page .nd-stat-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-glow), var(--cyan-dim)); color: var(--primary); flex-shrink: 0; }
.nd-batch-page .nd-stat-icon svg { width: 17px; height: 17px; }
.nd-batch-page .nd-stat.ok .nd-stat-icon { background: linear-gradient(135deg, var(--success-dim), var(--cyan-dim)); color: var(--success); }
.nd-batch-page .nd-stat.danger .nd-stat-icon, .nd-batch-page .nd-stat.fail .nd-stat-icon { background: linear-gradient(135deg, var(--danger-dim), var(--warning-dim)); color: var(--danger); }
.nd-batch-page .nd-stat.size .nd-stat-icon { background: linear-gradient(135deg, var(--accent-dim), var(--primary-glow)); color: var(--accent); }
.nd-batch-page .nd-stat-meta { min-width: 0; }
.nd-batch-page .nd-stat-num { display: block; font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.nd-batch-page .nd-stat.danger .nd-stat-num { color: var(--danger); }
.nd-batch-page .nd-stat.ok .nd-stat-num { color: var(--success); }
.nd-batch-page .nd-stat-label { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-batch-page .nd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; }
.nd-batch-page .nd-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 9px 20px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: all .16s var(--ease); font-family: inherit; }
.nd-batch-page .nd-btn svg { width: 15px; height: 15px; }
.nd-batch-page .nd-btn:disabled { opacity: .55; cursor: not-allowed; }
.nd-batch-page .nd-btn-primary { background: linear-gradient(90deg, var(--primary), var(--accent)); color: #fff; box-shadow: 0 6px 16px var(--primary-glow); }
.nd-batch-page .nd-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px var(--primary-glow); filter: brightness(1.05); }
.nd-batch-page .nd-btn-ghost { background: var(--bg-card); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); }
.nd-batch-page .nd-btn-ghost:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); background: var(--primary-glow); }
.nd-batch-page .nd-btn-danger { background: var(--danger-dim); color: var(--danger); border-color: rgba(239,68,68,.28); }
.nd-batch-page .nd-btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); box-shadow: 0 6px 16px var(--danger-dim); }

.nd-batch-page .nd-list { margin-top: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-elevated); }
.nd-batch-page .nd-list-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card)); }
.nd-batch-page .nd-list-title { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.nd-batch-page .nd-list-count { font-size: 12px; color: var(--primary); background: var(--primary-glow); padding: 4px 13px; border-radius: 999px; font-weight: 700; }
.nd-batch-page .nd-segs { display: flex; flex-direction: column; }
.nd-batch-page .nd-list-empty { padding: 40px 24px; }
.nd-batch-page .nd-seg { display: grid; grid-template-columns: 26px 38px minmax(0,1fr) minmax(120px,170px) 76px 34px; grid-template-areas: "seq icon info prog badge act"; align-items: center; column-gap: 12px; padding: 13px 20px; border-left: 3px solid transparent; transition: background .15s var(--ease); }
.nd-batch-page .nd-seg-seq { grid-area: seq; }
.nd-batch-page .nd-seg-icon { grid-area: icon; }
.nd-batch-page .nd-seg-info { grid-area: info; }
.nd-batch-page .nd-seg-prog { grid-area: prog; }
.nd-batch-page .nd-seg-badge { grid-area: badge; justify-self: end; }
.nd-batch-page .nd-seg-retry { grid-area: act; }
.nd-batch-page .nd-seg + .nd-seg { border-top: 1px solid var(--border); }
.nd-batch-page .nd-seg:hover { background: linear-gradient(90deg, var(--primary-glow), transparent 85%); }
.nd-batch-page .nd-seg.pending { border-left-color: var(--border-hover); }
.nd-batch-page .nd-seg.running { border-left-color: var(--primary); }
.nd-batch-page .nd-seg.ok { border-left-color: var(--success); }
.nd-batch-page .nd-seg.fail { border-left-color: var(--danger); }
.nd-batch-page .nd-seg.cancel { border-left-color: var(--border-hover); }
.nd-batch-page .nd-seg-seq { width: 26px; height: 26px; border-radius: 999px; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--text-muted); flex-shrink: 0; transition: all .15s; }
.nd-batch-page .nd-seg.running .nd-seg-seq { background: var(--primary-glow); color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); }
.nd-batch-page .nd-seg.ok .nd-seg-seq { background: var(--success-dim); color: var(--success); }
.nd-batch-page .nd-seg.fail .nd-seg-seq { background: var(--danger-dim); color: var(--danger); }
.nd-batch-page .nd-seg.cancel .nd-seg-seq { opacity: .6; }
.nd-batch-page .nd-seg-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--cyan-dim), var(--primary-glow)); color: var(--primary); box-shadow: var(--shadow-sm); }
.nd-batch-page .nd-seg-icon svg { width: 16px; height: 16px; }
.nd-batch-page .nd-seg-info { min-width: 0; }
.nd-batch-page .nd-seg-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-batch-page .nd-seg-error { font-size: 11px; color: var(--danger); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-batch-page .nd-seg-hint { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.nd-batch-page .nd-seg-hint .nd-seg-dl { color: var(--primary); font-weight: 700; }
.nd-batch-page .nd-seg-size-pct { margin-left: 6px; color: var(--primary); font-weight: 700; font-size: 11px; }
.nd-batch-page .nd-seg-msg { font-size: 11px; color: var(--accent); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-batch-page .nd-seg-prog { text-align: right; min-width: 0; }
.nd-batch-page .nd-seg-size { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nd-batch-page .nd-seg-size-sep { opacity: .45; margin: 0 3px; }
.nd-batch-page .nd-seg-bar { height: 5px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; margin-top: 6px; }
.nd-batch-page .nd-seg-bar-wait { background-image: linear-gradient(90deg, var(--bg-hover) 40%, var(--primary-glow) 50%, var(--bg-hover) 60%); background-size: 200% 100%; animation: nd-sweep 1.4s linear infinite; }
@keyframes nd-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.nd-batch-page .nd-seg-bar-work { background-image: linear-gradient(90deg, var(--bg-hover) 42%, var(--primary-glow) 50%, var(--bg-hover) 58%); background-size: 240% 100%; animation: nd-sweep 1.2s linear infinite; }
.nd-batch-page .nd-seg-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--cyan)); transition: width .3s; box-shadow: 0 0 6px rgba(47, 91, 191,.35); }
.nd-batch-page .nd-seg-bar-anim { background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.45)); background-size: 16px 100%; animation: nd-shine .9s linear infinite; }
@keyframes nd-shine { from { background-position: -16px 0; } to { background-position: 16px 0; } }
.nd-batch-page .nd-seg.fail .nd-seg-bar-fill { background: linear-gradient(90deg, var(--danger), var(--warning)); }
.nd-batch-page .nd-seg.ok .nd-seg-bar-fill { background: var(--success); }
.nd-batch-page .nd-seg-badge { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(120,128,160,.14); }
.nd-batch-page .nd-seg-badge.pending { background: var(--bg-hover); color: var(--text-muted); }
.nd-batch-page .nd-seg-badge.running { background: var(--primary-dim); color: var(--primary); }
.nd-batch-page .nd-seg-badge.ok { background: var(--success-dim); color: var(--success); }
.nd-batch-page .nd-seg-badge.fail { background: var(--danger-dim); color: var(--danger); }
.nd-batch-page .nd-seg-badge.cancel { background: var(--bg-hover); color: var(--text-muted); }
.nd-batch-page .nd-seg-retry { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s var(--ease); padding: 0; box-shadow: var(--shadow-sm); }
.nd-batch-page .nd-seg-retry svg { width: 15px; height: 15px; }
.nd-batch-page .nd-seg-retry:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); background: var(--primary-glow); box-shadow: 0 4px 12px var(--primary-glow); }
.nd-batch-page .nd-seg-retry:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 900px) {
  .nd-batch-page .nd-stats { grid-template-columns: repeat(2, 1fr); }
  .nd-batch-page .nd-hero-top { gap: 14px; }
  .nd-batch-page .nd-hero-num { font-size: 40px; }
  .nd-batch-page .nd-hero { padding: 20px; }
  .nd-batch-page .nd-seg { grid-template-columns: 26px 38px minmax(0,1fr) minmax(90px,140px) 70px 34px; }
}
@media (max-width: 720px) {
  .nd-batch-page { padding: 18px 14px 44px; }
  .nd-batch-page .nd-batch-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .nd-batch-page .nd-batch-titlebar { width: 100%; }
  .nd-batch-page .nd-batch-divider { display: none; }
  .nd-batch-page .nd-seg { grid-template-columns: 26px minmax(0,1fr) auto; grid-template-areas: "seq info badge" "seq prog act"; align-items: start; }
  .nd-batch-page .nd-seg-icon { display: none; }
  .nd-batch-page .nd-seg-prog { text-align: right; margin-top: 2px; }
  .nd-batch-page .nd-seg-badge { justify-self: end; }
  .nd-batch-page .nd-seg-retry { justify-self: end; }
}

/* ==================== 来源分段 ==================== */
.nd-source-list { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; }
.nd-source-seg { padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.nd-source-seg.nd-src-missing { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.04); }
.nd-source-seg.nd-src-ok { border-color: rgba(16,185,129,0.2); }
.nd-src-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.nd-src-seq { font-size: 13px; font-weight: 700; color: var(--primary); }
.nd-src-badge { padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.nd-src-ok { background: rgba(16,185,129,0.12); color: #0ea86c; }
.nd-src-missing { background: rgba(239,68,68,0.12); color: #ef4444; }
.nd-src-pending { background: var(--bg-hover); color: var(--text-muted); }
.nd-src-offset, .nd-src-dur { font-size: 11px; color: var(--text-muted); }
.nd-src-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; word-break: break-all; }
.nd-src-path { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; word-break: break-all; }
.nd-src-error { font-size: 12px; color: #ef4444; padding: 6px 10px; background: rgba(239,68,68,0.06); border-radius: 6px; margin-top: 6px; }

/* ==================== 多选排序按钮 ==================== */
.nd-sel-hint { font-size: 11px; color: var(--text-muted); margin-right: auto; }
.nd-sel-ord { width: 20px; height: 20px; border-radius: 50%; background: var(--primary-dim); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.nd-sel-move { display: flex; flex-direction: column; gap: 2px; }
.nd-sel-up, .nd-sel-down { background: none; border: none; cursor: pointer; font-size: 9px; color: var(--text-muted); padding: 0; line-height: 1; }
.nd-sel-up:hover:not(:disabled), .nd-sel-down:hover:not(:disabled) { color: var(--primary); }
.nd-sel-up:disabled, .nd-sel-down:disabled { opacity: 0.3; cursor: default; }
.nd-sel-item { grid-template-columns: 20px 16px 22px 1fr auto 20px; }

/* ================== 详情整页模式（听脑AI 式两栏） ================== */


#detail-page {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  background: #f6f8fb;
  color: var(--text-main);
  line-height: 1.4;
  /* 听脑AI demo 调色板（作用域覆盖全局变量） */
  --primary: #0f67fe;
  --primary-hover: #0d5ae5;
  --primary-dim: #e3eeff;
  --primary-glow: rgba(47, 91, 191, .15);
  --text-main: #352f44;
  --text: #352f44;
  --text-title: #1f2937;
  --text-muted: #8999b5;
  --text-lighter: #999;
  --text-faint: #bec5cd;
  --border: #f0f0f0;
  --border-hover: #dbe3ef;
  --border-soft: #e0e6ed;
  --white: #ffffff;
  --danger: #cf5b4e;
  --shadow-card: 0 2px 18px 0 rgba(0, 0, 0, .06);
}
#detail-page.open { display: flex; }

.detail-page .pm-item { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 12px; }
.detail-page .pm-item svg { width: 16px; height: 16px; }
.detail-page .pm-item--danger { color: var(--danger, #e5484d); }
.detail-page .pm-item:empty { display: none; }

#detail-page .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 5;
}
#detail-page .page-header__left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
#detail-page .page-header__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #505e78;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
#detail-page .page-header__back svg { width: 20px; height: 20px; }
#detail-page .page-header__back:hover { background: rgba(47, 91, 191, 0.08); color: var(--primary); }
#detail-page .page-header__title-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#detail-page .page-header__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-title);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#detail-page .page-header__metadata { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
#detail-page .page-header__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

#detail-page .btn-mindmap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(47, 91, 191, 0.3);
  position: relative;
  transition: background 0.15s;
}
#detail-page .btn-mindmap:hover { background: var(--primary-hover); }
#detail-page .btn-mindmap svg { width: 15px; height: 15px; color: #fff; }

#detail-page .export-dropdown { position: relative; }
#detail-page .btn-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: #fff;
  color: var(--text-main);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
#detail-page .btn-export:hover { border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow-card); }
#detail-page .btn-export svg { width: 15px; height: 15px; }
#detail-page .btn-export .caret { width: 12px; height: 12px; color: var(--text-muted); transition: transform 0.15s; }
#detail-page .export-dropdown.open .btn-export { border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow-card); }
#detail-page .export-dropdown.open .btn-export .caret { transform: rotate(180deg); }
#detail-page .export-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(30, 50, 90, 0.18);
  z-index: 30;
}
#detail-page .export-dropdown.open .export-menu { display: block; }
#detail-page .export-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 22px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--border-soft);
  border-top: 1px solid var(--border-soft);
  transform: rotate(45deg);
}
#detail-page .export-menu .em-group-title { font-size: 11px; font-weight: 600; color: var(--text-faint); padding: 8px 10px 4px; letter-spacing: normal; }
#detail-page .em-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
#detail-page .em-item:hover { background: #f4f8ff; }
#detail-page .em-item .em-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
}
#detail-page .em-item .em-ic svg { width: 18px; height: 18px; }
#detail-page .em-doc { color: #2f5bbf; background: #ECF3FF; }
#detail-page .em-pdf { color: #E5484D; background: #FDECEC; }
#detail-page .em-txt { color: #8B5CF6; background: #F3EEFF; }
#detail-page .em-md { color: #0EA5E9; background: #E0F4FF; }
#detail-page .em-mm { color: #10B981; background: #E3F8EC; }
#detail-page .em-audio { color: #F59E0B; background: #FFF4E0; }
#detail-page .em-item .em-body { min-width: 0; }
#detail-page .em-item .em-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-title);
  position: relative;
}
#detail-page .em-item .em-desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
#detail-page .em-item .perm-badge { position: static; margin-left: 0; flex-shrink: 0; }

/* 网盘批导入来源横幅 */
#detail-page .detail-source-banner--full {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 6px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--danger);
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 18%, transparent);
}
#detail-page .detail-source-banner--full svg { width: 14px; height: 14px; flex-shrink: 0; }
#detail-page .detail-source-banner--full b { font-weight: 700; }

#detail-page .page-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 14px 10px 10px;
  min-height: 0;
}

#detail-page .left-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  min-width: 360px;
  max-width: 40%;
  box-shadow: var(--shadow-card);
}
#detail-page .left-sidebar__header {
  height: 48px;
  padding: 0 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
#detail-page .left-sidebar__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #000;
}
#detail-page .left-sidebar__title .count { font-size: 12px; font-weight: 500; color: var(--text-muted); }
#detail-page .left-sidebar__actions { display: flex; align-items: center; gap: 8px; }
#detail-page .ls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  min-width: 66px;
  padding: 0 12px;
  border-radius: 40px;
  border: 1px solid var(--border-soft);
  background: #fff;
  font-size: 12px;
  color: #333;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
#detail-page .ls-btn:hover { border-color: var(--primary); color: var(--primary); }
#detail-page .ls-btn svg { width: 14px; height: 14px; }

#detail-page .left-sidebar__main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#detail-page .left-sidebar__tabs { display: none; padding: 0 16px; border-bottom: none; flex-shrink: 0; }
#detail-page .left-sidebar__tabs-scroll { display: flex; gap: 8px; padding: 12px 0; }
#detail-page .ls-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 14px;
  border-radius: 88px;
  border: none;
  background: #f5f5f5;
  font-size: 14px;
  color: var(--text-main);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#detail-page .ls-tab svg { width: 14px; height: 14px; }
#detail-page .ls-tab:hover { background: var(--primary-dim); }
#detail-page .ls-tab.is-active { background: var(--primary-dim); color: var(--primary); font-weight: 600; }

#detail-page .left-sidebar__content { flex: 1; min-height: 0; overflow-y: auto; }
#detail-page .left-sidebar__content-wrapper { padding: 6px 16px 40px; }
#detail-page .transcript-list { display: flex; flex-direction: column; gap: 2px; min-height: 100%; }
#detail-page .transcript-list__item { margin-bottom: 14px; padding: 8px 10px; border-radius: 12px; transition: background 0.15s; cursor: pointer; }
#detail-page .transcript-list__item:hover { background: #f5f8ff; }
#detail-page .transcript-list__item.paragraph-bg-highlight { background: #fff3ec; box-shadow: inset 3px 0 0 var(--primary); }
#detail-page .transcript-list__item.paragraph-bg-highlight .transcript-list__text { color: var(--primary); }
#detail-page .transcript-list__text { font-size: 14px; color: var(--text-main); line-height: 1.85; }
#detail-page .transcript-timestamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  background: var(--primary-dim);
  border: 1px solid rgba(47, 91, 191, 0.2);
  border-radius: 6px;
  padding: 1px 7px;
  margin-right: 8px;
  margin-bottom: 2px;
}
#detail-page .transcript-timestamp:hover { background: var(--primary); color: #fff; }
#detail-page .transcript-list__item .transcript-list__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; min-height: 26px; }
#detail-page .transcript-list__item .transcript-list__idx { font-size: 11px; font-family: 'JetBrains Mono', 'SF Mono', monospace; font-variant-numeric: tabular-nums; min-width: 22px; height: 22px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--primary-dim); color: var(--primary); flex-shrink: 0; transition: all .15s; }
#detail-page .transcript-list__meta .speaker-badge { flex-shrink: 0; font-size: 13px; font-weight: 600; padding: 0; margin-right: 0; letter-spacing: .2px; border: 0; background: transparent; }
#detail-page .transcript-list__item:hover .transcript-list__idx { background: var(--primary); color: #fff; }
#detail-page .transcript-list__item .transcript-timestamp { margin-left: auto; margin-right: 0; margin-bottom: 0; background: transparent; border: 0; padding: 0 0 0 12px; font-size: 12px; color: var(--text-tertiary, #a7afbe); cursor: default; transition: color .15s; }
#detail-page .transcript-list__item:hover .transcript-timestamp { color: var(--primary); }
#detail-page .transcript-list__item .transcript-timestamp:hover { background: transparent; color: var(--primary); }
#detail-page .transcript-list__item .transcript-list__text { padding-left: 30px; }

/* 原文编辑（沉浸视图左侧原文可编辑） */
#detail-page .transcript-edit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 8;
  background: #f6f8fb;
  box-shadow: 0 6px 14px -10px rgba(16,24,40,.22);
}
#detail-page .transcript-edit-hint { font-size: 12px; color: var(--text-muted); }
#detail-page .transcript-edit-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#detail-page .transcript-edit-textarea {
  width: 100%;
  min-height: 320px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
  line-height: 1.85;
  color: var(--text-main);
  background: #fbfcff;
  outline: none;
}
#detail-page .transcript-edit-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 91, 191, 0.12); }

/* 片段级原文编辑：保留时间轴定位 */
#detail-page .transcript-edit-segments { display: flex; flex-direction: column; gap: 10px; }
#detail-page .transcript-edit-seg {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfcff;
  overflow: hidden;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
#detail-page .transcript-edit-seg:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 91, 191, 0.12); }
#detail-page .transcript-edit-seg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: #f5f7fb;
}
#detail-page .transcript-edit-seg-time {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
  color: var(--text-secondary);
  background: #eef1f7;
  border-radius: 999px;
  padding: 2px 8px;
}
#detail-page .transcript-edit-seg-del {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}
#detail-page .transcript-edit-seg-del:hover { color: #e5484d; background: #fdecec; }
#detail-page .transcript-edit-seg-text {
  width: 100%;
  min-height: 48px;
  resize: vertical;
  border: none;
  outline: none;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
  line-height: 1.8;
  color: var(--text-main);
  background: transparent;
}

#detail-page .left-sidebar__player-container { flex-shrink: 0; padding: 14px 16px 16px; background: #fff; border-top: 1px solid var(--border); }

/* 整页录音播放器（与内容一体，无卡片背景） */
#detail-page .recording-controller {
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  position: relative;
  overflow: visible;
}
#detail-page .recording-controller::before { display: none; }
#detail-page .recording-controller__top { display: flex; align-items: center; gap: 12px; position: relative; }
#detail-page .recording-controller__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  border: none;
  background: linear-gradient(135deg, #2f5bbf, #2f5bbf);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(47, 91, 191, 0.38);
  transition: transform 0.15s, box-shadow 0.15s;
}
#detail-page .recording-controller__icon:hover { transform: scale(1.06); box-shadow: 0 8px 20px rgba(47, 91, 191, 0.48); }
#detail-page .recording-controller__icon:active { transform: scale(0.96); }
#detail-page .recording-controller__icon svg { width: 22px; height: 22px; }
#detail-page .recording-controller .rc-icon-play { display: block; }
#detail-page .recording-controller .rc-icon-pause { display: none; }
#detail-page .recording-controller.playing .rc-icon-play { display: none; }
#detail-page .recording-controller.playing .rc-icon-pause { display: block; }
#detail-page .recording-controller__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
#detail-page .recording-controller__text { font-size: 14px; font-weight: 600; color: var(--text-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#detail-page .recording-controller__badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-muted); }
#detail-page .recording-controller__badge svg { width: 12px; height: 12px; color: #f59e0b; }

#detail-page .rc-btn {
  height: 28px;
  min-width: 28px;
  padding: 0 10px;
  border-radius: 40px;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#detail-page .rc-btn:hover { background: #e6f0ff; }
#detail-page .rc-btn svg { width: 14px; height: 14px; }
#detail-page .rc-btn--speed { min-width: 56px; padding: 0 12px; gap: 5px; font-variant-numeric: tabular-nums; }

#detail-page .recording-controller__progress { display: flex; align-items: center; gap: 10px; margin-top: 13px; position: relative; }
#detail-page .rc-progress-time { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 56px; }
#detail-page .rc-progress-time--total { text-align: right; color: var(--text-faint); }
#detail-page .rc-progress-track {
  position: relative;
  flex: 1;
  height: 5px;
  border-radius: 6px;
  cursor: pointer;
  background: #eef2fb;
  overflow: visible;
}
#detail-page .rc-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, #2f5bbf, #2f5bbf);
}
#detail-page .rc-progress-thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #2f5bbf;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(30, 41, 78, 0.25);
  transition: transform 0.12s;
}
#detail-page .rc-progress-track:hover .rc-progress-thumb { transform: translate(-50%, -50%) scale(1.25); }
#detail-page .recording-controller.playing .rc-progress-fill { background: linear-gradient(90deg, #2f5bbf, #8b5cf6); }

#detail-page .recording-controller__actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; position: relative; }
#detail-page .rc-transport {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: #f4f7fe;
  border-radius: 40px;
}
#detail-page .rc-btn--primary { background: linear-gradient(135deg, #2f5bbf, #2f5bbf); color: #fff; box-shadow: 0 4px 10px rgba(47, 91, 191, 0.3); }
#detail-page .rc-btn--primary:hover { background: linear-gradient(135deg, #2f6fd8, #574dd6); }
#detail-page .rc-btn--icon { padding: 0; }
/* 删除录音：与播放控制同语言——透明底 + 危险红字 + 浅红 hover，避免实心红块在浅色播放器里过于扎眼 */
#detail-page .rc-btn--danger { color: #E5484D; background: transparent; box-shadow: none; }
#detail-page .rc-btn--danger:hover { background: #FFF1F1; }
#detail-page .rc-btn--download { min-width: 0; padding: 0 12px; position: relative; }
#detail-page .rc-btn--download .perm-badge { position: static; margin-left: 2px; font-size: 10px; }
#detail-page .rc-btn.is-locked { opacity: 0.75; }
#detail-page .recording-expire-hint { font-size: 11px; color: var(--text-faint); margin-top: 10px; display: flex; align-items: center; gap: 4px; position: relative; }
/* 播放器底栏：左侧存储说明，右侧危险操作（删除录音）——信息区与操作区分栏，不再让红按钮孤零零浮在中间 */
#detail-page .recording-controller__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
#detail-page .recording-controller__footer .recording-expire-hint { margin-top: 0; }
#detail-page .recording-expire-hint svg { width: 12px; height: 12px; flex-shrink: 0; }
#detail-page .recording-expire-hint.is-error { color: #ef4444; }

/* ===== 云端录音已删除空态卡（仅删录音、保留纪要后占位）===== */
#detail-page .recording-deleted-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid #9aa3b2;
}
#detail-page .recording-deleted-card .rdc-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(154, 163, 178, 0.14);
  color: #6b7280;
}
#detail-page .recording-deleted-card .rdc-icon svg { width: 18px; height: 18px; }
#detail-page .recording-deleted-card .rdc-body { min-width: 0; flex: 1; }
#detail-page .recording-deleted-card .rdc-title { font-size: 13.5px; font-weight: 600; color: var(--text-title); }
#detail-page .recording-deleted-card .rdc-desc { font-size: 12px; line-height: 1.5; color: var(--text-secondary); margin-top: 4px; }
#detail-page .recording-controller.is-unavailable .recording-controller__icon { opacity: 0.4; pointer-events: none; }
#detail-page .recording-controller.is-unavailable .rc-btn { opacity: 0.4; pointer-events: none; }
#detail-page .recording-controller.is-unavailable .recording-controller__progress { pointer-events: none; opacity: 0.5; }

/* ===== 百度网盘归档提示卡（平台内不可回放）===== */
#detail-page .baidu-archive-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(59,111,224,0.07), rgba(59,111,224,0.03));
  border: 1px solid rgba(59,111,224,0.22);
  border-left: 3px solid #3b6fe0;
}
#detail-page .baidu-archive-card .bac-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(59,111,224,0.12);
  color: #3b6fe0;
}
#detail-page .baidu-archive-card .bac-icon svg { width: 18px; height: 18px; }
#detail-page .baidu-archive-card .bac-body { min-width: 0; flex: 1; }
#detail-page .baidu-archive-card .bac-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 5px;
}
#detail-page .baidu-archive-card .bac-title {
  font-size: 13.5px; font-weight: 600; color: var(--text-title);
}
#detail-page .baidu-archive-card .bac-desc {
  font-size: 12px; line-height: 1.5; color: var(--text-secondary);
  margin-bottom: 8px;
}
#detail-page .baidu-archive-card .bac-desc strong { color: #3b6fe0; font-weight: 600; }
/* 分享页精简版：无网盘路径、无跳转按钮，去掉描述底部留白 */
#detail-page .baidu-archive-card.is-compact .bac-desc { margin-bottom: 0; }
#detail-page .baidu-archive-card .bac-path {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 6px 9px;
  font-size: 11px; color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#detail-page .baidu-archive-card .bac-path svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; color: var(--text-muted); }
#detail-page .baidu-archive-card .bac-path span {
  min-width: 0;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
#detail-page .baidu-archive-card .bac-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  font-size: 12.5px; font-weight: 600; color: #fff;
  background: #3b6fe0;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow: 0 3px 9px rgba(59,111,224,0.25);
}
#detail-page .baidu-archive-card .bac-btn svg { width: 13px; height: 13px; }
#detail-page .baidu-archive-card .bac-btn:hover { background: #2f5bbf; transform: translateY(-1px); box-shadow: 0 5px 13px rgba(59,111,224,0.32); }
#detail-page .baidu-archive-card .bac-btn:active { transform: translateY(0); }

/* 归档进行中（异步任务未到终态，audioPath 尚未产生）：图标呼吸提示"还在跑"，避免看着像卡住 */
#detail-page .baidu-archive-card.is-archiving .bac-icon {
  animation: bac-archive-pulse 1.6s ease-in-out infinite;
}
#detail-page .baidu-archive-card.is-archiving .bac-title { color: #2f5bbf; }
@keyframes bac-archive-pulse {
  0%, 100% { opacity: .55; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #detail-page .baidu-archive-card.is-archiving .bac-icon { animation: none; }
}

@media (max-width: 720px) {
  #detail-page .baidu-archive-card .bac-head { flex-wrap: wrap; }
  #detail-page .baidu-archive-card .bac-btn { width: 100%; justify-content: center; }
}

/* 权益锁卡片 */
#detail-page .audio-perm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 12px;
  padding: 40px 20px;
  border: 1px dashed var(--border-soft);
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfcff, #fff);
  text-align: center;
}

/* 主区 */
#detail-page .detail-main {
  flex: 2;
  display: flex;
  flex-direction: column;
  min-width: 456px;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
#detail-page .detail-main__toolbar {
  height: 48px;
  padding: 0 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
#detail-page .detail-tabs { display: flex; align-items: center; gap: 20px; height: 100%; flex: 0 1 auto; background: transparent; }
#detail-page .detail-tab {
  position: relative;
  height: 47px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  cursor: pointer;
}
#detail-page .detail-tab svg { width: 15px; height: 15px; opacity: 0.75; flex: 0 0 auto; }
#detail-page .detail-tab .underline {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 3px;
  background: var(--primary);
  border-radius: 6px;
  opacity: 0;
}
#detail-page .detail-tab.is-active { color: var(--text-title); font-weight: 600; border-bottom-color: transparent; }
#detail-page .detail-tab.is-active svg { opacity: 1; color: var(--primary); }
#detail-page .detail-tab.is-active .underline { opacity: 1; }

#detail-page .detail-main__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 12px 40px; }
#detail-page .detail-main__inner { max-width: 1280px; margin: 0 auto; height: auto; }
#detail-page .panel { display: none; border: none; background: transparent; overflow: visible; }
#detail-page .panel.is-active { display: block; animation: panelIn .25s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#detail-page .content-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 2px 14px;
  background: transparent;
  border: none;
  position: sticky;
  top: 0;
  z-index: 2;
}
#detail-page .content-toolbar .spacer { flex: 1; }
#detail-page .ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 18px;
  color: var(--text-muted);
  background: #f4f6fa;
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
  margin: 0;
}
#detail-page .ai-badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
#detail-page .ai-badge .ai-badge-txt { display: inline-block; font-style: normal; line-height: 16px; }
#detail-page .btn-summary-export {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  border: 1px solid var(--border-soft);
  background: #fff;
  font-size: 12.5px;
  color: var(--text-main);
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, color 0.15s;
}
#detail-page .btn-summary-export:hover { border-color: var(--primary); color: var(--primary); }
#detail-page .btn-summary-export svg { width: 13px; height: 13px; }
#detail-page .btn-edit-summary svg { width: 13px; height: 13px; flex: none; }
#detail-page .btn-edit-summary .perm-badge { position: static; margin-left: 3px; background: linear-gradient(135deg, #fbbf24, #f97316); }

/* 图文纪要（demo 风格 summary-head + summary-card） */
#detail-page .summary-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 18px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, #f7faff, #fff); margin-bottom: 14px; min-width: 100%; }
#detail-page .summary-head .s-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-dim); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#detail-page .summary-head .s-icon svg { width: 22px; height: 22px; flex: 0 0 auto; }
#detail-page .summary-head .s-title { font-size: 17px; font-weight: 700; color: var(--text-title); }
#detail-page .summary-head .s-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#detail-page .summary-head .s-overview { font-size: 13.5px; color: var(--text-main); line-height: 1.8; margin-top: 10px; }
#detail-page .summary-head .s-overview b { color: var(--text-title); }
#detail-page .summary-card { border: 1px solid var(--border); border-radius: 18px; margin-bottom: 14px; overflow: hidden; }
#detail-page .sc-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: #fbfcff; }
#detail-page .sc-head .sc-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#detail-page .sc-head .sc-icon svg { width: 16px; height: 16px; flex: 0 0 auto; }
#detail-page .sc-head .sc-title { font-size: 15px; font-weight: 600; color: var(--text-title); }
#detail-page .sc-head .sc-sub { font-size: 12px; color: var(--text-muted); }
#detail-page .sc-head .sc-count { margin-left: auto; font-size: 12px; color: var(--text-muted); }
#detail-page .sc-body { padding: 16px 20px; }
#detail-page .sq-cyan { background: #e0f4ff; color: #0ea5e9; }
#detail-page .sq-amber { background: #fff4e0; color: #f59e0b; }
#detail-page .sq-emerald { background: #e3f8ec; color: #10b981; }
#detail-page .sq-indigo { background: var(--primary-dim); color: var(--primary); }
#detail-page .kw-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
#detail-page .kw { font-size: 12px; padding: 3px 12px; border-radius: 20px; background: #f0f4ff; color: var(--primary); font-weight: 500; border: 1px solid #e0eaff; }
#detail-page .topic { display: flex; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--border); }
#detail-page .topic:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
#detail-page .t-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-dim); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
#detail-page .t-body { flex: 1; min-width: 0; }
#detail-page .t-name { font-size: 14px; font-weight: 600; color: var(--text-title); margin-bottom: 6px; }
#detail-page .t-rows { display: flex; flex-direction: column; gap: 5px; }
#detail-page .t-row { font-size: 13.5px; color: var(--text-main); line-height: 1.8; padding-left: 10px; position: relative; }
#detail-page .t-row::before { content: ''; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: #c5cddb; }
#detail-page .t-row b { color: var(--text-title); font-weight: 600; }
#detail-page .decide { display: flex; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; align-items: baseline; }
#detail-page .decide:last-child { padding-bottom: 0; margin-bottom: 0; }
#detail-page .d-icon { width: 18px; height: 18px; border-radius: 50%; background: #fff4e0; color: #f59e0b; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
#detail-page .d-icon svg { width: 11px; height: 11px; }
#detail-page .d-text { font-size: 13.5px; color: var(--text-main); line-height: 1.7; }
#detail-page .todo-list { display: flex; flex-direction: column; gap: 10px; }
#detail-page .todo-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
#detail-page .todo-check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #c5cddb; flex-shrink: 0; }
#detail-page .todo-task { flex: 1; color: var(--text-main); }
#detail-page .todo-who { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
#detail-page .avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--primary-dim); color: var(--primary); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
#detail-page .doc { padding: 20px 24px; font-size: 14px; line-height: 1.9; color: var(--text-main); }
#detail-page .doc h1, #detail-page .doc h2, #detail-page .doc h3 { color: var(--text-title); margin: 1em 0 .5em; }
#detail-page .doc h1 { font-size: 20px; } #detail-page .doc h2 { font-size: 17px; } #detail-page .doc h3 { font-size: 15px; }
#detail-page .doc ul { padding-left: 1.4em; margin: .5em 0; } #detail-page .doc li { margin: .3em 0; }
#detail-page .doc p { margin: .5em 0; }
#detail-page .doc .ai-note { color: #999; }
#detail-page .md-wrap { display: block; flex: 0 1 auto; margin: 0; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: transparent; }
#detail-page .md-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: #fbfcff; flex: 0 1 auto; }
#detail-page .md-head .tag { font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #0f67fe, #0ea5e9); border-radius: 6px; padding: 2px 7px; }
#detail-page .md-head .l { display: flex; align-items: center; gap: 8px; }
#detail-page .md-head .l b { font-size: 14px; color: var(--text-title); }
#detail-page .md-head .spacer { flex: 1; }
#detail-page .seg { display: flex; gap: 2px; background: #eef1f6; border-radius: 10px; padding: 2px; border: none; overflow: visible; }
#detail-page .seg .summary-text-mode { height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12px; color: var(--text-muted); background: transparent; }
#detail-page .seg .summary-text-mode.active { background: #fff; color: var(--primary); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

#detail-page .ai-disclaimer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 9px;
  color: var(--text-faint);
  background: #fff;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ================================================================
   会议记录详情 · 宽屏布局 & 视觉增强
   ================================================================ */

/* 右栏真正铺满：去掉图文卡自身 1080 限制，宽度交给 inner 控制 */
#detail-page .summary-graphic { max-width: none; padding: 24px 28px 32px; gap: 18px; }

/* 宽屏（≥1366px）：仅放宽右栏容器；图文纪要保持单列纵向铺满，不并排 */
@media (min-width: 1366px) {
  #detail-page .detail-main__inner { max-width: 1360px; }
}

/* 议题单列纵向排列（主要内容不并排成一排） */
#detail-page .summary-graphic .gr-topics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
/* 单列纵向堆叠时恢复议题之间的分隔线 */
#detail-page .summary-graphic .gr-topic + .gr-topic { border-top: 1px dashed #e6eaf2; padding-top: 14px; }

/* Hero 卡更舒展：概览左侧主色条 + 浅蓝底 */
#detail-page .summary-graphic .gr-hero-card { padding: 24px 26px; }
#detail-page .summary-graphic .gr-overview {
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
}
#detail-page .summary-graphic .gr-meta-pill { padding: 4px 13px; font-size: 12.5px; }

/* 卡片标题更醒目 */
#detail-page .summary-graphic .gr-head-title { font-size: 17px; }
#detail-page .summary-graphic .gr-card { padding: 22px 24px; }

/* 议题序号块更鲜明 */
#detail-page .summary-graphic .gr-tnum { width: 28px; height: 28px; font-size: 13.5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), 0 2px 6px rgba(15,23,42,.06); }
#detail-page .summary-graphic .gr-tname { font-size: 15px; }

/* 待办行 hover 微交互 */
#detail-page .summary-graphic .gr-todo { padding: 13px 16px; }
#detail-page .summary-graphic .gr-todo:hover { border-color: #d8e2f5; box-shadow: 0 2px 8px rgba(15,26,41,.05); }

/* 文本纪要：宽屏铺满（与图文纪要同宽），标题/引用/代码/分隔更精致 */
#detail-page .doc { max-width: none; margin: 0; }
#detail-page .doc h1 { font-size: 22px; letter-spacing: -0.01em; }
#detail-page .doc h2 {
  border-left: 3px solid var(--primary);
  border-bottom: none;
  padding-left: 12px;
  margin: 24px 0 12px;
  color: var(--text-title);
}
#detail-page .doc h3 {
  border-left: 3px solid var(--primary-dim);
  padding-left: 10px;
  color: var(--text-title);
}
#detail-page .doc p { line-height: 1.95; margin: 10px 0; }
#detail-page .doc blockquote {
  background: var(--primary-dim);
  border-left-width: 3px;
  border-radius: 0 10px 10px 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-secondary);
}
#detail-page .doc code { border-radius: 6px; }
#detail-page .doc pre { border-radius: 12px; }
#detail-page .doc hr {
  height: 1px;
  background: linear-gradient(90deg, var(--border-hover), transparent);
}
#detail-page .ai-disclaimer svg { width: 12px; height: 12px; color: #94a3b8; }

/* 思维导图权限态 */
.mindmap-check-perm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 90px 24px;
  text-align: center;
}

/* 整页思维导图容器（沿用弹窗 markmap 样式） */
.mindmap-svg-wrap {
  height: calc(100% - 53px);
  overflow: hidden;
  background: var(--bg-base);
  cursor: grab;
}
.mindmap-svg-wrap:active { cursor: grabbing; }
.mindmap-svg-wrap svg {
  width: 100%;
  height: 100%;
}
/* 沉浸视图思维导图面板（demo 样式：透明卡点 + 经典再弹层） */
#detail-page .mindmap-svg-wrap { height: auto; overflow: visible; background: transparent; padding: 10px; }
#detail-page .mindmap-svg-wrap svg { height: auto; flex: 0 0 auto; }
#detail-page .mindmap-check-perm { gap: 10px; padding: 70px 20px; color: var(--text-muted); }
.mindmap-svg-wrap .markmap-node text {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 13px;
  fill: var(--text) !important;
  paint-order: stroke fill;
  stroke: var(--bg-card);
  stroke-width: 5px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mindmap-svg-wrap .markmap-link {
  stroke: var(--border-hover);
  stroke-width: 1.5;
  fill: none;
}

@media (max-width: 980px) {
  #detail-page .left-sidebar { min-width: 300px; }
  #detail-page .detail-main { min-width: 360px; }
}

/* ===== 原文片段高亮（M1：mark 渲染 + 选区/取消动作条）===== */
.tl-hl {
  padding: 0 1px;
  margin: 0 -1px;
  border-radius: 3px;
  cursor: pointer;
  background-color: rgba(255, 213, 79, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 181, 0, 0.25);
}
.tl-hl[data-hid] { text-decoration: none; }
.transcript-list__item .tl-hl,
.transcript-line .tl-hl { color: inherit; }

.hl-bar {
  position: fixed;
  z-index: 3000;
  display: none;
  align-items: center;
  padding: 4px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(0, 0, 0, 0.06);
  user-select: none;
  -webkit-user-select: none;
}
.hl-bar__acts { display: flex; gap: 4px; }
.hl-bar button {
  border: none;
  background: transparent;
  color: #333;
  font-size: 13px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.hl-bar button:hover { background: #f2f4f7; }
.hl-bar button[data-act="hl"] { color: #b8860b; font-weight: 600; background: rgba(255, 213, 79, 0.35); }
.hl-bar button[data-act="hl"]:hover { background: rgba(255, 213, 79, 0.55); }
.hl-bar button[data-act="cancel"] { color: #d4380d; font-weight: 600; }
.hl-bar button[data-act="cancel"]:hover { background: #fff1f0; }

/* ===== 原文高亮（M2：多色 / 备注 / 侧栏汇总 / 失效区）===== */
.tl-hl[data-color="yellow"] { background-color: rgba(255, 213, 79, 0.55); box-shadow: 0 0 0 1px rgba(255, 181, 0, 0.25); }
.tl-hl[data-color="orange"] { background-color: rgba(255, 172, 64, 0.55); box-shadow: 0 0 0 1px rgba(235, 135, 20, 0.3); }
.tl-hl[data-color="red"]    { background-color: rgba(255, 120, 107, 0.5);  box-shadow: 0 0 0 1px rgba(238, 106, 106, 0.3); }
.tl-hl[data-color="pink"]   { background-color: rgba(245, 137, 168, 0.45); box-shadow: 0 0 0 1px rgba(226, 100, 140, 0.3); }
.tl-hl[data-color="purple"] { background-color: rgba(178, 132, 245, 0.45); box-shadow: 0 0 0 1px rgba(138, 92, 224, 0.3); }
.tl-hl[data-color="blue"]   { background-color: rgba(121, 181, 255, 0.45); box-shadow: 0 0 0 1px rgba(77, 147, 234, 0.3); }
.tl-hl[data-color="cyan"]   { background-color: rgba(96, 207, 214, 0.5);  box-shadow: 0 0 0 1px rgba(45, 175, 185, 0.3); }
.tl-hl[data-color="green"]  { background-color: rgba(140, 218, 130, 0.45); box-shadow: 0 0 0 1px rgba(85, 185, 74, 0.3); }

.transcript-list__item.hl-flash,
.transcript-line.hl-flash { animation: hlFlash 1.2s ease; box-shadow: 0 0 0 2px var(--primary); }
@keyframes hlFlash {
  0% { box-shadow: 0 0 0 4px rgba(47, 91, 191, 0.5); }
  100% { box-shadow: 0 0 0 2px var(--primary); }
}

#detail-page .ls-btn--hl { color: #b8860b; }
#detail-page .ls-btn--hl:hover { border-color: #f2c94c; color: #966900; }

/* 高亮浮动工具条（选字打标 / 点 mark 换色备注） */
#hl-pop, #msh-hl-pop {
  position: fixed;
  z-index: 4000;
  display: none;
  width: 300px;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);
  user-select: none;
  -webkit-user-select: none;
}
.hl-pop__title { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.hl-pop__row { display: flex; gap: 6px; align-items: center; }
.hl-pop__note {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text-main);
  background: #fff;
}
.hl-pop__note:focus { outline: none; border-color: var(--primary); }
.hl-pop__actions { margin-top: 10px; gap: 5px; flex-wrap: nowrap; }
.hl-color {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.hl-color.is-active { border-color: #33405c; box-shadow: 0 0 0 2px #fff inset; }
.hl-color[data-color="yellow"] { background: #f7c948; }
.hl-color[data-color="orange"] { background: #f5a623; }
.hl-color[data-color="red"]    { background: #ee6a6a; }
.hl-color[data-color="pink"]   { background: #e96ba0; }
.hl-color[data-color="purple"] { background: #a06cd5; }
.hl-color[data-color="blue"]   { background: #4d93ea; }
.hl-color[data-color="cyan"]   { background: #39b8c4; }
.hl-color[data-color="green"]  { background: #55b94a; }
.hl-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-main);
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}
.hl-btn:hover { border-color: var(--primary); color: var(--primary); }
.hl-btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.hl-btn--primary:hover { color: #fff; opacity: 0.9; }
.hl-btn--danger { border-color: rgba(217, 57, 21, 0.35); color: #d4380d; }
.hl-btn--danger:hover { background: #fff1f0; border-color: var(--danger); color: var(--danger); }

/* 高亮侧栏（M2：汇总列表 / 失效区） */
#hl-sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  max-width: 92vw;
  z-index: 3500;
  background: var(--bg-page, #f6f8fb);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
#hl-sidebar.is-open { transform: none; }
.hl-side__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.hl-side__title { font-size: 15px; font-weight: 700; color: var(--text-title); }
.hl-side__count { font-size: 12px; color: var(--primary); background: #eef4ff; padding: 1px 8px; border-radius: 20px; }
.hl-side__close { margin-left: auto; border: none; background: transparent; font-size: 18px; color: var(--text-muted); cursor: pointer; line-height: 1; }
.hl-side__filters { padding: 8px 14px; border-bottom: 1px solid var(--border); background: #fff; display: flex; gap: 6px; flex-wrap: wrap; }
.hl-filter-btn { border: 1px solid var(--border); background: #fff; color: var(--text-muted); font-size: 12px; padding: 2px 10px; border-radius: 12px; cursor: pointer; line-height: 1.5; }
.hl-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.hl-filter-btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.hl-side__list { flex: 1; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.hl-group-title { font-size: 11px; color: var(--text-lighter, #98a2b3); margin: 6px 2px 2px; font-weight: 600; }
.hl-empty { padding: 32px 12px; text-align: center; font-size: 12px; color: var(--text-muted); }
.hl-item {
  display: flex; gap: 8px; align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.hl-item:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(47, 91, 191, 0.08); }
.hl-item.is-discard { opacity: 0.55; cursor: default; }
.hl-dot { width: 10px; height: 10px; border-radius: 3px; margin-top: 4px; flex-shrink: 0; }
.hl-dot[data-color="yellow"] { background: #f7c948; }
.hl-dot[data-color="orange"] { background: #f5a623; }
.hl-dot[data-color="red"]    { background: #ee6a6a; }
.hl-dot[data-color="pink"]   { background: #e96ba0; }
.hl-dot[data-color="purple"] { background: #a06cd5; }
.hl-dot[data-color="blue"]   { background: #4d93ea; }
.hl-dot[data-color="cyan"]   { background: #39b8c4; }
.hl-dot[data-color="green"]  { background: #55b94a; }
.hl-item__body { flex: 1; min-width: 0; }
.hl-item__text {
  font-size: 13px; line-height: 1.5; color: var(--text-main);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hl-item.is-discard .hl-item__text { text-decoration: line-through; }
.hl-item__meta { font-size: 11px; color: var(--text-lighter, #98a2b3); margin-top: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hl-item__note { cursor: pointer; color: var(--primary); border-bottom: 1px dashed currentColor; }
.hl-item__note:hover { border-bottom-style: solid; }
.hl-item__user { color: var(--text-muted, #7a869a); max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-item__del { border: none; background: transparent; color: var(--text-lighter, #98a2b3); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px; }
.hl-item__del:hover { color: var(--danger); }
.hl-side__foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: #fff;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 备注编辑弹窗 */
.hl-note-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(18, 26, 42, 0.35);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, visibility 0.16s ease;
}
.hl-note-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.hl-note-card {
  width: 360px;
  max-width: 88vw;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(16, 24, 40, 0.18);
  padding: 18px 18px 14px;
  transform: translateY(6px) scale(0.98);
  transition: transform 0.16s ease;
}
.hl-note-overlay.is-open .hl-note-card { transform: none; }
.hl-note-head {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-title, #2b3650);
  margin-bottom: 12px;
}
.hl-note-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hl-note-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow, rgba(47, 91, 191, 0.12));
}
.hl-note-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.hl-note-btn {
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.hl-note-btn.is-ghost {
  background: #F0F3F9;
  color: var(--text-secondary);
}
.hl-note-btn.is-ghost:hover { background: #E2E8F4; }
.hl-note-btn.is-primary {
  background: var(--primary);
  color: #fff;
}
.hl-note-btn.is-primary:hover { filter: brightness(1.06); }
.hl-note-btn:active { transform: scale(0.97); }

/* ==================== 会议分享弹窗 ==================== */
.share-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.2s var(--ease);
}
.share-overlay.open { display: flex; align-items: center; justify-content: center; }
@keyframes shareModalIn { from { opacity: 0; transform: scale(0.96) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.share-modal {
  width: min(560px, 92vw);
  max-height: 88vh;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: shareModalIn 0.25s var(--ease);
}
.share-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.share-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.share-modal-title svg { color: var(--primary); }
.share-modal-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
}
.share-modal-close:hover { background: var(--bg-hover); color: var(--text); }
.share-modal-body { padding: 18px 22px 8px; overflow-y: auto; flex: 1; }
.share-section { margin-bottom: 16px; }
.share-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.share-required { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.share-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.share-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: all var(--duration) var(--ease);
}
.share-check:hover { border-color: var(--primary); }
.share-check.is-on { border-color: var(--primary); background: var(--primary-dim, rgba(79,70,229,0.08)); color: var(--primary); font-weight: 600; }
.share-check input { display: none; }
.share-check .share-check-mark {
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1.5px solid var(--border);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  transition: all var(--duration) var(--ease);
}
.share-check.is-on .share-check-mark { background: var(--primary); border-color: var(--primary); }
.share-check.is-on .share-check-mark::after { content: '✓'; }

.share-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  user-select: none;
}
.share-toggle { display: none; }
.share-toggle-box {
  width: 34px; height: 20px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background var(--duration) var(--ease);
}
.share-toggle-box::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--duration) var(--ease);
}
.share-toggle:checked + .share-toggle-box { background: var(--primary); }
.share-toggle:checked + .share-toggle-box::after { transform: translateX(14px); }
.share-toggle-text em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.share-toggle-text { line-height: 1.4; }

.share-expiry { display: flex; gap: 10px; }
.share-exp-btn {
  flex: 1;
  padding: 8px 0;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.share-exp-btn:hover { border-color: var(--primary); color: var(--primary); }
.share-exp-btn.is-active { border-color: var(--primary); background: var(--primary-dim, rgba(79,70,229,0.08)); color: var(--primary); }

.share-pwd-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.share-pwd-row { display: flex; gap: 8px; align-items: center; }
.share-pwd-input {
  flex: none;
  width: 150px;
  height: 36px;
  padding: 6px 10px 6px 34px;
  border: 1.5px dashed var(--primary);
  border-radius: var(--r-sm);
  background-color: var(--primary-dim);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 15px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  text-align: center;
  color: var(--primary);
  caret-color: transparent;
  cursor: default;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.share-pwd-input::placeholder {
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  color: var(--text-muted);
}
.share-pwd-input:focus { outline: none; }
#share-pwd-reset {
  flex-shrink: 0;
  height: 36px;
  padding: 0 14px;
  white-space: nowrap;
}
#share-pwd-reset:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-dim);
}
.share-toggle:checked ~ .share-toggle-text em { color: var(--primary); }

.share-result {
  margin: 4px 0 14px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-hover);
}
.share-result-title { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.share-url-row { display: flex; gap: 8px; align-items: stretch; }
.share-url-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-card);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-copy-btn { flex-shrink: 0; }
.share-code-card { margin-top: 10px; }
.share-code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1.5px dashed var(--primary);
  border-radius: var(--r-sm);
  background: var(--primary-dim);
}
.share-code-label {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.share-code-val {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--primary);
}
.share-code-copy {
  flex-shrink: 0;
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(47, 91, 191,0.3);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--primary);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.share-code-copy:hover { border-color: var(--primary); background: var(--primary-dim); }
.share-code-note { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.share-meta { margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.share-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.share-modal-foot .btn-primary { margin-left: auto; }

/* 详情页分享按钮态 */
.btn-mindmap-tool.is-shared,
.btn-mindmap.is-shared {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-dim, rgba(79,70,229,0.08));
}

/* ==================== 会议分享 · 公开展示页（#/meeting-share/{code}） ==================== */
.msh-page {
  min-height: 100vh;
  background: var(--bg-page);
  display: flex;
  justify-content: center;
}
.msh-shell {
  width: 100%;
  max-width: 860px;
  padding: 40px 24px 60px;
  display: flex;
  flex-direction: column;
}
.msh-header { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.msh-brand { font-size: 18px; font-weight: 800; color: var(--text); }
.msh-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-dim, rgba(79,70,229,0.1));
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}
.msh-body { flex: 1; }
.msh-loading, .msh-loading-inline { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--text-muted); font-size: 13px; padding: 60px 0; }

.msh-gate { display: flex; justify-content: center; padding: 40px 0; }
.msh-gate-card {
  width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  padding: 32px 28px;
  text-align: center;
}
.msh-gate-ic { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--primary-dim, rgba(79,70,229,0.1)); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.msh-gate-ic svg { width: 26px; height: 26px; }
.msh-gate-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.msh-gate-desc { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; }
.msh-gate-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 14px;
  text-align: center;
  letter-spacing: 4px;
  background: var(--bg-card);
  color: var(--text);
}
.msh-gate-input:focus { outline: none; border-color: var(--primary); }
.msh-gate-btn { width: 100%; margin-top: 12px; }
.msh-gate-error { margin-top: 10px; font-size: 12px; color: var(--danger); min-height: 16px; }

.msh-error { display: flex; justify-content: center; padding: 40px 0; }
.msh-error-card {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 40px 48px;
  color: var(--text-secondary);
}
.msh-error-ic { color: var(--text-muted); display: flex; justify-content: center; margin-bottom: 12px; }
.msh-error-home { display: inline-flex; margin-top: 16px; }

.msh-hero { margin-bottom: 18px; }
.msh-title { font-size: 24px; font-weight: 800; color: var(--text); margin: 0 0 8px; line-height: 1.3; }
.msh-meta { font-size: 13px; color: var(--text-muted); }

.msh-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.msh-tab {
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--duration) var(--ease);
}
.msh-tab:hover { color: var(--text); }
.msh-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }

.msh-export { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.msh-export-label { font-size: 12px; color: var(--text-muted); }
.msh-export-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.msh-export-btn:hover { border-color: var(--primary); color: var(--primary); }

.msh-views { padding: 18px 0; }
.msh-view { display: none; }
.msh-view.is-active { display: block; }
.msh-summary { font-size: 14px; line-height: 1.8; color: var(--text); white-space: normal; }
.msh-empty { color: var(--text-muted); font-size: 13px; padding: 20px 0; }
.msh-line { display: flex; gap: 12px; padding: 8px 0; font-size: 14px; line-height: 1.7; }
.msh-line-time { flex-shrink: 0; color: var(--text-muted); font-size: 12px; padding-top: 3px; font-variant-numeric: tabular-nums; }
.msh-line-text { flex: 1; color: var(--text); word-break: break-word; }
.msh-mark { padding: 0 2px; border-radius: 3px; }
.msh-mark--yellow { background: rgba(250,204,21,0.35); }
.msh-mark--red { background: rgba(248,113,113,0.35); }
.msh-mark--blue { background: rgba(96,165,250,0.35); }
.msh-mark--green { background: rgba(74,222,128,0.35); }
.msh-mark-note { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }
.msh-audio { width: 100%; margin: 8px 0; }

/* ===== 会议分享 · 沉浸式只读页（复用 #detail-page 沉浸视图视觉） ===== */
#detail-page.msh-share { display: flex; }
#detail-page.msh-share .page-header__metadata .pm-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.msh-share .msh-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-base);
}
.msh-share .msh-loading { color: var(--text-muted); font-size: 14px; letter-spacing: 0.02em; }
.msh-share .msh-gate-card {
  width: 380px;
  max-width: 100%;
  padding: 34px 32px;
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.06);
  text-align: center;
}
.msh-share .msh-gate-ic {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-dim);
  color: var(--primary);
}
.msh-share .msh-gate-ic svg { width: 24px; height: 24px; }
.msh-share .msh-gate-title { font-size: 17px; font-weight: 600; color: var(--text-title); }
.msh-share .msh-gate-desc { margin: 8px 0 18px; font-size: 13px; color: var(--text-muted); }
.msh-share .msh-gate-input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-main);
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.msh-share .msh-gate-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.msh-share .msh-gate-btn { width: 100%; height: 40px; margin-top: 12px; box-sizing: border-box; }
.msh-share a.msh-gate-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.msh-share .msh-gate-error { margin-top: 10px; font-size: 12.5px; color: var(--danger); min-height: 16px; text-align: center; }

.msh-share .msh-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.msh-share .page-body { flex: 1; min-height: 0; }

.msh-share .msh-mark-note { color: var(--text-muted); font-size: 12px; }
#detail-page.msh-share .transcript-list__item { cursor: default; }
#detail-page.msh-share .transcript-list__item:hover { background: transparent; }
#detail-page.msh-share .tl-hl { cursor: default; }
#detail-page.msh-share .transcript-list.is-copyable .transcript-list__item { cursor: text; }
#detail-page.msh-share #msh-view-transcript .transcript-list.is-copyable .transcript-list__item:hover { background: var(--primary-dim); }
#detail-page.msh-share .transcript-list.is-copyable .tl-hl { cursor: pointer; }

.msh-share .msh-player { padding: 2px 0 0; }
.msh-share .msh-player-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.msh-share #msh-main-audio {
  margin-bottom: 14px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* —— 分享内容区排版：卡片化 + 阅读宽度，统一深浅主题 —— */
.msh-share .detail-main__inner { width: 100%; max-width: 780px; margin: 0 auto; padding-bottom: 40px; }
.msh-share #msh-view-summary .md-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 26px;
}
.msh-share #msh-view-summary .md-wrap .markdown-body { font-size: 14px; line-height: 1.85; color: var(--text); }
.msh-share #msh-view-summary .md-wrap .markdown-body h1,
.msh-share #msh-view-summary .md-wrap .markdown-body h2,
.msh-share #msh-view-summary .md-wrap .markdown-body h3 {
  color: var(--text-title);
}
.msh-share #msh-view-summary .md-wrap .markdown-body blockquote { color: var(--text-muted); border-left-color: var(--border-hover); }
.msh-share #msh-view-summary .md-wrap .markdown-body code { background: var(--primary-dim); color: var(--primary); }
/* ===== PC 分享页原文：与详情页一致的 meta 行卡片式阅读体验 ===== */
.msh-share #msh-view-transcript .transcript-list {
  border-top: 1px solid var(--border);
  gap: 0;
}
.msh-share #msh-view-transcript .transcript-list__item {
  position: relative;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .15s ease;
}
/* 可复制态（已登录）hover 浅蓝底；游客态 hover 由 #detail-page.msh-share 规则保持透明 */
.msh-share #msh-view-transcript .transcript-list.is-copyable .transcript-list__item:hover {
  background: var(--primary-dim);
}
/* meta 行：序号 + 说话人 + 时间戳（右对齐） */
.msh-share #msh-view-transcript .transcript-list__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  min-height: 24px;
}
.msh-share #msh-view-transcript .transcript-list__idx {
  font-size: 11px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--primary-dim);
  color: var(--primary);
  flex-shrink: 0;
  transition: all .15s;
}
.msh-share #msh-view-transcript .transcript-list__item:hover .transcript-list__idx {
  background: var(--primary);
  color: #fff;
}
/* 说话人彩色标签：复用全局 .speaker-badge.c-*（与详情页一致） */
.msh-share #msh-view-transcript .transcript-list__meta .speaker-badge {
  margin-right: 0;
  font-size: 12px;
}
/* 时间戳：弱化配色、等宽、靠右 */
.msh-share #msh-view-transcript .transcript-timestamp {
  margin-left: auto;
  margin-right: 0;
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary, #a7afbe);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: color .15s;
}
.msh-share #msh-view-transcript .transcript-list__item:hover .transcript-timestamp {
  color: var(--primary);
}
/* 文本行：舒适行高与留白 */
.msh-share #msh-view-transcript .transcript-list__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-main);
  word-break: break-word;
}
.msh-share .msh-mark-note {
  display: inline;
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
}
.msh-share .msh-loading-inline { justify-content: flex-start; padding: 40px 0; }
.msh-share .msh-empty { color: var(--text-muted); font-size: 13px; padding: 40px 0; text-align: center; }
.msh-share .msh-audio {
  margin-top: 10px;
  width: 100%;
  border-radius: 10px;
}
.msh-share .ai-disclaimer { padding: 14px 26px 10px; }
.msh-share .ai-disclaimer svg { width: 14px; height: 14px; vertical-align: -2px; }

@media (max-width: 900px) {
  #detail-page.msh-share .page-body { flex-direction: column; gap: 10px; }
  #detail-page.msh-share .left-sidebar,
  #detail-page.msh-share .detail-main { max-width: none; min-width: 0; }
}
/* ===== 分享页高亮：登录态 / 侧栏 / 登录弹层 (20260911 v2 仿详情页) ===== */

/* 顶部登录态 */
.msh-auth { display: flex; align-items: center; gap: 8px; margin-right: 4px; }
.msh-auth-name { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary, var(--text-muted)); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msh-auth-name svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--primary); }
.msh-auth .ls-btn { padding: 6px 10px; font-size: 12.5px; }
.msh-auth .ls-btn svg { width: 15px; height: 15px; }

/* 高亮切换按钮（沿用详情页 btn-full-highlights 风格） */
#msh-hl-toggle { padding: 6px 12px; font-size: 12.5px; }
#msh-hl-toggle svg { width: 15px; height: 15px; }

/* 分享页高亮侧栏容器（复用详情页 .hl-side__* 子元素样式，外层独立定位） */
#msh-hl-sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  max-width: 92vw;
  z-index: 3500;
  background: var(--bg-page, #f6f8fb);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
#msh-hl-sidebar.is-open { transform: none; }

/* 属主视图条（仅属主可见，分享页特有） */
.msh-hl-side__owner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  background: var(--primary-dim, #eef4ff);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}
.msh-hl-side__owner-tip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msh-hl-side__owner .hl-btn { padding: 2px 8px; font-size: 11px; }
.msh-hl-side__owner .hl-btn--danger:hover { background: var(--danger, #ef4444); color: #fff; border-color: var(--danger, #ef4444); }

/* 转写行高亮闪烁（详情页 .hl-flash 已定义，这里仅声明继承即可生效） */

/* 登录弹层 */
.msh-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px);
}
.msh-modal-card {
  width: 360px; max-width: 92vw;
  background: var(--bg-elevated, #fff);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  overflow: hidden;
}
.msh-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border, #e5e7eb);
}
.msh-modal-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; color: var(--text, #111); }
.msh-modal-head h3 svg { width: 18px; height: 18px; color: var(--primary, #2552a8); }
.msh-modal-close { background: transparent; border: none; font-size: 22px; line-height: 1; color: var(--text-muted, #6b7280); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.msh-modal-close:hover { color: var(--text, #111); background: var(--primary-dim, rgba(79,70,229,0.08)); }
.msh-modal-body { padding: 18px; }
.msh-modal-body .form-group { margin-bottom: 14px; }
.msh-modal-body .form-group label { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--text-secondary, #4b5563); font-weight: 500; }
.msh-modal-body .form-group input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  background: var(--bg-input, #fff); color: var(--text, #111);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.msh-modal-body .form-group input:focus { outline: none; border-color: var(--primary, #2552a8); box-shadow: 0 0 0 3px var(--primary-glow, rgba(79,70,229,0.18)); }
.msh-login-error { min-height: 16px; margin: 4px 0 12px; font-size: 12.5px; color: var(--danger, #ef4444); text-align: center; }
.msh-modal-body .btn-primary {
  width: 100%; padding: 10px 12px; font-size: 14px; font-weight: 600;
  background: var(--primary, #2552a8); color: #fff; border: none; border-radius: 8px;
  cursor: pointer; transition: background 0.15s, transform 0.05s;
}
.msh-modal-body .btn-primary:hover { background: var(--primary-dark, #1e40af); }
.msh-modal-body .btn-primary:active { transform: translateY(1px); }
.msh-modal-body .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.msh-login-tip { margin-top: 14px; font-size: 12.5px; color: var(--text-muted, #6b7280); text-align: center; }
.msh-login-link { color: var(--primary, #2552a8); text-decoration: none; font-weight: 500; }
.msh-login-link:hover { text-decoration: underline; }

/* 响应式 */
@media (max-width: 900px) {
  .msh-auth-name { max-width: 90px; }
}

/* ===== 分享页高亮 v3：筛选条 + mark 备注标记 + 音文同步高亮行 (20260911) ===== */

/* 用户筛选条 */
.msh-hl-side__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--bg-elevated, #fff);
}
.msh-hl-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #4b5563);
  background: var(--bg-page, #f6f8fb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.msh-hl-filter-btn:hover {
  border-color: var(--primary, #2552a8);
  color: var(--primary, #2552a8);
}
.msh-hl-filter-btn.is-active {
  background: var(--primary, #2552a8);
  border-color: var(--primary, #2552a8);
  color: #fff;
}
.msh-hl-filter-cnt {
  font-size: 11px;
  opacity: 0.8;
}

/* mark 有备注时的标记（小圆点） */
mark.tl-hl.tl-hl--has-note::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--primary, #2552a8);
  vertical-align: super;
  font-size: 0;
}

/* 分享页转写行点击 seek 指针 */
#msh-view-transcript .transcript-list__item[data-ms] {
  cursor: pointer;
}
#msh-view-transcript .transcript-list__item[data-ms] .transcript-timestamp {
  pointer-events: none;
}

/* ===== 分享页高亮 v3 结束 ===== */

/* 选区持久高亮：pop 显示期间，即使输入框聚焦导致原生 selection 丢失，
   仍保持视觉高亮（surroundContents 包裹的 span），保存/取消时自动解除 */
.sel-hl {
  background-color: rgba(59, 130, 246, 0.28);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18);
  border-radius: 2px;
}

/* ===== 说话人徽标与命名面板（C 阶段零模型：LLM 推名 + 手动改名） ===== */
.speaker-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.speaker-badge.c-sky     { background: #f0f9ff; color: #0284c7; }
.speaker-badge.c-blue    { background: #eff6ff; color: #2552a8; }
.speaker-badge.c-indigo  { background: #e8f0fe; color: #1e40af; }
.speaker-badge.c-violet  { background: #eef3ff; color: #6d28d9; }
.speaker-badge.c-purple  { background: #faf5ff; color: #9333ea; }
.speaker-badge.c-pink    { background: #fdf2f8; color: #db2777; }
.speaker-badge.c-red     { background: #fef2f2; color: #dc2626; }
.speaker-badge.c-orange  { background: #fff7ed; color: #ea580c; }
.speaker-badge.c-amber   { background: #fffbeb; color: #d97706; }
.speaker-badge.c-green   { background: #f0fdf4; color: #16a34a; }
.speaker-badge.c-emerald { background: #ecfdf5; color: #059669; }
.speaker-badge.c-teal    { background: #f0fdfa; color: #0d9488; }
.speaker-badge.c-cyan    { background: #ecfeff; color: #0891b2; }


/* ===== 说话人档案页（声纹管理，web-frontend only） ===== */
.vprofile-body { padding: 20px; max-width: 1240px; margin: 0 auto; }
.vprofile-create {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: #fcfdff;
  margin-bottom: 18px;
}
.vprofile-create-title { font-weight: 600; font-size: 14px; color: var(--text-main); margin-bottom: 10px; }
.vprofile-create-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vprofile-inp {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
  background: #fff;
  color: var(--text-main);
  min-width: 0;
}
.vprofile-inp:focus { border-color: var(--primary); }
.vprofile-color { width: 110px; }
.vprofile-remark { flex: 1; min-width: 160px; }
.vprofile-name { width: 150px; }
.vprofile-list { display: flex; flex-direction: column; gap: 8px; }
.vprofile-item-head {
  display: flex; gap: 8px; align-items: center;
  font-size: 12px; color: var(--text-secondary, #8b93a7);
  padding: 0 4px;
}
.vprofile-item-head .vprofile-col-name { width: 150px; }
.vprofile-item-head .vprofile-col-color { width: 110px; }
.vprofile-item-head .vprofile-col-remark { flex: 1; }
.vprofile-item {
  display: flex; gap: 8px; align-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}
.vprofile-item .speaker-badge { min-width: 72px; justify-content: center; }
.vprofile-save { margin-left: auto; flex-shrink: 0; }
.vprofile-del { color: #dc2626; flex-shrink: 0; background: transparent; border: 1px solid rgba(220, 38, 38, .35); }
.vprofile-del:hover { background: #fef2f2; }
.vprofile-empty { padding: 40px 0; text-align: center; color: var(--text-secondary, #8b93a7); font-size: 14px; }
.vprofile-create-hint { margin-top: 8px; font-size: 12px; color: var(--text-secondary, #8b93a7); }
.vprofile-item-head .vprofile-col-sample { width: 96px; }
.vprofile-sample { width: 96px; flex-shrink: 0; text-align: center; font-size: 12px; color: var(--text-secondary, #8b93a7); border: 1px dashed #cbd5e1; border-radius: 999px; padding: 3px 0; }
.vprofile-sample.sampled { color: #0f9d58; border-style: solid; border-color: rgba(15, 157, 88, .4); background: #f0fdf4; }
.vprofile-vp, .vprofile-vp-upload { flex-shrink: 0; white-space: nowrap; }
.vprofile-vp-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg-elevated, #f8fafc); }
.vprofile-vp-form .vp-mid { width: 160px; }
.vprofile-vp-form .vp-sid { width: 160px; }
.vprofile-vp-tip { flex-basis: 100%; font-size: 12px; color: var(--text-secondary, #8b93a7); }

/* ==================== 证件照制作页 ==================== */
.imk-page {
  width: 100%; max-width: 1200px; margin: 0 auto;
  background:
    radial-gradient(1000px 520px at 100% -6%, #e3eeff 0%, transparent 58%),
    radial-gradient(900px 500px at 0% 4%, #ffeef6 0%, transparent 52%),
    transparent;
}

/* ---- 紧凑上传区（内嵌配置面板） ---- */
.imk-upload-compact {
  padding: 24px 20px;
  border-radius: 16px;
  background:
    radial-gradient(520px 170px at 50% -30px, rgba(79,107,255,0.09), transparent),
    var(--bg-card);
}
.imk-upload-compact:hover,
.imk-upload-compact.dragging {
  background:
    radial-gradient(520px 170px at 50% -30px, rgba(79,107,255,0.18), transparent),
    var(--bg-card);
}
.imk-upload-compact .img-upload-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 10px 22px -6px var(--primary-glow);
}
.imk-upload-compact .img-upload-icon svg { width: 24px; height: 24px; }
.imk-upload-compact .img-upload-text { font-size: 14px; font-weight: 600; }
.imk-upload-compact .img-upload-tips { font-size: 12px; margin-top: 6px; }

/* ---- 已选文件 ---- */
.imk-file-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-card);
}
.imk-file-thumb {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}
.imk-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.imk-file-meta { flex: 1; min-width: 0; }
.imk-file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imk-file-size { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.imk-file-replace {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-dim);
  border: 1px solid rgba(47, 91, 191,0.25);
  border-radius: var(--r-full);
  padding: 6px 14px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.imk-file-replace:hover { background: rgba(47, 91, 191,0.16); }

/* ---- 预览空态 ---- */
.imk-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  text-align: center;
}
.imk-preview-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-dim);
  color: var(--primary);
  margin-bottom: 8px;
}
.imk-preview-empty-icon svg { width: 30px; height: 30px; }
.imk-preview-empty p { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin: 0; }
.imk-preview-empty span { font-size: 12px; }

/* ---- Hero（高定证照质感） ---- */
.imk-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-radius: var(--r-xl);
  padding: 28px 32px;
  color: #fff;
  background: linear-gradient(120deg, #7b6cff 0%, #6a6bff 45%, #4f8bff 100%);
  box-shadow: 0 26px 54px -22px rgba(107,103,255,0.65);
  margin-bottom: 18px;
}
.imk-hero-glow {
  position: absolute;
  top: -80%;
  right: -10%;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 60%);
  pointer-events: none;
}
.imk-hero::after {
  content: '';
  position: absolute;
  left: -50px;
  bottom: -110px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 62%);
  pointer-events: none;
}
.imk-hero-main { position: relative; display: flex; align-items: center; gap: 16px; }
.imk-hero-icon {
  width: 56px;
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,0.24);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 12px 24px -10px rgba(0,0,0,0.35);
}
.imk-hero-icon svg { width: 28px; height: 28px; }
.imk-hero-text h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.imk-hero-text p { position: relative; color: rgba(255,255,255,0.9); font-size: 14px; margin: 4px 0 0; }
.imk-hero-actions { position: relative; }
.imk-hero .tool-quota {
  color: #fff;
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.32);
}
.imk-hero .tool-quota-unlimited { color: #bbf7d0; }

/* ---- 步骤条 ---- */
.imk-steps { display: flex; align-items: center; gap: 8px; margin: 4px 2px 0; flex-wrap: wrap; }
.imk-step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 8px 15px;
  border-radius: var(--r-full);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(30,41,59,0.04);
  transition: all var(--duration) var(--ease);
}
.imk-step span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--border);
  transition: all var(--duration) var(--ease);
}
.imk-step.active {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 8px 18px -6px rgba(47, 91, 191,0.55);
}
.imk-step.active span { color: #fff; background: rgba(255,255,255,0.25); }
.imk-step.done { color: var(--success); border-color: rgba(16,185,129,0.28); background: rgba(16,185,129,0.08); }
.imk-step.done span { color: #fff; background: var(--success); }
.imk-step-bar { flex: none; width: 22px; height: 2px; border-radius: 1px; background: var(--border); }
.imk-step.done ~ .imk-step-bar { background: rgba(16,185,129,0.35); }

/* ---- 上传区 ---- */
.imk-upload-zone { background: linear-gradient(180deg, var(--bg-card), var(--bg-hover)); }

/* ---- 编辑区布局 ---- */
.imk-editor-body {
  display: flex;
  gap: 28px;
  align-items: stretch;
}
.imk-config {
  flex: 0 0 400px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.imk-block {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-hover));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 17px 19px;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.imk-block:hover {
  border-color: var(--primary-light);
  box-shadow: 0 12px 28px -26px rgba(47, 91, 191,0.6);
}
.imk-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.imk-block-head label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.imk-block-hint { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* ---- 规格 ---- */
.imk-spec-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.imk-spec-tag {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 7px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.imk-spec-tag:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.imk-spec-tag.active {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-color: transparent;
  box-shadow: 0 8px 18px -8px rgba(47, 91, 191,0.55);
}
.imk-spec-more-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.imk-select {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 12px;
  cursor: pointer;
}
.imk-select:focus { outline: none; border-color: var(--primary); }
.imk-custom-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.imk-custom-check input { accent-color: var(--primary); cursor: pointer; }
.imk-custom-size {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.imk-custom-size label {
  flex: 1;
  min-width: 90px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}
.imk-custom-size input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 9px;
  width: 70px;
}
.imk-custom-size input:focus { outline: none; border-color: var(--primary); }

/* ---- 底色 ---- */
.imk-bg-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.imk-bg-swatch {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 2px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), inset 0 0 0 2px rgba(0,0,0,0.03);
  cursor: pointer;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.imk-bg-swatch:hover { transform: translateY(-2px); }
.imk-bg-swatch.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim), 0 8px 16px -6px rgba(47, 91, 191,0.4);
}
.imk-bg-swatch i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.imk-bg-swatch.is-dark i { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.imk-bg-swatch.active i { opacity: 1; }
.imk-bg-custom {
  display: flex;
  align-items: center;
  gap: 10px;
}
.imk-bg-custom > span { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.imk-bg-color-input {
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  cursor: pointer;
}
.imk-bg-color-input::-webkit-color-swatch-wrapper { padding: 3px; }
.imk-bg-color-input::-webkit-color-swatch { border: none; border-radius: 7px; }
.imk-bg-hex-input {
  width: 96px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 10px;
}
.imk-bg-hex-input:focus { outline: none; border-color: var(--primary); }

/* ---- 清晰度分段 ---- */
.imk-seg {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
}
.imk-seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 18px;
  border-radius: 11px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.imk-seg button span { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; opacity: 0.65; }
.imk-seg button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 6px 14px -5px rgba(47, 91, 191,0.55);
}
.imk-seg button.active span { opacity: 1; }

/* ---- 提交按钮 ---- */
.imk-submit-btn {
  width: 100%;
  justify-content: center;
  padding: 15px 20px;
  font-size: 15px;
  border-radius: 16px;
  background: linear-gradient(135deg, #4f6bff, #8b5cf6);
  box-shadow: 0 12px 26px -10px rgba(79,107,255,0.55);
}
.imk-submit-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ---- 预览 ---- */
.imk-preview-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(45deg, rgba(79,107,255,0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(79,107,255,0.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(79,107,255,0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(79,107,255,0.05) 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  min-height: 420px;
  padding: 24px;
  position: relative;
}
.imk-preview-wrap::before {
  content: '照片预览';
  position: absolute;
  top: 14px;
  left: 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}
.imk-preview-wrap img {
  max-width: 100%;
  max-height: 480px;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

/* ---- 结果 ---- */
.imk-result-head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.imk-result-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--success);
}
.imk-result-title svg { width: 20px; height: 20px; }
.imk-compare {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.imk-compare-item {
  flex: 0 1 420px;
  min-width: 240px;
  margin: 0;
  text-align: center;
}
.imk-compare-item figcaption {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.imk-compare-frame {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  background: var(--bg-card);
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.imk-compare-frame-checker {
  background:
    linear-gradient(45deg, #eceff4 25%, transparent 25%),
    linear-gradient(-45deg, #eceff4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eceff4 75%),
    linear-gradient(-45deg, transparent 75%, #eceff4 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  background-color: var(--bg-card);
}
.imk-compare-frame img {
  max-width: 100%;
  max-height: 380px;
  border-radius: 6px;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.35);
}
.imk-compare-arrow {
  align-self: center;
  flex: none;
  display: flex;
  align-items: center;
  color: var(--primary);
  padding: 0 4px;
}
.imk-compare-arrow svg { width: 22px; height: 22px; }
.imk-result-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.imk-btn-png {
  color: var(--primary);
  background: var(--primary-dim);
  border: 1px solid rgba(47, 91, 191,0.25);
}
.imk-btn-png:hover { background: rgba(47, 91, 191,0.15); }
.imk-result-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 16px;
}
.imk-result-note svg { width: 14px; height: 14px; flex: none; }

/* ---- 国内工具风：圆润卡片/明暗微调 ---- */
.imk-page .tool-card { border-radius: 26px; box-shadow: 0 24px 54px -34px rgba(43,55,110,0.55); }
[data-theme="dark"] .imk-page {
  background:
    radial-gradient(1000px 520px at 100% -6%, rgba(79,107,255,0.18), transparent 58%),
    radial-gradient(900px 500px at 0% 4%, rgba(236,72,153,0.12), transparent 52%),
    transparent;
}
[data-theme="dark"] .imk-block { background: linear-gradient(180deg, var(--bg-card), var(--bg-hover)); }
[data-theme="dark"] .imk-submit-btn { background: linear-gradient(135deg, #7b6cff, #8b5cf6); }

/* ---- 响应式 ---- */
@media (max-width: 860px) {
  .imk-editor-body { flex-direction: column; }
  .imk-config { flex: 1 1 auto; }
  .imk-preview-wrap { min-height: 260px; }
  .imk-hero { padding: 20px 22px; }
  .imk-hero-text h1 { font-size: 22px; }
}
/* ============ PPT 要点内容形态（要点 / 卡片 / 指标 / 时间轴 / 双栏 / 大标题正文） ============ */

.ppt-form-switch {
  display: inline-flex; align-items: center; gap: 2px;
  margin: 6px 0 8px; padding: 2px;
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.ppt-form-btn {
  padding: 3px 10px; border: none; border-radius: 4px;
  background: transparent; color: var(--text-muted);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.ppt-form-btn:hover { color: var(--primary); }
.ppt-form-btn.active {
  background: var(--primary); color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.ppt-form-rows { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
/* 双栏：左右两列并排，各自独立一套标题+条目。窄屏回落单列，保证输入框不低于 240px。 */
.ppt-form-rows.ppt-cmp { flex-direction: row; align-items: flex-start; gap: 12px; width: 100%; }
.ppt-cmp-col {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border: 1px dashed var(--border); border-radius: var(--r-sm);
  background: var(--bg-input);
}
.ppt-cmp-head { display: flex; }
.ppt-cmp-head input {
  width: 100%; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-card); color: var(--text);
  font-size: 13px; font-weight: 600; font-family: inherit;
  transition: border-color var(--duration) var(--ease);
}
.ppt-cmp-head input:focus { outline: none; border-color: var(--primary); }
.ppt-cmp-head input::placeholder { color: var(--text-dim); font-weight: 400; }
.ppt-cmp-col .ppt-form-row { padding: 6px 8px; background: var(--bg-card); }
.ppt-form-row {
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-card);
  transition: border-color var(--duration) var(--ease);
}
.ppt-form-row:hover { border-color: var(--primary); }
.ppt-form-dot {
  flex: none; width: 18px; height: 18px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--primary-dim); color: var(--primary);
  font-size: 11px; font-weight: 700;
}
.ppt-form-fields { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ppt-form-field { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ppt-form-field.narrow { flex: none; width: 96px; }
.ppt-form-field input {
  width: 100%; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-input); color: var(--text);
  font-size: 13px; font-family: inherit;
  transition: border-color var(--duration) var(--ease);
}
.ppt-form-field input:focus { outline: none; border-color: var(--primary); }
.ppt-form-field input::placeholder { color: var(--text-dim); }

.ppt-form-del {
  flex: none; width: 24px; height: 24px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm); background: transparent;
  color: var(--text-dim); cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.ppt-form-del:hover { background: var(--danger-dim); color: var(--danger, #ef4444); }

.ppt-form-add {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; padding: 4px 10px;
  border: 1px dashed var(--border); border-radius: var(--r-sm);
  background: transparent; color: var(--primary);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.ppt-form-add:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-dim); }
.ppt-form-add:disabled {
  color: var(--text-dim); border-style: solid; cursor: not-allowed;
}

.ppt-bullet-content-add:disabled {
  color: var(--text-dim); border-style: solid; cursor: not-allowed;
}
.ppt-bullet-content-add:disabled:hover { border-color: var(--border); background: transparent; }

/* 窄屏双栏回落单列：两列并排会把输入框压到无法输入的宽度 */
@media (max-width: 720px) {
  .ppt-form-rows.ppt-cmp { flex-direction: column; }
  .ppt-cmp-col { width: 100%; }
}

/* 右侧大纲预览中的形态标签 */
.ppt-pv-form {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--primary-dim); color: var(--primary);
  font-size: 10px; font-weight: 700; vertical-align: middle;
}

.nav-todo-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:5px;border-radius:8px;background:#ef4444;color:#fff;font-size:11px;line-height:1;font-weight:600;vertical-align:middle}

.summary-graphic .gr-todo--clickable { cursor: pointer; }
.summary-graphic .gr-todo--clickable:hover { border-color: #2f5bbf; }
.summary-graphic .gr-todo--done { opacity: .55; }
.summary-graphic .gr-todo--done .gr-ttask { text-decoration: line-through; color: #94a3b8; }
.summary-graphic .gr-todo--done .gr-tcheck { background: #10b981; border-color: #10b981; position: relative; }
.summary-graphic .gr-todo--done .gr-tcheck::after { content: ''; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.summary-graphic .gr-todo--busy { pointer-events: none; opacity: .6; }

/* ==================== 一稿多产出（会议详情「生成」弹窗） ==================== */
.derive-modal {
  width: min(560px, 92vw);
  height: auto;
  max-height: 88vh;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn 0.25s var(--ease);
}
.derive-modal--result { width: min(700px, 94vw); }
.derive-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.derive-head-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  box-shadow: 0 8px 18px -8px var(--primary-glow);
}
.derive-head-main { flex: 1; min-width: 0; }
.derive-head-title { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.3; }
.derive-head-sub { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.derive-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.derive-close:hover { background: var(--bg-hover); color: var(--text); }
.derive-body { padding: 18px 20px 22px; overflow-y: auto; }

.derive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .derive-grid { grid-template-columns: 1fr; } }
.derive-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.derive-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.derive-card:disabled { opacity: 0.6; cursor: default; transform: none; }
.derive-card-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: var(--primary-dim);
}
.derive-card[data-type="weekly"] .derive-card-ic { background: var(--primary-dim); }
.derive-card[data-type="email"] .derive-card-ic { background: var(--cyan-dim); }
.derive-card[data-type="update"] .derive-card-ic { background: var(--accent-dim); }
.derive-card[data-type="ppt"] .derive-card-ic { background: var(--warning-dim); }
.derive-card-title { font-size: 14px; font-weight: 700; color: var(--text); }
.derive-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.derive-card-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--success-dim);
  color: var(--success);
}
.derive-card-tag--cost { background: var(--warning-dim); color: var(--warning); }

.derive-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 0 44px;
}
.derive-loading .btn-spinner { width: 26px; height: 26px; border-width: 3px; color: var(--primary); margin-right: 0; }
.derive-loading-text { color: var(--text-muted); font-size: 13px; }
.derive-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 32px 0; }

.derive-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.derive-result-title { font-size: 15px; font-weight: 700; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.derive-result-actions { display: flex; gap: 8px; flex: none; }
.derive-result-body {
  max-height: 54vh;
  overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-base);
}
.derive-result-note {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.derive-result-note svg { width: 13px; height: 13px; flex: none; color: var(--success); }

/* ================================================================
   通知设置（集成配置）
   ================================================================ */
.intg-lead { color: var(--text-secondary); font-size: 13px; margin: 4px 0 18px; }
/* 不写死 max-width：跟随 .page-content 全宽自适应（用户中心其他 section 也均无限宽），
   四列用 fr 等分，宽屏自动拉宽、不再右侧留白 */
.intg-wrap { width: 100%; }
.intg-loading, .intg-empty { color: var(--text-muted); font-size: 13px; padding: 24px 0; }
.intg-section-title {
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
  margin: 22px 0 12px; letter-spacing: .3px;
}
.intg-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
/* 四张推送卡（飞书/钉钉/企微/Webhook）固定并排一排不折行（用户明确要求）；
   仅窄屏分档降级：≤1100px 两列、≤720px 单列（4 列在窄屏下每列不足 200px 不可用） */
@media (max-width: 1100px) { .intg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 四列分到窄卡（≈230px）时三个操作按钮会折行，适度压缩内距让它们保持一行；
   不改文字（「发送测试」等文案是产品口径），只动 padding/font-size */
@media (max-width: 1400px) {
  .intg-card .intg-actions .btn-sm { padding: 6px 10px; font-size: 11.5px; }
}
.intg-default {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 18px; margin-bottom: 16px;
}
.intg-default.is-locked { opacity: .6; }
.intg-default-text { display: flex; flex-direction: column; gap: 3px; }
.intg-default-text b { font-size: 14px; color: var(--text-primary); }
.intg-default-text span { font-size: 12px; color: var(--text-muted); }
@media (max-width: 720px) { .intg-grid { grid-template-columns: 1fr; } }
.intg-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 18px 16px; transition: border-color var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease);
}
.intg-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }
.intg-card.is-locked { opacity: .6; }
.intg-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.intg-card-title { font-weight: 700; font-size: 14px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.intg-card-title svg { width: 15px; height: 15px; }
.intg-body { display: flex; flex-direction: column; gap: 10px; }
.intg-field { display: flex; flex-direction: column; gap: 5px; }
.intg-field label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.intg-field input, .intg-field textarea {
  padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; color: var(--text); background: var(--bg-input); outline: none;
  transition: all var(--duration) var(--ease); width: 100%;
}
.intg-field input:focus, .intg-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.intg-field input:disabled, .intg-field textarea:disabled { cursor: not-allowed; }
.intg-cal-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px !important; line-height: 1.6; resize: vertical;
  word-break: break-all; white-space: pre-wrap;
}
.intg-hint { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.6; }
/* 推送说明独立于卡片网格只显示一次（用户要求：不要在每张卡片重复） */
.intg-push-hint { margin: -6px 0 14px; }
.intg-note {
  font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.6;
  background: var(--bg-input); border-radius: var(--r-sm); padding: 8px 10px;
}
.intg-status { font-size: 12px; color: var(--text-muted); min-height: 16px; }
.intg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.intg-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.intg-toggle input { opacity: 0; width: 0; height: 0; }
/* 卡片右上角：生效状态标签 + 开关（开关即改即存，标签实时同步） */
.intg-head-right { display: inline-flex; align-items: center; gap: 8px; }
.intg-on-label { font-size: 11px; color: var(--text-faint, #94a3b8); white-space: nowrap; }
.intg-on-label.on { color: var(--green, #16a34a); }
.intg-toggle-slider {
  position: absolute; inset: 0; cursor: pointer; background: var(--border);
  border-radius: 999px; transition: background var(--duration) var(--ease);
}
.intg-toggle-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform var(--duration) var(--ease);
}
.intg-toggle input:checked + .intg-toggle-slider { background: var(--primary); }
.intg-toggle input:checked + .intg-toggle-slider::before { transform: translateX(18px); }
.intg-toggle input:disabled + .intg-toggle-slider { cursor: not-allowed; opacity: .6; }
/* ===== 偏好设置页（push_default + storage_backend） ===== */
.pref-lead { font-size: 13px; color: var(--text-muted); margin: 4px 0 18px; line-height: 1.7; }
.pref-lead b { color: var(--text-secondary); }
.pref-loading { font-size: 13px; color: var(--text-muted); padding: 24px 0; }
/* 宽屏：偏好设置页跟随 .page-content 全宽，两张设置卡片并排两列；窄屏自动单列 */
.pref-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .pref-wrap { grid-template-columns: 1fr; } }
.pref-card { display: flex; flex-direction: column; gap: 12px; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pref-row-text { display: flex; flex-direction: column; gap: 4px; }
.pref-row-text b { font-size: 14px; color: var(--text-primary); }
.pref-row-text span { font-size: 12px; color: var(--text-muted); line-height: 1.6; max-width: 560px; }
.pref-sub { font-size: 12px; color: var(--text-muted); margin: -2px 0 4px; line-height: 1.6; }
.pref-sub b { color: var(--text-secondary); }
.pref-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pref-opt { cursor: pointer; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.pref-opt .pref-opt-title { font-weight: 700; font-size: 14px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pref-opt .pref-opt-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.pref-opt.is-selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.pref-opt.is-selected .pref-opt-title { color: var(--primary); }
.pref-opt .pi { display: inline-flex; }
/* 百度网盘未绑定态：卡片内联「绑定」入口，避免用户去别处找 */
.pref-badge { display: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }
.pref-badge-warn { color: var(--warn, #b45309); background: var(--warn-dim, #fef3c7); }
.pref-bind-inline { display: none; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pref-bind-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.pref-opt.is-unbound .pref-badge-warn { display: inline-block; }
.pref-opt.is-unbound .pref-bind-inline { display: flex; }
/* 未绑定态不应出现「已选中」的确定感，避免误导 */
.pref-opt.is-unbound.is-selected { border-color: var(--border); box-shadow: none; }
.pref-opt.is-unbound.is-selected .pref-opt-title { color: var(--text); }
.pref-opt.is-unbound .pref-bind-inline [data-baidu-btn]:disabled { opacity: .7; cursor: progress; }
@media (max-width: 720px) { .pref-opts { grid-template-columns: 1fr; } }
.intg-lock {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 6px;
  background: var(--primary-dim); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.intg-lock-ic { font-size: 22px; }
.intg-lock-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.intg-lock-text b { font-size: 14px; color: var(--text); }
.intg-lock-text span { font-size: 12px; color: var(--text-secondary); }
.intg-help { margin-top: 6px; border-top: 1px dashed var(--border); padding-top: 10px; }
.intg-help > summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--primary);
  list-style: none; user-select: none;
}
.intg-help > summary::-webkit-details-marker { display: none; }
.intg-help > summary::before { content: '？'; margin-right: 4px; }
.intg-help-list { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.intg-help-list li { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.intg-help-list b { color: var(--text); }

/* 推送选项（分享链接/@） */
.intg-opts {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; background: var(--bg-input);
}
.intg-opt-row { display: flex; align-items: center; gap: 10px; }
.intg-opt-row > label { font-size: 12px; color: var(--text-secondary); font-weight: 600; flex: none; width: 60px; }
.intg-opt-row select, .intg-opt-row input[type="text"] {
  flex: 1; min-width: 0; padding: 6px 10px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-size: 12px; color: var(--text); background: var(--bg-card); outline: none;
}
.intg-opt-row select:focus, .intg-opt-row input[type="text"]:focus { border-color: var(--primary); }
.intg-opt-check {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--text-secondary); font-weight: 600; cursor: pointer; user-select: none;
}
.intg-opt-check input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.em-state { font-size: 12px; font-weight: 600; color: var(--primary); margin-left: 4px; }
.em-state.is-off { color: var(--text-muted); }

/* ==================== 工作台「无会议记录」空态引导 ====================
   空态即新手引导：真实空态（allMeetings=0 且无搜索词）时渲染引导区，
   搜索无结果仍走轻量提示。全部复用现有 token，零新配色。 */

/* 区段内小标题（三步上手 / 更多 AI 能力） */
.wb-sec-sub { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; }
.wb-sec-sub-t { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; white-space: nowrap; }
.wb-sec-sub::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ① 主引导卡 */
.wb-guide {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.wb-guide-badge {
  width: 48px; height: 48px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 10px 20px -6px rgba(47, 91, 191, 0.45);
}
.wb-guide-badge svg { width: 24px; height: 24px; }
.wb-guide-body { flex: 1; min-width: 0; }
.wb-guide-t { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.wb-guide-d { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.6; }
.wb-guide-acts { display: flex; align-items: center; gap: 14px; flex: none; }
.wb-guide-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: #fff; background: var(--primary);
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.wb-guide-btn:hover { background: var(--primary-hover); transform: translateY(-1px); }
.wb-guide-btn svg { width: 14px; height: 14px; }
.wb-guide-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--primary); background: var(--primary-dim);
  border: 1px solid rgba(47, 91, 191, 0.18);
  transition: background var(--duration) var(--ease);
}
.wb-guide-ghost:hover { background: var(--primary-glow); }
.wb-guide-ghost svg { width: 14px; height: 14px; }
.wb-guide-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.wb-guide-link:hover { color: var(--primary); border-color: var(--primary-light); background: var(--primary-dim); }
.wb-guide-link svg { width: 14px; height: 14px; }

/* ② 三步上手 */
.wb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wb-step {
  display: block; padding: 16px 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); text-decoration: none; color: inherit;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.wb-step:hover { transform: translateY(-3px); border-color: var(--primary-light); box-shadow: var(--shadow-md); }
.wb-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wb-step-num {
  width: 22px; height: 22px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 700;
}
.wb-step-t { font-size: 14px; font-weight: 700; color: var(--text); }
.wb-step-d { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }

/* ③ 更多 AI 能力（4 卡：AI 写作 / AI PPT / 图片处理 / 文档处理） */
.wb-cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wb-cap {
  display: block; padding: 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); text-decoration: none; color: inherit;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.wb-cap:hover { transform: translateY(-3px); border-color: var(--primary-light); box-shadow: var(--shadow-md); }
.wb-cap-ico {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; margin-bottom: 10px;
  background: var(--primary-dim); color: var(--primary);
}
.wb-cap-ico svg { width: 17px; height: 17px; }
.wb-cap-t { font-size: 13px; font-weight: 700; color: var(--text); }
.wb-cap-d { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }

/* 空态时隐藏搜索框（对空列表无意义） */
.wb-empty-mode .meeting-list-search-wrap { display: none; }

@media (max-width: 1080px) {
  .wb-cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .wb-guide { flex-direction: column; align-items: flex-start; gap: 14px; }
  .wb-guide-acts { flex-wrap: wrap; }
  .wb-steps { grid-template-columns: 1fr; }
  .wb-cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .wb-cap-grid { grid-template-columns: 1fr; }
}

/* ---- 生成成功触点：结果区「这条记录」入口（AI 写作 / AI PPT / 文档处理 / 图片处理 四处共用） ----
   默认隐藏，生成成功后由各工具页写入 href 并加 .is-on 显示，点击直达该条记录。 */
.gen-result-link {
  flex: none;
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: var(--r-full);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.gen-result-link.is-on { display: inline-flex; }
.gen-result-link:hover { color: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.gen-result-link svg { width: 14px; height: 14px; }

/* ============================================================
   INTRO 五单页 v2 重设计（2026-10-25）：统一到首页 .home 设计语言
   只覆盖配色/层次/交互与新增 chips，页面内容结构不变；五页共用。
   ============================================================ */

/* 1) Hero：首页同款深蓝渐变 + 高光；底部白色渐隐过渡，消除与白底内容的生硬拼接 */
.intro-hero {
  background:
    radial-gradient(34% 46% at 12% 100%, rgba(47,91,191,.22) 0%, transparent 70%),
    radial-gradient(30% 42% at 90% 92%, rgba(47,91,191,.16) 0%, transparent 70%),
    linear-gradient(135deg, #07153f 0%, #0a2f7d 45%, #0a4fd6 100%);
  padding: 56px 0 112px;
}
.intro-hero::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 72px; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(245,248,255,.5) 55%, #fff 100%);
  pointer-events: none;
}
.intro-hero h1 { letter-spacing: -.01em; }
.intro-hero h1 svg {
  width: 48px; height: 48px; padding: 10px; box-sizing: border-box;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  border-radius: 13px;
}
.intro-hero-sub { color: #cfe2ff; }
/* 原版白色光晕圆在深蓝底上会形成灰雾横带，压暗并移到右下角落 */
.intro-hero .intro-hero-glow {
  top: auto; bottom: -30%; right: -6%; opacity: .45;
  background: radial-gradient(circle, rgba(91,141,239,.28), transparent 55%);
}
/* 2.x) 变体 hero 收编：四个变体类（.intro-hero-ppt 等）自带背景且特异性更高，
   会盖过上面的 .intro-hero 深蓝（PPT 变体还带 110% 宽顶部白光斑=浅色横带 bug）。
   统一为深蓝底 + 各页极淡的角落色相点缀；PPT 变体的 ::before 深色压暗也还原为白渐隐。 */
.intro-hero-ppt,
.intro-hero-writing,
.intro-hero-image,
.intro-hero-doc {
  background:
    radial-gradient(34% 46% at 12% 100%, rgba(47,91,191,.22) 0%, transparent 70%),
    radial-gradient(30% 42% at 90% 92%, var(--ent-hue, rgba(47,91,191,.16)) 0%, transparent 70%),
    linear-gradient(135deg, #07153f 0%, #0a2f7d 45%, #0a4fd6 100%);
}
.intro-hero-ppt { --ent-hue: rgba(124,58,237,.13); }
.intro-hero-writing { --ent-hue: rgba(236,72,153,.11); }
.intro-hero-image { --ent-hue: rgba(6,182,212,.13); }
.intro-hero-doc { --ent-hue: rgba(16,185,129,.11); }
.intro-hero-ppt::before {
  top: auto; /* 原规则 inset:0 的 top:0 会与 v2 底部渐隐的 bottom/height 过约束，把白渐隐条顶到 hero 顶部（浅带 bug 根因） */
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(245,248,255,.5) 55%, #fff 100%);
  z-index: 1;
}

/* 2) Hero 功能 chips（首页 hero-chip 同款语言，五页共用） */
.intro-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 26px; padding-top: 30px; position: relative; z-index: 2; }
.intro-hero-chip {
  font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.94);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  padding: 5px 14px; border-radius: 8px;
}
.intro-hero-chip.is-core {
  color: #fff; background: rgba(91,141,239,.55);
  border-color: rgba(207,226,255,.6); box-shadow: 0 4px 14px rgba(10,79,214,.35);
}

/* 3) 卡片交互语言统一：hover 上浮 + 蓝边 + 柔影 */
.intro-feature-card:hover,
.intro-scenario:hover,
.intro-step:hover,
.intro-demo-panel:hover {
  transform: translateY(-4px);
  border-color: #cfe2ff;
  box-shadow: 0 16px 36px rgba(16,32,63,.12);
}
.intro-step,
.intro-scenario,
.intro-demo-panel { transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); }

/* 4) 图标底板统一浅蓝家族（保留各 icon 色相，收在同一底色语言里） */
.intro-feature-icon,
.intro-stat-ico,
.intro-step-icon {
  border: 1px solid rgba(47,91,191,.10);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.55);
}

/* 5) 滚动条在浅色页面更清晰 */
.page-layout--intro ::-webkit-scrollbar-thumb { background: #c3cede; }

/* ==== Intro live demos v2 ==== */
:is(.intro-ppt-page, .intro-writing-page, .intro-image-page, .intro-doc-page) .intro-hero-inner {
  max-width: 1280px;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px;
}
:is(.intro-ppt-page, .intro-writing-page, .intro-image-page, .intro-doc-page) .intro-hero h1 {
  font-size: 40px;
  margin-bottom: 18px;
}
:is(.intro-ppt-page, .intro-writing-page, .intro-image-page, .intro-doc-page) .intro-hero h1 svg {
  width: 48px;
  height: 48px;
}
:is(.intro-ppt-page, .intro-writing-page, .intro-image-page, .intro-doc-page) .intro-hero-sub {
  font-size: 21px;
}
:is(.intro-ppt-page, .intro-writing-page, .intro-image-page, .intro-doc-page) .intro-hero-desc {
  max-width: 550px;
  font-size: 16px;
  line-height: 1.8;
}

.intro-live-demo {
  width: 100%;
  min-width: 0;
  max-width: 600px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 20px;
  background: #fff;
  color: #1d2129;
  font-size: 14px;
  text-align: left;
  box-shadow: 0 42px 100px rgba(0, 8, 30, .46), 0 2px 0 rgba(255, 255, 255, .92) inset;
}

.ild-bar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid #edf1f6;
  background: linear-gradient(180deg, #fdfefe, #f8fafc);
}
.ild-dots { display: flex; gap: 5px; flex: 0 0 auto; }
.ild-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d5dde8; }
.ild-dots i:nth-child(1) { background: #ff8b8b; }
.ild-dots i:nth-child(2) { background: #ffd36e; }
.ild-dots i:nth-child(3) { background: #79d69a; }
.ild-crumb {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: #a0a9b6;
  font-size: 11.5px;
  white-space: nowrap;
}
.ild-crumb b { flex: 0 0 auto; color: #1d2129; font-size: 12.5px; font-weight: 650; }
.ild-crumb-slash { color: #c8d0dc; }
.ild-crumb-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #86909c; }
.ild-save {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: #98a2b2;
  font-size: 10px;
  white-space: nowrap;
}
.ild-save i { width: 5px; height: 5px; border-radius: 50%; background: #00b42a; }
.ild-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid #d8e9ff;
  border-radius: 999px;
  background: #f2f8ff;
  color: #1677ff;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .03em;
  white-space: nowrap;
}
.ild-live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00b42a;
  box-shadow: 0 0 0 3px rgba(0, 180, 42, .12);
  animation: ildPulse 1.8s ease-in-out infinite;
}
@keyframes ildPulse { 50% { opacity: .35; transform: scale(.75); } }
.ild-body { padding: 18px 20px 16px; }

.ild-primary {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #2f8bff, #1677ff);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(22, 119, 255, .2);
  transition: background .2s, transform .2s, opacity .2s, box-shadow .2s;
}
.ild-primary:hover { background: linear-gradient(180deg, #1677ff, #0f63db); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(22, 119, 255, .28); }
.ild-primary:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.ild-primary.is-ghost {
  background: #f2f6fc;
  color: #4e5969;
  border: 1px solid #e5ebf3;
  box-shadow: none;
}
.ild-primary.is-ghost:hover { background: #eaf2ff; color: #1677ff; border-color: #cfe2ff; }

.ild-mini-chip {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid #d8f0de;
  border-radius: 999px;
  background: #f0fff3;
  color: #008a1f;
  font-size: 9.5px;
  font-weight: 650;
  white-space: nowrap;
}
.ild-mini { color: #98a2b2; font-size: 10.5px; font-weight: 500; }
.ild-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ild-panel-head b { color: #1d2129; font-size: 12px; font-weight: 650; }
.ild-panel-head span { color: #98a2b2; font-size: 10px; white-space: nowrap; }

.ild-ai-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, #5b8def, #2f5bbf);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 3px 8px rgba(47, 91, 191, .24);
}
.ild-prompt-copy { flex: 1; min-width: 0; }
.ild-prompt-copy small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #98a2b2;
  font-size: 10.5px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* PPT */
.ild-prompt-block { margin-bottom: 12px; }
.ild-block-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: #4e5969;
  font-size: 11.5px;
  font-weight: 650;
}
.ild-prompt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e3eaf4;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff, #f5f8fc);
}
.ild-prompt {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #1d2129;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}
.ild-prompt::placeholder { color: #a9b2bf; }
.ild-suggest { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ild-suggest-label { color: #98a2b2; font-size: 10.5px; }
.ild-suggest button {
  height: 24px;
  padding: 0 10px;
  border: 1px solid #e7edf5;
  border-radius: 999px;
  background: #fff;
  color: #4e5969;
  font-family: inherit;
  font-size: 10.5px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.ild-suggest button:hover { color: #1677ff; border-color: #cfe2ff; background: #f5f9ff; }
.ild-ppt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 12px;
  align-items: stretch;
}
.ild-outline-panel,
.ild-preview-panel {
  min-width: 0;
  padding: 12px;
  border: 1px solid #edf1f6;
  border-radius: 12px;
  background: #f8fafc;
}
.ild-outline { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.ild-outline-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  background: #fff;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s, transform .25s, border-color .25s, background .25s;
}
.ild-outline-row.is-loading { opacity: .55; background: #f8faff; border-color: #e5efff; }
.ild-outline-row.is-loading .ild-num { animation: ildPulse 1s ease-in-out infinite; }
.ild-num {
  display: grid;
  place-items: center;
  height: 22px;
  border-radius: 6px;
  background: #eef5ff;
  color: #1677ff;
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ild-outline-row b { display: block; color: #1d2129; font-size: 12px; font-weight: 650; line-height: 1.35; }
.ild-outline-row small { display: block; margin-top: 1px; color: #86909c; font-size: 10px; line-height: 1.35; }
.ild-pages { color: #a1a9b5; font-size: 10px; white-space: nowrap; }
.ild-outline-tail {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid #eef2f7;
  color: #98a2b2;
  font-size: 9.5px;
}
.ild-preview-panel { display: flex; flex-direction: column; }
.ild-slide {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 13px;
  border-radius: 9px;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(74, 158, 255, .4), transparent 55%),
    linear-gradient(145deg, #0b2f6b, #0a4fd6 70%, #1677ff);
  color: #fff;
  box-shadow: 0 10px 24px rgba(10, 47, 107, .2);
  display: flex;
  flex-direction: column;
}
.ild-slide::before {
  content: '';
  position: absolute;
  right: -30px;
  bottom: -46px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
}
.ild-slide::after {
  content: '';
  position: absolute;
  right: 18px;
  bottom: -20px;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
}
.ild-slide small { position: relative; z-index: 1; color: #a9c7ff; font-size: 6.5px; font-weight: 700; letter-spacing: .12em; }
.ild-slide b { position: relative; z-index: 1; max-width: 160px; margin-top: 8px; font-size: 15px; font-weight: 750; line-height: 1.2; letter-spacing: -.02em; }
.ild-slide > span { position: relative; z-index: 1; margin-top: 3px; color: #cfe2ff; font-size: 7.5px; }
.ild-slide-chart {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: 86px;
  height: 28px;
  margin-top: auto;
}
.ild-slide-chart i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #9fc8ff, rgba(159, 200, 255, .35)); }
.ild-slide-chart i:nth-child(1) { height: 35%; }
.ild-slide-chart i:nth-child(2) { height: 56%; }
.ild-slide-chart i:nth-child(3) { height: 44%; }
.ild-slide-chart i:nth-child(4) { height: 76%; }
.ild-slide-chart i:nth-child(5) { height: 96%; }
.ild-slide em { position: absolute; right: 12px; bottom: 10px; z-index: 1; color: rgba(255, 255, 255, .55); font-size: 6px; font-style: normal; letter-spacing: .05em; }
.ild-template-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.ild-template-swatch {
  width: 26px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 5px;
  background: linear-gradient(145deg, #0b2f6b 0 38%, #1677ff 38% 68%, #eaf2ff 68%);
  box-shadow: 0 2px 6px rgba(10, 47, 107, .18);
}
.ild-template-row div { flex: 1; min-width: 0; }
.ild-template-row b { display: block; overflow: hidden; color: #1d2129; font-size: 10.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ild-template-row small { display: block; overflow: hidden; color: #98a2b2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ild-template-tag { flex: 0 0 auto; padding: 2px 6px; border-radius: 4px; background: #eef5ff; color: #1677ff; font-size: 8px; font-weight: 650; }
.ild-note { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e9eef5; }
.ild-note span { color: #98a2b2; font-size: 9px; font-weight: 650; }
.ild-note p { margin-top: 3px; color: #4e5969; font-size: 9.5px; line-height: 1.5; }

/* Writing */
.ild-write-tabs-row { display: flex; align-items: center; gap: 10px; }
.ild-tabs {
  flex: 1;
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: #f2f6fb;
}
.ild-tabs button {
  flex: 1;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #86909c;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color .2s, background .2s, box-shadow .2s;
}
.ild-tabs button:hover { color: #1677ff; }
.ild-tabs button.is-active { background: #fff; color: #1677ff; font-weight: 650; box-shadow: 0 1px 4px rgba(22, 119, 255, .12); }
.ild-write-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid #e3eaf4;
  border-radius: 11px;
  background: linear-gradient(180deg, #fbfdff, #f5f8fc);
}
.ild-write-prompt input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #1d2129;
  font-family: inherit;
  font-size: 12.5px;
}
.ild-write-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: 12px;
  margin-top: 10px;
}
.ild-doc-pane {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #edf1f6;
  border-radius: 12px;
  background: #fff;
}
.ild-doc-toolbar {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid #f0f3f7;
  background: #fbfcfe;
  color: #98a2b2;
  font-size: 9.5px;
  white-space: nowrap;
}
.ild-doc-toolbar span.is-active { color: #1677ff; font-weight: 650; }
.ild-doc-toolbar i { flex: 1; }
.ild-paper { min-height: 286px; padding: 14px 16px; }
.ild-paper-kicker { color: #98a2b2; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.ild-paper h3 { margin-top: 7px; color: #1d2129; font-size: 19px; font-weight: 750; line-height: 1.25; letter-spacing: -.02em; }
.ild-paper-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; color: #a1a9b5; font-size: 9px; }
.ild-paper-meta b { color: #4e5969; font-weight: 600; }
.ild-type { margin-top: 10px; color: #4e5969; font-size: 11.5px; line-height: 1.82; }
.ild-type p + p { margin-top: 8px; }
.ild-type.is-typing p:last-child::after {
  content: '';
  display: inline-block;
  width: 1.5px;
  height: 12px;
  margin-left: 2px;
  vertical-align: -2px;
  background: #1677ff;
  animation: ildCaret .9s steps(1) infinite;
}
@keyframes ildCaret { 50% { opacity: 0; } }
.ild-write-side {
  min-width: 0;
  padding: 12px;
  border: 1px solid #edf1f6;
  border-radius: 12px;
  background: #f8fafc;
}
.ild-side-block { margin-top: 12px; }
.ild-side-block > b { color: #4e5969; font-size: 10.5px; font-weight: 650; }
.ild-side-block ol { counter-reset: ildStep; margin: 7px 0 0; padding: 0; list-style: none; }
.ild-side-block li {
  counter-increment: ildStep;
  position: relative;
  margin-top: 6px;
  padding-left: 18px;
  color: #4e5969;
  font-size: 10px;
  line-height: 1.35;
}
.ild-side-block li::before {
  content: counter(ildStep);
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef5ff;
  color: #1677ff;
  font-size: 7.5px;
  font-weight: 700;
}
.ild-tone { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.ild-tone span { padding: 3px 7px; border: 1px solid #e7edf5; border-radius: 999px; background: #fff; color: #86909c; font-size: 9px; }
.ild-tone span.is-active { border-color: #cfe2ff; background: #eef5ff; color: #1677ff; font-weight: 600; }
.ild-ai-tip { margin-top: 12px; padding: 9px; border: 1px solid #dbeafe; border-radius: 8px; background: #f5f9ff; }
.ild-ai-tip span { color: #1677ff; font-size: 8.5px; font-weight: 700; }
.ild-ai-tip p { margin-top: 3px; color: #4e5969; font-size: 9.5px; line-height: 1.5; }

/* Image */
.ild-art-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ild-image-workspace { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 12px; }
.ild-image-tools {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 6px;
  border: 1px solid #edf1f6;
  border-radius: 12px;
  background: #f8fafc;
}
.ild-tool-title { margin-bottom: 2px; color: #a1a9b5; font-size: 8px; font-weight: 650; text-align: center; }
.ild-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px;
  border-radius: 8px;
  color: #86909c;
  font-size: 8.5px;
}
.ild-tool span { font-size: 14px; line-height: 1; }
.ild-tool b { font-weight: 500; }
.ild-tool.is-active { background: #fff; color: #1677ff; box-shadow: 0 2px 8px rgba(22, 119, 255, .12); }
.ild-image-main { min-width: 0; }
.ild-img-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.ild-file { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ild-file-ico {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #eef5ff;
  color: #1677ff;
  font-size: 9px;
  font-weight: 700;
}
.ild-file > span:last-child { min-width: 0; }
.ild-file b { display: block; overflow: hidden; color: #1d2129; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ild-file small { display: block; margin-top: 1px; color: #98a2b2; font-size: 9.5px; }
.ild-compare {
  --pos: 56%;
  position: relative;
  height: 250px;
  overflow: hidden;
  border: 1px solid #e5ecf5;
  border-radius: 12px;
  background: #bfe2ff;
  isolation: isolate;
}
.ild-layer { position: absolute; inset: 0; }
.ild-after { z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ild-scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ild-watermark {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) rotate(-18deg);
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 4px;
  background: rgba(8, 24, 44, .18);
  color: rgba(255, 255, 255, .86);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .06em;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.ild-watermark-small { left: auto; right: 12px; top: auto; bottom: 12px; transform: none; padding: 3px 8px; font-size: 7.5px; letter-spacing: .12em; opacity: .8; }
.ild-img-label {
  position: absolute;
  top: 9px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(6, 18, 36, .56);
  color: #fff;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .02em;
  backdrop-filter: blur(4px);
}
.ild-after .ild-img-label { left: 9px; }
.ild-before .ild-img-label { right: 9px; }
.ild-restored {
  position: absolute;
  left: 9px;
  bottom: 9px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 153, 54, .9);
  color: #fff;
  font-size: 9px;
  font-weight: 650;
}
.ild-restored i { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.ild-zoom-badge {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 3;
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(6, 18, 36, .5);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
}
.ild-divider {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
  pointer-events: none;
}
.ild-divider::after {
  content: '↔';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  color: #1677ff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .26);
}
.ild-range { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ild-image-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ild-tool-pill { padding: 4px 8px; border: 1px solid #e7edf5; border-radius: 6px; background: #fff; color: #86909c; font-size: 9px; }
.ild-tool-pill.is-active { border-color: #cfe2ff; background: #eef5ff; color: #1677ff; font-weight: 600; }
.ild-toolbar-note { margin-left: auto; color: #a1a9b5; font-size: 8.5px; white-space: nowrap; }
.ild-image-actions-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.ild-img-meta { display: flex; flex-wrap: wrap; gap: 6px; color: #98a2b2; font-size: 9px; }
.ild-img-meta span + span::before { content: '·'; margin-right: 6px; color: #c9d2df; }
.ild-img-meta b { color: #1677ff; font-weight: 650; }
.ild-img-actions { display: flex; align-items: center; gap: 6px; }
.ild-text-btn { border: 0; background: none; color: #86909c; font-family: inherit; font-size: 10px; cursor: pointer; }
.ild-text-btn:hover { color: #1677ff; }

/* Doc */
.ild-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff, #f7fafd);
}
.ild-pdf {
  width: 36px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #ffd2d2;
  border-radius: 6px;
  background: #fff;
  color: #f53f3f;
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(245, 63, 63, .08);
}
.ild-file-row > div { flex: 1; min-width: 0; }
.ild-file-row b { display: block; overflow: hidden; color: #1d2129; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ild-file-row small { display: block; margin-top: 2px; color: #86909c; font-size: 10px; }
.ild-doc-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, .78fr); gap: 12px; margin-top: 11px; }
.ild-doc-preview {
  min-width: 0;
  padding: 11px;
  border: 1px solid #edf1f6;
  border-radius: 12px;
  background: #f8fafc;
}
.ild-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ild-page {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 7px;
  border: 1px solid #e9eef5;
  border-radius: 5px;
  background: #fff;
  color: #4e5969;
  transition: opacity .25s, transform .25s, box-shadow .25s, filter .25s;
}
.ild-page::after {
  content: attr(data-page);
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: #b4bcc8;
  font-size: 6.5px;
  font-variant-numeric: tabular-nums;
}
.ild-page-kicker { overflow: hidden; color: #98a2b2; font-size: 5.5px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.ild-page-title { margin-top: 4px; color: #1d2129; font-size: 8.5px; font-weight: 750; line-height: 1.2; }
.ild-page-sub { margin-top: 3px; color: #86909c; font-size: 5.5px; line-height: 1.35; }
.ild-page-date { margin-top: auto; color: #98a2b2; font-size: 5.5px; }
.ild-page-cover { padding: 9px; border-color: #0b2f6b; background: radial-gradient(80% 80% at 100% 0%, rgba(22, 119, 255, .75), transparent 60%), linear-gradient(145deg, #071b43, #0a4fd6); }
.ild-page-cover .ild-page-kicker { color: #9fc8ff; }
.ild-page-cover .ild-page-title { margin-top: 8px; color: #fff; font-size: 9.5px; }
.ild-page-cover .ild-page-sub { color: #cfe2ff; }
.ild-page-cover .ild-page-date { color: #9fc8ff; }
.ild-page-cover::after { color: rgba(255, 255, 255, .45); }
.ild-page-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 7px; }
.ild-page-metrics span { padding: 4px; border-radius: 3px; background: #f5f9ff; color: #86909c; font-size: 5px; line-height: 1.25; }
.ild-page-metrics b { display: block; color: #1677ff; font-size: 10px; line-height: 1.1; }
.ild-page-line { display: block; width: 100%; height: 3px; margin-top: 5px; border-radius: 2px; background: #e8eef6; }
.ild-page-line.w70 { width: 70%; }
.ild-page-line.w75 { width: 75%; }
.ild-page-line.w88 { width: 88%; }
.ild-page-chart { display: flex; align-items: flex-end; gap: 3px; height: 56px; margin-top: 7px; padding: 6px; border-radius: 4px; background: #f5f9ff; }
.ild-page-chart i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #5b8def, #1677ff); }
.ild-page-chart i:nth-child(1) { height: 34%; }
.ild-page-chart i:nth-child(2) { height: 58%; }
.ild-page-chart i:nth-child(3) { height: 42%; }
.ild-page-chart i:nth-child(4) { height: 74%; }
.ild-page-chart i:nth-child(5) { height: 94%; }
.ild-page-legend { display: flex; justify-content: space-between; gap: 2px; margin-top: 4px; color: #98a2b2; font-size: 4.5px; }
.ild-page-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; margin-top: 7px; }
.ild-page-bars span { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #9fc8ff, #1677ff); }
.ild-page-list { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.ild-page-list span { position: relative; width: 92%; height: 6px; border-radius: 2px; background: #eef3fa; }
.ild-page-list span::before { content: ''; position: absolute; left: 3px; top: 1.5px; width: 3px; height: 3px; border-radius: 50%; background: #1677ff; }
.ild-page-list span:nth-child(2) { width: 78%; }
.ild-page-list span:nth-child(3) { width: 86%; }
.ild-page-list span:nth-child(4) { width: 64%; }
.ild-page-list span:nth-child(2)::before { background: #00b42a; }
.ild-page-list span:nth-child(3)::before { background: #ff7d00; }
.ild-page-timeline { display: flex; gap: 2px; margin-top: 9px; }
.ild-page-timeline span { flex: 1; padding: 4px 0; border-radius: 3px; background: #eef5ff; color: #1677ff; font-size: 5px; font-weight: 600; text-align: center; }
.ild-page-timeline span + span { position: relative; }
.ild-page-timeline span + span::before { content: ''; position: absolute; left: -2px; top: 50%; width: 2px; height: 1px; background: #9fc8ff; }
.ild-page.is-pending { opacity: .48; filter: grayscale(.25); }
.ild-page.is-rendering { opacity: .72; transform: translateY(2px); box-shadow: 0 0 0 2px rgba(22, 119, 255, .18); }
.ild-page.is-done { opacity: 1; filter: none; transform: none; }
.ild-progress { height: 3px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: #eef2f7; }
.ild-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5b8def, #1677ff); transition: width .35s ease; }
.ild-doc-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 11px;
  border: 1px solid #edf1f6;
  border-radius: 12px;
  background: #f8fafc;
}
.ild-field { margin-top: 9px; }
.ild-field label { display: block; margin-bottom: 5px; color: #86909c; font-size: 9.5px; font-weight: 600; }
.ild-seg { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: #eef3fa; }
.ild-seg button {
  flex: 1;
  height: 25px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #86909c;
  font-family: inherit;
  font-size: 9.5px;
  cursor: pointer;
  transition: color .2s, background .2s, box-shadow .2s;
}
.ild-seg button.is-active { background: #fff; color: #1677ff; font-weight: 650; box-shadow: 0 1px 4px rgba(22, 119, 255, .12); }
.ild-format { display: flex; gap: 4px; }
.ild-format button {
  flex: 1;
  height: 27px;
  border: 1px solid #e7edf5;
  border-radius: 6px;
  background: #fff;
  color: #86909c;
  font-family: inherit;
  font-size: 9.5px;
  cursor: pointer;
}
.ild-format button.is-active { border-color: #cfe2ff; background: #eef5ff; color: #1677ff; font-weight: 650; }
.ild-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #e7edf5;
  border-radius: 6px;
  background: #fff;
  color: #4e5969;
  font-size: 9.5px;
}
.ild-select b { color: #1d2129; font-weight: 600; }
.ild-doc-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #e9eef5; color: #86909c; font-size: 9.5px; }
.ild-doc-summary b { color: #1677ff; font-size: 12px; }
.ild-doc-side .ild-primary { width: 100%; height: 32px; margin-top: 8px; font-size: 11px; }
.ild-doc-side .ild-primary + .ild-primary { margin-top: 6px; }
.ild-doc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; color: #86909c; font-size: 10px; line-height: 1.4; }
.ild-doc-foot b { color: #1677ff; font-weight: 650; }

.ild-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #f0f3f7;
  color: #86909c;
  font-size: 10.5px;
  line-height: 1.45;
}
.ild-foot b { color: #1677ff; font-weight: 650; }
.ild-foot .ild-foot-right { color: #4e5969; white-space: nowrap; }

.ild-primary:focus-visible,
.ild-suggest button:focus-visible,
.ild-tabs button:focus-visible,
.ild-seg button:focus-visible,
.ild-format button:focus-visible,
.ild-text-btn:focus-visible {
  outline: 2px solid #1677ff;
  outline-offset: 2px;
}
.ild-compare:has(.ild-range:focus-visible) { box-shadow: 0 0 0 2px #1677ff; }

@media (max-width: 1120px) {
  :is(.intro-ppt-page, .intro-writing-page, .intro-image-page, .intro-doc-page) .intro-hero-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  :is(.intro-ppt-page, .intro-writing-page, .intro-image-page, .intro-doc-page) .intro-hero-content {
    max-width: 720px;
  }
  :is(.intro-ppt-page, .intro-writing-page, .intro-image-page, .intro-doc-page) .intro-hero-visual {
    justify-content: flex-start;
    padding: 0;
  }
}

@media (max-width: 768px) {
  :is(.intro-ppt-page, .intro-writing-page, .intro-image-page, .intro-doc-page) .intro-hero h1 {
    font-size: 24px;
    margin-bottom: 12px;
  }
  :is(.intro-ppt-page, .intro-writing-page, .intro-image-page, .intro-doc-page) .intro-hero h1 svg {
    width: 28px;
    height: 28px;
  }
  :is(.intro-ppt-page, .intro-writing-page, .intro-image-page, .intro-doc-page) .intro-hero-sub { font-size: 16px; }
  :is(.intro-ppt-page, .intro-writing-page, .intro-image-page, .intro-doc-page) .intro-hero-desc { font-size: 14.5px; max-width: 540px; }
  :is(.intro-ppt-page, .intro-writing-page, .intro-image-page, .intro-doc-page) .intro-hero-visual { justify-content: center; }
  .intro-hero-visual.has-live-demo {
    display: flex;
    min-width: 0;
    padding: 10px 0 0;
    text-align: left;
  }
  .intro-live-demo { max-width: 600px; margin: 0 auto; }
  .ild-body { padding: 14px; }
}

@media (max-width: 600px) {
  .ild-save { display: none; }
  .ild-bar { padding: 0 14px; }
  .ild-crumb { font-size: 10.5px; }
  .ild-crumb b { font-size: 11.5px; }
  .ild-live { font-size: 9px; padding: 3px 8px; }
  .ild-ppt-grid { grid-template-columns: 1fr; }
  .ild-preview-panel { display: none; }
  .ild-write-grid { grid-template-columns: 1fr; }
  .ild-write-side { display: none; }
  .ild-image-workspace { grid-template-columns: 1fr; }
  .ild-image-tools { display: none; }
  .ild-doc-grid { grid-template-columns: 1fr; }
  .ild-doc-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .ild-doc-side .ild-panel-head { grid-column: 1 / -1; }
  .ild-doc-side .ild-field { margin-top: 8px; }
  .ild-doc-side .ild-field:nth-child(4) { grid-column: 1 / -1; }
  .ild-doc-summary { grid-column: 1 / -1; }
  .ild-doc-side .ild-primary { margin-top: 8px; }
  .ild-doc-side .ild-primary + .ild-primary { margin-top: 8px; }
}

@media (max-width: 430px) {
  .ild-title { font-size: 10.5px; }
  .ild-prompt-row { gap: 8px; padding: 9px; }
  .ild-ai-mark { width: 28px; height: 28px; }
  .ild-prompt { font-size: 12.5px; }
  .ild-suggest { gap: 5px; }
  .ild-outline-row { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 7px; padding: 7px 8px; }
  .ild-outline-row b { font-size: 11.5px; }
  .ild-outline-row small { font-size: 9.5px; }
  .ild-type { font-size: 11px; line-height: 1.76; }
  .ild-paper { min-height: 266px; padding: 13px 14px; }
  .ild-paper h3 { font-size: 18px; }
  .ild-compare { height: 210px; }
  .ild-watermark { font-size: 11px; }
  .ild-img-head { align-items: flex-start; }
  .ild-mini-chip { font-size: 8.5px; }
  .ild-image-actions-row { align-items: flex-end; }
  .ild-toolbar-note { display: none; }
  .ild-page { padding: 6px; }
  .ild-page-title { font-size: 8px; }
  .ild-page-chart { height: 48px; }
  .ild-progress { margin-top: 7px; }
  .ild-foot { font-size: 9.5px; }
}

.app-shell.shell-on .intro-meeting-page .intro-cta {
  margin-left: -40px;
  margin-right: -40px;
}
@media (max-width: 1100px) {
  .app-shell.shell-on .intro-meeting-page .intro-cta {
    margin-left: -20px;
    margin-right: -20px;
  }
}

.intro-ppt-page .intro-stats,
.intro-writing-page .intro-stats,
.intro-image-page .intro-stats,
.intro-doc-page .intro-stats {
  margin-top: -48px;
}

.ild-range { touch-action: pan-y; }
.ild-primary:focus-visible,
.ild-suggest button:focus-visible,
.ild-tabs button:focus-visible,
.ild-seg button:focus-visible {
  outline: 2px solid #1677ff;
  outline-offset: 2px;
}
.ild-compare:has(.ild-range:focus-visible) {
  box-shadow: 0 0 0 2px #1677ff;
}

/* ================================================================
   上手指南页（guide.html）
   作用域限定在 .gd-page（body class="home gd-page"），不污染其它页。
   类名前缀 gd- ；多处「仿界面」mockup 为纯 CSS 复刻，UI 改版时同步维护。
   ================================================================ */

/* ── 共享导航吸顶（utils/site-nav.js 渲染的 .navbar） ──
   两处挂载形态不同，但坑相同：sticky 必须施加在**容器**上，不能只给内部 .navbar。
   因为挂载容器（#siteNav / .sn-scope）的高度恰等于导航栏本身（64px），
   只给 navbar 加 sticky 时它没有任何可吸附行程 → 一滚就跟着走、看着不像置顶导航。
   - 站外静态页 index / enterprise / guide：<div id="siteNav">
   - app 内五个介绍页 #/intro/*：renderNav() 返回 <div class="home sn-scope">
      （介绍页是整页滚动 .page-layout--intro{overflow:visible}，nav 在文档流里会滚走） */
#siteNav,
.home.sn-scope { position: sticky; top: 0; z-index: 120; }

.gd-page { background: #f6f8fc; }

/* ---------- 阅读进度条 ---------- */
.gd-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 999; background: transparent; pointer-events: none; }
.gd-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f5bbf, #8cb8f8); transition: width .12s linear; }

/* ---------- Hero ---------- */
.gd-hero { position: relative; overflow: hidden; padding: 68px 0 60px; background: linear-gradient(180deg, #eef4ff 0%, #f6f8fc 100%); }
.gd-hero-bg { position: absolute; inset: -40% -10% auto auto; width: 720px; height: 720px; background: radial-gradient(circle at 50% 50%, rgba(47,91,191,.14), transparent 62%); pointer-events: none; }
.gd-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 52px; align-items: center; }
.gd-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(47,91,191,.08); border: 1px solid rgba(47,91,191,.16); color: var(--primary); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.gd-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(47,91,191,.14); }
.gd-h1 { margin: 18px 0 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.22; font-weight: 800; letter-spacing: -.02em; color: #10203a; }
.gd-hl { background: linear-gradient(96deg, #2f5bbf, #6f8ff5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gd-lead { margin: 16px 0 0; font-size: 15.5px; line-height: 1.85; color: var(--text-secondary); max-width: 560px; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.gd-chip { padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 12.5px; color: var(--text-secondary); box-shadow: 0 1px 3px rgba(16,32,58,.04); }
.gd-chip-core { background: var(--primary-dim); border-color: rgba(47,91,191,.24); color: var(--primary); font-weight: 700; }
.gd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.gd-btn-lg { height: 50px; padding: 0 28px; font-size: 15px; }
.gd-page .gd-actions .btn-ghost { background: #fff; border: 1px solid var(--border-hover); color: var(--text); }
.gd-page .gd-actions .btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-dim); }
.gd-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; font-size: 13px; color: var(--text-muted); }
.gd-hero-visual { position: relative; }
.gd-hero-copy { min-width: 0; }
.gd-win-hero { box-shadow: 0 28px 60px -22px rgba(16,32,58,.3), 0 2px 8px rgba(16,32,58,.05); }
.gd-hero-badge { margin-top: 10px; text-align: center; font-size: 11.5px; color: #93a2b8; }

/* ---------- 通用：窗口外壳（仿应用界面） ---------- */
.gd-win { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 22px 50px -18px rgba(16,32,58,.24), 0 2px 8px rgba(16,32,58,.05); }
.gd-win-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #f8fafc; border-bottom: 1px solid var(--border); }
.gd-dot { width: 9px; height: 9px; border-radius: 50%; display: block; }
.gd-dot-r { background: #ff5f57; } .gd-dot-y { background: #febc2e; } .gd-dot-g { background: #28c840; }
.gd-win-title { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.gd-win-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--success); background: var(--success-dim); padding: 3px 9px; border-radius: 999px; }
.gd-win-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: gd-blink 1.3s infinite; }
@keyframes gd-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.gd-win-body { padding: 16px; background: linear-gradient(180deg, #fff, #fcfdff); }
.gd-win-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; margin-top: 12px; border-top: 1px dashed var(--border); }
.gd-tag { font-size: 11px; padding: 4px 9px; border-radius: 6px; background: #f1f5f9; color: var(--text-muted); }
.gd-tag-b { background: var(--primary-dim); color: var(--primary); }
.gd-tag-g { background: var(--success-dim); color: #07875c; }
.gd-win-sm { box-shadow: 0 16px 36px -18px rgba(16,32,58,.22); }

/* ---------- Hero 右侧：实时转写演示 ---------- */
.gd-rec-row { display: flex; align-items: center; gap: 14px; }
.gd-rec-mic { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #3d6fd0, #2f5bbf); box-shadow: 0 8px 20px rgba(47,91,191,.34); }
.gd-rec-mic svg { width: 24px; height: 24px; }
.gd-rec-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(47,91,191,.3); animation: gd-ring 1.8s ease-out infinite; }
@keyframes gd-ring { 0% { transform: scale(.86); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.gd-rec-info { min-width: 0; flex: 1; }
.gd-rec-line { display: flex; align-items: center; gap: 10px; }
.gd-timer { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.gd-status { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-dim); padding: 2px 8px; border-radius: 999px; }
.gd-viz { display: flex; align-items: center; gap: 2.5px; height: 22px; margin-left: auto; }
.gd-viz i { width: 3px; border-radius: 2px; background: linear-gradient(180deg, #6f8ff5, #2f5bbf); animation: gd-vizbar 1s ease-in-out infinite; }
.gd-viz i:nth-child(1) { height: 30%; animation-delay: 0s; }
.gd-viz i:nth-child(2) { height: 62%; animation-delay: .1s; }
.gd-viz i:nth-child(3) { height: 90%; animation-delay: .2s; }
.gd-viz i:nth-child(4) { height: 48%; animation-delay: .3s; }
.gd-viz i:nth-child(5) { height: 74%; animation-delay: .15s; }
.gd-viz i:nth-child(6) { height: 100%; animation-delay: .25s; }
.gd-viz i:nth-child(7) { height: 40%; animation-delay: .35s; }
.gd-viz i:nth-child(8) { height: 68%; animation-delay: .05s; }
.gd-viz i:nth-child(9) { height: 88%; animation-delay: .28s; }
.gd-viz i:nth-child(10) { height: 52%; animation-delay: .18s; }
@keyframes gd-vizbar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.gd-rec-meta { margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.gd-rec-meta b { color: var(--text); font-weight: 700; }
.gd-transcript { margin-top: 14px; height: 168px; overflow: hidden; padding: 12px; border-radius: var(--r-md); background: #f8fafc; border: 1px solid var(--border); }
.gd-t-line { margin-bottom: 11px; animation: gd-fadeup .35s ease; }
@keyframes gd-fadeup { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gd-t-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.gd-t-ts { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: #93a2b8; }
.gd-t-text { font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.gd-t-line.active .gd-t-text { color: var(--text); }

/* ---------- 主体布局 ---------- */
.gd-wrap { max-width: 1240px; margin: 0 auto; padding: 46px 24px 70px; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 46px; align-items: start; }
.gd-toc { position: sticky; top: 88px; }
.gd-toc-title { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a3b0c2; margin-bottom: 12px; }
.gd-toc nav { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--border); }
.gd-toc nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-left: -2px; border-left: 2px solid transparent; font-size: 13.5px; color: var(--text-muted); text-decoration: none; transition: all .18s; }
.gd-toc nav a i { font-style: normal; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #b3bdcc; }
.gd-toc nav a:hover { color: var(--primary); background: var(--primary-dim); }
.gd-toc nav a.is-on { color: var(--primary); font-weight: 700; border-left-color: var(--primary); background: var(--primary-dim); }
.gd-toc nav a.is-on i { color: var(--primary); }
.gd-toc-cta { display: block; margin-top: 16px; padding: 10px 14px; border-radius: var(--r-sm); text-align: center; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #1e63c8, #5b8def); text-decoration: none; }
.gd-toc-cta:hover { filter: brightness(1.08); }

.gd-main { min-width: 0; display: flex; flex-direction: column; gap: 62px; }
.gd-sec { scroll-margin-top: 90px; }
.gd-sec-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.gd-sec-no { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3d6fd0, #2f5bbf); box-shadow: 0 8px 18px -6px rgba(47,91,191,.45); }
.gd-sec-head h2 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 800; letter-spacing: -.015em; color: #10203a; }
.gd-sec-head p { margin-top: 6px; font-size: 14.5px; line-height: 1.75; color: var(--text-muted); }

/* ---------- 步骤条 ---------- */
.gd-steps { display: flex; flex-direction: column; gap: 16px; }
.gd-step { display: flex; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color .2s, box-shadow .2s; }
.gd-step:hover { border-color: rgba(47,91,191,.3); box-shadow: 0 10px 24px -14px rgba(47,91,191,.3); }
.gd-step-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--primary); background: var(--primary-dim); border: 1px solid rgba(47,91,191,.22); }
.gd-step-b { min-width: 0; }
.gd-step-b h3 { font-size: 15.5px; font-weight: 700; color: var(--text); }
.gd-step-b p { margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--text-secondary); }
.gd-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--primary); text-decoration: none; }
.gd-link:hover { text-decoration: underline; }
.gd-note { margin-top: 10px; padding: 10px 13px; border-radius: var(--r-xs); background: #fffaf0; border: 1px solid #fdecc8; font-size: 13px; line-height: 1.75; color: #8a6116; }
.gd-note-wide { margin-top: 18px; padding: 14px 18px; border-radius: var(--r-sm); background: var(--primary-dim); border: 1px solid rgba(47,91,191,.18); font-size: 14px; line-height: 1.8; color: #24478f; }
.gd-inline-badge { display: inline-block; padding: 1px 8px; margin: 0 2px; border-radius: 5px; background: #fff; border: 1px solid rgba(47,91,191,.28); font-size: 12.5px; font-weight: 700; color: var(--primary); }

/* ---------- 授权气泡 mockup ---------- */
.gd-mock-sm { margin-top: 12px; max-width: 420px; }
.gd-perm { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 22px -14px rgba(16,32,58,.3); }
.gd-perm-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 17px; background: #f1f5f9; }
.gd-perm-b { flex: 1; min-width: 0; }
.gd-perm-b b { display: block; font-size: 13px; color: var(--text); }
.gd-perm-b small { font-size: 11.5px; color: var(--text-muted); }
.gd-perm-btns { flex: none; display: flex; gap: 7px; }
.gd-perm-ok, .gd-perm-no { padding: 5px 12px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.gd-perm-ok { background: var(--primary); color: #fff; box-shadow: 0 0 0 3px rgba(47,91,191,.18); animation: gd-pulse-soft 2.4s ease-in-out infinite; }
@keyframes gd-pulse-soft { 0%, 100% { box-shadow: 0 0 0 3px rgba(47,91,191,.18); } 50% { box-shadow: 0 0 0 6px rgba(47,91,191,.06); } }
.gd-perm-no { background: #f1f5f9; color: var(--text-muted); }

/* ---------- 三步演示播放器 ---------- */
.gd-player { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 18px 40px -22px rgba(16,32,58,.25); }
.gd-player-nav { position: relative; display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--border); background: #f8fafc; }
.gd-pnav { flex: 1 1 200px; display: flex; align-items: center; gap: 11px; padding: 14px 18px; background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; text-align: left; transition: all .2s; font: inherit; }
.gd-pnav:hover { background: #eef4ff; }
.gd-pnav-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--text-muted); background: #e8eef7; transition: all .2s; }
.gd-pnav-t { min-width: 0; }
.gd-pnav-t b { display: block; font-size: 14px; color: var(--text-secondary); transition: color .2s; }
.gd-pnav-t small { font-size: 11.5px; color: #a3b0c2; }
.gd-pnav.is-on { background: #fff; border-bottom-color: var(--primary); }
.gd-pnav.is-on .gd-pnav-n { background: var(--primary); color: #fff; }
.gd-pnav.is-on .gd-pnav-t b { color: var(--primary); font-weight: 700; }
.gd-player-auto { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }
.gd-player-auto::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--success); animation: gd-blink 1.4s infinite; }
.gd-player-auto em { display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--border); position: relative; overflow: hidden; }
.gd-player-auto em::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--gd-p, 33%); border-radius: 2px; background: linear-gradient(90deg, #2f5bbf, #8cb8f8); transition: width .35s ease; }
.gd-player-auto.is-paused { color: #b3bdcc; }
.gd-player-auto.is-paused::before { background: #cbd5e1; animation: none; }
.gd-player-stage { position: relative; padding: 22px; background: linear-gradient(180deg, #fff, #fbfcff); }
.gd-pstage { display: none; animation: gd-fadein .4s ease; }
.gd-pstage.is-on { display: block; }
@keyframes gd-fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gd-hint-arrow { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--text-muted); }

/* Step 1：录音页 hero */
.gd-rec-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 18px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--border); }
.gd-big-mic { position: relative; flex: none; width: 74px; height: 74px; border-radius: 50%; border: none; display: grid; place-items: center; color: #fff; cursor: pointer; background: linear-gradient(135deg, #4a7ad6, #2f5bbf); box-shadow: 0 12px 28px -8px rgba(47,91,191,.5); }
.gd-big-mic svg { width: 32px; height: 32px; }
.gd-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(47,91,191,.42); animation: gd-ring 2s ease-out infinite; }
.gd-rec-side-info { flex: 1; min-width: 150px; }
.gd-timer-lg { font-size: 26px; }
.gd-rec-sub { margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }
.gd-rec-btns { flex: none; display: flex; gap: 8px; flex-wrap: wrap; }
.gd-rb { padding: 7px 15px; border-radius: 8px; font-size: 12.5px; font-weight: 600; background: #f1f5f9; color: var(--text-muted); border: 1px solid transparent; }
.gd-rb-main { background: var(--primary); color: #fff; }
.gd-rb-stop { background: #fef2f2; color: #b42318; border-color: #fecaca; }

/* Step 2：转写 + 空纪要分栏 */
.gd-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.gd-pane { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.gd-pane-h { padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); border-bottom: 1px solid var(--border); background: #f8fafc; }
.gd-lines { padding: 13px; height: 216px; overflow: hidden; }
.gd-line { padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.72; color: var(--text-secondary); }
.gd-line + .gd-line { margin-top: 4px; }
.gd-ts { display: inline-block; margin-right: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: #93a2b8; }
.gd-line-typing { background: var(--primary-dim); animation: gd-fadeup .3s ease; }
.gd-typing { color: var(--text); }
.gd-caret { display: inline-block; width: 2px; height: 13px; margin-left: 2px; background: var(--primary); vertical-align: -2px; animation: gd-caret 1s step-end infinite; }
@keyframes gd-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.gd-pane-dim { background: #fbfcfe; }
.gd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 216px; text-align: center; }
.gd-empty-i { font-size: 26px; opacity: .55; }
.gd-empty b { font-size: 13px; color: var(--text-secondary); }
.gd-empty small { font-size: 12px; color: #a3b0c2; }

/* Step 3：纪要成果 */
.gd-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 10px; background: #f1f5f9; }
.gd-tab { padding: 7px 13px; border-radius: 7px; font-size: 12.5px; color: var(--text-muted); }
.gd-tab.is-on { background: #fff; color: var(--primary); font-weight: 700; box-shadow: 0 1px 4px rgba(16,32,58,.08); }
.gd-summary { margin-top: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; }
.gd-sum-block + .gd-sum-block { margin-top: 16px; }
.gd-sum-h { margin-bottom: 8px; font-size: 12.5px; font-weight: 800; color: var(--primary); letter-spacing: .02em; }
.gd-sum-block p { font-size: 13.5px; line-height: 1.85; color: var(--text-secondary); }
.gd-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.gd-sum-box { padding: 12px 14px; border-radius: var(--r-sm); background: #f8fafc; border: 1px solid var(--border); }
.gd-sum-i { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.gd-sum-i b { flex: none; width: 18px; height: 18px; border-radius: 5px; display: inline-grid; place-items: center; font-size: 11px; color: #fff; background: var(--primary-light); }
.gd-todo-line { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px; background: var(--success-dim); font-size: 13px; color: #0b6b50; }
.gd-todo-line + .gd-todo-line { margin-top: 6px; }
.gd-tick { flex: none; width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; font-size: 11px; color: #fff; background: var(--success); }

/* ---------- 提示卡 ---------- */
.gd-tipcard { display: flex; gap: 14px; margin-top: 18px; padding: 16px 18px; border-radius: var(--r-md); background: #fffdf5; border: 1px solid #fdecc8; font-size: 14px; line-height: 1.8; color: #7a5a14; }
.gd-tipcard b { color: #6a4d0f; }
.gd-tipcard-ok { background: #f3fbf7; border-color: #c8ebdb; color: #10603f; }
.gd-tipcard-ok b { color: #0b5136; }
.gd-tip-ico { flex: none; font-size: 19px; line-height: 1.4; }

/* ---------- 三卡 / 工具宫格 ---------- */
.gd-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gd-card { padding: 22px 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); transition: transform .22s, box-shadow .22s, border-color .22s; }
.gd-card:hover { transform: translateY(-3px); border-color: rgba(47,91,191,.28); box-shadow: 0 18px 36px -20px rgba(47,91,191,.35); }
.gd-card-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; margin-bottom: 13px; }
.gd-i1 { background: var(--primary-dim); } .gd-i2 { background: var(--success-dim); } .gd-i3 { background: var(--accent-dim); }
.gd-i4 { background: rgba(6,182,212,.1); } .gd-i5 { background: rgba(245,158,11,.12); } .gd-i6 { background: rgba(16,185,129,.1); }
.gd-card h3 { font-size: 16px; font-weight: 700; color: var(--text); }
.gd-card-sub { margin: 4px 0 8px !important; font-size: 12.5px !important; color: var(--primary) !important; font-weight: 600; }
.gd-card p { font-size: 13.5px; line-height: 1.82; color: var(--text-secondary); }
.gd-path { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--text-muted); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.gd-card-flat { border-radius: var(--r-md); }

.gd-out-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gd-out { display: flex; gap: 13px; padding: 16px 17px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); transition: border-color .2s, box-shadow .2s; }
.gd-out:hover { border-color: rgba(47,91,191,.28); box-shadow: 0 12px 26px -18px rgba(47,91,191,.4); }
.gd-out-ico { flex: none; font-size: 20px; line-height: 1.3; }
.gd-out b { display: block; font-size: 14.5px; color: var(--text); }
.gd-out p { margin-top: 4px; font-size: 13px; line-height: 1.75; color: var(--text-muted); }

.gd-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gd-tool { display: block; padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.gd-tool:hover { transform: translateY(-3px); border-color: rgba(47,91,191,.3); box-shadow: 0 18px 34px -20px rgba(47,91,191,.4); }
.gd-tool-ico { display: block; font-size: 26px; margin-bottom: 10px; }
.gd-tool b { display: block; font-size: 15px; color: var(--text); }
.gd-tool small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.gd-tool-go { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.gd-tool-ent { background: linear-gradient(160deg, #f7faff, #eef4ff); border-color: rgba(47,91,191,.22); }

/* ---------- 双栏（04 自动化） ---------- */
.gd-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 30px; align-items: start; }
.gd-two-copy { min-width: 0; }
.gd-steps-compact .gd-step { padding: 15px 17px; }
.gd-two-visual { position: sticky; top: 100px; }
.gd-intg { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fbfcfe; }
.gd-intg + .gd-intg { margin-top: 10px; }
.gd-intg.is-on { background: #fff; border-color: rgba(16,185,129,.34); box-shadow: 0 0 0 2px rgba(16,185,129,.07); }
.gd-intg-row { display: flex; align-items: center; gap: 9px; }
.gd-intg-row b { font-size: 13.5px; color: var(--text); }
.gd-intg-ico { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.gd-ico-fs { background: #3370ff; } .gd-ico-dt { background: #1677ff; } .gd-ico-wc { background: #07c160; } .gd-ico-wh { background: #8b5cf6; }
.gd-switch { margin-left: auto; flex: none; width: 38px; height: 21px; border-radius: 999px; background: #dde4ee; position: relative; transition: background .2s; }
.gd-switch i { position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.gd-switch.gd-on { background: var(--success); }
.gd-switch.gd-on i { transform: translateX(17px); }
.gd-intg-url { margin-top: 8px; padding: 6px 9px; border-radius: 6px; background: #f4f6f9; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-intg-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.gd-intg-state { font-size: 11.5px; color: #a3b0c2; }
.gd-intg-state.gd-on-t { color: #07875c; font-weight: 700; }
.gd-intg-at { margin-left: auto; padding: 2px 8px; border-radius: 5px; font-size: 11px; background: #f1f5f9; color: var(--text-muted); }

/* ---------- 额度板块 ---------- */
.gd-meter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.gd-meter { padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); }
.gd-meter-ico { display: block; font-size: 21px; margin-bottom: 8px; }
.gd-meter b { display: block; font-size: 14px; color: var(--text); }
.gd-meter p { margin-top: 5px; font-size: 12.5px; line-height: 1.7; color: var(--text-muted); }

.gd-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; }
.gd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 720px; }
.gd-table th, .gd-table td { padding: 13px 14px; text-align: center; border-bottom: 1px solid var(--border); }
.gd-table thead th { background: #f8fafc; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.gd-table thead th small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--primary); }
.gd-table tbody th, .gd-table tbody td:first-child { text-align: left; font-weight: 600; color: var(--text); background: #fcfdff; white-space: nowrap; }
.gd-table tbody tr:last-child td, .gd-table tbody tr:last-child th { border-bottom: none; }
.gd-table tbody tr:hover td { background: #fafcff; }
.gd-table td { color: var(--text-secondary); }
.gd-tr-hl td { background: var(--primary-dim) !important; color: var(--primary) !important; font-weight: 700; }
.gd-tr-hl td:first-child { color: var(--primary) !important; }
.gd-table-note { padding: 12px 16px; border-top: 1px dashed var(--border); background: #fbfcfe; font-size: 12.5px; line-height: 1.8; color: var(--text-muted); }

.gd-topup { display: flex; gap: 16px; margin-top: 20px; padding: 20px; border-radius: var(--r-md); background: linear-gradient(120deg, #f4f8ff, #eef4ff); border: 1px solid rgba(47,91,191,.2); }
.gd-topup-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: #fff; box-shadow: 0 6px 16px -8px rgba(47,91,191,.4); }
.gd-topup-b b { font-size: 15.5px; color: #10203a; }
.gd-topup-b p { margin-top: 6px; font-size: 13.5px; line-height: 1.85; color: var(--text-secondary); }
.gd-price { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 17px; font-weight: 800; color: var(--primary); }

.gd-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.gd-rule { padding: 15px 17px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); }
.gd-rule b { display: block; font-size: 13.5px; color: var(--text); }
.gd-rule p { margin-top: 5px; font-size: 12.8px; line-height: 1.75; color: var(--text-muted); }

/* ---------- FAQ ---------- */
.gd-faq { border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.gd-faq-item + .gd-faq-item { border-top: 1px solid var(--border); }
.gd-faq-q { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 20px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); transition: background .18s; }
.gd-faq-q:hover { background: #f8fafc; }
.gd-faq-ar { margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 15px; color: var(--primary); background: var(--primary-dim); transition: transform .22s; }
.gd-faq-item.is-open .gd-faq-q { background: #f8fafc; }
.gd-faq-item.is-open .gd-faq-ar { transform: rotate(45deg); }
.gd-faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.gd-faq-item.is-open .gd-faq-a { max-height: 320px; }
.gd-faq-in { padding: 0 20px 18px; font-size: 13.8px; line-height: 1.9; color: var(--text-secondary); border-top: 1px dashed transparent; }
.gd-faq-in .gd-link { margin-top: 2px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .gd-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 34px; }
  .gd-toc { position: static; margin-bottom: 30px; }
  .gd-toc-title { display: none; }
  .gd-toc nav { flex-direction: row; overflow-x: auto; border-left: none; border-bottom: 2px solid var(--border); padding-bottom: 2px; gap: 4px; }
  .gd-toc nav a { flex: none; margin-left: 0; border-left: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; padding: 8px 12px; }
  .gd-toc nav a.is-on { border-left-color: transparent; border-bottom-color: var(--primary); }
  .gd-toc-cta { position: fixed; right: 16px; bottom: 74px; z-index: 60; margin: 0; box-shadow: 0 10px 24px -8px rgba(47,91,191,.6); }
  .gd-cards3, .gd-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-two { grid-template-columns: minmax(0, 1fr); }
  .gd-two-visual { position: static; order: -1; max-width: 460px; }
  .gd-meter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .gd-hero { padding: 48px 0 44px; }
}
@media (max-width: 720px) {
  .gd-wrap { padding: 26px 16px 56px; }
  .gd-sec-head { gap: 12px; }
  .gd-sec-no { width: 38px; height: 38px; font-size: 13px; }
  .gd-cards3, .gd-tool-grid, .gd-out-grid, .gd-rule-grid, .gd-sum-grid, .gd-split { grid-template-columns: minmax(0, 1fr); }
  .gd-meter-grid { grid-template-columns: minmax(0, 1fr); }
  .gd-step { padding: 15px 16px; }
  .gd-player-stage { padding: 14px; }
  .gd-pnav { flex: 1 1 100%; padding: 11px 14px; }
  .gd-player-auto { display: none; }
  .gd-transcript { height: 140px; }
  .gd-lines, .gd-empty { height: 190px; }
  .gd-topup { flex-direction: column; gap: 12px; }
  .gd-trust { gap: 10px; font-size: 12px; }
  .gd-actions .gd-btn-lg { width: 100%; justify-content: center; }
}

/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .gd-rec-ring, .gd-pulse, .gd-viz i, .gd-caret, .gd-perm-ok, .gd-win-live i { animation: none !important; }
  .gd-pstage, .gd-t-line { animation: none !important; }
  .gd-faq-a { transition: none; }
}

/* ================================================================
   工作台「3 步上手」新手卡片（pages/user.js renderOnboardCard）
   类名前缀 wbo- ；与既有 wb-guide（空列表引导）区分
   ================================================================ */
.wb-onboard {
  position: relative;
  margin: 4px 0 22px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #f6f9ff 0%, #ffffff 55%);
  border: 1px solid rgba(47,91,191,.18);
  box-shadow: 0 12px 28px -22px rgba(47,91,191,.55);
}
.wb-onboard.is-finished { background: linear-gradient(135deg, #f2fbf6 0%, #ffffff 55%); border-color: rgba(16,185,129,.24); }
.wbo-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.wbo-txt { flex: 1; min-width: 220px; }
.wbo-title { font-size: 16px; font-weight: 800; color: #10203a; letter-spacing: -.01em; }
.wbo-sub { margin-top: 4px; font-size: 13px; line-height: 1.65; color: var(--text-muted); }
.wbo-side { flex: none; display: flex; align-items: center; gap: 12px; }
.wbo-prog { display: flex; align-items: center; gap: 9px; }
.wbo-prog-n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--primary); }
.wbo-bar { display: block; width: 76px; height: 5px; border-radius: 999px; background: #e6ecf6; overflow: hidden; }
.wbo-bar em { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f5bbf, #8cb8f8); transition: width .4s ease; }
.wbo-guide { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--primary); background: var(--primary-dim); border: 1px solid rgba(47,91,191,.22); text-decoration: none; white-space: nowrap; }
.wbo-guide:hover { background: #e6edfb; }
.wbo-close { flex: none; width: 24px; height: 24px; border-radius: 7px; border: none; cursor: pointer; background: transparent; color: #a3b0c2; font-size: 13px; line-height: 1; }
.wbo-close:hover { background: #f1f5f9; color: var(--text-secondary); }

.wbo-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.wbo-item { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--border); transition: border-color .2s, box-shadow .2s; }
.wbo-item:hover { border-color: rgba(47,91,191,.28); box-shadow: 0 10px 22px -18px rgba(47,91,191,.5); }
.wbo-item.is-done { background: #fafcfb; border-color: rgba(16,185,129,.24); }
.wbo-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 800; color: var(--primary); background: var(--primary-dim); border: 1px solid rgba(47,91,191,.2); }
.wbo-item.is-done .wbo-n { color: #fff; background: var(--success); border-color: var(--success); }
.wbo-ic { flex: none; font-size: 17px; }
.wbo-b { flex: 1; min-width: 0; }
.wbo-b b { display: block; font-size: 13.5px; color: var(--text); }
.wbo-b small { display: block; margin-top: 2px; font-size: 11.8px; line-height: 1.6; color: var(--text-muted); }
.wbo-go { flex: none; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: var(--primary); text-decoration: none; white-space: nowrap; }
.wbo-go:hover { background: var(--primary-hover); }
.wbo-done-tag { flex: none; font-size: 11.5px; font-weight: 700; color: #0b8a63; background: var(--success-dim); padding: 4px 9px; border-radius: 999px; }
.wbo-fin { margin-top: 14px; text-align: right; }
.wbo-fin-btn { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 12.5px; color: var(--text-muted); }
.wbo-fin-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-dim); }

@media (max-width: 900px) {
  .wbo-list { grid-template-columns: minmax(0, 1fr); }
  .wbo-side { width: 100%; justify-content: space-between; }
  .wbo-item { align-items: flex-start; }
}

/* ============================================================================
   #/share 会议分享页 · 移动端双骨架（方案 C）
   ----------------------------------------------------------------------------
   · 由 pages/user.js 在窄屏给根节点加 .msh-mobile；PC 骨架与 .msh-share 原有
     规则一律不动，这里只覆盖「布局失控」的少数属性，正文/原文/播放器/导出菜单
     的渲染样式继续复用 #detail-page 与 .msh-share 作用域。
   · 选择器统一用 #detail-page.msh-share.msh-mobile 前缀（特异性 1,3,0 起），
     压过 #detail-page .xxx / .msh-share .xxx / @media (max-width:900px) 旧规则。
   · 关键约束：顶层 Tab 用根节点 data-msh-mtab + 外层 pane 切显隐，绝不覆盖
     #msh-sidebar 的 inline display（数据层用它判断有无原文、决定音频写入哪个容器）。
   ============================================================================ */

#detail-page.msh-share.msh-mobile {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  -webkit-text-size-adjust: 100%;
}
/* 极端兜底：若壳因登录态误挂 shell-on，仍让分享页回到整页文档流 */
.app-shell.shell-on:has(#detail-page.msh-mobile) { height: auto; min-height: 100vh; overflow: visible; }
.app-shell.shell-on:has(#detail-page.msh-mobile) .shell-side,
.app-shell.shell-on:has(#detail-page.msh-mobile) .shell-top { display: none; }
.app-shell.shell-on:has(#detail-page.msh-mobile) .shell-main,
.app-shell.shell-on:has(#detail-page.msh-mobile) .shell-scroll { height: auto; min-height: 0; overflow: visible; }

/* ── 顶栏：品牌 + 登录态 + 导出，不换行锁高 ── */
#detail-page.msh-share.msh-mobile .msh-m__topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 8px 14px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: #fff;
  border-bottom: 1px solid var(--border);
}
#detail-page.msh-share.msh-mobile .msh-m__brand {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; text-decoration: none; color: var(--text-title);
}
#detail-page.msh-share.msh-mobile .msh-m__logo {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: linear-gradient(135deg, #818cf8, #4f46e5);
}
#detail-page.msh-share.msh-mobile .msh-m__logo svg { width: 20px; height: 20px; }
#detail-page.msh-share.msh-mobile .msh-m__brand-name { font-size: 15px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; }
#detail-page.msh-share.msh-mobile .msh-m__top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#detail-page.msh-share.msh-mobile .msh-m__top-actions .msh-auth { margin-right: 0; }
#detail-page.msh-share.msh-mobile .msh-m__top-actions .msh-auth-name { display: none; }
#detail-page.msh-share.msh-mobile .msh-m__top-actions .msh-auth .ls-btn svg { display: none; }
#detail-page.msh-share.msh-mobile .msh-m__top-actions .msh-auth .ls-btn { padding: 7px 10px; font-size: 12.5px; }
#detail-page.msh-share.msh-mobile .btn-export { height: 34px; padding: 0 10px; font-size: 13px; }

/* 导出菜单改成底部操作面板：点按友好、不溢出窄屏、避开 hover 态 */
#detail-page.msh-share.msh-mobile .export-menu {
  position: fixed;
  left: 10px; right: 10px; bottom: 0; top: auto;
  width: auto;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 32px rgba(30, 50, 90, .2);
  z-index: 60;
}
#detail-page.msh-share.msh-mobile .export-menu::before { display: none; }
#detail-page.msh-share.msh-mobile .export-dropdown.open .export-menu { display: block; }
#detail-page.msh-share.msh-mobile .em-item { padding: 10px; border-radius: 10px; }
#detail-page.msh-share.msh-mobile .em-item:hover { background: transparent; }

/* ── 标题区 ── */
#detail-page.msh-share.msh-mobile .msh-m__hero {
  padding: 20px 16px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
#detail-page.msh-share.msh-mobile .msh-m__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--primary); margin-bottom: 6px;
}
#detail-page.msh-share.msh-mobile .msh-m__title {
  margin: 0; font-size: 20px; line-height: 1.4; font-weight: 800;
  color: var(--text-title); word-break: break-word; overflow-wrap: anywhere;
}
#detail-page.msh-share.msh-mobile .msh-m__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 10px; font-size: 12px; color: var(--text-muted);
}

/* ── 加载 / 提取码 / 错误：整页流内居中，不再被锁死的一屏高度挤压 ── */
#detail-page.msh-share.msh-mobile .msh-stage {
  flex: none; min-height: 46vh; padding: 28px 16px;
  background: transparent; align-items: flex-start;
}
#detail-page.msh-share.msh-mobile .msh-loading { padding: 48px 0; }
#detail-page.msh-share.msh-mobile .msh-gate,
#detail-page.msh-share.msh-mobile .msh-error { padding: 8px 0; }
#detail-page.msh-share.msh-mobile .msh-gate-card {
  width: 100%; max-width: 420px; padding: 26px 22px; box-sizing: border-box;
}
#detail-page.msh-share.msh-mobile .msh-gate-input,
#detail-page.msh-share.msh-mobile .msh-gate-btn { width: 100%; box-sizing: border-box; }
#detail-page.msh-share.msh-mobile .msh-gate-input { height: 44px; font-size: 16px; }
#detail-page.msh-share.msh-mobile .msh-gate-btn { height: 44px; }

/* ── 内容主体：整页滚动，取消所有内部独立滚动区 ── */
#detail-page.msh-share.msh-mobile .msh-body {
  display: block; flex: none; min-height: 0; overflow: visible;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* 音频常驻在 Tab 之外，切页不丢播放器；两个槽位 JS 二选一写入 */
#detail-page.msh-share.msh-mobile .msh-m__audio { padding: 12px 12px 0; }
#detail-page.msh-share.msh-mobile .msh-m__audio-slot {
  margin: 0 0 12px; padding: 0; background: transparent;
  border: 0; border-radius: 0; box-shadow: none;
}
#detail-page.msh-share.msh-mobile .msh-m__audio-slot:empty { display: none !important; }
/* 数据层两处兜底用 `player-wrap || main-audio` 硬取第一个容器写错误提示，
   即使它被初始 inline display:none 挡住；移动端按「有内容就显示」兜底。 */
#detail-page.msh-share.msh-mobile .msh-m__audio-slot:not(:empty) {
  display: block !important;
  padding: 14px; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-card);
}
#detail-page.msh-share.msh-mobile .recording-controller__actions { flex-wrap: wrap; gap: 8px; }
#detail-page.msh-share.msh-mobile .rc-transport { flex-wrap: wrap; }

/* 顶层「纪要 / 原文」分段切换 */
#detail-page.msh-share.msh-mobile .msh-m__tabs { display: flex; gap: 8px; padding: 12px 12px 0; }
#detail-page.msh-share.msh-mobile .msh-m__tab {
  flex: 1; min-width: 0; height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border-soft); border-radius: 11px;
  background: #fff; color: var(--text-muted);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#detail-page.msh-share.msh-mobile .msh-m__tab svg { width: 15px; height: 15px; flex: 0 0 auto; }
#detail-page.msh-share.msh-mobile .msh-m__tab.is-active {
  color: var(--primary); background: var(--primary-dim);
  border-color: transparent; font-weight: 700;
}

#detail-page.msh-share.msh-mobile .msh-m__panes { display: block; padding: 12px 12px 0; }
#detail-page.msh-share.msh-mobile .msh-m__pane { display: none; min-width: 0; }
#detail-page.msh-share.msh-mobile[data-msh-mtab="summary"] .msh-m__pane--summary,
#detail-page.msh-share.msh-mobile[data-msh-mtab="transcript"] .msh-m__pane--transcript { display: block; }

/* 两栏骨架 → 单列普通块；解除 min-width / max-width / flex / overflow */
#detail-page.msh-share.msh-mobile .detail-main,
#detail-page.msh-share.msh-mobile .left-sidebar {
  flex: none; display: block; width: 100%; min-width: 0; max-width: none;
  overflow: visible; border-radius: 16px;
}
/* PC 的 .detail-main 是带阴影的白色大卡，里面 .gr-card / .md-wrap 又各自成卡；
   再加上 panes 12 + body 12 + summary-graphic 28 + gr-card 24 + doc 24 四层内边距，
   手机上会白卡套白卡、正文被挤到 230px 左右。移动端改为透明容器，
   由内容卡片自己承担视觉层级，并把所有中间层 padding 归零。 */
#detail-page.msh-share.msh-mobile .detail-main {
  background: transparent; box-shadow: none; border-radius: 0; overflow: visible;
}

/* 二级「图文 / 文本」切换：轻量分段控件，与顶层描边胶囊形成主次，
   同时去掉 PC 的下划线式 tab + toolbar 分隔线导致的双 Tab 条观感 */
#detail-page.msh-share.msh-mobile .detail-main__toolbar {
  height: auto; min-height: 0; padding: 0; margin-bottom: 12px;
  border-bottom: 0; justify-content: flex-start;
}
#detail-page.msh-share.msh-mobile .detail-tabs {
  display: flex; width: 100%; height: 38px; padding: 3px; gap: 4px;
  background: #eef1f6; border-radius: 11px;
}
#detail-page.msh-share.msh-mobile .detail-tab {
  flex: 1 1 0; min-width: 0; height: 32px; justify-content: center;
  border-radius: 8px; font-size: 13px; color: var(--text-muted);
}
#detail-page.msh-share.msh-mobile .detail-tab .underline { display: none; }
#detail-page.msh-share.msh-mobile .detail-tab.is-active {
  background: #fff; color: var(--primary); font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
#detail-page.msh-share.msh-mobile .detail-main__body {
  flex: none; height: auto; min-height: 0;
  overflow: visible; padding: 0;
}
#detail-page.msh-share.msh-mobile .detail-main__inner { max-width: 100%; padding-bottom: 0; }

#detail-page.msh-share.msh-mobile .left-sidebar__header {
  height: auto; min-height: 44px; padding: 10px 12px;
  flex-wrap: wrap; gap: 8px;
}
#detail-page.msh-share.msh-mobile .left-sidebar__title { font-size: 14.5px; }
#detail-page.msh-share.msh-mobile .left-sidebar__actions { gap: 6px; }
#detail-page.msh-share.msh-mobile #msh-hl-toggle { display: none; }
#detail-page.msh-share.msh-mobile #msh-copy-all { min-height: 32px; padding: 5px 10px; }
#detail-page.msh-share.msh-mobile .left-sidebar__main { display: block; min-height: 0; }
#detail-page.msh-share.msh-mobile .left-sidebar__content { height: auto; min-height: 0; overflow: visible; }
#detail-page.msh-share.msh-mobile .left-sidebar__content-wrapper { padding: 4px 12px 14px; }

/* 正文排版：表格 / 代码块横向滚动，杜绝撑破视口 */
#detail-page.msh-share.msh-mobile .markdown-body { font-size: 14.5px; line-height: 1.85; overflow-wrap: anywhere; }
#detail-page.msh-share.msh-mobile .markdown-body table,
#detail-page.msh-share.msh-mobile .markdown-body pre { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#detail-page.msh-share.msh-mobile .markdown-body img,
#detail-page.msh-share.msh-mobile .md-wrap img { max-width: 100%; height: auto; }
#detail-page.msh-share.msh-mobile .panel > * { max-width: 100%; }

/* ── 图文纪要：PC 宽屏卡片在手机上逐层收紧 ── */
#detail-page.msh-share.msh-mobile .summary-graphic {
  max-width: 100%; padding: 0; gap: 12px;
}
/* 顶部 .msh-m__hero 已展示会议标题；Hero 卡再渲染一遍 22px 标题会造成重复 */
#detail-page.msh-share.msh-mobile .summary-graphic .gr-hero-title { display: none; }
#detail-page.msh-share.msh-mobile .summary-graphic .gr-hero-card,
#detail-page.msh-share.msh-mobile .summary-graphic .gr-card {
  padding: 14px; border-radius: 14px; box-shadow: none;
}
#detail-page.msh-share.msh-mobile .summary-graphic .gr-head { gap: 10px; margin-bottom: 12px; }
#detail-page.msh-share.msh-mobile .summary-graphic .gr-head-title { font-size: 15px; }
#detail-page.msh-share.msh-mobile .summary-graphic .gr-hero-meta { margin-top: 0; gap: 6px; }
#detail-page.msh-share.msh-mobile .summary-graphic .gr-meta-pill { padding: 3px 10px; font-size: 11.5px; }
#detail-page.msh-share.msh-mobile .summary-graphic .gr-overview { padding: 12px; }
#detail-page.msh-share.msh-mobile .summary-graphic .gr-overview p { font-size: 14px; }
#detail-page.msh-share.msh-mobile .summary-graphic .gr-topic { gap: 10px; padding: 12px 0; }
#detail-page.msh-share.msh-mobile .summary-graphic .gr-tname { font-size: 14px; }
#detail-page.msh-share.msh-mobile .summary-graphic .gr-decide { gap: 8px; }
/* 待办的「任务 / 责任人 / 截止时间」在窄屏一行放不下，允许换行 */
#detail-page.msh-share.msh-mobile .summary-graphic .gr-todo {
  flex-wrap: wrap; gap: 8px; padding: 10px 12px;
}
#detail-page.msh-share.msh-mobile .summary-graphic .gr-todo:hover { border-color: #eef1f6; box-shadow: none; }
#detail-page.msh-share.msh-mobile .summary-graphic .gr-ttask { flex: 1 1 100%; }

/* ── 文本纪要：卡片贴边，头部条独占一行，正文单独留白（去掉双重 padding） ── */
#detail-page.msh-share.msh-mobile .md-wrap {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 0; overflow: hidden;
}
#detail-page.msh-share.msh-mobile .md-head { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
#detail-page.msh-share.msh-mobile .md-head .spacer { display: none; }
#detail-page.msh-share.msh-mobile .md-head .l b { font-size: 13.5px; }
#detail-page.msh-share.msh-mobile .md-head .seg { margin-left: auto; }
#detail-page.msh-share.msh-mobile .seg .summary-text-mode {
  height: 32px; min-height: 32px; padding: 0 12px; font-size: 12.5px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#detail-page.msh-share.msh-mobile .md-wrap > .doc { padding: 14px; }
#detail-page.msh-share.msh-mobile .md-wrap > .md-box {
  padding: 14px; max-height: none; overflow-y: visible; font-size: 12.5px;
}

/* 原文行：收紧留白、去掉触屏 hover 粘滞 */
#detail-page.msh-share.msh-mobile #msh-view-transcript .transcript-list__item { padding: 12px 12px; }
#detail-page.msh-share.msh-mobile #msh-view-transcript .transcript-list__text { font-size: 14px; line-height: 1.85; }
#detail-page.msh-share.msh-mobile #msh-view-transcript .transcript-list.is-copyable .transcript-list__item:hover { background: transparent; }
#detail-page.msh-share.msh-mobile .tl-hl { cursor: default !important; }
/* PC 选区高亮浮层 / 高亮抽屉 append 在 body 上，移动端一律不展示 */
body:has(#detail-page.msh-mobile) #msh-hl-pop,
body:has(#detail-page.msh-mobile) #msh-hl-sidebar,
body:has(#detail-page.msh-mobile) #msh-hl-note-overlay { display: none !important; }

#detail-page.msh-share.msh-mobile .ai-disclaimer {
  justify-content: flex-start; padding: 14px 16px 0;
  font-size: 11px; background: transparent; border-top: 0;
}
#detail-page.msh-share.msh-mobile .ai-disclaimer svg { width: 13px; height: 13px; }

/* 登录弹层在窄屏内留边、输入框不触发 iOS 自动放大 */
#detail-page.msh-share.msh-mobile ~ .msh-modal .msh-modal-card,
body:has(#detail-page.msh-mobile) .msh-modal-card { width: calc(100vw - 32px); max-width: 400px; }
body:has(#detail-page.msh-mobile) .msh-modal input { font-size: 16px; }

/* 旋转到宽屏（骨架不重建）时收敛阅读宽度，避免整行拉太长 */
@media (min-width: 769px) {
  #detail-page.msh-share.msh-mobile .msh-m__audio,
  #detail-page.msh-share.msh-mobile .msh-m__tabs,
  #detail-page.msh-share.msh-mobile .msh-m__panes,
  #detail-page.msh-share.msh-mobile .msh-body > .ai-disclaimer { max-width: 880px; margin-left: auto; margin-right: auto; }
}