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

:root {
  --bg: #f8f9fb;
  --surface: #ffffff;
  --border: #e8eaef;
  --text: #1a1a2e;
  --text-secondary: #6b7280;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-light: #eff6ff;
  --accent-glow: rgba(37, 99, 235, 0.12);
  --green: #059669;
  --green-light: #ecfdf5;
  --amber: #d97706;
  --amber-light: #fffbeb;
  --purple: #7c3aed;
  --purple-light: #f5f3ff;
  --red: #dc2626;
  --red-light: #fef2f2;
  --radius: 12px;
  --radius-sm: 8px;
  --font: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
  --shadow: 0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.08);
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.06);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.06);
  --shadow-inset: inset 0 1px 3px rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.04);
  --rim-highlight: inset 0 1px 0 rgba(255,255,255,.7);
  --rim-highlight-dark: inset 0 1px 0 rgba(255,255,255,.06);
  --nav-bg: rgba(248,249,251,.8);
  --pre-bg: #1e1e2a;
  --pre-color: #c9d1d9;
  --inline-code-bg: #f1f3f6;
  --table-header-bg: #f8f9fb;
  --overlay-bg: rgba(15,15,30,.5);
  --select-chevron: 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='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg: #0c0e14;
  --surface: #161820;
  --border: #262832;
  --text: #e6e8ed;
  --text-secondary: #8b8fa6;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-light: #1e2640;
  --accent-glow: rgba(59, 130, 246, 0.15);
  --green: #10b981;
  --green-light: #0f2f24;
  --amber: #f59e0b;
  --amber-light: #2d2410;
  --purple: #8b5cf6;
  --purple-light: #1e1b4b;
  --red: #ef4444;
  --red-light: #2d1414;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 4px 12px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4);
  --shadow-card: 0 1px 3px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.3);
  --shadow-inset: inset 0 1px 3px rgba(0,0,0,.2), inset 0 0 0 1px rgba(0,0,0,.15);
  --rim-highlight: inset 0 1px 0 rgba(255,255,255,.05);
  --rim-highlight-dark: inset 0 1px 0 rgba(255,255,255,.03);
  --nav-bg: rgba(12,14,20,.8);
  --pre-bg: #1e2028;
  --pre-color: #c9d1d9;
  --inline-code-bg: #1e2028;
  --table-header-bg: #1a1c24;
  --overlay-bg: rgba(0,0,0,.7);
  --select-chevron: 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='%238b8fa6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
}

/* Subtle animated background grid */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 50%, var(--accent-glow) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--purple-light) 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, var(--accent-glow) 0%, transparent 50%);
  background-size: 100% 100%;
  /* animation removed for performance */
  opacity: 0.6;
}
/* bgShift keyframes removed */

/* ============================================================
   Nav — glass morphism
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
  box-shadow: 0 1px 8px rgba(0,0,0,.03);
}
.nav-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 56px;
}
.logo {
  font-weight: 700; font-size: 18px; color: var(--accent);
  text-decoration: none; letter-spacing: -.02em;
  transition: opacity var(--transition);
}
.logo:hover { opacity: .8; }
.nav-links { display: flex; gap: 2px; flex-wrap: wrap; }
.nav-btn {
  padding: 6px 14px; border-radius: 8px; border: none; cursor: pointer;
  font: 500 13px var(--font); color: var(--text-secondary); background: transparent;
  transition: all var(--transition); position: relative;
}
.nav-btn:hover { color: var(--text); background: var(--border); }
.nav-btn.active { color: var(--accent); background: var(--accent-light); }

.theme-btn {
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); cursor: pointer;
  font-size: 15px; padding: 0; line-height: 34px; text-align: center;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.theme-btn:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 12px var(--accent-glow);
  transform: rotate(15deg);
}

.user-menu {
  display: flex; align-items: center; gap: 8px;
}
.user-email-display {
  font-size: 12px; color: var(--text-secondary); max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 10px; border-radius: 16px; cursor: pointer;
  transition: background .15s;
}
.user-email-display:hover { background: var(--inline-code-bg); }
.logout-btn {
  font-size: 12px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer;
  padding: 5px 12px; border-radius: 16px; transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.logout-btn:hover { border-color: var(--red); color: var(--red); }

/* ============================================================
   Layout
   ============================================================ */
main { max-width: 960px; margin: 0 auto; padding: 32px 24px 64px; }
.tab { display: none; }
.tab.active { display: block; animation: fadeSlideIn .35s ease; }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Wide-screen: shift content left to leave room for bubble overlay on the right */
@media (min-width: 1340px) {
  .nav-inner {
    margin-left: max(24px, calc((100vw - 960px) / 2 - 200px));
    margin-right: auto;
  }
  main {
    margin-left: max(24px, calc((100vw - 960px) / 2 - 200px));
    margin-right: auto;
  }
}

.hero {
  text-align: center; padding: 48px 0 36px;
  position: relative;
}
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--purple), transparent);
}
.hero h1 {
  font-size: 34px; font-weight: 800; letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 50%, var(--accent) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroShimmer 4s ease 1;
}
@keyframes heroShimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 200% center; }
}
.hero p { color: var(--text-secondary); margin-top: 10px; font-size: 16px; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ============================================================
   Stats bar
   ============================================================ */
.stats-bar {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin-bottom: 24px; padding: 14px 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.stat-item { text-align: center; padding: 0 28px; }
.stat-num {
  display: block; font-size: 22px; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label { font-size: 11px; color: var(--text-secondary); font-weight: 500; letter-spacing: .04em; }
.stat-divider { width: 1px; height: 28px; background: var(--border); }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 98%, var(--bg)) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card), var(--rim-highlight);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-card-hover), var(--rim-highlight);
  border-color: color-mix(in srgb, var(--border) 70%, var(--accent));
}

/* ============================================================
   Form fields
   ============================================================ */
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; letter-spacing: -.01em; }
.hint { font-weight: 400; color: var(--text-secondary); }
.field textarea, .field select, .filter-select, .search-input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: 14px/1.6 var(--font);
  background: var(--bg);
  box-shadow: var(--shadow-inset);
  transition: all var(--transition);
  color: var(--text);
}
.field textarea:focus, .field select:focus, .filter-select:focus, .search-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-inset);
}
.field textarea { resize: vertical; }
.field select, .filter-select {
  cursor: pointer; appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-row { display: flex; gap: 12px; }
.btn-row .btn-primary { flex: 1; }
.btn-primary {
  padding: 12px 24px; border: none; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
  font: 600 15px var(--font); cursor: pointer;
  transition: all var(--transition);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px var(--accent-glow), var(--rim-highlight), 0 1px 2px rgba(0,0,0,.1);
}
.btn-primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 90%, #fff) 0%, var(--accent) 100%); transform: translateY(-1px); box-shadow: 0 4px 16px var(--accent-glow), var(--rim-highlight), 0 2px 4px rgba(0,0,0,.15); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 4px var(--accent-glow), inset 0 1px 3px rgba(0,0,0,.2); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 2px 8px var(--accent-glow); }
.btn-secondary {
  padding: 12px 20px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  color: var(--text);
  font: 500 14px var(--font); cursor: pointer;
  transition: all var(--transition);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); box-shadow: var(--shadow); }
.btn-secondary:active { box-shadow: var(--shadow-inset); }
.btn-secondary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-sm {
  padding: 5px 14px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text-secondary);
  font: 500 13px var(--font); cursor: pointer;
  transition: all var(--transition);
}
.btn-sm:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

/* ============================================================
   Result
   ============================================================ */
.result-card { display: none; }
.result-card.visible { display: block; animation: fadeSlideIn .3s ease; }
.result-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.result-label { font-weight: 600; font-size: 15px; }
.result-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.streaming-hint { color: var(--text-secondary); font-size: 14px; animation: pulse 1.5s ease infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.streaming-cursor::after {
  content: '▋'; color: var(--accent);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================
   Markdown
   ============================================================ */
.markdown-body { font-size: 15px; line-height: 1.78; }
.markdown-body h1 { font-size: 24px; font-weight: 700; margin: 32px 0 12px; letter-spacing: -.02em; }
.markdown-body h2 { font-size: 20px; font-weight: 700; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); letter-spacing: -.01em; }
.markdown-body h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
.markdown-body h4 { font-size: 15px; font-weight: 600; margin: 16px 0 6px; }
.markdown-body p { margin: 10px 0; }
.markdown-body ul, .markdown-body ol { padding-left: 24px; margin: 8px 0; }
.markdown-body li { margin: 4px 0; }
.markdown-body strong { font-weight: 600; }
.markdown-body code {
  font-family: var(--mono); font-size: 13px;
  background: var(--inline-code-bg); padding: 2px 6px; border-radius: 4px;
}
.markdown-body pre {
  background: var(--pre-bg); color: var(--pre-color);
  padding: 20px 24px; border-radius: var(--radius-sm);
  overflow-x: auto; margin: 16px 0;
  font-family: var(--mono); font-size: 13px; line-height: 1.65;
}
.markdown-body pre code { background: none; padding: 0; color: inherit; }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
.markdown-body th { background: var(--table-header-bg); font-weight: 600; }
.markdown-body blockquote {
  border-left: 3px solid var(--accent); padding: 4px 16px; margin: 16px 0;
  color: var(--text-secondary); background: var(--accent-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ============================================================
   Section title
   ============================================================ */
.section-title {
  font-size: 20px; font-weight: 700; margin-bottom: 20px; letter-spacing: -.02em;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.section-desc {
  font-size: 13px; color: var(--text-secondary); margin: -16px 0 16px 0;
}

/* ============================================================
   Filter bar
   ============================================================ */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-bar .search-input { flex: 1; min-width: 180px; }
.filter-bar .filter-select { width: auto; min-width: 120px; }
.filter-hint { color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; }

/* ============================================================
   Skeleton loading
   ============================================================ */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.skeleton-card {
  height: 140px; border-radius: var(--radius);
  background: var(--border);
  animation: shimmer 1.5s ease infinite;
}
@keyframes shimmer {
  0% { opacity: 1; }
  50% { opacity: .4; }
  100% { opacity: 1; }
}

/* ============================================================
   Model grid
   ============================================================ */
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.model-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; cursor: pointer;
  transition: all var(--transition);
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 98%, var(--bg)) 100%);
  box-shadow: var(--shadow-card), var(--rim-highlight);
  animation: cardIn .4s ease backwards;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.model-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-xl), var(--rim-highlight), 0 0 0 1px var(--accent-glow);
  transform: translateY(-2px);
}
.model-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.model-card-name { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.model-card-diff {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.diff-入门 { background: var(--green-light); color: var(--green); }
.diff-简单 { background: var(--green-light); color: var(--green); }
.diff-中等 { background: var(--amber-light); color: var(--amber); }
.diff-进阶 { background: var(--red-light); color: var(--red); }

.model-card-summary { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.5; }
.model-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.tag-category { background: var(--accent-light); color: var(--accent); }
.tag-lib { background: var(--inline-code-bg); color: var(--text-secondary); font-family: var(--mono); font-size: 10px; }
.tag-type { background: var(--purple-light); color: var(--purple); }
.model-card-libs { display: flex; flex-wrap: wrap; gap: 4px; }
.model-card-empty { grid-column: 1 / -1; text-align: center; color: var(--text-secondary); padding: 40px 0; }

/* ============================================================
   Model detail overlay
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 100; background: var(--overlay-bg);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s ease;
  backdrop-filter: blur(8px);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.overlay-card {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 97%, var(--bg)) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 700px; width: 92%; max-height: 85vh; overflow-y: auto;
  padding: 32px; position: relative;
  box-shadow: var(--shadow-xl), var(--rim-highlight), 0 0 0 1px rgba(0,0,0,.03);
  animation: scaleIn .25s ease;
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
.overlay-close {
  position: absolute; top: 12px; right: 16px;
  border: none; background: none; cursor: pointer;
  font-size: 24px; color: var(--text-secondary); line-height: 1;
  transition: all var(--transition);
}
.overlay-close:hover { color: var(--text); transform: scale(1.1); }
.overlay-card h2 { font-size: 22px; margin-bottom: 4px; letter-spacing: -.02em; }
.overlay-card .model-card-diff { display: inline-block; margin-bottom: 16px; }
.overlay-card h3 { font-size: 13px; font-weight: 700; margin: 20px 0 6px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }
.overlay-card p, .overlay-card li { font-size: 14px; line-height: 1.7; }
.overlay-card pre {
  background: var(--pre-bg); color: var(--pre-color);
  padding: 16px 20px; border-radius: var(--radius-sm);
  overflow-x: auto; margin: 8px 0;
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
}
.overlay-card pre code { background: none; padding: 0; color: inherit; }

/* ============================================================
   Problem list
   ============================================================ */
.problem-list { display: flex; flex-direction: column; gap: 12px; }
.problem-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; cursor: pointer;
  transition: all var(--transition);
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 98%, var(--bg)) 100%);
  box-shadow: var(--shadow-card), var(--rim-highlight);
  animation: cardIn .4s ease backwards;
}
.problem-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-xl), var(--rim-highlight), 0 0 0 1px var(--accent-glow);
  transform: translateX(4px);
}
.problem-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.problem-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px;
  color: #fff; white-space: nowrap;
}
.badge-mcm { background: var(--accent); }
.badge-icm { background: var(--purple); }
.badge-cumcm { background: var(--red); }
.problem-year { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.problem-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.problem-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.problem-card .hint-action { font-size: 12px; color: var(--accent); margin-top: 8px; font-weight: 500; }

/* ============================================================
   Timeline
   ============================================================ */
.timeline { position: relative; padding-left: 24px; }
.timeline::before {
  content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px;
  width: 2px; background: linear-gradient(to bottom, var(--accent), var(--border));
}
.timeline-day { position: relative; margin-bottom: 28px; }
.timeline-day::before {
  content: ''; position: absolute; left: -20px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.timeline-day:last-child { margin-bottom: 0; }
.timeline-day h3 { font-size: 17px; font-weight: 700; margin-bottom: 2px; }
.timeline-goal { font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 10px; }
.timeline-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.timeline-role {
  background: var(--bg); border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 13px; line-height: 1.6; transition: all var(--transition);
}
.timeline-role:hover { background: var(--accent-light); }
.timeline-role strong { font-size: 12px; color: var(--accent); display: block; margin-bottom: 2px; }
.timeline-checkpoint {
  margin-top: 10px; padding: 8px 12px; border-radius: 6px;
  background: var(--amber-light); font-size: 12px; font-weight: 600; color: var(--amber);
  display: inline-block;
}

/* ============================================================
   Tools
   ============================================================ */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tool-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px;
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 98%, var(--bg)) 100%);
  box-shadow: var(--shadow-card), var(--rim-highlight);
  transition: all var(--transition);
}
.tool-card:hover { border-color: var(--accent); box-shadow: var(--shadow), var(--rim-highlight); }
.tool-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.tool-card .tool-use { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.tool-card .tool-pkgs { font-size: 12px; font-family: var(--mono); color: var(--accent); }

/* ============================================================
   Code standards
   ============================================================ */
.standards-list { display: flex; flex-direction: column; gap: 12px; }
.standard-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; background: var(--bg); border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.standard-item:hover { background: var(--accent-light); }
.standard-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--accent); min-width: 110px; padding-top: 2px;
}
.standard-text { font-size: 14px; }

