/* ─── AI短剧工坊 组件库 ─────────────────────────────
 * 替代 Tabler/Bootstrap 的所有实际使用组件
 * 依赖: design-tokens.css（加载在此文件之前）
 * 对照: Obsidian/方案-Tabler设计体系全览-完整学习笔记-20260617.md
 * ──────────────────────────────────────────────────── */

/* ═════════════════════════════════════════════════════
   卡片变量 + 背部微光（全站统一）
   ═════════════════════════════════════════════════════ */
:root {
  --card-bg: #1a1c23;
  --card-glow: 0 0 20px rgba(99,102,241,0.06);
}
[data-bs-theme="dark"] {
  --card-bg: #1a1c23;
  --card-glow: 0 0 20px rgba(99,102,241,0.06);
}

/* 翻新卡片组件类 — 替代全站 #0c0c0e 硬编码 */
.card-renew {
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: var(--card-glow);
}
.card-renew:hover {
  border-color: rgba(99,102,241,0.3);
  box-shadow: 0 0 25px rgba(99,102,241,0.1);
}

/* ═════════════════════════════════════════════════════
   补充：替换 Tailwind 任意值（bg-[...], text-[Npx]）
   ═════════════════════════════════════════════════════ */
.bg-white-03 { background: rgba(255,255,255,0.03); }
.bg-white-04 { background: rgba(255,255,255,0.04); }
.bg-white-06 { background: rgba(255,255,255,0.06); }
.bg-white-07 { background: rgba(255,255,255,0.07); }
.bg-white-08 { background: rgba(255,255,255,0.08); }
.bg-near-black { background: rgba(20,22,35,0.96); }
.fs-9px { font-size: 9px; }
.fs-10px { font-size: 10px; }
.fs-11px { font-size: 11px; }
.fs-13px { font-size: 13px; }

/* ─── 动画（替代 Tailwind animate-spin）───────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* ─── Tailwind 半透明背景残留 → 补自定义类 ───────────── */
/* White 半透明背景（最常用，覆盖 text-white/N bg-white/N border-white/N） */
.text-white\/85 { color: rgba(255,255,255,0.85); }
.text-white\/75 { color: rgba(255,255,255,0.75); }
.text-white\/70 { color: rgba(255,255,255,0.70); }
.text-white\/60 { color: rgba(255,255,255,0.60); }
.text-white\/50 { color: rgba(255,255,255,0.50); }
.text-white\/45 { color: rgba(255,255,255,0.45); }
.text-white\/40 { color: rgba(255,255,255,0.40); }
.text-white\/30 { color: rgba(255,255,255,0.30); }
.text-white\/20 { color: rgba(255,255,255,0.20); }
.text-white\/10 { color: rgba(255,255,255,0.10); }

.bg-white\/20 { background: rgba(255,255,255,0.20); }
.bg-white\/15 { background: rgba(255,255,255,0.15); }
.bg-white\/10 { background: rgba(255,255,255,0.10); }
.bg-white\/8 { background: rgba(255,255,255,0.08); }
.bg-white\/6 { background: rgba(255,255,255,0.06); }
.bg-white\/5 { background: rgba(255,255,255,0.05); }
.bg-white\/4 { background: rgba(255,255,255,0.04); }
.bg-white\/04 { background: rgba(255,255,255,0.04); }
.bg-white\/03 { background: rgba(255,255,255,0.03); }

.border-white\/20 { border-color: rgba(255,255,255,0.20); }
.border-white\/15 { border-color: rgba(255,255,255,0.15); }
.border-white\/12 { border-color: rgba(255,255,255,0.12); }
.border-white\/10 { border-color: rgba(255,255,255,0.10); }
.border-white\/8 { border-color: rgba(255,255,255,0.08); }
.border-white\/6 { border-color: rgba(255,255,255,0.06); }

