/* =========================================================================
   Lumos · AI 算法 · Deep Space Glass (AI SaaS 2026)
   - 深色玻璃 / 紫蓝渐变 / 发光 / Spring 动效
   - Bento Grid + 大圆角 + 大数字
   - 不动业务逻辑 class 命名，纯样式翻新
   ========================================================================= */

:root {
  /* === 基础背景（深空紫蓝） === */
  --bg: #0B1020;
  --bg-2: #16122B;
  --bg-panel: rgba(255, 255, 255, 0.04);
  --bg-panel-2: rgba(255, 255, 255, 0.06);
  --bg-panel-3: rgba(255, 255, 255, 0.08);
  --bg-subtle: rgba(255, 255, 255, 0.03);
  --bg-hover: rgba(255, 255, 255, 0.08);
  --bg-sidebar: rgba(11, 16, 32, 0.72);
  --bg-input: rgba(255, 255, 255, 0.04);

  /* === 边框（半透明白） === */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-glow: rgba(99, 102, 241, 0.4);

  /* === 文字 === */
  --text: #F8FAFC;
  --text-muted: #94A3B8;
  --text-soft: #64748B;
  --text-inverse: #0B1020;

  /* === 主色（Indigo 主、Violet 仅作辅助） === */
  --primary: #6366F1;
  --primary-hover: #4F46E5;
  --primary-2: #4F46E5;
  --primary-3: #3B82F6;
  --primary-soft: rgba(99, 102, 241, 0.10);
  --primary-text: #FFFFFF;
  --primary-glow: rgba(99, 102, 241, 0.20);

  /* === 渐变（去掉饱和 violet 段，indigo → blue） === */
  --gradient-primary: linear-gradient(135deg, #4F46E5 0%, #3B82F6 100%);
  --gradient-primary-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(59, 130, 246, 0.12) 100%);
  --gradient-violet: linear-gradient(135deg, #818CF8, #6366F1);
  --gradient-indigo: linear-gradient(135deg, #818CF8, #4F46E5);
  --gradient-success: linear-gradient(135deg, #34D399, #10B981);
  --gradient-warning: linear-gradient(135deg, #FBBF24, #F59E0B);
  --gradient-danger: linear-gradient(135deg, #F87171, #EF4444);

  /* === 语义色 === */
  --success: #10B981;
  --success-soft: rgba(16, 185, 129, 0.12);
  --success-text: #34D399;

  --warning: #F59E0B;
  --warning-soft: rgba(245, 158, 11, 0.12);
  --warning-text: #FBBF24;

  --danger: #EF4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --danger-text: #F87171;

  /* === 代码 === */
  --code-bg: rgba(255, 255, 255, 0.04);
  --code-text: #E0E7FF;

  /* === 圆角（大圆角） === */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* === 间距 === */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;

  /* === 动效（Spring 感） === */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-base: 240ms;
  --t-slow: 360ms;
  --t-spring: 480ms;

  /* === 阴影（多层：ambient + glow） === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 32px rgba(99, 102, 241, 0.35), 0 8px 24px rgba(99, 102, 241, 0.2);
  --shadow-glow-strong: 0 0 48px rgba(99, 102, 241, 0.5), 0 12px 32px rgba(99, 102, 241, 0.3);

  /* === 布局 === */
  --sidebar-w: 260px;
  --content-max: 1180px;
  --header-h: 64px;
}

/* === 字体 === */
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo,
               Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(at 20% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
    radial-gradient(at 80% 100%, rgba(99, 102, 241, 0.12) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(59, 130, 246, 0.08) 0px, transparent 60%);
  background-attachment: fixed;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11";
  overflow-x: hidden;
}

/* body 上的静态光斑装饰（暗色下保留视觉层次，去掉持续 animation 避免 GPU 重绘 + 视觉飘移） */
body::before, body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  z-index: 0;
}
body::before {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.35), transparent 70%);
  top: -120px; left: -120px;
}
body::after {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent 70%);
  bottom: -160px; right: -160px;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, -40px) scale(1.05); }
  66% { transform: translate(-40px, 50px) scale(0.95); }
}

/* 尊重 prefers-reduced-motion 用户 —— 彻底关动画 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--primary-hover); text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--code-text);
  border: 1px solid var(--border);
}

/* Lucide 图标 */
.lucide {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 1.75;
}

/* ===== 应用框架 ===== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100dvh;
  min-height: 100dvh;      /* 移动端适配地址栏 */
  position: relative;
  z-index: 1;
}
.app.is-hidden { display: none; }

/* ===== 侧边栏（玻璃 + 浮动光晕） ===== */

.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  background: var(--bg-sidebar);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-right: 1px solid var(--border);
  padding: var(--s-6) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  overflow-y: auto;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-3);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--gradient-primary);
  color: var(--primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
  position: relative;
  overflow: hidden;
}
.brand-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  opacity: 0.5;
}
.brand-logo .lucide { width: 16px; height: 16px; stroke-width: 2.25; position: relative; z-index: 1; }

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.side-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  position: relative;
  text-decoration: none;
  border: 1px solid transparent;
}
.side-link:hover {
  background: var(--bg-hover);
  color: var(--text);
  text-decoration: none;
}
.side-link.active {
  background: var(--gradient-primary-soft);
  color: var(--text);
}
.side-link .lucide { width: 16px; height: 16px; }

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

.user-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--gradient-primary);
  color: var(--primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.20);
}

.user-meta { flex: 1; min-width: 0; }
.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.footer-actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.footer-actions button { flex: 1; }

/* ===== 主内容区 ===== */

.content {
  padding: var(--s-6) var(--s-7);
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

.content-header {
  margin-bottom: var(--s-5);
  flex: 0 0 auto;
  animation: slideUp 100ms var(--ease);
}

.page-title {
  font-size: 26px;          /* 全站统一：所有 tab 一致的视觉权重 */
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  background: linear-gradient(135deg, #FFFFFF 0%, #C7D2FE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-desc {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* 顶部装饰：3px 紫蓝细条 + 内容，铺在所有 .page-header-block 之前 */
.page-header-block {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.page-header-block > div { min-width: 0; }

.tab-content {
  display: none;
  animation: slideUp 100ms var(--ease);
}
.tab-content.active {
  display: block;
}

/* ===== 卡片（玻璃 + 大圆角 + 多层阴影 + Hover 浮起） ===== */

.card {
  background: var(--bg-panel);
  /* backdrop-filter blur 24→14px：暗色下 blur 计算昂贵 + 视觉上几乎看不出差异；
     配合 will-change:transform 让 GPU 预分配合成层 */
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-md);
  position: relative;
  /* transition 仅作用于 hover 交互（border/transform/box-shadow），不包含 background/opacity */
  transition: border-color 120ms var(--ease),
              transform 120ms var(--ease),
              box-shadow 120ms var(--ease);
  will-change: transform;
  /* 去掉 fadeInUp 动画 —— opacity 0→1 是"颜色延迟"的根因，改由父元素做 100ms slide 即可 */
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0.5;
}
.card.is-interactive {
  cursor: pointer;
}
.card.is-interactive:hover {
  border-color: var(--border-glow);
  transform: translateY(-4px);
  background: var(--bg-panel-2);
  box-shadow: var(--shadow-lg), 0 0 32px rgba(99, 102, 241, 0.18);
}

/* 空状态：统一全站"暂无数据"模式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-10) var(--s-6);
  text-align: center;
  min-height: 240px;
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: var(--s-2);
  box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.4);
}
.empty-state-icon i { width: 28px; height: 28px; }
.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.empty-state-hint {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.55;
}

.hint-text {
  color: var(--text-subtle);
  font-size: 12px;
  font-weight: normal;
}
.empty-state-cta {
  margin-top: var(--s-3);
}

/* 卡片头部 / 操作区槽位 */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.card-actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  letter-spacing: -0.005em;
}
.card-title .lucide {
  width: 18px;
  height: 18px;
  color: var(--primary);
  filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.4));
}

/* Section 卡片 */
.section {
  background: var(--bg-panel);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-md);
  animation: slideUp 100ms var(--ease);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--s-5);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  letter-spacing: -0.005em;
}
.section-title .lucide {
  width: 18px;
  height: 18px;
  color: var(--primary);
  filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.4));
}

/* ===== 表单 ===== */

.form-row {
  margin-bottom: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: slideUp 100ms var(--ease);
}
/* Form card：在 .card 内部放 form 时的纵向节奏控制 */
.form-card .form-row:last-child { margin-bottom: 0; }
.form-card .form-actions { margin-top: var(--s-6); }

/* ===========================================================
   Problem Card（explanation/analyze/review 统一形态）
   =========================================================== */

.problem-card {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 右上角"自动 / 手动"小徽章 */
.problem-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid rgba(99, 102, 241, 0.20);
}
.problem-mode-badge i { width: 12px; height: 12px; }

/* ====== 配置卡内的状态横幅：合并自独立的"API Key 状态"卡 ====== */
.config-status-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%);
  border: 1px solid rgba(99, 102, 241, 0.18);
  margin-top: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.config-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gradient-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
  flex-shrink: 0;
  position: relative;
}
.config-status-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--gradient-primary);
  opacity: 0.4;
  animation: pulseRing 2.2s var(--ease) infinite;
}
.config-status-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.config-status-label {
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.config-status-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.config-status-value.is-success { color: var(--success-text); }
.config-status-value.is-danger { color: var(--danger-text); }
.config-status-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
@keyframes pulseRing {
  0%   { transform: scale(0.85); opacity: 0.55; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}

/* ====== 知识点雷达：单卡（沿用全站 problem-card 模式） ====== */
/* 自定义样式尽量复用全站组件（.card / .problem-card / .zone-source / .stat-card /
   .bento / .empty-state / .section-title），本页仅补充必要的微调。 */

/* 雷达历史首项 featured：四边对称 + 自然石板色玻璃背景（无左侧渐变条） */
.radar-history-item.is-latest {
  background: rgba(148, 163, 184, 0.07);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.04) inset;
}

/* 首项 eyebrow 徽章：当前最新 */
.radar-history-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.radar-history-eyebrow i { width: 11px; height: 11px; }

/* 首项 featured body：大数字 + 强/弱项计数 + token */
.radar-history-featured {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background:
    linear-gradient(135deg, rgba(148, 163, 184, 0.08) 0%, rgba(100, 116, 139, 0.04) 100%);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.radar-history-avg-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.radar-history-avg-num {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #475569 0%, #64748B 50%, #94A3B8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  padding-left: 12px;
}
.radar-history-avg-num::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #64748B 0%, #94A3B8 100%);
}
.radar-history-avg-of {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.radar-history-avg-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.radar-history-avg-stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.radar-history-avg-stats .stat-strong { color: var(--success-text); font-weight: 600; }
.radar-history-avg-stats .stat-weak { color: var(--danger-text); font-weight: 600; }
.radar-history-avg-stats .stat-divider { color: var(--text-soft); }
.radar-history-avg-token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.radar-history-avg-token i { width: 11px; height: 11px; }
.radar-history-avg-token.is-cached { color: var(--warning-text); }

@media (max-width: 540px) {
  .radar-history-featured { padding: 8px 10px; gap: 10px; }
  .radar-history-avg-num { font-size: 28px; }
  .radar-history-avg-meta { font-size: 11px; }
}

/* ====== 知识点雷达：掌握度列表 + 历史时间线 ====== */

/* 三档掌握度色：低/中/高（= danger / warning / success） */
.mastery-list { display: flex; flex-direction: column; gap: 10px; }
.mastery-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.mastery-row:hover { border-color: rgba(99, 102, 241, 0.30); }
.mastery-row.level-low  { border-left: 3px solid var(--danger); }
.mastery-row.level-mid  { border-left: 3px solid var(--warning); }
.mastery-row.level-high { border-left: 3px solid var(--success); }

.mastery-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  flex-wrap: wrap;
}
.mastery-name {
  font-weight: 600;
  color: var(--text);
  flex: 0 0 auto;
  min-width: 60px;
}
.mastery-stars {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--warning);
  font-family: var(--font-sans);
}
.mastery-row.level-high .mastery-stars { color: var(--success); }
.mastery-row.level-low  .mastery-stars { color: var(--danger); }
.mastery-score-num {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-weight: 500;
}
.mastery-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}
.mastery-delta.up   { background: var(--success-soft); color: var(--success-text); }
.mastery-delta.down { background: var(--danger-soft); color: var(--danger-text); }
.mastery-delta i { width: 12px; height: 12px; }

.mastery-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-subtle);
  overflow: hidden;
  position: relative;
}
.mastery-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gradient-primary);
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mastery-row.level-low  .mastery-bar-fill { background: var(--gradient-danger); }
.mastery-row.level-mid  .mastery-bar-fill { background: var(--gradient-warning); }
.mastery-row.level-high .mastery-bar-fill { background: var(--gradient-success); }

/* 掌握度空态 */
.mastery-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 14px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  font-size: 13px;
}
.mastery-empty i { width: 16px; height: 16px; opacity: 0.6; }

/* 「最新」徽章 */
.problem-mode-badge.is-latest {
  background: var(--success-soft);
  color: var(--success-text);
  border-color: rgba(16, 185, 129, 0.20);
}
/* 「最新但来自缓存」徽章 — 与 is-latest 同样位置，用 warning 色区分 */
.problem-mode-badge.is-cached {
  background: var(--warning-soft);
  color: var(--warning-text);
  border-color: rgba(245, 158, 11, 0.25);
}
.problem-mode-badge.is-latest.is-cached {
  background: linear-gradient(135deg, var(--warning-soft) 0%, rgba(99, 102, 241, 0.10) 100%);
}

/* ====== 雷达历史时间线 ====== */
.radar-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.radar-history-list::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--border);
  border-radius: 999px;
}