/* ============================================================
   History
   ============================================================ */
.history-item {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px; margin-bottom: 10px; cursor: pointer;
  transition: all var(--transition);
}
.history-item:hover { border-color: var(--accent); transform: translateX(4px); }
.history-item-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.history-item-problem { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item-time { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.history-item-meta { font-size: 12px; color: var(--text-secondary); }
.history-empty { text-align: center; color: var(--text-secondary); padding: 20px 0; font-size: 14px; }
.history-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ============================================================
   Error messages
   ============================================================ */
.error-msg {
  text-align: center; color: var(--red); padding: 24px 0; font-size: 14px;
}
.error-msg .btn-sm { margin-left: 8px; }

/* ============================================================
   Empty state
   ============================================================ */
.empty-state { text-align: center; color: var(--text-secondary); padding: 32px 0; font-size: 14px; }

/* ============================================================
   Footer
   ============================================================ */
footer { text-align: center; padding: 24px; color: var(--text-secondary); font-size: 13px; }
.replay-intro-btn {
  margin-top: 10px; padding: 6px 16px;
  font-size: 12px; color: var(--text-secondary);
  background: transparent; border: 1px solid var(--border);
  border-radius: 20px; cursor: pointer;
  transition: all .2s;
}
.replay-intro-btn:hover {
  color: var(--text); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ============================================================
   Loading spinner
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: spin .6s linear infinite;
  vertical-align: middle; margin-right: 6px;
}
.spinner-dark { border-color: var(--border); border-top-color: var(--accent); }

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1a1a2e; color: #fff; padding: 10px 24px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; z-index: 200;
  box-shadow: var(--shadow-lg);
  animation: toastIn .3s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ============================================================
   Responsive
   ============================================================ */
/* ============================================================
   Code block copy buttons (injected by JS)
   ============================================================ */
.code-block-wrapper { position: relative; }
.code-block-wrapper .code-copy-btn {
  position: absolute; top: 8px; right: 8px;
  padding: 4px 10px; border: 1px solid rgba(255,255,255,.15);
  border-radius: 5px; background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5); font-size: 11px; cursor: pointer;
  transition: all var(--transition); opacity: 0;
}
.code-block-wrapper:hover .code-copy-btn { opacity: 1; }
.code-block-wrapper .code-copy-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.code-block-wrapper .code-run-btn {
  position: absolute; top: 8px; right: 68px;
  padding: 4px 10px; border: 1px solid rgba(76,175,80,.4);
  border-radius: 5px; background: rgba(76,175,80,.15);
  color: rgba(76,175,80,.8); font-size: 11px; cursor: pointer;
  transition: all var(--transition); opacity: 0;
}
.code-block-wrapper:hover .code-run-btn { opacity: 1; }
.code-block-wrapper .code-run-btn:hover { background: rgba(76,175,80,.3); color: #4caf50; }

/* Code output */
.code-output {
  margin-top: 8px; border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden;
}
.code-output-header {
  padding: 6px 12px; font-size: 11px; font-weight: 600;
  background: var(--accent-light); color: var(--accent);
}
.code-output pre {
  margin: 0; padding: 12px; background: #1e1e1e; color: #d4d4d4;
  font-size: 12px; line-height: 1.5; max-height: 300px; overflow: auto;
  border-radius: 0;
}
.code-output.error .code-output-header {
  background: #fef2f2; color: #dc2626;
}
.code-output.error pre { color: #f87171; }

/* ============================================================
   Model comparison
   ============================================================ */
.model-card { position: relative; }
.model-card .compare-checkbox {
  position: absolute; top: 12px; right: 12px;
  width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid var(--border); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: all var(--transition); z-index: 2;
}
.model-card .compare-checkbox:checked {
  background: var(--accent); border-color: var(--accent);
}
.model-card .compare-checkbox:checked::after {
  content: '✓'; color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-weight: 700;
}
.model-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }

.compare-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--surface); border-top: 2px solid var(--accent);
  padding: 12px 24px; display: flex; align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4px 20px var(--shadow);
  animation: slideUp .25s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
#compare-count { font-weight: 600; font-size: 14px; }
.compare-actions { display: flex; gap: 10px; }

.compare-overlay .overlay-card { max-width: 960px; }
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 16px; }
.compare-col { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; }
.compare-col h3 { font-size: 16px; margin-bottom: 12px; }
.compare-col .compare-row { margin-bottom: 10px; }
.compare-col .compare-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.compare-col .compare-value { font-size: 14px; margin-top: 2px; }
.compare-col pre { font-size: 11px !important; padding: 10px 14px !important; }

/* ============================================================
   Problem bookmark
   ============================================================ */
.bookmark-btn {
  border: none; background: none; cursor: pointer;
  font-size: 18px; padding: 2px 6px; transition: all var(--transition);
  color: var(--border); line-height: 1;
}
.bookmark-btn:hover { transform: scale(1.2); }
.bookmark-btn.bookmarked { color: var(--amber); }
.bookmark-filter { border-color: var(--amber) !important; color: var(--amber) !important; }
.bookmark-filter.active { background: var(--amber-light) !important; }

/* ============================================================
   Print styles (for paper export / PDF)
   ============================================================ */
@media print {
  .nav, footer, .btn-row, .result-toolbar, .result-actions,
  #theme-toggle, .code-copy-btn, .compare-bar, .compare-checkbox,
  .bookmark-btn, .filter-bar, .filter-hint, #history-card,
  .streaming-cursor, .streaming-hint, .toast, .overlay {
    display: none !important;
  }

  body { background: #fff; color: #000; font-size: 12pt; line-height: 1.5; }
  .card { border: none; box-shadow: none; padding: 0; margin-bottom: 16px; page-break-inside: avoid; }
  .card:hover { box-shadow: none; }
  .hero { padding: 0 0 16px; text-align: left; }
  .hero h1 { font-size: 20pt; -webkit-text-fill-color: #000; }
  .hero p { font-size: 12pt; }
  .markdown-body h1 { font-size: 18pt; }
  .markdown-body h2 { font-size: 15pt; }
  .markdown-body h3 { font-size: 13pt; }
  .markdown-body pre {
    background: #f8f8f8; color: #000; border: 1px solid #ddd;
    white-space: pre-wrap; word-wrap: break-word;
  }
  .markdown-body code { background: #f5f5f5; }
  .markdown-body table th { background: #eee; }
  .markdown-body blockquote { border-left-color: #999; background: #f9f9f9; }
  .tab { display: block !important; page-break-before: always; }
  .tab:first-of-type { page-break-before: avoid; }
  main { max-width: 100%; padding: 0; }

  @page { margin: 2cm; }
}

/* ============================================================
   Paper preview — A4 academic format
   ============================================================ */
.paper-result-card { display: none; }
.paper-result-card.visible { display: block; animation: fadeSlideIn .3s ease; }

.paper-preview-wrapper {
  background: var(--border);
  padding: 24px;
  display: flex; justify-content: center;
  border-radius: var(--radius-sm);
}

.paper-page {
  background: #fff;
  color: #1a1a1a;
  max-width: 210mm;
  width: 100%;
  min-height: 297mm;
  padding: 25mm 20mm;
  box-shadow: 0 2px 20px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);
  font-family: 'Times New Roman', 'Noto Serif SC', 'STSong', Georgia, serif;
  font-size: 12pt;
  line-height: 1.8;
  text-align: justify;
  overflow-wrap: break-word;
  word-break: break-word;
}
.paper-page pre {
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}

.paper-page h1 {
  font-size: 18pt; font-weight: 700; text-align: center;
  margin-bottom: 24pt; letter-spacing: 0;
  color: #1a1a1a; -webkit-text-fill-color: #1a1a1a;
  background: none;
}
.paper-page h2 {
  font-size: 14pt; font-weight: 700; margin: 20pt 0 10pt;
  padding-bottom: 4pt; border-bottom: 1px solid #333;
  color: #1a1a1a;
}
.paper-page h3 {
  font-size: 12pt; font-weight: 700; margin: 16pt 0 8pt;
  color: #1a1a1a;
}
.paper-page h4 {
  font-size: 12pt; font-weight: 600; font-style: italic;
  margin: 12pt 0 6pt; color: #1a1a1a;
}
.paper-page p { margin: 6pt 0; text-indent: 0; }
.paper-page ul, .paper-page ol { padding-left: 24pt; margin: 6pt 0; }
.paper-page li { margin: 3pt 0; }
.paper-page strong { font-weight: 700; }

.paper-page code {
  font-family: 'Latin Modern Mono', 'Courier New', monospace;
  font-size: 9pt; background: #f5f5f5; padding: 1pt 4pt;
  border-radius: 2px; color: #333;
}
.paper-page pre {
  background: #f8f8f8; border: 1px solid #e0e0e0;
  padding: 12pt 16pt; border-radius: 4px;
  font-size: 9pt; line-height: 1.5; overflow-x: auto;
  color: #333;
}
.paper-page pre code { background: none; padding: 0; }

.paper-page table {
  width: 100%; border-collapse: collapse; margin: 12pt 0;
  font-size: 10pt;
}
.paper-page th, .paper-page td {
  border: 1px solid #333; padding: 6pt 10pt; text-align: left;
}
.paper-page th { background: #f0f0f0; font-weight: 700; }

.paper-page blockquote {
  border-left: 3pt solid #999; padding: 4pt 16pt;
  margin: 12pt 0; font-style: italic; color: #555;
}

.paper-page .paper-abstract {
  font-size: 11pt; margin: 16pt 0; padding: 12pt 0;
  border-top: 1px solid #999; border-bottom: 1px solid #999;
}

/* Print: paper tab only shows the paper page */
@media print {
  .paper-preview-wrapper {
    background: none; padding: 0;
  }
  .paper-page {
    box-shadow: none; max-width: none; width: 100%;
    padding: 0; min-height: auto;
    font-size: 11pt; line-height: 1.6;
  }
  .paper-page pre {
    background: #f8f8f8; border: 1px solid #ddd;
    white-space: pre-wrap; word-wrap: break-word;
  }
}

/* Dark mode: paper page stays white (it's a printed document) */
[data-theme="dark"] .paper-page {
  background: #fff; color: #1a1a1a;
}
[data-theme="dark"] .paper-page h1,
[data-theme="dark"] .paper-page h2,
[data-theme="dark"] .paper-page h3,
[data-theme="dark"] .paper-page h4 { color: #1a1a1a; -webkit-text-fill-color: #1a1a1a; }

/* ============================================================
   Model recommendation badge
   ============================================================ */
.model-card-recommended {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber-light);
}
.tag-recommended {
  position: absolute; top: 10px; left: 12px;
  background: var(--amber); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; z-index: 3; letter-spacing: .05em;
}

/* ============================================================
   Onboarding banner
   ============================================================ */
.onboarding-banner {
  background: linear-gradient(135deg, var(--accent-light), var(--purple-light));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  animation: fadeSlideIn .4s ease;
}
.onboarding-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.onboarding-step {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
}
.onboarding-step.done { color: var(--text); }
.onboarding-step .step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.onboarding-step.done .step-num { background: var(--green); }
.onboarding-arrow { color: var(--border); font-size: 14px; }
.onboarding-close {
  padding: 6px 16px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); cursor: pointer;
  font: 500 13px var(--font); transition: all var(--transition);
}
.onboarding-close:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   Draft restore banner
   ============================================================ */
.draft-banner {
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 14px 20px;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 14px; animation: fadeSlideIn .3s ease;
}
.draft-banner span { flex: 1; min-width: 200px; }
.draft-banner .btn-sm { white-space: nowrap; }

/* ============================================================
   TOC sidebar
   ============================================================ */
.toc-sidebar {
  position: fixed; right: max(16px, calc((100vw - 960px) / 2 - 220px));
  top: 100px; width: 200px; max-height: calc(100vh - 140px);
  overflow-y: auto; z-index: 40;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px;
  font-size: 12px; line-height: 1.6;
  box-shadow: var(--shadow);
  animation: fadeSlideIn .3s ease;
}
.toc-title {
  font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-secondary);
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.toc-item {
  display: block; padding: 2px 0; color: var(--text-secondary);
  text-decoration: none; border-radius: 2px;
  transition: all var(--transition);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toc-item:hover { color: var(--accent); }
.toc-item.toc-active { color: var(--accent); font-weight: 600; }
.toc-h2 { padding-left: 0; }
.toc-h3 { padding-left: 12px; font-size: 11px; }

@media (max-width: 1280px) {
  .toc-sidebar { display: none; }
}

/* ============================================================
   Keyboard shortcuts modal
   ============================================================ */
.shortcuts-card { max-width: 420px !important; }
.shortcuts-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.shortcut-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-row kbd {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  box-shadow: 0 1px 0 var(--border);
}
.shortcut-row span { color: var(--text-secondary); font-size: 13px; }

/* ============================================================
   Shortcuts hint in footer
   ============================================================ */
.shortcuts-hint {
  display: inline-block; margin-left: 12px;
  font-size: 11px; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 6px; cursor: pointer;
  font-family: var(--mono); transition: all var(--transition);
}
.shortcuts-hint:hover { border-color: var(--accent); color: var(--accent); }

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

/* ============================================================
   Stage indicator — shows during SSE streaming
   ============================================================ */
.stage-indicator {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 20px;
  background: var(--accent-light); border: 1px solid var(--accent);
  font-size: 13px; font-weight: 600; color: var(--accent);
  margin-bottom: 16px;
  animation: stagePulse 2s ease infinite;
}
.stage-indicator .stage-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: stageDot 1s ease infinite;
}
@keyframes stagePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}
@keyframes stageDot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.6); }
}