.bg-amber-500\/15 { background: rgba(245,158,11,0.15); }
.bg-blue-500\/15 { background: rgba(59,130,246,0.15); }
.bg-blue-500\/10 { background: rgba(59,130,246,0.10); }
.bg-blue-500\/20 { background: rgba(59,130,246,0.20); }
.bg-purple-500\/15 { background: rgba(168,85,247,0.15); }
.bg-red-500\/10 { background: rgba(239,68,68,0.10); }
.bg-yellow-500\/20 { background: rgba(234,179,8,0.20); }
.bg-yellow-500\/5 { background: rgba(234,179,8,0.05); }
.bg-emerald-500\/10 { background: rgba(16,185,129,0.10); }
.bg-emerald-500\/\[0\.04\] { background: rgba(16,185,129,0.04); }
.bg-blue-500\/\[0\.04\] { background: rgba(59,130,246,0.04); }
.bg-purple-500\/\[0\.04\] { background: rgba(168,85,247,0.04); }

/* Tailwind border 半透明残留 */
.border-amber-500\/30 { border-color: rgba(245,158,11,0.30); }
.border-blue-500\/30 { border-color: rgba(59,130,246,0.30); }
.border-blue-500\/15 { border-color: rgba(59,130,246,0.15); }
.border-blue-500\/20 { border-color: rgba(59,130,246,0.20); }
.border-yellow-500\/30 { border-color: rgba(234,179,8,0.30); }
.border-yellow-500\/20 { border-color: rgba(234,179,8,0.20); }
.border-red-500\/30 { border-color: rgba(239,68,68,0.30); }
.border-red-500\/15 { border-color: rgba(239,68,68,0.15); }
.border-emerald-500\/12 { border-color: rgba(16,185,129,0.12); }
.border-emerald-500\/20 { border-color: rgba(16,185,129,0.20); }
.border-blue-500\/\[0\.04\] { border-color: rgba(59,130,246,0.04); }