.radar-history-item {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 10px 12px 12px 0;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.radar-history-item:hover,
.radar-history-item.is-hover {
  background: var(--bg-hover);
  transform: translateX(2px);
  border-color: rgba(139, 92, 246, 0.20);
}
.radar-history-item { border: 1px solid transparent; }
.radar-history-item::after {
  content: "查看详情 →";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  font-size: 11.5px;
  color: var(--text-soft);
  opacity: 0;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  pointer-events: none;
  font-weight: 500;
}
.radar-history-item:hover::after,
.radar-history-item.is-hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.radar-history-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 2px solid var(--primary);
  margin-top: 6px;
  margin-left: 4px;
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--bg-subtle);
}
.radar-history-item.is-latest .radar-history-dot {
  background: linear-gradient(135deg, #475569 0%, #64748B 100%);
  border-color: transparent;
  box-shadow:
    0 0 0 3px var(--bg-subtle),
    0 0 10px rgba(100, 116, 139, 0.45);
}
.radar-history-dot.is-cached {
  background: var(--bg-panel);
  border: 2px dashed var(--warning);
  box-shadow: 0 0 0 3px var(--bg-subtle);
}
.radar-history-item.is-latest .radar-history-dot.is-cached {
  background: var(--warning-soft);
  border: 2px solid var(--warning);
  box-shadow: 0 0 0 3px var(--warning-soft);
}

/* 首项视觉差异化全部由 .is-latest 接管（不再依赖 :first-child） */

/* 缓存命中徽章：紧跟在 trend 后面 */
.radar-cached-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning-text);
  border: 1px solid rgba(245, 158, 11, 0.20);
  letter-spacing: 0.02em;
  margin-left: 4px;
}
.radar-cached-badge i { width: 11px; height: 11px; }

.radar-history-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.radar-history-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.radar-history-time {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.radar-history-meta { color: var(--text-muted); font-size: 12px; }
.radar-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: auto;
}
.radar-trend.up   { background: var(--success-soft); color: var(--success-text); }
.radar-trend.down { background: var(--danger-soft); color: var(--danger-text); }
.radar-trend i { width: 12px; height: 12px; }

.radar-history-avg {
  font-size: 12.5px;
  color: var(--text-muted);
}
.radar-history-avg strong {
  color: var(--text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.radar-history-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.radar-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.radar-history-chip.h { background: var(--success-soft); color: var(--success-text); border-color: rgba(16,185,129,0.18); }
.radar-history-chip.m { background: var(--warning-soft); color: var(--warning-text); border-color: rgba(245,158,11,0.18); }
.radar-history-chip.l { background: var(--danger-soft); color: var(--danger-text); border-color: rgba(239,68,68,0.18); }
.radar-history-more {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-soft);
}

/* 历史空态 */
.radar-history-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 14px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  font-size: 13px;
}
.radar-history-empty i { width: 16px; height: 16px; opacity: 0.6; }

/* ====== 雷达快照详情弹窗 ====== */
.modal-content-radar-snapshot {
  /* width 阶梯式：跟视口联动 + 大屏 ceiling；位置必须在 .modal-content 之后才能覆盖 */
  /* 见 style.css 下方专属块 */
}
.radar-snapshot-modal-body h1,
.radar-snapshot-modal-body h2,
.radar-snapshot-modal-body h3 {
  font-size: 15px;
  margin: 14px 0 8px;
  color: var(--text);
  font-weight: 600;
}
.radar-snapshot-modal-body h1 { font-size: 16px; }
.radar-snapshot-modal-body h2 { font-size: 15px; }
.radar-snapshot-modal-body h3 { font-size: 14px; }
.radar-snapshot-modal-body p { margin: 6px 0; color: var(--text); }
.radar-snapshot-modal-body ul,
.radar-snapshot-modal-body ol { margin: 6px 0; padding-left: 22px; color: var(--text); }
.radar-snapshot-modal-body li { margin: 3px 0; }
.radar-snapshot-modal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
}
.radar-snapshot-modal-body th,
.radar-snapshot-modal-body td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.radar-snapshot-modal-body th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.radar-snapshot-modal-body code {
  background: var(--bg-panel);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.radar-snapshot-modal-body blockquote {
  border-left: 3px solid var(--primary);
  padding: 6px 12px;
  margin: 8px 0;
  background: var(--primary-soft);
  border-radius: 4px;
  color: var(--text-muted);
}
.radar-snapshot-modal-body strong { color: var(--text); font-weight: 600; }

.radar-snapshot-modal-loading,
.radar-snapshot-modal-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 16px;
  color: var(--text-muted);
  font-size: 13px;
}
.radar-snapshot-modal-loading i { animation: spin 1s linear infinite; }
@keyframes spin {
  to { transform: rotate(360deg); }
}
.radar-snapshot-modal-error { color: var(--danger-text); }
.radar-snapshot-modal-error i { width: 16px; height: 16px; }

/* 段（zone）：3 段分区视觉 */
.zone {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  position: relative;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
/* 各段不同色相，强化"段"心智模型 */
.zone-source  { background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(59, 130, 246, 0.03) 100%); }
.zone-context { background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); }
.zone-input   { background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(99, 102, 241, 0.04) 100%); border-color: rgba(139, 92, 246, 0.2); }
.zone-code    { background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, rgba(99, 102, 241, 0.03) 100%); }

/* 段头 label：小圆点 + 文字 */
.zone-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.zone-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}
.zone-dot-1 { background: #6366F1; }   /* indigo  - 问题源 */
.zone-dot-2 { background: #94A3B8; }   /* slate   - 上下文 */
.zone-dot-3 { background: #8B5CF6; }   /* violet  - 手动粘贴 */
.zone-dot-4 { background: #10B981; }   /* emerald - 代码 */

/* 段内 form-row 收紧 */
.zone .form-row { margin-bottom: 12px; }
.zone .form-row:last-child { margin-bottom: 0; }

/* 段内 oj-picker 去掉自己的外边距，融入段 */
.zone .oj-picker {
  margin-bottom: 0;
  border: none;
  background: rgba(255, 255, 255, 0.05);
}

/* 段横向 2 列（语言 + 评测结果） */
.zone-grid {
  display: grid;
  gap: 16px;
}
.zone-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
  .zone-grid-2 { grid-template-columns: 1fr; }
}

/* 手动模式专属视觉：仅当 .oj-picker.is-manual 时，is-manual-only 段才显示。
   默认（非 manual）下隐藏整个 .zone-input */
.problem-card .zone-input { display: none; }
.problem-card.has-manual .zone-input { display: flex; }

/* 当 oj-picker.is-manual 时，problem-card 加 .has-manual 类，
   并把 zone-source 改成"已禁用"视觉 */
.problem-card.has-manual .zone-source {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.04) 0%, rgba(99, 102, 241, 0.03) 100%);
  border-color: rgba(139, 92, 246, 0.18);
}
.problem-card.has-manual .zone-source .oj-picker {
  background: rgba(139, 92, 246, 0.05);
}

/* CTA 按钮：更大，更显眼 */
.btn-cta {
  height: 48px;
  padding: 0 28px;
  font-size: 14.5px;
  letter-spacing: 0.01em;
}

/* Hint 在 problem-card 内不上 margin-top，跟 card-head 配齐 */
.problem-card .hint { margin-top: 0; }

/* 移动端：problem-card 收紧 padding */
@media (max-width: 640px) {
  .problem-card { padding: 18px 18px 22px; gap: 14px; }
  .zone { padding: 14px; }
}

/* OJ 来源 picker：浅底卡片，内含 source select + LC 搜索框（默认隐藏） */
.oj-picker {
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.03) 100%);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: slideUp 100ms var(--ease);
  position: relative;
  /* 不再 overflow:hidden，让下拉/最近行/信息卡可向下方延伸（v25 升级） */
}
.oj-picker::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary) 50%, transparent);
  opacity: 0.4;
  pointer-events: none;
}
.oj-picker .form-row { margin-bottom: var(--s-3); }
.oj-picker .form-row:last-child { margin-bottom: 0; }
.oj-picker .form-row.oj-only { animation: fadeIn var(--t-slow) var(--ease) backwards; }

/* 横向布局：select + 数字输入框 + 编辑按钮 并排 —— 不写自定义样式，
   让所有控件走全局 input/select token（padding/font-size/border/focus 全一致） */
.oj-picker-row {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: var(--s-3);
  align-items: stretch;
  margin-bottom: var(--s-3);
}
.oj-picker-row > * { margin: 0; }
/* OJ 题号输入框：洛谷模式允许字母，等宽字体让题号更易读 */
.oj-search {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.oj-search::placeholder { letter-spacing: 0; }
/* manual 模式下隐藏题号输入框和提示按钮（手动粘贴场景不需要提示） */
.oj-picker.is-manual .oj-search,
.oj-picker.is-manual .oj-hint-btn { display: none !important; }
.oj-hint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 200ms var(--ease);
  position: relative;
}
.oj-hint-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg-panel);
}
.oj-hint-btn:focus-visible {
  outline: 2px solid var(--primary-glow);
  outline-offset: 1px;
}
.oj-hint-btn i { width: 14px; height: 14px; }

/* Hover tooltip：portal 到 body，绕过 .card 的 backdrop-filter 层 */
.oj-hint-tooltip {
  position: fixed;
  z-index: 1000;
  background: rgba(20, 18, 38, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #F8FAFC;
  width: 260px;
  max-width: 92vw;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(139, 92, 246, 0.2);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.oj-hint-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.oj-hint-tooltip strong { color: var(--primary); font-weight: 600; }
.oj-hint-tooltip code {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.oj-hint-tooltip-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(20, 18, 38, 0.96);
  transform: rotate(45deg);
}
.oj-hint-tooltip[data-pos="bottom"] .oj-hint-tooltip-arrow {
  top: -5px;
  border-top: 1px solid rgba(139, 92, 246, 0.3);
  border-left: 1px solid rgba(139, 92, 246, 0.3);
}
.oj-hint-tooltip[data-pos="top"] .oj-hint-tooltip-arrow {
  bottom: -5px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.3);
  border-right: 1px solid rgba(139, 92, 246, 0.3);
}
.oj-status {
  /* 状态条已移除（v6 砍掉 catalog 后无内容可显示），保留类名防止旧 DOM 引用报错 */
  display: none;
}

/* 当 OJ 来源 = 非 manual 时，给部分手动粘贴卡片打 lc-hide 类，默认隐藏。
   切换到 manual 模式时由 JS 给 .card 加 .is-manual 来恢复显示。
   类名沿用 lc-hide 是历史原因（实际对 LeetCode/洛谷 都生效）。 */
.lc-hide { display: none !important; }
.card.is-manual .lc-hide { display: flex !important; }
.oj-picker.is-manual .oj-hint-btn { display: none; }

/* 在 manual 模式下，标题字段从 hidden 升级为可见 input */
.card.is-manual input[type="hidden"][id$="-title"] {
  display: block !important;
  width: 100%;
  height: 44px;
  padding: 11px var(--s-4);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  color: var(--text);
}

/* 移动端 picker 改成竖排 */
@media (max-width: 640px) {
  .oj-picker-row { grid-template-columns: 1fr; }
  .oj-picker-row .oj-source { width: 100%; }
  .oj-picker.is-manual .oj-picker-row { grid-template-columns: 140px; }
}

/* ============== v25 OJPicker 升级：模糊搜索下拉 + 最近 + 选中卡 ============== */

/* 联想下拉：portal 到 body，position: fixed 由 JS 计算坐标
   原因：.card 祖先有 backdrop-filter，会形成新的 stacking context
   困住 position: fixed 子元素，导致层级永远被 custom-select cs-panel（z-index: 9999）盖住。
   沿用 custom-select 的 portal 套路，z-index 用 9998 留出 cs-panel 的层级。
   */
.oj-picker-dropdown {
  position: fixed;
  z-index: 9998;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  max-height: 320px;
  overflow-y: auto;
  animation: ojDropdownIn 160ms var(--ease);
  padding: 4px;
}
[data-theme="dark"] .oj-picker-dropdown {
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
}
@keyframes ojDropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.oj-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  transition: background 120ms var(--ease);
}
.oj-dropdown-item:hover,
.oj-dropdown-item.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.oj-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.oj-item-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.oj-item-title {
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oj-item-diff {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.oj-dropdown-empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
}

/* 最近题号 chip 行 */
.oj-picker-recent {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.oj-recent-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-right: 2px;
}
.oj-recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: all 160ms var(--ease);
  max-width: 100%;
}
.oj-recent-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.oj-recent-source {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.oj-recent-id {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* 选中信息卡：题目信息 + 操作 */
.oj-picker-info {
  margin-top: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--primary-soft) 0%, transparent 100%);
  border: 1px solid var(--primary);
  border-radius: var(--r-md);
  animation: ojInfoIn 200ms var(--ease);
}
@keyframes ojInfoIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.oj-info-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.oj-info-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.oj-info-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.oj-info-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oj-info-diff {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--bg-panel);
  white-space: nowrap;
  flex-shrink: 0;
}
.oj-info-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.oj-info-actions .btn-sm { font-size: 12px; padding: 4px 10px; }
.oj-info-actions .btn-sm i { width: 12px; height: 12px; }
.oj-info-tip {
  font-size: 11px;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 2px;
  animation: ojTipIn 200ms var(--ease);
}
@keyframes ojTipIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-row label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ===== 输入框带 icon ===== */
.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.input-with-icon .input-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-soft);
  pointer-events: none;
  transition: color var(--t-fast) var(--ease);
  z-index: 1;
}
.input-with-icon input {
  padding-left: 36px !important;  /* 给 icon 留位 */
}
.input-with-icon:focus-within .input-icon {
  color: var(--accent, #8B5CF6);
}

/* ===== 表单错误提示 ===== */
.form-error {
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--danger, #EF4444);
  line-height: 1.4;
  animation: fadeIn var(--t-fast) var(--ease);
}
.form-error.hidden { display: none; }

/* ===== 邮箱输入态：合法 / 非法 ===== */
input.is-valid {
  border-color: var(--success, #10B981) !important;
  background: rgba(16, 185, 129, 0.04);
}
input.is-invalid {
  border-color: var(--danger, #EF4444) !important;
  background: rgba(239, 68, 68, 0.04);
}
input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* 输入框：玻璃深底 + 0 边框 + 聚焦发光 */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
select {
  width: 100%;
  height: 42px;                          /* 全站统一控件高度 */
  padding: 0 var(--s-4);
  background: var(--bg-input);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
textarea {
  width: 100%;
  padding: 11px var(--s-4);
  background: var(--bg-input);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--text);
  line-height: 1.6;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
  resize: vertical;
  min-height: 90px;
}
select { padding-right: 32px; }
input:not([type]):hover, input:hover, select:hover, textarea:hover {
  border-color: var(--border-strong);
  background: var(--bg-panel);
}

input:disabled, select:disabled, textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-subtle);
}
input:disabled:hover, select:disabled:hover, textarea:disabled:hover {
  border-color: var(--border);
  background: var(--bg-subtle);
}

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

input:required:invalid:not(:placeholder-shown),
textarea:required:invalid:not(:placeholder-shown) {
  border-color: var(--warning);
}

textarea {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  min-height: 90px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-panel-2);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
  caret-color: var(--text);
}