/* ============================================================
   Disclaimer banner — always visible on results
   ============================================================ */
.disclaimer-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; margin-bottom: 20px;
  background: var(--amber-light); border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--amber); line-height: 1.5;
}
.disclaimer-banner .disclaimer-icon {
  font-size: 18px; flex-shrink: 0; margin-top: 1px;
}
[data-theme="dark"] .disclaimer-banner {
  background: rgba(245, 158, 11, .1);
}

/* ============================================================
   Verification checklist — interactive check items
   ============================================================ */
.verify-checklist {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--border);
}
.verify-checklist .verify-title {
  font-weight: 700; font-size: 14px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.verify-checklist .verify-progress {
  font-size: 12px; color: var(--text-secondary);
}
.verify-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--transition);
  font-size: 14px; user-select: none;
}
.verify-item:hover { background: var(--bg); }
.verify-item input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer;
  accent-color: var(--accent); flex-shrink: 0;
}
.verify-item.checked { color: var(--text-secondary); text-decoration: none; }
.verify-item.checked .verify-check-text { opacity: .7; }
.verify-ready {
  margin-top: 12px; padding: 10px 16px;
  background: var(--green-light); border: 1px solid var(--green);
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; color: var(--green);
  text-align: center; display: none;
}
.verify-ready.show { display: block; animation: fadeSlideIn .3s ease; }

/* ============================================================
   Explain side panel — floating
   ============================================================ */