/* Tailwind text 半透明残留 */
.text-amber-800 { color: #92400e; }
.text-amber-700 { color: #b45309; }

/* text-body/X 半透明 — 替代 Tailwind text-body/XX 任意值 */
.text-body\/10 { color: rgba(255,255,255,0.10); }
.text-body\/15 { color: rgba(255,255,255,0.15); }
.text-body\/20 { color: rgba(255,255,255,0.20); }
.text-body\/25 { color: rgba(255,255,255,0.25); }
.text-body\/30 { color: rgba(255,255,255,0.30); }
.text-body\/35 { color: rgba(255,255,255,0.35); }
.text-body\/40 { color: rgba(255,255,255,0.40); }
.text-body\/45 { color: rgba(255,255,255,0.45); }
.text-body\/50 { color: rgba(255,255,255,0.50); }
.text-body\/60 { color: rgba(255,255,255,0.60); }
.text-body\/70 { color: rgba(255,255,255,0.70); }
.text-body\/75 { color: rgba(255,255,255,0.75); }
.text-body\/80 { color: rgba(255,255,255,0.80); }
.text-body\/85 { color: rgba(255,255,255,0.85); }
.text-body\/90 { color: rgba(255,255,255,0.90); }
.text-blue-300 { color: #93c5fd; }
.text-blue-400 { color: #60a5fa; }
.text-purple-300 { color: #d8b4fe; }
.text-purple-400 { color: #c084fc; }
.text-emerald-400 { color: #34d399; }
.text-yellow-300 { color: #fcd34d; }
.text-yellow-400 { color: #facc15; }
.text-red-400 { color: #f87171; }

/* Tailwind 宽度/间距残留 → Bootstrap 等效 */
.w-100 { width: 100%; }
.w-sm-auto { width: auto; }
@media (min-width: 576px) {
  .w-sm-auto { width: auto !important; }
  .ml-sm-auto { margin-left: auto !important; }
}

/* ─── 补缺失的 Flex 布局工具类（d-flex-column / d-flex-fill / 响应式变体） */
.d-flex-column { flex-direction: column !important; }
.d-flex-row { flex-direction: row !important; }
.d-flex-fill { flex: 1 1 auto !important; }
@media (min-width: 576px) {
  .d-sm-flex-row { flex-direction: row !important; }
}

/* ─── 补缺失的间距/排版工具类（模板中残留的 Tailwind 类名） */
.gap-1\.5 { gap: 0.375rem !important; }
.gap-0 { gap: 0 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
@media (min-width: 576px) {
  .sm\:space-y-4 > * + * { margin-top: 1rem; }
}

/* ─── 补充缺失的 bg-white/XX 半透明背景 ─── */
.bg-white\/90 { background: rgba(255,255,255,0.90); }
.bg-white\/12 { background: rgba(255,255,255,0.12); }
.bg-white\/3  { background: rgba(255,255,255,0.03); }
.bg-white\/2  { background: rgba(255,255,255,0.02); }

/* ─── 补充缺失的 border-white/XX ─── */
.border-white\/30 { border-color: rgba(255,255,255,0.30); }
.border-white\/5  { border-color: rgba(255,255,255,0.05); }

/* ─── 补充缺失的 bg-COLOR/XX 半透明背景 ─── */
.bg-blue-500\/25 { background: rgba(59,130,246,0.25); }
.bg-purple-500\/25 { background: rgba(168,85,247,0.25); }
.bg-green-500\/15 { background: rgba(34,197,94,0.15); }
.bg-yellow-500\/15 { background: rgba(234,179,8,0.15); }
.bg-yellow-500\/10 { background: rgba(234,179,8,0.10); }
.bg-teal-500\/25 { background: rgba(20,184,166,0.25); }
.bg-teal-500\/15 { background: rgba(20,184,166,0.15); }
.bg-rose-500\/25 { background: rgba(244,63,94,0.25); }
.bg-rose-500\/15 { background: rgba(244,63,94,0.15); }
.bg-red-900\/10 { background: rgba(127,29,29,0.10); }
.bg-red-500\/25 { background: rgba(239,68,68,0.25); }
.bg-pink-500\/25 { background: rgba(236,72,153,0.25); }
.bg-pink-500\/15 { background: rgba(236,72,153,0.15); }
.bg-indigo-500\/25 { background: rgba(99,102,241,0.25); }

/* ─── 补充缺失的 border-COLOR/XX ─── */
.border-blue-400\/50 { border-color: rgba(96,165,250,0.50); }
.border-red-800\/60 { border-color: rgba(153,27,27,0.60); }
.border-green-800\/60 { border-color: rgba(22,101,52,0.60); }
.border-purple-400\/25 { border-color: rgba(192,132,252,0.25); }
.border-purple-500\/20 { border-color: rgba(168,85,247,0.20); }
.border-orange-400\/25 { border-color: rgba(251,146,60,0.25); }
.border-green-500\/30 { border-color: rgba(34,197,94,0.30); }
.border-green-400\/25 { border-color: rgba(74,222,128,0.25); }
.border-blue-400\/25 { border-color: rgba(96,165,250,0.25); }
.border-blue-200\/30 { border-color: rgba(191,219,254,0.30); }

/* ─── 补充缺失的 text-COLOR 实色 ─── */
.text-green-400 { color: #4ade80; }
.text-green-500 { color: #22c55e; }
.text-blue-500 { color: #3b82f6; }
.text-red-500 { color: #ef4444; }
.text-amber-500 { color: #f59e0b; }
.text-purple-500 { color: #a855f7; }
.text-teal-400 { color: #2dd4bf; }
.text-indigo-400 { color: #818cf8; }
.text-pink-400 { color: #f472b6; }
.text-rose-400 { color: #fb7185; }
.text-orange-400 { color: #fb923c; }

/* ─── Tailwind Shim：JS 生成的弹窗/卡片中残留的 Tailwind 类名 */
.flex { display: flex; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-\[9999\] { z-index: 9999; }

/* ─── Tailwind border-t-transparent → 补 */
.border-t-transparent { border-top-color: transparent !important; }

.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-7 { width: 1.75rem; }
.w-10 { width: 2.5rem; }
.w-16 { width: 4rem; }
.w-24 { width: 6rem; }
.w-40 { width: 10rem; }
.h-2 { height: 0.5rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-7 { height: 1.75rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-32 { height: 8rem; }
.h-60 { height: 15rem; }
.h-full { height: 100%; }
/* ──────────────────────────────────────────────────── */

/* ═════════════════════════════════════════════════════
   Card 扩展（Tabler .card 已提供基础样式，补 padding）
   ═════════════════════════════════════════════════════ */
.card {
  padding: 1rem;
  background: rgba(22,22,26,0.65) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 50px rgba(210,225,255,0.10), 0 2px 80px rgba(210,225,255,0.04);
}
/* 容器内的卡片 — 较小、更克制的底部发光 */
.card .card {
  padding: 0.75rem;
  background: rgba(28,28,34,0.6) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 1px 6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.03), 0 3px 25px rgba(210,225,255,0.06), 0 1px 40px rgba(210,225,255,0.02);
}
.card:hover {
  background: rgba(255,255,255,0.02);
}
.card .card:hover {
  background: rgba(255,255,255,0.015);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* ─── 深化工作台步骤按钮状态 ─── */
.deepen-btn {
  transition: all 0.25s ease;
  cursor: pointer;
  user-select: none;
}
.deepen-btn-pending {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.35) !important;
}
.deepen-btn-pending:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.55) !important;
}
.deepen-btn-running {
  background: rgba(251,191,36,0.10) !important;
  border-color: rgba(251,191,36,0.35) !important;
  color: #fbbf24 !important;
  animation: deepen-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
  cursor: default;
}
.deepen-btn-done {
  background: rgba(34,197,94,0.10) !important;
  border-color: rgba(34,197,94,0.30) !important;
  color: #86efac !important;
  box-shadow: 0 0 6px rgba(34,197,94,0.15), 0 0 12px rgba(34,197,94,0.05);
}
.deepen-btn-done:hover {
  background: rgba(34,197,94,0.18) !important;
  box-shadow: 0 0 10px rgba(34,197,94,0.20), 0 0 20px rgba(34,197,94,0.08);
}
.deepen-btn-fail {
  background: rgba(239,68,68,0.10) !important;
  border-color: rgba(239,68,68,0.30) !important;
  color: #fca5a5 !important;
}
.deepen-btn-fail:hover {
  background: rgba(239,68,68,0.18) !important;
}
@keyframes deepen-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.02); opacity: 1; }
}
.card-body { padding: var(--space-5); flex: 1; }
.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* ═════════════════════════════════════════════════════
   Focus 状态
   ═════════════════════════════════════════════════════ */
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
input:focus:not(:focus-visible), select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible), button:focus:not(:focus-visible) {
  outline: none;
}

/* ═════════════════════════════════════════════════════
   链接微交互
   ═════════════════════════════════════════════════════ */
.link-muted {
  color: var(--text-tertiary);
  font-size: 12px;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.link-muted:hover {
  color: var(--text-secondary);
}

/* ═════════════════════════════════════════════════════
   字体层级
   ═════════════════════════════════════════════════════ */
.text-page-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.text-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.text-body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
  line-height: 1.5;
}
.text-caption {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--text-tertiary);
}
.text-xs {
  font-size: var(--font-size-xs);
}


/* ═════════════════════════════════════════════════════
   Buttons（按钮）— 只保留颜色覆盖，布局属性交由 Tabler 的 .btn 基类处理
   注意: 独立使用（不带 .btn）的 btn-primary/btn-danger/btn-sm/btn-lg
   仍需包含全部基类属性
   ═════════════════════════════════════════════════════ */
/* 独立使用（不带 .btn）— 包含全部基类属性（Tabler 的副本） */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.4;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  background: var(--color-primary);
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-glow, none);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.4;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  background: var(--color-danger);
  color: #fff;
  box-shadow: none;
}
.btn-danger:hover { background: #dc2626; }

.btn-sm {
  padding: 4px 12px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}
.btn-lg {
  padding: 12px 24px;
  font-size: var(--font-size-base);
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: transparent;
  color: var(--color-text-secondary);
}
.btn-icon:hover {
  background: var(--color-bg-hover);
  color: var(--color-text);
}
.btn-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, #8b5cf6 100%);
  color: #fff;
}
.btn-gradient:hover {
  box-shadow: 0 0 20px rgba(59,130,246,0.35);
}


/* ═════════════════════════════════════════════════════
   Badge（徽章）
   ═════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}
.badge-success {
  background: rgba(34,197,94,0.15);
  color: #4ade80;
}
.badge-warning {
  background: rgba(245,158,11,0.15);
  color: #fbbf24;
}
.badge-danger {
  background: rgba(239,68,68,0.15);
  color: #f87171;
}
.badge-info {
  background: var(--color-primary-subtle);
  color: var(--color-info);
}


/* ═════════════════════════════════════════════════════
   统一弹窗系统 — 覆盖所有弹窗类型
   结构：
     <div class="lh-overlay" id="xxx" style="display:none">
       <div class="lh-modal [lh-modal--error]">
         <div class="lh-modal-icon">❌</div>
         <div class="lh-modal-title">标题</div>
         <div class="lh-modal-text">内容</div>
         <div class="lh-modal-footer">
           <button class="btn btn-secondary">取消</button>
           <button class="btn btn-primary">确认</button>
         </div>
       </div>
     </div>
   变体：
     lh-modal--error     — 错误（红标题+红边框）
     lh-modal--large     — 大尺寸内容（max-width:800px）
     lh-modal--full      — 全屏型（视频）
     lh-modal--left      — 左对齐内容
     lh-modal--flush     — 无 padding（深色场景/视频）
   旧类名保留为别名（逐步淘汰）：
     .modal-overlay, .modal-box, .modal-mask
     .preview-overlay, .preview-box
   ═════════════════════════════════════════════════════ */

/* ─── 遮罩（只定义样式，不设 display — JS 控制） ─── */
.lh-overlay {
  position: fixed; inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  overflow: hidden;
}
/* 弹窗在加载浮层之上 */
.lh-overlay--top { z-index: 100003; }
/* 停止/错误弹窗在 loading 浮层之上时，去掉 backdrop-filter（移动端 backdrop-filter 会创建额外堆叠上下文，导致 z-index 失效） */
#lh-confirm-modal, #lh-error-modal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ─── 弹窗卡片 ─── */
.lh-modal {
  background: #1a1a1e;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1.25rem;
  min-width: 280px;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  animation: slideUp .2s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ─── 内部元素 ─── */
.lh-modal-icon { font-size: 2rem; line-height: 1; }
.lh-modal-title { font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.85); }
.lh-modal-text { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; }
.lh-modal-text b { color: #f87171; }
.lh-modal-footer {
  display: flex; gap: 0.5rem; justify-content: center;
  margin-top: 0.25rem;
}
.lh-modal-footer .btn { min-width: 80px; }

/* ─── 变体 ─── */
/* 错误弹窗 */
.lh-modal--error { border-color: rgba(248,113,113,0.15); }
.lh-modal--error .lh-modal-title { color: #fca5a5; }
/* 大尺寸 */
.lh-modal--large { max-width: 800px; max-height: 70vh; text-align: left; }
.lh-modal--large .lh-modal-text { white-space: pre-wrap; word-break: break-word; }
/* 全屏（视频） */
.lh-modal--full { max-width: 90vw; max-height: 80vh; padding: 0; background: #000; overflow: hidden; }
/* 左对齐 */
.lh-modal--left { text-align: left; }
/* 紧凑（无 gap，自定义内部） */
.lh-modal--flush { gap: 0; padding: 0; }

/* ─── 动画 ─── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ═════════════════════════════════════════════════════
   旧弹窗样式（向后兼容别名，将逐步移除）
   ═════════════════════════════════════════════════════ */

/* modal-overlay → lh-overlay */
.modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }
.modal-box { background: #1a1a1e; border-radius: 16px; padding: 1.25rem; max-width: 400px; width: 90vw; box-shadow: 0 24px 64px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,0.08); }
.modal-title { font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.85); margin-bottom: 0.5rem; }
.modal-body { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 1rem; }
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.modal-input { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 8px 12px; color: #fff; font-size: 14px; outline: none; box-sizing: border-box; }
.modal-input:focus { border-color: #60a5fa; }
.modal-close { background: none; border: none; color: rgba(255,255,255,0.4); font-size: 18px; cursor: pointer; padding: 4px; line-height: 1; }
.modal-close:hover { color: rgba(255,255,255,0.8); }
.modal-mask { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.6); }

/* ─── lh-modal 旧类名别名（JS alert/confirm/prompt 覆写用） ─── */
.lh-modal-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; animation: fadeIn .15s ease; }
.lh-modal-box { background: #1a1a1e; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 1.25rem; min-width: 240px; max-width: 380px; width: 90%; box-shadow: 0 24px 64px rgba(0,0,0,.5); animation: slideUp .2s ease; text-align: center; }
.lh-modal-title { font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.85); margin-bottom: 0.5rem; line-height: 1.5; white-space: pre-line; }
.lh-modal-msg { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; white-space: pre-line; word-break: break-word; }
.lh-modal-input { width: 100%; margin-top: 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: #16161a; color: #fff; font-size: 14px; outline: none; box-sizing: border-box; }
.lh-modal-input:focus { border-color: #60a5fa; }
.lh-modal-btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.lh-modal-btn { padding: 5px 12px; border-radius: 8px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.lh-modal-btn-primary { background: #3b82f6; color: #fff; }
.lh-modal-btn-primary:hover { box-shadow: 0 4px 12px rgba(59,130,246,.4); }
.lh-modal-btn-secondary { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.lh-modal-btn-secondary:hover { background: rgba(255,255,255,0.10); }

/* preview-overlay → lh-overlay 别名 */
.preview-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1rem; overflow: hidden; }
.preview-box { background: #1a1a1e; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; width: 90vw; max-width: 800px; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,.5); overflow: hidden; }
.preview-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.preview-header .btn-close { width: 32px; height: 32px; padding: 6px; border-radius: 8px; opacity: .7; transition: all .15s; margin: 0; position: relative; top: 0; right: 0; }
.preview-header .btn-close:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.preview-body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }

/* 注：步骤页弹窗（preview-* / corner-nav / toast-*）
   由 steps.css 专管，不在此文件中重复定义 */


/* ═════════════════════════════════════════════════════
   Progress Bar（进度条）
   ═════════════════════════════════════════════════════ */
.progress {
  display: flex;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-hover);
  overflow: hidden;
}
.progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width var(--transition-slow);
  font-size: 10px;
  color: #fff;
}
.progress-bar-striped {
  background-image: linear-gradient(
    45deg, rgba(255,255,255,0.15) 25%,
    transparent 25%, transparent 50%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.15) 75%,
    transparent 75%, transparent
  );
  background-size: 1rem 1rem;
}


/* ═════════════════════════════════════════════════════
   Nav / Nav-link（导航）
   ═════════════════════════════════════════════════════ */
.nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.nav-link:hover {
  color: var(--color-text);
  background: var(--color-bg-hover);
}
.nav-link.active {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}
.nav-pills .nav-link { border-radius: var(--radius-full); }
.nav-pills .nav-link.active {
  background: var(--color-primary);
  color: #fff;
}


/* ═════════════════════════════════════════════════════
   Accordion（手风琴/折叠面板）
   ═════════════════════════════════════════════════════ */
.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.accordion-item {
  border-bottom: 1px solid var(--color-border);
}
.accordion-item:last-child { border-bottom: none; }
.accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.accordion-button:hover { background: var(--color-bg-hover); }
.accordion-button::after {
  content: '▾';
  font-size: 10px;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}
.accordion-button.collapsed::after { transform: rotate(-90deg); }
.accordion-body {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.accordion-collapse { display: none; }
.accordion-collapse.show { display: block; }


/* ═════════════════════════════════════════════════════
   Status Icon Labels（状态图标）
   ═════════════════════════════════════════════════════ */
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 1;
}
.status-success { color: var(--color-success); }
.status-warning { color: var(--color-warning); }
.status-danger { color: var(--color-danger); }
.status-info { color: var(--color-info); }


/* ═════════════════════════════════════════════════════
   Alert（提示条）
   ═════════════════════════════════════════════════════ */
.alert {
  position: relative;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.alert-success {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.2);
  color: #4ade80;
}
.alert-warning {
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.2);
  color: #fbbf24;
}
.alert-danger {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.2);
  color: #f87171;
}
.alert-info {
  background: var(--color-primary-subtle);
  border-color: rgba(59,130,246,0.2);
  color: var(--color-info);
}
.alert-dismissible {
  padding-right: 40px;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
}
.alert-dismissible .btn-close:hover { opacity: 1; }


/* ═════════════════════════════════════════════════════
   Spinner（加载中）
   ═════════════════════════════════════════════════════ */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spinner-rotate 0.6s linear infinite;
}
.spinner-sm { width: 14px; height: 14px; border-width: 1.5px; }
.spinner-lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}


/* ═════════════════════════════════════════════════════
   Table（表格）
   ═════════════════════════════════════════════════════ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-striped tbody tr:nth-child(odd) td {
  background: var(--color-bg-hover);
}
.table-hover tbody tr:hover td {
  background: var(--color-primary-subtle);
}
.table-vcenter td { vertical-align: middle; }

/* 注：步骤页弹窗（preview-* / lh-modal-* / corner-nav / toast-*）
   由 steps.css 专管，不在此文件中重复定义 */

/* ═════════════════════════════════════════════════════
   Dropdown（下拉菜单）
   ═════════════════════════════════════════════════════ */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 160px;
  padding: var(--space-2) 0;
  margin-top: 4px;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: none;
}
.dropdown-menu.show { display: block; }
.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.dropdown-item:hover {
  background: var(--color-bg-hover);
  color: var(--color-text);
}


/* ═════════════════════════════════════════════════════
   Design Token 卡片增强 — 映射 design-tokens.css
   用途：为 Tabler .card 添加细腻阴影和 hover 反馈
   ═════════════════════════════════════════════════════ */
.card.card-enhanced {
  border-radius: var(--radius-md, 8px);
  transition: box-shadow var(--transition-base, 200ms ease), border-color var(--transition-base, 200ms ease);
}
.card.card-enhanced:hover {
  border-color: var(--color-border-hover, rgba(255,255,255,0.15));
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.4));
}

/* 章节分隔线 */
.section-divider { border: none; border-top: 1px solid var(--color-border, rgba(255,255,255,0.08)); margin: var(--space-6, 24px) 0; }

/* ═════════════════════════════════════════════════════
   移动端适配
   ═════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .card { padding: var(--space-4); }
  .btn, .btn-primary, .btn-secondary, .btn-danger {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    min-height: 44px;
  }
  .modal-box { width: 95vw; padding: var(--space-5); }
  .alert { padding: var(--space-3) var(--space-4); }
}
@media (max-width: 768px) {
}