/* color-scheme 让浏览器原生 option 弹出面板、滚动条、日期选择器自动跟随主题 */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* ===== option 弹出面板（Firefox / Safari 生效；Chromium 走 OS 渲染）===== */
option { color: var(--text); background: var(--bg-panel); }
option:checked { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
optgroup { color: var(--text-muted); font-weight: 600; font-style: normal; background: var(--bg-subtle); }

::placeholder { color: var(--text-soft); opacity: 1; }

/* ===== 下拉栏：custom arrow + 主题色 ring =====
   - 箭头色：dark 用 #94A3B8 (slate 400)，light 用 #64748B (slate 500) — 中性灰，4 accent 都能用
   - focus ring：跟 var(--primary-glow)，4 accent 自动跟随
   - option 弹出面板：color-scheme + option:checked 软着色
   - mask 方案被 light theme cascade 干掉，回退到 hardcode 灰（最稳）*/
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  padding-right: 36px;
}
select:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23CBD5E1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
select:focus,
select[data-test-focus="true"] {
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ===== 按钮 ===== */

button {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: inherit;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform 120ms var(--ease-spring);
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}
button:not(:disabled):active { transform: scale(0.97); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* 按钮按下涟漪（CSS-only） */
button:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}
button:not(:disabled):active::after { opacity: 1; transition: opacity 80ms; }

.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  color: var(--primary-text);
  left: 50%;
  top: 50%;
  margin-left: -8px;
  margin-top: -8px;
  z-index: 1;
}
.btn-secondary.btn-loading::before { color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Primary：indigo 渐变 + 轻 hover */
.btn-primary {
  background: var(--gradient-primary);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: var(--primary-text);
  border: 1px solid transparent;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(79, 70, 229, 0.15);
}
.btn-primary:hover:not(:disabled) {
  background-position: 100% 50%;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(79, 70, 229, 0.25);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

/* Secondary：玻璃 */
.btn-secondary {
  background: var(--bg-panel);
  backdrop-filter: blur(8px);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-panel-2);
  border-color: var(--border-glow);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.2);
}

/* Outline：透明 + 边框 */
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover:not(:disabled) {
  background: var(--bg-panel);
  border-color: var(--border-glow);
  color: var(--text);
}

/* Ghost：纯文本 hover 玻璃 */
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-panel);
  color: var(--text);
  border-color: var(--border);
}

.btn-danger {
  background: var(--bg-panel);
  color: var(--danger-text);
  border-color: rgba(239, 68, 68, 0.3);
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger-soft);
  border-color: var(--danger);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.25);
}

.btn-sm {
  padding: 6px var(--s-3);
  font-size: 12.5px;
  border-radius: var(--r-xs);
}

.icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
}
.icon-btn:hover { background: var(--bg-panel-2); color: var(--text); border-color: var(--border-strong); }

.form-actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
}

.btn-block { width: 100%; justify-content: center; }

/* ===== 反馈页 ===== */
.required-mark { color: var(--danger); font-weight: 600; margin-left: 2px; }
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-muted);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease), color 140ms var(--ease);
}
.chip:hover {
  border-color: var(--primary);
  color: var(--text);
}
.chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.screenshot-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.screenshot-preview {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
}
.screenshot-preview img {
  max-width: 120px;
  max-height: 60px;
  border-radius: 4px;
  object-fit: cover;
}
.btn-tiny { padding: 4px 8px !important; font-size: 12px !important; }

/* ===== 首页（未登录态） ===== */

.home-page {
  position: relative;
  min-height: 100dvh;
  padding: var(--s-6) var(--s-7) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99, 102, 241, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 100%, rgba(59, 130, 246, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 90% 60%, rgba(139, 92, 246, 0.10) 0%, transparent 60%);
}
.home-page.hidden { display: none; }

.home-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}
.home-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.home-nav-actions { display: flex; gap: var(--s-3); align-items: center; }

.home-hero {
  max-width: var(--content-max);
  width: 100%;
  margin: var(--s-7) auto var(--s-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  animation: slideUp 100ms var(--ease);
}
.home-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--s-4);
  border-radius: var(--r-full);
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.home-badge .lucide { width: 14px; height: 14px; color: var(--primary); }
.home-title {
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
}
.home-title-grad {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.home-subtitle {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0;
}
.home-cta {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-4);
  flex-wrap: wrap;
  justify-content: center;
}
.btn-cta { padding: 12px var(--s-6); font-size: 14.5px; }

.home-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}
.home-feature {
  background: var(--bg-panel);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
  animation: slideUp 100ms var(--ease);
}
.home-feature:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 0 24px rgba(99, 102, 241, 0.15);
}
.home-feature:nth-child(1) { animation-delay: 80ms; }
.home-feature:nth-child(2) { animation-delay: 160ms; }
.home-feature:nth-child(3) { animation-delay: 240ms; }
.home-feature:nth-child(4) { animation-delay: 320ms; }
.home-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--gradient-primary-soft);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3));
}
.home-feature-icon .lucide { width: 20px; height: 20px; stroke-width: 1.75; }
.home-feature-title { font-size: 15px; font-weight: 600; color: var(--text); }
.home-feature-desc { font-size: 13.5px; line-height: 1.65; color: var(--text-muted); margin: 0; }

.home-footer {
  margin-top: auto;
  padding-top: var(--s-7);
  text-align: center;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .home-page { padding: var(--s-5) var(--s-4) var(--s-6); }
  .home-hero { margin: var(--s-5) auto var(--s-4); gap: var(--s-4); }
  .home-title { font-size: 32px; }
  .home-subtitle { font-size: 14px; }
  .home-features { grid-template-columns: 1fr; }
}

/* ===== 结果区 ===== */

.result-box {
  margin-top: var(--s-6);
  padding: var(--s-6);
  background: var(--bg-panel);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: 14px;
  line-height: 1.7;
  box-shadow: var(--shadow-md);
  position: relative;
  animation: slideUp 100ms var(--ease);
  overflow: hidden;
}
.result-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.6), transparent);
}
.result-box h1, .result-box h2, .result-box h3 {
  margin: 18px 0 var(--s-3);
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.result-box h1:first-child, .result-box h2:first-child, .result-box h3:first-child { margin-top: 0; }
.result-box h1 { font-size: 18px; color: var(--text); }
.result-box h2 { font-size: 16px; color: var(--text); }
.result-box h3 { font-size: 14px; color: var(--text-muted); }
.result-box ul { padding-left: 24px; margin: var(--s-3) 0; }
.result-box li { margin: 6px 0; color: var(--text); }
.result-box strong { color: var(--text); font-weight: 600; }
.result-box p { margin: var(--s-3) 0; }

.result-box code {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  border: 1px solid var(--border);
}
.result-box pre {
  background: var(--code-bg);
  color: var(--code-text);
  padding: var(--s-4);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  overflow-x: auto;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  border: 1px solid var(--border);
  border-top: 0;
  font-family: var(--font-mono);
  -webkit-overflow-scrolling: touch;
}
.result-box pre code { background: none; padding: 0; border: none; }

/* 代码块外壳（带语言标签 + 复制按钮） */
.result-box .md-code-wrap {
  position: relative;
  margin: 14px 0;
  border-radius: var(--r-sm);
  background: var(--code-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.result-box .md-code-wrap .md-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 6px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-soft);
  user-select: none;
}
.result-box .md-code-wrap .md-code-lang {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.result-box .md-code-wrap .md-code-copy {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all var(--t-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.result-box .md-code-wrap .md-code-copy:hover {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary-glow);
}
.result-box .md-code-wrap .md-code-copy:active { transform: scale(0.96); }
.result-box .md-code-wrap .md-code-copy.is-copied {
  background: var(--success-soft);
  color: var(--success-text);
  border-color: rgba(16, 185, 129, 0.3);
}
.result-box .md-code-wrap pre.md-pre {
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
}
.result-box pre.md-pre::-webkit-scrollbar { height: 8px; }
.result-box pre.md-pre::-webkit-scrollbar-track { background: transparent; }
.result-box pre.md-pre::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.result-box pre.md-pre::-webkit-scrollbar-thumb:hover { background: var(--primary-glow); }

/* ===== Markdown 增强：blockquote / hr / ol / em / link / table ===== */

.result-box .md-p {
  margin: 12px 0;
  color: var(--text);
}
.result-box .md-p:first-child { margin-top: 0; }
.result-box .md-p:last-child  { margin-bottom: 0; }
.result-box .md-p br { line-height: 1.7; }

.result-box h1.md-h1,
.result-box h2.md-h2,
.result-box h3.md-h3 {
  letter-spacing: -0.01em;
  font-weight: 600;
  line-height: 1.35;
}
.result-box h1.md-h1 {
  font-size: 22px;
  color: var(--text);
  margin: 24px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.result-box h1.md-h1::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--primary), var(--primary-3));
  box-shadow: 0 0 8px var(--primary-glow);
  flex-shrink: 0;
}
.result-box h2.md-h2 {
  font-size: 17px;
  color: var(--text);
  margin: 22px 0 10px;
  padding-left: 12px;
  border-left: 3px solid var(--primary);
  line-height: 1.4;
  text-transform: none;
}
.result-box h3.md-h3 {
  font-size: 14.5px;
  color: var(--text-muted);
  margin: 16px 0 8px;
  font-weight: 600;
  letter-spacing: 0;
}
.result-box h1.md-h1:first-child,
.result-box h2.md-h2:first-child,
.result-box h3.md-h3:first-child { margin-top: 0; }

.result-box ul.md-ul,
.result-box ol.md-ol {
  margin: 12px 0;
  padding-left: 24px;
}
.result-box li.md-li {
  margin: 6px 0;
  color: var(--text);
}
.result-box ul.md-ul li.md-li::marker { color: var(--primary); }
.result-box ol.md-ol li.md-li::marker { color: var(--primary-muted); font-weight: 600; }

.result-box strong { color: var(--text); font-weight: 600; }
.result-box em { color: var(--text-muted); font-style: italic; }

.result-box .md-quote {
  position: relative;
  margin: 16px 0;
  padding: 12px 16px 12px 18px;
  border-left: 3px solid transparent;
  background: var(--primary-soft);
  border-radius: 0 10px 10px 0;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.6;
}
.result-box .md-quote::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--primary-3));
  border-radius: 3px;
}
.result-box .md-quote::after {
  content: "“";
  position: absolute;
  top: 4px;
  right: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  line-height: 1;
  color: var(--primary-glow);
  pointer-events: none;
  font-style: normal;
}
.result-box .md-quote strong { color: var(--text); font-style: normal; }

.result-box .md-hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 16px 0;
}

.result-box code.md-code {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 1.5px 6px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 0.875em;
  border: 1px solid var(--border);
  word-break: break-word;
}

.result-box .md-link {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px dashed var(--primary-glow);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.result-box .md-link:hover {
  color: var(--primary-hover, var(--primary));
  border-bottom-color: var(--primary);
  border-bottom-style: solid;
}

.result-box table,
.result-box .md-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-size: 13px;
  min-width: max-content;
}
.result-box .md-table-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-panel);
  -webkit-overflow-scrolling: touch;
}
.result-box .md-table-wrap .md-table thead th { border-top: 0; }
.result-box .md-table-wrap .md-table tbody tr:last-child td { border-bottom: 0; }
.result-box .md-table-wrap::-webkit-scrollbar { height: 8px; }
.result-box .md-table-wrap::-webkit-scrollbar-track { background: transparent; }
.result-box .md-table-wrap::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.result-box .md-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--primary-glow); }
.result-box .md-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.015); }

.result-box .ta-left   { text-align: left; }
.result-box .ta-center { text-align: center; }
.result-box .ta-right  { text-align: right; }
.result-box thead th,
.result-box .md-table thead th {
  color: var(--text);
  font-weight: 600;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, var(--primary-soft), transparent),
    var(--bg-panel-2);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.01em;
}
.result-box tbody td,
.result-box .md-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  line-height: 1.55;
}
.result-box tbody tr:last-child td,
.result-box .md-table tbody tr:last-child td { border-bottom: 0; }
.result-box tbody tr:hover td,
.result-box .md-table tbody tr:hover td { background: var(--bg-panel-2); }
.result-box .md-table thead th:first-child,
.result-box .md-table tbody td:first-child { padding-left: 16px; }
.result-box .md-table thead th:last-child,
.result-box .md-table tbody td:last-child { padding-right: 16px; }
.result-box table code.md-code {
  font-size: 12px;
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
}

.cache-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ===== 结果区状态机：toolbar / loading / error ===== */

.result-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  margin-bottom: var(--s-3);
  min-height: 32px;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s-2);
}

.result-toolbar-spacer { flex: 1; }

.result-toolbar .cache-tag {
  padding: 4px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 11.5px;
}

.result-toolbar .cache-tag i {
  width: 12px;
  height: 12px;
  color: var(--primary);
}

.result-toolbar .copy-btn,
.result-toolbar .btn-regen {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 160ms ease;
}

.result-toolbar .copy-btn:hover,
.result-toolbar .btn-regen:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.result-toolbar .copy-btn i,
.result-toolbar .btn-regen i {
  width: 13px;
  height: 13px;
}

.result-toolbar .copy-btn.copied {
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.4);
}

/* 旧的复制按钮（在 result-box 顶角）位置调整 — 隐藏，新 toolbar 内置 */
.result-box > .copy-btn:not(.result-toolbar .copy-btn) { display: none; }

.result-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-8) var(--s-4);
  gap: var(--s-3);
  color: var(--text-muted);
}

/* 输出被截断的警告条（AI 超 max_tokens 撞墙时显示，提示用户重试） */
.result-truncated-banner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 14px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(239, 68, 68, 0.08));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 3px solid var(--warning, #F59E0B);
  border-radius: var(--r-md, 8px);
  color: var(--text, currentColor);
  font-size: 13px;
  line-height: 1.5;
}
.result-truncated-banner i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--warning, #F59E0B);
}
.result-truncated-banner b {
  color: var(--warning, #F59E0B);
  font-weight: 600;
}

.result-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--primary);
  animation: spin 700ms linear infinite;
}

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