.explain-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-secondary); font-size: 12px; font-weight: 700;
  cursor: pointer; margin-left: 6px;
  transition: all var(--transition); vertical-align: middle;
}
.explain-btn:hover {
  background: var(--accent); color: #fff; border-color: var(--accent);
  transform: scale(1.15);
}
.explain-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 420px; max-width: 90vw; z-index: 90;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -4px 0 30px rgba(0,0,0,.15);
  display: flex; flex-direction: column;
  animation: slideInRight .3s ease;
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.explain-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.explain-panel-header h3 {
  font-size: 15px; font-weight: 700; margin: 0;
}
.explain-panel-close {
  border: none; background: none; cursor: pointer;
  font-size: 22px; color: var(--text-secondary); line-height: 1;
  transition: all var(--transition);
}
.explain-panel-close:hover { color: var(--text); transform: scale(1.1); }
.explain-panel-body {
  flex: 1; overflow-y: auto; padding: 20px;
  font-size: 14px; line-height: 1.8;
}
.explain-panel-actions {
  display: flex; gap: 8px; padding: 12px 20px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   History enhancements — search, tags, star
   ============================================================ */
.history-search {
  width: 100%; padding: 8px 12px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: 13px var(--font); background: var(--bg); color: var(--text);
  transition: all var(--transition);
}
.history-search:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.history-item-star {
  border: none; background: none; cursor: pointer;
  font-size: 16px; padding: 2px 4px; color: var(--border);
  transition: all var(--transition);
}
.history-item-star.starred { color: var(--amber); }
.history-item-star:hover { transform: scale(1.2); }
.history-item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.history-tag {
  font-size: 10px; padding: 1px 7px; border-radius: 10px;
  background: var(--accent-light); color: var(--accent);
  cursor: pointer; transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 3px;
}
.history-tag:hover { background: var(--accent); color: #fff; }
.history-tag .tag-remove { font-size: 14px; line-height: 1; }
.history-tag-add {
  border: 1px dashed var(--border); background: none; color: var(--text-secondary);
  cursor: pointer; font-size: 10px; padding: 1px 8px; border-radius: 10px;
  transition: all var(--transition);
}
.history-tag-add:hover { border-color: var(--accent); color: var(--accent); }
.history-tag-input {
  width: 100px; padding: 1px 6px; border: 1px solid var(--accent);
  border-radius: 10px; font-size: 10px; background: var(--surface); color: var(--text);
}
.history-time-rel {
  font-size: 12px; color: var(--text-secondary); margin-left: auto; white-space: nowrap;
}

/* ============================================================
   Scholar search results
   ============================================================ */
.scholar-results {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.scholar-results h3 {
  font-size: 15px; font-weight: 700; margin-bottom: 12px;
}
.scholar-paper {
  padding: 10px 14px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.6;
  transition: all var(--transition);
}
.scholar-paper:hover { border-color: var(--accent); background: var(--accent-light); }
.scholar-paper .scholar-title {
  font-weight: 600; color: var(--accent);
}
.scholar-paper .scholar-meta {
  font-size: 12px; color: var(--text-secondary); margin-top: 2px;
}
.scholar-paper .scholar-citations {
  font-size: 11px; color: var(--green); font-weight: 600;
}

/* ============================================================
   Submission checklist — Guide tab
   ============================================================ */
.submission-checklist {
  margin-top: 0;
}
.checklist-section {
  margin-bottom: 20px;
}
.checklist-section h3 {
  font-size: 15px; font-weight: 700; margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.checklist-progress {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.checklist-progress-bar {
  flex: 1; height: 6px; background: var(--border);
  border-radius: 3px; overflow: hidden;
}
.checklist-progress-fill {
  height: 100%; background: var(--green);
  border-radius: 3px; transition: width .3s ease;
}
.checklist-progress-text {
  font-size: 13px; font-weight: 600; color: var(--green); white-space: nowrap;
}

/* ============================================================
   Visualization Templates
   ============================================================ */
.viz-template {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.viz-template-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer;
  background: var(--bg); font-size: 14px;
  user-select: none;
  transition: background .2s;
}
.viz-template-header:hover { background: var(--accent-light); }
.viz-template-name {
  font-weight: 700; color: var(--accent); min-width: 140px;
}
.viz-template-use {
  color: var(--text-secondary); font-size: 13px;
}
.viz-template-body {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  position: relative;
}
.viz-template-body .viz-copy-btn {
  position: absolute; top: 12px; right: 16px; z-index: 2;
}
.viz-template-body pre {
  margin: 0; max-height: 400px; overflow: auto;
  background: #1e1e1e; color: #d4d4d4; border-radius: 6px;
  padding: 16px; font-size: 12px; line-height: 1.5;
}
.viz-template-body code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}
.viz-template[open] .viz-template-header {
  background: var(--accent-light); border-bottom: 1px solid var(--accent);
}

/* ============================================================
   Paper Analysis Upload
   ============================================================ */
.paper-upload-area {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.upload-hint {
  font-size: 12px; color: var(--text-secondary);
  max-width: 300px; line-height: 1.4;
}
.paper-analysis-result {
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--border);
}
.paper-analysis-result h2 { font-size: 17px; margin: 16px 0 8px; }
.paper-analysis-result h3 { font-size: 15px; margin: 12px 0 6px; }
.paper-analysis-result ul, .paper-analysis-result ol {
  margin-left: 20px; margin-bottom: 12px;
}
.paper-analysis-result li { margin-bottom: 4px; line-height: 1.5; }
.paper-analysis-result blockquote {
  border-left: 3px solid var(--accent); padding: 8px 14px;
  margin: 10px 0; background: var(--accent-light); border-radius: 0 6px 6px 0;
}

/* ============================================================
   Verification reports — reference & math checks
   ============================================================ */
.verify-report {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--border);
}
.verify-report h3 {
  font-size: 16px; font-weight: 700; margin-bottom: 12px;
}
.verify-summary {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 12px 16px;
  background: var(--bg); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
}
.verify-stat.verified { color: var(--green); }
.verify-stat.fake { color: var(--red); }
.verify-ref-item {
  padding: 12px 16px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.6;
  transition: all var(--transition);
}
.verify-ref-item.verified { border-left: 3px solid var(--green); }
.verify-ref-item.not_found { border-left: 3px solid var(--red); background: var(--red-light); }
.verify-ref-status { font-weight: 700; margin-bottom: 4px; font-size: 13px; }
.verify-ref-item.verified .verify-ref-status { color: var(--green); }
.verify-ref-item.not_found .verify-ref-status { color: var(--red); }
.verify-ref-original { color: var(--text-secondary); font-size: 12px; margin-bottom: 4px; }
.verify-ref-match { font-size: 13px; }
.verify-ref-meta { color: var(--text-secondary); font-size: 11px; display: block; }

.math-verify-report h4 { font-size: 14px; font-weight: 700; margin: 12px 0 6px; }
.math-verify-report ul { padding-left: 20px; margin: 6px 0; }
.math-verify-report li { margin: 4px 0; font-size: 13px; }

/* ============================================================
   Data source hints — on simulated data code blocks
   ============================================================ */
.data-source-hint {
  font-size: 11px; padding: 6px 12px; margin-bottom: -1px;
  background: var(--amber-light); color: var(--amber);
  border: 1px solid var(--amber); border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: 500;
}
.data-source-hint + pre {
  margin-top: 0;
  border-top-left-radius: 0; border-top-right-radius: 0;
}
.data-source-mark {
  background: rgba(217, 119, 6, .2); color: var(--amber);
  padding: 1px 0; border-radius: 2px;
}

/* ============================================================
   History item actions
   ============================================================ */
.history-item-actions {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex; gap: 6px;
}
.history-item-actions .btn-sm {
  font-size: 11px; padding: 3px 10px;
}


/* ============================================================
   Plagiarism report
   ============================================================ */
.plagiarism-report h4 {
  font-size: 14px; font-weight: 700; margin: 12px 0 6px;
}
.plagiarism-report ul { padding-left: 20px; margin: 6px 0; }
.plagiarism-report li { margin: 4px 0; font-size: 13px; }
.plagiarism-report strong { color: var(--accent); }

/* ============================================================
   Quick Actions Bar — grouped dropdown design
   ============================================================ */
.quick-actions-bar {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  margin: 16px 0 0;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.quick-actions-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 4px;
  white-space: nowrap;
  padding: 9px 0;
}
/* Group button */
.qa-group {
  position: relative;
}
.qa-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  font-family: var(--font);
  user-select: none;
}
.qa-group-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.qa-group-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.qa-group-count {
  font-size: 11px;
  background: var(--inline-code-bg);
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 500;
}
.qa-group-btn.active .qa-group-count {
  background: rgba(255,255,255,.25);
  color: #fff;
}
/* Dropdown panel */
.qa-group-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  padding: 6px;
  z-index: 50;
  flex-direction: column;
  gap: 2px;
}
.qa-group-panel.open {
  display: flex;
}
.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  font-family: var(--font);
  text-align: left;
  width: 100%;
}
.quick-action-btn:hover {
  background: var(--inline-code-bg);
}
.qa-item-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
/* Per-button accent on hover */
.quick-action-btn.edit-action:hover { background: #f5f3ff; color: var(--purple); }
.quick-action-btn.plagiarism-action:hover { background: #fef2f2; color: var(--red); }
.quick-action-btn.verify-refs-action:hover { background: #f0fdf4; color: var(--green); }
.quick-action-btn.rag-check-action:hover { background: #fdf2f8; color: #be185d; }
.quick-action-btn.verify-math-action:hover { background: var(--accent-light); color: var(--accent); }
.quick-action-btn.abstract-action:hover { background: #f0f9ff; color: #0284c7; }
.quick-action-btn.sensitivity-action:hover { background: #fff7ed; color: #ea580c; }
.quick-action-btn.score-action:hover { background: #fefce8; color: #ca8a04; }
.quick-action-btn.figures-action:hover { background: #fdf2f8; color: #db2777; }
.quick-action-btn.compare-action:hover { background: #f0fdfa; color: #0d9488; }
.quick-action-btn.review-action:hover { background: #fffbeb; color: #d97706; }
.quick-action-btn.export-action:hover { background: #f5f3ff; color: #6d28d9; }
[data-theme="dark"] .quick-action-btn.edit-action:hover { background: #1e1040; color: #a78bfa; }
[data-theme="dark"] .quick-action-btn.plagiarism-action:hover { background: #3d0a0a; color: #fca5a5; }
[data-theme="dark"] .quick-action-btn.verify-refs-action:hover { background: #042f2e; color: #4ade80; }
[data-theme="dark"] .quick-action-btn.rag-check-action:hover { background: #3d1030; color: #f9a8d4; }
[data-theme="dark"] .quick-action-btn.verify-math-action:hover { background: #0c2d48; color: #60a5fa; }
[data-theme="dark"] .quick-action-btn.abstract-action:hover { background: #0c2d48; color: #38bdf8; }
[data-theme="dark"] .quick-action-btn.sensitivity-action:hover { background: #3d1a04; color: #fb923c; }
[data-theme="dark"] .quick-action-btn.score-action:hover { background: #3d3404; color: #facc15; }
[data-theme="dark"] .quick-action-btn.figures-action:hover { background: #3d0a28; color: #f472b6; }
[data-theme="dark"] .quick-action-btn.compare-action:hover { background: #042f2e; color: #2dd4bf; }

/* ── Progress tooltip on hover ── */
.quick-action-btn.tool-running {
  position: relative;
  overflow: visible;
}
.quick-action-btn.tool-running::after {
  content: attr(data-progress) '%';
  position: absolute;
  right: -2px;
  top: -2px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  line-height: 1.4;
  white-space: nowrap;
}
.quick-action-btn.tool-running:hover::before {
  content: attr(data-stage);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
[data-theme="dark"] .quick-action-btn.review-action:hover { background: #2d1f00; color: #fbbf24; }
[data-theme="dark"] .quick-action-btn.export-action:hover { background: #1e1040; color: #a78bfa; }

@media (max-width: 640px) {
  .quick-actions-bar {
    padding: 10px 12px;
    gap: 8px;
  }
  .quick-actions-label { display: none; }
  .qa-group { flex: 1; min-width: 0; }
  .qa-group-btn { width: 100%; justify-content: center; font-size: 12px; padding: 10px 8px; }
  .qa-group-panel { left: auto; right: 0; min-width: 160px; }
  .quick-action-btn { font-size: 12px; padding: 8px 12px; }
}

/* ============================================================
   Paper Stats Bar
   ============================================================ */
.paper-stats {
  margin: 12px 0 0;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.paper-stats-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.paper-stat-item {
  flex: 1;
  min-width: 80px;
  text-align: center;
}
.paper-stat-num {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--mono);
}
.paper-stat-num.over {
  color: var(--red);
}
.paper-stat-num.warn {
  color: var(--amber);
}
.paper-stat-label {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   Competition Countdown
   ============================================================ */
.countdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.countdown-item {
  padding: 20px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  transition: border-color var(--transition);
}
.countdown-item:hover {
  border-color: var(--accent);
}
.countdown-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.countdown-date {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.countdown-timer {
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  font-family: var(--mono);
  line-height: 1.2;
}
.countdown-type {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* Cancel generation button */
.cancel-gen-btn {
  margin-left: 12px; padding: 3px 10px; font-size: 11px;
  background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
  border-radius: 4px; cursor: pointer;
}
.cancel-gen-btn:hover { background: #fee2e2; }

/* API Key warning banner */
.api-key-banner {
  padding: 10px 20px; background: #fef3c7; color: #92400e;
  font-size: 13px; text-align: center; border-bottom: 1px solid #fcd34d;
  position: sticky; top: 0; z-index: 99;
}
.api-key-banner.warn { background: #fee2e2; color: #991b1b; border-bottom-color: #fca5a5; }
.api-key-banner code { background: rgba(0,0,0,.08); padding: 2px 5px; border-radius: 3px; font-size: 12px; }
.api-key-banner .btn-sm { margin-left: 8px; font-size: 11px; }
[data-theme="dark"] .api-key-banner { background: #3d2a00; color: #fcd34d; border-bottom-color: #6d4500; }
[data-theme="dark"] .api-key-banner.warn { background: #3d0a0a; color: #fca5a5; border-bottom-color: #6d1010; }

/* Review report */
.review-report {
  margin-top: 24px; padding-top: 20px; border-top: 2px solid #f59e0b;
}
.review-report h2 { font-size: 18px; color: #f59e0b; }
.review-report h3 { font-size: 15px; margin: 16px 0 8px; }
.review-report table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.review-report td, .review-report th {
  padding: 8px 12px; border: 1px solid var(--border); font-size: 13px;
}
.review-report th { background: var(--accent-light); font-weight: 600; }

/* Paper score report */
.paper-score-report table,
.paper-compare-report table {
  width: 100%; border-collapse: collapse; margin: 12px 0;
}
.paper-score-report th,
.paper-score-report td,
.paper-compare-report th,
.paper-compare-report td {
  padding: 8px 12px; border: 1px solid var(--border); font-size: 13px;
}
.paper-score-report th,
.paper-compare-report th {
  background: var(--table-header-bg); font-weight: 700; text-align: left;
}

/* Abstract / Sensitivity report styles */
.abstract-refine-report h4,
.sensitivity-report h4,
.paper-score-report h4,
.figure-suggest-report h4,
.model-recommend-report h4,
.paper-compare-report h4 {
  font-size: 14px; font-weight: 700; margin: 12px 0 6px;
}
.sensitivity-report pre,
.figure-suggest-report pre { margin: 8px 0; }

/* Model recommend button (in result toolbar) */
.model-recommend-btn {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  font-weight: 600 !important;
}

/* ============================================================
   Responsive — improved mobile experience
   ============================================================ */
@media (max-width: 640px) {
  .hero h1 { font-size: 24px; }
  .hero { padding: 24px 0 20px; }
  .card { padding: 16px; }
  main { padding: 16px 12px 48px; }

  /* Mobile nav: hide text labels, icon-only + compact */
  .nav-inner { padding: 0 8px; height: 48px; }
  .nav-links { gap: 0; }
  .nav-btn { font-size: 11px; padding: 4px 8px; border-radius: 6px; }
  .logo { font-size: 15px; }

  .field-row { flex-direction: column; gap: 0; }
  .btn-row { flex-direction: column; }
  .filter-bar { flex-direction: column; }
  .filter-bar .search-input { min-width: auto; }
  .filter-bar .filter-select { width: 100%; min-width: auto; }
  .model-grid { grid-template-columns: 1fr; }
  .skeleton-grid { grid-template-columns: 1fr; }
  .timeline-roles { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr; }

  /* Overlay - fullscreen on mobile */
  .overlay-card { padding: 20px; max-height: 90vh; width: 96%; border-radius: var(--radius-sm); }

  /* Comparison - vertical stack */
  .compare-overlay .overlay-card { max-width: 100%; }
  .compare-grid { grid-template-columns: 1fr; }

  /* History */
  .history-item-top { flex-direction: column; gap: 2px; align-items: flex-start; }

  /* Stats bar */
  .stats-bar { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .stat-item { padding: 0 16px; }
  .stat-num { font-size: 18px; }
  .stat-divider { height: 20px; }

  /* Onboarding */
  .onboarding-banner { flex-direction: column; align-items: flex-start; }
  .onboarding-steps { flex-direction: column; align-items: flex-start; gap: 4px; }
  .onboarding-arrow { display: none; }

  /* Result toolbar */
  .result-toolbar { flex-direction: column; gap: 8px; }
  .result-actions { width: 100%; justify-content: flex-start; }

  /* TOC hidden on mobile (use scroll instead) */
  .toc-sidebar { display: none !important; }

  /* Explain panel full-width on mobile */
  .explain-panel { width: 100vw; max-width: 100vw; }

  /* Stage indicator compact */
  .stage-indicator { font-size: 12px; padding: 6px 12px; }

  /* History */
  .history-item-top { flex-direction: column; gap: 2px; align-items: flex-start; }
  .history-time-rel { margin-left: 0; }

  /* Paper stats compact */
  .paper-stats-grid { gap: 8px; }
  .paper-stat-num { font-size: 17px; }

  /* Countdown compact */
  .countdown-grid { grid-template-columns: 1fr; }
  .countdown-timer { font-size: 24px; }
}

/* ============================================================
   Result Sidebar — slide-in panel for quick action outputs
   ============================================================ */
.result-sidebar {
  position: fixed; top: 0; right: 0; width: 520px; max-width: 100vw;
  height: 100vh; z-index: 9999; background: var(--surface);
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.result-sidebar.open { transform: translateX(0); }
.result-sidebar-backdrop {
  position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.3);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.result-sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
.result-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.result-sidebar-header h3 {
  font-size: 17px; font-weight: 700; margin: 0;
}
.result-sidebar-header .close-btn {
  width: 32px; height: 32px; border: none; background: var(--bg);
  border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 32px;
  text-align: center; color: var(--text-secondary); transition: all .2s;
}
.result-sidebar-header .close-btn:hover { background: var(--border); color: var(--text); }
.result-sidebar-body {
  flex: 1; overflow-y: auto; padding: 20px;
  font-size: 14px; line-height: 1.6;
  overflow-wrap: break-word; word-break: break-word; overflow-x: hidden;
}
.result-sidebar-body h2 { font-size: 18px; margin: 16px 0 10px; }
.result-sidebar-body h3 { font-size: 15px; margin: 12px 0 8px; }
.result-sidebar-body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.result-sidebar-body td, .result-sidebar-body th {
  padding: 8px 12px; border: 1px solid var(--border); text-align: left;
}
.result-sidebar-body th { background: var(--accent-light); font-weight: 600; }
.result-sidebar-body .error-msg { color: #dc2626; padding: 12px; background: #fef2f2; border-radius: 6px; }
.result-sidebar-body .verify-stat { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; margin: 0 8px 8px 0; }
.result-sidebar-body .verify-stat.verified { background: #dcfce7; color: #16a34a; }
.result-sidebar-body .verify-stat.fake { background: #fef2f2; color: #dc2626; }
.result-sidebar-body .verify-ref-item { border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-bottom: 8px; }
.result-sidebar-body .verify-ref-item.verified { border-left: 3px solid #22c55e; }
.result-sidebar-body .verify-ref-item.not_found { border-left: 3px solid #ef4444; }
.result-sidebar-body .verify-ref-status { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.result-sidebar-body .verify-ref-original { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.result-sidebar-body .verify-ref-match { font-size: 12px; }
.result-sidebar-body .plagiarism-percentage { font-size: 32px; font-weight: 800; margin: 12px 0; }
.result-sidebar-body .plagiarism-percentage.high { color: #dc2626; }
.result-sidebar-body .plagiarism-percentage.medium { color: #f59e0b; }
.result-sidebar-body .plagiarism-percentage.low { color: #16a34a; }
.result-sidebar-body .score-table td:last-child { font-weight: 700; text-align: right; }
.result-sidebar-body .score-total { font-size: 36px; font-weight: 800; text-align: center; padding: 16px; }
.result-sidebar-body .score-total.high { color: #16a34a; }
.result-sidebar-body .score-total.medium { color: #f59e0b; }
.result-sidebar-body .score-total.low { color: #dc2626; }
.result-sidebar-body .scholar-paper { padding: 10px 0; border-bottom: 1px solid var(--border); }
.result-sidebar-body .scholar-title { font-weight: 600; font-size: 14px; }
.result-sidebar-body .scholar-meta { font-size: 12px; color: var(--text-secondary); }
.result-sidebar-body .scholar-citations { font-size: 11px; background: var(--accent-light); padding: 2px 8px; border-radius: 10px; }
.result-sidebar-body blockquote {
  border-left: 3px solid var(--accent); padding: 8px 14px;
  margin: 10px 0; background: var(--accent-light); border-radius: 0 6px 6px 0;
}
.result-sidebar-body .code-block-wrapper pre { margin: 0; border-radius: 6px; max-height: 400px; }

/* Prevent overflow in sidebar content areas */
.result-sidebar-body img,
.result-sidebar-body svg { max-width: 100%; height: auto; }
.result-sidebar-body pre,
.result-sidebar-body code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.result-sidebar-body table { max-width: 100%; display: block; overflow-x: auto; }
.result-sidebar-body .rag-plagiarism-content { max-height: 600px; overflow-y: auto; }
.result-sidebar-body .rag-section { max-width: 100%; overflow: hidden; }

/* Sidebar loading state */
.result-sidebar-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; gap: 16px; color: var(--text-secondary);
}
.result-sidebar-loading .spinner {
  width: 40px; height: 40px; border: 3px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Multi-tab Sidebar ── */

.sidebar-tab-strip {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px; overflow-x: auto; overflow-y: hidden;
  background: var(--bg); border-bottom: 1px solid var(--border);
  flex-shrink: 0; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sidebar-tab-strip::-webkit-scrollbar { display: none; }

.sidebar-tab {
  display: flex; align-items: center; gap: 2px;
  padding: 5px 8px 5px 10px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; white-space: nowrap; font-size: 12px;
  font-weight: 500; color: var(--text-secondary);
  transition: all .15s ease; flex-shrink: 0; user-select: none;
}
.sidebar-tab:hover { background: var(--accent-light); color: var(--text); border-color: var(--accent); }
.sidebar-tab.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600;
}
.sidebar-tab-label { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }

.sidebar-tab-close {
  width: 16px; height: 16px; border: none; background: transparent;
  color: inherit; opacity: .5; cursor: pointer; font-size: 13px;
  line-height: 16px; text-align: center; padding: 0; border-radius: 50%;
  transition: opacity .15s; flex-shrink: 0;
}
.sidebar-tab-close:hover { opacity: 1; background: rgba(0,0,0,.15); }
.sidebar-tab.active .sidebar-tab-close:hover { background: rgba(255,255,255,.25); }

/* Header actions row */
.sidebar-header-actions {
  display: flex; align-items: center; gap: 6px;
}
.sidebar-minimize-btn {
  width: 28px; height: 28px; border: none; background: var(--bg);
  border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 28px;
  text-align: center; color: var(--text-secondary); transition: all .15s;
  font-weight: 700;
}
.sidebar-minimize-btn:hover { background: var(--border); color: var(--text); }

/* Minimized state — collapses to floating tab strip */
.result-sidebar.minimized {
  transform: translateX(0) !important;
  top: 78px; right: 16px; bottom: auto; left: auto;
  width: auto; height: auto; min-height: unset;
  max-width: calc(100vw - 32px);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
}
.result-sidebar.minimized .result-sidebar-header,
.result-sidebar.minimized .result-sidebar-body { display: none; }
.result-sidebar.minimized .sidebar-tab-strip {
  border-bottom: none; border-radius: 12px;
  padding: 6px 10px; gap: 4px;
}

/* Expand button at end of minimized strip */
.sidebar-expand-pill {
  display: none; width: 26px; height: 26px; background: var(--accent);
  color: #fff; border: none; border-radius: 50%; cursor: pointer;
  font-size: 16px; font-weight: 700; line-height: 26px; text-align: center;
  flex-shrink: 0; transition: background .15s;
}
.sidebar-expand-pill:hover { background: var(--accent-hover); }
.result-sidebar.minimized .sidebar-expand-pill { display: inline-block; }

/* Dark mode: minimized floating bar glow */
[data-theme="dark"] .result-sidebar.minimized {
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
}

/* Mobile: full-width tab strip */
@media (max-width: 768px) {
  .sidebar-tab-strip { padding: 6px 8px; gap: 3px; }
  .sidebar-tab { padding: 4px 7px; font-size: 11px; }
  .sidebar-tab-label { max-width: 60px; }
}

/* Edit mode indicator */
/* Dedup action bar inside plagiarism sidebar */
.dedup-action-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 14px; background: var(--accent-light);
  border: 1px dashed var(--accent); border-radius: 8px;
  margin-bottom: 16px;
}
.dedup-action-bar .dedup-btn {
  padding: 6px 14px; background: var(--accent); color: #fff;
  border: none; border-radius: 6px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.dedup-action-bar .dedup-btn:hover { background: var(--accent-hover); }
.dedup-action-bar .dedup-btn:disabled { opacity: .6; cursor: not-allowed; }
.dedup-action-bar .dedup-hint {
  font-size: 11px; color: var(--text-secondary);
  width: 100%; margin-top: 2px;
}
.dedup-result {
  margin-top: 16px; padding: 14px; background: #f0fdf4;
  border: 1px solid #86efac; border-radius: 8px;
}
[data-theme="dark"] .dedup-result { background: #0f2f24; border-color: #22c55e; }
.dedup-result h3 {
  font-size: 15px; font-weight: 700; margin: 0 0 8px;
}
.dedup-actions {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.dedup-actions .btn-sm {
  padding: 4px 12px; font-size: 12px; background: #22c55e; color: #fff;
  border: none; border-radius: 4px; cursor: pointer;
}
.dedup-actions .btn-sm:hover { background: #16a34a; }
.dedup-actions .btn-sm:last-child { background: var(--accent); }
.dedup-actions .btn-sm:last-child:hover { background: var(--accent-hover); }
.dedup-result .code-block-wrapper { margin: 12px 0; }

/* Citation grounding diff cards */
.corrections-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.citation-diff-card {
  border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 12px; overflow: hidden;
}
.citation-diff-header {
  padding: 8px 14px; background: var(--accent-light);
  font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--border);
}
.citation-diff-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; font-size: 13px; line-height: 1.5;
}
.citation-diff-label {
  flex-shrink: 0; width: 28px; height: 22px; border-radius: 5px;
  text-align: center; line-height: 22px; font-size: 11px;
  font-weight: 700; color: #fff; margin-top: 1px;
}
.citation-diff-old { background: #fef2f2; }
.citation-diff-old .citation-diff-label { background: #dc2626; }
.citation-diff-new { background: #f0fdf4; }
.citation-diff-new .citation-diff-label { background: #16a34a; }
.citation-diff-arrow {
  text-align: center; font-size: 12px; color: var(--text-secondary);
  padding: 2px 0; background: var(--bg);
}
.citation-diff-text { flex: 1; word-break: break-word; }
.citation-diff-uncorrected { opacity: .75; }
.citation-diff-uncorrected .citation-diff-header { background: #fef2f2; color: #dc2626; }

[data-theme="dark"] .citation-diff-old { background: #3b1515; }
[data-theme="dark"] .citation-diff-new { background: #0f2f24; }
[data-theme="dark"] .citation-diff-uncorrected .citation-diff-header { background: #3b1515; }

/* Enhanced citation stats bar */
.citation-stats-bar {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.citation-stat {
  flex: 1; text-align: center; padding: 10px 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.citation-stat-num {
  display: block; font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2;
}
.citation-stat-label {
  display: block; font-size: 11px; color: var(--text-secondary); margin-top: 2px;
}
.citation-stat.verified .citation-stat-num { color: #16a34a; }
.citation-stat.corrected .citation-stat-num { color: var(--accent); }
.citation-stat.failed .citation-stat-num { color: #dc2626; }
.citation-progress-bar {
  height: 6px; background: var(--border); border-radius: 3px; margin-bottom: 4px; overflow: hidden;
}
.citation-progress-fill {
  height: 100%; background: linear-gradient(90deg, #16a34a, var(--accent));
  border-radius: 3px; transition: width .5s ease;
}
.citation-diff-id {
  font-weight: 600; color: var(--text);
}
.citation-diff-badge {
  margin-left: 8px; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 10px;
}
.citation-diff-badge.corrected { background: #dcfce7; color: #16a34a; }
.citation-diff-badge.real { background: #dcfce7; color: #16a34a; }
.citation-diff-badge.failed { background: #fef2f2; color: #dc2626; }
.citation-diff-real { border-left: 3px solid #16a34a; opacity: .85; }
.citation-diff-real .citation-diff-header { background: #f0fdf4; }
.citation-diff-row.citation-diff-ok { background: #f0fdf4; }
.citation-diff-note {
  font-size: 11px; color: var(--text-secondary); padding: 4px 10px 8px;
  font-style: italic;
}
[data-theme="dark"] .citation-stat.verified .citation-stat-num { color: #4ade80; }
[data-theme="dark"] .citation-stat.failed .citation-stat-num { color: #fca5a5; }
[data-theme="dark"] .citation-diff-real .citation-diff-header { background: #0f2f24; }
[data-theme="dark"] .citation-diff-row.citation-diff-ok { background: #0f2f24; }
[data-theme="dark"] .citation-diff-badge.corrected,
[data-theme="dark"] .citation-diff-badge.real { background: #0f2f24; color: #4ade80; }
[data-theme="dark"] .citation-diff-badge.failed { background: #3b1515; color: #fca5a5; }

/* ── Unified RAG Check: Sections & Diff Preview ─────────────────────── */

.rag-section {
  margin-bottom: 24px;
}

.rag-section-title {
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.rag-section-icon {
  font-size: 16px;
}

.rag-plagiarism-content {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}

.rag-loading-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
}

.rag-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rag-spin 0.7s linear infinite;
}

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

.rag-summary {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}

.rag-pct-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 8px 0 16px;
}

/* ── GitHub-style Unified Diff ── */

.rag-diff-container {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
}

.rag-diff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f6f8fa;
  border-bottom: 1px solid var(--border);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
}

.rag-diff-header-label {
  color: var(--text);
}

.rag-diff-header-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  background: #e8eaef;
  padding: 2px 8px;
  border-radius: 10px;
}

.rag-diff-block {
  border-bottom: 1px solid var(--border);
}

.rag-diff-block:last-child {
  border-bottom: none;
}

.rag-diff-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fafbfc;
  font-family: var(--font);
  font-size: 12px;
}

.rag-diff-ref-label {
  font-weight: 650;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.rag-diff-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  font-family: var(--font);
}

.rag-diff-badge.corrected { background: #dcfce7; color: #16a34a; }
.rag-diff-badge.real { background: #dcfce7; color: #16a34a; }
.rag-diff-badge.failed { background: #fef2f2; color: #dc2626; }

.rag-diff-lines {
  /* container for diff lines */
}

.rag-diff-line {
  display: flex;
  align-items: flex-start;
  padding: 4px 14px;
  min-height: 26px;
  word-break: break-word;
}

.rag-diff-sign {
  flex-shrink: 0;
  width: 18px;
  font-weight: 700;
  text-align: center;
  margin-right: 8px;
  user-select: none;
}

.rag-diff-text {
  flex: 1;
  white-space: pre-wrap;
}

/* Deleted line: red background */
.rag-diff-del {
  background: #ffeef0;
}

.rag-diff-del .rag-diff-sign {
  color: #cb2431;
}

.rag-diff-del .rag-diff-text {
  color: #86181d;
}

/* Added line: green background */
.rag-diff-add {
  background: #e6ffed;
}

.rag-diff-add .rag-diff-sign {
  color: #22863a;
}

.rag-diff-add .rag-diff-text {
  color: #144620;
}

/* Kept line (real reference) */
.rag-diff-keep {
  background: #f0fdf4;
}

.rag-diff-keep .rag-diff-sign {
  color: #16a34a;
}

/* Failed / uncorrected block */
.rag-diff-failed .rag-diff-block-header {
  background: #fef2f2;
}

/* OK / already-real block */
.rag-diff-ok .rag-diff-block-header {
  background: #f0fdf4;
}

.rag-diff-note {
  padding: 6px 14px 8px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  background: #fafbfc;
}

/* ── Apply bar ── */

.rag-apply-bar {
  margin-top: 20px;
  padding: 16px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-sm);
  text-align: center;
}

.rag-apply-bar.rag-apply-clean {
  background: #ecfdf5;
  border-color: #6ee7b7;
}

.rag-apply-hint {
  font-size: 12px;
  color: #92400e;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.rag-apply-icon {
  font-size: 14px;
}

.rag-apply-btn {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

/* ── Dark mode ── */

[data-theme="dark"] .rag-diff-container {
  border-color: var(--border);
}

[data-theme="dark"] .rag-diff-header {
  background: #1c1e26;
  border-color: var(--border);
}

[data-theme="dark"] .rag-diff-header-count {
  background: #2d3040;
  color: #8b8fa6;
}

[data-theme="dark"] .rag-diff-block-header {
  background: #1a1c24;
}

[data-theme="dark"] .rag-diff-del {
  background: #2d1519;
}

[data-theme="dark"] .rag-diff-del .rag-diff-sign {
  color: #f85149;
}

[data-theme="dark"] .rag-diff-del .rag-diff-text {
  color: #ffa198;
}

[data-theme="dark"] .rag-diff-add {
  background: #12261e;
}

[data-theme="dark"] .rag-diff-add .rag-diff-sign {
  color: #3fb950;
}

[data-theme="dark"] .rag-diff-add .rag-diff-text {
  color: #7ee787;
}

[data-theme="dark"] .rag-diff-keep {
  background: #0f2f24;
}

[data-theme="dark"] .rag-diff-keep .rag-diff-sign {
  color: #4ade80;
}

[data-theme="dark"] .rag-diff-failed .rag-diff-block-header {
  background: #3b1515;
}

[data-theme="dark"] .rag-diff-ok .rag-diff-block-header {
  background: #0f2f24;
}

[data-theme="dark"] .rag-diff-note {
  background: #1a1c24;
}

[data-theme="dark"] .rag-apply-bar {
  background: #2d2010;
  border-color: #7a5d10;
}

[data-theme="dark"] .rag-apply-bar.rag-apply-clean {
  background: #0f2f24;
  border-color: #1a5c3a;
}

[data-theme="dark"] .rag-apply-hint {
  color: #fbbf24;
}

[data-theme="dark"] .rag-summary {
  background: #1a2030;
  border-left-color: var(--accent);
}

[data-theme="dark"] .rag-diff-badge.corrected,
[data-theme="dark"] .rag-diff-badge.real { background: #0f2f24; color: #4ade80; }
[data-theme="dark"] .rag-diff-badge.failed { background: #3b1515; color: #fca5a5; }

[data-theme="dark"] .rag-loading-indicator {
  background: #161820;
  border-color: #262832;
}

[data-theme="dark"] .rag-spinner {
  border-color: #262832;
  border-top-color: var(--accent);
}

/* ── Tool Result Cards ───────────────────────────────────────────── */

.tool-result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.tool-result-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--surface-alt, #f8f9fb);
  border-bottom: 1px solid var(--border);
}

.tool-result-card-header .card-icon { font-size: 20px; }

.tool-result-card-header .card-title {
  font-size: 15px; font-weight: 700;
  color: var(--text); flex: 1;
}

.tool-result-card-header .card-meta {
  font-size: 11px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px;
}

.tool-result-card-body { padding: 16px 18px; overflow-wrap: break-word; word-break: break-word; }

.tool-result-card-section {
  margin-bottom: 16px; padding: 12px 14px;
  border-radius: 8px; background: var(--bg, #fafbfc);
  border: 1px solid var(--border);
}

.tool-result-card-section:last-child { margin-bottom: 0; }

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

.tool-result-card-section .section-title .section-icon { font-size: 14px; }

.tool-result-card-section .section-body {
  font-size: 13px; line-height: 1.7; color: var(--text);
  overflow-wrap: break-word; word-break: break-word; overflow-x: hidden;
  max-height: 500px; overflow-y: auto;
}

.tool-result-card-section .section-body p { margin: 6px 0; }
.tool-result-card-section .section-body p:first-child { margin-top: 0; }
.tool-result-card-section .section-body p:last-child { margin-bottom: 0; }
.tool-result-card-section .section-body table { max-width: 100%; display: block; overflow-x: auto; font-size: 12px; }
.tool-result-card-section .section-body img { max-width: 100%; height: auto; }
.tool-result-card-section .section-body pre,
.tool-result-card-section .section-body code { white-space: pre-wrap; word-break: break-word; max-width: 100%; }

/* Suggestion variant */
.tool-result-card-suggestion {
  border-left: 3px solid #22c55e;
  background: #f0faf4;
}

.tool-result-card-warning {
  border-left: 3px solid #f59e0b;
  background: #fffcf0;
}

.tool-result-card-error {
  border-left: 3px solid #ef4444;
  background: #fef5f5;
}

/* Code block in cards */
.tool-result-card-code {
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
  background: #1e1e2e; color: #cdd6f4;
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
}

.tool-result-card-code .code-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: #181825; color: #a6adc8;
  font-size: 11px; font-weight: 600;
}

.tool-result-card-code .code-body {
  padding: 14px; overflow-x: auto;
  white-space: pre-wrap; word-break: break-word;
}

/* Score bar */
.tool-result-card-score {
  display: flex; align-items: center; gap: 12px; margin: 8px 0;
}

.tool-result-card-score .score-label {
  font-size: 13px; font-weight: 600; color: var(--text);
  min-width: 80px;
}

.tool-result-card-score .score-bar-track {
  flex: 1; height: 10px; background: var(--border);
  border-radius: 5px; overflow: hidden;
}

.tool-result-card-score .score-bar-fill {
  height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), #818cf8);
  transition: width .6s ease;
}

.tool-result-card-score .score-value {
  font-size: 13px; font-weight: 700; color: var(--accent);
  min-width: 36px; text-align: right;
}

/* Card actions */
.tool-result-card-actions {
  display: flex; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt, #f8f9fb);
  flex-wrap: wrap;
}

.tool-result-card-actions .card-action-btn {
  padding: 7px 16px; border-radius: 6px; border: none;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .2s;
}

.tool-result-card-actions .card-action-btn.primary {
  background: var(--accent); color: #fff;
}

.tool-result-card-actions .card-action-btn.primary:hover {
  filter: brightness(1.1);
}

.tool-result-card-actions .card-action-btn.secondary {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
}

.tool-result-card-actions .card-action-btn.secondary:hover {
  background: var(--border);
}

/* Dark mode */
[data-theme="dark"] .tool-result-card {
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

[data-theme="dark"] .tool-result-card-header {
  background: #161820;
}

[data-theme="dark"] .tool-result-card-section {
  background: #111218;
}

[data-theme="dark"] .tool-result-card-suggestion {
  background: #0f2f1a; border-left-color: #22c55e;
}

[data-theme="dark"] .tool-result-card-warning {
  background: #2e2410; border-left-color: #f59e0b;
}

[data-theme="dark"] .tool-result-card-error {
  background: #2e1010; border-left-color: #ef4444;
}

[data-theme="dark"] .tool-result-card-actions {
  background: #161820;
}

[data-theme="dark"] .tool-result-card-actions .card-action-btn.secondary {
  background: #1e2030; border-color: #2a2d3a;
}

[data-theme="dark"] .tool-result-card-actions .card-action-btn.secondary:hover {
  background: #2a2d3a;
}

.edit-mode-indicator {
  position: sticky; top: 8px; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #eff6ff; border: 2px solid #3b82f6;
  border-radius: 8px; margin-bottom: 12px;
  font-size: 14px; font-weight: 600; color: #1d4ed8;
}
.edit-mode-indicator .exit-edit-btn {
  margin-left: auto; padding: 6px 14px; background: #3b82f6;
  color: #fff; border: none; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600;
}
.edit-mode-indicator .exit-edit-btn:hover { background: #2563eb; }
[data-theme="dark"] .edit-mode-indicator {
  background: #1e3a5f; border-color: #3b82f6; color: #93c5fd;
}
.edit-textarea {
  width: 100%; min-height: 50vh; padding: 20px; border: 2px solid #3b82f6;
  border-radius: 8px; font-size: 14px; line-height: 1.6; font-family: var(--mono);
  resize: vertical; background: var(--surface); color: var(--text);
  box-sizing: border-box;
}
[data-theme="dark"] .edit-textarea { border-color: #60a5fa; }

/* Remove print constraints during editing */
.paper-page.editing {
  max-width: none; min-height: auto; padding: 0;
  background: transparent; font-family: var(--font); font-size: 14px;
  text-align: left; box-shadow: none;
}
.markdown-body.editing {
  max-width: none; min-height: auto; padding: 0;
  background: transparent;
}

/* ============================================================
   API Key Setup Modal
   ============================================================ */
@keyframes modalIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.setup-overlay {
  position: fixed; inset: 0; background: var(--overlay-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; animation: modalIn 0.25s ease;
}
.setup-overlay[hidden] { display: none; }
.setup-card {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 97%, var(--bg)) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 440px; width: 92%;
  box-shadow: var(--shadow-xl), var(--rim-highlight), 0 0 0 1px rgba(0,0,0,.03);
}
.setup-card h2 {
  font-size: 20px; font-weight: 700;
  margin-bottom: 8px; color: var(--text);
}
.setup-card a { color: var(--accent); font-weight: 500; }
.setup-actions {
  display: flex; gap: 10px; margin-top: 16px;
}
.setup-actions .btn-secondary { flex-shrink: 0; }
#setup-error { margin-bottom: 12px; }

.settings-btn {
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); cursor: pointer;
  font-size: 16px; padding: 0; line-height: 34px; text-align: center;
  color: var(--text-secondary); transition: all var(--transition);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.settings-btn:hover {
  color: var(--text); border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 12px var(--accent-glow);
}

/* Dark mode */
[data-theme="dark"] .setup-card {
  border: 1px solid var(--border);
}

/* ============================================================
   Login Modal (inline in index.html)
   ============================================================ */
.login-overlay {
  position: fixed; inset: 0; background: var(--overlay-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 210; animation: modalIn 0.25s ease;
}
.login-overlay[hidden] { display: none; }

.glass-card {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 420px; width: 92%;
  box-shadow: var(--shadow-xl),
              var(--rim-highlight),
              0 0 0 1px rgba(255,255,255,.05) inset,
              0 0 120px rgba(37,99,235,.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.login-modal-close {
  position: absolute; top: 12px; right: 16px;
  border: none; background: none; cursor: pointer;
  font-size: 24px; color: var(--text-secondary); line-height: 1;
  transition: color var(--transition);
}
.login-modal-close:hover { color: var(--text); }

.login-tabs {
  display: flex; gap: 0; margin-bottom: 24px;
  border-bottom: 2px solid var(--border);
}
.login-tab {
  flex: 1; padding: 10px 16px; border: none; background: none;
  font-size: 15px; font-weight: 600; cursor: pointer;
  color: var(--text-secondary); transition: color .2s;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.login-tab.active {
  color: var(--accent); border-bottom-color: var(--accent);
}
.login-tab:hover { color: var(--text); }

.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form[hidden] { display: none; }
.login-form input {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
  font-size: 14px; outline: none;
  box-shadow: var(--shadow-inset);
}
.login-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-inset); }
.login-form label { display: block; margin-bottom: 2px; font-weight: 500; font-size: 13px; }
.login-form .field { margin-bottom: 4px; }
.login-modal-error {
  color: var(--red); font-size: 13px; margin-top: 8px;
  padding: 8px 12px; background: var(--red-light); border-radius: var(--radius-sm);
}
.login-modal-error:empty,
.login-modal-error[hidden] { display: none; }

/* Login nav pulse */
@keyframes loginPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.35); }
  50% { box-shadow: 0 0 0 8px rgba(37,99,235,0); }
}
.nav-login-link {
  font-size: 13px; color: #fff; text-decoration: none;
  padding: 7px 16px; border-radius: 20px; transition: all .2s;
  font-weight: 600; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: 0 2px 8px var(--accent-glow);
  animation: loginPulse 2.5s ease-in-out infinite;
}
.nav-login-link:hover {
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateY(-1px);
}
.nav-login-link.logged-in {
  animation: none; color: var(--text-secondary);
  background: var(--surface); border: 1px solid var(--border);
  font-weight: 400; box-shadow: none;
  padding: 6px 14px;
}
.nav-login-link.logged-in:hover { color: var(--text); border-color: var(--accent); transform: none; }

/* Login guidance banner */
.login-guidance {
  background: color-mix(in srgb, var(--accent-light) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 13px; color: var(--text);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
  line-height: 1.5;
}
.login-guidance .guidance-icon { font-size: 20px; flex-shrink: 0; }
.login-guidance .guidance-link {
  color: var(--accent); cursor: pointer; font-weight: 600;
  text-decoration: underline; white-space: nowrap;
}
.login-guidance .guidance-link:hover { color: var(--accent-hover); }
.login-guidance .guidance-dismiss {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 16px; color: var(--text-secondary); flex-shrink: 0;
}


/* ============================================================
   Login Spotlight — frosted blur + floating pill
   ============================================================ */
.login-spotlight-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px) saturate(0.85);
  -webkit-backdrop-filter: blur(6px) saturate(0.85);
  cursor: pointer;
  animation: spotlightFadeIn .6s ease;
}
@keyframes spotlightFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Subtle aurora ring around the login button — soft glow, no hard border */
.login-spotlight-aurora {
  position: absolute; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.06) 0%, rgba(37,99,235,0) 70%);
  animation: auroraBreath 3s ease-in-out infinite;
}
@keyframes auroraBreath {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* Refined floating indicator pill */
.login-spotlight-pill {
  position: absolute; pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 2px 16px rgba(0,0,0,.06), 0 8px 40px rgba(37,99,235,.08);
  font-size: 14px; font-weight: 600; color: #2563eb;
  white-space: nowrap;
  animation: pillFloat 3s ease-in-out infinite;
}
.login-spotlight-pill .pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2563eb;
  animation: pillDotPulse 1.8s ease-in-out infinite;
}
@keyframes pillFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes pillDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.4); }
  50% { box-shadow: 0 0 0 6px rgba(37,99,235,0); }
}

/* Dismiss hint */
.login-spotlight-dismiss {
  position: absolute; bottom: 40px; left: 50%;
  transform: translateX(-50%);
  color: rgba(0,0,0,.25);
  font-size: 13px; pointer-events: none;
  animation: spotlightFadeIn .8s ease;
}

/* Account dropdown panel */
.account-panel {
  position: absolute; top: 100%; right: 0; margin-top: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 220px; z-index: 50; animation: scaleIn .2s ease;
  overflow: hidden;
}
.account-panel[hidden] { display: none; }
.account-panel .account-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-panel .account-body { padding: 12px 16px; }
.account-panel .account-key-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--text-secondary); margin-bottom: 10px;
  gap: 8px; padding: 8px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}
.account-panel .account-key-status { font-size: 12px; font-weight: 500; cursor: pointer; }
.account-panel .account-key-status:hover { text-decoration: underline; }
.account-panel .account-key-status.has-key {
  color: var(--green);
}
.account-panel .account-key-status.no-key {
  color: #d97706;
}

@media (max-width: 768px) {
  .glass-card { padding: 24px; margin: 16px; }
  .login-tabs { margin-bottom: 16px; }
}

/* ============================================================
   PWA Install Banner
   ============================================================ */
.pwa-install-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface); border-top: 2px solid var(--accent);
  padding: 12px 20px; display: flex; align-items: center;
  gap: 10px; z-index: 95; font-size: 14px;
  animation: slideUpBanner 0.3s ease;
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
}
.pwa-install-banner span { flex: 1; color: var(--text); }
@keyframes slideUpBanner {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@media (max-width: 480px) {
  .pwa-install-banner {
    flex-wrap: wrap; padding: 10px 14px; font-size: 13px;
  }
  .pwa-install-banner span { width: 100%; }
}

/* ============================================================
   Bottom Tab Bar (mobile)
   ============================================================ */
.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface); border-top: 1px solid var(--border);
  z-index: 100; padding: 4px 0 env(safe-area-inset-bottom, 0);
  justify-content: space-around; align-items: center;
}
.bottom-nav-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 6px 0; border: none; background: none;
  cursor: pointer; color: var(--text-secondary); font-size: 11px;
  transition: color var(--transition); min-width: 56px;
}
.bottom-nav-btn.active { color: var(--accent); }
.bottom-nav-icon { font-size: 20px; line-height: 1; }
.bottom-nav-label { font-family: var(--font); }

[data-theme="dark"] .bottom-nav {
  border-top-color: var(--border);
  background: var(--surface);
}

/* ============================================================
   Responsive: Tablet (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Hide top nav, show bottom tab bar */
  .nav { display: none; }
  .bottom-nav { display: flex; }
  main { padding: 16px 12px 80px; }

  .hero h1 { font-size: 22px; }
  .hero p { font-size: 14px; }
  .card { padding: 16px; }
  .field-row { flex-direction: column; gap: 12px; }

  /* Stats bar: 2x2 grid */
  .stats-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-divider { display: none; }

  /* Sidebar → fullscreen modal */
  .result-sidebar {
    width: 100% !important; max-width: 100% !important;
    height: 100%; border-radius: 0;
  }
  /* But keep minimized sidebar as floating bar */
  .result-sidebar.minimized {
    width: auto !important; max-width: calc(100vw - 24px) !important;
    height: auto; border-radius: 12px;
    top: 70px; right: 8px;
  }
  .result-sidebar-header {
    padding: 16px; border-radius: 0;
  }
  .result-sidebar-header .close-btn {
    width: 44px; height: 44px; font-size: 24px;
  }

  /* Table wrapper for horizontal scroll */
  .markdown-body table {
    display: block; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Paper preview full-width */
  .paper-page { max-width: 100%; padding: 16px; font-size: 13px; }
  .paper-result-card { padding: 12px; }

  /* TOC — hidden on mobile, replaced by dropdown */
  .toc-sidebar { display: none; }
  .toc-dropdown-btn {
    display: block; width: 100%; padding: 10px 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 14px;
    cursor: pointer; text-align: left; color: var(--text);
    margin-bottom: 12px;
  }
  .toc-dropdown-btn:not([hidden]) { display: block; }
  .toc-dropdown {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px;
    margin-bottom: 12px; max-height: 300px; overflow-y: auto;
  }
  .toc-dropdown:not([hidden]) { display: block; }
  .toc-dropdown a {
    display: block; padding: 6px 8px; color: var(--accent);
    text-decoration: none; font-size: 13px; border-radius: 4px;
  }
  .toc-dropdown a:hover { background: var(--accent-light); }

  /* Filter bars stack */
  .filter-bar { flex-wrap: wrap; }
  .filter-bar .search-input { min-width: 100%; }
  .filter-bar .filter-select { flex: 1; min-width: 100px; }

  /* Model grid: 2 cols */
  .model-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Timeline: single column */
  .timeline-day { flex-direction: column; }

  /* Tools grid: 2 cols */
  .tools-grid { grid-template-columns: 1fr 1fr; }

  /* Countdown: single column */
  .countdown-grid { grid-template-columns: 1fr; }

  /* Explain panel: full-width on mobile */
  .explain-panel {
    width: 100% !important; max-width: 100% !important;
    right: 0; bottom: 0; border-radius: 16px 16px 0 0;
  }

  /* Compare overlay: fullscreen */
  .compare-overlay .overlay-card { max-width: 100%; margin: 0; border-radius: 0; }
}

/* ============================================================
   Responsive: Mobile (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  .hero h1 { font-size: 19px; }
  .hero p { font-size: 13px; }
  main { padding: 12px 8px 76px; }
  .card { padding: 14px; border-radius: var(--radius-sm); }

  /* Model grid: 1 col */
  .model-grid { grid-template-columns: 1fr; }

  /* Paper stats: stack */
  .paper-stats-grid { flex-direction: column; gap: 10px; }

  /* Bottom nav smaller */
  .bottom-nav-btn { padding: 6px 0; font-size: 10px; }
  .bottom-nav-icon { font-size: 18px; }

  /* Toast: full-width */
  .toast { left: 8px; right: 8px; max-width: none; }

  /* Result toolbar: wrap */
  .result-toolbar { flex-wrap: wrap; gap: 8px; }
  .result-toolbar .result-actions { width: 100%; }
}

/* ============================================================
   Animation System — L1: CSS Transitions
   ============================================================ */

/* Tab content switch */
.tab {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  pointer-events: none;
}
.tab.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Card hover lift */
.card, .model-card, .viz-template, .tool-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover, .model-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* Button press feedback */
.btn-primary:active, .btn-sm:active, .btn-secondary:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* Model card glow on hover */
.model-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.model-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Nav button */
.nav-btn {
  transition: color 0.15s ease, background 0.15s ease;
}

/* Result card reveal */
.result-card.visible {
  animation: fadeSlideUp 0.4s ease-out;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Animation System — L2: Sidebar & Modal
   ============================================================ */

/* Sidebar slide-in */
.result-sidebar {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.result-sidebar.open {
  transform: translateX(0);
}

/* Sidebar backdrop */
.result-sidebar-backdrop {
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.result-sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Explain panel */
.explain-panel {
  animation: slideUp 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal entrance */
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Overlay fade */
.overlay {
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Paper stats slide down */
.paper-stats {
  animation: slideDown 0.35s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Animation System — L3: Streaming Generation
   ============================================================ */

/* Stage indicator pulse */
.stage-indicator .stage-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
  margin-right: 8px; vertical-align: middle;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.75); }
}

/* Streaming cursor blink */
.streaming-cursor::after {
  content: '|'; color: var(--accent);
  animation: blink 1s step-end infinite;
  font-weight: 700;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* Content fade-in — only when container has content-ready class */
.markdown-body.content-ready > * {
  animation: contentFadeIn 0.3s ease-out;
}
@keyframes contentFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Skeleton loading shimmer */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, transparent 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  height: 16px; margin: 8px 0;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Completion glow */
.result-card.completed {
  animation: glowPulse 2s ease-out;
}
@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%  { box-shadow: 0 0 0 8px var(--accent-glow); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ============================================================
   Animation System — L4: Micro-interactions
   ============================================================ */

/* Toast slide-in */
.toast {
  animation: toastIn 0.3s ease-out;
}
.toast.hiding {
  animation: toastOut 0.25s ease-in forwards;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

/* Star/favorite pop */
.history-item-star.starred {
  animation: starPop 0.3s ease;
}
@keyframes starPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Copy button feedback */
.copy-done {
  animation: copyPop 0.3s ease;
  color: var(--green);
}
@keyframes copyPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Verification checklist item toggle */
.verify-item {
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* History item hover */
.history-item {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.history-item:hover {
  transform: translateX(4px);
}

/* Viz template expand */
.viz-template[open] .viz-template-body {
  animation: expandDown 0.2s ease;
}
@keyframes expandDown {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 1000px; }
}

/* Edit textarea focus */
.edit-textarea:focus {
  transition: box-shadow 0.2s ease;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ============================================================
   AI Teammate Panel
   ============================================================ */
.teammate-float-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 190;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, opacity .3s;
}
.teammate-float-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);
}
.teammate-float-btn:active { transform: scale(0.95); }
.teammate-float-btn.scrolling { opacity: 0.4; }

.teammate-badge {
  position: absolute; top: -4px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}

/* ---- CSS Cartoon Avatars ---- */
.teammate-avatar-icon {
  width: 32px; height: 32px; border-radius: 50%;
  flex-shrink: 0; position: relative; overflow: hidden;
}
/* Architect (modeler) — blue, round glasses */
.teammate-avatar-icon.avatar-architect {
  background: linear-gradient(135deg, #4f8cf7 0%, #2563eb 100%);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.15), inset 0 1px 2px rgba(255,255,255,.25);
}
.teammate-avatar-icon.avatar-architect::before {
  content: '';
  position: absolute; top: 10px; left: 5px; right: 5px; height: 7px;
  border: 2px solid rgba(255,255,255,.85); border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4);
}
.teammate-avatar-icon.avatar-architect::after {
  content: '';
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 4px;
  border-bottom: 2px solid rgba(255,255,255,.6); border-radius: 0 0 4px 4px;
}
/* Writer — purple, pen nib */
.teammate-avatar-icon.avatar-writer {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.15), inset 0 1px 2px rgba(255,255,255,.25);
}
.teammate-avatar-icon.avatar-writer::before {
  content: '';
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 10px solid rgba(255,255,255,.85);
}
.teammate-avatar-icon.avatar-writer::after {
  content: '';
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 8px; background: rgba(255,255,255,.65); border-radius: 1px;
}
/* Coach — amber, cap */
.teammate-avatar-icon.avatar-coach {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.15), inset 0 1px 2px rgba(255,255,255,.25);
}
.teammate-avatar-icon.avatar-coach::before {
  content: '';
  position: absolute; top: 6px; left: 6px; right: 5px; height: 6px;
  background: rgba(255,255,255,.3); border-radius: 3px 3px 0 0;
}
.teammate-avatar-icon.avatar-coach::after {
  content: '';
  position: absolute; top: 4px; left: 10px; right: 8px; height: 4px;
  background: rgba(255,255,255,.4); border-radius: 3px 3px 0 0;
}

.teammate-panel {
  position: fixed; bottom: 92px; right: 24px; z-index: 189;
  width: 380px; max-height: 520px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  box-shadow: none;
  display: flex; flex-direction: column;
  animation: teammateSlideIn .3s ease-out;
  overflow: visible;
}
@keyframes teammateSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.teammate-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px;
}
.teammate-close {
  margin-left: auto; background: none; border: none;
  font-size: 20px; cursor: pointer; color: var(--text-secondary);
  line-height: 1;
}

.teammate-messages {
  flex: 1; overflow-y: auto; padding: 12px 4px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 340px;
  perspective: 800px;
}
.teammate-message {
  max-width: 85%; padding: 10px 14px; border-radius: 14px;
  font-size: 13px; line-height: 1.55; animation: msgIn .3s cubic-bezier(.16,1,.3,1) both;
  word-break: break-word;
  transition: transform .2s ease, box-shadow .2s ease;
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.teammate-message:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
}
/* Last 3 messages have staggered animation delay for cascading effect */
.teammate-message:nth-last-child(3) { animation-delay: .05s; }
.teammate-message:nth-last-child(2) { animation-delay: .1s; }
.teammate-message:nth-last-child(1) { animation-delay: .15s; }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95) rotateX(8deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); }
}

/* Typing indicator */
.typing-dots { display: flex; gap: 4px; padding: 4px 2px; align-items: center; }
.typing-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-secondary); opacity: 0.3;
  animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30% { transform: translateY(-6px); opacity: 0.8; }
}
.typing-indicator.typing-done { animation: typingFadeOut .15s ease forwards; }
@keyframes typingFadeOut { to { opacity: 0; transform: scale(0.95); } }

/* Markdown rendered content inside teammate messages */
.teammate-message.role-teammate .msg-text p { margin: 0 0 6px; }
.teammate-message.role-teammate .msg-text p:last-child { margin-bottom: 0; }
.teammate-message.role-teammate .msg-text strong { font-weight: 700; }
.teammate-message.role-teammate .msg-text em { font-style: italic; }
.teammate-message.role-teammate .msg-text ul,
.teammate-message.role-teammate .msg-text ol { margin: 4px 0; padding-left: 18px; }
.teammate-message.role-teammate .msg-text li { margin-bottom: 2px; }
.teammate-message.role-teammate .msg-text code {
  background: var(--inline-code-bg); padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: 12px;
}
.teammate-message.role-teammate .msg-text pre {
  background: var(--pre-bg); color: var(--pre-color);
  padding: 10px 14px; border-radius: var(--radius-sm);
  overflow-x: auto; margin: 6px 0; font-size: 12px;
}
.teammate-message.role-teammate .msg-text pre code { background: none; padding: 0; }
.teammate-message.role-teammate .msg-text h1,
.teammate-message.role-teammate .msg-text h2,
.teammate-message.role-teammate .msg-text h3 { font-size: 14px; font-weight: 700; margin: 8px 0 4px; }
.teammate-message.role-teammate .msg-text blockquote {
  border-left: 3px solid var(--accent); padding-left: 10px;
  margin: 6px 0; color: var(--text-secondary);
}
.teammate-message.role-teammate {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: 0 2px 16px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.05);
  align-self: flex-start;
  border-bottom-left-radius: 4px; color: var(--text);
}
.teammate-message.role-teammate:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.07);
}
.teammate-message.role-user {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, var(--purple)));
  color: #fff; align-self: flex-end;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 16px rgba(37,99,235,.25), 0 0 0 1px rgba(37,99,235,.15);
}
.teammate-message.role-user:hover {
  box-shadow: 0 6px 24px rgba(37,99,235,.35), 0 0 0 1px rgba(37,99,235,.2);
}
.teammate-message .msg-actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.teammate-message .msg-btn {
  padding: 4px 10px; border-radius: 14px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); font-size: 12px;
  cursor: pointer; transition: background .15s;
}
.teammate-message .msg-btn:hover { background: var(--accent-light); }

.teammate-input-row {
  padding: 10px 4px 12px;
  border-top: none;
  display: flex; gap: 8px; align-items: center;
  background: transparent;
}
.teammate-input {
  flex: 1; border: 1px solid color-mix(in srgb, var(--border) 50%, transparent); border-radius: 22px;
  padding: 10px 16px; font-size: 13px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  color: var(--text); outline: none;
  box-shadow: 0 1px 8px rgba(0,0,0,.04);
  transition: border-color .2s, box-shadow .25s;
}
.teammate-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 1px 4px rgba(0,0,0,.06);
}
.teammate-input::placeholder { color: var(--text-secondary); opacity: 0.6; }
.teammate-send-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff; border: none;
  border-radius: 50%; width: 38px; height: 38px; cursor: pointer;
  font-size: 16px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 8px var(--accent-glow);
  transition: transform .15s, box-shadow .15s;
  line-height: 1;
}
.teammate-send-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.teammate-send-btn:active { transform: scale(0.95); }
.teammate-mic-btn {
  background: none; border: none; font-size: 18px; cursor: pointer;
  padding: 6px; flex-shrink: 0; opacity: 0.6; border-radius: 50%;
  transition: opacity .15s, background .15s;
}
.teammate-mic-btn:hover { opacity: 0.9; background: var(--inline-code-bg); }
.teammate-mic-btn.recording { color: var(--red); opacity: 1; animation: pulse 1s infinite; }
.teammate-mic-btn:disabled { opacity: 0.3; cursor: default; }

.teammate-resize-handle {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 12px; cursor: ns-resize;
  display: flex; align-items: center; justify-content: center;
  user-select: none; z-index: 2;
  transition: background .15s;
  border-radius: 0 0 var(--radius) var(--radius);
}
.teammate-resize-handle::after {
  content: ''; width: 32px; height: 3px;
  background: var(--text-secondary); opacity: 0.25; border-radius: 2px;
  transition: opacity .15s, width .15s;
}
.teammate-resize-handle:hover { background: rgba(0,0,0,.04); }
.teammate-resize-handle:hover::after { opacity: 0.5; width: 44px; }

@media (max-width: 768px) {
  .teammate-panel {
    position: fixed; bottom: 0; left: 0; right: 0; width: 100%;
    max-height: 70vh; border-radius: var(--radius) var(--radius) 0 0;
    animation: sheetUp .3s ease-out;
    /* Restore solid panel on mobile */
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
  }
  @keyframes sheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .teammate-float-btn { bottom: 80px; right: 16px; }
  .teammate-mic-btn { display: inline-block !important; }
  /* Restore solid bubbles on mobile */
  .teammate-message.role-teammate {
    background: var(--inline-code-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .teammate-input-row {
    background: color-mix(in srgb, var(--bg) 50%, var(--surface));
    border-top: 1px solid var(--border);
    padding: 10px 14px 12px;
  }
  .teammate-input {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .teammate-messages { padding: 12px; perspective: none; }
  .teammate-message:hover { transform: none; box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04); }
}

/* ---- Drag bar & Collapse bar (glass bubble panel) ---- */
.teammate-drag-bar {
  height: 28px; cursor: grab; user-select: none;
  background: transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: background .15s;
}
.teammate-drag-bar:active { cursor: grabbing; }
.teammate-drag-bar:hover { background: rgba(255,255,255,.03); }

.teammate-collapse-bar {
  display: flex; align-items: center; padding: 8px 12px;
  cursor: pointer; user-select: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  gap: 8px;
  transition: all .2s;
}
.teammate-collapse-bar:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-1px);
}

/* Collapsed panel: only collapse bar visible */
.teammate-panel.collapsed .teammate-messages,
.teammate-panel.collapsed .teammate-input-row,
.teammate-panel.collapsed .teammate-drag-bar { display: none; }
.teammate-panel.collapsed { overflow: visible; }
.teammate-panel.collapsed .teammate-collapse-bar { display: flex; }

/* Avatar row for teammate messages */
.msg-avatar-row {
  display: flex; align-items: flex-start; gap: 8px;
}
.msg-avatar-row .msg-text { flex: 1; min-width: 0; }

/* ============================================================
   MMA Welcome Splash Screen — Apple-style glass + liquid blobs
   ============================================================ */
.mma-welcome {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  /* Frosted glass: blur behind + clean white overlay for Apple-style translucency */
  backdrop-filter: blur(48px) saturate(130%);
  -webkit-backdrop-filter: blur(48px) saturate(130%);
  /* Clean white base so the blur operates on a bright surface, not page clutter */
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(59,130,246,.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 70% 60%, rgba(124,58,237,.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,.15) 0%, transparent 60%),
    rgba(255,255,255,.75);
}

/* ---- Blobs: Apple-style liquid color washes ---- */
.mma-welcome-blobs {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  pointer-events: none;
}
.mma-blob {
  position: absolute; border-radius: 50%;
  filter: blur(120px);
  animation: blobFloat 20s cubic-bezier(.45,0,.55,1) infinite;
  will-change: transform;
}
.mma-blob.blob-1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle at 40% 40%, rgba(59,130,246,.55), rgba(147,197,253,.2));
  top: -8%; left: -5%;
  animation-delay: 0s;
}
.mma-blob.blob-2 {
  width: 360px; height: 360px;
  background: radial-gradient(circle at 50% 50%, rgba(191,219,254,.5), rgba(147,197,253,.15));
  top: 45%; right: -10%;
  animation-delay: -6s;
}
.mma-blob.blob-3 {
  width: 340px; height: 340px;
  background: radial-gradient(circle at 50% 50%, rgba(251,191,36,.3), rgba(245,158,11,.08));
  bottom: -10%; left: 25%;
  animation-delay: -13s;
}
.mma-blob.blob-4 {
  width: 280px; height: 280px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.45), rgba(255,255,255,.1));
  top: 20%; left: 50%;
  animation-delay: -4s;
}
.mma-blob.blob-5 {
  width: 240px; height: 240px;
  background: radial-gradient(circle at 50% 50%, rgba(96,165,250,.4), rgba(147,197,253,.1));
  bottom: 25%; right: 25%;
  animation-delay: -9s;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  25%  { transform: translate(50px, -35px) scale(1.08) rotate(1deg); }
  50%  { transform: translate(-30px, 40px) scale(0.93) rotate(-1deg); }
  75%  { transform: translate(-45px, -20px) scale(1.05) rotate(0.5deg); }
}

/* ---- Text directly on glass, no card ---- */
.mma-welcome-text {
  position: relative; z-index: 1;
  text-align: center;
  pointer-events: none;
  animation: welcomeTextIn .8s .2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes welcomeTextIn {
  from { opacity: 0; transform: translateY(16px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.mma-welcome-title {
  font-size: 88px; font-weight: 800;
  letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(135deg, var(--accent) 0%, #6366f1 50%, var(--purple) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.06));
  transition: transform .3s ease-out;
  will-change: transform;
}

.mma-welcome-subtitle {
  font-size: 16px; color: var(--text-secondary);
  font-weight: 450; letter-spacing: .04em;
  margin-bottom: 40px;
  transition: transform .4s ease-out;
}

.mma-welcome-hint {
  font-size: 12px; color: var(--text-secondary);
  opacity: .45; letter-spacing: .04em;
  animation: welcomeHintPulse 2.4s ease-in-out infinite;
}
@keyframes welcomeHintPulse {
  0%, 100% { opacity: .3; }
  50% { opacity: .65; }
}

@media (max-width: 640px) {
  .mma-welcome {
    backdrop-filter: blur(40px) saturate(120%);
    -webkit-backdrop-filter: blur(40px) saturate(120%);
  }
  .mma-welcome-title { font-size: 52px; }
  .mma-welcome-subtitle { font-size: 13px; margin-bottom: 32px; }
  .mma-blob { filter: blur(80px); }
  .mma-blob.blob-1 { width: 260px; height: 260px; }
  .mma-blob.blob-2 { width: 220px; height: 220px; }
  .mma-blob.blob-3 { width: 200px; height: 200px; }
  .mma-blob.blob-4 { width: 180px; height: 180px; }
  .mma-blob.blob-5 { width: 160px; height: 160px; }
}

[data-theme="dark"] .mma-welcome {
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(59,130,246,.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 70% 60%, rgba(139,92,246,.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,.05) 0%, transparent 60%),
    rgba(12,14,20,.75);
}
[data-theme="dark"] .mma-blob.blob-4 {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,.03));
}

/* ============================================================
   Workflow Step Bar & Progress Cards
   ============================================================ */
.step-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 0 20px; flex-wrap: wrap;
}
.step-item { display: flex; align-items: center; gap: 6px; cursor: default; }
.step-item.done { cursor: pointer; }
.step-dot {
  width: 28px; height: 28px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 12px;
  font-weight: 600; background: var(--inline-code-bg); color: var(--text-secondary);
  transition: all .3s;
}
.step-item.active .step-dot { background: var(--accent); color: #fff; }
.step-item.done .step-dot { background: var(--green); color: #fff; }
.step-label { font-size: 13px; color: var(--text-secondary); }
.step-item.active .step-label { color: var(--text); font-weight: 500; }
.step-arrow { color: var(--text-secondary); opacity: 0.4; font-size: 14px; }

.progress-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.progress-title { font-size: 14px; font-weight: 600; }
.progress-elapsed { font-size: 12px; color: var(--text-secondary); font-weight: 400; }
.progress-stages { display: flex; flex-direction: column; gap: 6px; }
.progress-stage { font-size: 13px; padding: 6px 10px; border-radius: 6px; display: flex; align-items: center; gap: 8px; }
.progress-stage.pending { color: var(--text-secondary); }
.progress-stage.in-progress { background: var(--accent-light); color: var(--accent); font-weight: 500; }
.progress-stage .stage-spinner {
  width: 14px; height: 14px; border: 2px solid var(--accent);
  border-top-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite; display: inline-block;
}
.progress-stage.done { color: var(--green); }
.progress-stage .stage-check { margin-left: auto; font-weight: 600; }
.stage-icon { font-size: 15px; }

@media (max-width: 768px) {
  .step-bar { gap: 4px; }
  .step-label { display: none; }
  .step-arrow { display: none; }
  .step-dot { width: 24px; height: 24px; font-size: 11px; }
}

/* ============================================================
   Starter Model Cards
   ============================================================ */
.starter-section {
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 2px dashed var(--border);
}
.starter-title {
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 10px;
}
.starter-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.starter-card {
  border: 2px dashed var(--accent) !important;
  background: var(--accent-light, rgba(59, 130, 246, 0.05)) !important;
  transition: border-color .2s, transform .2s;
}
.starter-card:hover {
  border-color: var(--accent) !important;
  transform: translateY(-2px);
}