.result-loading-text {
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* ===== 流式生成（streaming phase） =====
   - 顶栏 chip：脉冲点 + "AI 正在生成…" + 实时元信息（N 字 / N chunk / N s）
   - 占位骨架：4 行 shimmer，视觉权重等同一个中等长度回答
   - 末尾光标：▍ 闪烁，让"正在输入"的存在感最强
   - is-streaming 容器：min-height 撑住，避免最终结果出现时 layout shift
*/
.result-toolbar-streaming {
  background: linear-gradient(90deg,
    rgba(99, 102, 241, 0.04) 0%,
    rgba(99, 102, 241, 0.10) 50%,
    rgba(99, 102, 241, 0.04) 100%);
  background-size: 200% 100%;
  animation: streaming-shimmer-bg 3s linear infinite;
}
@keyframes streaming-shimmer-bg {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

.streaming-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--primary-soft);
  border: 1px solid var(--primary-glow);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.02em;
  user-select: none;
}
.streaming-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary), 0 0 0 0 var(--primary-glow);
  animation: streaming-pulse 1.4s var(--ease) infinite;
}
@keyframes streaming-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.streaming-text { color: var(--primary); }
.streaming-meta { color: var(--text-muted); font-weight: 400; font-family: var(--font-mono); font-size: 11px; }

.result-md.is-streaming {
  position: relative;
  min-height: 160px;
}
.streaming-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.skeleton-line {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--bg-panel-2) 0%,
    rgba(99, 102, 241, 0.08) 50%,
    var(--bg-panel-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
.skeleton-line.w-90 { width: 90%; }
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-50 { width: 50%; }
@keyframes shimmer {
  0%   { background-position: 200% 50%; }
  100% { background-position: -200% 50%; }
}

.streaming-cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  vertical-align: text-bottom;
  margin-left: 2px;
  background: var(--primary);
  border-radius: 2px;
  animation: cursor-blink 1s steps(2) infinite;
  box-shadow: 0 0 6px var(--primary-glow);
}
@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}

.result-error {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--danger-soft);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--r-md);
}

.result-error-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.12);
  border-radius: 50%;
  color: var(--danger);
}

.result-error-icon i { width: 20px; height: 20px; }

.result-error-body { flex: 1; min-width: 0; }

.result-error-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--danger-text);
  margin-bottom: 2px;
}

.result-error-msg {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  word-break: break-word;
}

.btn-retry {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 160ms ease;
  flex-shrink: 0;
}

.btn-retry:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
  color: var(--primary-hover);
}

.btn-retry i { width: 13px; height: 13px; }

/* ===== 徽章 ===== */

/* ===== 徽章 ===== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-size: 11.5px;
  font-weight: 500;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge-on { background: var(--success-soft); color: var(--success-text); border-color: rgba(16, 185, 129, 0.3); }
.badge-off { background: var(--danger-soft); color: var(--danger-text); border-color: rgba(239, 68, 68, 0.3); }
.badge-admin { background: var(--primary-soft); color: var(--primary-hover); border-color: var(--border-glow); }

/* ===== 提示 ===== */

.hint {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: var(--s-3);
  line-height: 1.6;
  opacity: 0.95;
}
.hint a { color: var(--primary); }
.hint a:hover { color: var(--primary-hover); text-decoration: underline; }

.error {
  color: var(--danger-text);
  padding: var(--s-4);
  background: var(--danger-soft);
  border-radius: var(--r-sm);
  border: 1px solid rgba(239, 68, 68, 0.3);
  font-size: 13px;
}

/* 用量页：失败次数 hover 才展开详情（避免列表被"未配置 Key"刷屏） */
.failures-wrap {
  position: relative;
  display: inline-block;
}
.failures-detail {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  padding: 8px 12px;
  font-size: 12.5px;
  white-space: nowrap;
  max-width: 480px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  animation: fadeIn 140ms var(--ease);
}
.failures-wrap:hover .failures-detail,
.failures-trigger:focus + .failures-detail,
.failures-trigger:focus-visible + .failures-detail {
  display: block;
}
.failures-trigger:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
  border-bottom-color: transparent !important;
}
.failures-detail[role="tooltip"]::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 12px;
  width: 8px;
  height: 8px;
  background: var(--danger-soft);
  border-left: 1px solid rgba(239, 68, 68, 0.3);
  border-top: 1px solid rgba(239, 68, 68, 0.3);
  transform: rotate(45deg);
}

/* ===== 模态框 ===== */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 16, 32, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  animation: fadeIn var(--t-base) var(--ease);
}
.modal.hidden { display: none; }

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, color 150ms ease;
}
.modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #f8fafc);
}

/* 未登录：主内容锁定半透明 + 不可交互 */
.content.is-locked {
  pointer-events: none;
  user-select: none;
  filter: blur(2px) saturate(0.7);
  opacity: 0.5;
  transition: filter 200ms var(--ease), opacity 200ms var(--ease);
}
/* 未登录：sidebar tab 灰化 + 不可点 */
.side-link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.5);
}
.side-link.is-disabled:hover {
  background: transparent !important;
  color: var(--text-muted) !important;
  transform: none !important;
}

.modal-content {
  background: var(--bg-panel);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  padding: var(--s-7);
  border-radius: var(--r-xl);
  width: 420px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: scaleIn var(--t-spring) var(--ease-spring);
  position: relative;
  overflow: hidden;
}
.modal-content::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.6), transparent);
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.modal-actions { display: flex; gap: var(--s-3); margin-top: var(--s-3); align-items: center; }
.modal-actions button { flex: 1; justify-content: center; }
.modal-actions-spacer { flex: 1; }

/* 编辑标题 modal：紧凑变体（区别于登录 modal） */
.modal-content-sm {
  width: 360px;
  padding: var(--s-6);
  gap: var(--s-3);
}
.modal-content-sm h3 { font-size: 16px; margin-bottom: 0; }
.modal-content-sm input { height: 40px; }

/* 功能介绍 modal：9 个 tab 一览（2026-07-13 优化"看看功能"按钮） */
.modal-content-features {
  width: min(1100px, 96vw);
  max-width: 96vw;
  max-height: 88vh;
  padding: var(--s-6) var(--s-6) var(--s-5);
  overflow-y: auto;
  text-align: left;
  position: relative;
}
.features-modal-head {
  margin-bottom: var(--s-5);
  padding-right: 40px;  /* 让出 close 按钮位置 */
}
.features-modal-head h3 {
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--text, #f8fafc);
}
.features-modal-head h3 i { width: 22px; height: 22px; color: var(--primary, #8b5cf6); }
.features-modal-sub {
  color: var(--text-muted, #94a3b8);
  font-size: 13px;
  margin: 0;
}

.features-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
}
.feat-card {
  background: var(--bg-soft, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: var(--r-md, 12px);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.feat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.4);
  background: var(--bg-soft-hover, rgba(255, 255, 255, 0.06));
}
.feat-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(99, 102, 241, 0.12));
  color: var(--primary, #8b5cf6);
  margin-bottom: 4px;
}
.feat-card-icon i { width: 18px; height: 18px; }
.feat-card h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--text, #f8fafc);
}
.feat-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted, #94a3b8);
  margin: 0;
}
.feat-card-how {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-muted, #cbd5e1);
  margin-top: 4px;
}
.feat-step {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
}
.feat-card-go {
  margin-top: auto;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(99, 102, 241, 0.12));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  color: var(--text, #f8fafc);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms ease;
}
.feat-card-go:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.32), rgba(99, 102, 241, 0.24));
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateX(2px);
}

/* 提示 modal：图示 + 示例对照 */
.modal-content-hint {
  width: 440px;
  max-width: 92vw;
  padding: var(--s-7);
  gap: 0;
  text-align: center;
}
.hint-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%);
  border: 1px solid rgba(139, 92, 246, 0.25);
  margin-bottom: var(--s-4);
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.18);
}
.hint-modal-icon i { width: 28px; height: 28px; color: #F59E0B; }
.modal-content-hint h3 { font-size: 18px; margin: 0 0 8px; }
.hint-modal-lead {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 var(--s-4);
  line-height: 1.65;
}
.hint-modal-lead strong { color: var(--primary); font-weight: 600; }
.hint-modal-examples {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  background: var(--bg-input);
  border-radius: 12px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hint-modal-examples li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
/* 主体示例：跟随当前 OJ source（高亮 + 较大） */
.hint-modal-main {
  padding: 4px 0;
}
.hint-modal-main .hint-bad,
.hint-modal-main .hint-good {
  font-size: 14px;
  font-weight: 600;
}
/* 次要示例：另一个 OJ 的对照（轻量） */
.hint-modal-other {
  border-top: 1px dashed var(--border);
  padding-top: var(--s-3);
  font-size: 12px;
  color: var(--text-subtle);
}
.hint-modal-other .hint-other-label {
  font-weight: 500;
  color: var(--text-muted);
}
.hint-modal-other code {
  font-size: 11.5px;
}
.hint-modal-other .hint-good code {
  background: rgba(16, 185, 129, 0.06);
}
.hint-modal-examples code {
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 7px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.hint-bad code { color: #F87171; }
.hint-good code { color: #10B981; background: rgba(16, 185, 129, 0.10); }
.hint-arrow {
  width: 14px;
  height: 14px;
  color: var(--text-subtle);
  flex-shrink: 0;
}
.hint-modal-foot {
  font-size: 12.5px;
  color: var(--text-subtle);
  margin: 0 0 var(--s-5);
  line-height: 1.55;
}

/* ===== 表格 ===== */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
th, td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom-color: var(--border);
  background: transparent;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr {
  transition: background var(--t-fast) var(--ease);
}
tbody tr:hover {
  background: var(--bg-panel);
}

/* ===== 雷达快照详情弹窗：宽度阶梯（必须在 .modal-content 之后才能覆盖其 width: 420px） ===== */
.modal-content-radar-snapshot {
  /* 阶梯式宽度：跟随视口阶梯收放 + 大屏 ceiling 避免信箱感
     - 默认桌面 880px（1280 视口占 ~69%）
     - 大屏 1440+ → 920px
     - 超大屏 1600+ → 960px ceiling
     - 平板 768px → calc(100vw - 32px) 留 16px 边距
     - 手机 480- → calc(100vw - 16px) 几乎全宽 */
  width: min(880px, calc(100vw - 64px));
  max-width: calc(100vw - 64px);
  max-height: calc(100dvh - 64px);
  padding: var(--s-6) var(--s-7);
  gap: var(--s-3);
}
/* 视口阶梯 */
@media (min-width: 1440px) {
  .modal-content-radar-snapshot {
    width: min(920px, calc(100vw - 80px));
  }
}
@media (min-width: 1600px) {
  .modal-content-radar-snapshot {
    width: 960px;
  }
}
@media (max-width: 768px) {
  .modal-content-radar-snapshot {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    padding: var(--s-5);
    max-height: calc(100dvh - 32px);
  }
}
@media (max-width: 480px) {
  .modal-content-radar-snapshot {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    padding: var(--s-4);
  }
}

/* 内部高度联动：宽 modal 配高 body，窄 modal 收紧 */
.radar-snapshot-modal-mastery {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 2px;
}
.radar-snapshot-modal-body {
  flex: 1;
  min-height: 140px;
  max-height: 460px;
  overflow-y: auto;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.7;
}
@media (min-width: 1440px) {
  .radar-snapshot-modal-mastery { max-height: 320px; }
  .radar-snapshot-modal-body { max-height: 540px; }
}
@media (max-width: 768px) {
  .radar-snapshot-modal-mastery { max-height: 200px; }
  .radar-snapshot-modal-body { max-height: 50vh; padding: 12px 14px; font-size: 13.5px; }
}

/* ===== Verdict Chip ===== */
.verdict-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  line-height: 1.4;
}
.verdict-WA { color: var(--danger-text); background: var(--danger-soft); border-color: rgba(239, 68, 68, 0.3); }
.verdict-TLE { color: var(--warning-text); background: var(--warning-soft); border-color: rgba(245, 158, 11, 0.3); }
.verdict-RE { color: var(--danger-text); background: var(--danger-soft); border-color: rgba(239, 68, 68, 0.3); }
.verdict-CE { color: var(--text-muted); background: var(--bg-subtle); }
.verdict-MLE { color: var(--warning-text); background: var(--warning-soft); border-color: rgba(245, 158, 11, 0.3); }
.verdict-AC { color: var(--success-text); background: var(--success-soft); border-color: rgba(16, 185, 129, 0.3); }
.verdict-OLE { color: var(--warning-text); background: var(--warning-soft); border-color: rgba(245, 158, 11, 0.3); }

/* 卡上用的紧凑 verdict chip（中文短文案，让用户远距离识别错型） */
.verdict-chip-card {
  padding: 2px 8px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  font-family: var(--font-sans, var(--font-mono));
  text-transform: none;
}
.wrongbook-card-verdict-text { line-height: 1.3; }

/* OJ 题目 PID（紧凑型 mono 标签） */
.wrongbook-card-pid {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: var(--r-sm);
  letter-spacing: 0.02em;
}

.verdict-WA.text,
.verdict-TLE.text,
.verdict-RE.text,
.verdict-CE.text,
.verdict-MLE.text { background: none; padding: 0; }

.table-wrap { overflow-x: auto; }
.actions-cell { white-space: nowrap; }
.actions-cell button { margin-right: 6px; }

/* ===== 错题本：极简玻璃卡（左侧 verdict 色条 + 标题 + 来源 + 时间） ===== */

.wrongbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* 错题卡：复用公共 .card 尺寸 + 四边对称布局（移除之前左侧 verdict 色条） */
.wrongbook-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  cursor: pointer;
  transition: border-color 200ms var(--ease),
              transform 200ms var(--ease),
              box-shadow 200ms var(--ease);
  will-change: transform;
}
.wrongbook-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-glow);
  background: var(--bg-panel-2);
  box-shadow: var(--shadow-md), 0 0 24px rgba(99, 102, 241, 0.15);
}
.wrongbook-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* verdict 色点：紧凑的圆形点（替代之前的左侧色条，承担同等的 verdict 信号职责） */
.verdict-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}
.verdict-dot-WA,
.verdict-dot-RE { background: var(--danger-text); box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }
.verdict-dot-TLE,
.verdict-dot-MLE,
.verdict-dot-OLE { background: var(--warning-text); box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }
.verdict-dot-CE { background: var(--text-muted); }
.verdict-dot-AC { background: var(--success-text); box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); }

/* 卡片头：色点 + 来源 + 时间（顶部一行） */
.wrongbook-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1;
}
.wrongbook-card-source {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.wrongbook-card-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}

/* 标题：标准卡片标题规格 */
.wrongbook-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wrongbook-card-skeleton {
  pointer-events: none;
}
.wrongbook-card-skeleton .skeleton {
  background: linear-gradient(90deg, var(--bg-subtle), rgba(148, 163, 184, 0.12), var(--bg-subtle));
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}

@media (max-width: 540px) {
  .wrongbook-grid { grid-template-columns: 1fr; gap: 12px; }
  .wrongbook-card { padding: var(--s-4); }
  .wrongbook-card-title { font-size: 14px; }
}

/* ===== 错题详情弹窗 ===== */

.modal-content-wrongbook {
  width: 640px;
  max-width: calc(100vw - 32px);
  padding: var(--s-6);
  gap: var(--s-4);
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
}
@media (max-width: 640px) {
  .modal-content-wrongbook { padding: var(--s-5); }
}

.wrongbook-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.wrongbook-modal-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.wrongbook-modal-title-wrap i {
  width: 20px;
  height: 20px;
  color: var(--primary);
  flex-shrink: 0;
}
.wrongbook-modal-title-wrap h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrongbook-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.wrongbook-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
}
.wrongbook-meta-chip i { width: 11px; height: 11px; }

.wrongbook-modal-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wrongbook-modal-section-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.wrongbook-modal-section-head i {
  width: 14px;
  height: 14px;
  color: var(--primary);
}

/* AI 解答：复用全站 .result-box markdown 渲染样式 */
.wrongbook-modal-analysis-body {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
  max-height: 320px;
  overflow-y: auto;
}
.wrongbook-modal-analysis-body::-webkit-scrollbar { width: 8px; }
.wrongbook-modal-analysis-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.wrongbook-modal-empty {
  padding: 18px;
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 13px;
  font-style: italic;
}
.wrongbook-modal-empty i { width: 16px; height: 16px; }

.wrongbook-modal-judge-body {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}
.wrongbook-modal-judge-body.is-empty {
  color: var(--text-soft);
  font-style: italic;
}

/* 判题机结构化展示（基于 parseJudgeMessage 解析） */
.wrongbook-modal-judge-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}
.judge-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.judge-prefix {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.judge-test-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary-text);
  background: var(--primary-soft);
  padding: 2px 9px;
  border-radius: var(--r-full);
  letter-spacing: 0.02em;
}
.judge-ctx {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-panel);
  border: 1px dashed var(--border);
  padding: 2px 8px;
  border-radius: var(--r-sm);
}
.judge-error-type {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--danger-text);
  background: var(--danger-soft);
  padding: 2px 9px;
  border-radius: var(--r-sm);
  letter-spacing: 0.02em;
}
.judge-message {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  word-break: break-word;
}
.judge-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.judge-diff-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
.judge-diff-cell.is-mismatch {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.05);
}
.judge-diff-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  font-weight: 600;
}
.judge-diff-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
  background: transparent;
  padding: 0;
}
.judge-diff-cell.is-mismatch .judge-diff-value { color: var(--danger-text); }

.wrongbook-modal-code {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: #E2E8F0;
  white-space: pre;
  overflow-x: auto;
  max-height: 220px;
  overflow-y: auto;
}
[data-theme="light"] .wrongbook-modal-code {
  background: rgba(15, 23, 42, 0.04);
  color: #1F2937;
}
.wrongbook-modal-code::-webkit-scrollbar { width: 8px; height: 8px; }
.wrongbook-modal-code::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ===== 通用确认弹窗（替换原生 confirm） ===== */

.modal-content-confirm {
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: var(--s-6);
  text-align: center;
  align-items: center;
}
.confirm-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary-text);
  margin: 0 auto;
}
.confirm-modal-icon i { width: 24px; height: 24px; }
.confirm-modal-icon.is-danger {
  background: var(--danger-soft);
  color: var(--danger-text);
}
.modal-content-confirm h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.confirm-modal-message {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.confirm-modal-message strong {
  color: var(--text);
  font-weight: 600;
}
.modal-content-confirm .modal-actions {
  width: 100%;
  margin-top: var(--s-2);
}
.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: transparent;
}
.btn-danger:hover:not(:disabled) {
  background: #DC2626;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.30);
}

/* ===== 用量进度（渐变填充） ===== */

.progress {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-full);
  height: 8px;
  overflow: hidden;
  margin: var(--s-2) 0;
  position: relative;
}
.progress .bar {
  background: var(--gradient-primary);
  height: 100%;
  border-radius: inherit;
  transition: width 600ms var(--ease-spring);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
  position: relative;
}
.progress .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  animation: progress-shine 2s linear infinite;
}
@keyframes progress-shine {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.chart-wrap {
  position: relative;
  min-height: 80px;
}
.chart-wrap:empty::before {
  content: '暂无数据';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* ===== Stat Card（大数字 + 渐变光晕） ===== */

.stat-card {
  background: var(--bg-panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.stat-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 0 24px rgba(99, 102, 241, 0.15);
}
.stat-card::before {
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08), transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}

.stat-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.stat-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-family: var(--font-sans);
  margin-top: 6px;
  line-height: 1.1;
  position: relative;
  padding-left: 14px;
}
.stat-value::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
}
.stat-value.is-large {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* 顶部对齐的大数字卡：左对齐堆叠，sparkline 在底部居中 */
.stat-card-feature {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}
.stat-card-feature .stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.stat-card-feature .stat-label::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-3) 100%);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.stat-card-feature .sparkline-feature {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 88px;
  height: 32px;
  opacity: 0.7;
}
/* hero stat：在 stat-card-feature 基础上更大、更显眼 */
.stat-card-feature.is-hero {
  padding: 28px;
  gap: 10px;
}
.stat-card-feature.is-hero .stat-value { font-size: 44px; }
.stat-card-feature.is-hero .stat-value::before { top: 12px; bottom: 12px; }
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  margin-left: var(--s-2);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.stat-trend.up   { color: var(--success-text); }
.stat-trend.down { color: var(--danger-text); }
.stat-trend.flat { color: var(--text-soft); }
.stat-value-sub {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 22px;
  -webkit-text-fill-color: var(--text-muted);
}
.stat-foot {
  margin-top: var(--s-3);
  color: var(--text-muted);
  font-size: 12px;
}

/* ===== Bento Grid（12 列） ===== */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4);
}
.bento > * { grid-column: span 6; }
.bento-3 > * { grid-column: span 12; }
.bento-4 > * { grid-column: span 3; }
.bento-2-span { grid-column: span 6; }
.bento-3-span { grid-column: span 12; }
/* 单列堆叠：让 bento 直接子元素全部 span 12（用于 explain/analyze/review 这类
   "oj-picker card + 多个 form-row" 结构，所有元素起点对齐 = card 起点） */
.bento-stack > * { grid-column: span 12; }

/* ===== Toolbar ===== */

.toolbar {
  margin-bottom: var(--s-4);
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
}
.toolbar label {
  font-size: 13px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.toolbar select { width: auto; }

/* ===== 后台工具 ===== */

.util-list { display: flex; flex-direction: column; gap: 0; margin-top: var(--s-3); }
.util-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-2) 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.util-row:last-child { border-bottom: none; }
.util-row-empty { color: var(--text-muted); font-size: 13px; padding: var(--s-3); text-align: center; }
.util-errors { margin-top: var(--s-3); max-height: 200px; overflow-y: auto; }
.util-error-item {
  font-size: 12.5px;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.util-error-item:last-child { border-bottom: none; }
.util-username { color: var(--text-muted); font-size: 12px; }
.util-stats-inline { font-size: 12px; color: var(--text-muted); }

/* ===== Toast（玻璃 + 弹簧） ===== */

.toast {
  position: fixed;
  bottom: var(--s-6);
  right: var(--s-6);
  background: var(--bg-panel-2);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-width: 380px;
  font-size: 13.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-spring) var(--ease-spring);
  position: fixed;
}
.toast.toast-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.info { border-left: 3px solid var(--primary); }
.toast.warning { border-left: 3px solid var(--warning); }
.toast.neutral { border-left: 3px solid var(--border-strong); }

/* ===== Skeleton（紫色脉冲） ===== */

.skeleton {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(99, 102, 241, 0.15) 50%,
    transparent
  );
  animation: shimmer 1.6s var(--ease) infinite;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.skeleton-text { height: 14px; width: 60%; margin-top: var(--s-2); }
.skeleton-row { height: 28px; margin-bottom: var(--s-2); }

.hidden { display: none !important; }

/* ===== 空状态（Empty State） ===== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-9) var(--s-4);
  color: var(--text-muted);
  gap: var(--s-4);
}
.empty-state .lucide {
  width: 40px;
  height: 40px;
  color: var(--primary);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.4));
  opacity: 0.7;
}
.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.empty-state-hint {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.6;
}

/* ===== 复制按钮（result-box 顶角） ===== */

.result-box {
  position: relative;
}
.copy-btn {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.result-box:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--text); border-color: var(--border-glow); background: var(--bg-panel-2); box-shadow: 0 0 16px rgba(99, 102, 241, 0.3); }
.copy-btn.copied { color: var(--success-text); border-color: var(--success); background: var(--success-soft); }
.copy-btn .lucide { width: 14px; height: 14px; }

/* ===== 全局动画 ===== */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  /* 保留定义供其他场景复用，但卡片和 tab 不再使用 —— opacity 淡入造成"颜色延迟"观感 */
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { transform: translateY(4px); }
  to   { transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Tab 切换：100ms 纯位移（无 opacity）—— 卡片颜色立即可见，不再"延迟到位" */
.tab-content.active {
  animation: slideUp 100ms var(--ease);
}

/* 卡片 stagger 已废弃：卡片不再入场动画，由父级 slideUp 统一过渡 */

/* ===== Sparkline ===== */

.sparkline {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--s-2);
}
.sparkline polyline {
  fill: none;
  stroke: url(#sparkline-gradient);
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.5));
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: spark-draw 1.2s var(--ease) forwards;
}
@keyframes spark-draw {
  to { stroke-dashoffset: 0; }
}
.sparkline.up polyline { stroke: var(--success); filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5)); }
.sparkline.down polyline { stroke: var(--danger); filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5)); }

/* ===== 图表画布包裹 ===== */

.chart-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  padding: var(--s-3);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.chart-wrap.tall { height: 300px; }
.chart-wrap.short { height: 180px; }

/* ===== 滚动条 ===== */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.4); background-clip: padding-box; border: 2px solid transparent; }

::selection { background: rgba(99, 102, 241, 0.3); color: var(--text); }

/* ===== Status pill ===== */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--s-3);
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
}
.status-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

/* ===== 响应式 ===== */

@media (max-width: 1024px) {
  .bento > * { grid-column: span 12; }
  .bento-4 > * { grid-column: span 6; }
  .stat-card-feature.is-hero { min-height: 180px; padding: 24px; }
  .stat-card-feature.is-hero .stat-value { font-size: 38px; }
}

@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: relative;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: var(--s-4);
  }
  .side-nav {
    flex-direction: row;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .side-link {
    flex-shrink: 0;
    padding: 6px var(--s-3);
  }
  .sidebar-footer {
    flex-direction: row;
    flex-wrap: wrap;
    border-top: none;
    padding-top: 0;
    gap: var(--s-2);
  }
  .sidebar-footer .user-card { flex: 1 1 auto; min-width: 0; }
  .sidebar-footer .footer-actions { flex: 0 0 auto; }
  .content { padding: var(--s-4) var(--s-4); }
  .page-title { font-size: 22px; }
  .stat-value { font-size: 26px; }
  .toast { bottom: var(--s-4); right: var(--s-4); left: var(--s-4); }
  .stat-card-feature.is-hero { min-height: 160px; padding: 20px; }
  .stat-card-feature.is-hero .stat-value { font-size: 32px; }
  .stat-card-feature.is-hero .sparkline-feature { width: 64px; height: 24px; bottom: 12px; right: 12px; }
  .card { padding: 16px; }
  .problem-card.form-card .form-actions { flex-wrap: wrap; }
  .config-status-banner { padding: 12px 14px; }
  .config-status-side .problem-mode-badge { font-size: 10.5px; padding: 3px 8px; }
}

@media (max-width: 480px) {
  /* 极窄屏：sidebar 横向 nav 完全可滑 + user-card 自适应宽度 */
  .sidebar { padding: var(--s-3); }
  .side-link { padding: 6px var(--s-2); font-size: 12.5px; gap: 6px; }
  .content { padding: var(--s-3); }
  .page-title { font-size: 19px; }
  .stat-value { font-size: 24px; }
  .stat-card-feature.is-hero { min-height: 140px; padding: 16px; gap: 8px; }
  .stat-card-feature.is-hero .stat-value { font-size: 28px; }
  .stat-card-feature.is-hero .sparkline-feature { display: none; }
  .card { padding: 14px; }
  .config-status-banner { padding: 10px 12px; gap: var(--s-2); }
  .config-status-value { font-size: 13px; }
  .config-status-side { width: 100%; }
  .stat-card { padding: 14px; }
  .stat-card .stat-value { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  body::before, body::after { display: none; }
}

/* =========================================================================
   亮色主题 · Neumorphism（新拟态）
   - 浅灰紫底 + 白色面板 + 双向软投影（高光 + 暗影）
   - 紫蓝渐变更饱和，文字用深靛蓝
   - 不动业务 class，只换 token + 投影 + 背景
   ========================================================================= */

/* =========================================================================
   亮色主题 · 多 accent（用户可切换：stone / honey / rose / teal）
   - base 块管不随 accent 变的：底色、面板、阴影结构、语义色
   - accent 块覆盖：主色、文字色、边框色、阴影里的 accent 段
   ========================================================================= */

/* === base：所有亮色主题共享 === */
[data-theme="light"] {
  --bg-panel: #FFFFFF;
  --bg-panel-2: #FAFAF9;
  --bg-panel-3: #FFFFFF;
  --bg-sidebar: rgba(255, 255, 255, 0.78);
  --bg-input: #FFFFFF;
  --text-inverse: #FFFFFF;

  --gradient-success: linear-gradient(135deg, #34D399, #059669);
  --gradient-warning: linear-gradient(135deg, #FBBF24, #D97706);
  --gradient-danger: linear-gradient(135deg, #F87171, #DC2626);

  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.10);
  --success-text: #047857;
  --warning: #D97706;
  --warning-soft: rgba(217, 119, 6, 0.10);
  --warning-text: #B45309;
  --danger: #DC2626;
  --danger-soft: rgba(220, 38, 38, 0.08);
  --danger-text: #B91C1C;
}

/* === accent: stone 暖灰棕（中性商务） === */
[data-theme="light"][data-accent="stone"] {
  --bg: #F5F5F4;
  --bg-2: #E7E5E4;
  --bg-subtle: #F5F5F4;
  --bg-hover: rgba(87, 83, 78, 0.06);

  --border: rgba(28, 25, 23, 0.06);
  --border-strong: rgba(28, 25, 23, 0.12);
  --border-glow: rgba(120, 113, 108, 0.40);

  --text: #1C1917;
  --text-muted: #78716C;
  --text-soft: #A8A29E;

  --primary: #57534E;
  --primary-hover: #44403C;
  --primary-2: #78716C;
  --primary-3: #A8A29E;
  --primary-soft: rgba(87, 83, 78, 0.08);
  --primary-text: #FFFFFF;
  --primary-glow: rgba(87, 83, 78, 0.28);

  --gradient-primary: linear-gradient(135deg, #78716C 0%, #44403C 100%);
  --gradient-primary-soft: linear-gradient(135deg, rgba(120, 113, 108, 0.10) 0%, rgba(68, 64, 60, 0.10) 100%);
  --gradient-violet: linear-gradient(135deg, #A8A29E, #57534E);
  --gradient-indigo: linear-gradient(135deg, #A8A29E, #57534E);

  --code-bg: #F5F5F4;
  --code-text: #44403C;

  --shadow-xs: 2px 2px 4px rgba(168, 162, 158, 0.25), -2px -2px 4px rgba(255, 255, 255, 0.9);
  --shadow-sm: 4px 4px 10px rgba(168, 162, 158, 0.30), -4px -4px 10px rgba(255, 255, 255, 0.9);
  --shadow-md: 8px 8px 20px rgba(168, 162, 158, 0.35), -8px -8px 20px rgba(255, 255, 255, 0.95);
  --shadow-lg: 12px 12px 32px rgba(168, 162, 158, 0.40), -12px -12px 32px rgba(255, 255, 255, 1);
  --shadow-glow: 0 8px 24px rgba(120, 113, 108, 0.22), 6px 6px 16px rgba(168, 162, 158, 0.30), -6px -6px 16px rgba(255, 255, 255, 0.95);
  --shadow-glow-strong: 0 12px 36px rgba(120, 113, 108, 0.30), 8px 8px 20px rgba(168, 162, 158, 0.35), -8px -8px 20px rgba(255, 255, 255, 1);
}

/* === accent: honey 蜂蜜金（温度 / 训练） === */
[data-theme="light"][data-accent="honey"] {
  --bg: #FFF8E7;
  --bg-2: #FEF3C7;
  --bg-subtle: #FEF3C7;
  --bg-hover: rgba(217, 119, 6, 0.06);

  --border: rgba(146, 64, 14, 0.08);
  --border-strong: rgba(146, 64, 14, 0.15);
  --border-glow: rgba(217, 119, 6, 0.40);

  --text: #451A03;
  --text-muted: #92400E;
  --text-soft: #D97706;

  --primary: #D97706;
  --primary-hover: #B45309;
  --primary-2: #F59E0B;
  --primary-3: #FBBF24;
  --primary-soft: rgba(217, 119, 6, 0.10);
  --primary-text: #FFFFFF;
  --primary-glow: rgba(217, 119, 6, 0.25);

  --gradient-primary: linear-gradient(135deg, #F59E0B 0%, #B45309 100%);
  --gradient-primary-soft: linear-gradient(135deg, rgba(245, 158, 11, 0.10) 0%, rgba(180, 83, 9, 0.10) 100%);
  --gradient-violet: linear-gradient(135deg, #FCD34D, #B45309);
  --gradient-indigo: linear-gradient(135deg, #FCD34D, #B45309);

  --code-bg: #FEF3C7;
  --code-text: #92400E;

  --shadow-xs: 2px 2px 4px rgba(217, 119, 6, 0.18), -2px -2px 4px rgba(255, 255, 255, 0.9);
  --shadow-sm: 4px 4px 10px rgba(217, 119, 6, 0.20), -4px -4px 10px rgba(255, 255, 255, 0.9);
  --shadow-md: 8px 8px 20px rgba(217, 119, 6, 0.22), -8px -8px 20px rgba(255, 255, 255, 0.95);
  --shadow-lg: 12px 12px 32px rgba(217, 119, 6, 0.25), -12px -12px 32px rgba(255, 255, 255, 1);
  --shadow-glow: 0 8px 24px rgba(217, 119, 6, 0.20), 6px 6px 16px rgba(217, 119, 6, 0.20), -6px -6px 16px rgba(255, 255, 255, 0.95);
  --shadow-glow-strong: 0 12px 36px rgba(217, 119, 6, 0.25), 8px 8px 20px rgba(217, 119, 6, 0.22), -8px -8px 20px rgba(255, 255, 255, 1);
}

/* === accent: rose 玫瑰金（精致 / 工具） === */
[data-theme="light"][data-accent="rose"] {
  --bg: #FFF1F2;
  --bg-2: #FECDD3;
  --bg-subtle: #FECDD3;
  --bg-hover: rgba(190, 24, 93, 0.06);

  --border: rgba(136, 19, 55, 0.08);
  --border-strong: rgba(136, 19, 55, 0.15);
  --border-glow: rgba(244, 63, 94, 0.40);

  --text: #4C0519;
  --text-muted: #9F1239;
  --text-soft: #BE185D;

  --primary: #BE185D;
  --primary-hover: #9F1239;
  --primary-2: #F43F5E;
  --primary-3: #FB7185;
  --primary-soft: rgba(190, 24, 93, 0.10);
  --primary-text: #FFFFFF;
  --primary-glow: rgba(244, 63, 94, 0.22);

  --gradient-primary: linear-gradient(135deg, #F43F5E 0%, #9F1239 100%);
  --gradient-primary-soft: linear-gradient(135deg, rgba(244, 63, 94, 0.10) 0%, rgba(159, 18, 57, 0.10) 100%);
  --gradient-violet: linear-gradient(135deg, #FDA4AF, #BE185D);
  --gradient-indigo: linear-gradient(135deg, #FDA4AF, #BE185D);

  --code-bg: #FECDD3;
  --code-text: #9F1239;

  --shadow-xs: 2px 2px 4px rgba(244, 63, 94, 0.16), -2px -2px 4px rgba(255, 255, 255, 0.9);
  --shadow-sm: 4px 4px 10px rgba(244, 63, 94, 0.18), -4px -4px 10px rgba(255, 255, 255, 0.9);
  --shadow-md: 8px 8px 20px rgba(244, 63, 94, 0.20), -8px -8px 20px rgba(255, 255, 255, 0.95);
  --shadow-lg: 12px 12px 32px rgba(244, 63, 94, 0.22), -12px -12px 32px rgba(255, 255, 255, 1);
  --shadow-glow: 0 8px 24px rgba(244, 63, 94, 0.18), 6px 6px 16px rgba(244, 63, 94, 0.18), -6px -6px 16px rgba(255, 255, 255, 0.95);
  --shadow-glow-strong: 0 12px 36px rgba(244, 63, 94, 0.22), 8px 8px 20px rgba(244, 63, 94, 0.20), -8px -8px 20px rgba(255, 255, 255, 1);
}

/* === accent: teal 深青绿（工程师友好） === */
[data-theme="light"][data-accent="teal"] {
  --bg: #F0FDFA;
  --bg-2: #CCFBF1;
  --bg-subtle: #CCFBF1;
  --bg-hover: rgba(15, 118, 110, 0.06);

  --border: rgba(15, 118, 110, 0.10);
  --border-strong: rgba(15, 118, 110, 0.18);
  --border-glow: rgba(20, 184, 166, 0.40);

  --text: #042F2E;
  --text-muted: #0F766E;
  --text-soft: #14B8A6;

  --primary: #0F766E;
  --primary-hover: #0D5C56;
  --primary-2: #14B8A6;
  --primary-3: #5EEAD4;
  --primary-soft: rgba(15, 118, 110, 0.10);
  --primary-text: #FFFFFF;
  --primary-glow: rgba(20, 184, 166, 0.22);

  --gradient-primary: linear-gradient(135deg, #14B8A6 0%, #0D5C56 100%);
  --gradient-primary-soft: linear-gradient(135deg, rgba(20, 184, 166, 0.10) 0%, rgba(13, 92, 86, 0.10) 100%);
  --gradient-violet: linear-gradient(135deg, #5EEAD4, #0F766E);
  --gradient-indigo: linear-gradient(135deg, #5EEAD4, #0F766E);

  --code-bg: #CCFBF1;
  --code-text: #0D5C56;

  --shadow-xs: 2px 2px 4px rgba(20, 184, 166, 0.18), -2px -2px 4px rgba(255, 255, 255, 0.9);
  --shadow-sm: 4px 4px 10px rgba(20, 184, 166, 0.20), -4px -4px 10px rgba(255, 255, 255, 0.9);
  --shadow-md: 8px 8px 20px rgba(20, 184, 166, 0.22), -8px -8px 20px rgba(255, 255, 255, 0.95);
  --shadow-lg: 12px 12px 32px rgba(20, 184, 166, 0.25), -12px -12px 32px rgba(255, 255, 255, 1);
  --shadow-glow: 0 8px 24px rgba(20, 184, 166, 0.20), 6px 6px 16px rgba(20, 184, 166, 0.20), -6px -6px 16px rgba(255, 255, 255, 0.95);
  --shadow-glow-strong: 0 12px 36px rgba(20, 184, 166, 0.25), 8px 8px 20px rgba(20, 184, 166, 0.22), -8px -8px 20px rgba(255, 255, 255, 1);
}

/* ===== 亮色 body：暖灰底 + 取消深色光斑 ===== */
[data-theme="light"] body {
  background: var(--bg);
  background-image:
    radial-gradient(at 10% 0%, rgba(168, 162, 158, 0.18) 0px, transparent 50%),
    radial-gradient(at 90% 100%, rgba(120, 113, 108, 0.12) 0px, transparent 50%);
  color: var(--text);
}
[data-theme="light"] body::before,
[data-theme="light"] body::after { display: none; }

/* ===== 亮色 link ===== */
[data-theme="light"] a { color: var(--primary); }
[data-theme="light"] a:hover { color: var(--primary-hover); }

/* ===== 亮色 code ===== */
[data-theme="light"] code {
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--border);
}

/* ===== 亮色 sidebar：白玻璃 + 双向投影 ===== */
[data-theme="light"] .sidebar {
  background: var(--bg-sidebar);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid var(--border);
  box-shadow: 6px 0 24px rgba(163, 167, 184, 0.18);
}
[data-theme="light"] .brand-logo {
  box-shadow: 4px 4px 12px rgba(163, 167, 184, 0.40), -2px -2px 8px rgba(255, 255, 255, 0.9), 0 0 16px var(--primary-glow);
}
[data-theme="light"] .side-link {
  color: var(--text-muted);
}
[data-theme="light"] .side-link:hover {
  background: var(--bg-hover);
  color: var(--text);
  box-shadow: 3px 3px 8px rgba(163, 167, 184, 0.20), -2px -2px 6px rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .side-link.active {
  background: var(--gradient-primary-soft);
  color: var(--primary);
  font-weight: 600;
}

/* ===== 亮色 user-card ===== */
[data-theme="light"] .user-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .avatar {
  background: var(--gradient-primary);
  color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6), 0 4px 12px var(--primary-glow);
}
[data-theme="light"] .user-name { color: var(--text); }
[data-theme="light"] .user-sub { color: var(--text-muted); }
[data-theme="light"] .sidebar-footer { border-top: 1px solid var(--border); }

/* ===== 亮色 page title：实色（避免 backdrop-filter 祖先渲染 gradient text 失败） ===== */
[data-theme="light"] .page-title {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  background: none;
}
[data-theme="light"] .page-desc { color: var(--text-muted); }

/* ===== 亮色 card：白底 + 双向投影（拟态核心） ===== */
[data-theme="light"] .card {
  background: var(--bg-panel);
  backdrop-filter: none;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .card::before { display: none; }
[data-theme="light"] .card.is-interactive:hover {
  border-color: var(--border-glow);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--primary-glow);
}

[data-theme="light"] .card-title { color: var(--text); }
[data-theme="light"] .card-title .lucide { color: var(--primary); filter: drop-shadow(0 0 6px var(--primary-glow)); }

[data-theme="light"] .section {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .section-title { color: var(--text); }
[data-theme="light"] .section-title .lucide { color: var(--primary); filter: drop-shadow(0 0 6px var(--primary-glow)); }

/* ===== 亮色 form：凹陷柔白底 ===== */
[data-theme="light"] .form-row label { color: var(--text-muted); }
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: #FFFFFF;  /* 单独写 background-color，避免 background 简写清掉 select 的箭头色 */
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: inset 2px 2px 5px rgba(163, 167, 184, 0.20), inset -2px -2px 5px rgba(255, 255, 255, 0.9);
}
[data-theme="light"] input:hover,
[data-theme="light"] select:hover,
[data-theme="light"] textarea:hover {
  border-color: var(--border-strong);
  box-shadow: inset 3px 3px 6px rgba(163, 167, 184, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 1);
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] input[data-test-focus="true"],
[data-theme="light"] select[data-test-focus="true"],
[data-theme="light"] textarea[data-test-focus="true"] {
  outline: none;
  border-color: var(--primary);
  background: #FFFFFF;
  box-shadow:
    inset 2px 2px 5px rgba(163, 167, 184, 0.20),
    inset -2px -2px 5px rgba(255, 255, 255, 0.9),
    0 0 0 4px var(--primary-glow),
    0 0 16px var(--primary-glow);
}
[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover,
[data-theme="light"] input:-webkit-autofill:focus,
[data-theme="light"] textarea:-webkit-autofill,
[data-theme="light"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: inset 2px 2px 5px rgba(163, 167, 184, 0.20), inset -2px -2px 5px rgba(255, 255, 255, 0.9), 0 0 0 1000px #FFFFFF inset !important;
  caret-color: var(--text);
}
[data-theme="light"] ::placeholder { color: var(--text-soft); opacity: 1; }
[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
[data-theme="light"] select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ===== 亮色 button ===== */
[data-theme="light"] .btn-primary {
  background: var(--gradient-primary);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(79, 70, 229, 0.18);
}
[data-theme="light"] .btn-primary:hover:not(:disabled) {
  background-position: 100% 50%;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 10px rgba(79, 70, 229, 0.28);
}
[data-theme="light"] .btn-primary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--primary-glow);
}
[data-theme="light"] .btn-secondary {
  background: #FFFFFF;
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .btn-secondary:hover:not(:disabled) {
  background: #FFFFFF;
  border-color: var(--border-glow);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--primary-glow);
}
[data-theme="light"] .btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="light"] .btn-outline:hover:not(:disabled) {
  background: #FFFFFF;
  border-color: var(--border-glow);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
[data-theme="light"] .btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text);
  border-color: transparent;
}
[data-theme="light"] .btn-danger {
  background: #FFFFFF;
  color: var(--danger-text);
  border-color: rgba(220, 38, 38, 0.25);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .btn-danger:hover:not(:disabled) {
  background: var(--danger-soft);
  border-color: var(--danger);
  box-shadow: 0 0 16px rgba(220, 38, 38, 0.20);
}
[data-theme="light"] .icon-btn {
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--text-muted);
  box-shadow: var(--shadow-xs);
}
[data-theme="light"] .icon-btn:hover {
  background: #FFFFFF;
  color: var(--primary);
  border-color: var(--border-glow);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--primary-glow);
}

/* ===== 亮色 result-box ===== */
[data-theme="light"] .result-box {
  background: #FFFFFF;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .result-box::before {
  background: linear-gradient(90deg, transparent, var(--primary-glow), transparent);
}
[data-theme="light"] .result-box h1, [data-theme="light"] .result-box h2 { color: var(--text); }
[data-theme="light"] .result-box h3 { color: var(--text-muted); }
[data-theme="light"] .result-box li, [data-theme="light"] .result-box p, [data-theme="light"] .result-box strong { color: var(--text); }
[data-theme="light"] .result-box code {
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--border);
}
[data-theme="light"] .result-box pre {
  background: #F8F8FC;
  color: #1C1917;
  border: 1px solid var(--border);
  box-shadow: inset 2px 2px 4px rgba(163, 167, 184, 0.10);
}
[data-theme="light"] .cache-tag { color: var(--text-muted); border-top: 1px solid var(--border); }

/* ===== 亮色 Markdown 增强覆盖 ===== */
[data-theme="light"] .result-box .md-p { color: var(--text); }
[data-theme="light"] .result-box h1.md-h1 { color: var(--text); border-bottom-color: var(--border); }
[data-theme="light"] .result-box h2.md-h2 { color: var(--text); }
[data-theme="light"] .result-box h3.md-h3 { color: var(--text-muted); }
[data-theme="light"] .result-box li.md-li { color: var(--text); }
[data-theme="light"] .result-box ul.md-ul li.md-li::marker { color: var(--primary); }
[data-theme="light"] .result-box ol.md-ol li.md-li::marker { color: var(--primary-muted); }
[data-theme="light"] .result-box strong { color: var(--text); }
[data-theme="light"] .result-box em { color: var(--text-muted); }
[data-theme="light"] .result-box .md-quote {
  background: rgba(99, 102, 241, 0.06);
  color: var(--text-muted);
}
[data-theme="light"] .result-box .md-quote strong { color: var(--text); }
[data-theme="light"] .result-box .md-hr {
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
[data-theme="light"] .result-box code.md-code {
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--border);
}
[data-theme="light"] .result-box .md-link {
  color: var(--primary);
  border-bottom-color: var(--primary-glow);
}
[data-theme="light"] .result-box .md-link:hover {
  color: var(--primary-hover, var(--primary));
  border-bottom-color: var(--primary);
}
[data-theme="light"] .result-box .md-table thead th,
[data-theme="light"] .result-box thead th { background: var(--bg-panel-2); }
[data-theme="light"] .result-box .md-table tbody tr:hover td,
[data-theme="light"] .result-box tbody tr:hover td { background: var(--bg-panel-2); }
[data-theme="light"] .result-box .md-code-wrap {
  background: #FAFAF9;
  border-color: #E7E5E4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .result-box .md-code-wrap .md-code-head {
  background: linear-gradient(180deg, #F5F5F4, #FAFAF9);
  border-bottom-color: #E7E5E4;
  color: #78716C;
}
[data-theme="light"] .result-box .md-code-wrap .md-code-copy {
  background: #FFFFFF;
  border-color: #E7E5E4;
}
[data-theme="light"] .result-box .md-code-wrap .md-code-copy:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: var(--primary-glow);
}
[data-theme="light"] .result-box .md-table tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.015); }

/* ===== 亮色 badge ===== */
[data-theme="light"] .badge {
  background: #F2F2F7;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
[data-theme="light"] .badge-on { background: var(--success-soft); color: var(--success-text); border-color: rgba(5, 150, 105, 0.30); }
[data-theme="light"] .badge-off { background: var(--danger-soft); color: var(--danger-text); border-color: rgba(220, 38, 38, 0.25); }
[data-theme="light"] .badge-admin { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-glow); }

/* ===== 亮色 hint / error ===== */
[data-theme="light"] .hint { color: var(--text-muted); }
[data-theme="light"] .hint a { color: var(--primary); }
[data-theme="light"] .error {
  color: var(--danger-text);
  background: var(--danger-soft);
  border: 1px solid rgba(220, 38, 38, 0.25);
}

/* 亮色 result-toolbar / cache-tag / loading / error */
[data-theme="light"] .result-toolbar { border-bottom-color: var(--border); }
[data-theme="light"] .result-toolbar .cache-tag {
  background: var(--bg-subtle);
  border-color: var(--border);
}
[data-theme="light"] .result-toolbar .copy-btn,
[data-theme="light"] .result-toolbar .btn-regen {
  background: var(--bg);
  border-color: var(--border);
}
[data-theme="light"] .result-toolbar .copy-btn:hover,
[data-theme="light"] .result-toolbar .btn-regen:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
}
[data-theme="light"] .result-error {
  background: var(--danger-soft);
  border-color: rgba(220, 38, 38, 0.25);
}
[data-theme="light"] .result-error-icon {
  background: rgba(239, 68, 68, 0.15);
}
[data-theme="light"] .btn-retry {
  background: var(--bg);
  border-color: var(--border-strong);
}
[data-theme="light"] .btn-retry:hover {
  background: var(--bg-hover);
  border-color: var(--primary);
}

/* ===== 亮色 modal ===== */
[data-theme="light"] .modal { background: rgba(15, 23, 42, 0.40); }
[data-theme="light"] .modal-content {
  background: #FFFFFF;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}
[data-theme="light"] .modal-content h3 { color: var(--text); }

/* ===== 亮色 table ===== */
[data-theme="light"] th { color: var(--text-muted); border-bottom-color: var(--border); }
[data-theme="light"] th, [data-theme="light"] td { border-bottom: 1px solid var(--border); }
[data-theme="light"] tbody tr:hover { background: var(--bg-subtle); }

/* ===== 亮色 verdict chip（语义色已经在 token 里） ===== */
[data-theme="light"] .verdict-WA,
[data-theme="light"] .verdict-RE { color: var(--danger-text); background: var(--danger-soft); border-color: rgba(220, 38, 38, 0.25); }
[data-theme="light"] .verdict-TLE,
[data-theme="light"] .verdict-MLE,
[data-theme="light"] .verdict-OLE { color: var(--warning-text); background: var(--warning-soft); border-color: rgba(217, 119, 6, 0.25); }
[data-theme="light"] .verdict-AC { color: var(--success-text); background: var(--success-soft); border-color: rgba(5, 150, 105, 0.25); }
[data-theme="light"] .verdict-CE { color: var(--text-muted); background: var(--bg-subtle); }

/* ===== 亮色 progress：渐变填充 + 暖阴影 ===== */
[data-theme="light"] .progress {
  background: #E8E8EE;
  box-shadow: inset 2px 2px 4px rgba(163, 167, 184, 0.30), inset -2px -2px 4px rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .progress .bar {
  background: var(--gradient-primary);
  box-shadow: 0 0 8px var(--primary-glow);
}

/* ===== 亮色 stat-card：白底 + 紫色光晕右上 ===== */
[data-theme="light"] .stat-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .stat-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--primary-glow);
}
[data-theme="light"] .stat-card::before {
  background: radial-gradient(circle, var(--primary-glow), transparent 70%);
}
[data-theme="light"] .stat-label { color: var(--text-muted); }
[data-theme="light"] .stat-value {
  /* 不用 gradient（Chrome 在 backdrop-filter 祖先里渲染 background-clip:text 不可靠，会隐形） */
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}
[data-theme="light"] .stat-value-sub { -webkit-text-fill-color: var(--text-muted); color: var(--text-muted); }
[data-theme="light"] .stat-foot { color: var(--text-muted); }
[data-theme="light"] .stat-trend.up   { color: var(--success-text); }
[data-theme="light"] .stat-trend.down { color: var(--danger-text); }
[data-theme="light"] .stat-trend.flat { color: var(--text-soft); }

/* ===== 亮色 toolbar ===== */
[data-theme="light"] .toolbar label { color: var(--text-muted); }

/* ===== 亮色后台工具 ===== */
[data-theme="light"] .util-row { border-bottom: 1px solid var(--border); }
[data-theme="light"] .util-row-empty { color: var(--text-muted); }
[data-theme="light"] .util-error-item { border-bottom: 1px solid var(--border); color: var(--text); }
[data-theme="light"] .util-username { color: var(--text-muted); }
[data-theme="light"] .util-stats-inline { color: var(--text-muted); }

/* ===== 亮色 toast ===== */
[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

/* ===== 亮色 skeleton ===== */
[data-theme="light"] .skeleton {
  background: #E8E8EE;
  box-shadow: inset 1px 1px 3px rgba(163, 167, 184, 0.20), inset -1px -1px 3px rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary-glow) 50%,
    transparent
  );
}

/* ===== 亮色 empty-state ===== */
[data-theme="light"] .empty-state { color: var(--text-muted); }
[data-theme="light"] .empty-state .lucide {
  color: var(--primary);
  filter: drop-shadow(0 0 10px var(--primary-glow));
}
[data-theme="light"] .empty-state-title { color: var(--text); }
[data-theme="light"] .empty-state-hint { color: var(--text-muted); }

/* ===== 亮色 copy button ===== */
[data-theme="light"] .copy-btn {
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--text-muted);
  box-shadow: var(--shadow-xs);
}
[data-theme="light"] .copy-btn:hover {
  color: var(--primary);
  border-color: var(--border-glow);
  background: #FFFFFF;
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--primary-glow);
}
[data-theme="light"] .copy-btn.copied {
  color: var(--success-text);
  border-color: var(--success);
  background: var(--success-soft);
}

/* ===== 亮色 sparkline ===== */
[data-theme="light"] .sparkline polyline {
  stroke: var(--primary);
  filter: drop-shadow(0 0 4px var(--primary-glow));
}
[data-theme="light"] .sparkline.up polyline { stroke: var(--success); filter: drop-shadow(0 0 4px rgba(5, 150, 105, 0.40)); }
[data-theme="light"] .sparkline.down polyline { stroke: var(--danger); filter: drop-shadow(0 0 4px rgba(220, 38, 38, 0.40)); }

/* ===== 亮色 chart-wrap ===== */
[data-theme="light"] .chart-wrap {
  background: #F8F8FC;
  border: 1px solid var(--border);
  box-shadow: inset 2px 2px 4px rgba(163, 167, 184, 0.10);
}

/* ===== 亮色滚动条 ===== */
[data-theme="light"] ::-webkit-scrollbar-track { background: #EBEBF2; }
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #C8C8D0;
  border: 2px solid #EBEBF2;
  background-clip: padding-box;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #78716C; background-clip: padding-box; border: 2px solid #F5F5F4; }

[data-theme="light"] ::selection { background: var(--primary-glow); color: var(--text); }

/* ===== 亮色 status-pill ===== */
[data-theme="light"] .status-pill {
  background: #F2F2F7;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
[data-theme="light"] .status-pill .dot {
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

/* ===== 主题色选择器 ===== */

.accent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.accent-swatch {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform 120ms var(--ease);
  position: relative;
}
.accent-swatch:hover {
  border-color: var(--border-strong);
  background: var(--bg-panel-2);
  transform: translateY(-1px);
}
.accent-swatch.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.accent-swatch.is-active::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 11px;
  color: var(--primary);
  font-weight: 700;
}
.swatch-dot {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.swatch-name {
  font-size: 13.5px;
  color: var(--text);
}

/* "推荐" 副标签 + 头部小图标 */
.accent-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-4);
}
.accent-section-head .accent-section-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.accent-section-head .accent-section-badge {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  text-transform: uppercase;
}
/* 让 zone-label 内的 inline 徽章也能复用 */
.zone-label .accent-section-badge {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  color: var(--primary);
  text-transform: uppercase;
}

/* ===== 危险操作 ghost 按钮（删除/清空等） ===== */
.btn-ghost.btn-danger-ghost {
  color: var(--danger-text);
}
.btn-ghost.btn-danger-ghost:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--danger-text);
}

/* ===== stat-card 顶部右下角 action slot（与 sparkline 同位置） ===== */
.stat-card-action {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}

/* ===== 自定义主色 hue 拖动条 ===== */
.hue-bar-wrap {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  position: relative;
}
.hue-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.hue-bar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}
.hue-bar-title-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg,
    hsl(0, 80%, 55%) 0%,
    hsl(60, 80%, 50%) 17%,
    hsl(120, 70%, 45%) 33%,
    hsl(180, 75%, 45%) 50%,
    hsl(240, 75%, 60%) 66%,
    hsl(300, 70%, 55%) 83%,
    hsl(360, 80%, 55%) 100%);
  flex-shrink: 0;
}
.hue-readout {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  min-width: 76px;
  text-align: center;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.hue-readout.is-custom {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}
.hue-bar {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(to right,
    hsl(0, 78%, 52%) 0%,
    hsl(30, 78%, 52%) 8%,
    hsl(60, 78%, 50%) 17%,
    hsl(90, 72%, 46%) 25%,
    hsl(120, 68%, 42%) 33%,
    hsl(150, 68%, 42%) 42%,
    hsl(180, 68%, 42%) 50%,
    hsl(210, 70%, 50%) 58%,
    hsl(240, 72%, 56%) 66%,
    hsl(270, 68%, 55%) 75%,
    hsl(300, 68%, 52%) 83%,
    hsl(330, 72%, 52%) 92%,
    hsl(360, 78%, 52%) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  user-select: none;
  touch-action: none;
  outline: none;
}
.hue-bar:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 0 0 3px var(--primary-soft);
}
.hue-thumb {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: box-shadow 150ms var(--ease), transform 150ms var(--ease);
}
.hue-bar:hover .hue-thumb {
  transform: translate(-50%, -50%) scale(1.1);
}
.hue-bar.is-dragging .hue-thumb {
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow:
    0 0 0 4px var(--primary-soft),
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .accent-swatch,
[data-theme="dark"] .hue-bar-wrap {
  display: none;
}

/* =========================================================================
   CustomSelect · 自定义下拉框（替代原生 <select>）
   - 保留原生 select 在 DOM 中（hidden），仅视觉替换
   - 5 主题适配：dark(默认) + light × 4 accent
   - Panel 用 fixed 定位（JS 注入 left/top），不在 .cs-root 内层流中
   ========================================================================= */

/* 隐藏被替换的原生 select，但保留其作为 value source of truth */
select[data-cs-src] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cs-root {
  position: relative;
  display: block;
  width: 100%;
}

/* === 触发按钮（视觉等价于 select） === */
.cs-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 10px 38px 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform 120ms var(--ease);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.cs-trigger:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-panel-2);
}
.cs-trigger:focus,
.cs-trigger:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow), 0 0 16px var(--primary-glow);
}
.cs-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-subtle);
}
.cs-trigger .cs-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.cs-trigger .cs-chevron-svg {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%) rotate(0deg);
  color: var(--text-muted);
  transition: transform var(--t-base) var(--ease-spring),
              color var(--t-fast) var(--ease);
  pointer-events: none;
}
.cs-root.is-open .cs-trigger {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow), 0 0 16px var(--primary-glow);
}
.cs-root.is-open .cs-trigger .cs-chevron-svg {
  transform: translateY(-50%) rotate(180deg);
  color: var(--primary);
}

/* === 弹出面板（fixed JS 定位） === */
.cs-panel {
  position: fixed;
  z-index: 9999;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  animation: cs-pop var(--t-base) var(--ease-spring);
  transform-origin: top center;
}
.cs-panel.cs-flip {
  transform-origin: bottom center;
  animation-name: cs-pop-up;
}
@keyframes cs-pop {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes cs-pop-up {
  0%   { opacity: 0; transform: translateY(6px)  scale(0.97); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* === optgroup 分组标题 === */
.cs-optgroup {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  user-select: none;
  cursor: default;
  list-style: none;
}

/* === 选项 === */
.cs-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform 120ms var(--ease);
  position: relative;
  user-select: none;
}
.cs-option .cs-check {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: color var(--t-fast) var(--ease);
}
.cs-option .cs-check .cs-check-svg {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}
.cs-option .cs-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-option:hover,
.cs-option.is-highlight {
  background: var(--bg-panel-2);
  color: var(--text);
}
.cs-option.is-selected {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.cs-option.is-selected .cs-check {
  color: var(--primary);
}
.cs-option.is-highlight.is-selected {
  background: var(--primary-soft);
  filter: brightness(1.15);
}
.cs-option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.cs-option:active {
  transform: scale(0.985);
}

/* === 无障碍 / 屏幕阅读器 === */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === 自定义滚动条（panel 内） === */
.cs-panel::-webkit-scrollbar {
  width: 8px;
}
.cs-panel::-webkit-scrollbar-track {
  background: transparent;
}
.cs-panel::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 8px;
}
.cs-panel::-webkit-scrollbar-thumb:hover {
  background: var(--text-soft);
}

/* === Light 主题下的玻璃面板加深（不被背景完全吃没） === */
[data-theme="light"] .cs-panel {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color: var(--border-strong);
  box-shadow:
    var(--shadow-md),
    0 0 0 1px rgba(0, 0, 0, 0.02) inset;
}
[data-theme="light"] .cs-option {
  color: #1F2937;
}
[data-theme="light"] .cs-option:hover,
[data-theme="light"] .cs-option.is-highlight {
  background: rgba(0, 0, 0, 0.05);
  color: #0F172A;
}
[data-theme="light"] .cs-root.is-open .cs-trigger {
  background-color: #FFFFFF;
}

/* === ARIA invalid 联动（与 input/select 已有规则一致） === */
.cs-root[aria-invalid="true"] .cs-trigger,
.cs-trigger[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.cs-root[aria-invalid="true"] .cs-trigger:focus {
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.25),
    0 0 0 5px rgba(239, 68, 68, 0.12);
}

/* 关闭时面板无障碍：hidden 属性已经做到，这里再保险 */
.cs-panel[hidden] { display: none !important; }

/* 减少动画（系统偏好） */
@media (prefers-reduced-motion: reduce) {
  .cs-panel, .cs-panel.cs-flip { animation: none !important; }
  .cs-trigger, .cs-option, .cs-trigger .cs-chevron-svg { transition: none !important; }
}

/* ============================================================
   AI 对话（chat tab）
   ============================================================ */

/* 对话容器：标准 .card 包住 .chat-shell；
   .chat-shell 只管内部布局（flex 列 + 滚动），不负责外观，
   视觉风格完全交给外层 .card */
.chat-card {
  padding: 0;                  /* 去掉 .card 默认 padding，让内部容器撑满 */
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* 切掉外部玻璃卡自己的滚动，里面自己管 */
  height: calc(100dvh - var(--s-6) * 2 - 72px);   /* 视口 - 上下 padding - page-title 区 */
  min-height: 520px;
}

.chat-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* 卡片内部 metadata header：左 logo+标题+状态，右操作区 */
.chat-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.025) 0%,
      rgba(255, 255, 255, 0) 100%);
}
.chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.chat-header-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  border: 1px solid rgba(99, 102, 241, 0.25);
}
.chat-header-icon i { width: 16px; height: 16px; }
.chat-header-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.chat-header-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.2;
  margin-top: 2px;
}
.chat-header-status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  animation: chat-status-pulse 2.4s ease-in-out infinite;
}
@keyframes chat-status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.05); }
}
.chat-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-header-btn {
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 160ms;
}
.chat-header-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border);
  color: var(--text);
}
.chat-header-btn i { width: 13px; height: 13px; }

/* 消息列表：垂直滚动，加大内边距让气泡永远不贴边 */
.chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 32px 20px;          /* 顶部 / 左右 / 底部均留出空气 */
  scroll-behavior: smooth;
  scrollbar-gutter: stable;         /* 给滚动条预留空间，避免内容跳动 */
}

/* 滚动条（webkit）：更细更柔 */
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.18);
  border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.32); }

/* 空状态：第一次打开时 */
.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  color: var(--text-soft);
  gap: 16px;
  padding: 48px 32px;
}
.chat-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 80% 80% at 50% 30%,
      rgba(139, 92, 246, 0.20) 0%,
      transparent 70%),
    linear-gradient(135deg,
      rgba(139, 92, 246, 0.10) 0%,
      rgba(99, 102, 241, 0.10) 100%);
  border: 1px solid rgba(139, 92, 246, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px -12px rgba(139, 92, 246, 0.40);
}
.chat-empty-icon i {
  width: 32px;
  height: 32px;
  color: #A78BFA;                       /* 浅紫，对比足够 */
}
.chat-empty-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.chat-empty-hint {
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 420px;
  line-height: 1.65;
}
.chat-empty-suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
  width: 100%;
  max-width: 460px;
}
.chat-suggest {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all 160ms;
  font-family: inherit;
  line-height: 1.4;
}
.chat-suggest:hover {
  background: rgba(139, 92, 246, 0.10);
  border-color: rgba(139, 92, 246, 0.35);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(139, 92, 246, 0.25);
}
.chat-suggest:active { transform: translateY(0); }

/* 单条消息 */
.chat-msg {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;             /* 消息间多留点呼吸 */
  animation: chat-msg-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 头像 */
.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}
.chat-msg-user .chat-avatar {
  background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
  color: #fff;
}
.chat-msg-assistant .chat-avatar {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff;
}

/* 消息气泡：内 padding 加大，让文字与边界有空气 */
.chat-bubble {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(80%, 720px);             /* 大屏也不至于太宽 */
  padding: 14px 18px;                     /* 原来 10px 14px → 14px 18px */
  border-radius: 14px;
  word-wrap: break-word;
  line-height: 1.65;
  font-size: 14.5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.chat-msg-user .chat-bubble {
  /* user 气泡：紫色渐变更饱和 + 边框加深 + 内发光 */
  background:
    linear-gradient(135deg,
      rgba(139, 92, 246, 0.22) 0%,
      rgba(99, 102, 241, 0.22) 100%);
  border: 1px solid rgba(139, 92, 246, 0.32);
  color: var(--text);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;        /* 贴头像那一角收小 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 14px -6px rgba(139, 92, 246, 0.30);
}
/* user 消息整行反向：头像在右，气泡在左 */
.chat-msg-user {
  flex-direction: row-reverse;
}
.chat-msg-user .chat-avatar {
  flex: 0 0 auto;
}
.chat-msg-user .chat-bubble {
  text-align: left;
}
.chat-msg-assistant .chat-bubble {
  /* 暖色微渐变，跟壳颜色区分开（不靠边框，只靠微差） */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.025) 0%,
      rgba(255, 255, 255, 0) 100%),
    var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-msg-error .chat-bubble {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--danger);
}

/* 气泡内的 markdown 内容：用 .result-md 同样的样式（共享规则） */
/* md() 输出的是裸 block 拼接（没有 .result-md 容器），所以用 .chat-bubble-body 直接选 */
.chat-bubble-body > *:first-child { margin-top: 0; }
.chat-bubble-body > *:last-child { margin-bottom: 0; }
.chat-bubble-body p { margin: 0.4em 0; }
.chat-bubble-body ul,
.chat-bubble-body ol { margin: 0.5em 0; padding-left: 1.5em; }
.chat-bubble-body li { margin: 0.15em 0; }
.chat-bubble-body h1,
.chat-bubble-body h2,
.chat-bubble-body h3 { margin: 0.7em 0 0.4em; font-weight: 600; }
.chat-bubble-body h1 { font-size: 1.25em; }
.chat-bubble-body h2 { font-size: 1.1em; }
.chat-bubble-body h3 { font-size: 1em; }
.chat-bubble-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 5px;
  background: var(--bg);
  border-radius: 4px;
  border: 1px solid var(--border);
}
.chat-bubble pre {
  background: var(--bg);
  border: 1px solid var(--border);
}

/* Meta 行：模型 + 用量 + 复制按钮 */
.chat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-soft);
}
.chat-meta-tag {
  padding: 2px 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-mono);
}
.chat-meta-copy {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 160ms;
}
.chat-meta-copy:hover { background: var(--bg-soft); color: var(--text); }
.chat-meta-copy i { width: 12px; height: 12px; }
.chat-meta-copy.is-copied { color: var(--success); border-color: rgba(16, 185, 129, 0.4); }

/* 流式占位（AI 还在生成时的"思考"动画） */
.chat-bubble.is-streaming::after {
  content: '▍';
  display: inline-block;
  margin-left: 2px;
  color: var(--accent);
  animation: chat-blink 1s steps(2, start) infinite;
}
@keyframes chat-blink {
  to { opacity: 0; }
}

/* "思考中"占位：3 个跳动圆点 + 文案，仅在响应未到达时显示 */
.chat-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  color: var(--text-muted);
  font-size: 13px;
}
.chat-thinking-label {
  letter-spacing: 0.5px;
}
.chat-thinking-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 14px;
}
.chat-thinking-dots > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #8B5CF6);
  opacity: 0.4;
  animation: chat-thinking-bounce 1.2s ease-in-out infinite;
}
.chat-thinking-dots > span:nth-child(2) { animation-delay: 0.15s; }
.chat-thinking-dots > span:nth-child(3) { animation-delay: 0.30s; }
@keyframes chat-thinking-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1.0; }
}
/* 浅色主题下圆点颜色更深一点保证对比度 */
[data-theme="light"] .chat-thinking-dots > span {
  background: hsl(var(--hue, 240), 65%, 45%);
}

/* 输入区：吸底 + 玻璃感（顶部细分隔 + 微微不同底色） */
.chat-input-wrap {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.012) 0%,
      rgba(0, 0, 0, 0.04) 100%),
    var(--bg-soft);
  padding: 16px 24px;                  /* 左右 padding 与消息区对齐 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-textarea {
  width: 100%;
  min-height: 48px;
  max-height: 200px;
  padding: 12px 16px;                  /* 与气泡水平 padding 接近（14/18 vs 12/16） */
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.55;
  resize: none;
  overflow-y: auto;
  transition: border-color 160ms, box-shadow 160ms, background 160ms;
  outline: none;
  font-family: inherit;
}
.chat-textarea:hover { border-color: var(--border-strong); }
.chat-textarea:focus {
  border-color: rgba(139, 92, 246, 0.45);
  background: rgba(139, 92, 246, 0.03);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}
.chat-textarea::placeholder { color: var(--text-soft); }
.chat-textarea:disabled { opacity: 0.6; cursor: not-allowed; }

.chat-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-status {
  flex: 1 1 auto;
  font-size: 12px;
  color: var(--text-soft);
}
.chat-status.is-error { color: var(--danger); }
.chat-status.is-ok { color: var(--success); }

#btn-chat-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#btn-chat-send:disabled { opacity: 0.6; cursor: not-allowed; }

/* Light 主题下的气泡背景适配 */
[data-theme="light"] .chat-msg-assistant .chat-bubble {
  background: #ffffff;
}
[data-theme="light"] .chat-msg-user .chat-bubble {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
}

/* 移动端：紧凑一点 */
@media (max-width: 640px) {
  .chat-messages { padding: 14px 14px 8px; }
  .chat-bubble { max-width: 86%; font-size: 15px; }
}