/* ===== Design Tokens — Editorial ===== */
:root {
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Spectral', 'Georgia', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Font Size Scale — spec: 13/14/16/18/20/24/32/48/72px */
  --text-xs: 0.8125rem;  /* 13px — captions, metadata, small-caps labels */
  --text-sm: 0.875rem;   /* 14px — UI labels, buttons, nav (was 15px, off-spec) */
  --text-base: 1rem;     /* 16px — body text (was 18px, conflated with lead) */
  --text-lead: 1.125rem; /* 18px — lead paragraphs, intro text */
  --text-md: 1.25rem;    /* 20px — status text, subsection heads */
  --text-lg: 1.5rem;     /* 24px — card headings, H3 (was duplicate of --text-md) */
  --text-xl: 2rem;       /* 32px — section titles (was 24px) */
  --text-2xl: 3rem;      /* 48px — hero headline mobile / step numerals (was 32px) */
  --text-3xl: 4.5rem;    /* 72px — hero headline desktop (was 48px) */
  --text-4xl: var(--text-3xl); /* alias — backward compat for out-of-scope usages */

  /* Surfaces — Paper & Parchment */
  --bg-paper: #F9F8F6;
  --bg-paper-alt: #F3F1ED;
  --bg-navy: #1B3A5C;
  --bg-navy-light: #E8EDF2;
  --surface-0: #FFFFFF;
  --surface-1: var(--bg-paper);
  --surface-2: var(--bg-paper-alt);
  --surface-3: #E0DDD8;

  /* Text — Ink */
  --text-ink: #2C2C2C;
  --text-ink-soft: #5C5C5C;
  --text-ink-faint: #737373;
  --text-primary: var(--text-ink);
  --text-secondary: var(--text-ink-soft);
  --text-tertiary: var(--text-ink-faint);
  --color-on-primary: #FFFFFF;

  /* Accent — Navy (Trust & Structure) */
  --accent-navy: #1B3A5C;
  --primary: var(--accent-navy);
  --primary-hover: #142D47;
  --primary-50: rgba(27, 58, 92, 0.08);
  --primary-100: rgba(27, 58, 92, 0.15);
  --primary-glow: rgba(27, 58, 92, 0.25);
  --shadow-glow: 0 0 0 1px rgba(27, 58, 92, 0.15);

  /* Accent — Burgundy (Action & Insight) */
  --accent-burgundy: #8B2500;
  --accent-burgundy-hover: #6E1D00;
  --accent-burgundy-light: #FDF0EC;
  --cta-primary: var(--accent-burgundy);
  --cta-primary-hover: var(--accent-burgundy-hover);
  --cta-primary-50: rgba(139, 37, 0, 0.08);
  --cta-glow: rgba(139, 37, 0, 0.15);

  /* Accent — Green (Success & Resolved) */
  --accent-green: #2E5A44;
  --accent-green-light: #EBF1ED;

  /* Legacy accent compatibility */
  --accent-gold: var(--accent-burgundy);
  --accent-gold-50: var(--accent-burgundy-light);

  /* Borders — Hairline */
  --border-color: #E0DDD8;
  --border-thin: #E0DDD8;    /* alias — matches spec token name exactly */
  --border-color-hover: #C8C4BD;
  --border-hairline: #EDEBE7;

  /* Severity — Editorial palette */
  --color-red: var(--accent-burgundy);
  --color-red-50: var(--accent-burgundy-light);
  --color-red-border: #E8B4A4;
  --color-amber: #9A6B1F;
  --color-amber-50: #FDF6E8;
  --color-amber-border: #E8D4A0;
  --color-green: var(--accent-green);
  --color-green-50: var(--accent-green-light);
  --color-green-border: #A8C9B4;
  --color-gray: #737373;
  --color-gray-50: var(--bg-paper-alt);
  --color-gray-border: #D5D2CC;

  /* Blue (glossary) */
  --color-blue: var(--accent-navy);
  --color-red-100: #FCDDD4;
  --color-red-200: #F5C2B2;

  /* Shadows — Paper on desk */
  --shadow-paper: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.03);
  --shadow-xs: 0 1px 2px rgba(44,44,44,0.04), 0 0 0 1px rgba(44,44,44,0.02);
  --shadow-sm: 0 2px 4px rgba(44,44,44,0.05), 0 1px 2px rgba(44,44,44,0.03);
  --shadow-md: var(--shadow-paper);
  --shadow-lg: 0 16px 32px rgba(44,44,44,0.07), 0 4px 8px rgba(44,44,44,0.04);
  --shadow-xl: 0 24px 48px rgba(44,44,44,0.09), 0 8px 16px rgba(44,44,44,0.05);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Vertical Rhythm Tokens */
  --section-gap: 6rem;       /* 96px — editorial breathing room */
  --subsection-gap: 3rem;    /* 48px — subsection spacing */
  --element-gap: 1.5rem;     /* 24px — element spacing */

  /* Container — desktop-first: 100% of users on desktop */
  --container-max: 1600px;

  /* Radius — Sharp/Paper */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 180ms ease;
  --transition-base: 280ms ease;
  --transition-slow: 450ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Group backgrounds — editorial */
  --group-spelling-bg: var(--accent-burgundy-light);
  --group-spelling-border: var(--accent-burgundy);
  --group-rules-bg: var(--surface-0);
  --group-rules-border: var(--accent-navy);
  --group-ai-bg: var(--accent-green-light);
  --group-ai-border: var(--accent-green);

  /* Pico overrides */
  --pico-font-family: var(--font-sans);
  --pico-border-radius: var(--radius-md);
  --pico-primary: var(--accent-navy);
  --pico-primary-hover: var(--primary-hover);
  --pico-primary-focus: rgba(27, 58, 92, 0.12);
  --pico-background-color: var(--bg-paper);
  --pico-card-background-color: var(--surface-0);
  --pico-card-sectioning-background-color: var(--bg-paper);
  --pico-color: var(--text-ink);
}

/* Force Pico light mode regardless of system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]) {
    --pico-background-color: var(--bg-paper);
    --pico-card-background-color: var(--surface-0);
    --pico-color: var(--text-ink);
    color-scheme: light;
  }
}

/* Ensure light is truly light */
:root, :root[data-theme="light"] {
  color-scheme: light;
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
  --bg-paper: #1A1D23;
  --bg-paper-alt: #22262E;
  --surface-0: #1E2128;
  --surface-1: #1A1D23;
  --surface-2: #22262E;
  --surface-3: #2A2E38;
  --text-ink: #E4E4E7;
  --text-ink-soft: #A1A1AA;
  --text-ink-faint: #71717A;
  --text-primary: var(--text-ink);
  --text-secondary: var(--text-ink-soft);
  --text-tertiary: var(--text-ink-faint);
  --color-on-primary: #FFFFFF;
  --border-color: #2E3340;
  --border-thin: #2E3340;    /* keep alias in sync with --border-color in dark mode */
  --border-color-hover: #3D4250;
  --border-hairline: #262A33;
  --accent-burgundy-light: rgba(139, 37, 0, 0.15);
  --accent-green-light: rgba(46, 90, 68, 0.15);
  --bg-navy-light: rgba(27, 58, 92, 0.2);
  --shadow-paper: 0 12px 24px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.1);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.15);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
  --shadow-md: var(--shadow-paper);
  --shadow-lg: 0 16px 32px rgba(0,0,0,0.3);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.35);
  --pico-background-color: var(--bg-paper);
  --pico-card-background-color: var(--surface-0);
  --pico-color: var(--text-ink);
  --group-spelling-bg: rgba(139, 37, 0, 0.1);
  --group-ai-bg: rgba(46, 90, 68, 0.1);
  --color-red-50: rgba(139, 37, 0, 0.12);
  --color-green-50: rgba(46, 90, 68, 0.12);
  --color-amber-50: rgba(154, 107, 31, 0.12);
  --color-gray-50: rgba(113, 113, 122, 0.1);

  color-scheme: dark;
}

/* ========== LANDING PAGE: Always light, override dark theme ========== */
/* Pricing cards — explicit light overrides to beat [data-theme="dark"] !important rules */
#view-pricing {
  background: #F9F8F6 !important;
}
#view-pricing .pricing-card,
#view-pricing .welcome-service-card {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #E0DDD8 !important;
  box-shadow: 0 12px 24px rgba(44,44,44,0.05), 0 1px 3px rgba(44,44,44,0.03) !important;
}
/* Only apply ink color to text elements, not buttons (which have their own CTA colors) */
#view-pricing .pricing-card .pricing-card-name,
#view-pricing .pricing-card .pricing-amount,
#view-pricing .pricing-card .pricing-currency {
  color: #2C2C2C;
}
#view-pricing .pricing-card .pricing-period,
#view-pricing .pricing-card .pricing-card-period,
#view-pricing .pricing-card li {
  color: #5C5C5C;
}

/* Hide terminal/console UI from progress view */
.ai-terminal,
.terminal-container {
  display: none !important;
}

/* Stepper / breadcrumb — hide; it reads like a form wizard */
.breadcrumb-nav {
  display: none !important;
}

/* Force progress view to light, top-anchored editorial layout */
#view-progress {
  background: var(--bg-paper) !important;
  display: none; /* overridden to flex when active */
}
#view-progress.active {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  min-height: calc(100vh - 64px);
}
/* Progress view rules → editorial redesign section (~line 13495+) */

/* Landing page views are ALWAYS light regardless of theme setting */
#view-welcome,
#view-pricing,
.site-nav,
.site-footer,
.footer-cta,
.footer-colophon {
  --bg-paper: #F9F8F6;
  --bg-paper-alt: #F3F1ED;
  --surface-0: #FFFFFF;
  --surface-1: #F9F8F6;
  --surface-2: #F3F1ED;
  --surface-3: #E0DDD8;
  --text-ink: #2C2C2C;
  --text-ink-soft: #5C5C5C;
  --text-ink-faint: #737373;
  --text-primary: #2C2C2C;
  --text-secondary: #5C5C5C;
  --text-tertiary: #737373;
  --color-on-primary: #FFFFFF;
  --border-color: #E0DDD8;
  --border-thin: #E0DDD8;    /* alias reset to light value */
  --border-hairline: #EDEBE7;
  --accent-burgundy-light: #FDF0EC;
  --accent-green-light: #EBF1ED;
  --bg-navy-light: #E8EDF2;
  --shadow-paper: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.03);
  --shadow-xs: 0 1px 2px rgba(44,44,44,0.04), 0 0 0 1px rgba(44,44,44,0.02);
  --shadow-sm: 0 2px 4px rgba(44,44,44,0.05), 0 1px 2px rgba(44,44,44,0.03);
  --shadow-md: 0 12px 24px rgba(44,44,44,0.05), 0 1px 3px rgba(44,44,44,0.03);
  --pico-background-color: #F9F8F6;
  --pico-card-background-color: #FFFFFF;
  --pico-color: #2C2C2C;
  color-scheme: light;
  background: #F9F8F6;
  color: #2C2C2C;
}

/* === Editorial Typography Base === */
/* All headings: Spectral serif per spec */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--text-ink);
  line-height: 1.25; /* spec: 1.1–1.25 for headings */
}
h1 {
  font-weight: 700;
  line-height: 1.1;  /* tightest — hero headlines */
}
h2 { line-height: 1.2; }
h3 { line-height: 1.25; }
/* Body line-height */
body {
  line-height: 1.8; /* editorial: generous spacing */
}
p {
  line-height: 1.8;
}


/* ===== Pico CSS Reset — Kill Default Article Boxiness ===== */
/* Pico uses --pico-card-* variables — zero them out so articles are flat */
:root {
  --pico-card-background-color: transparent;
  --pico-card-box-shadow: none;
  --pico-card-border-color: transparent;
  --pico-card-sectioning-background-color: transparent;
}
/* Also kill Pico's article sectioning-content specificity */
article > header,
article > footer {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
article {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/*
 * Pico CSS uses the shorthand `background` property on article/details/etc.
 * We MUST use `background` (not `background-color`) + `!important` to override it.
 */

/* ========== FIX: Override Pico CSS [role="button"] styling ========== */
/* Pico CSS applies background to all [role="button"] elements - we must override */
.issue-card-header,
.issue-card-header[role="button"],
div.issue-card-header[role="button"] {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: inherit !important;
}
.issue-card-header:hover,
.issue-card-header[role="button"]:hover {
  background: rgba(0,0,0,0.02) !important;
}

/* Issue cards - transparent editorial background */
.issue-card,
div.issue-card {
  background: transparent !important;
}
.issue-card-details {
  background: #f8f9fb !important;
}

/* Containers - transparent */
#grouped-results,
.group-section,
.cat-section,
.issue-cards {
  background: transparent !important;
}

/* Summaries - white */
.group-section > summary,
.cat-section > summary {
  background: #ffffff !important;
}

/* ========== DARK SCROLLBAR (Windows) ========== */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0f0f11;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* Firefox dark scrollbar */
[data-theme="dark"] * {
  scrollbar-color: #333 #0f0f11;
  scrollbar-width: thin;
}

/* ========== BRAND FOCUS STATES ========== */
input:focus, select:focus, textarea:focus,
button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--primary-50) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--primary) !important;
}

/* ========== DARK MODE OVERRIDES ========== */
[data-theme="dark"] body {
  background: #161718 !important;
  color: #e3e3e3;
}
[data-theme="dark"] article {
  background: #161718 !important;
  border-color: #2e3032;
}
/* Issue cards - multiple selectors for specificity */
[data-theme="dark"] .issue-card,
[data-theme="dark"] div.issue-card,
[data-theme="dark"] .issue-cards > .issue-card,
[data-theme="dark"] .cat-section .issue-card,
[data-theme="dark"] #grouped-results .issue-card {
  background: #161718 !important;
}
[data-theme="dark"] .issue-card-details,
[data-theme="dark"] div.issue-card-details {
  background: #1e1f21 !important;
}
[data-theme="dark"] .issue-card-header:hover {
  background: rgba(255,255,255,0.03) !important;
}
/* AGGRESSIVE: Prevent Pico CSS blue from ALL containers */
[data-theme="dark"] details,
[data-theme="dark"] summary,
[data-theme="dark"] section,
[data-theme="dark"] article details,
[data-theme="dark"] article > details,
[data-theme="dark"] .group-section,
[data-theme="dark"] .cat-section,
[data-theme="dark"] .issue-cards,
[data-theme="dark"] .view,
[data-theme="dark"] #grouped-results,
[data-theme="dark"] #grouped-results > *,
[data-theme="dark"] .cat-section > .issue-cards {
  background: transparent !important;
}
/* Re-apply intentional summary backgrounds */
[data-theme="dark"] .group-section > summary {
  background: #1e1f21 !important;
}
[data-theme="dark"] .group-section.group-spelling > summary {
  background: rgba(248, 113, 113, 0.05) !important;
}
[data-theme="dark"] .group-section.group-rules > summary {
  background: #1e1f21 !important;
}
[data-theme="dark"] .group-section.group-ai > summary {
  background: rgba(74, 222, 128, 0.05) !important;
}
/* Dark mode: pillar cards glassmorphism */
[data-theme="dark"] .welcome-pillar-card {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .welcome-pillar-card:hover {
  /* Was rgba(139,92,246,0.4) — purple, pre-redesign leftover. Now navy. */
  border-color: rgba(27, 58, 92, 0.5);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
/* Dark mode: pricing & services overrides */
[data-theme="dark"] .pricing-card.popular {
  border-color: var(--border-color);
}
[data-theme="dark"] .pricing-payg-card {
  background: var(--surface-2) !important;
}
[data-theme="dark"] .pricing-faq-item {
  border-color: var(--border-color);
}
[data-theme="dark"] .welcome-service-card,
[data-theme="dark"] .pricing-card {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ===== Button Primitives ===== */
/* Unified button system: .btn + variant (.btn-primary, .btn-outline, .btn-ghost) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  line-height: 1;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
  text-decoration: none;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Primary: burgundy solid — for main CTAs */
.btn-primary {
  color: #fff;
  background: var(--accent-burgundy);
  border-color: var(--accent-burgundy);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-burgundy-hover);
  border-color: var(--accent-burgundy-hover);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

/* Secondary: navy solid */
.btn-secondary {
  color: #fff;
  background: var(--accent-navy);
  border-color: var(--accent-navy);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-1px);
}

/* Outline: transparent with border */
.btn-outline {
  color: var(--accent-navy);
  background: transparent;
  border-color: var(--border-color);
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--accent-navy);
  background: var(--primary-50);
}

/* Ghost: no border, subtle hover */
.btn-ghost {
  color: var(--text-ink-soft);
  background: transparent;
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  color: var(--text-ink);
  background: var(--primary-50);
}

/* Full-width modifier */
.btn-block {
  width: 100%;
}

/* ===== Keyframe Animations ===== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes skeleton-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}
.skeleton {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-text:last-child { width: 70%; margin-bottom: 0; }
.skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 0.75em;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-card {
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.skeleton-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.skeleton-btn {
  width: 100px;
  height: 36px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes pulseRing {
  /* Navy pulse ring */
  0% { box-shadow: 0 0 0 0 var(--primary-50); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes barGrow {
  from { width: 0; }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes countPop {
  0% { opacity: 0; transform: scale(0.5); }
  60% { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  from { left: -100%; }
  to { left: 100%; }
}
/* glowBreath, meshMove1/2/3 removed — orphaned (editorial redesign) */
@keyframes cardDismiss {
  0% { opacity: 1; transform: translateX(0); max-height: 200px; }
  100% { opacity: 0; transform: translateX(60px); max-height: 0; margin: 0; padding: 0; }
}
@keyframes checkBurst {
  0% { transform: scale(0) rotate(-45deg); }
  50% { transform: scale(1.3) rotate(0); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes streakSlideIn {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes achievementPop {
  0% { opacity: 0; transform: translateY(-40px) scale(0.8); }
  60% { transform: translateY(8px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Auth Modal — Library Register === */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(44, 44, 44, 0.4);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 500;
  backdrop-filter: blur(2px);
}
.auth-modal-overlay.open { display: flex; }

.auth-modal {
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-paper);
  border-radius: var(--radius-sm);
  width: 420px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-12) var(--space-10);
  position: relative;
  animation: fadeIn 0.2s ease;
}

.auth-modal h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  /* --text-xl is now 32px (section titles); auth modal heading fits card scale */
  font-size: var(--text-lg); /* 24px — card heading per spec */
  color: var(--text-ink);
  text-align: center;
  margin: 0 0 var(--space-6);
}

.auth-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  color: var(--text-ink-faint);
  cursor: pointer;
  font-size: 1.1rem;
  padding: var(--space-1);
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-modal-close:hover { color: var(--text-ink); }
.auth-modal-close i { font-size: 1.1rem; }

.auth-modal input[type="email"],
.auth-modal input[type="password"],
.auth-modal input[type="text"] {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--text-ink);
  transition: border-color var(--transition-fast);
  margin-bottom: var(--space-4);
  outline: none;
}
.auth-modal input:focus {
  border-color: var(--accent-navy);
  box-shadow: none;
}

.auth-modal label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--text-ink-soft);
  display: block;
  margin-bottom: var(--space-1);
}

.auth-error {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--accent-burgundy);
  margin-bottom: var(--space-3);
  text-align: center;
  min-height: 1.2em;
}

.auth-submit-btn {
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: #fff;
  background: var(--accent-burgundy);
  border: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  margin-bottom: var(--space-4);
}
.auth-submit-btn:hover {
  background: var(--accent-burgundy-hover);
}
.auth-submit-btn.outline {
  background: transparent;
  color: var(--accent-burgundy);
  border: 1px solid var(--accent-burgundy);
}
.auth-submit-btn.outline:hover {
  background: var(--accent-burgundy);
  color: #fff;
}

.auth-toggle {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  text-align: center;
  margin-top: var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
}
.auth-toggle a {
  color: var(--text-ink-faint);
  cursor: pointer;
  text-decoration: none;
}
.auth-toggle a:hover,
.auth-toggle:hover {
  color: var(--accent-burgundy);
}

.auth-forgot {
  text-align: right;
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  font-size: var(--text-xs);
}
.auth-forgot a {
  color: var(--text-ink-faint);
  cursor: pointer;
  text-decoration: none;
}
.auth-forgot a:hover {
  color: var(--accent-burgundy);
  text-decoration: underline;
}

.auth-hint {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-ink-soft);
  margin-bottom: var(--space-4);
}

/* Google OAuth button */
.google-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-ink);
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  margin-bottom: var(--space-4);
}
.google-btn:hover {
  border-color: var(--accent-navy);
}
.google-btn:active {
  transform: scale(0.98);
}
.google-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.google-btn--loading span {
  visibility: hidden;
}
.google-btn--loading::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-navy);
  border-radius: 50%;
  animation: google-spin 0.6s linear infinite;
  position: absolute;
}
@keyframes google-spin {
  to { transform: rotate(360deg); }
}
.google-btn svg {
  flex-shrink: 0;
}

/* OR divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  text-align: center;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-hairline);
}

/* Two-column register layout */
.auth-register-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.auth-register-benefits {
  padding-right: var(--space-4);
  border-right: 1px solid var(--border-hairline);
}
.auth-register-benefits h3 {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-4);
  color: var(--text-ink);
}
.auth-register-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.auth-register-benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-ink-soft);
}
.auth-register-benefits li i {
  color: var(--accent-green);
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.auth-register-fields {
  padding-left: var(--space-4);
}
@media (max-width: 600px) {
  .auth-register-layout {
    grid-template-columns: 1fr;
  }
  .auth-register-benefits {
    border-right: none;
    border-bottom: 1px solid var(--border-hairline);
    padding-right: 0;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .auth-register-fields {
    padding-left: 0;
  }
  .auth-modal {
    padding: var(--space-8) var(--space-6);
  }
}

/* Password strength bar */
.password-strength {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  min-height: 1.4em;
}
.password-strength-bar {
  flex: 1;
  height: 2px;
  background: var(--border-color);
  border-radius: 1px;
  overflow: hidden;
}
.password-strength-fill {
  height: 100%;
  width: 0;
  border-radius: 1px;
  transition: width 0.3s, background 0.3s;
}
.password-strength-fill.weak { width: 25%; background: var(--accent-burgundy); }
.password-strength-fill.fair { width: 50%; background: var(--accent-navy); }
.password-strength-fill.good { width: 75%; background: var(--accent-navy); }
.password-strength-fill.strong { width: 100%; background: var(--accent-green); }
.password-strength-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  white-space: nowrap;
  min-width: 3em;
}

/* ===== Account Settings ===== */
.account-section {
  margin-bottom: var(--space-4);
}
.account-section label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.account-section input {
  width: 100%;
  margin-bottom: var(--space-3);
}
.account-section .auth-submit-btn {
  width: 100%;
}

/* ===== User Menu ===== */
.user-menu { position: relative; }
.user-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--accent-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  cursor: pointer;
}
.user-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-paper);
  border-radius: var(--radius-md);
  padding: var(--space-3) 0;
  z-index: 200;
}
.user-menu-dropdown.open { display: block; }
.user-menu-info {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-hairline);
}
.user-menu-name {
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-ink);
}
.user-menu-email {
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
}
.tier-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: capitalize;
  background: var(--primary-50);
  color: var(--primary);
  margin-top: var(--space-2);
}
.usage-section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.usage-item {
  margin-bottom: var(--space-3);
}
.usage-item-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  margin-bottom: 4px;
}
.usage-bar {
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}
.usage-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width var(--transition-base);
  background: var(--color-green);
}
.usage-bar-fill.warn { background: var(--color-amber); }
.usage-bar-fill.danger { background: var(--color-red); }

/* ====== Account Panel ====== */
.account-panel {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-6);
  max-width: 960px;
  margin: var(--space-6) auto;
  padding: 0 var(--space-4);
}
.account-sidebar {
  position: sticky;
  top: 68px;
  align-self: start;
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.account-sidebar-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}
.account-avatar-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 600;
}
.account-sidebar-name {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-primary);
}
.account-sidebar-email {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  word-break: break-all;
}
.account-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  border-left: 3px solid transparent;
  text-align: left;
}
.account-nav-link:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.account-nav-link.active {
  background: var(--primary-100);
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 600;
}
.account-nav-link i {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}
.account-content {
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 400px;
}
.account-tab-panel {
  animation: accountFadeIn 150ms ease;
}
.account-tab-panel[hidden] { display: none; }
@keyframes accountFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.account-tab-panel h2 {
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-size: 1.25rem;
}
/* Overview tab */
/* ── Overview Tab: Editorial Dashboard ── */
.overview-welcome {
  margin-bottom: var(--space-6);
}
.overview-welcome-name {
  font-family: var(--font-serif, 'Spectral', serif);
  font-size: var(--text-lg, 1.25rem);
  font-weight: 600;
  color: var(--text-ink, var(--text-primary));
  line-height: 1.3;
}
.overview-welcome-name .overview-tier-badge {
  vertical-align: middle;
  margin-left: var(--space-2);
  position: relative;
  top: -1px;
}
.overview-welcome-sub {
  font-size: var(--text-xs);
  color: var(--text-ink-faint, var(--text-tertiary));
  margin-top: 4px;
}
.overview-tier-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-sans, 'Inter', sans-serif);
}
.overview-tier-badge.free { background: var(--surface-2, #F3F1ED); color: var(--text-ink-soft, var(--text-secondary)); }
.overview-tier-badge.bireysel { background: rgba(27,58,92,0.08); color: var(--accent-navy, var(--primary)); }
.overview-tier-badge.profesyonel { background: rgba(46,90,68,0.08); color: var(--accent-green, var(--color-green)); }
.overview-tier-badge.kurum { background: rgba(154,107,31,0.08); color: var(--color-amber); }
.overview-tier-badge.linkedin_launch { background: rgba(27,58,92,0.08); color: var(--accent-navy, var(--primary)); }
.overview-tier-badge.special { background: rgba(139,37,0,0.08); color: var(--accent-burgundy, var(--color-red)); }

/* Recent analyses — inbox style */
.overview-section-label {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-ink-faint, var(--text-tertiary));
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-hairline, var(--border-color));
  margin-bottom: 0;
}
.overview-recent-list {
  margin-bottom: var(--space-6);
}
.overview-recent-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border-hairline, var(--border-color));
  font-size: var(--text-sm);
  border-radius: 4px;
  margin: 0 calc(-1 * var(--space-2));
  transition: background 0.15s ease;
  cursor: pointer;
  position: relative;
}
.overview-recent-item:last-child { border-bottom: none; }
.overview-recent-item:hover {
  background: var(--bg-paper-alt, var(--surface-2));
}
.overview-recent-item:hover .overview-recent-view {
  opacity: 1;
}
.overview-recent-icon {
  flex-shrink: 0;
  color: var(--text-ink-faint, var(--text-tertiary));
  font-size: 1rem;
  width: 20px;
  text-align: center;
}
.overview-recent-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-ink, var(--text-primary));
  font-weight: 500;
}
.overview-recent-mode {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.overview-recent-mode.translation {
  background: rgba(27,58,92,0.08);
  color: var(--accent-navy, var(--primary));
}
.overview-recent-mode.editorial {
  background: var(--bg-paper-alt, var(--surface-2));
  color: var(--text-ink-soft, var(--text-secondary));
  border: 1px solid var(--border-hairline, var(--border-color));
}
.overview-recent-issues {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  min-width: 28px;
  text-align: center;
}
.overview-recent-issues.green { color: var(--accent-green, var(--color-green)); }
.overview-recent-issues.amber { color: var(--color-amber); }
.overview-recent-issues.red { color: var(--accent-burgundy, var(--color-red)); }
.overview-recent-date {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--text-ink-faint, var(--text-tertiary));
  min-width: 64px;
  text-align: right;
}
.overview-recent-view {
  opacity: 0;
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--accent-navy, var(--primary));
  font-weight: 500;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}
.overview-recent-meta {
  font-size: var(--text-xs);
  color: var(--text-ink-faint, var(--text-tertiary));
  flex-shrink: 0;
}
.overview-see-all {
  display: block;
  text-align: right;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--accent-navy, var(--primary));
  margin-top: var(--space-2);
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--space-1) 0;
  text-decoration: none;
}
.overview-see-all:hover {
  text-decoration: underline;
}

/* Empty state */
.overview-empty-hint {
  font-size: var(--text-sm);
  color: var(--text-ink-faint, var(--text-tertiary));
  text-align: center;
  padding: var(--space-8) 0;
}
.overview-empty-hint i {
  display: block;
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
  opacity: 0.4;
}
.overview-empty-cta {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent-navy, var(--primary));
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.overview-empty-cta:hover { text-decoration: underline; }

/* Usage strip — horizontal compact meters */
.overview-usage-strip {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-4) 0;
}
.overview-usage-item {
  flex: 1;
  min-width: 0;
}
.overview-usage-item .overview-usage-label {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  font-size: var(--text-xs) !important;
  color: var(--text-ink-faint, var(--text-tertiary)) !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.overview-usage-item .overview-usage-value {
  color: var(--text-ink-soft, var(--text-secondary)) !important;
  font-weight: 500 !important;
  font-size: var(--text-xs) !important;
  white-space: nowrap !important;
}
.overview-usage-item .overview-usage-bar {
  height: 6px !important;
  background: var(--bg-paper-alt, var(--surface-2)) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
.overview-usage-item .overview-usage-fill {
  height: 100% !important;
  border-radius: 3px !important;
  background: var(--accent-navy, var(--primary)) !important;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.overview-usage-item .overview-usage-fill.warn { background: var(--color-amber) !important; }
.overview-usage-item .overview-usage-fill.danger { background: var(--accent-burgundy, var(--color-red)) !important; }

/* Upgrade nudge — single line */
.overview-upgrade-banner {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: rgba(27,58,92,0.04);
  border: 1px solid rgba(27,58,92,0.08);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-ink-soft, var(--text-secondary));
}
.overview-upgrade-banner a {
  flex-shrink: 0;
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--accent-burgundy, var(--color-red));
  text-decoration: none;
  cursor: pointer;
}
.overview-upgrade-banner a:hover { text-decoration: underline; }

/* Legacy compat — remove old grid/card/stat */
.overview-grid { display: contents; }
.overview-card { display: contents; }
.overview-stat-grid { display: none; }
.overview-stat { display: none; }
.overview-stat-value { display: none; }
.overview-stat-label { display: none; }
.overview-tier-row { display: none; }
.overview-tier-name { display: none; }
.overview-usage-mini { display: none; }
/* Trend chart */
.overview-trend-section {
  margin-top: var(--space-8);
  padding: 0;
}
.trend-chart-container {
  min-height: 60px;
}
.trend-legend {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.trend-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.trend-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.trend-legend-swatch.high { background: var(--color-red); }
.trend-legend-swatch.medium { background: var(--color-amber); }
.trend-legend-swatch.low { background: var(--primary); }
.trend-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  justify-content: center;
}
.trend-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}
.trend-bar-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 32px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
.trend-bar-seg {
  width: 100%;
  transition: height 0.4s ease;
}
.trend-bar-seg.high { background: var(--color-red); }
.trend-bar-seg.medium { background: var(--color-amber); }
.trend-bar-seg.low { background: var(--primary); }
.trend-bar-count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
}
.trend-bar-month {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}
.trend-bar-runs {
  font-size: 10px;
  color: var(--text-tertiary);
}
/* Improvement badges for file history delta */
.delta-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}
.delta-badge.improved {
  background: rgba(16,185,129,0.12);
  color: var(--color-green);
}
.delta-badge.worsened {
  background: rgba(239,68,68,0.12);
  color: var(--color-red);
}
/* Profile tab */
.account-profile-form {
  max-width: 480px;
}
.account-profile-form .account-section {
  margin-bottom: var(--space-6);
}
.account-profile-form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
}
.account-profile-form input {
  margin-bottom: var(--space-2);
}
.account-auth-method {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.account-auth-method i { font-size: 1.2rem; }
.account-email-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}
.account-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-green);
}
/* Billing tab */
.billing-plan-card {
  padding: var(--space-5);
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}
.billing-plan-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.billing-plan-price {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.billing-plan-detail {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}
.billing-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.billing-cancel-link {
  background: none;
  border: none;
  color: var(--color-red);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--space-2);
}
.billing-cancel-link:hover { text-decoration: underline; }
.billing-cancelled-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-red);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-left: var(--space-2);
}
.billing-feature-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: var(--space-4) 0;
}
.billing-feature-table th,
.billing-feature-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}
.billing-feature-table th:first-child,
.billing-feature-table td:first-child {
  text-align: left;
}
.billing-feature-table thead th {
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-1);
}
/* Usage tab */
.usage-current-section {
  margin-bottom: var(--space-6);
}
.usage-current-section .usage-item {
  margin-bottom: var(--space-4);
}
.usage-current-section .usage-bar {
  height: 10px;
}
.usage-current-section .usage-item-header {
  font-size: var(--text-sm);
  margin-bottom: 6px;
}
.usage-reset-date {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-4);
}
.usage-chart {
  margin-top: var(--space-5);
}
.usage-chart h3 {
  font-size: 1rem;
  margin-bottom: var(--space-4);
}
.usage-chart-grid {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  height: 180px;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-color);
  position: relative;
}
.usage-chart-month {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 100%;
  justify-content: flex-end;
}
.usage-chart-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  width: 100%;
  height: 100%;
}
.usage-chart-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  position: relative;
}
.usage-chart-bar.editorial { background: var(--primary); }
.usage-chart-bar.translation { background: var(--color-green); }
.usage-chart-bar.ai { background: var(--color-amber); }
.usage-chart-bar:hover { opacity: 0.8; }
.usage-chart-bar-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: var(--text-xs);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
.usage-chart-bar:hover .usage-chart-bar-tooltip { display: block; }
.usage-chart-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}
.usage-chart-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.usage-chart-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.usage-chart-legend span::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.usage-chart-legend .legend-editorial::before { background: var(--primary); }
.usage-chart-legend .legend-translation::before { background: var(--color-green); }
.usage-chart-legend .legend-ai::before { background: var(--color-amber); }
/* History tab */
.history-entry {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  background: var(--surface-0);
  transition: box-shadow var(--transition-fast);
}
.history-entry:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.history-entry-icon {
  font-size: 1.5rem;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.history-entry-info {
  flex: 1;
  min-width: 0;
}
.history-entry-filename {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.history-entry-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.history-mode-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}
.history-mode-badge.translation {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-green);
}
.history-mode-badge.editorial {
  background: var(--primary-100);
  color: var(--primary);
}
.history-issue-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 12px;
  font-size: var(--text-xs);
  font-weight: 600;
}
.history-issue-chip.green { background: rgba(16,185,129,0.1); color: var(--color-green); }
.history-issue-chip.amber { background: rgba(245,158,11,0.1); color: var(--color-amber); }
.history-issue-chip.red { background: rgba(239,68,68,0.1); color: var(--color-red); }
.history-entry-action {
  flex-shrink: 0;
}
.history-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-tertiary);
}
.history-empty i {
  font-size: 3rem;
  margin-bottom: var(--space-3);
  display: block;
}
.history-empty p {
  margin: var(--space-2) 0;
}
.history-load-more {
  text-align: center;
  margin-top: var(--space-3);
}
/* Responsive: narrow desktop */
@media (max-width: 1100px) {
  .account-panel { grid-template-columns: 1fr; gap: 0; }
  .account-sidebar-identity { display: none; }
  .account-sidebar { position: static; display: flex; gap: 0; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .account-sidebar::-webkit-scrollbar { display: none; }
  .account-nav-link { flex: 0 0 auto; justify-content: center; padding: var(--space-2) var(--space-4); border-left: none; border-bottom: 3px solid transparent; border-radius: 0; white-space: nowrap; }
  .account-nav-link.active { border-left-color: transparent; border-bottom-color: var(--primary); }
  .account-nav-link span { display: inline; font-size: var(--text-xs); }
  .account-nav-link i { font-size: 1rem; width: auto; }
  .account-content { border-radius: 0 0 var(--radius-md) var(--radius-md); border-top: none; }
}
/* Responsive: mobile */
@media (max-width: 768px) {
  .account-panel { grid-template-columns: 1fr; gap: 0; padding: 0 var(--space-3); margin-top: var(--space-3); }
  .account-sidebar { position: static; border-radius: var(--radius-md) var(--radius-md) 0 0; display: flex; gap: 0; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .account-sidebar::-webkit-scrollbar { display: none; }
  .account-sidebar-identity { display: none; }
  .account-nav-link { flex: 0 0 auto; border-left: none; border-bottom: 3px solid transparent; border-radius: 0; min-width: 0; padding: var(--space-3) var(--space-4); white-space: nowrap; justify-content: center; }
  .account-nav-link.active { border-left-color: transparent; border-bottom-color: var(--primary); }
  .account-nav-link span { display: inline; font-size: var(--text-xs); }
  .account-nav-link i { display: none; }
  .account-content { border-radius: 0 0 var(--radius-md) var(--radius-md); border-top: none; padding: var(--space-4); }
  .history-entry { flex-wrap: wrap; }
  .history-entry-filename { max-width: 200px; }
  .usage-chart-grid { height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .account-tab-panel { animation: none; }
  .usage-chart-bar { transition: none; }
}

.user-menu-links {
  padding: var(--space-2) 0;
}
.user-menu-link {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-ink);
  padding: var(--space-2) var(--space-5);
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.user-menu-link:hover { background: var(--bg-paper-alt); }
.user-menu-admin {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-ink);
  padding: var(--space-2) var(--space-5);
  text-decoration: none;
  border-top: 1px solid var(--border-hairline);
}
.user-menu-admin:hover { background: var(--bg-paper-alt); }
.user-menu-logout {
  display: block;
  width: 100%;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--accent-burgundy);
  padding: var(--space-2) var(--space-5);
  background: none;
  border: none;
  border-top: 1px solid var(--border-hairline);
  cursor: pointer;
  margin-top: var(--space-2);
}
.user-menu-logout:hover { background: var(--bg-paper-alt); }

/* ===== Upgrade Prompt ===== */
.upgrade-prompt {
  display: none;
  padding: var(--space-4);
  background: var(--color-amber-50);
  border: 1px solid var(--color-amber-border);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}
.upgrade-prompt.visible { display: block; }
.upgrade-prompt a {
  color: var(--primary);
  font-weight: 600;
}

/* ===== Check card lock overlay ===== */
.check-card.locked {
  opacity: 0.6;
  position: relative;
  cursor: pointer;
}
.check-card.locked:hover {
  opacity: 0.8;
  border-bottom-color: var(--accent-navy);
}
.check-card.locked::after {
  display: none;
}
.check-card .lock-icon {
  display: none;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.check-card.locked .lock-icon {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  color: var(--text-ink-faint);
  margin-left: var(--space-1);
}
.check-card.locked .lock-icon i {
  font-size: 0.8rem;
}

/* Needs EN PDF badge */
.check-card .needs-en-badge {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  align-items: center;
  gap: 4px;
  background: var(--color-amber-50);
  border: 1px solid var(--color-amber-border);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-amber);
}
.check-card .needs-en-badge i {
  font-size: 0.8rem;
}
.check-card.needs-en .needs-en-badge {
  display: flex !important;
}
/* Hide needs-en badge when card has EN file */
.check-card.has-en .needs-en-badge {
  display: none;
}

.spin { animation: spin 1s linear infinite; display: inline-block; }

/* ===== Base / View Management ===== */
html {
  background: var(--bg-paper);
}
body {
  background: var(--bg-paper) !important;
  color: var(--text-ink);
  font-family: var(--font-sans);
}

/* PicoCSS overrides - ensure parchment background everywhere */
main.container {
  background: var(--bg-paper);
}

.view { display: none; }
.view.active { display: block; animation: viewEnter 0.3s ease forwards; }
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Site Navigation Bar ===== */
/* === Navigation — Editorial === */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(249, 248, 246, 0.92);
  border-bottom: 1px solid var(--border-hairline);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow var(--transition-base);
}
.site-nav.scrolled {
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.site-nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 80px);
  height: 56px;
}
.site-nav-brand {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--accent-navy);
  text-decoration: none;
  letter-spacing: -0.03em;
  margin-right: var(--space-6);
  transition: opacity var(--transition-fast);
}
.site-nav-brand:hover { opacity: 0.8; }
.site-nav-links {
  display: flex;
  gap: var(--space-8);
}
.site-nav-link {
  font-family: var(--font-sans);
  font-weight: 450;
  font-size: var(--text-sm);
  color: var(--text-ink-soft);
  text-decoration: none;
  transition: color var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  position: relative;
}
.site-nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent-burgundy);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
  transform-origin: center;
}
.site-nav-link:hover { color: var(--text-ink); }
.site-nav-link:hover::after { transform: scaleX(1); }
.site-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.site-nav-right button,
.site-nav-right .user-avatar {
  margin: 0 !important;
}
.site-nav-text-btn,
.site-nav-lang {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}
.site-nav-signin,
.site-nav-login {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  transition: color var(--transition-fast);
}
.site-nav-signin:hover,
.site-nav-login:hover { color: var(--accent-burgundy); }
.site-nav-cta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--color-on-primary);
  background: var(--accent-burgundy);
  border: none;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  letter-spacing: 0.02em;
  min-height: 32px !important;
  line-height: 1.3;
}
.site-nav-cta:hover {
  background: var(--accent-burgundy-hover);
  transform: translateY(-1px);
}
.site-nav-icon-btn {
  background: none;
  border: none;
  color: var(--text-ink-faint);
  cursor: pointer;
  padding: var(--space-1);
  font-size: 1rem;
}
.site-nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text-ink);
  cursor: pointer;
  padding: var(--space-1);
}
/* Mobile nav */
.site-nav-mobile {
  display: none;
  flex-direction: column;
  padding: var(--space-4) clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--border-hairline);
  background: rgba(249, 248, 246, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-nav-mobile.open { display: flex; }
.site-nav-mobile-link {
  font-family: var(--font-sans);
  font-weight: 450;
  font-size: var(--text-base);
  color: var(--text-ink-soft);
  text-decoration: none;
  padding: var(--space-3) 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast);
}
.site-nav-mobile-link:hover { color: var(--text-ink); }
.site-nav-mobile-divider {
  height: 1px;
  background: var(--border-hairline);
  margin: var(--space-2) 0;
}
.site-nav-mobile-cta {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  background: var(--accent-burgundy);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: background var(--transition-fast);
}
.site-nav-mobile-cta:hover {
  background: var(--accent-burgundy-hover);
}
body.in-app-view .site-nav-mobile-cta {
  display: none;
}
.site-nav-mobile-toggles {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-2);
}

@media (max-width: 768px) {
  .site-nav-links { display: none; }
  .site-nav-hamburger { display: flex; }
  .site-nav-cta { display: none; }
  .site-nav-login,
  .site-nav-signin { display: none; }
  main.container { padding-top: 60px; }
}
@media (min-width: 769px) {
  main.container { padding-top: 60px; }
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) clamp(24px, 5vw, 80px);
  margin-bottom: var(--space-6);
  font-size: var(--text-xs);
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border-hairline);
  max-width: none;
}
.breadcrumb-step {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-tertiary);
  font-weight: 400;
  padding: var(--space-1) var(--space-2);
  border-radius: 0;
  transition: all var(--transition-fast);
}
.breadcrumb-step i {
  font-size: 0.75rem;
}
.breadcrumb-step.active {
  color: var(--text-ink-soft);
  background: transparent;
  font-weight: 500;
}
.breadcrumb-step.completed {
  color: var(--text-tertiary);
  background: transparent;
  cursor: pointer;
}
.breadcrumb-step.completed:hover {
  background: transparent;
  color: var(--accent-navy);
  transform: none;
}
.breadcrumb-sep {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  opacity: 0.5;
}

/* Theme icon visibility */
[data-theme="light"] .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }

.lang-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ===== Step Completion Indicator ===== */
.step-done {
  display: none;
  color: var(--color-green);
  font-size: 1rem;
  margin-left: var(--space-2);
  vertical-align: middle;
}
article.step-complete .step-done {
  display: inline;
  animation: checkBurst 0.4s ease;
}

/* ===== Required Badge — editorial: no pill, just faint small-caps text ===== */
label mark {
  background: none;
  color: var(--text-ink-faint);
  padding: 0;
  border-radius: 0;
  font-size: 0.6875rem; /* 11px */
  font-weight: 500;
  font-variant: small-caps;
  text-transform: lowercase; /* small-caps on lowercase gives true small-caps */
  letter-spacing: 0.08em;
  vertical-align: middle;
  margin-left: var(--space-2);
}

/* === Upload View — Editorial ("Preparation Desk") === */
#view-upload {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12, 48px) clamp(32px, 5vw, 80px) var(--space-16, 64px);
  background: var(--bg-paper);
}
#view-upload h2,
#view-upload .upload-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-md); /* 20px — section headings */
  letter-spacing: -0.015em;
  color: var(--text-ink);
  margin-bottom: var(--space-5);
  text-align: left;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-hairline);
}
#view-upload .upload-subtitle {
  color: var(--text-ink-soft);
  font-size: var(--text-base);
  margin-bottom: var(--space-8);
  text-align: left;
}
/* Hide article-number badges from upload headings */
#article-upload h2 .article-number,
#article-checks h2 .article-number {
  display: none;
}
/* Upload articles — flat on parchment, no card styling */
#view-upload article,
#view-upload article[class],
#view-upload .adv-settings-article {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  border-radius: 0 !important;
  padding: var(--space-8) 0 var(--space-10, 40px) !important;
  margin: 0 !important;
  text-align: left;
  --pico-card-background-color: transparent;
  --pico-card-box-shadow: none;
}
#view-upload article:last-child {
  border-bottom: none !important;
}
#view-upload article:hover {
  box-shadow: none !important;
}

/* Upload grid — two-column drop zones */
#article-upload .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: stretch;
}
#article-upload .grid > div {
  display: flex;
  flex-direction: column;
}
#article-upload .grid .drop-zone {
  flex: 1;
}
/* Field labels above drop zones */
.upload-field-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-ink);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  letter-spacing: 0.01em;
}
.upload-field-label mark {
  background: none !important;
  color: var(--text-ink-faint) !important;
  font-weight: 400 !important;
  font-size: var(--text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0 !important;
}
.upload-field-label small {
  color: var(--text-ink-faint);
  font-weight: 400;
  font-size: var(--text-xs);
}
@media (max-width: 640px) {
  #article-upload .grid {
    grid-template-columns: 1fr;
  }
}

/* Scope range — chapter/page inputs below drop zones */
.scope-range-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
}
.scope-range-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.scope-range-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-ink);
}
.scope-range-label small {
  font-weight: 400;
  color: var(--text-ink-faint);
  font-size: var(--text-xs);
}
.scope-range-field input {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: var(--space-2) 0;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
  color: var(--text-ink);
  transition: border-color var(--transition-base);
}
.scope-range-field input:focus {
  outline: none;
  border-bottom-color: var(--accent-navy);
  box-shadow: 0 1px 0 0 var(--accent-navy);
}
.scope-range-field input::placeholder {
  color: var(--text-ink-faint);
  font-style: italic;
}
@media (max-width: 640px) {
  .scope-range-row {
    grid-template-columns: 1fr;
  }
}

/* ===== Drop Zones — editorial: recessed manuscript tray ===== */
.drop-zone,
.file-drop-zone {
  border: 1px solid var(--border-color, #E0DDD8);
  border-radius: var(--radius-md);
  background: var(--bg-paper-alt, #F3F1ED);
  padding: var(--space-10, 40px) var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03), inset 0 0 0 1px rgba(0, 0, 0, 0.01);
}
.drop-zone:hover,
.file-drop-zone:hover {
  border-color: var(--accent-navy);
  background: #F0EDE8;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03), 0 0 0 3px rgba(27, 58, 92, 0.05);
}
.drop-zone.drag-over,
.file-drop-zone.drag-over {
  border-color: var(--accent-navy);
  background: #EBE8E2;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04), 0 0 0 4px rgba(27, 58, 92, 0.08);
  transform: scale(1.005);
}
.drop-zone.has-file,
.file-drop-zone.has-file {
  background: #F7F5F0;
  border-color: var(--border-color);
  border-left: 3px solid var(--accent-navy);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.02);
}
.drop-zone.error,
.file-drop-zone.error {
  border-color: var(--accent-burgundy);
  animation: shake 300ms ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.drop-zone .drop-icon {
  font-size: 1.75rem !important;
  color: var(--accent-navy) !important;
  opacity: 0.30 !important;
  margin-bottom: var(--space-3) !important;
  transition: color var(--transition-base), opacity var(--transition-base), transform var(--transition-base);
}
.drop-zone:hover .drop-icon {
  opacity: 0.50 !important;
  transform: translateY(-1px);
}
.drop-zone.has-file .drop-icon {
  color: var(--accent-navy) !important;
  opacity: 0.55 !important;
}
.drop-zone .drop-label,
.drop-zone-label,
.file-drop-label {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--text-sm) !important;
  color: var(--text-ink) !important;
  margin-bottom: var(--space-1) !important;
  transition: color var(--transition-fast) !important;
}
.drop-zone:hover .drop-label {
  color: var(--text-ink) !important;
}
.drop-zone .drop-sublabel,
.drop-zone-hint,
.file-drop-hint {
  font-size: var(--text-xs) !important;
  color: var(--text-ink-soft) !important;
  transition: color var(--transition-fast) !important;
}
.drop-zone .filename {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--accent-navy);
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}
.file-clear-btn {
  display: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-ink-faint);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.file-clear-btn:hover {
  color: var(--accent-burgundy);
}
.drop-zone.has-file .file-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Demo Sample Button — plain text link */
.demo-sample-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  font-style: italic;
  background: none;
  border: none;
  cursor: pointer;
  margin-top: var(--space-2);
  transition: color var(--transition-fast);
}
.demo-sample-btn i { display: none; }
.demo-sample-btn:hover {
  color: var(--accent-navy);
  background: none;
  border: none;
}

/* ===== Early Access Banner — faint centered note ===== */
.early-access-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-6);
  background: var(--bg-paper-alt);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-ink-faint);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  font-style: italic;
}

/* ===== Service Mode Toggle — text tabs with underline ===== */
.service-mode-toggle {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-2);
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  justify-content: flex-start;
}
.mode-btn {
  padding: var(--space-2) 0 var(--space-3);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-ink-faint);
  font-weight: 400;
  font-size: 1rem;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: none;
  letter-spacing: -0.005em;
}
.mode-btn i { display: none; }
.mode-btn:hover {
  background: none;
  color: var(--text-ink);
}
.mode-btn:active {
  transform: none;
}
.mode-btn.active {
  color: var(--accent-navy);
  font-weight: 600;
  border-bottom-color: var(--accent-navy);
  background: none;
  box-shadow: none;
}

/* Mode description — subtle hint */
.mode-description {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-ink-faint);
  margin: 0 0 var(--space-6);
  padding: 0;
  text-align: left;
}

/* ===== Usage Quota — plain small text, no box ===== */
.usage-quota-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  margin-bottom: var(--space-3);
}
.usage-quota-bar i { display: none; }
.usage-quota-bar.warning { background: none; border: none; color: var(--color-amber); }
.usage-quota-bar.danger { background: none; border: none; color: var(--color-red); }
.usage-quota-bar.info { background: none; border: none; color: var(--text-ink-faint); }
.page-range-hint { color: var(--text-tertiary); margin-top: var(--space-1); }
.page-range-hint a { margin-left: var(--space-2); }

/* ===== Editorial Group ===== */
/* Pre-redesign purple tokens removed — editorial palette uses navy/burgundy only.
   Remapped to burgundy (action/insight) which is the closest semantic match. */
:root {
  --group-editorial-bg: var(--accent-burgundy-light);
  --group-editorial-border: var(--accent-burgundy);
}
[data-theme="dark"] {
  --group-editorial-bg: rgba(139, 37, 0, 0.08);
  --group-editorial-border: var(--accent-burgundy);
}
.group-editorial {
  --_group-bg: var(--group-editorial-bg);
  --_group-border: var(--group-editorial-border);
}

/* ===== Check Cards — Editorial Tool Selection ===== */
.check-cards,
.checks-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-6);
  align-items: stretch;
}
.check-card + .check-card::before {
  display: none;
}
.check-card {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-ink-soft);
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-left: 3px solid transparent;
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), border-left-color var(--transition-fast);
  border-radius: var(--radius-md);
  box-shadow: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.check-card:hover {
  border-color: var(--border-color-hover);
  border-left-color: var(--accent-navy);
  color: var(--text-ink);
  background: var(--surface-0);
}
.check-card.selected,
.check-card.active,
.check-card[data-selected="true"] {
  color: var(--accent-navy);
  font-weight: 600;
  border-color: var(--border-color);
  border-left-color: var(--accent-navy);
  background: rgba(27, 58, 92, 0.03);
}
.check-card.selected::after,
.check-card.active::after,
.check-card[data-selected="true"]::after {
  display: none;
}
.check-card input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* Check indicator — hidden; left bar is the indicator */
.check-indicator {
  display: none;
}
.check-card.selected .check-indicator,
.check-card[data-selected="true"] .check-indicator {
  display: none;
}
/* Hide card icons and descriptions — tabs are text-only */
.card-icon { display: none; }
.needs-en-badge { display: none !important; }
.check-card h4 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: inherit;
  color: inherit;
  font-family: inherit;
}
.check-card p { display: none; }
.check-card[aria-disabled="true"] {
  opacity: 0.40;
  cursor: not-allowed;
  pointer-events: none;
  font-style: italic;
}

/* ===== House Style Cards ===== */
.hs-cards {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.hs-card {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  background: var(--surface-0);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hs-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}
.hs-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--primary);
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}
.hs-card-header span {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}
.hs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
}
.hs-row:last-child {
  border-bottom: none;
}
.hs-row-label {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.hs-row-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}
.hs-row-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  margin-right: var(--space-3);
}
.hs-card-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-1);
}
.hs-select {
  width: 170px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--text-primary);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
  appearance: auto;
}
.hs-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.hs-toggle {
  position: relative;
  display: inline-block;
  cursor: pointer;
  flex-shrink: 0;
}
.hs-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.hs-toggle-track {
  display: block;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--border-color);
  transition: background var(--transition-fast);
  position: relative;
}
.hs-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--transition-fast);
}
.hs-toggle input:checked + .hs-toggle-track {
  background: var(--primary);
}
.hs-toggle input:checked + .hs-toggle-track::after {
  transform: translateX(16px);
}
.hs-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-3);
}
[data-theme="dark"] .hs-select {
  background: var(--surface-1);
  border-color: var(--border-color);
}

/* ===== Advanced Settings Accordion ===== */
#scope-section > summary {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
}
#scope-section > summary::-webkit-details-marker { display: none; }
#scope-section > summary::before {
  display: none;
}
#scope-section > summary::after {
  display: none;
}
#scope-section > summary:hover {
  color: var(--accent-navy);
  border: none;
  box-shadow: none;
}
#scope-section > summary h2 {
  font-size: var(--text-xs) !important;
  font-weight: 400;
  margin: 0;
}

/* Inner accordion items */
.adv-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.adv-accordion > details {
  border-bottom: 1px solid var(--border-color);
  margin: 0;
}
.adv-accordion > details:last-child {
  border-bottom: none;
}
.adv-accordion > details > summary {
  list-style: none;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: background var(--transition-fast);
  background: var(--surface-0);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.adv-accordion > details > summary::-webkit-details-marker { display: none; }
.adv-accordion > details > summary:hover {
  background: var(--surface-1);
}
.adv-accordion > details > summary .adv-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--primary);
  flex-shrink: 0;
}
.adv-accordion > details > summary .adv-label {
  flex: 1;
}
.adv-accordion > details > summary .adv-hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 400;
}
.adv-accordion > details > summary::after {
  content: '\F229';
  font-family: 'bootstrap-icons';
  font-size: 0.75rem;
  color: var(--text-secondary);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.adv-accordion > details[open] > summary::after {
  transform: rotate(180deg);
}
.adv-accordion > details[open] > summary {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-color);
}
.adv-accordion > details > .adv-content {
  padding: var(--space-4);
}
[data-theme="dark"] .adv-accordion > details > summary:hover {
  background: var(--surface-1);
}

/* ===== Progress / Step Cards (Editorial Flat List) ===== */
.progress-overall { margin-bottom: var(--space-8); }
.step-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 0;
  margin-top: var(--space-4);
}
.step-cards::before {
  display: none;
}
.step-card {
  padding: var(--space-3) 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  transition: opacity var(--transition-base);
  border-bottom: 1px solid var(--border-hairline);
}
.step-card:last-child {
  border-bottom: none;
}
.step-card .step-status {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 600;
  transition: all var(--transition-base);
  position: relative;
  z-index: 1;
}
.step-card.pending .step-status {
  background: transparent;
  border: 1.5px solid var(--border-color);
  color: var(--text-tertiary);
}
.step-card.pending {
  opacity: 0.5;
}
.step-card.active {
  background: transparent;
  border-radius: 0;
  opacity: 1;
}
.step-card.active .step-status {
  background: var(--accent-navy);
  border: 1.5px solid var(--accent-navy);
  color: var(--color-on-primary);
  animation: stepPulse 2s ease infinite;
}
@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 58, 92, 0.3); }
  50% { box-shadow: 0 0 0 4px rgba(27, 58, 92, 0.08); }
}
.step-card.done {
  opacity: 0.6;
}
.step-card.done .step-status {
  background: var(--accent-green);
  border: 1.5px solid var(--accent-green);
  color: var(--color-on-primary);
}
.step-card.error .step-status {
  background: var(--accent-burgundy);
  border: 1.5px solid var(--accent-burgundy);
  color: var(--color-on-primary);
}
.step-card .step-info { flex: 1; }
.step-card .step-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-ink-soft);
}
.step-card.active .step-label {
  color: var(--text-ink);
  font-weight: 600;
}
.step-card .step-detail {
  font-size: 0.8rem;
  color: var(--text-ink-faint);
  margin-top: 2px;
}
.chapter-progress { margin-top: var(--space-2); }
.elapsed {
  text-align: left;
  color: var(--text-ink-faint);
  font-size: 0.85rem;
  margin-top: var(--space-4);
  font-variant-numeric: tabular-nums;
}
.progress-eta {
  text-align: left;
  color: var(--text-ink-faint);
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  font-variant-numeric: tabular-nums;
}
.progress-eta.visible {
  opacity: 1;
}

/* Custom progress bar styling — thin editorial */
progress {
  border-radius: 1px;
  overflow: hidden;
  height: 2px;
  width: 100%;
}
progress::-webkit-progress-bar {
  background: var(--border-hairline);
  border-radius: 1px;
}
progress::-webkit-progress-value {
  background: var(--accent-navy);
  border-radius: 1px;
  transition: width var(--transition-base);
}
progress::-moz-progress-bar {
  background: var(--accent-navy);
  border-radius: 1px;
}

/* ===== Summary Strip (compact verdict bar) ===== */
.summary-strip {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--element-gap) 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: var(--element-gap);
}
.ss-row1 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.ss-verdict {
  font-size: 1rem; font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ss-verdict .count-high { color: var(--color-red); }
.ss-verdict .count-med { color: var(--color-amber); }
.ss-verdict .count-low { color: var(--text-tertiary); }
.ss-actions-row {
  display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}
.ss-actions-row button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-sm);
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-color); background: transparent;
  color: var(--text-secondary); transition: all 0.15s;
}
.ss-actions-row button:hover {
  border-color: var(--primary); color: var(--primary); background: var(--surface-2);
}
.ss-actions-row button i { font-size: 0.9rem; }
.ss-row2 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  font-size: 0.84rem; color: var(--text-secondary);
}
.ss-row2-left {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ss-row2-left i { font-size: 0.85rem; opacity: 0.6; }
.ss-delta { font-size: 0.72rem; font-weight: 600; margin-top: 6px; padding: 2px 8px; border-radius: var(--radius-full); cursor: help; }
.ss-delta.improved { background: var(--color-green-50, #e6f9e6); color: var(--color-green, #2b8a3e); }
.ss-delta.regressed { background: var(--color-red-50, #fde8e8); color: var(--color-red, #e03131); }
@media (max-width: 600px) {
  .summary-strip { padding: 12px 14px; }
  .ss-row1 { gap: 8px; }
  .ss-actions-row { width: 100%; justify-content: flex-end; }
}

/* ===== What's New Changelog Dot ===== */

/* ===== Analytics Panel (collapsed) ===== */
.analytics-panel { margin-bottom: var(--space-3); }
.analytics-panel-summary {
  cursor: pointer; padding: 10px 14px; font-size: 0.9rem; color: var(--text-secondary);
  background: var(--surface-0); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); display: flex; align-items: center; gap: 8px;
  list-style: none;
}
.analytics-panel-summary::-webkit-details-marker { display: none; }
.analytics-panel-summary::before { content: '▸'; font-size: 0.8rem; transition: transform 0.2s; }
.analytics-panel[open] > .analytics-panel-summary::before { transform: rotate(90deg); }
.analytics-panel-hint { font-size: 0.82rem; color: var(--text-muted, #9ca3af); }
.analytics-panel-content { padding: 12px 0 0; }

/* ===== Inline Glossary Section (inside issue card details) ===== */
.gs-inline-row {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--color-blue) 4%, transparent);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.gs-inline-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-blue);
  margin-bottom: 0.35rem;
}
.gs-inline-header i { font-size: 0.8rem; }
.gs-inline-desc {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-bottom: var(--space-2);
}
.gs-inline-terms-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 0.82rem;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.gs-inline-en {
  font-weight: 600;
  color: var(--text-primary);
}
.gs-inline-arrow {
  color: var(--text-tertiary);
  font-size: 0.75rem;
}
.gs-inline-tr {
  color: var(--color-blue);
  font-weight: 500;
}
.gs-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  border: 1px solid var(--color-blue);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-blue);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.gs-inline-btn:hover:not(:disabled) {
  background: var(--color-blue);
  color: #fff;
}
.gs-inline-btn i { font-size: 0.82rem; }
.gs-inline-btn.saved {
  border-color: var(--color-green);
  color: var(--color-green);
  cursor: default;
}
.gs-inline-btn:disabled { pointer-events: none; }

/* Glossary indicator badge on card header (visible before expanding) */
.gs-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: var(--color-blue);
  opacity: 0.75;
  margin-left: auto;
  padding: 0.15rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--color-blue) 30%, transparent);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.gs-header-badge i { font-size: 0.72rem; }
.gs-header-badge.saved {
  color: var(--color-green);
  border-color: color-mix(in srgb, var(--color-green) 30%, transparent);
}

/* ===== Glossary Toast (with undo) ===== */
.glossary-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  background: var(--surface-1);
  border: 1px solid var(--color-green);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  animation: glossaryToastIn 0.3s ease;
  max-width: 420px;
}
.glossary-toast-icon {
  color: var(--color-green);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.glossary-toast-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.glossary-toast-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.glossary-toast-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.glossary-toast-undo {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--text-tertiary);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.glossary-toast-undo:hover {
  border-color: var(--color-red, #e74c3c);
  color: var(--color-red, #e74c3c);
}
@keyframes glossaryToastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Sözlük Tab ===== */
@keyframes glossarySlideDown {
  from { opacity: 0; transform: translateY(-8px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);    max-height: 400px; }
}
@keyframes glossaryRowIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes glossaryRowOut {
  from { opacity: 1; transform: translateX(0) scaleY(1); max-height: 72px; }
  to   { opacity: 0; transform: translateX(20px) scaleY(0); max-height: 0; padding: 0; margin: 0; }
}
@keyframes glossaryEditPulse {
  0%   { box-shadow: 0 0 0 0 var(--primary-50, rgba(27, 58, 92, 0.4)); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes glossaryEmptyFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes glossaryBadgePop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.glossary-tab-header { margin-bottom: var(--space-6); }
.glossary-tab-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.glossary-tab-title-row h2 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
}
.glossary-term-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--primary-50);
  color: var(--primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  animation: glossaryBadgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.glossary-tab-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 0 var(--space-5) 0;
}
.glossary-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.glossary-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}
.glossary-search-wrap i.search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 0.9rem;
  pointer-events: none;
  transition: color var(--transition-fast);
}
.glossary-search-input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.glossary-search-input::placeholder { color: var(--text-tertiary); }
.glossary-search-input:focus {
  border-color: var(--primary);
  background: var(--surface-0);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.glossary-search-wrap:focus-within i.search-icon { color: var(--primary); }
.glossary-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: none;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.7rem;
  transition: background var(--transition-fast), color var(--transition-fast);
  padding: 0;
  line-height: 1;
}
.glossary-search-clear:hover { background: var(--color-red-50); color: var(--color-red); }
.glossary-search-wrap.has-value .glossary-search-clear { display: flex; }
.glossary-filter-group {
  display: flex;
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.glossary-filter-btn {
  padding: 7px 13px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  border-right: 1px solid var(--border-color);
  line-height: 1.4;
  min-height: 36px;
}
.glossary-filter-btn:last-child { border-right: none; }
.glossary-filter-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.glossary-filter-btn.active { background: var(--primary-100); color: var(--primary); font-weight: 600; }
.glossary-toolbar-spacer { flex: 1; }
.glossary-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.glossary-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  line-height: 1.4;
}
.glossary-btn-add:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(27, 58, 92, 0.25); }
.glossary-btn-add:active { transform: translateY(0); box-shadow: none; }
.glossary-btn-bulk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  line-height: 1.4;
}
.glossary-btn-bulk:hover { background: var(--surface-2); color: var(--text-primary); }
.glossary-add-form {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--transition-slow), opacity var(--transition-base), margin var(--transition-base);
  margin-bottom: 0;
}
.glossary-add-form.open { max-height: 400px; opacity: 1; margin-bottom: var(--space-4); }
.glossary-add-form-inner {
  margin-top: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-1);
  border: 1px solid var(--primary-100);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  animation: glossarySlideDown 0.25s cubic-bezier(0.16,1,0.3,1) both;
}
.glossary-add-form-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.glossary-add-form-title i { color: var(--primary); }
.glossary-add-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.glossary-add-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 1rem;
  flex-shrink: 0;
  padding-top: 22px;
}
.glossary-add-field { display: flex; flex-direction: column; gap: var(--space-1); }
.glossary-add-field label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.glossary-add-field input {
  padding: 9px 12px;
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  width: 100%;
}
.glossary-add-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); }
.glossary-add-field input::placeholder { color: var(--text-tertiary); }
.glossary-add-form-actions { display: flex; align-items: center; gap: var(--space-2); }
.glossary-add-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--color-green);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.glossary-add-save-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.glossary-add-save-btn:active { transform: none; filter: brightness(0.95); }
.glossary-add-cancel-btn {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.glossary-add-cancel-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.glossary-bulk-form {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--transition-slow), opacity var(--transition-base), margin var(--transition-base);
  margin-bottom: 0;
}
.glossary-bulk-form.open { max-height: 400px; opacity: 1; margin-bottom: var(--space-4); }
.glossary-bulk-form-inner {
  margin-top: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-amber);
  border-radius: var(--radius-md);
}
.glossary-bulk-form-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.glossary-bulk-form-title i { color: var(--color-amber); }
.glossary-bulk-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.5;
}
.glossary-bulk-textarea {
  width: 100%;
  min-height: 110px;
  padding: 10px 12px;
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  line-height: 1.6;
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  margin-bottom: var(--space-3);
}
.glossary-bulk-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); }
.glossary-bulk-textarea::placeholder { color: var(--text-tertiary); font-family: var(--font-mono); }
.glossary-bulk-actions { display: flex; align-items: center; gap: var(--space-2); }
.glossary-bulk-parse-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--color-amber);
  color: var(--surface-0);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.glossary-bulk-parse-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.glossary-terms-container { margin-top: var(--space-2); }
.glossary-list-header {
  display: grid;
  grid-template-columns: 1fr 40px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: 0 var(--space-4) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-2);
}
.glossary-col-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.glossary-col-label.center { text-align: center; }
.glossary-col-label.right  { text-align: right; }
.glossary-term-row {
  display: grid;
  grid-template-columns: 1fr 40px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  margin-bottom: 2px;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  animation: glossaryRowIn 0.25s ease both;
  position: relative;
}
.glossary-term-row:nth-child(1) { animation-delay: 0ms; }
.glossary-term-row:nth-child(2) { animation-delay: 30ms; }
.glossary-term-row:nth-child(3) { animation-delay: 60ms; }
.glossary-term-row:nth-child(4) { animation-delay: 90ms; }
.glossary-term-row:nth-child(5) { animation-delay: 120ms; }
.glossary-term-row:nth-child(n+6) { animation-delay: 150ms; }
.glossary-term-row:hover { background: var(--surface-1); border-color: var(--border-color); }
.glossary-term-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
  transition: transform var(--transition-base);
}
.glossary-term-row:hover::before { transform: translateY(-50%) scaleY(1); }
.glossary-term-row.deleting {
  animation: glossaryRowOut 0.35s ease forwards;
  pointer-events: none;
  overflow: hidden;
}
.glossary-term-en,
.glossary-term-tr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.glossary-term-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.glossary-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  width: fit-content;
  margin-top: 2px;
  animation: glossaryBadgePop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
.glossary-source-badge.auto { background: var(--primary-50); color: var(--primary); }
.glossary-source-badge.manual { background: var(--color-gray-50); color: var(--color-gray); }
.glossary-arrow-col {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.glossary-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}
.glossary-term-row:hover .glossary-row-actions { opacity: 1; }
.glossary-icon-btn {
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  color: var(--text-tertiary);
  padding: 0;
}
.glossary-icon-btn:hover { transform: scale(1.1); }
.glossary-icon-btn.edit:hover { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary); }
.glossary-icon-btn.delete:hover { background: var(--color-red-50); border-color: var(--color-red-border); color: var(--color-red); }
.glossary-icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.glossary-term-row.editing {
  background: var(--surface-1);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
  animation: glossaryEditPulse 0.5s ease;
  padding: var(--space-3) var(--space-4);
}
.glossary-term-row.editing::before { transform: translateY(-50%) scaleY(1); background: var(--primary); }
.glossary-term-row.editing .glossary-row-actions { opacity: 1; }
.glossary-edit-input {
  width: 100%;
  padding: 7px 10px;
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.glossary-edit-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); }
.glossary-icon-btn.save { color: var(--color-green); background: var(--color-green-50); border-color: var(--color-green-border); }
.glossary-icon-btn.save:hover { filter: brightness(1.1); transform: scale(1.1); }
.glossary-icon-btn.cancel-edit:hover { background: var(--surface-2); border-color: var(--border-color); color: var(--text-primary); }
.glossary-term-text mark { background: rgba(27, 58, 92, 0.12); color: var(--primary); border-radius: 2px; padding: 0 1px; font-weight: 700; }
[data-theme="dark"] .glossary-term-text mark { background: rgba(27, 58, 92, 0.35); color: #93c5fd; }
.glossary-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
  text-align: center;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  transition: border-color var(--transition-base);
}
.glossary-empty-state:hover { border-color: var(--primary); }
.glossary-empty-icon-stack {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: var(--space-6);
  animation: glossaryEmptyFloat 3s ease-in-out infinite;
}
.glossary-empty-icon-primary {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: var(--primary);
  box-shadow: 0 8px 24px rgba(27, 58, 92, 0.15);
}
.glossary-empty-icon-badge {
  position: absolute;
  bottom: -6px;
  right: -8px;
  width: 28px;
  height: 28px;
  background: var(--color-green-50);
  border: 2px solid var(--surface-0);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--color-green);
}
.glossary-empty-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-2) 0; }
.glossary-empty-desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.65; max-width: 340px; margin: 0 0 var(--space-6) 0; }
.glossary-empty-how { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; width: 100%; max-width: 320px; margin-bottom: var(--space-6); }
.glossary-empty-how-item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.glossary-empty-how-icon {
  width: 28px;
  height: 28px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 1px;
}
.glossary-no-results { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-tertiary); }
.glossary-no-results i { font-size: 2rem; margin-bottom: var(--space-3); display: block; opacity: 0.6; }
.glossary-no-results p { font-size: var(--text-sm); margin: var(--space-1) 0; }
.glossary-no-results strong { color: var(--text-primary); background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
.glossary-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.glossary-stats-bar-counts { display: flex; align-items: center; gap: var(--space-4); }
.glossary-stat-item { display: flex; align-items: center; gap: 4px; }
.glossary-stat-item i { font-size: 0.75rem; opacity: 0.7; }
.glossary-stat-item strong { color: var(--text-primary); font-weight: 600; }
.glossary-stats-bar-hint { font-size: var(--text-xs); color: var(--text-tertiary); font-style: italic; }
.glossary-list-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.glossary-list-card:focus-within { border-color: var(--primary); }
.glossary-list-inner { background: var(--surface-0); }
.glossary-list-inner .glossary-term-row {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
}
.glossary-list-inner .glossary-term-row:last-child { border-bottom: none; }
.glossary-list-inner .glossary-term-row::before { left: 0; border-radius: 0; }
@media (max-width: 768px) {
  .glossary-toolbar { flex-direction: column; align-items: stretch; }
  .glossary-search-wrap { max-width: 100%; }
  .glossary-toolbar-spacer { display: none; }
  .glossary-actions { justify-content: flex-end; }
  .glossary-add-row { grid-template-columns: 1fr; }
  .glossary-add-arrow { display: none; }
  .glossary-list-header { display: none; }
  .glossary-term-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
  .glossary-term-en { grid-column: 1; grid-row: 1; }
  .glossary-arrow-col { display: none; }
  .glossary-term-tr { grid-column: 1; grid-row: 2; }
  .glossary-row-actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; opacity: 1; }
  .glossary-term-row:hover::before { display: none; }
  .glossary-stats-bar { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}
@media (max-width: 480px) {
  .glossary-filter-group { width: 100%; }
  .glossary-filter-btn { flex: 1; text-align: center; }
  .glossary-actions { width: 100%; }
  .glossary-btn-add, .glossary-btn-bulk { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .glossary-term-row,
  .glossary-term-count-pill,
  .glossary-source-badge,
  .glossary-empty-icon-stack { animation: none; }
  .glossary-add-form,
  .glossary-bulk-form { transition: none; }
}

/* ===== Glossary Export Dropdown ===== */
.glossary-export-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.glossary-btn-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  line-height: 1.4;
  user-select: none;
}
.glossary-btn-export:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.glossary-btn-export[aria-expanded="true"] {
  background: var(--surface-2);
  border-color: var(--border-color-hover);
  color: var(--text-primary);
}
.glossary-btn-export .export-chevron {
  font-size: 0.7rem;
  transition: transform var(--transition-fast);
}
.glossary-btn-export[aria-expanded="true"] .export-chevron {
  transform: rotate(180deg);
}
.glossary-export-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 2000;
  min-width: 220px;
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1) 0;
  animation: glossaryDropdownIn 0.15s cubic-bezier(0.16,1,0.3,1) both;
  overflow: hidden;
}
.glossary-export-dropdown.open {
  display: block;
}
@keyframes glossaryDropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.glossary-export-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 10px var(--space-4);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  transition: background var(--transition-fast);
}
.glossary-export-option:hover {
  background: var(--surface-1);
}
.glossary-export-option:focus-visible {
  outline: none;
  background: var(--primary-50);
}
.glossary-export-option-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  flex-shrink: 0;
}
.glossary-export-option-icon.csv { background: var(--color-green-50); color: var(--color-green); }
.glossary-export-option-icon.tmx { background: var(--primary-50); color: var(--primary); }
.glossary-export-option-icon.tbx { background: var(--color-amber-50); color: var(--color-amber); }
[data-theme="dark"] .glossary-export-option-icon.csv { background: var(--color-green-50); }
[data-theme="dark"] .glossary-export-option-icon.tmx { background: var(--primary-50); }
[data-theme="dark"] .glossary-export-option-icon.tbx { background: var(--color-amber-50); }
.glossary-export-option-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.glossary-export-option-label {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.3;
}
.glossary-export-option-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.3;
}
.glossary-export-option .export-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
  flex-shrink: 0;
}
.glossary-export-option.loading .export-spinner { display: block; }
.glossary-export-option.loading .glossary-export-option-icon { opacity: 0.4; }
.glossary-export-separator {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-1) 0;
}
@media (max-width: 480px) {
  .glossary-btn-export { padding: 8px 10px; }
  .glossary-btn-export .export-chevron { display: none; }
  .glossary-export-dropdown { right: auto; left: 0; min-width: 200px; }
}

/* ===== Glossary Import Preview Modal ===== */
@keyframes glossaryPreviewSlideDown {
  from { opacity: 0; transform: translateY(-18px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.glossary-preview-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9995;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.glossary-preview-overlay.open {
  display: flex;
}
.glossary-preview-modal {
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: glossaryPreviewSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
  overflow: hidden;
}
.glossary-preview-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.glossary-preview-header-text {
  flex: 1;
  min-width: 0;
}
.glossary-preview-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.glossary-preview-filename {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}
.glossary-preview-format-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.glossary-preview-format-badge.csv  { background: var(--color-green-50);  color: var(--color-green);  border: 1px solid var(--color-green-border); }
.glossary-preview-format-badge.tsv  { background: var(--color-green-50);  color: var(--color-green);  border: 1px solid var(--color-green-border); }
.glossary-preview-format-badge.txt  { background: var(--color-gray-50);   color: var(--color-gray);   border: 1px solid var(--color-gray-border); }
.glossary-preview-format-badge.pdf  { background: var(--color-red-50);    color: var(--color-red);    border: 1px solid var(--color-red-border); }
.glossary-preview-format-badge.tmx  { background: var(--primary-50);      color: var(--primary);      border: 1px solid rgba(27, 58, 92, 0.2); }
.glossary-preview-format-badge.tbx  { background: var(--color-amber-50);  color: var(--color-amber);  border: 1px solid var(--color-amber-border); }
.glossary-preview-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.glossary-preview-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
}
.glossary-preview-dup-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--color-amber-50);
  border: 1px solid var(--color-amber-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-amber);
}
.glossary-preview-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-tertiary);
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
  margin-top: -2px;
}
.glossary-preview-close:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
/* Body / table area */
.glossary-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6);
  min-height: 80px;
}
/* Loading state */
.glossary-preview-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.glossary-preview-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
/* Error state */
.glossary-preview-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-red-50);
  border: 1px solid var(--color-red-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-red);
}
.glossary-preview-error i { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
/* PDF notice */
.glossary-preview-pdf-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-amber-50);
  border: 1px solid var(--color-amber-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-amber);
  margin-bottom: var(--space-3);
}
.glossary-preview-pdf-notice i { font-size: 1.1rem; flex-shrink: 0; }
/* Preview table */
.glossary-preview-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  max-height: 300px;
  overflow-y: auto;
}
.glossary-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  table-layout: fixed;
}
.glossary-preview-table colgroup .col-idx   { width: 44px; }
.glossary-preview-table colgroup .col-en    { width: 46%; }
.glossary-preview-table colgroup .col-tr    { width: 46%; }
.glossary-preview-table colgroup .col-status { width: 30px; }
.glossary-preview-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-1);
}
.glossary-preview-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.glossary-preview-table th.col-idx,
.glossary-preview-table td.col-idx {
  text-align: center;
  color: var(--text-tertiary);
  padding-left: 8px;
  padding-right: 8px;
}
.glossary-preview-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
  word-break: break-word;
}
.glossary-preview-table tbody tr:last-child td { border-bottom: none; }
.glossary-preview-table tbody tr:hover td { background: var(--surface-1); }
.glossary-preview-table tbody tr.is-duplicate td { background: var(--color-amber-50); }
[data-theme="dark"] .glossary-preview-table tbody tr.is-duplicate td { background: var(--color-amber-50); }
.glossary-preview-table .cell-en { color: var(--text-primary); font-weight: 500; }
.glossary-preview-table .cell-tr { color: var(--text-secondary); }
.glossary-preview-table .dup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-amber);
  display: inline-block;
  flex-shrink: 0;
  margin-top: 5px;
}
.glossary-preview-truncated {
  text-align: center;
  padding: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-color);
}
/* Footer */
.glossary-preview-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-color);
  background: var(--surface-1);
  flex-shrink: 0;
}
.glossary-preview-import-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: var(--primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.glossary-preview-import-btn:hover { background: var(--primary-hover); transform: translateY(-1px); }
.glossary-preview-import-btn:active { transform: none; }
.glossary-preview-import-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.glossary-preview-import-btn .btn-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
.glossary-preview-import-btn.loading .btn-spinner { display: block; }
.glossary-preview-import-btn.loading i { display: none; }
.glossary-preview-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.glossary-preview-cancel-btn:hover { background: var(--surface-2); color: var(--text-primary); }
@media (max-width: 640px) {
  .glossary-preview-modal { max-height: 95vh; border-radius: var(--radius-md); }
  .glossary-preview-header { padding: var(--space-4); }
  .glossary-preview-body { padding: var(--space-3) var(--space-4); }
  .glossary-preview-footer { padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
  .glossary-preview-import-btn, .glossary-preview-cancel-btn { flex: 1; justify-content: center; }
  .glossary-preview-filename { max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .glossary-preview-modal { animation: none; }
  .glossary-export-dropdown { animation: none; }
}

/* ===== Category Bars ===== */
.category-bars { margin-bottom: var(--space-6); }
.cat-bar-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-1);
  font-size: 0.75rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  cursor: pointer;
}
.cat-bar-row:hover {
  background: var(--surface-1);
  transform: translateX(2px);
}
.cat-bar-row.active {
  background: var(--primary-50, rgba(27, 58, 92, 0.08));
  border-left: 3px solid var(--primary);
  padding-left: calc(var(--space-2) - 3px);
}
.cat-bar-label {
  width: 140px;
  min-width: 140px;
  text-align: right;
  padding-right: var(--space-3);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}
.cat-bar-track {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}
.cat-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: barGrow 0.6s ease forwards;
  position: relative;
}
.cat-bar-count {
  min-width: 32px;
  text-align: right;
  padding-left: var(--space-2);
  font-weight: 600;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* ===== Chapter Heatmap ===== */
.chm-container {
  margin-bottom: var(--space-4);
}

.chm-scrollable {
  max-height: 420px;
  overflow-y: auto;
}

.chm-row {
  display: grid;
  grid-template-columns: 140px 1fr 36px 56px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.chm-row:hover {
  background: var(--surface-1);
}

.chm-row--active {
  background: var(--primary-50) !important;
  outline: 1px solid var(--primary);
}

.chm-label {
  font-size: var(--text-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chm-bar-track {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}

.chm-bar-fill {
  height: 100%;
  border-radius: 4px;
  min-width: 2px;
  transition: width 0.6s ease;
}

.chm-count {
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-secondary);
}

.chm-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  text-align: center;
  white-space: nowrap;
}

.chm-badge-high {
  background: var(--color-red-50);
  color: var(--color-red);
  border: 1px solid var(--color-red-border);
}

.chm-badge-medium {
  background: var(--color-amber-50);
  color: var(--color-amber);
  border: 1px solid var(--color-amber-border);
}

.chm-badge-low {
  background: var(--color-green-50);
  color: var(--color-green);
  border: 1px solid var(--color-green-border);
}

.chm-badge-none {
  background: var(--color-gray-50);
  color: var(--color-gray);
  border: 1px solid var(--color-gray-border);
}

.chm-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.chm-filter-banner button {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}

.chm-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-tertiary);
}

.chm-empty i {
  font-size: 2rem;
  opacity: 0.4;
  display: block;
  margin-bottom: var(--space-2);
}

@media (max-width: 600px) {
  .chm-row {
    grid-template-columns: 1fr 36px 56px;
  }
  .chm-label {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chm-bar-fill { transition: none; }
}

/* ===== Filter Toolbar ===== */
.filter-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.filter-toolbar input, .filter-toolbar select {
  margin-bottom: 0;
  font-size: 0.8rem;
}
.filter-toolbar .search-box {
  width: 100%;
  border-radius: var(--radius-full);
  padding-left: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238b90a0' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
  background-size: 16px;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
}
.filter-row > select {
  flex: 1;
  min-width: 150px;
  border-radius: var(--radius-md);
}
.clear-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-red-50);
  color: var(--color-red);
  border: 1px solid var(--color-red-200);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.clear-filters-btn:hover {
  background: var(--color-red-100);
  border-color: var(--color-red);
}

/* ===== Filter Toolbar V2 (compact sticky) ===== */
.filter-toolbar-v2 {
  position: sticky; top: 60px; z-index: 20;
  background: var(--bg-paper); border-bottom: 1px solid var(--border-hairline);
  padding: 10px 0; margin-bottom: var(--element-gap);
  border-radius: 0; box-shadow: none;
}
.ftv2-row1 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ftv2-row1 .quick-filters { margin: 0; padding: 0; border: none; }
.ftv2-search {
  flex: 0 1 240px; min-width: 120px; font-size: 0.85rem;
  padding: 5px 10px; border: 1px solid var(--border-color);
  border-radius: var(--radius-full); background: var(--surface-0);
  color: var(--text-primary);
}
.ftv2-sort {
  font-size: 0.82rem; padding: 5px 8px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--surface-0); color: var(--text-secondary);
  cursor: pointer; max-width: 180px;
}
.ftv2-filter-btn {
  background: none; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 5px 12px;
  font-size: 0.85rem; cursor: pointer; color: var(--text-secondary);
  display: flex; align-items: center; gap: 5px;
}
.ftv2-filter-btn:hover { border-color: var(--primary); color: var(--text-primary); }
.ftv2-progress {
  margin-left: auto; font-size: 0.82rem; color: var(--text-secondary);
  white-space: nowrap;
}
.ftv2-active-pills {
  display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px;
}
.ftv2-active-pills:empty { display: none; padding: 0; }
@media (max-width: 640px) {
  .ftv2-search { flex: 1 1 100%; }
  .ftv2-progress { margin-left: 0; width: 100%; text-align: right; }
}

/* Sticky scroll context bar */

/* ===== AI Explanation Box ===== */
.ai-explanation {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}
.ai-explanation-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1rem;
}
.ai-explanation-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
[data-theme="dark"] .ai-explanation {
  background: var(--surface-2);
}

/* ===== Category Badge ===== */
.cat-badge {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* In dark mode, soften category badges */
[data-theme="dark"] .cat-badge {
  opacity: 0.9;
}

/* ===== Grouped Accordion - Clean Paper v2.1 ===== */
.group-section { margin-bottom: var(--subsection-gap); }
.group-section > summary {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  padding: var(--space-4) 0;
  background: transparent !important;
  border: none;
  border-bottom: 1px solid var(--border-hairline);
  border-radius: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: none;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .group-section > summary {
  background: transparent !important;
  border-bottom-color: var(--border-color);
}
.group-section > summary:hover {
  color: var(--accent-burgundy);
}
.group-section > summary::-webkit-details-marker { display: none; }
.group-section > summary::marker { content: ''; }
.group-section.group-spelling > summary {
  background: transparent !important;
}
.group-section.group-rules > summary {
  background: transparent !important;
}
.group-section.group-ai > summary {
  background: transparent !important;
}
[data-theme="dark"] .group-section.group-spelling > summary,
[data-theme="dark"] .group-section.group-rules > summary,
[data-theme="dark"] .group-section.group-ai > summary {
  background: transparent !important;
}
.group-section > summary .chevron-icon {
  font-size: 0.75rem;
  transition: transform var(--transition-base);
  color: var(--text-tertiary);
}
.group-section[open] > summary .chevron-icon {
  transform: rotate(90deg);
}
.group-section > summary .group-count {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-ink-faint);
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.group-desc {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.group-icon {
  font-size: 1.1rem;
  opacity: 0.7;
}

.cat-section { margin: var(--element-gap) 0 var(--element-gap) 0; }
.cat-section > summary {
  cursor: pointer;
  padding: var(--space-2) 0;
  border-radius: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  transition: color var(--transition-fast);
}
.cat-section > summary::-webkit-details-marker { display: none; }
.cat-section > summary::marker { content: ''; }
.cat-section > summary:hover { color: var(--accent-burgundy); background: transparent; }
.cat-section > summary .chevron-icon {
  font-size: var(--text-xs);
  transition: transform var(--transition-base);
  color: var(--text-tertiary);
}
.cat-section[open] > summary .chevron-icon {
  transform: rotate(90deg);
}
.cat-section > summary .cat-count {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* ===== Issue Cards — Editorial v3 ===== */
.issue-cards {
  padding: var(--space-4) 0;
  border-left: none;
  margin-left: 0;
}
.issue-card {
  border: none !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  border-left: 3px solid var(--color-gray) !important;
  border-radius: 0 !important;
  margin-bottom: 0;
  overflow: hidden;
  box-shadow: none;
  transition: all var(--transition-base);
  background: transparent !important;
  padding-left: var(--space-4);
}
[data-theme="dark"] .issue-card {
  background: transparent !important;
}
.issue-card:hover {
  background: var(--bg-paper-alt) !important;
  box-shadow: none;
  transform: none;
}
/* Active / selected state */
.issue-card.issue-active {
  border-left: 3px solid var(--accent-navy) !important;
  background: var(--bg-navy-light) !important;
}
.issue-card[data-severity="HIGH"] {
  border-left: 3px solid var(--color-red) !important;
}
.issue-card[data-severity="MEDIUM"] {
  border-left: 3px solid var(--color-amber) !important;
}
.issue-card[data-severity="LOW"] {
  border-left: 3px solid var(--color-gray) !important;
}
/* Resolution outcome states */
.issue-card.res-accepted { border-left: 4px solid #28a745 !important; }
.resolution-btn-group { display: inline-flex; gap: 4px; margin-left: auto; }
.res-feedback {
  font-size: 0.72rem; color: var(--color-green, #2b8a3e); font-weight: 600;
  margin-left: 6px; transition: opacity 0.3s;
}
.res-btn {
  border: none; background: transparent; border-radius: 0;
  padding: 2px 6px; cursor: pointer; font-size: 0.8rem; color: var(--text-ink-faint);
  transition: all 0.15s; line-height: 1.4; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-sans); font-weight: 500;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px;
}
.res-btn:hover { background: transparent; color: var(--accent-navy); text-decoration-color: var(--accent-navy); }
.res-accept.active { color: #28a745; border-color: #28a745; background: #d4edda; }
.res-dismiss.active { color: #6c757d; border-color: #6c757d; background: #e2e3e5; }
[data-theme="dark"] .res-accept.active { background: #1a3d1f; }
[data-theme="dark"] .res-dismiss.active { background: #2d2d2d; }
.issue-note-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
}
.issue-note-input {
  width: 100%; resize: vertical; min-height: 36px; max-height: 100px;
  padding: 6px 8px; font-size: 0.78rem; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); background: var(--surface-0);
  color: var(--text-primary); font-family: inherit; line-height: 1.4;
}
.issue-note-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(27, 58, 92, 0.15); }
.issue-note-input::placeholder { color: var(--text-tertiary); font-style: italic; }
.issue-note-saved { font-size: 0.7rem; color: var(--text-tertiary); margin-left: 6px; opacity: 0; transition: opacity 0.3s; }
.issue-note-saved.visible { opacity: 1; }
.issue-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  padding: var(--element-gap) var(--space-4) var(--element-gap) 0;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background var(--transition-fast);
}
.issue-card-header:hover { background: transparent !important; }
.issue-card-header .page-num {
  font-weight: 600;
  flex-shrink: 0;
  font-size: 0.75rem;
  background: var(--surface-2);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.ic-page {
  background: var(--surface-2);
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  font-weight: 600;
}
.ic-category {
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  flex-shrink: 0;
}
.ic-category-pill {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  white-space: nowrap;
  border: 1px solid currentColor;
  background: transparent;
  opacity: 0.7;
}
.ic-desc {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
}
.ic-chevron {
  flex-shrink: 0;
  opacity: 0.5;
  font-size: 0.85rem;
  color: var(--text-tertiary);
  transition: transform 0.2s ease, opacity 0.15s;
  margin-left: auto;
}
.issue-card-header:hover .ic-chevron { opacity: 0.8; }
.issue-card-header[aria-expanded="true"] .ic-chevron { transform: rotate(180deg); }
.issue-card-details {
  display: none;
  padding: var(--space-4) 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
  border-left: none;
  font-size: 0.85rem;
}
.issue-card-details.open { display: block; animation: detailsSlideIn 0.2s ease; }
.issue-full-desc {
  font-family: var(--font-sans);
  font-size: var(--text-base); line-height: 1.7; color: var(--text-ink);
  margin-bottom: var(--element-gap); word-break: break-word;
  font-weight: 400;
}
/* Expanded card sections */
.icd-section { margin-bottom: 12px; }
.icd-label {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-ink-faint);
  margin-bottom: 6px;
}
.icd-source {
  border-left: 2px solid var(--surface-3, var(--border-color));
  padding-left: 12px;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.85rem;
}
.icd-turkish {
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 0.88rem;
}
.icd-diff {
  font-size: 0.88rem;
  line-height: 1.6;
}
.icd-diff .diff-old {
  color: var(--color-red);
  text-decoration: line-through;
}
.icd-diff .diff-arrow {
  color: var(--text-tertiary);
  margin: 0 6px;
}
.icd-diff .diff-new {
  color: var(--color-green);
  font-weight: 500;
}
.icd-suggestion-text {
  color: var(--text-primary);
  font-size: 0.88rem;
  line-height: 1.6;
  background: var(--color-green-50, rgba(40, 167, 69, 0.05));
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-green-border, rgba(40, 167, 69, 0.15));
}
.icd-explanation {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.icd-also-pages {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-top: 8px;
  padding: 4px 8px;
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 4px;
  display: inline-block;
}
.icd-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.icd-footer-left { display: flex; align-items: center; gap: 8px; }
.icd-footer-right { display: flex; align-items: center; gap: 8px; }
.gs-footer-btn {
  border: 1px solid var(--border-color);
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.gs-footer-btn:hover { background: var(--surface-2); }
.gs-footer-btn.saved { color: var(--color-green); border-color: var(--color-green); cursor: default; }
@keyframes detailsSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.flat-page-header {
  font-size: 0.78rem; font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 12px 0 4px; margin-top: 8px;
  border-bottom: 1px solid var(--border-color);
}
.issue-card-details dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 0.7rem;
  margin-top: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}
.issue-card-details dt:first-child { margin-top: 0; }
.issue-card-details dt i {
  font-size: 0.9rem;
  opacity: 0.7;
}
.issue-card-details dd {
  margin: var(--space-2) 0 var(--space-3) 0;
  word-break: break-word;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--surface-0);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  line-height: 1.6;
  color: var(--text-primary);
}
.issue-card-details dd.suggestion-dd {
  background: var(--color-green-50);
  border-color: var(--color-green-border);
}
.issue-card-details dd.ai-explanation-dd {
  background: var(--surface-1);
  font-family: var(--font-sans);
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.issue-card-details dd.ai-explanation-dd::before {
  content: '\f4b8';
  font-family: 'bootstrap-icons';
  color: var(--color-green);
  flex-shrink: 0;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-left: auto;
}
.load-more-global {
  display: flex;
  justify-content: center;
  margin: var(--space-6) 0;
}
.load-more-global button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.load-more-global button:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}
.load-more-global button:active {
  transform: translateY(0);
}
.show-more-btn {
  display: block;
  margin: var(--space-2) 0 var(--space-2) var(--space-6);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--primary);
  background: none;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  transition: all var(--transition-fast);
}
.show-more-btn:hover { background: var(--primary-50); border-color: var(--primary); }
.showing-count {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* ===== Scroll to Top Button ===== */
.scroll-top-btn {
  position: fixed;
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  right: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  z-index: 100;
  transition: transform 0.2s, opacity 0.2s;
}
.scroll-top-btn:hover { transform: scale(1.1); }
.scroll-top-btn.visible { display: flex; }
@media (max-width: 640px) {
  .scroll-top-btn { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); right: 1rem; }
}

/* ===== Chapter Info Panel — editorial inline ===== */
.chapter-info-panel {
  margin-top: var(--space-4);
  padding: var(--space-3) 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--border-hairline);
  font-size: 0.85rem;
  font-family: var(--font-sans);
  background: transparent;
}
.chapter-info-panel.has-warning {
  border-left: 2px solid var(--color-amber);
  padding-left: var(--space-4);
  background: transparent;
}
.chapter-info-panel .chapter-warning {
  color: var(--color-amber);
  font-weight: 500;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.chapter-info-panel .chapter-scope {
  color: var(--text-ink-soft);
  font-weight: 500;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.chapter-info-panel .chapter-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.chapter-info-panel .ch-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 0.7rem;
  border: 1px solid var(--border-hairline);
  background: transparent;
  color: var(--text-ink-faint);
  letter-spacing: 0.02em;
}
.chapter-info-panel .ch-tag.matched {
  border-color: var(--accent-navy);
  background: transparent;
  font-weight: 600;
  color: var(--accent-navy);
}

/* ===== Scope Banner - Clean Paper v2.1 ===== */
.scope-banner {
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--color-gray);
  background: #ffffff !important;
  font-size: 0.9rem;
  color: var(--text-primary);
}
[data-theme="dark"] .scope-banner {
  background: #1e1f21 !important;
}
.scope-banner.warning {
  border-color: var(--color-amber);
  border-left-color: var(--color-amber);
  background: #fffbeb !important;
  color: var(--color-amber);
}

/* ===== Export / Action Buttons ===== */
.export-buttons {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.export-buttons button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.export-buttons button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.export-buttons button:active {
  transform: translateY(0);
}
.export-buttons button.primary-export {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.export-buttons button.primary-export:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.export-buttons button.ghost-export {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.export-buttons button.ghost-export:hover {
  background: var(--surface-1);
  color: var(--text-primary);
}

/* ===== Redesigned Header ===== */
.back-link {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  font-size: 0.95rem; padding: 6px 0;
}
.back-link:hover { color: var(--text-primary); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.export-dropdown { position: relative; }
.export-dropdown-menu {
  display: none; position: absolute; top: 100%; right: 0; z-index: 50;
  background: var(--surface-0); border: 1px solid var(--border-color); border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 4px 16px rgba(0,0,0,0.3)); min-width: 220px; padding: 4px 0;
  margin-top: 4px;
}
.export-dropdown-menu.open { display: block; }
.export-dropdown-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px;
  border: none; background: none; color: var(--text-primary); cursor: pointer;
  font-size: 0.9rem; text-align: left;
}
.export-dropdown-menu button:hover { background: var(--surface-1); }
.export-dropdown-menu button[style*="display: none"],
.export-dropdown-menu button[style*="display:none"] { display: none !important; }
.export-chevron-sm { font-size: 0.7rem; }
.pv-btn { font-weight: 600; }

/* ===== Proof View ===== */
#proof-view {
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface-0);
}
.proof-view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);
  flex-wrap: wrap;
  gap: var(--space-3);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.proof-view-header-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}
.proof-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.proof-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* Nav icon buttons — small square pill */
.proof-nav > button.outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  border: 1px solid var(--border-color);
  background: var(--surface-0);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.proof-nav > button.outline kbd {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  color: var(--text-ink-faint);
  background: var(--bg-paper-alt);
  border: 1px solid var(--border-hairline);
  border-radius: 2px;
  padding: 1px 4px;
  line-height: 1;
}
.proof-nav > button.outline:hover {
  background: var(--surface-2);
  border-color: var(--border-color-hover);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}
/* Action buttons — pill with icon+label */
.proof-nav-actions > button.outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
  background: var(--surface-0);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.proof-nav-actions > button.outline:hover {
  background: var(--surface-2);
  border-color: var(--border-color-hover);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}
/* Dismiss button: green accent on hover */
#pv-dismiss:hover {
  background: var(--color-green-50) !important;
  border-color: var(--color-green-border) !important;
  color: var(--color-green) !important;
}
/* Close button: no special accent — stays neutral */
#pv-counter {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  text-align: center;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.pv-issue-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--transition-fast);
}
/* Category badge color variants */
.pv-issue-badge--meaning {
  background: rgba(19, 115, 232, 0.15);
  color: #1373e8;
}
.pv-issue-badge--added {
  background: rgba(248, 100, 100, 0.15);
  color: #f86464;
}
.pv-issue-badge--missing {
  background: rgba(251, 191, 36, 0.18);
  color: #b45309;
}
.pv-issue-badge--default {
  background: var(--surface-3);
  color: var(--text-secondary);
}
[data-theme="dark"] .pv-issue-badge--meaning { color: #60a5fa; background: rgba(96, 165, 250, 0.15); }
[data-theme="dark"] .pv-issue-badge--added   { color: #f87171; background: rgba(248, 113, 113, 0.15); }
[data-theme="dark"] .pv-issue-badge--missing { color: #fbbf24; background: rgba(251, 191, 36, 0.15); }
.pv-issue-detail {
  padding: var(--space-3) var(--space-5);
  background: var(--surface-0);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.88rem;
  line-height: 1.6;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  color: var(--text-secondary);
}
.pv-issue-detail strong {
  color: var(--text-primary);
  font-style: italic;
}
.pv-issue-detail em {
  color: var(--primary);
  font-style: italic;
}
.proof-panels-wrapper {
  display: contents;
}
.proof-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.proof-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-0);
}
.proof-panel.proof-panel-en {
  border-right: 1px solid var(--border-color);
}
.proof-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-1);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.proof-panel-header .panel-lang {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
}
.proof-panel-header .panel-lang i {
  font-size: 0.85rem;
  color: var(--primary);
}
.proof-panel-header .panel-page {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
  background: var(--surface-2);
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}
/* Legacy: keep .proof-panel-title for JS-rendered page title elements */
.proof-panel-title {
  display: none; /* replaced by .proof-panel-header */
}
.proof-panel-content {
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.85;
  max-height: 70vh;
  color: var(--text-primary);
  scroll-behavior: smooth;
}
/* Scrollbar styling */
.proof-panel-content::-webkit-scrollbar {
  width: 5px;
}
.proof-panel-content::-webkit-scrollbar-track {
  background: transparent;
}
.proof-panel-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-full);
}
.proof-panel-content::-webkit-scrollbar-thumb:hover {
  background: var(--border-color-hover);
}
.proof-page { margin-bottom: var(--space-5); }
.proof-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-color);
}
.proof-page-header::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.8em;
  background: var(--primary);
  border-radius: var(--radius-full);
  opacity: 0.6;
  flex-shrink: 0;
}
.proof-page-text {
  word-break: break-word;
  line-height: 1.75;
  font-size: 0.95rem;
}
.proof-ellipsis {
  color: var(--text-tertiary);
  font-style: italic;
  user-select: none;
}
.proof-quote-fallback {
  font-size: 1rem;
  line-height: 1.6;
  padding: var(--space-3) 0;
}
.proof-quote-note {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  font-style: italic;
  margin-top: var(--space-2);
}
/* Highlight base */
.issue-highlight {
  border-radius: 3px;
  border-bottom: 2px solid var(--color-amber);
  background: rgba(251, 191, 36, 0.18);
  cursor: pointer;
  padding: 0 1px;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.issue-highlight:hover {
  background: rgba(251, 191, 36, 0.35);
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.25);
}
/* Meaning / Style / Tense / Idiom / Register / Localization */
.issue-highlight--meaning {
  border-bottom-color: #1373e8;
  background: rgba(19, 115, 232, 0.1);
}
.issue-highlight--meaning:hover {
  background: rgba(19, 115, 232, 0.22);
  box-shadow: 0 2px 8px rgba(19, 115, 232, 0.2);
}
/* Added */
.issue-highlight--added {
  border-bottom-color: #f86464;
  background: rgba(248, 100, 100, 0.1);
}
.issue-highlight--added:hover {
  background: rgba(248, 100, 100, 0.22);
  box-shadow: 0 2px 8px rgba(248, 100, 100, 0.2);
}
/* Missing / Untranslated / Consistency */
.issue-highlight--missing {
  border-bottom-color: #e8a800;
  background: rgba(251, 191, 36, 0.15);
}
.issue-highlight--missing:hover {
  background: rgba(251, 191, 36, 0.3);
  box-shadow: 0 2px 8px rgba(232, 168, 0, 0.2);
}
[data-theme="dark"] .issue-highlight         { background: rgba(251, 191, 36, 0.12); }
[data-theme="dark"] .issue-highlight:hover   { background: rgba(251, 191, 36, 0.22); }
[data-theme="dark"] .issue-highlight--meaning         { background: rgba(96, 165, 250, 0.12); border-bottom-color: #60a5fa; }
[data-theme="dark"] .issue-highlight--meaning:hover   { background: rgba(96, 165, 250, 0.22); }
[data-theme="dark"] .issue-highlight--added           { background: rgba(248, 113, 113, 0.12); border-bottom-color: #f87171; }
[data-theme="dark"] .issue-highlight--added:hover     { background: rgba(248, 113, 113, 0.22); }
[data-theme="dark"] .issue-highlight--missing         { background: rgba(251, 191, 36, 0.1); border-bottom-color: #fbbf24; }
[data-theme="dark"] .issue-highlight--missing:hover   { background: rgba(251, 191, 36, 0.2); }
@media (max-width: 768px) {
  .proof-panels { grid-template-columns: 1fr; }
  .proof-panel.proof-panel-en { border-right: none; border-bottom: 1px solid var(--border-color); }
  .proof-panel-content { max-height: 40vh; }
  .proof-view-header { padding: var(--space-3) var(--space-3); }
  .pv-issue-detail { padding: var(--space-2) var(--space-3); }
}

/* ===== Results Header ===== */
.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.results-header h2 { margin: 0; }

/* ===== Upload Progress ===== */
.upload-status {
  margin-top: var(--space-6);
  display: none;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-hairline);
}
.upload-status.active { display: block; }
.upload-status progress {
  margin-bottom: var(--space-2);
}
.upload-status .upload-label {
  font-size: 0.8125rem;
  color: var(--text-ink-faint);
  font-style: italic;
}
.upload-cancel-btn {
  margin-top: var(--space-2);
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.upload-cancel-btn:hover {
  background: var(--danger);
  color: white;
}

/* Job cancel button states */
#btn-cancel.cancelling {
  opacity: 0.7;
  cursor: not-allowed;
}
#btn-cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== File Error ===== */
.file-error {
  color: var(--color-red);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: var(--space-1);
  display: none;
}
.file-error.visible { display: block; }

/* ===== Job Error Banner ===== */
.job-error-banner {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-red-50);
  border: 2px solid var(--color-red);
  border-radius: var(--radius-md);
  color: var(--color-red);
  font-weight: 600;
  font-size: var(--text-base);
  animation: errorShake 0.5s ease;
}
.job-error-banner.visible {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.job-error-banner i {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.job-error-banner .error-content {
  flex: 1;
}
.job-error-banner .error-title {
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.job-error-banner .error-message {
  font-weight: 500;
  line-height: 1.5;
}
.job-error-banner .error-action {
  margin-top: var(--space-3);
}
.job-error-banner .error-action a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-red);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.job-error-banner .error-action a:hover {
  background: #c92a2a;
}
.job-error-banner .dismiss-error {
  background: none;
  border: none;
  color: var(--color-red);
  cursor: pointer;
  padding: var(--space-1);
  font-size: 1.25rem;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}
.job-error-banner .dismiss-error:hover {
  opacity: 1;
}
@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}
[data-theme="dark"] .job-error-banner {
  background: rgba(248, 113, 113, 0.1);
  border-color: var(--color-red);
}

/* ===== Upload Run Button — Editorial CTA ===== */
#btn-run,
.upload-submit-btn,
#start-analysis-btn {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--text-sm) !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  color: #fff !important;
  background: var(--accent-burgundy) !important;
  background-image: none !important;
  border: 1px solid var(--accent-burgundy) !important;
  padding: 14px 48px !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  transition: background var(--transition-base), opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-base) !important;
  display: inline-flex !important;
  width: auto !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  margin: var(--space-10, 40px) 0 0 0 !important;
  box-shadow: 0 1px 3px rgba(139, 37, 0, 0.12) !important;
}
#btn-run:hover:not(:disabled),
.upload-submit-btn:hover,
#start-analysis-btn:hover {
  background: var(--accent-burgundy-hover) !important;
  border-color: var(--accent-burgundy-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(139, 37, 0, 0.18) !important;
}
#btn-run:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  filter: none !important;
  box-shadow: none !important;
}
#btn-run:not(:disabled) {
  animation: btn-ready 600ms ease both !important;
}
@keyframes btn-ready {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Language Warning Banner ===== */
.language-warning-banner {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-amber-50);
  border: 2px solid var(--color-amber);
  border-radius: var(--radius-md);
  color: var(--color-amber);
  font-weight: 600;
  font-size: var(--text-base);
  animation: warningPulse 2s ease infinite;
}
.language-warning-banner.visible {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.language-warning-banner > i {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.language-warning-banner .warning-content {
  flex: 1;
}
.language-warning-banner .warning-title {
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.language-warning-banner .warning-message {
  font-weight: 500;
  line-height: 1.5;
}
.language-warning-banner .dismiss-warning {
  background: none;
  border: none;
  color: var(--color-amber);
  cursor: pointer;
  padding: var(--space-1);
  font-size: 1.25rem;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}
.language-warning-banner .dismiss-warning:hover {
  opacity: 1;
}
@keyframes warningPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 119, 0, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(230, 119, 0, 0); }
}
[data-theme="dark"] .language-warning-banner {
  background: rgba(251, 191, 36, 0.1);
  border-color: var(--color-amber);
}

/* ===== Admin Panel ===== */
.admin-panel {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6);
}
.admin-panel h1 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}
.admin-subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.admin-stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}
.admin-stat-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary);
}
.admin-stat-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.admin-table-container {
  overflow-x: auto;
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  table-layout: auto;
}
.admin-users-table th,
.admin-users-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}
.admin-users-table th {
  background: var(--surface-1);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-users-table tbody tr:hover {
  background: var(--surface-1);
}
.admin-users-table .user-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-users-table .user-email {
  font-weight: 500;
}
.admin-users-table .user-name {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.admin-users-table .user-badges {
  display: flex;
  gap: var(--space-1);
  margin-top: 2px;
}
.admin-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-weight: 600;
}
.admin-badge.admin { background: var(--color-red-50); color: var(--color-red); }
.admin-badge.verified { background: var(--color-green-50); color: var(--color-green); }
.admin-badge.unverified { background: var(--color-amber-50); color: var(--color-amber); }
.tier-select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  font-size: var(--text-sm);
  cursor: pointer;
}
.tier-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-50);
}
/* Admin panel usage - simple text display */
.admin-usage {
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #22c55e;
}
.admin-usage.amber {
  color: #f59e0b;
}
.admin-usage.red {
  color: #ef4444;
}
.admin-usage.zero {
  color: #6b7280;
  font-weight: 400;
  font-style: italic;
}
.admin-actions {
  display: flex;
  gap: var(--space-2);
}
.admin-btn {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  font-size: var(--text-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
}
.admin-btn:hover {
  background: var(--surface-1);
  border-color: var(--border-color-hover);
}
.admin-btn.danger {
  color: var(--color-red);
}
.admin-btn.danger:hover {
  background: var(--color-red-50);
  border-color: var(--color-red);
}
.loading-row {
  text-align: center;
  color: var(--text-tertiary);
  padding: var(--space-8) !important;
}
[data-theme="dark"] .admin-users-table th {
  background: var(--surface-2);
}

/* ===== Dismissed Flags ===== */
.issue-card.dismissed {
  opacity: 0.6;
  background: var(--surface-1);
  border-color: rgba(0,0,0,0.06);
}
.dismiss-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-tertiary);
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
}
.dismiss-btn:hover { color: var(--color-red); background: var(--color-red-50); }
.issue-card.dismissed .dismiss-btn { color: var(--primary); }
.issue-card.dismissed .dismiss-btn:hover { background: var(--primary-50); }

/* Keyboard hint badge */
.kbd-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--font-mono);
  padding: 0.1rem 0.3rem;
  margin-left: var(--space-1);
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  color: var(--text-tertiary);
  line-height: 1;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.issue-card:hover .kbd-hint,
.issue-card:focus-within .kbd-hint {
  opacity: 1;
}

/* ===== Extraction Warning Banner ===== */
.extraction-banner {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-amber-border);
  border-left: 4px solid var(--color-amber);
  background: var(--color-amber-50);
  color: var(--color-amber);
  font-size: 0.85rem;
  font-weight: 500;
}

/* ===== Show-Dismissed Filter ===== */
.filter-dismissed-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.filter-dismissed-row input { width: auto; margin: 0; }

/* ===== Collapsible Filter Bar ===== */
.filter-search-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.filter-search-row .search-box {
  flex: 1;
}
.filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.filter-toggle-btn:hover {
  background: var(--surface-2);
  color: var(--text-primary);
  transform: none;
  box-shadow: none;
}
.filter-toggle-btn .filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--color-on-primary);
  font-size: 0.7rem;
  font-weight: 700;
}
.filter-toggle-btn .filter-badge:empty {
  display: none;
}
.filter-toggle-btn .bi-chevron-down {
  transition: transform 0.25s ease;
  font-size: 0.75rem;
}
.filter-toggle-btn.expanded .bi-chevron-down {
  transform: rotate(180deg);
}
.filter-collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.filter-collapsible.expanded {
  max-height: 200px;
}

/* ===== Quick-Filter Confidence Chips ===== */
.quick-filters {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  flex-wrap: wrap;
}
.quick-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}
.quick-chip.chip-high {
  background: var(--color-red-50, #fef2f2);
  color: var(--color-red, #dc2626);
  border-color: var(--color-red-50, #fef2f2);
}
.quick-chip.chip-high.active,
.quick-chip.chip-high:hover {
  border-color: var(--color-red, #dc2626);
  background: var(--color-red-50, #fef2f2);
}
.quick-chip.chip-medium {
  background: var(--color-amber-50, #fffbeb);
  color: var(--color-amber, #d97706);
  border-color: var(--color-amber-50, #fffbeb);
}
.quick-chip.chip-medium.active,
.quick-chip.chip-medium:hover {
  border-color: var(--color-amber, #d97706);
  background: var(--color-amber-50, #fffbeb);
}
.quick-chip.chip-low {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--surface-2);
}
.quick-chip.chip-low.active,
.quick-chip.chip-low:hover {
  border-color: var(--text-secondary);
}
.chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.3em; height: 1.3em;
  padding: 0 0.3em; border-radius: var(--radius-full);
  font-size: 0.75em; font-weight: 700;
  background: rgba(0,0,0,0.08); line-height: 1;
}
[data-theme="dark"] .chip-count { background: rgba(255,255,255,0.12); }

/* ===== Undo Toast ===== */
.undo-toast {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  background: var(--text-primary);
  color: var(--surface-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: 1000;
  box-shadow: var(--shadow-lg);
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.undo-toast.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.undo-toast .undo-btn {
  background: transparent;
  color: var(--primary-light, #60a5fa);
  border: none;
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.undo-toast .undo-btn:hover {
  color: #fff;
}

/* ===== Analysis Insights Card ===== */
.insights-card {
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
}
.insights-card h3 {
  font-size: var(--text-md);
  font-weight: 600;
  margin: 0 0 var(--space-3) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
}
.insights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.insights-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.insights-list li i {
  color: var(--primary);
  flex-shrink: 0;
  font-size: 0.85rem;
}

/* ===== Buttons — Unified Hover ===== */
button, [role="button"] {
  transition: all var(--transition-fast);
}
button:hover:not(:disabled), [role="button"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
button:active:not(:disabled), [role="button"]:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

/* ===== Focus Visible ===== */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--primary-50);
}
.drop-zone:focus-visible {
  outline: 2px solid var(--accent-navy);
  outline-offset: 2px;
  border-color: var(--accent-navy);
  border-style: solid;
}
select:focus-visible, input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
/* Headings focused programmatically for screen readers should not show outline */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus {
  outline: none;
}

/* ===== Articles — App views only ===== */
/* Landing page uses the Pico reset above. This targets upload/progress cards. */
#view-upload article,
#view-progress article,
#view-account article {
  background: var(--surface-0);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.03);
  transition: box-shadow var(--transition-base);
}
#view-results > article {
  padding: var(--element-gap) var(--space-6);
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
#view-results > article:hover {
  box-shadow: none !important;
}
#view-upload article:hover,
#view-account article:hover {
  box-shadow: var(--shadow-lg);
}
#view-progress article:hover {
  box-shadow: none !important;
}
article h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Details/Summary inside articles — expandable sections - Clean Paper v2.1 */
article > details {
  margin-top: var(--space-4);
}
article > details > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: #ffffff !important;
  cursor: pointer;
  transition: all var(--transition-fast);
  list-style: none;
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}
[data-theme="dark"] article > details > summary {
  background: #1e1f21 !important;
}
article > details > summary::-webkit-details-marker { display: none; }
article > details > summary::marker { content: ''; }
article > details > summary::before {
  content: '\F285';
  font-family: 'bootstrap-icons';
  font-size: 0.7rem;
  color: var(--text-tertiary);
  transition: transform var(--transition-fast);
}
article > details[open] > summary::before {
  transform: rotate(90deg);
}
article > details > summary:hover {
  border-color: var(--border-color-hover);
  background: var(--surface-1);
  color: var(--text-primary);
}
article > details > summary small {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
article > details[open] > summary {
  border-color: var(--border-color);
  background: var(--surface-0);
  margin-bottom: var(--space-3);
}

/* ===== Empty States ===== */
.empty-state-perfect {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}
.empty-state-perfect i {
  font-size: 4rem;
  color: var(--color-green);
  display: block;
  margin-bottom: var(--space-4);
}
.empty-state-perfect h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--color-green);
}
.empty-state-perfect p {
  color: var(--text-secondary);
  max-width: 400px;
  margin: 0 auto;
}

/* ===== Footer ===== */
/* === Footer — Colophon === */
.site-footer {
  margin-top: auto;
}
.footer-cta {
  background: var(--bg-navy);
  padding: var(--section-gap) clamp(24px, 5vw, 80px);
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  position: relative;
}
.footer-cta::before {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: rgba(255,255,255,0.2);
  margin: 0 auto var(--space-12);
}
.footer-cta-inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.footer-cta h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 var(--space-4);
}
.footer-cta p {
  color: rgba(255,255,255,0.5);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  margin: 0 0 var(--space-10, 40px);
  line-height: 1.7;
}
.footer-cta-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: #FFFFFF;
  background: var(--accent-burgundy);
  border: none;
  padding: 14px var(--space-10, 40px);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.footer-cta-btn:hover {
  background: var(--accent-burgundy-hover);
  transform: translateY(-1px);
}
.footer-colophon {
  background: var(--bg-navy);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 60px clamp(1.5rem, 5vw, 4rem) 48px;
  border-radius: 0;
  width: 100%;
}
.footer-colophon-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.3);
  margin: 0 0 var(--space-1);
  text-transform: uppercase;
}
.footer-col a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-col a:hover { color: rgba(255,255,255,0.95); }
.footer-wordmark {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.02em;
}
.footer-col-brand p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
  margin: 0;
  max-width: 260px;
  line-height: 1.7;
}
.footer-lang {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  padding: 6px 14px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.footer-lang:hover {
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.25);
}
.footer-bottom {
  max-width: var(--container-max);
  margin: 40px auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.2);
  font-size: var(--text-xs);
  text-align: center;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .footer-cta { padding: var(--space-16) var(--space-4); }
  .footer-cta h2 { font-size: 1.5rem; }
  .footer-colophon-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-6);
  }
}
@media (max-width: 480px) {
  .footer-colophon-inner {
    grid-template-columns: 1fr;
  }
}
/* .hero-cta-note removed — editorial redesign */
.pricing-book-equiv {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ===== Cookie Consent Banner ===== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-paper);
  border-top: 1px solid var(--border-hairline);
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  z-index: 9999;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  animation: slideUp 0.3s ease;
  font-family: var(--font-sans);
}
[data-theme="dark"] .cookie-banner {
  background: #1a1a1d;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.cookie-banner.hidden {
  display: none;
}
.cookie-banner-text {
  flex: 1;
  min-width: 280px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.cookie-banner-text a {
  color: var(--primary);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.cookie-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}
.cookie-btn.accept {
  background: var(--primary);
  color: white;
}
.cookie-btn.accept:hover {
  background: var(--primary-hover);
}
.cookie-btn.reject {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.cookie-btn.reject:hover {
  background: var(--surface-1);
}

/* ===== Legal Pages ===== */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}
.legal-back-link {
  display: inline-block;
  margin-bottom: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.legal-back-link:hover {
  color: var(--primary);
}
.legal-page h1 {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}
.legal-date {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-8);
}
.legal-content h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}
.legal-content h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}
.legal-content p {
  margin-bottom: var(--space-4);
  line-height: 1.7;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.legal-content ul,
.legal-content ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}
.legal-content li {
  margin-bottom: var(--space-2);
  line-height: 1.6;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}
.legal-content th,
.legal-content td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  text-align: left;
}
.legal-content th {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--text-primary);
}
.legal-content td {
  color: var(--text-secondary);
}
.legal-content a {
  color: var(--primary);
  text-decoration: none;
}
.legal-content a:hover {
  text-decoration: underline;
}
[data-theme="dark"] .legal-content th {
  background: var(--surface-3);
}
@media (max-width: 600px) {
  .legal-page {
    padding: var(--space-6) var(--space-3);
  }
  .legal-page h1 {
    font-size: var(--text-xl);
  }
  .legal-content table {
    display: block;
    overflow-x: auto;
  }
  .footer-business-info {
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
  }
}

/* ===== Utility ===== */
.mb-1 { margin-bottom: var(--space-4); }
.mt-1 { margin-top: var(--space-4); }
.text-muted { color: var(--text-tertiary); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== Mobile: Tablet ===== */
@media (max-width: 768px) {
  .summary-cards {
    flex-wrap: wrap;
  }
  .summary-card {
    flex: 1 1 calc(50% - var(--space-2));
    min-width: 100px;
  }
  .check-cards {
    gap: var(--space-1);
  }
  .cat-bar-label {
    width: 80px;
    font-size: var(--text-xs);
  }
  .filter-row {
    flex-direction: column;
  }
  .filter-row > select {
    min-width: 100%;
  }
  .export-buttons {
    flex-direction: column;
  }
  .export-buttons button {
    width: 100%;
    justify-content: center;
  }
  .results-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== Mobile: Phone ===== */
@media (max-width: 480px) {
  .cat-bar-row {
    flex-wrap: wrap;
  }
  .cat-bar-label {
    width: 100%;
    text-align: left;
    padding-right: 0;
    margin-bottom: var(--space-1);
  }
  .summary-card .count {
    font-size: 1.5rem;
  }
  .issue-card-header {
    padding: var(--space-2) var(--space-3);
  }
  .step-cards {
    padding-left: 10px;
  }
  .step-card {
    padding: var(--space-3);
    gap: var(--space-3);
  }
  .step-card .step-status {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }
  .drop-zone {
    min-height: 120px;
    padding: 36px 24px;
  }
  .drop-zone .drop-icon {
    font-size: 2rem;
  }
  .welcome-section-inner {
    padding: var(--space-6) var(--space-3);
  }
  .breadcrumb-nav {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    gap: var(--space-2);
  }
  .breadcrumb-step {
    padding: var(--space-1) var(--space-2);
  }
}

/* ===== Animated Number Counters ===== */
.count[data-target] {
  font-variant-numeric: tabular-nums;
}


/* ===== Confetti / Celebration ===== */
.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: celebFadeIn 0.3s ease;
}
.celebration-overlay.hiding {
  animation: celebFadeOut 0.4s ease forwards;
}
@keyframes celebFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes celebFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.celebration-message {
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-12);
  box-shadow: var(--shadow-xl);
  text-align: center;
  pointer-events: auto;
}
.celebration-message .celeb-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
  display: block;
}
.celebration-message .celeb-text {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
}
.confetti-particle {
  position: fixed;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 10000;
  animation: confettiFall var(--fall-duration, 2.5s) ease-in forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100vh) rotate(var(--rotate-end, 720deg)); opacity: 0; }
}

/* === Progress View — Calm Editorial === */
.queue-container {
  text-align: center;
  padding: var(--space-10) 0;
}
.queue-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-hairline);
  border-radius: 0;
  padding: 0 0 var(--space-8);
  max-width: 520px;
  margin: 0 auto var(--space-6);
  box-shadow: none;
}

/* Hide animated dots — replaced by calm bar */
.queue-visual {
  display: none;
}
.queue-dots,
.queue-dot,
.queue-arrow,
.queue-processor {
  display: none;
}

.queue-position {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--text-ink-faint);
  line-height: 1;
  margin-bottom: var(--space-2);
  letter-spacing: -0.03em;
  animation: progress-shimmer 3s ease-in-out infinite;
}
.queue-hash {
  color: var(--text-ink-faint);
  font-weight: 300;
  opacity: 0.5;
}
.queue-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--text-ink-faint);
  margin-bottom: var(--space-8);
}

/* Thin progress bar track */
.queue-progress {
  width: 100%;
  height: 2px;
  background: var(--border-color);
  border-radius: 1px;
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.queue-progress-bar {
  height: 100%;
  background: var(--accent-navy);
  border-radius: 1px;
  width: 25%;
  transition: width 0.5s ease;
}

.queue-estimate {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-ink-faint);
  margin-bottom: var(--space-6);
  display: block;
}
.queue-wait-value {
  font-weight: 500;
  color: var(--text-ink-soft);
}

/* Show detailed status list in queue */
.queue-status-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  padding: 0;
  margin-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-4);
}
.queue-status-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-ink-faint);
}
.queue-status-item i {
  font-size: 0.75rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.queue-status-item.done { color: var(--accent-green); opacity: 0.7; }
.queue-status-item.active { color: var(--text-ink); font-weight: 500; }
.queue-status-item.pending { opacity: 0.5; }

.queue-notify-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-ink-faint);
  background: none;
  border: 1px solid var(--border-hairline);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-top: var(--space-6);
  transition: all var(--transition-base);
  width: auto;
  display: inline-block;
}
.queue-notify-btn:hover {
  border-color: var(--accent-navy);
  color: var(--accent-navy);
  background: transparent;
}
.queue-notify-btn.enabled {
  border-color: var(--accent-green);
  color: var(--accent-green);
  background: transparent;
  cursor: default;
}

/* Simplify beta notice */
.queue-beta-notice {
  margin-top: var(--space-6);
  padding: var(--space-4) 0 0;
  border-top: none;
  text-align: center;
}
.queue-beta-badge {
  display: none;
}
.queue-beta-notice p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  line-height: 1.7;
  font-style: italic;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

/* FAQ section */
.queue-faq {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}
.queue-faq summary {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--text-ink-faint);
  cursor: pointer;
  padding: var(--space-3) 0;
  border-bottom: none;
  list-style: none;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.queue-faq summary:hover {
  color: var(--text-ink-soft);
  text-decoration-color: currentColor;
}
.queue-faq p {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-ink-soft);
  line-height: 1.6;
}

.spin-slow {
  animation: spin 3s linear infinite;
}

/* Progress ring base rules → overridden by #view-progress scoped rules (~line 12966+) */

/* ===== Run History Panel ===== */
.run-history-panel {
  margin-top: var(--space-4);
}
.run-history-panel > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: var(--space-2) 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.run-history-panel > summary::-webkit-details-marker { display: none; }
.run-history-panel > summary::marker { content: ''; }
.run-history-panel > summary .rh-chevron {
  transition: transform var(--transition-base);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.run-history-panel[open] > summary .rh-chevron {
  transform: rotate(90deg);
}
.run-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.run-history-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--surface-0);
  font-size: var(--text-base);
  transition: all var(--transition-fast);
  cursor: default;
}
.run-history-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
  border-color: var(--primary);
}
.run-history-item .rh-name {
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-history-item .rh-meta {
  color: var(--text-tertiary);
  font-size: 0.75rem;
  white-space: nowrap;
}
.run-history-item .rh-severity {
  display: flex;
  gap: var(--space-1);
}
.run-history-item .rh-sev-dot {
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
}
.rh-sev-dot.high { background: var(--color-red-50); color: var(--color-red); }
.rh-sev-dot.med  { background: var(--color-amber-50); color: var(--color-amber); }
.rh-sev-dot.low  { background: var(--color-gray-50); color: var(--color-gray); }
.rh-clickable { cursor: pointer; transition: background-color 0.15s; }
.rh-clickable:hover { background-color: var(--surface-2, #f0f0f0); }
.rh-action { margin-left: auto; opacity: 0.7; font-size: 0.85em; color: var(--primary); }
.rh-clickable:hover .rh-action { opacity: 1; }
.rh-no-results { opacity: 0.5; }
.ss-archive-banner {
  width: 100%;
  background: var(--color-amber-50, #fff8e1);
  color: var(--color-amber, #b45309);
  border: 1px solid var(--color-amber-border, rgba(251,191,36,0.2));
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.previous-notes-bar {
  background: var(--color-green-50, #d4edda);
  color: var(--color-green, #155724);
  border: 1px solid var(--color-green-border, rgba(74, 222, 128, 0.2));
  padding: 8px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fadeIn 0.3s;
}

/* ===== Issue Card Active Focus (keyboard nav) ===== */
.issue-card.kb-focused {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: var(--shadow-md);
}

/* ===== Keyboard Shortcuts Modal ===== */
.kb-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
  animation: celebFadeIn 0.2s ease;
}
.kb-modal-overlay.open {
  display: flex;
}
.kb-modal {
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  box-shadow: var(--shadow-xl);
  max-width: 420px;
  width: 90%;
}
.kb-modal h3 {
  margin: 0 0 var(--space-4) 0;
  font-size: 1.1rem;
}
.kb-modal .kb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--surface-2);
  font-size: 0.85rem;
}
.kb-modal .kb-row:last-child { border-bottom: none; }
.kb-modal kbd {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  min-width: 24px;
  text-align: center;
}
.kb-modal .kb-action {
  color: var(--text-secondary);
}

/* ===== Keyboard Indicator Button ===== */
.kb-indicator {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--surface-0);
  color: var(--text-secondary);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
}
.kb-indicator:hover {
  background: var(--primary-50);
  color: var(--primary);
  border-color: var(--primary);
}
.kb-indicator.visible {
  display: flex;
}

/* ===== Return Visit Greeting ===== */

/* ===== WELCOME PAGE STYLES ===== */

/* Welcome page animations */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.8) translateY(10px); }
  60% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes highlight {
  0% { background-color: transparent; }
  50% { background-color: var(--color-amber-50); }
  100% { background-color: rgba(255, 169, 77, 0.2); }
}

@keyframes scanLine {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px color-mix(in srgb, var(--cta-primary) 35%, transparent),
                0 0 40px color-mix(in srgb, var(--cta-primary) 12%, transparent);
  }
  50% {
    box-shadow: 0 0 30px color-mix(in srgb, var(--cta-primary) 55%, transparent),
                0 0 60px color-mix(in srgb, var(--cta-primary) 20%, transparent);
  }
}

@keyframes chevronBounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(10px); opacity: 1; }
}

@keyframes errorPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .welcome-section {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Welcome view container — break out of .container to full viewport width */
#view-welcome {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0;
  /* Spec: primary background --bg-paper (#F9F8F6 warm parchment), not pure white */
  background: var(--bg-paper);
  overflow-x: hidden;
}

/* Welcome section base — editorial scroll reveal */
.welcome-section {
  padding: var(--section-gap) clamp(24px, 5vw, 80px);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.welcome-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.welcome-section-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
}

/* === Hero — Editorial === */
.welcome-hero {
  /* Hero manages spacing via .hero-editorial — suppress all base .welcome-section padding */
  padding: 0;
  opacity: 1;
  transform: none;
}
.hero-editorial {
  display: grid;
  /* Spec: asymmetric 60/40 two-column on desktop */
  grid-template-columns: 60% 40%;
  gap: var(--space-16);
  /* align-items: start so mockup sits ~40px lower for editorial asymmetry */
  align-items: start;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-gap) clamp(24px, 5vw, 80px) var(--subsection-gap);
}
.hero-text {
  max-width: 720px;
}
.hero-text h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  /* Mobile default: 48px (40–48px per spec) */
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-ink);
  margin: 0 0 var(--element-gap);
}
@media (min-width: 1024px) {
  .hero-text h1 {
    /* Desktop: 72px per spec */
    font-size: var(--text-4xl);
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
}
.hero-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-lead, 1.125rem);
  color: var(--text-ink-soft);
  line-height: 1.75;
  max-width: 620px;
  margin: 0 0 var(--space-10, 40px);
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.btn-burgundy {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--accent-burgundy);
  border: none;
  padding: 14px var(--space-10, 40px);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}
.btn-burgundy:hover {
  background: var(--accent-burgundy-hover);
  transform: translateY(-1px);
}
.hero-link {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--text-ink-faint);
  text-decoration: none;
  transition: color var(--transition-fast);
  letter-spacing: 0.01em;
}
.hero-link:hover { color: var(--accent-burgundy); }
.hero-link span { transition: transform var(--transition-fast); display: inline-block; }
.hero-link:hover span { transform: translateX(3px); }
.hero-mockup {
  /* Spec: offset ~40px lower than headline for editorial asymmetry */
  padding-top: 40px;
}
.hero-mockup-frame {
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(44,44,44,0.06), 0 24px 64px rgba(44,44,44,0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  transform: none;
  min-width: 360px;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.hero-mockup-frame:hover {
  box-shadow: 0 8px 20px rgba(44,44,44,0.08), 0 32px 80px rgba(44,44,44,0.10);
  transform: translateY(-3px);
}

/* Mock dashboard inside hero */
.mock-dashboard { padding: 0; background: #F9F8F6 !important; }
.mock-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-hairline);
  background: #FFFFFF;
}
.mock-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-ink);
  letter-spacing: -0.01em;
}
.mock-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  letter-spacing: 0.01em;
}
.mock-body { padding: var(--space-5) var(--space-6) var(--space-7); }
.mock-issues { display: flex; flex-direction: column; gap: var(--space-3); }
.mock-issue {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: var(--radius-sm);
}
.mock-issue-badge {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.mock-issue.high .mock-issue-badge {
  color: #8B2500;
  background: #FDF0EC;
}
.mock-issue.medium .mock-issue-badge {
  color: #1B3A5C;
  background: #E8EDF2;
}
.mock-issue-content { flex: 1; min-width: 0; }
.mock-issue-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: #2C2C2C !important;
  margin-bottom: 2px;
}
.mock-issue-desc {
  font-size: var(--text-xs);
  color: #5C5C5C !important;
  line-height: 1.5;
}
.mock-issue-page {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: #737373 !important;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Literary Metric Strip — colophon feel */
.hero-metrics {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) clamp(24px, 5vw, 80px) var(--space-16);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-ink-faint);
  max-width: var(--container-max);
  margin: 0 auto;
  border-top: 1px solid var(--border-hairline);
}
.metric-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-color);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hero-editorial {
    grid-template-columns: 1fr;
    padding: var(--subsection-gap) var(--space-4) var(--space-8);
  }
  .hero-text { max-width: 100%; }
  .hero-text h1 { font-size: 2.5rem; }
  .hero-mockup { padding-top: 0; order: 2; }
  .hero-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .hero-metrics {
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-10);
  }
  .metric-divider { display: none; }
}

/* .welcome-book-visual, .welcome-book, .welcome-book-lines, .welcome-book-line,
   .welcome-problem, .welcome-comparison, .welcome-sample-* removed — orphaned (editorial redesign) */

/* Interactive Demo */
.welcome-demo {
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--surface-0) 40%, var(--surface-1) 100%);
}

.welcome-demo-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-3);
  text-align: center;
}

.welcome-demo-subtitle {
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.welcome-demo-box {
  background: var(--surface-0);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
  display: none;
}
/* Glassmorphism for dark mode - frosted glass effect */
[data-theme="dark"] .welcome-demo-box {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.25);
  border-left-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.welcome-demo-box.active {
  display: block;
}

/* ===== Smart Correction Card - High-fidelity showcase ===== */
.smart-correction-card {
  text-align: left;
  position: relative;
  padding-bottom: 60px;
}
.smart-correction-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.window-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}
.window-dot.red { background: #ff5f57; }
.window-dot.yellow { background: #febc2e; }
.window-dot.green { background: #28c840; }
.smart-correction-status {
  margin-left: auto;
  font-size: 13px;
  color: var(--color-green);
  display: flex;
  align-items: center;
  gap: 6px;
}
.smart-correction-text {
  color: var(--text-primary);
  font-size: 1.15rem;
  line-height: 1.8;
  margin: 0;
}
[data-theme="dark"] .smart-correction-text {
  color: #e2e8f0;
}
.smart-correction-highlight {
  background: rgba(239, 68, 68, 0.15);
  border-bottom: 2px solid #ef4444;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fca5a5;
  cursor: pointer;
  transition: all 0.2s ease;
}
.smart-correction-highlight:hover {
  background: rgba(239, 68, 68, 0.25);
}
.smart-correction-tooltip {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--surface-1);
  border: 1px solid var(--primary);
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  width: 240px;
  animation: tooltipFloat 3s ease-in-out infinite;
}
[data-theme="dark"] .smart-correction-tooltip {
  background: #1e1e24;
  border-color: #7c3aed;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
@keyframes tooltipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.tooltip-badge {
  font-size: 11px;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-theme="dark"] .tooltip-badge {
  color: #a78bfa;
}
.tooltip-suggestion {
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 600;
}
[data-theme="dark"] .tooltip-suggestion {
  color: white;
}
.tooltip-reason {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}
[data-theme="dark"] .tooltip-reason {
  color: #94a3b8;
}

/* .demo-glow-orb removed — orphaned (editorial redesign) */
.welcome-demo {
  position: relative;
}
.welcome-demo .welcome-section-inner {
  position: relative;
  z-index: 1;
}

/* ===== Tilted Dashboard / Trust Bar / Mock Header — removed (editorial redesign) ===== */

/* ===== Inline Tooltip - Always visible ===== */
.smart-correction-highlight {
  position: relative;
  background: rgba(239, 68, 68, 0.15);
  border-bottom: 2px solid #f87171;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: help;
}
[data-theme="dark"] .smart-correction-highlight {
  color: #fca5a5;
}
.smart-correction-inline-tip {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-0);
  border: 1px solid var(--primary);
  padding: 12px 16px;
  border-radius: 10px;
  width: 220px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
[data-theme="dark"] .smart-correction-inline-tip {
  background: #1e1e24;
  border-color: #7c3aed;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.tip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tip-label {
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
[data-theme="dark"] .tip-label {
  color: #a78bfa;
}
.tip-icon {
  color: #ef4444;
  font-size: 14px;
}
.tip-desc {
  color: var(--text-primary);
  font-size: 13px;
}
[data-theme="dark"] .tip-desc {
  color: #fff;
}
.tip-suggestion {
  color: var(--text-secondary);
  font-size: 12px;
}
[data-theme="dark"] .tip-suggestion {
  color: #94a3b8;
}
.tip-suggestion strong {
  color: var(--color-green);
}

/* Demo source text (English original) */
.demo-source-text {
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.demo-source-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.demo-source-content {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-secondary);
}

.demo-source-content em {
  background: var(--color-amber-50);
  padding: 0 4px;
  border-radius: 3px;
  font-style: normal;
  color: var(--color-amber);
  font-weight: 500;
}

.demo-arrow {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 1.25rem;
  margin-bottom: var(--space-3);
}

.welcome-demo-text {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 2;
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  position: relative;
  min-height: 200px;
}

.welcome-demo-scan-line {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--primary-50) 0%,
    var(--primary-100) 40%,
    color-mix(in srgb, var(--primary) 20%, transparent) 50%,
    var(--primary-100) 60%,
    var(--primary-50) 100%
  );
  pointer-events: none;
  z-index: 10;
}

.welcome-demo-scan-line.scanning {
  animation: scanLine 2s ease-in-out forwards;
}

.welcome-demo-issue,
.welcome-demo-issue-edit {
  display: inline;
  position: relative;
}

.welcome-demo-issue.revealed,
.welcome-demo-issue-edit.revealed {
  background: var(--color-amber-50);
  border-bottom: 2px solid var(--color-amber);
  padding: 2px 4px;
  border-radius: 3px;
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.welcome-demo-button {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-6);
  background: var(--primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
}

.welcome-demo-button:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

.welcome-demo-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.welcome-demo-results {
  margin-top: var(--space-6);
  display: none;
}

.welcome-demo-results.visible {
  display: block;
  animation: slideUpFade 0.5s ease forwards;
}

.welcome-demo-result-item {
  padding: var(--space-4);
  background: var(--surface-1);
  border-left: 3px solid var(--color-amber);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  opacity: 0;
  transform: translateX(-20px);
}

.welcome-demo-result-item.visible {
  animation: slideUpStagger 0.4s ease forwards;
}

.welcome-demo-result-item:nth-child(1) { animation-delay: 0.1s; }
.welcome-demo-result-item:nth-child(2) { animation-delay: 0.3s; }
.welcome-demo-result-item:nth-child(3) { animation-delay: 0.5s; }

.welcome-demo-result-type {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-amber);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-1);
}

.welcome-demo-result-text {
  color: var(--text-primary);
  line-height: 1.6;
}

.demo-time-savings {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  margin-top: var(--space-4);
  background: linear-gradient(135deg, var(--color-green-50), var(--surface-1));
  border: 1px solid var(--color-green-border);
  border-radius: var(--radius-md);
  color: var(--color-green);
  font-weight: 600;
  font-size: var(--text-sm);
}

.demo-time-savings i {
  font-size: 1.1rem;
}

.welcome-demo-results.visible .demo-time-savings {
  display: flex;
  animation: slideUpStagger 0.4s ease forwards;
  animation-delay: 0.7s;
  opacity: 0;
}

/* Demo Tabs */
.welcome-demo-tabs {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  padding: 4px;
  gap: 2px;
  margin-bottom: var(--space-6);
  justify-content: center;
}

.welcome-demo-tab-btn {
  border: none;
  background: transparent;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.welcome-demo-tab-btn.active {
  background: var(--primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}

/* Three Pillars */
.welcome-pillars {
  background: var(--surface-0);
}

.welcome-pillars-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-10);
  text-align: center;
}

.welcome-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}

.welcome-pillar-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  text-align: center;
  transition: all var(--transition-base);
  opacity: 0;
  transform: translateY(30px);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.welcome-pillar-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease;
}

.welcome-pillar-card:nth-child(1).visible { transition-delay: 0.1s; }
.welcome-pillar-card:nth-child(2).visible { transition-delay: 0.2s; }
.welcome-pillar-card:nth-child(3).visible { transition-delay: 0.3s; }
.welcome-pillar-card:nth-child(4).visible { transition-delay: 0.4s; }

.welcome-pillar-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-xl);
  border-color: rgba(139, 92, 246, 0.5);
}

.welcome-pillar-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  transition: all var(--transition-base);
}

.welcome-pillar-card:nth-child(1) .welcome-pillar-icon {
  background: var(--color-red-50);
  color: var(--color-red);
}

.welcome-pillar-card:nth-child(2) .welcome-pillar-icon {
  background: var(--primary-50);
  color: var(--primary);
}

.welcome-pillar-card:nth-child(3) .welcome-pillar-icon {
  background: var(--color-green-50);
  color: var(--color-green);
}

.welcome-pillar-card:nth-child(4) .welcome-pillar-icon {
  background: var(--color-amber-50);
  color: var(--color-amber);
}

.welcome-pillar-card:hover .welcome-pillar-icon {
  transform: scale(1.1) rotate(5deg);
}

.welcome-pillar-card h3 {
  font-size: 1.3rem;
  margin-bottom: var(--space-3);
  font-weight: 600;
}

.welcome-pillar-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Stats Section */
.welcome-stats {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: var(--color-on-primary);
}

.welcome-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8);
  text-align: center;
}

.welcome-stat-item {
  opacity: 0;
  transform: scale(0.8);
}

.welcome-stat-item.visible {
  animation: scaleIn 0.6s ease forwards;
}

.welcome-stat-item:nth-child(1).visible { animation-delay: 0.1s; }
.welcome-stat-item:nth-child(2).visible { animation-delay: 0.2s; }
.welcome-stat-item:nth-child(3).visible { animation-delay: 0.3s; }

.welcome-stat-number {
  font-size: clamp(3rem, 6vw, var(--text-4xl));
  font-weight: 700;
  margin-bottom: var(--space-2);
  line-height: 1;
}

.welcome-stat-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}


/* ===== Who It's For (Personas) ===== */
.welcome-personas {
  background: var(--surface-0);
  text-align: center;
}

.welcome-personas-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.welcome-personas-subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  font-size: var(--text-base);
}

.welcome-personas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

.welcome-persona-card {
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.welcome-personas.visible .welcome-persona-card {
  opacity: 1;
  transform: translateY(0);
}

.welcome-persona-card:nth-child(1) { transition-delay: 0.1s; }
.welcome-persona-card:nth-child(2) { transition-delay: 0.25s; }
.welcome-persona-card:nth-child(3) { transition-delay: 0.4s; }

.welcome-persona-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto var(--space-4);
}

.welcome-persona-card:nth-child(1) .welcome-persona-icon {
  background: rgba(147, 51, 234, 0.1);
  color: #9333ea;
}

.welcome-persona-card:nth-child(2) .welcome-persona-icon {
  background: var(--primary-50);
  color: var(--primary);
}

.welcome-persona-card:nth-child(3) .welcome-persona-icon {
  background: rgba(8, 145, 178, 0.1);
  color: var(--cta-primary);
}

.welcome-persona-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.welcome-persona-card p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0;
}

[data-theme="dark"] .welcome-persona-card {
  background: var(--surface-1);
  border-color: var(--border-color);
}

/* ===== Why Prooku (Differentiators) ===== */
.welcome-differentiators {
  background: var(--surface-1);
  text-align: center;
}

.welcome-differentiators-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.welcome-differentiators-subtitle {
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  font-size: var(--text-base);
}

.welcome-differentiators-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.welcome-diff-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.welcome-differentiators.visible .welcome-diff-item {
  opacity: 1;
  transform: translateY(0);
}

.welcome-diff-item:nth-child(1) { transition-delay: 0.1s; }
.welcome-diff-item:nth-child(2) { transition-delay: 0.2s; }
.welcome-diff-item:nth-child(3) { transition-delay: 0.3s; }
.welcome-diff-item:nth-child(4) { transition-delay: 0.4s; }

.welcome-diff-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: var(--primary-50);
  color: var(--primary);
}

.welcome-diff-item:nth-child(1) .welcome-diff-icon {
  background: rgba(147, 51, 234, 0.1);
  color: #9333ea;
}

.welcome-diff-item:nth-child(2) .welcome-diff-icon {
  background: rgba(8, 145, 178, 0.1);
  color: var(--cta-primary);
}

.welcome-diff-item:nth-child(3) .welcome-diff-icon {
  background: rgba(217, 119, 6, 0.1);
  color: var(--accent-gold);
}

.welcome-diff-item:nth-child(4) .welcome-diff-icon {
  background: rgba(43, 138, 62, 0.1);
  color: var(--color-green);
}

.welcome-diff-content h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.welcome-diff-content p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
}

/* ===== Social Proof (Testimonials) ===== */
.welcome-testimonials {
  background: var(--surface-0);
  text-align: center;
}

.welcome-testimonials-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-8);
}

.welcome-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 960px;
  margin: 0 auto;
}

.welcome-testimonial-card {
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: left;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.welcome-testimonials.visible .welcome-testimonial-card {
  opacity: 1;
  transform: translateY(0);
}

.welcome-testimonial-card:nth-child(1) { transition-delay: 0.1s; }
.welcome-testimonial-card:nth-child(2) { transition-delay: 0.25s; }
.welcome-testimonial-card:nth-child(3) { transition-delay: 0.4s; }

.welcome-testimonial-quote {
  color: var(--primary);
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.welcome-testimonial-text {
  font-style: italic;
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.welcome-testimonial-author {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 500;
}

[data-theme="dark"] .welcome-testimonial-card {
  background: var(--surface-1);
  border-color: var(--border-color);
}

/* ===== Services Section (Welcome Page) ===== */
.welcome-services {
  background: var(--surface-1);
}

.welcome-services-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-2);
}

.welcome-services-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  font-size: var(--text-base);
}

.welcome-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

.welcome-service-card {
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
  opacity: 0;
  transform: translateY(20px);
}

.welcome-services.visible .welcome-service-card {
  opacity: 1;
  transform: translateY(0);
}

.welcome-service-card:nth-child(1) {
  border-top: 4px solid #9333ea;
  transition-delay: 0.1s;
}

.welcome-service-card:nth-child(2) {
  border-top: 4px solid var(--primary);
  transition-delay: 0.25s;
}

.welcome-service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.welcome-service-card-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
  background: var(--primary-50);
  color: var(--primary);
}

.welcome-service-card:nth-child(1) .welcome-service-card-icon {
  background: rgba(147, 51, 234, 0.08);
  color: #9333ea;
}

.welcome-service-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.welcome-service-card-desc {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.welcome-service-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
}

.welcome-service-features li {
  padding: var(--space-1) 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.8;
}

.welcome-service-features li::before {
  content: '\F26A';
  font-family: 'bootstrap-icons';
  color: var(--color-green);
  margin-right: var(--space-2);
  font-size: 0.75rem;
}


/* ===== Pricing View ===== */
/* === Pricing — Editorial Paper Cards === */
#view-pricing {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0;
  background: var(--bg-paper);
  overflow-x: hidden;
}

.pricing-section {
  padding: var(--section-gap) clamp(24px, 5vw, 80px);
}

.pricing-section-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Pricing Hero */
.pricing-hero {
  background: var(--bg-paper);
  text-align: center;
  padding-bottom: 0;
}

.pricing-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text-ink);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.pricing-hero-subtitle {
  color: var(--text-ink-soft);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lead);
  margin: 0;
  letter-spacing: 0.01em;
}

/* Billing Toggle — clean text links */
.pricing-toggle-section {
  text-align: center;
  padding-top: var(--subsection-gap);
  padding-bottom: 0;
  background: var(--bg-paper);
}

.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--surface-0);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-hairline);
}

.pricing-toggle-btn {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-ink-faint);
  background: none;
  border: none;
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pricing-toggle-btn.active {
  color: var(--text-ink);
  font-weight: 600;
  background: var(--bg-paper-alt);
}

.pricing-savings-badge {
  font-size: 0.6rem;
  background: var(--accent-burgundy);
  color: white;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Pricing Cards */
.pricing-cards-section {
  /* Extra top padding to give the floating Önerilen label room above popular card */
  padding-top: calc(var(--subsection-gap) + 1.5rem);
  background: var(--bg-paper);
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
  justify-content: center;
  padding: 0 clamp(24px, 3vw, 48px);
}

.pricing-card {
  background: var(--surface-0);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.pricing-card.visible {
  opacity: 1;
}

.pricing-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.pricing-card.popular {
  border: 1px solid var(--border-color);
  overflow: visible;
  box-shadow: 0 4px 24px rgba(139, 37, 0, 0.06), 0 1px 3px rgba(0,0,0,0.03);
}

.pricing-card.popular::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-burgundy);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* Recommended label (Profesyonel only) */
.pricing-recommended-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-burgundy);
  position: absolute;
  top: calc(-0.6rem - 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-paper);
  padding: 2px 14px;
  white-space: nowrap;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-full);
}

.pricing-card:not(.popular) .pricing-recommended-label {
  display: none;
}

.pricing-card-name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-ink);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

.pricing-card-name-en {
  display: none;
}

.pricing-card-price {
  margin-bottom: var(--space-5);
}

.pricing-amount {
  font-family: var(--font-serif);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--text-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}

.pricing-card-price-custom .pricing-amount {
  font-size: 1.4rem;
}
.pricing-card-price-custom + .pricing-period-text {
  display: none;
}

.pricing-currency {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  vertical-align: super;
  margin-right: 2px;
  color: var(--text-ink-soft);
}

.pricing-card-period {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-ink-faint);
  margin-bottom: var(--space-2);
}

.pricing-divider {
  height: 1px;
  background: var(--border-hairline);
  margin: var(--space-3) 0 var(--space-5);
}

.pricing-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8) 0;
  flex: 1 0 auto;
}

.pricing-card-features li {
  font-family: var(--font-sans);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-ink-soft);
  line-height: 1.6;
}

.pricing-card-features li::before {
  content: '\2713';
  color: var(--text-ink-faint);
  font-weight: 500;
  margin-right: var(--space-2);
  font-size: 0.8rem;
}
.pricing-card.popular .pricing-card-features li::before {
  color: var(--accent-burgundy);
  font-weight: 600;
}

/* CTA Buttons — base */
.pricing-card-cta {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  padding: 13px 24px;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  border: 1px solid transparent;
  margin-top: auto;
}
.pricing-card-cta:hover {
  transform: translateY(-1px);
}

/* Free — outlined navy */
.pricing-card:nth-child(1) .pricing-card-cta {
  color: var(--accent-navy);
  background: transparent;
  border-color: var(--accent-navy);
}
.pricing-card:nth-child(1) .pricing-card-cta:hover {
  background: rgba(27, 58, 92, 0.06);
}

/* Bireysel — solid navy */
.pricing-card:nth-child(2) .pricing-card-cta {
  color: #fff;
  background: var(--accent-navy);
  border-color: var(--accent-navy);
}
.pricing-card:nth-child(2) .pricing-card-cta:hover {
  background: #152e4a;
  border-color: #152e4a;
}

/* Profesyonel — solid burgundy (only burgundy button on the page) */
.pricing-card.popular .pricing-card-cta {
  color: #fff;
  background: var(--accent-burgundy);
  border-color: var(--accent-burgundy);
}
.pricing-card.popular .pricing-card-cta:hover {
  background: var(--accent-burgundy-hover);
  border-color: var(--accent-burgundy-hover);
}

/* Kurumsal — outlined navy */
.pricing-card:nth-child(4) .pricing-card-cta {
  color: var(--accent-navy);
  background: transparent;
  border-color: var(--accent-navy);
}
.pricing-card:nth-child(4) .pricing-card-cta:hover {
  background: rgba(27, 58, 92, 0.06);
}

/* Trust Footer */
.pricing-trust-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding: var(--space-4);
  color: var(--text-ink-faint);
  font-size: var(--text-xs);
}
.pricing-trust-footer span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.pricing-trust-footer i {
  font-size: 0.85rem;
  opacity: 0.7;
}
.pricing-trust-sep {
  opacity: 0.3;
}

/* Shared features line */
.pricing-shared {
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  margin-top: var(--space-8);
  letter-spacing: 0.02em;
}

/* Value Anchors */
.pricing-value {
  background: var(--surface-0);
  text-align: center;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

.pricing-value h2 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-ink);
  margin-bottom: var(--subsection-gap);
}

.pricing-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: 900px;
  margin: 0 auto;
}

.pricing-value-item {
  padding: var(--space-8) var(--space-6);
  position: relative;
  background: var(--surface-0);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline);
}
.pricing-value-item + .pricing-value-item::before {
  display: none;
}

.pricing-value-icon {
  display: none;
}

.pricing-value-icon svg {
  display: none;
}

.pricing-value-stat {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--accent-navy);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}

.pricing-value-desc {
  color: var(--text-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 240px;
  margin: 0 auto;
}

/* FAQ */
.pricing-faq-section {
  background: var(--bg-paper);
  text-align: center;
}

.pricing-faq-section h2 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-ink);
  margin-bottom: var(--subsection-gap);
}

.pricing-faq {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.pricing-faq-item {
  border-bottom: 1px solid var(--border-hairline);
}

.pricing-faq-item summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  padding: var(--space-5) 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--transition-fast);
  color: var(--text-ink);
}

.pricing-faq-item summary:hover .pricing-faq-chevron {
  color: var(--text-ink);
}

.pricing-faq-item summary::after {
  content: '\F282';
  font-family: 'bootstrap-icons';
  font-size: 0.8rem;
  color: var(--text-ink-faint);
  transition: transform var(--transition-base), color var(--transition-fast);
}

.pricing-faq-item[open] summary::after {
  transform: rotate(180deg);
}

.pricing-faq-item p {
  padding: 0 0 var(--space-5) 0;
  color: var(--text-ink-soft);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.8;
}

/* Pricing CTA — last section before footer, must be flush */
.pricing-cta {
  text-align: center;
  background: var(--bg-navy);
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  margin-bottom: 0;
}
/* Eliminate gap between pricing view and footer — Pico adds section margin-bottom */
#view-pricing {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#view-pricing .pricing-cta {
  margin-bottom: 0 !important;
  padding-bottom: var(--section-gap);
}
/* Kill Pico spacing between main/view and footer */
main.container {
  padding-block-end: 0 !important;
}
footer.site-footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.pricing-cta h2 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: var(--element-gap);
}

.pricing-cta-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-serif);
  font-style: italic;
  margin-bottom: var(--space-10);
  font-size: var(--text-base);
}

.pricing-cta .welcome-cta-button {
  background: #FFFFFF !important;
  color: var(--accent-navy) !important;
  border: none !important;
  font-weight: 600;
  padding: 14px 40px;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}
.pricing-cta .welcome-cta-button:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--accent-navy) !important;
}

/* Pay-as-you-go */
.pricing-payg {
  background: var(--surface-0);
  text-align: center;
}

.pricing-payg h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-ink);
  margin-bottom: var(--space-2);
}

.pricing-payg-subtitle {
  color: var(--text-ink-soft);
  margin-bottom: var(--space-8);
}

.pricing-payg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 800px;
  margin: 0 auto;
}

.pricing-payg-card {
  background: var(--surface-0);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.03);
  padding: var(--space-8);
  transition: box-shadow var(--transition-base);
}

.pricing-payg-card:hover {
  box-shadow: var(--shadow-md);
}

.pricing-payg-card i {
  font-size: 2rem;
  color: var(--accent-burgundy);
  margin-bottom: var(--space-4);
  display: block;
}

.pricing-payg-price {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-ink);
  margin-bottom: var(--space-2);
}

.pricing-payg-label {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-ink);
  margin-bottom: var(--space-1);
}

.pricing-payg-desc {
  color: var(--text-ink-soft);
  font-size: var(--text-sm);
}

/* === How It Works — Typographic Grid === */
.welcome-how {
  /* Full-bleed section: background goes edge-to-edge */
  width: 100%;
  padding: var(--section-gap) 0;
}
.welcome-how .how-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
}
.how-grid {
  display: flex;
  align-items: flex-start;
}
.how-step { flex: 1; padding: 0 var(--space-8); }
.how-step:first-child { padding-left: 0; }
.how-step:last-child { padding-right: 0; }
.how-step-separator {
  width: 1px;
  background: var(--border-hairline);
  align-self: stretch;
  flex-shrink: 0;
}
.how-numeral {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--text-ink-faint);
  opacity: 0.3;
  display: block;
  margin-left: -2px;
  margin-bottom: var(--space-4);
  line-height: 1;
  letter-spacing: -0.03em;
}
.how-divider {
  width: 24px;
  height: 2px;
  background: var(--accent-burgundy);
  margin-bottom: var(--space-5);
  opacity: 0.6;
}
.how-step h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--text-ink);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
.how-step p {
  font-size: var(--text-base);
  color: var(--text-ink-soft);
  line-height: 1.75;
  margin: 0;
}

/* === What It Checks — Asymmetric === */
.welcome-checks {
  /* Full-bleed section */
  width: 100%;
  padding: var(--section-gap) 0;
  border-top: none !important;
}
.welcome-checks .checks-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
}
.checks-layout {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: var(--space-12);
  align-items: start;
}
.checks-intro h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
}
.checks-intro p {
  font-size: var(--text-lead, 1.125rem);
  color: var(--text-ink-soft);
  line-height: 1.75;
  margin: 0;
}
.checks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10) var(--space-12);
}
.check-item {
  cursor: default;
  transition: transform var(--transition-fast);
}
.check-item:hover {
  transform: translateY(-2px);
}
.check-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--accent-navy);
  display: inline-block;
  padding-bottom: var(--space-1);
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition-base), color var(--transition-base);
  margin-bottom: var(--space-3);
}
.check-item:hover .check-label {
  color: var(--accent-burgundy);
  border-color: var(--accent-burgundy);
}
.check-item--primary .check-label {
  color: var(--accent-burgundy);
  border-color: var(--accent-burgundy);
}
.check-item p {
  font-size: var(--text-sm);
  color: var(--text-ink-soft);
  line-height: 1.7;
  margin: 0;
}

/* === Why Prooku — Em-Dash List === */
.welcome-why {
  /* Full-bleed section */
  width: 100%;
  padding: var(--section-gap) clamp(24px, 5vw, 80px);
}
.welcome-why-inner {
  max-width: 720px;
  margin: 0 auto;
}
.welcome-why h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  margin: 0 0 var(--subsection-gap);
  text-align: left;
}
.why-list { text-align: left; }
.why-list p {
  font-family: var(--font-sans);
  font-size: var(--text-lead, 1.125rem);
  color: var(--text-ink-soft);
  line-height: 1.85;
  margin: 0 0 var(--space-8);
  text-indent: -1.5em;
  padding-left: 1.5em;
}
.why-list p:last-child { margin-bottom: 0; }
.em-dash {
  color: var(--accent-burgundy);
  font-weight: 600;
}

/* === Testimonials — Book Praise === */
.welcome-testimonials {
  /* Full-bleed section */
  width: 100%;
  padding: var(--section-gap) clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--border-hairline);
}
.testimonials-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Carousel --- */
.testimonial-carousel {
  position: relative;
  width: 100%;
  min-height: 200px;
}
.testimonial {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.testimonial.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* --- Dots --- */
.testimonial-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: var(--space-8);
}
.testimonial-dot {
  all: unset;
  width: 6px !important;
  height: 6px !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  background: var(--text-ink-faint) !important;
  opacity: 0.2;
  cursor: pointer;
  transition: opacity 0.4s ease;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0;
}
.testimonial-dot.active {
  opacity: 0.7;
}
.testimonial-dot:hover {
  opacity: 0.5;
}

.testimonial blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  color: var(--text-ink-soft);
  line-height: 1.7;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.testimonial-dash {
  width: 24px;
  height: 2px;
  background: var(--accent-burgundy);
  opacity: 0.4;
  margin: var(--space-8) auto var(--space-5);
}
.testimonial cite {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  font-style: normal;
  letter-spacing: 0.04em;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  #view-welcome {
    margin-left: -50vw;
    margin-right: -50vw;
  }

  .welcome-section {
    padding: var(--subsection-gap) var(--space-4);
  }

  /* Full-bleed sections restore padding on mobile */
  .welcome-how,
  .welcome-checks {
    padding-top: var(--subsection-gap);
    padding-bottom: var(--subsection-gap);
  }

  /* Why and testimonials — reduce padding on mobile */
  .welcome-why,
  .welcome-testimonials {
    padding: var(--subsection-gap) var(--space-4);
  }

  /* .welcome-comparison, .welcome-book responsive rules removed — orphaned */

  .welcome-pillars-grid {
    grid-template-columns: 1fr;
  }

  .welcome-stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .welcome-services-grid {
    grid-template-columns: 1fr;
  }

  .welcome-personas-grid {
    grid-template-columns: 1fr;
  }

  .welcome-differentiators-grid {
    grid-template-columns: 1fr;
  }

  .welcome-testimonials-grid {
    grid-template-columns: 1fr;
  }

  .how-grid {
    flex-direction: column;
    gap: var(--space-10);
  }
  .welcome-how .how-grid,
  .welcome-checks .checks-layout {
    padding: 0 var(--space-4);
  }
  .how-step-separator {
    width: 100%;
    height: 1px;
  }
  .how-step { padding: 0 !important; }
  .checks-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .checks-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  #view-pricing {
    margin-left: -50vw;
    margin-right: -50vw;
  }

  .pricing-section {
    padding: var(--subsection-gap) var(--space-4);
  }

  .pricing-hero {
    min-height: auto;
  }

  .pricing-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-payg-grid {
    grid-template-columns: 1fr;
  }

  .pricing-value-grid {
    grid-template-columns: 1fr;
  }
  .pricing-value-item + .pricing-value-item::before {
    display: none;
  }
}

@media (max-width: 640px) {
  .pricing-cards {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .pricing-card {
    padding: var(--space-8);
  }
}

/* ===== Phase 3: Hover Glow Effects ===== */
.issue-card[data-severity="HIGH"]:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(224,49,49,0.15);
  border-left-color: var(--color-red);
}
.issue-card[data-severity="MEDIUM"]:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(230,119,0,0.15);
  border-left-color: var(--color-amber);
}
.issue-card[data-severity="LOW"]:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(107,114,128,0.15);
  border-left-color: var(--color-gray);
}

/* ===== Group Accordion Shimmer ===== */
.group-section > summary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}
.group-section > summary:hover::after {
  left: 100%;
}

/* ===== Card Dismiss Animation ===== */
.issue-card.dismissing {
  animation: cardDismiss 0.4s ease forwards;
  pointer-events: none;
}

/* ===== Streak Badge ===== */
.streak-badge {
  position: fixed;
  bottom: 60px;
  right: 20px;
  z-index: 9000;
  background: linear-gradient(135deg, var(--color-green), #10b981);
  color: white;
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: var(--shadow-lg);
  animation: streakSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.streak-badge i {
  font-size: 1.1rem;
}

/* ===== Achievement Toast ===== */
.achievement-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9500;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a1d23;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: var(--shadow-xl);
  animation: achievementPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 350px;
}
.achievement-toast .achievement-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.achievement-toast .achievement-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.achievement-toast .achievement-title {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.achievement-toast .achievement-desc {
  font-weight: 500;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* ===== Summary Card Count Pop ===== */
.summary-card .count.animate-pop {
  animation: countPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ===== Welcome Hero Orbs — removed (editorial redesign) ===== */

/* ===== Welcome Pillar Colored Top Borders ===== */
.welcome-pillar-card {
  border-top: 4px solid transparent;
}
.welcome-pillar-card:nth-child(1) {
  border-top-color: var(--color-red);
}
.welcome-pillar-card:nth-child(2) {
  border-top-color: var(--primary);
}
.welcome-pillar-card:nth-child(3) {
  border-top-color: var(--color-green);
}
.welcome-pillar-card:nth-child(4) {
  border-top-color: var(--color-amber);
}

/* ===== Welcome Pillar Icon Bounce on Hover ===== */
.welcome-pillar-card:hover .welcome-pillar-icon {
  transform: scale(1.1) rotate(5deg);
  animation: bounce 0.6s ease;
}


/* ===== Celebration Enhancements ===== */
.celebration-message .celeb-icon {
  font-size: 3.5rem;
}
.celebration-message .celeb-text {
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.celebration-message {
  animation: achievementPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* CTA Button Glow Effect — scoped to demo button only */
.welcome-demo-button:hover:not(:disabled) {
  box-shadow: none;
}

/* AI Terminal */
.ai-terminal {
  background: #0a0a0a;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.ai-terminal-header {
  background: #1a1a1a;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ai-terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.ai-terminal-dot.red { background: #ff5f57; }
.ai-terminal-dot.yellow { background: #febc2e; }
.ai-terminal-dot.green { background: #28c840; }
.ai-terminal-title {
  margin-left: 8px;
  color: rgba(255,255,255,0.5);
  font-size: 0.7rem;
}
.ai-terminal-body {
  padding: 12px 16px;
  max-height: 150px;
  overflow-y: auto;
}
.ai-terminal-line {
  color: #a78bfa;
  margin-bottom: 4px;
  opacity: 0;
  animation: terminalFadeIn 0.3s ease forwards;
}
.ai-terminal-prompt {
  color: #4ade80;
  margin-right: 6px;
}
.ai-terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: #8b5cf6;
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}
@keyframes terminalFadeIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ===== Guided Tour Overlay ===== */
.tour-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10000;
  transition: opacity 0.3s;
}
.tour-overlay.hidden { display: none; }
.tour-highlight {
  position: fixed;
  box-shadow: 0 0 0 4000px rgba(0,0,0,0.55);
  border-radius: 8px;
  z-index: 10001;
  pointer-events: none;
  transition: all 0.35s ease;
}
.tour-tooltip {
  position: fixed;
  z-index: 10002;
  background: var(--bg, #fff);
  color: var(--fg, #1a1a2e);
  border-radius: 12px;
  padding: 20px 24px 16px;
  max-width: 340px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  transition: all 0.35s ease;
}
@media (max-width: 480px) {
  .tour-tooltip {
    max-width: calc(100vw - 32px);
    left: 16px !important;
  }
}
.tour-tooltip-step {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent, #6c5ce7);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tour-tooltip-text {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 16px;
}
.tour-tooltip-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.tour-tooltip-actions button {
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 500;
}
.tour-btn-next {
  background: var(--accent, #6c5ce7);
  color: #fff;
}
.tour-btn-next:hover { filter: brightness(1.1); }
.tour-btn-skip {
  background: transparent;
  color: var(--muted, #888);
}
.tour-btn-skip:hover { color: var(--fg, #1a1a2e); }
.tour-dots {
  display: flex; gap: 6px;
}
.tour-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted, #ccc);
  transition: background 0.2s;
}
.tour-dot.active { background: var(--accent, #6c5ce7); }

/* Progressive disclosure: show-all-issues banner */
.tour-show-all-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 8px 0;
  background: var(--bg-surface, #f0f0f5);
  border: 1px dashed var(--accent, #6c5ce7);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--fg, #1a1a2e);
}
.tour-show-all-banner button {
  background: var(--accent, #6c5ce7);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 500;
}
.tour-show-all-banner button:hover { filter: brightness(1.1); }

/* ============================================================
   Results View — Editorial Redesign
   Paper cards, navy/burgundy accents, manuscript feel.
   These rules override the earlier results-related CSS above.
   CSS only — no HTML or JS changes.
   ============================================================ */

/* Container */
#view-results {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-6) clamp(8px, 1.5vw, 20px);
}
#view-results > article {
  max-width: 100%;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}
#view-results > article:hover {
  box-shadow: none;
}

/* Results header */
.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.results-header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  color: var(--text-ink);
}
@media (max-width: 768px) {
  .results-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Back link / back button */
.back-link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1) 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition-fast);
  box-shadow: none;
  transform: none;
}
.back-link:hover {
  color: var(--text-ink);
  transform: none;
  box-shadow: none;
}

/* Header actions row */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.header-actions button,
.header-actions a {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  background: var(--surface-0);
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  transition: color var(--transition-fast), border-color var(--transition-fast);
  color: var(--text-ink-soft);
  box-shadow: none !important;
  min-height: 36px !important;
}
.header-actions button:hover,
.header-actions a:hover {
  border-color: var(--border-color-hover) !important;
  color: var(--text-ink);
}

/* Summary strip — hairline bottom border */
.summary-strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-hairline);
  border-radius: 0;
  margin-bottom: var(--space-5);
  box-shadow: none;
}
.ss-verdict {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-lead, 1.125rem);
  color: var(--text-ink);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  line-height: 1.4;
}
.ss-verdict .count-high { color: var(--accent-burgundy); font-weight: 600; }
.ss-verdict .count-med  { color: var(--text-ink-soft); }
.ss-verdict .count-low  { color: var(--text-ink-faint); }
.ss-actions-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}
.ss-actions-row button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-hairline);
  background: transparent;
  color: var(--text-ink-soft);
  transition: border-color var(--transition-fast), color var(--transition-fast);
  transform: none;
  box-shadow: none;
}
.ss-actions-row button:hover {
  border-color: var(--accent-navy);
  color: var(--accent-navy);
  background: var(--bg-navy-light);
  transform: none;
  box-shadow: none;
}
@media (max-width: 600px) {
  .summary-strip { padding: var(--space-3) var(--space-4); }
  .ss-actions-row { width: 100%; justify-content: flex-end; }
}

/* Export buttons — outlined navy primary, text ghost */
.export-buttons {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.export-buttons button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  transform: none;
  box-shadow: none;
}
.export-buttons button:hover {
  transform: none;
  box-shadow: none;
}
.export-buttons button:active { transform: none; }
.export-buttons button.primary-export {
  color: var(--accent-navy);
  border: 1px solid var(--accent-navy);
  background: transparent;
}
.export-buttons button.primary-export:hover {
  background: var(--bg-navy-light);
  border-color: var(--accent-navy);
  color: var(--accent-navy);
}
.export-buttons button.ghost-export {
  background: transparent;
  color: var(--text-ink-faint);
  border: 1px solid transparent;
}
.export-buttons button.ghost-export:hover {
  background: transparent;
  color: var(--text-ink);
  border-color: var(--border-hairline);
}
@media (max-width: 768px) {
  .export-buttons { flex-direction: column; }
  .export-buttons button { width: 100%; justify-content: center; }
}

/* Export dropdown */
.export-dropdown { position: relative; }
.export-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  background: var(--surface-0);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 20px rgba(44, 44, 44, 0.08), 0 1px 3px rgba(44, 44, 44, 0.04);
  border-radius: var(--radius-md);
  padding: 4px 0;
  min-width: 230px;
}
.export-dropdown-menu.open { display: block; }
.export-dropdown-menu button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: none;
  color: var(--text-ink);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-align: left;
  transform: none;
  box-shadow: none;
  transition: background var(--transition-fast);
}
.export-dropdown-menu button:hover {
  background: var(--bg-paper-alt);
  transform: none;
  box-shadow: none;
}
.export-dropdown-menu button[style*="display: none"],
.export-dropdown-menu button[style*="display:none"] { display: none !important; }
.export-option-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-paper);
  border: 1px solid var(--border-hairline);
  color: var(--text-ink-faint);
  font-size: 0.75rem;
  transition: all var(--transition-fast);
}
.export-dropdown-menu button:hover .export-option-icon {
  background: var(--bg-navy-light);
  border-color: rgba(27, 58, 92, 0.15);
  color: var(--accent-navy);
}
.export-option-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.export-option-title {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--text-ink);
  line-height: 1.35;
}
.export-option-desc {
  font-size: 0.6875rem;
  color: var(--text-ink-faint);
  line-height: 1.3;
  font-weight: 400;
}
.export-dropdown-sep {
  height: 1px;
  background: var(--border-hairline);
  margin: 3px 12px;
}

/* Analytics panel */
.analytics-panel { margin-bottom: var(--space-4); }
.analytics-panel-summary {
  cursor: pointer;
  padding: var(--space-3) 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-ink-soft);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-hairline);
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
}
.analytics-panel-summary::-webkit-details-marker { display: none; }
.analytics-panel-summary::before {
  content: '▸';
  font-size: 0.8rem;
  transition: transform 0.2s;
  color: var(--text-ink-faint);
}
.analytics-panel[open] > .analytics-panel-summary::before { transform: rotate(90deg); }
.analytics-panel-hint { font-size: var(--text-xs); color: var(--text-ink-faint); }
.analytics-panel-content { padding: var(--space-3) 0 0; }

/* Filter toolbar */
.filter-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--element-gap);
  padding: var(--space-3) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-hairline);
  border-radius: 0;
}
.filter-toolbar input,
.filter-toolbar select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--text-ink);
  outline: none;
  transition: border-color var(--transition-fast);
  margin-bottom: 0;
}
.filter-toolbar input:focus,
.filter-toolbar select:focus {
  border-color: var(--accent-navy);
  outline: none;
}
.filter-toolbar .search-box {
  width: 100%;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  padding-left: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238b90a0' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
  background-size: 16px;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
}
.filter-row > select {
  flex: 1;
  min-width: 150px;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
@media (max-width: 768px) {
  .filter-toolbar { padding: var(--space-3); }
  .filter-row { flex-direction: column; }
  .filter-row > select { min-width: 100%; }
}

/* Filter toolbar V2 (sticky compact) */
.filter-toolbar-v2 {
  position: sticky;
  top: 60px;
  z-index: 20;
  background: var(--bg-paper);
  border-bottom: 1px solid var(--border-hairline);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-4);
  border-radius: 0;
  transition: box-shadow var(--transition-base);
  box-shadow: none;
}
.filter-toolbar-v2.stuck {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.ftv2-search {
  flex: 0 1 180px;
  min-width: 100px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--text-ink);
}
.ftv2-sort {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--text-ink-soft);
  cursor: pointer;
}
.ftv2-filter-btn {
  background: none;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--text-ink-soft);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.ftv2-filter-btn:hover {
  border-color: var(--accent-navy);
  color: var(--text-ink);
}

/* Quick-filter chips */
.quick-filters {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  flex-wrap: wrap;
  padding: 0;
  border: none;
}
.quick-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-hairline);
  background: none;
  color: var(--text-ink-faint);
  transition: all var(--transition-fast);
}
.quick-chip.chip-high {
  background: var(--accent-burgundy-light);
  color: var(--accent-burgundy);
  border-color: var(--accent-burgundy-light);
}
.quick-chip.chip-high.active,
.quick-chip.chip-high:hover {
  border-color: var(--accent-burgundy);
}
.quick-chip.chip-medium {
  background: var(--bg-paper-alt);
  color: var(--text-ink-soft);
  border-color: var(--border-hairline);
}
.quick-chip.chip-medium.active,
.quick-chip.chip-medium:hover {
  border-color: var(--accent-navy);
  color: var(--accent-navy);
  background: var(--bg-navy-light);
}
.quick-chip.chip-low {
  background: none;
  color: var(--text-ink-faint);
  border-color: var(--border-hairline);
}
.quick-chip.chip-low.active,
.quick-chip.chip-low:hover {
  border-color: var(--text-ink-faint);
  color: var(--text-ink-soft);
}

/* Filter dismissed / search rows */
.filter-dismissed-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-ink-soft);
}
.filter-dismissed-row input { width: auto; margin: 0; }
.filter-search-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.filter-search-row .search-box { flex: 1; }
.filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--text-ink-soft);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.filter-toggle-btn:hover {
  border-color: var(--accent-navy);
  color: var(--text-ink);
  background: var(--surface-0);
  transform: none;
  box-shadow: none;
}
.filter-toggle-btn .filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-sm);
  background: var(--accent-navy);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}
.filter-toggle-btn .filter-badge:empty { display: none; }

/* ============================================================
   Results Workspace — 65/35 Split Layout
   Left pane: compact scrollable issue list
   Right pane: sticky context panel with full issue detail
   ============================================================ */

/* Results workspace/panes consolidated in editorial redesign section below */

/* Context panel — empty state (top-aligned, not floating-in-void) */
.cp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 0;
  padding-top: var(--space-8);
  text-align: left;
  gap: var(--space-3);
  color: var(--text-ink-faint);
}
.cp-empty-icon {
  font-size: 1.5rem;
  opacity: 0.2;
}
.cp-empty-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-ink-faint);
  max-width: 220px;
  line-height: 1.7;
  margin: 0;
  opacity: 0.7;
}

/* Context panel — detail content */
.cp-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* cp-category-heading, cp-description, cp-block-text, cp-explanation consolidated in editorial redesign section below */

/* Divider */
.cp-divider {
  border: none;
  border-top: 1px solid var(--border-hairline);
  margin: 0;
}

/* Context panel detail + block structure (base rules — overrides in redesign section) */
.cp-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.cp-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cp-block-label {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ink-faint);
}
.cp-block-page {
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  margin-left: var(--space-2);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.cp-highlight {
  background: rgba(139, 37, 0, 0.10);
  border-radius: 2px;
  padding: 1px 3px;
}

/* Compact issue items — left-pane list style (no inline expansion) */
.issue-card {
  cursor: pointer;
}

/* Hide the inline expand details in workspace mode — content shown in context panel */
.results-workspace .issue-card-details {
  display: none !important;
}
/* Hide inline chevron toggle — clicking selects rather than expands */
.results-workspace .ic-chevron {
  display: none;
}

/* Dark mode: context panel */
[data-theme=dark] .results-context-panel {
  background: var(--bg-paper-alt);
}
[data-theme=dark] .cp-block-text.cp-source,
[data-theme=dark] .cp-block-text.cp-translation,
[data-theme=dark] .cp-block-text.cp-suggestion {
  background: var(--surface-0);
}

/* Group / chapter headers — quiet section dividers */
.group-section > summary {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-3) var(--space-2);
  background: transparent !important;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-navy);
  border-radius: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: none;
  transition: color var(--transition-fast);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-ink-soft);
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
}
.group-section:first-child > summary {
  margin-top: 0;
}
[data-theme="dark"] .group-section > summary {
  background: transparent !important;
}
.group-section > summary:hover {
  color: var(--text-ink) !important;
  background: transparent !important;
  box-shadow: none;
}
/* Remove shimmer pseudo-element (editorial look is clean) */
.group-section > summary::after { display: none; }

.group-section.group-spelling > summary {
  background: transparent !important;
  border-left-color: var(--accent-burgundy);
  color: var(--accent-burgundy);
}
[data-theme="dark"] .group-section.group-spelling > summary {
  background: transparent !important;
}
.group-section.group-rules > summary {
  background: transparent !important;
  border-left-color: var(--accent-navy);
  color: var(--accent-navy);
}
[data-theme="dark"] .group-section.group-rules > summary {
  background: transparent !important;
}
.group-section.group-ai > summary {
  background: transparent !important;
  border-left-color: var(--accent-green);
  color: var(--accent-green);
}
[data-theme="dark"] .group-section.group-ai > summary,
[data-theme="dark"] .group-section.group-spelling > summary,
[data-theme="dark"] .group-section.group-rules > summary {
  background: transparent !important;
}
.group-section > summary .group-count {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-ink-faint);
  background: none;
  padding: 0;
  border-radius: 0;
}

/* Cat section (sub-group) headers */
.cat-section > summary {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
}
.cat-section > summary:hover { background: var(--bg-paper-alt); }

/* Flat page header (used in grouped-by-page view) */
.flat-page-header {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-4) 0 var(--space-2);
  margin-top: var(--space-2);
  border-bottom: 1px solid var(--border-hairline);
}

/* Issue cards list container */
.issue-cards {
  padding: 0;
  border-left: none;
  margin-left: 0;
}

/* Issue cards — flat list entries with left-accent border */
.issue-card {
  background: transparent !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
  box-shadow: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  border-bottom: 1px solid var(--border-hairline) !important;
}
[data-theme="dark"] .issue-card {
  background: transparent !important;
}
.issue-card:hover {
  background: rgba(27, 58, 92, 0.03) !important;
  box-shadow: none;
  transform: none;
}
/* Severity — left accent only */
.issue-card[data-severity="HIGH"] {
  border-left: 3px solid var(--accent-burgundy) !important;
}
.issue-card[data-severity="MEDIUM"] {
  border-left: 3px solid var(--accent-navy) !important;
}
.issue-card[data-severity="LOW"] {
  border-left: 3px solid var(--border-color) !important;
}
/* Hover — no shadow, just background tint */
.issue-card[data-severity="HIGH"]:hover,
.issue-card[data-severity="MEDIUM"]:hover,
.issue-card[data-severity="LOW"]:hover {
  box-shadow: none;
}
/* Resolved / dismissed */
.issue-card.dismissed,
.issue-card.res-accepted {
  opacity: 0.5;
}
.issue-card.res-accepted {
  border-left: 3px solid var(--accent-green) !important;
}
.issue-card.dismissed {
  background: transparent !important;
  border-color: var(--border-hairline) !important;
}

/* Keyboard focus indicator */
.issue-card.kb-focused {
  outline: 2px solid var(--accent-navy);
  outline-offset: 1px;
}

/* Card header — flat list entry row */
.issue-card-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
}
.issue-card-header:hover { background: transparent; }
@media (max-width: 480px) {
  .issue-card-header { padding: var(--space-2) var(--space-3); }
}

/* Page number chip */
.issue-card-header .page-num,
.ic-page {
  font-family: var(--font-sans);
  font-weight: 500;
  flex-shrink: 0;
  font-size: var(--text-xs);
  background: var(--bg-paper-alt);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-ink-faint);
  border: 1px solid var(--border-hairline);
}

/* Category pill */
.ic-category-pill {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  white-space: nowrap;
  /* Default: navy */
  color: var(--accent-navy);
  background: var(--bg-navy-light);
}

/* Meaning / high-severity — burgundy */
.ic-category-pill[data-cat="MEANING"],
.ic-category-pill.cat-meaning,
.issue-card[data-severity="HIGH"] .ic-category-pill {
  color: var(--accent-burgundy);
  background: var(--accent-burgundy-light);
}

/* Green when resolved */
.ic-category-pill.resolved {
  color: var(--accent-green);
  background: var(--accent-green-light);
}

/* .ic-desc intermediate rules removed — base at line ~4959, editorial overrides in redesign section */
.ic-chevron {
  flex-shrink: 0;
  opacity: 0.4;
  font-size: 0.8rem;
  color: var(--text-ink-faint);
  transition: transform 0.2s ease, opacity 0.15s;
  margin-left: auto;
}
.issue-card-header:hover .ic-chevron { opacity: 0.7; }
.issue-card-header[aria-expanded="true"] .ic-chevron { transform: rotate(180deg); }

/* Card details (expanded) */
.issue-card-details {
  display: none;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  margin: 0;
  background: transparent;
  border-radius: 0;
  border-left: none;
  border-top: 1px solid var(--border-hairline);
  font-size: var(--text-sm);
}
.issue-card-details.open {
  display: block;
  animation: detailsSlideIn 0.15s ease;
}

/* Detail section labels */
.icd-label {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--text-ink-faint);
  margin-bottom: var(--space-1);
}
.icd-source {
  border-left: 2px solid var(--border-hairline);
  padding-left: var(--space-3);
  font-style: italic;
  color: var(--text-ink-soft);
  line-height: 1.65;
  font-size: var(--text-sm);
}
.icd-turkish {
  color: var(--text-ink);
  line-height: 1.65;
  font-size: var(--text-sm);
}
.icd-suggestion-text {
  color: var(--text-ink);
  font-size: var(--text-sm);
  line-height: 1.65;
  background: var(--accent-green-light);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(46, 90, 68, 0.15);
}
.icd-explanation {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-ink-soft);
  line-height: 1.7;
}

/* Card detail footer */
.icd-footer {
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.icd-footer-left,
.icd-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Resolution buttons */
.res-btn {
  border: 1px solid var(--border-hairline);
  background: transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-ink-soft);
  transition: all 0.15s;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transform: none;
  box-shadow: none;
}
.res-btn:hover {
  background: var(--bg-paper-alt);
  transform: none;
  box-shadow: none;
}
.res-accept.active {
  color: var(--accent-green);
  border-color: var(--accent-green);
  background: var(--accent-green-light);
}
.res-dismiss.active {
  color: var(--text-ink-faint);
  border-color: var(--border-hairline);
  background: var(--bg-paper-alt);
}
[data-theme="dark"] .res-accept.active { background: rgba(46,90,68,0.2); }
[data-theme="dark"] .res-dismiss.active { background: var(--bg-paper-alt); }

/* Dismiss button */
.dismiss-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-ink-faint);
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  transform: none;
  box-shadow: none;
}
.dismiss-btn:hover {
  color: var(--accent-burgundy);
  background: var(--accent-burgundy-light);
  transform: none;
  box-shadow: none;
}
.issue-card.dismissed .dismiss-btn { color: var(--accent-green); }
.issue-card.dismissed .dismiss-btn:hover { background: var(--accent-green-light); }

/* Glossary footer button */
.gs-footer-btn {
  border: 1px solid var(--border-hairline);
  background: transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: all 0.15s;
  transform: none;
  box-shadow: none;
}
.gs-footer-btn:hover {
  background: var(--bg-paper-alt);
  transform: none;
  box-shadow: none;
}
.gs-footer-btn.saved { color: var(--accent-green); border-color: var(--accent-green); cursor: default; }

/* Note input */
.issue-note-input {
  width: 100%;
  resize: vertical;
  min-height: 36px;
  max-height: 100px;
  padding: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--text-ink);
  line-height: 1.4;
}
.issue-note-input:focus {
  border-color: var(--accent-navy);
  outline: none;
  box-shadow: none;
}
.issue-note-input::placeholder { color: var(--text-ink-faint); font-style: italic; }

/* Keyboard hint */
.kbd-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--font-mono);
  padding: 0.1rem 0.3rem;
  margin-left: var(--space-1);
  background: var(--bg-paper-alt);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  color: var(--text-ink-faint);
  line-height: 1;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.issue-card:hover .kbd-hint,
.issue-card:focus-within .kbd-hint {
  opacity: 0.7;
}

/* Scope banner */
.scope-banner {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline);
  background: var(--bg-paper-alt) !important;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-ink-soft);
}
[data-theme="dark"] .scope-banner { background: var(--bg-paper-alt) !important; }
.scope-banner.warning {
  border-color: rgba(139, 37, 0, 0.3);
  border-left: 2px solid var(--accent-burgundy);
  background: var(--accent-burgundy-light) !important;
  color: var(--accent-burgundy);
}

/* Undo toast */
.undo-toast {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(120%);
  background: var(--bg-navy);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-paper);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.undo-toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.undo-toast .undo-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  transform: none;
  box-shadow: none;
}
.undo-toast .undo-btn:hover {
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* Empty state — perfect score */
.empty-state-perfect {
  text-align: center;
  padding: var(--space-20) var(--space-6);
}
.empty-state-perfect i {
  font-size: 3rem;
  color: var(--accent-green);
  display: block;
  margin-bottom: var(--space-4);
}
.empty-state-perfect h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--text-ink);
  margin-bottom: var(--space-2);
}
.empty-state-perfect p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-ink-soft);
  max-width: 400px;
  margin: 0 auto;
}

/* Proof view badge colors — align with burgundy/navy system */
.pv-issue-badge--meaning {
  background: var(--accent-burgundy-light);
  color: var(--accent-burgundy);
}
.pv-issue-badge--added {
  background: var(--bg-navy-light);
  color: var(--accent-navy);
}
.pv-issue-badge--missing {
  background: var(--bg-navy-light);
  color: var(--accent-navy);
}
.pv-issue-badge--default {
  background: var(--bg-paper-alt);
  color: var(--text-ink-soft);
}

/* Clear filters button — matches editorial style */
.clear-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: none;
  color: var(--accent-burgundy);
  border: 1px solid rgba(139, 37, 0, 0.25);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.clear-filters-btn:hover {
  background: var(--accent-burgundy-light);
  border-color: var(--accent-burgundy);
}

/* Suppress default article card hover lift in results view */
#view-results article,
#view-results article:hover {
  box-shadow: none;
  transform: none;
}

/* Global button hover lift — suppress inside results view so cards stay flat */
#view-results button:hover:not(:disabled),
#view-results [role="button"]:hover {
  transform: none;
  box-shadow: none;
}
/* Keep dismiss/resolution buttons non-lifting */
.res-btn:hover,
.dismiss-btn:hover,
.gs-footer-btn:hover,
.ss-actions-row button:hover,
.filter-toggle-btn:hover,
.ftv2-filter-btn:hover,
.clear-filters-btn:hover {
  transform: none;
  box-shadow: none;
}

/* ===== Part 2: Responsive Polish ===== */

/* Fluid typography clamp for headings — app/interior views only */
/* Exclude hero h1 (.hero-text h1) which uses its own scale per design spec */
h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); }
h2 { font-size: clamp(1.4rem,  4vw, 2.2rem); }
h3 { font-size: clamp(1.1rem,  3vw, 1.5rem); }
/* Override: hero h1 must reach 72px on desktop — restore full scale */
.hero-text h1 { font-size: var(--text-3xl); }
@media (min-width: 1024px) {
  .hero-text h1 { font-size: var(--text-4xl); }
}

/* Global tablet breakpoint — upload/settings two-column areas */
@media (max-width: 768px) {
  /* Prevent horizontal overflow globally */
  body { overflow-x: hidden; }

  /* Drop zones stack vertically */
  .drop-zones-row {
    flex-direction: column;
  }

  /* Check cards wrap */
  .check-cards-grid {
    grid-template-columns: 1fr;
  }

  /* Issue card actions stack on narrow screens */
  .issue-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* Summary strip scrolls horizontally rather than truncates */
  .summary-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Auth modal: full-width on small screens */
  .auth-modal {
    max-width: calc(100vw - var(--space-8));
    margin: var(--space-4);
  }
}

/* Global phone breakpoint */
@media (max-width: 480px) {
  /* Navigation CTA hidden below 480px — keep icon only */
  .site-nav-cta {
    display: none;
  }

  /* Pricing cards full width */
  .pricing-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Part 3: Accessibility ===== */

/* Ensure all interactive elements meet 44×44 px touch target */
button,
[role="button"],
input[type="checkbox"],
input[type="radio"],
select,
a.site-nav-mobile-link,
.user-menu-link,
.user-menu-logout {
  min-height: 44px;
  min-width: 44px;
}

/* Small icon-only buttons: use padding to reach touch target without changing visual size */
.site-nav-icon-btn,
.auth-modal-close,
.dismiss-btn,
.res-btn {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure --text-ink-faint token is available (fallback for older token name) */
:root {
  --text-ink-faint: var(--text-tertiary, #737373);
}

/* ===== Part 4: Global Style Fixes ===== */

/* Override Pico CSS article reset — our design uses article as a card container */
article {
  padding: 0;
  margin: 0;
}

/* Global heading letter-spacing for Spectral */
h1, h2 {
  letter-spacing: -0.02em;
}

/* main.container must not cap width — landing sections use 100vw breakout trick,
   app interior views (upload/results) cap themselves via their own containers */
main.container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* === Global Button Fix — Flat Burgundy, No Gradients, No Glow === */
.btn-burgundy,
.site-nav-cta,
.welcome-cta-button,
.pricing-card.popular .pricing-card-cta,
.auth-submit-btn,
.auth-modal button[type="submit"] {
  background: #8B2500 !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  color: #FFFFFF !important;
}
.btn-burgundy:hover,
.site-nav-cta:hover,
.pricing-card.popular .pricing-card-cta:hover {
  background: #6E1D00 !important;
  box-shadow: none !important;
}
/* Footer CTA — white button on navy background */
.footer-cta .footer-cta-btn {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #1B3A5C !important;
  border: none !important;
  box-shadow: none !important;
}
.footer-cta .footer-cta-btn:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: none !important;
}

/* === Pricing CTA Buttons — Correct Contrast === */
.pricing-card-cta {
  color: #FFFFFF !important;
  font-weight: 500;
}
/* Outlined buttons (Free, Kurum) — navy border with navy text on white bg */
.pricing-card:first-child .pricing-card-cta,
.pricing-card:last-child .pricing-card-cta {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid #1B3A5C !important;
  color: #1B3A5C !important;
  box-shadow: none !important;
}
.pricing-card:first-child .pricing-card-cta:hover,
.pricing-card:last-child .pricing-card-cta:hover {
  background: #E8EDF2 !important;
}
/* Bireysel — solid navy, white text */
.pricing-card:nth-child(2) .pricing-card-cta {
  background: #1B3A5C !important;
  background-image: none !important;
  border: 1px solid #1B3A5C !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
/* Profesyonel — solid burgundy, white text (overrides generic cta rule) */
.pricing-card.popular .pricing-card-cta {
  background: #8B2500 !important;
  background-image: none !important;
  border: 1px solid #8B2500 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/* === Hero Mockup Frame — Paper-on-desk Shadow === */
.hero-mockup-frame {
  box-shadow: 0 2px 6px rgba(44,44,44,0.06), 0 16px 48px rgba(44,44,44,0.08), 0 40px 80px rgba(44,44,44,0.05) !important;
  border: 1px solid #E0DDD8 !important;
  transform: none !important;
  min-width: 360px !important;
}

/* === Welcome Middle Sections Visibility === */
/* These sections start as opacity:0 + translateY(30px) in .welcome-section base.
   JS adds .visible but we also force them visible as a safety net. */
.welcome-how,
.welcome-checks,
.welcome-why,
.welcome-testimonials {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* === Pricing Value Icons — Ensure Visibility === */
/* Spec: literary/editorial icons at 32px in --text-ink-faint (#737373) */
.pricing-value-icon svg {
  filter: none !important;
  opacity: 1 !important;
  /* Use --text-ink-faint per spec: icons are muted, not decorative */
  stroke: #737373 !important;
  width: 32px !important;
  height: 32px !important;
}

/* =====================================================================
   EDITORIAL REDESIGN — App Interior View Fixes (Sections 3.0–3.3)
   ===================================================================== */

/* --- 3.0 App Navigation: simplify nav in app views — keep features + pricing --- */
body.in-app-view .site-nav-cta,
body.in-app-view #header-login-btn {
  display: none;
}

/* Field labels above drop zones — bold, dark */
#article-upload .grid > div > label:first-child,
#article-upload .drop-zones-row .drop-zone-col > label:first-child {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-ink);
}

/* --- 3.2 Progress View: left-aligned text, anchored cancel link --- */
/* Progress view rules consolidated in editorial redesign section (~line 13388+) */

/* --- 3.3 Results View: summary strip, issue cards, export bar --- */
#summary-strip.summary-strip {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-4) !important;
  flex-wrap: wrap;
  padding: var(--space-4) 0 !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  margin-bottom: var(--element-gap) !important;
  background: transparent !important;
}
.issue-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: var(--space-3) 0 var(--space-3) var(--space-3) !important;
}
.issue-cards .issue-card {
  margin-bottom: 0 !important;
}
.issue-card.active-card {
  background: var(--bg-paper-alt) !important;
  border-left: 2px solid var(--accent-navy) !important;
}
/* Fixed export bar */
.results-export-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--bg-paper);
  border-top: 1px solid var(--border-hairline);
  padding: var(--space-3) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  box-shadow: 0 -4px 12px rgba(44,44,44,0.04);
}
#view-results {
  padding-bottom: 4.5rem !important;
}
.results-export-bar .export-bar-pdf {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent-navy);
  border: 1px solid var(--accent-navy);
  background: transparent;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.results-export-bar .export-bar-pdf:hover { background: var(--bg-navy-light); }
.results-export-bar .export-bar-share,
.results-export-bar .export-bar-resolve-all {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  padding: var(--space-2);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.results-export-bar .export-bar-share { color: var(--accent-navy); }
.results-export-bar .export-bar-resolve-all { color: var(--accent-green); }
.results-export-bar .export-bar-share:hover,
.results-export-bar .export-bar-resolve-all:hover { opacity: 0.7; }
@media (max-width: 640px) {
  .results-export-bar { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
}

/* --- Auth Modal: Spectral wordmark, tab-style, sharp corners, hairline inputs --- */
.auth-modal {
  border-radius: var(--radius-sm) !important;
}
.auth-modal-wordmark {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent-navy);
  text-align: center;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: var(--space-5);
}
.auth-modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: var(--space-6);
  margin-top: -0.5rem;
}
.auth-modal-tab {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-ink-faint);
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  outline: none !important;
  box-shadow: none !important;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  min-height: 44px;
  --pico-background-color: transparent;
}
.auth-modal-tab.active {
  color: var(--accent-burgundy) !important;
  border-bottom: 2px solid var(--accent-burgundy) !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.auth-modal-tab:focus,
.auth-modal-tab:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
}
.auth-modal-tab.active:focus,
.auth-modal-tab.active:focus-visible {
  border-bottom: 2px solid var(--accent-burgundy) !important;
}
.auth-modal-tab:hover:not(.active) { color: var(--text-ink); }
.auth-modal input[type="email"],
.auth-modal input[type="password"],
.auth-modal input[type="text"] {
  border-color: var(--border-hairline) !important;
}
.auth-modal input:focus {
  border-color: var(--accent-navy) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* User avatar: 32px circle, Inter 500, 13px initials */
.user-avatar {
  width: 32px !important;
  height: 32px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}
.user-menu-dropdown { border-radius: var(--radius-sm) !important; }
.user-menu-logout {
  border-top: 1px solid var(--border-hairline) !important;
  color: var(--accent-burgundy) !important;
}

/* =====================================================================
   PART 5: Editorial Polish — Airy Spacing, Flat Buttons, Left-Align
   ===================================================================== */

/* --- 5.1 Card Backgrounds: pure white cards on warm parchment --- */
/* overview-card is now display:contents — no card styling needed */
.account-content {
  background: #FFFFFF !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* --- 5.2 Border Radius: 4px on interactive, 4px on cards --- */
button:not(.user-avatar):not(.account-avatar-circle):not(.auth-modal-close):not(.mode-btn):not(.check-card),
.btn-burgundy,
.footer-cta-btn,
.site-nav-cta,
.upload-submit-btn,
#start-analysis-btn,
.auth-submit-btn,
.google-btn,
.queue-notify-btn,
.ghost-export,
.back-link {
  border-radius: 4px !important;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  border-radius: 4px !important;
}
.export-dropdown-menu,
.cookie-banner,
.account-sidebar,
.account-content,
.auth-modal,
.user-menu-dropdown {
  border-radius: 4px !important;
}

/* --- 5.3 Upload View: padding defined in base drop-zone block --- */

/* --- 5.4 Results View: more padding, left-align --- */
#view-results article {
  padding: var(--space-4) clamp(16px, 3vw, 48px) !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
}
#view-results h2,
#view-results .results-title,
#view-results .summary-strip {
  text-align: left !important;
}

/* --- 5.5 Account view: left-align panel headings, airy padding --- */
#view-account .account-tab-panel h2 {
  text-align: left !important;
}
.account-panel {
  padding: 0 var(--space-6) !important;
  margin: var(--space-8) auto !important;
}
.account-content {
  padding: var(--space-8) !important;
}
.account-sidebar {
  padding: var(--space-6) !important;
}

/* --- 5.6 Flat Burgundy CTA buttons — no gradient, no glow, no animation --- */
.welcome-cta-button {
  background: var(--accent-burgundy) !important;
  background-image: none !important;
  box-shadow: none !important;
  animation: none !important;
}
.welcome-cta-button:hover {
  background: var(--accent-burgundy-hover) !important;
  box-shadow: none !important;
}

/* ============================================================
   EDITORIAL INSTRUMENT — Upload & Progress Polish
   All rules use !important to win specificity over earlier blocks.
   ============================================================ */

/* --- U1. Hide step-done check-circle icon from section headings --- */
#article-checks h2 .step-done,
#article-upload h2 .step-done,
#article-checks h2 i,
#article-upload h2 i.step-done {
  display: none !important;
}

/* U2/U3 drop-zone icon/label overrides removed — consolidated into base definition */

/* Spacing between upload white cards */
#article-upload {
  margin-bottom: var(--space-5) !important;
}
#article-checks {
  margin-bottom: var(--space-4) !important;
}

/* --- U5. "Gelişmiş Ayarlar" — plain text link trigger --- */
.adv-settings-article {
  padding: var(--space-4) 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.adv-settings-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  list-style: none !important;
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  color: var(--text-ink-faint) !important;
  text-decoration: underline !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 3px !important;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast) !important;
}
.adv-settings-link:hover {
  color: var(--accent-navy) !important;
  text-decoration-color: var(--accent-navy) !important;
}
.adv-settings-link::-webkit-details-marker { display: none; }
.adv-settings-link::marker { display: none; content: ''; }
/* Suppress ALL pseudo-element chevrons from earlier CSS blocks */
#scope-section > summary::before,
.adv-settings-link::before {
  display: none !important;
  content: '' !important;
}
#scope-section > summary::after,
.adv-settings-link::after {
  display: none !important;
  content: '' !important;
}
#scope-section[open] .adv-settings-link i {
  transform: rotate(180deg);
}
#scope-section[open] .adv-settings-link span {
  text-decoration: none;
}

/* --- U6. Progress view: guarantee warm parchment background --- */
#view-progress,
#view-progress.active {
  background: var(--bg-paper, #F9F8F6) !important;
}
/* #view-progress > article resets → covered by article {} Pico reset (line 334) */
body.in-app-view .site-nav {
  background: var(--bg-paper, #F9F8F6) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  box-shadow: none !important;
}

/* --- U7. Scope banner: strip box, plain inline text --- */
.scope-banner {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 0 0 var(--space-4) 0 !important;
  margin-bottom: var(--space-4) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: var(--text-ink-faint) !important;
}
.scope-banner.warning {
  background: transparent !important;
  border: none !important;
  color: var(--accent-burgundy) !important;
}
[data-theme="dark"] .scope-banner {
  background: transparent !important;
}

/* Progress bar + cancel button consolidated in editorial redesign section (~line 13388+) */

/* ============================================================
   EDITORIAL REDESIGN PASS — Results View Polish
   Fixes: confidence chips, filter density, dismissed toggle,
   category headers, issue card rows, context panel, summary strip
   ============================================================ */

/* ---- 1. Quick-filter confidence chips → plain text toggles ---- */
.quick-filters {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  flex-wrap: wrap;
  align-items: center;
}
.quick-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  padding: var(--space-1) var(--space-3) !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 400;
  cursor: pointer;
  border: 1px solid var(--border-hairline) !important;
  background: transparent !important;
  color: var(--text-ink-faint);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  line-height: 1.4;
}
.quick-chip.active {
  font-weight: 500 !important;
  color: var(--text-ink) !important;
  background: var(--primary-50) !important;
  border-color: rgba(27, 58, 92, 0.25) !important;
}
.quick-chip:hover {
  color: var(--text-ink-soft) !important;
  border-color: var(--border-color-hover) !important;
  background: var(--surface-2) !important;
}
.quick-chip.chip-high,
.quick-chip.chip-medium,
.quick-chip.chip-low {
  border-color: var(--border-hairline) !important;
}
.quick-chip.chip-high.active {
  font-weight: 500 !important;
  color: var(--accent-burgundy) !important;
  background: var(--accent-burgundy-light) !important;
  border-color: rgba(139, 37, 0, 0.2) !important;
}
.quick-chip.chip-medium.active {
  font-weight: 500 !important;
  color: var(--color-amber) !important;
  background: var(--color-amber-50) !important;
  border-color: rgba(154, 107, 31, 0.2) !important;
}
.quick-chip.chip-low.active {
  font-weight: 500 !important;
  color: var(--text-ink-soft) !important;
  background: var(--surface-2) !important;
  border-color: var(--border-color) !important;
}
.chip-count {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 0.9em;
  font-weight: 400;
  color: var(--text-ink-faint);
  min-width: 0;
  height: auto;
  line-height: inherit;
}
.quick-chip .chip-count::before { content: '('; }
.quick-chip .chip-count::after  { content: ')'; }


/* ---- Filter hint — subtle inline note next to chips ---- */
.filter-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  white-space: nowrap;
  align-self: center;
  margin-left: var(--space-2);
  opacity: 0;
  animation: hintFadeIn 0.6s ease 0.8s forwards;
}
@keyframes hintFadeIn {
  to { opacity: 1; }
}

/* ---- 2. Filter row density — breathe ---- */
.filter-toolbar-v2 {
  padding: var(--space-3) 0 var(--space-4) !important;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: var(--space-4);
}
.ftv2-row1 {
  gap: var(--space-3) !important;
}
.ftv2-row1 .quick-filters {
  gap: var(--space-4) !important;
  flex-shrink: 0;
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
}
.ftv2-search {
  border-radius: var(--radius-sm) !important;
  border-color: var(--border-hairline) !important;
  font-size: var(--text-xs) !important;
  color: var(--text-ink-soft) !important;
}
.ftv2-search:focus {
  border-color: var(--accent-navy) !important;
  outline: none;
}
.ftv2-filter-btn {
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-full) !important;
  font-size: var(--text-xs) !important;
  padding: var(--space-1) var(--space-3) !important;
  color: var(--text-ink-soft) !important;
  white-space: nowrap;
  background: var(--surface-0) !important;
  cursor: pointer;
}
.ftv2-filter-btn:hover {
  border-color: var(--border-color-hover) !important;
  color: var(--text-ink) !important;
  background: var(--surface-2) !important;
}
.filter-collapsible.expanded {
  max-height: 160px !important;
}
.filter-row {
  gap: var(--space-2) !important;
  padding: var(--space-2) 0 !important;
}
.filter-row > select,
.ftv2-sort {
  font-size: var(--text-xs) !important;
  padding: var(--space-1) var(--space-3) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-ink) !important;
  background: var(--surface-0) !important;
  min-width: 120px !important;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%235C5C5C' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px !important;
  padding-right: 28px !important;
}
.filter-row > select:focus,
.ftv2-sort:focus {
  border-color: var(--accent-navy) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(27, 58, 92, 0.1) !important;
}
/* Ensure select option text is always readable */
.filter-row > select option,
.ftv2-sort option,
#filter-resolution option {
  color: var(--text-ink) !important;
  background: var(--surface-0) !important;
}


/* ---- 3. Dismissed text-toggle ---- */
.filter-dismissed-row {
  padding: var(--space-2) 0 !important;
  gap: var(--space-3) !important;
  align-items: center;
  display: flex !important;
  flex-wrap: nowrap !important;
}
.filter-dismissed-row label {
  white-space: nowrap;
  font-size: var(--text-xs) !important;
}
.dismissed-toggle {
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-ink-faint);
  line-height: 1.4;
  text-decoration: line-through;
  text-decoration-color: var(--text-ink-faint);
  text-underline-offset: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.dismissed-toggle[aria-pressed="true"] {
  text-decoration: none;
  color: var(--text-ink-soft);
  background: var(--surface-2);
  border-color: var(--border-color);
}
.dismissed-toggle:hover {
  color: var(--text-ink-soft);
  border-color: var(--border-color-hover);
}
#filter-resolution {
  font-size: var(--text-xs) !important;
  padding: var(--space-1) var(--space-2) !important;
  border-color: var(--border-hairline) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-ink-soft) !important;
  margin-left: var(--space-2) !important;
}


/* ---- 4. Category group header ---- */
.cat-section > summary {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  color: var(--text-ink-faint) !important;
  letter-spacing: 0.06em !important;
  padding: var(--space-3) 0 !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  background: none !important;
  box-shadow: none !important;
}
.cat-section > summary:hover {
  background: transparent !important;
  color: var(--text-ink-soft) !important;
}
.cat-section > summary .cat-badge {
  background: none !important;
  border: none !important;
  color: inherit !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  border-radius: 0 !important;
}
.cat-section > summary .cat-count {
  margin-left: auto !important;
  font-size: var(--text-xs) !important;
  font-weight: 400 !important;
  color: var(--text-ink-faint) !important;
}
.cat-section > summary .chevron-icon {
  font-size: 0.65rem;
  color: var(--text-ink-faint);
  opacity: 0.6;
}


/* ---- 5. Issue card rows ---- */
.ic-page {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: var(--text-xs) !important;
  font-weight: 400 !important;
  color: var(--text-ink-faint) !important;
  border-radius: 0 !important;
}
.ic-page::after {
  content: ' ·';
  color: var(--text-ink-faint);
  font-weight: 400;
  margin-left: 0.2em;
}
.ic-category-pill {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  opacity: 1 !important;
  color: var(--accent-navy) !important;
}
.issue-card[data-severity="HIGH"] .ic-category-pill {
  color: var(--accent-burgundy) !important;
}
/* .ic-desc consolidated in editorial redesign section below */
.issue-card-header {
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2) !important;
  gap: 0.5rem 0.6rem !important;
  flex-wrap: nowrap !important;
  border-bottom: 1px solid var(--border-hairline);
  transition: background var(--transition-fast);
}
.issue-card-header:hover {
  background: rgba(27, 58, 92, 0.03);
}


/* Context panel rules consolidated in editorial redesign section below */


/* ---- 7. Summary strip typography ---- */
.ss-verdict {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  font-weight: 400 !important;
  color: var(--text-ink) !important;
  gap: var(--space-2) !important;
  align-items: baseline !important;
}
.ss-verdict > span:first-child {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: var(--text-base) !important;
  color: var(--text-ink) !important;
}
.ss-verdict .count-high {
  color: var(--text-ink-faint) !important;
  font-weight: 400 !important;
}
.ss-verdict .count-med {
  color: var(--text-ink-faint) !important;
  font-weight: 400 !important;
}
.ss-actions-row button {
  border: none !important;
  background: none !important;
  color: var(--accent-navy) !important;
  font-weight: 500 !important;
  font-size: var(--text-sm) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color var(--transition-fast);
}
.ss-actions-row button:hover {
  border: none !important;
  background: none !important;
  color: var(--accent-navy) !important;
  text-decoration-color: var(--accent-navy) !important;
  transform: none !important;
  box-shadow: none !important;
}
.ss-row1 {
  align-items: baseline !important;
}
.ss-row2 {
  font-size: var(--text-xs) !important;
  color: var(--text-ink-faint) !important;
}


/* Hide long group description subtitle — short name is enough */
.group-section > summary .group-desc {
  display: none !important;
}
/* Hide group icons — editorial, not dashboard */
.group-section > summary .group-icon {
  display: none !important;
}

/* ---- 8. Misc — readable spacing ---- */
.cat-section {
  margin: var(--space-4) 0 !important;
}
.issue-cards {
  padding: var(--space-2) 0 var(--space-2) var(--space-4) !important;
  border-left: 1px solid var(--border-hairline) !important;
  margin-left: var(--space-2) !important;
}

/* cp-description, cp-block-text, cp-explanation consolidated in editorial redesign section below */

/* ============================================================
   PROGRESS VIEW ENHANCEMENTS
   Book info card, progress steps list, literary quote
   ============================================================ */

/* Progress book card and pbc-* base rules consolidated in editorial refinement section below */

/* Progress steps list */
.progress-steps {
  max-width: 400px;
  margin: var(--space-6) auto;
  list-style: none;
  padding: 0;
}
.progress-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-ink-faint);
  transition: color 0.3s ease;
}
.progress-step.active {
  color: var(--text-ink);
  font-weight: 500;
}
.progress-step.completed {
  color: var(--accent-green);
}
.progress-step .step-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.progress-step.completed .step-icon::before {
  content: '\2713';
  color: var(--accent-green);
}
.progress-step.active .step-icon::before {
  content: '\25CF';
  color: var(--accent-navy);
  font-size: 8px;
}
.progress-step.pending .step-icon::before {
  content: '\25CB';
  color: var(--border-color);
  font-size: 8px;
}

/* Quote + tips base rules consolidated in editorial redesign section below */
@keyframes quoteFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Chapter Timeline — editorial ruler ===== */
.chapter-timeline {
  max-width: none;
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-3) 0;
}
.chapter-timeline-track {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  position: relative;
}
.chapter-timeline-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--border-hairline);
  transform: translateY(-6px);
}
.ctl-marker {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  position: relative;
  z-index: 1;
}
.ctl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-0);
  border: 1.5px solid var(--border-color);
  transition: all 0.5s ease;
}
.ctl-marker.active .ctl-dot {
  background: var(--accent-navy);
  border-color: var(--accent-navy);
  box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.12);
}
.ctl-marker.done .ctl-dot {
  background: var(--accent-green);
  border-color: var(--accent-green);
}
.ctl-label {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  color: var(--text-ink-faint);
  letter-spacing: 0.02em;
  opacity: 0.7;
}
.ctl-marker.active .ctl-label {
  color: var(--accent-navy);
  font-weight: 600;
  opacity: 1;
}
.ctl-marker.done .ctl-label {
  color: var(--accent-green);
  opacity: 0.8;
}

/* ===== Progress Notify Button — understated ghost ===== */
.progress-notify-btn {
  display: block;
  max-width: none;
  margin: var(--space-6) 0 0;
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-ink-faint);
  cursor: pointer;
  transition: all var(--transition-base);
  width: fit-content;
}
.progress-notify-btn:hover {
  border-color: var(--accent-navy);
  color: var(--accent-navy);
  background: transparent;
}
.progress-notify-btn.enabled {
  border-color: var(--accent-green);
  color: var(--accent-green);
  cursor: default;
  background: transparent;
}

/* ===== Progress Quote — pull-quote framing ===== */
.progress-quote .pq-rule {
  width: 48px;
  height: 1px;
  background: var(--border-color);
  margin: 0 auto;
}
.progress-quote .pq-rule:first-child {
  margin-bottom: var(--space-5);
}
.progress-quote .pq-rule:last-child {
  margin-top: var(--space-5);
}

/* Progress ring rules consolidated in editorial redesign section (~line 13300+) */

/* ===== Step cards: quiet editorial rows, not dashboard cards ===== */
#view-progress .step-cards {
  padding-left: 0;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}
#view-progress .step-cards::before {
  display: none; /* remove vertical timeline line */
}
#view-progress .step-card {
  padding: var(--space-2) 0;
  gap: var(--space-3);
  background: transparent !important;
}
#view-progress .step-card .step-status {
  width: 20px;
  height: 20px;
  font-size: 0.7rem;
  border: none;
  background: transparent;
  animation: none !important;
}
#view-progress .step-card.pending .step-status {
  color: var(--text-ink-faint);
  border: 1px solid var(--border-hairline);
  border-radius: 50%;
}
#view-progress .step-card.active .step-status {
  color: var(--text-ink);
  background: transparent;
}
#view-progress .step-card.done .step-status {
  color: var(--color-green);
  background: transparent;
}
#view-progress .step-card.error .step-status {
  color: var(--color-red);
  background: transparent;
}
#view-progress .step-card .step-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-ink-soft);
}
#view-progress .step-card.active .step-label {
  color: var(--text-ink);
  font-weight: 600;
}
#view-progress .step-card .step-detail {
  font-size: 0.8rem;
  color: var(--text-ink-faint);
}

/* ===== Chapter info panel: strip box, make inline text ===== */
#view-progress .chapter-info-panel {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-ink-faint);
}
#view-progress .chapter-info-panel .chapter-scope {
  font-weight: 400;
  color: var(--text-ink-faint);
}
#view-progress .chapter-info-panel .ch-tag {
  border: none;
  background: transparent;
  padding: 0;
  font-size: var(--text-xs);
}
#view-progress .chapter-info-panel .ch-tag.matched {
  background: transparent;
  border: none;
  font-weight: 500;
  color: var(--text-ink-soft);
}

/* ============================================================
   RESULTS VIEW FIXES
   ic-desc clamp, card padding, grid ratio, filter row
   ============================================================ */

/* ============================================================
   EDITORIAL TWO-PANE — Results View Redesign
   Philosophy: "Library, not dashboard." Remove borders,
   let whitespace be the border.
   ============================================================ */

/* --- Workspace: 40/60 split, wider canvas --- */
.results-workspace {
  max-width: var(--container-max) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 2fr 3fr !important;
  gap: 0 !important;
}

/* --- Left pane: editorial margin (issue index) --- */
.results-issue-list {
  overflow-y: auto !important;
  max-height: calc(100vh - 200px) !important;
  border-right: 1px solid var(--border-hairline) !important;
  padding: var(--space-4) var(--space-5) var(--space-4) 0 !important;
}

/* --- Right pane: the working desk --- */
.results-context-panel {
  position: sticky !important;
  top: 68px !important;
  max-height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
  background: transparent !important;
  border-left: 1px solid var(--border-hairline) !important;
  box-shadow: none !important;
  z-index: auto !important;
  transform: none !important;
  transition: none !important;
  padding: var(--space-8) clamp(28px, 4vw, 52px) !important;
  border-radius: 0 !important;
}
.results-context-panel.panel-open {
  transform: none !important;
}

/* --- Issue cards: flat list entries, not boxes --- */
.issue-card {
  border-bottom: none !important;
  border-left: 3px solid transparent !important;
  padding-left: var(--space-3) !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}
.issue-card:hover {
  background: var(--bg-paper-alt) !important;
}
.issue-card[data-severity="HIGH"] {
  border-left-color: var(--accent-burgundy) !important;
}
.issue-card[data-severity="MEDIUM"] {
  border-left-color: var(--text-ink-faint) !important;
}
.issue-card[data-severity="LOW"] {
  border-left-color: transparent !important;
}
.issue-card.ws-active {
  background: transparent !important;
  border-left-color: var(--accent-navy) !important;
}
.issue-card[data-severity="HIGH"].ws-active {
  border-left-color: var(--accent-burgundy) !important;
}

/* --- Issue card header: two-row layout --- */
.issue-card-header {
  padding: var(--space-3) 0 !important;
  gap: var(--space-2) !important;
  flex-wrap: wrap !important;
  border-bottom: 1px solid var(--border-hairline);
}

/* Page badge: quiet, no background */
.ic-page {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--text-ink-faint) !important;
}

/* Category pill: no border, just text */
.ic-category-pill {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  opacity: 0.6 !important;
  font-size: 0.6rem !important;
}

/* Description: show 4 lines, full width */
.ic-desc {
  -webkit-line-clamp: 4 !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.6 !important;
  color: var(--text-ink-soft) !important;
  flex-basis: 100% !important;
  order: 1 !important;
  margin-top: var(--space-1) !important;
}
.issue-card.ws-active .ic-desc {
  color: var(--text-ink) !important;
}

/* cp-* and footer consolidated in editorial redesign section below */

/* --- Filter bar: compact --- */
.filter-dismissed-row {
  flex-wrap: nowrap !important;
}
.filter-dismissed-row > * {
  white-space: nowrap !important;
}
.dismissed-toggle {
  white-space: nowrap !important;
}
#filter-resolution {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  flex-shrink: 0 !important;
}

/* --- Mobile: stack vertically --- */
@media (max-width: 900px) {
  .results-workspace {
    grid-template-columns: 1fr !important;
  }
  .results-issue-list {
    max-height: none !important;
    overflow-y: visible !important;
    border-right: none !important;
    padding-right: 0 !important;
  }
  .results-context-panel {
    position: relative !important;
    top: 0 !important;
    max-height: none !important;
    border-top: 1px solid var(--border-hairline) !important;
    margin-top: var(--space-4) !important;
    padding: var(--space-4) !important;
  }
}
.cp-close-btn { display: none !important; }
@media (max-width: 900px) { .cp-close-btn { display: block !important; } }

/* Close button for context panel */
.cp-close-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-ink-faint);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
  z-index: 1;
}
.cp-close-btn:hover {
  color: var(--text-ink);
}

/* Fix 3: Issue text — left-aligned */
.issue-card-header {
  text-align: left !important;
}
.ic-desc {
  text-align: left !important;
}

/* Fix 4: Compact summary strip and filter toolbar */
#summary-strip {
  padding: var(--space-3) 0 !important;
  margin-bottom: var(--space-2) !important;
}
.filter-toolbar-v2 {
  padding: var(--space-2) 0 !important;
  margin-bottom: var(--space-2) !important;
}
.analytics-panel {
  display: none !important;
}

/* --- Group section headers: flat serif dividers, not boxes --- */
.group-section > summary {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  padding: var(--space-3) 0 !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-ink-faint) !important;
}
.group-section > summary:hover {
  background: transparent !important;
}
.group-section.group-spelling > summary {
  background: transparent !important;
  border-left: none !important;
  color: var(--text-ink-faint) !important;
}
[data-theme="dark"] .group-section > summary,
[data-theme="dark"] .group-section.group-spelling > summary {
  background: transparent !important;
}

/* --- Category sub-headers: quiet text --- */
.cat-section > summary {
  background: transparent !important;
  border: none !important;
  padding: var(--space-2) 0 !important;
}

/* --- Issue cards in results: flat list, no boxes --- */
.results-workspace .issue-card {
  border: none !important;
  border-left: 3px solid transparent !important;
  border-bottom: none !important;
  background: transparent !important;
  padding-left: var(--space-3) !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
.results-workspace .issue-card:hover {
  background: var(--bg-paper-alt) !important;
  box-shadow: none !important;
  transform: none !important;
}
.results-workspace .issue-card[data-severity="HIGH"] {
  border-left-color: var(--accent-burgundy) !important;
}
.results-workspace .issue-card[data-severity="MEDIUM"] {
  border-left-color: var(--text-ink-faint) !important;
}
.results-workspace .issue-card.ws-active {
  background: transparent !important;
  border-left-color: var(--accent-navy) !important;
}
.results-workspace .issue-card[data-severity="HIGH"].ws-active {
  border-left-color: var(--accent-burgundy) !important;
}
.results-workspace .issue-card-header {
  padding: var(--space-3) var(--space-2) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition-fast) !important;
}
.results-workspace .issue-card-header:hover {
  background: rgba(27, 58, 92, 0.02) !important;
}

/* --- Group section margin: tighter --- */
.group-section {
  margin-bottom: var(--space-4) !important;
}

/* ============================================================
   UPLOAD VIEW — Structured card feel
   ============================================================ */

/* Fix 5: Page-level container card for upload */
#view-upload {
  background: var(--bg-paper) !important;
}

#view-upload > article,
#article-upload,
#article-checks {
  background: #FFFFFF !important;
  border: 1px solid #EDEBE7 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  padding: var(--space-8) clamp(24px, 4vw, 40px) !important;
  max-width: none !important;
  margin: 0 0 var(--space-6) !important;
  transition: box-shadow var(--transition-fast) !important;
}
#view-upload > article:hover,
#article-upload:hover,
#article-checks:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* Fix 7: Helper text under check toggles */
.check-hint {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-ink-faint);
  margin-top: var(--space-3);
  font-style: normal;
  text-align: left;
}

/* Feature strip — editorial colophon between drop zones and checks */
/* .upload-features-strip / .uf-item base rules → overridden by Detail Pass (~line 14733+) */

/* ============================================================
   PROGRESS VIEW — Editorial waiting experience
   Goal: calm, library-like richness for a 2–10 min wait.
   Targets only #view-progress scope — no bleed to other views.
   ============================================================ */

/* --- Viewport-width burgundy reading bar (fixed, top of screen) ---
     Relies on CSS custom property --pct set by JS on <progress>.
     Falls back gracefully if JS doesn't set it: bar stays at 0.
     The progress element itself stays in the DOM for ARIA/JS but
     is visually hidden — the fixed bar IS the progress indicator. */
@keyframes progress-shimmer {
  0%   { opacity: 1; }
  50%  { opacity: 0.9; }
  100% { opacity: 1; }
}

#view-progress progress#progress-bar {
  /* Keep 1px in the layout so JS can still read/set it */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Fixed top reading bar — thin burgundy line, like a bookmark ribbon */
#view-progress::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: var(--progress-pct, 0%);
  background: var(--accent-burgundy);
  z-index: 9999;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: left center;
  opacity: 0.85;
}

/* --- Percentage numeral display ---
     Unhide the ring container but strip it down to just the
     text — the SVG circle is hidden, only the large number shows. */
#view-progress .progress-ring-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin: 0 0 var(--space-6) !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
}

#view-progress .progress-ring-wrap {
  /* Show only the center text; collapse the SVG */
  width: auto !important;
  height: auto !important;
  position: static !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

#view-progress .progress-ring-wrap svg {
  display: none !important;
}

#view-progress .progress-ring-center {
  position: static !important;
  transform: none !important;
  display: block !important;
}

/* Ring pct/stats/label/issues consolidated in editorial refinement section below */

/* Brighten numeral as progress advances */
#view-progress .progress-ring-wrap[aria-valuenow="100"] .progress-ring-pct {
  color: var(--accent-green) !important;
  animation: none !important;
}

/* --- Page heading — quiet, editorial whisper --- */
#view-progress h2 {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  margin-bottom: var(--space-6) !important;
  color: var(--text-ink-faint) !important;
  opacity: 0.6 !important;
}

/* Progress content, elapsed/eta, book card, pbc-* consolidated in editorial refinement section below */

/* --- Literary quote block — the centrepiece of the wait --- */
.progress-quote {
  max-width: none !important;
  margin: var(--space-10, 40px) 0 0 !important;
  text-align: center !important;
  padding: var(--space-8) var(--space-6) !important;
  border-top: none !important;
  position: relative !important;
  animation: quoteFadeIn 1s ease !important;
}

/* Decorative thin rule above and below — like a section break in a book */
.progress-quote::before,
.progress-quote::after {
  content: '';
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--border-color);
  margin: 0 auto var(--space-5);
}
.progress-quote::after {
  margin: var(--space-5) auto 0;
}

.progress-quote .pq-text {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: var(--text-lead, 1.125rem) !important;
  color: var(--text-ink-soft) !important;
  line-height: 1.8 !important;
  letter-spacing: 0.005em !important;
  margin-bottom: var(--space-3) !important;
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
}

.progress-quote .pq-attr {
  font-family: var(--font-sans) !important;
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-ink-faint) !important;
  opacity: 0.7 !important;
}

/* --- Editorial tips — margin note with burgundy accent --- */
.progress-tips {
  max-width: none !important;
  margin: var(--space-6) 0 0 !important;
  padding: var(--space-4) var(--space-5) !important;
  background: var(--bg-paper-alt) !important;
  border: none !important;
  border-left: 2px solid var(--accent-burgundy) !important;
  border-radius: 0 2px 2px 0 !important;
  text-align: left !important;
}

.progress-tips-label {
  font-family: var(--font-sans) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--accent-burgundy) !important;
  margin-bottom: var(--space-3) !important;
  opacity: 0.65;
}

.progress-tip-text {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-ink-soft) !important;
  line-height: 1.75 !important;
  margin: 0 !important;
  transition: opacity 0.5s ease !important;
}

/* Tip fade-out animation hook (JS adds/removes .fading) */
.progress-tip-text.fading {
  opacity: 0 !important;
}

/* --- Cancel button — whisper-quiet text link, plenty of space above --- */
#view-progress #btn-cancel {
  display: block !important;
  margin: var(--space-10, 40px) 0 0 !important;
  background: transparent !important;
  color: var(--text-ink-faint) !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  opacity: 0.5 !important;
  transition: opacity var(--transition-fast), color var(--transition-fast), text-decoration-color var(--transition-fast) !important;
}
#view-progress #btn-cancel:hover {
  color: var(--text-ink-soft) !important;
  background: transparent !important;
  border: none !important;
  text-decoration-color: currentColor;
  opacity: 1 !important;
}
#view-progress #btn-cancel.outline,
#view-progress #btn-cancel.secondary {
  background: transparent !important;
  border: none !important;
  color: var(--text-ink-faint) !important;
}
#view-progress #btn-cancel i {
  display: none;
}

/* --- Mobile adjustments --- */
@media (max-width: 600px) {
  .progress-quote {
    padding: var(--space-6) var(--space-2) !important;
  }
  .progress-quote .pq-text {
    font-size: 1rem !important;
  }
  #view-progress > article {
    padding: var(--space-8) var(--space-4) var(--space-6) !important;
  }
  #view-progress .progress-ring-pct {
    font-size: 3rem !important;
  }
}

#summary-strip .ss-verdict {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: var(--text-lead) !important;
  color: var(--text-ink) !important;
}
#summary-strip .ss-verdict > span:first-child {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}
#summary-strip .ss-verdict .count-high,
#summary-strip .ss-verdict .count-med {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

.filter-toolbar-v2 {
  border-bottom: 1px solid var(--border-hairline) !important;
  padding: var(--space-2) 0 !important;
  margin-bottom: 0 !important;
}
.ftv2-row1 {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  min-height: 36px !important;
}
.ftv2-search {
  max-width: 180px !important;
  transition: max-width var(--transition-base) !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-1) var(--space-3) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
}
.ftv2-search:focus {
  max-width: 280px !important;
  border-color: var(--accent-navy) !important;
}
.filter-collapsible {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height var(--transition-base), padding var(--transition-base) !important;
  padding: 0 !important;
  border-top: none !important;
}
.filter-collapsible.expanded {
  max-height: 200px !important;
  padding: var(--space-3) 0 !important;
  border-top: 1px solid var(--border-hairline) !important;
}
.filter-collapsible select {
  font-size: var(--text-sm) !important;
  border: 1px solid var(--border-hairline) !important;
  background: transparent !important;
  padding: var(--space-1) var(--space-3) !important;
}
.quick-chip {
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  padding: 2px 10px !important;
  border-radius: 2px !important;
  border: 1px solid var(--border-hairline) !important;
  background: transparent !important;
  color: var(--text-ink-soft) !important;
  transition: all var(--transition-fast) !important;
}
.quick-chip.active {
  background: var(--accent-navy) !important;
  color: white !important;
  border-color: var(--accent-navy) !important;
}
.quick-chip:hover:not(.active) {
  border-color: var(--text-ink-faint) !important;
}
.ftv2-filter-btn {
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-ink-faint) !important;
  padding: var(--space-1) var(--space-2) !important;
  cursor: pointer !important;
}
.ftv2-filter-btn:hover {
  color: var(--text-ink-soft) !important;
}
.filter-badge {
  font-size: 0.65rem !important;
  color: var(--accent-navy) !important;
  font-weight: 600 !important;
}

.results-workspace .issue-card .ic-page {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--text-ink-faint) !important;
  text-transform: lowercase !important;
}
.results-workspace .issue-card .ic-category-pill {
  font-family: var(--font-sans) !important;
  font-size: 0.7rem !important;
  text-transform: none !important;
  letter-spacing: 0.06em !important;
  color: var(--text-ink-soft) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  opacity: 1 !important;
}
.results-workspace .issue-card .ic-desc {
  position: relative !important;
  overflow: hidden !important;
}
.results-workspace .issue-card .ic-page::after {
  content: '\00B7' !important;
  margin: 0 var(--space-2) !important;
  color: var(--text-ink-faint) !important;
  font-style: normal !important;
}
.results-workspace .issue-card.ws-active {
  background: transparent !important;
}
.results-workspace .issue-card.ws-active .ic-page {
  color: var(--text-ink) !important;
  font-weight: 600 !important;
}
.results-workspace .issue-card.ws-active .ic-desc {
  color: var(--text-ink) !important;
}
.results-workspace .issue-card[data-severity="MEDIUM"] {
  border-left-color: var(--color-amber) !important;
}

.cp-category-heading {
  font-family: var(--font-serif) !important;
  font-size: var(--text-lead) !important;
  font-weight: 600 !important;
  color: var(--text-ink) !important;
  text-transform: none !important;
  display: flex !important;
  align-items: baseline !important;
  gap: var(--space-2) !important;
}
.cp-category-heading .ic-category-pill {
  font-family: var(--font-serif) !important;
  font-size: var(--text-lead) !important;
  font-weight: 600 !important;
  font-variant: normal !important;
  text-transform: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--text-ink) !important;
}
.cp-category-heading .ic-page {
  font-family: var(--font-serif) !important;
  font-size: var(--text-sm) !important;
  font-style: italic !important;
  color: var(--text-ink-faint) !important;
}
.cp-description {
  font-size: var(--text-base) !important;
  line-height: 1.75 !important;
  color: var(--text-ink-soft) !important;
  padding: 0 !important;
  margin-top: var(--space-4) !important;
}
.cp-divider {
  border: none !important;
  border-top: 1px solid var(--border-hairline) !important;
  margin: var(--space-3) 0 !important;
}
.cp-block-label {
  font-family: var(--font-sans) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  font-variant: small-caps !important;
  text-transform: lowercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-ink-faint) !important;
  margin-bottom: var(--space-2) !important;
}
.cp-block-text {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid var(--border-color) !important;
  border-radius: 0 !important;
  padding: var(--space-2) var(--space-4) !important;
  font-size: var(--text-base) !important;
  line-height: 1.7 !important;
}
.cp-block-text.cp-source {
  border-left-color: var(--border-color) !important;
  color: var(--text-ink-soft) !important;
  background: transparent !important;
}
.cp-block-text.cp-translation {
  border-left-color: var(--accent-navy) !important;
  color: var(--text-ink) !important;
  background: transparent !important;
}
.cp-block-text.cp-suggestion {
  border-left-color: var(--color-green) !important;
  color: var(--text-ink) !important;
  font-weight: 500 !important;
  background: transparent !important;
}
.cp-footer {
  margin-top: var(--space-6) !important;
  padding-top: var(--space-4) !important;
  border-top: 1px solid var(--border-hairline) !important;
  display: flex !important;
  gap: var(--space-8) !important;
  justify-content: flex-start !important;
}
.cp-footer .res-btn {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  padding: var(--space-2) var(--space-4) !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast) !important;
  text-decoration: underline !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 3px !important;
}
.cp-footer .res-btn.res-accept {
  color: var(--color-green) !important;
}
.cp-footer .res-btn.res-accept:hover {
  text-decoration-color: var(--color-green) !important;
}
.cp-footer .res-btn.res-dismiss {
  color: var(--accent-burgundy) !important;
}
.cp-footer .res-btn.res-dismiss:hover {
  text-decoration-color: var(--accent-burgundy) !important;
}
.cp-footer .res-btn.active {
  font-weight: 600 !important;
  text-decoration-color: currentColor !important;
}

.group-section > summary {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  padding: var(--space-4) 0 var(--space-3) !important;
  border-bottom: 1px solid var(--border-thin) !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text-ink-soft) !important;
  cursor: pointer !important;
}
.group-section > summary .group-icon {
  display: none !important;
}
.group-section > summary .group-count {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-size: var(--text-xs) !important;
  color: var(--text-ink-faint) !important;
  font-weight: 400 !important;
  margin-left: auto !important;
}
.group-section > summary .group-desc {
  display: none !important;
}
.cat-section > summary {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  padding: var(--space-2) 0 !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  cursor: pointer !important;
}
.cat-section > summary .cat-badge {
  font-family: var(--font-sans) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.06em !important;
  color: var(--text-ink-faint) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.cat-section > summary .cat-count {
  font-family: var(--font-sans) !important;
  font-size: 0.65rem !important;
  color: var(--text-ink-faint) !important;
  vertical-align: super !important;
  font-weight: 400 !important;
}
.group-section > summary .chevron-icon,
.cat-section > summary .chevron-icon {
  font-size: 0.6rem !important;
  color: var(--text-ink-faint) !important;
  transition: transform var(--transition-fast) !important;
}
.group-section[open] > summary .chevron-icon,
.cat-section[open] > summary .chevron-icon {
  transform: rotate(90deg) !important;
}

.cp-running-header {
  font-family: var(--font-sans) !important;
  font-size: 0.65rem !important;
  font-variant: small-caps !important;
  text-transform: lowercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-ink-faint) !important;
  margin-bottom: var(--space-3) !important;
}

/* ================================================
   EDITORIAL REFINEMENT: PROGRESS PAGE
   ================================================ */

/* Progress article — full width, room grid handles layout */
#view-progress > article {
  max-width: none !important;
  width: 100% !important;
  padding: var(--space-8) clamp(40px, 6vw, 80px) var(--space-6) !important;
}

/* Progress content: compact folio layout */
#view-progress .progress-content {
  display: flex !important;
  flex-direction: column !important;
  padding: var(--space-4) 0 var(--space-4) !important;
  gap: 0 !important;
  border-top: 1px solid var(--border-hairline) !important;
}

/* Book card: manuscript title page, not a card widget */
.progress-book-card {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 0 var(--space-3) !important;
  padding: 0 0 var(--space-3) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  max-width: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pbc-icon {
  display: none !important;
}
.pbc-title-row {
  display: block !important;
}
.pbc-filename {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--text-md) !important;
  color: var(--text-ink) !important;
  letter-spacing: -0.01em !important;
  display: block !important;
}
.pbc-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  padding-left: 0 !important;
  gap: var(--space-2) !important;
  margin-top: var(--space-2) !important;
}
.pbc-tag {
  font-family: var(--font-sans) !important;
  font-variant: small-caps !important;
  text-transform: lowercase !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.08em !important;
  color: var(--text-ink-faint) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
.pbc-tag + .pbc-tag::before {
  content: '·' !important;
  margin-right: var(--space-2) !important;
  color: var(--text-ink-faint) !important;
  font-variant: normal !important;
}

/* Progress percentage: large serif numeral, left-aligned */
#view-progress .progress-ring-pct {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(2.5rem, 6vw, 3.5rem) !important;
  line-height: 1 !important;
  color: var(--text-ink-faint) !important;
  letter-spacing: -0.03em !important;
  margin-bottom: var(--space-1) !important;
  animation: progress-shimmer 3s ease-in-out infinite !important;
  transition: color 0.6s ease !important;
}

/* Stats row: status label + issues count sit below the numeral */
#view-progress .progress-ring-stats {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-2) !important;
  margin-top: var(--space-3) !important;
}

/* Status label: italic serif below the numeral */
#view-progress .progress-ring-label {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: var(--text-base) !important;
  color: var(--text-ink-soft) !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  line-height: 1.5 !important;
  margin-bottom: var(--space-2) !important;
}

/* Issues count: quiet sans counter */
#view-progress .progress-ring-issues {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  color: var(--text-ink-faint) !important;
  letter-spacing: 0.04em !important;
  font-variant-numeric: tabular-nums !important;
}

/* Progress bar: 1px editorial hairline, not browser default */
#view-progress .progress-overall {
  margin-bottom: var(--space-4) !important;
}
#view-progress progress {
  height: 1px !important;
  border: none !important;
  background: var(--border-hairline) !important;
  border-radius: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
}
#view-progress progress::-webkit-progress-bar {
  background: var(--border-hairline) !important;
  border-radius: 0 !important;
}
#view-progress progress::-webkit-progress-value {
  background: var(--accent-burgundy) !important;
  border-radius: 0 !important;
  transition: width 0.5s ease !important;
}
#view-progress progress::-moz-progress-bar {
  background: var(--accent-burgundy) !important;
  border-radius: 0 !important;
}

/* Elapsed + ETA: compact tabular row */
#view-progress .elapsed {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--text-ink-faint) !important;
  text-align: left !important;
  margin-top: var(--space-2) !important;
  margin-bottom: 0 !important;
}
#view-progress .progress-eta {
  font-family: var(--font-sans) !important;
  font-size: 0.75rem !important;
  color: var(--text-ink-faint) !important;
  text-align: left !important;
  margin-top: var(--space-1) !important;
}

/* Literary quote: left-aligned blockquote with thin left rule */
.progress-quote {
  text-align: left !important;
  padding: var(--space-4) 0 var(--space-4) var(--space-6) !important;
  margin: var(--space-6) 0 0 !important;
  border-left: 2px solid var(--border-hairline) !important;
  border-top: none !important;
  position: relative !important;
}
/* Remove the centered decorative rules */
.progress-quote::before,
.progress-quote::after {
  display: none !important;
}
.progress-quote .pq-rule {
  display: none !important;
}
.progress-quote .pq-text {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: var(--text-base) !important;
  color: var(--text-ink-soft) !important;
  line-height: 1.7 !important;
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
}
.progress-quote .pq-attr {
  font-family: var(--font-sans) !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-ink-faint) !important;
  display: block !important;
  margin-top: var(--space-2) !important;
  text-align: left !important;
}

/* Tips: margin note, no label header */
.progress-tips {
  margin: var(--space-4) 0 0 !important;
  padding: var(--space-2) 0 var(--space-2) var(--space-5) !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--border-hairline) !important;
  border-radius: 0 !important;
}
.progress-tips-label {
  font-size: 0.55rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-ink-faint) !important;
  opacity: 0.5 !important;
  margin-bottom: var(--space-1) !important;
}
.progress-tip-text {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-ink-faint) !important;
  line-height: 1.6 !important;
}

/* Notify button: pencil-mark marginalia, not form button */
.progress-notify-btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-ink-faint) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  padding: var(--space-2) 0 !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 3px !important;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast) !important;
  margin-top: var(--space-4) !important;
  display: block !important;
}
.progress-notify-btn:hover {
  color: var(--text-ink-soft) !important;
  text-decoration-color: currentColor !important;
  background: transparent !important;
  border: none !important;
}
.progress-notify-btn.enabled {
  color: var(--accent-navy) !important;
  text-decoration-color: var(--accent-navy) !important;
}

/* Status label transition: gentle vertical slide */
#view-progress .progress-ring-label {
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}
#view-progress .progress-ring-label.fading-out {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
}
#view-progress .progress-ring-label.fading-in {
  opacity: 0 !important;
  transform: translateY(4px) !important;
}

@media (max-width: 600px) {
  #view-progress > article {
    max-width: 100% !important;
    padding: var(--space-4) var(--space-3) !important;
  }
  .progress-quote {
    padding-left: var(--space-4) !important;
  }
  .progress-tips {
    padding-left: var(--space-3) !important;
  }
  #view-progress .progress-ring-pct {
    font-size: 2.5rem !important;
  }
}

/* ================================================
   RESULTS PAGE: AGGRESSIVE SPACE REDUCTION
   ================================================ */

/* --- Results article: tighter top padding --- */
#view-results article {
  padding-top: var(--space-2) !important;
}

/* --- Header bar: compact, single line --- */
.results-header {
  padding: var(--space-2) 0 !important;
  margin-bottom: var(--space-1) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  gap: var(--space-2) !important;
  flex-wrap: nowrap !important;
}
.results-header .back-link {
  font-size: var(--text-xs) !important;
  padding: var(--space-1) 0 !important;
  color: var(--text-ink-faint) !important;
  flex-shrink: 0 !important;
}
/* Header action buttons: visually distinct with subtle pill shape */
.header-actions {
  gap: var(--space-1) !important;
  align-items: center !important;
}
.header-actions button,
.header-actions a,
.header-actions .ghost-export {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  border-radius: 3px !important;
  background: var(--bg-paper-alt) !important;
  border: 1px solid var(--border-hairline) !important;
  color: var(--text-ink-soft) !important;
  transition: all var(--transition-fast) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.header-actions .export-dropdown {
  display: inline-flex !important;
  align-items: center !important;
}
.header-actions button:hover,
.header-actions a:hover,
.header-actions .ghost-export:hover {
  background: var(--surface-3) !important;
  border-color: var(--border-thin) !important;
  color: var(--text-ink) !important;
  transform: none !important;
  box-shadow: none !important;
}
.header-actions button i,
.header-actions .ghost-export i {
  font-size: 0.7rem !important;
}

/* --- Scope banner: ultra-compact --- */
.scope-banner {
  padding: var(--space-1) 0 !important;
  margin-bottom: var(--space-1) !important;
  font-size: var(--text-xs) !important;
  border-bottom: none !important;
}

/* --- Summary strip: compact single row, hide duplicate actions --- */
#summary-strip.summary-strip {
  padding: var(--space-2) 0 !important;
  margin-bottom: var(--space-1) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  gap: var(--space-2) !important;
}
/* Hide duplicate action buttons in summary strip */
#summary-strip .ss-actions-row {
  display: none !important;
}
/* Verdict: smaller, tighter */
#summary-strip .ss-verdict {
  font-size: var(--text-base) !important;
}
#summary-strip .ss-verdict > span:first-child {
  font-size: var(--text-base) !important;
}
/* Row 2 (file info): inline, tiny */
#summary-strip .ss-row2 {
  font-size: var(--text-xs) !important;
  color: var(--text-ink-faint) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#summary-strip .ss-row1 {
  margin-bottom: 0 !important;
}

/* --- Filter toolbar: ultra-compact, no bottom gap --- */
.filter-toolbar-v2 {
  padding: var(--space-1) 0 !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
}
.ftv2-row1 {
  min-height: 28px !important;
  gap: var(--space-2) !important;
}
/* Quick filter chips: compact pills */
.quick-filters {
  gap: var(--space-1) !important;
}
.quick-chip {
  font-size: 0.65rem !important;
  padding: 2px 10px !important;
}
/* Search: smaller */
.ftv2-search {
  max-width: 140px !important;
  padding: 2px var(--space-2) !important;
  font-size: var(--text-xs) !important;
  height: 26px !important;
}
.ftv2-search:focus {
  max-width: 220px !important;
}
/* Filter button: smaller */
.ftv2-filter-btn {
  font-size: var(--text-xs) !important;
  padding: 2px var(--space-2) !important;
}
/* Active filter pills: compact */
.ftv2-active-pills {
  gap: var(--space-1) !important;
  margin-top: var(--space-1) !important;
}

/* --- Ensure filter collapsible starts hidden --- */
.filter-collapsible:not(.expanded) {
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: none !important;
}

/* --- Results workspace: start closer to top --- */
.results-workspace {
  margin-top: var(--space-1) !important;
}

/* --- Bottom export bar: editorial refinement --- */
.results-export-bar {
  background: var(--bg-paper) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: var(--space-3) var(--space-8) !important;
  box-shadow: 0 -4px 12px rgba(44,44,44,0.04) !important;
  gap: var(--space-6) !important;
}
.results-export-bar .export-bar-pdf {
  font-size: var(--text-sm) !important;
  padding: 6px 16px !important;
  border: 1px solid var(--accent-navy) !important;
  border-radius: 3px !important;
}
.results-export-bar .export-bar-share,
.results-export-bar .export-bar-resolve-all {
  font-size: var(--text-sm) !important;
  padding: 6px 12px !important;
}

/* --- ProofView header: editorial badge --- */
.pv-issue-badge {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: var(--text-ink-faint) !important;
}

/* --- Summary + file info: allow wrap on single line --- */
#summary-strip .ss-row1 {
  flex-wrap: wrap !important;
}
#summary-strip .ss-row2 {
  border-top: none !important;
  padding-top: 0 !important;
}

/* --- Mobile: stack summary more compactly --- */
@media (max-width: 900px) {
  .results-header {
    flex-wrap: wrap !important;
  }
  .header-actions {
    flex-wrap: wrap !important;
  }
}

/* ============================================================
   UPLOAD PAGE VISUAL POLISH — March 2026
   Cohesive refinements: warmer file states, better transitions,
   editorial rhythm between sections.
   ============================================================ */

/* File clear button — warmer, more visible on green bg */
.drop-zone.has-file .file-clear-btn {
  color: var(--text-ink-soft) !important;
}
.drop-zone.has-file .file-clear-btn:hover {
  color: var(--accent-burgundy) !important;
}

/* Drop zone has-file: hide the drop prompts, show only filename */
.drop-zone.has-file .drop-label,
.drop-zone.has-file .drop-sublabel {
  display: none !important;
}
.drop-zone.has-file .drop-icon {
  font-size: 1.5rem !important;
  margin-bottom: var(--space-2) !important;
}

/* Mode description — breathe between toggle and cards */
#view-upload .mode-description {
  margin-bottom: var(--space-8) !important;
}

/* Check hint — lighter, more editorial feel */
.check-hint {
  font-style: italic !important;
  opacity: 0.8 !important;
}

/* Advanced settings — extra top margin for breathing room */
.inline-adv-settings {
  margin-top: var(--space-6) !important;
}

/* Upload view mobile: ensure single column stacks well */
@media (max-width: 640px) {
  #view-upload {
    padding: var(--space-8) var(--space-4) var(--space-12) !important;
  }
  #view-upload > article,
  #article-upload,
  #article-checks {
    padding: var(--space-6) var(--space-5) !important;
  }
  .service-mode-toggle {
    gap: var(--space-6) !important;
  }
  .mode-btn {
    font-size: var(--text-sm) !important;
  }
  .drop-zone,
  .file-drop-zone {
    min-height: 130px !important;
    padding: var(--space-6) var(--space-4) !important;
  }
}

/* ============================================================
   RESULTS PAGE VISUAL POLISH — March 2026
   "Editorial Two-Pane" refinements: flat list, rich desk,
   typographic hierarchy, generous reading.
   ============================================================ */

/* --- Left pane scrollbar: minimal, editorial --- */
.results-issue-list::-webkit-scrollbar {
  width: 4px;
}
.results-issue-list::-webkit-scrollbar-track {
  background: transparent;
}
.results-issue-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}
.results-issue-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-ink-faint);
}

/* --- Right pane scrollbar: match --- */
.results-context-panel::-webkit-scrollbar {
  width: 4px;
}
.results-context-panel::-webkit-scrollbar-track {
  background: transparent;
}
.results-context-panel::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

/* --- Issue description: allow 2 lines in flat list --- */
.results-workspace .ic-desc {
  -webkit-line-clamp: 2 !important;
  font-size: var(--text-sm) !important;
  line-height: 1.5 !important;
  color: var(--text-ink) !important;
}

/* --- Active issue card: warm desk highlight --- */
.results-workspace .issue-card.ws-active {
  background: rgba(27, 58, 92, 0.04) !important;
  border-left-width: 3px !important;
  border-left-color: var(--accent-navy) !important;
}
.results-workspace .issue-card[data-severity="HIGH"].ws-active {
  background: rgba(139, 37, 0, 0.03) !important;
}

/* --- Context panel: smooth entrance animation --- */
.cp-detail {
  animation: cpFadeIn 0.25s ease;
}
@keyframes cpFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Context panel description: override to base size for reading --- */
#view-results .cp-description {
  font-size: var(--text-base) !important;
  line-height: 1.75 !important;
  color: var(--text-ink) !important;
}

/* --- Context panel text blocks: transparent, border-accent only --- */
#view-results .cp-block-text {
  background: transparent !important;
  border-radius: 0 !important;
  padding: var(--space-3) var(--space-5) !important;
  font-size: var(--text-base) !important;
  line-height: 1.75 !important;
}
#view-results .cp-block-text.cp-source {
  border-left: 2px solid var(--border-color) !important;
}
#view-results .cp-block-text.cp-translation {
  border-left: 3px solid var(--accent-navy) !important;
}
#view-results .cp-block-text.cp-suggestion {
  border-left: 3px solid var(--accent-green) !important;
  background: transparent !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

/* --- Diff block: stacked before/after (track-changes style) --- */
.cp-block-diff {
  gap: 0 !important;
}
.cp-block-diff .cp-block-label {
  margin-bottom: var(--space-3) !important;
}
#view-results .cp-block-text.cp-diff-current {
  border-left: 3px solid var(--accent-burgundy) !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(139, 37, 0, 0.35) !important;
  text-decoration-thickness: 1.5px !important;
  color: var(--text-ink-faint) !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-2) var(--space-5) !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
  opacity: 0.7 !important;
}
#view-results .cp-block-text.cp-diff-suggested {
  border-left: 3px solid var(--accent-green) !important;
  color: var(--text-ink) !important;
  font-weight: 500 !important;
  padding: var(--space-3) var(--space-5) !important;
  margin-top: 0 !important;
  background: rgba(46, 90, 68, 0.02) !important;
}

/* --- Context panel explanation: reading-optimized --- */
#view-results .cp-explanation {
  font-size: var(--text-sm) !important;
  line-height: 1.8 !important;
  color: var(--text-ink-soft) !important;
}

/* --- Page number in list: quieter --- */
.results-workspace .ic-page {
  font-variant-numeric: tabular-nums !important;
}

/* --- Flat page header — section break in page-grouped mode --- */
.flat-page-header {
  margin-top: var(--space-5) !important;
  padding-bottom: var(--space-2) !important;
}

/* --- Results mobile: full-width panes --- */
@media (max-width: 768px) {
  #view-results {
    padding: var(--space-4) var(--space-3) !important;
  }
  .results-context-panel {
    padding: var(--space-5) var(--space-4) !important;
  }
  .results-workspace .issue-card.ws-active {
    background: var(--bg-paper-alt) !important;
  }
}

/* --- Results tablet: narrower left pane --- */
@media (max-width: 1024px) and (min-width: 769px) {
  .results-workspace {
    grid-template-columns: 35fr 65fr !important;
  }
}

/* ============================================================
   LANDING PAGE VISUAL POLISH — March 2026
   Elevate the editorial folio feel on scroll-down sections.
   ============================================================ */

/* --- Hero h1: ensure adequate breathing below --- */
.hero-text h1 {
  margin-bottom: var(--space-6) !important;
}

/* --- How It Works separator: thinner hairline --- */
.how-step-separator {
  background: var(--border-hairline) !important;
}

/* --- Checks section: softer intro paragraph color --- */
.checks-intro p {
  max-width: 620px;
}

/* --- Check label: no underline by default, reveal on hover --- */
.check-label {
  border-bottom-color: transparent !important;
}
.check-item:hover .check-label,
.check-item--primary .check-label {
  border-bottom-color: currentColor !important;
}

/* --- Pricing card popular: stronger presence on hover --- */
.pricing-card.popular:hover {
  box-shadow: 0 8px 32px rgba(139, 37, 0, 0.10), 0 2px 8px rgba(0,0,0,0.04) !important;
  transform: translateY(-3px);
}

/* --- Footer brand: warmer wordmark --- */
.footer-wordmark {
  font-size: 24px !important;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-2);
  display: block;
}

/* --- Pricing value section: tighter grid, warmer --- */
.pricing-value-stat {
  font-family: var(--font-serif) !important;
  letter-spacing: -0.02em !important;
  color: var(--accent-navy) !important;
}

/* --- Landing mobile polish --- */
@media (max-width: 768px) {
  .hero-metrics {
    flex-direction: column !important;
    gap: var(--space-3) !important;
    border-top: none !important;
    padding-top: var(--space-6) !important;
  }
  .metric-divider { display: none !important; }

  .testimonial blockquote {
    font-size: 1.125rem !important;
    max-width: none !important;
  }

  .checks-grid {
    gap: var(--space-6) var(--space-6) !important;
  }

  .footer-cta h2 {
    font-size: 1.25rem !important;
  }
}

/* =====================================================================
   PART 7: Auth, User Menu & Account Dashboard — Visual Polish
   ===================================================================== */

/* --- 7.1 Auth Modal: warmer overlay, refined card, elegant transitions --- */
.auth-modal-overlay {
  background: rgba(27, 58, 92, 0.18) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.auth-modal {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12),
              0 0 0 1px rgba(27, 58, 92, 0.06) !important;
  padding: var(--space-10) var(--space-10) var(--space-8) !important;
  animation: authModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes authModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Wordmark — refined serif with navy accent */
.auth-modal-wordmark {
  font-size: 1.65rem !important;
  letter-spacing: -0.03em !important;
  margin-bottom: var(--space-4) !important;
}

/* Tabs — sliding underline feel */
.auth-modal-tabs {
  gap: var(--space-2) !important;
  margin-bottom: var(--space-8) !important;
}
.auth-modal-tab {
  padding: var(--space-2) var(--space-5) !important;
  font-size: var(--text-sm) !important;
  letter-spacing: 0.01em !important;
  transition: color 0.2s ease, border-color 0.25s ease !important;
}

/* Inputs — subtle warm tint on hover, refined focus ring */
.auth-modal input[type="email"],
.auth-modal input[type="password"],
.auth-modal input[type="text"] {
  padding: 0.7rem var(--space-4) !important;
  font-size: var(--text-sm) !important;
  background: var(--surface-0) !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  margin-bottom: var(--space-5) !important;
}
.auth-modal input:hover:not(:focus) {
  background: var(--bg-paper) !important;
}
.auth-modal input:focus {
  border-color: var(--accent-navy) !important;
  box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.08) !important;
  background: var(--surface-0) !important;
}
.auth-modal input::placeholder {
  color: var(--text-ink-faint);
  font-weight: 400;
}

/* Submit button — taller, subtle shadow, smooth hover */
.auth-submit-btn {
  padding: 0.7rem var(--space-4) !important;
  font-weight: 600 !important;
  font-size: var(--text-sm) !important;
  letter-spacing: 0.01em !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
  box-shadow: 0 1px 3px rgba(139, 37, 0, 0.15) !important;
}
.auth-submit-btn:hover {
  box-shadow: 0 2px 8px rgba(139, 37, 0, 0.2) !important;
  transform: translateY(-1px) !important;
}
.auth-submit-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(139, 37, 0, 0.12) !important;
}
/* Outline variant — no shadow */
.auth-submit-btn.outline {
  box-shadow: none !important;
}
.auth-submit-btn.outline:hover {
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

/* Google button — refined border, subtle hover elevation */
.google-btn {
  padding: 0.65rem var(--space-4) !important;
  font-weight: 500 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
}
.google-btn:hover {
  border-color: var(--border-color-hover) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
}
.google-btn:active {
  transform: scale(0.985) translateY(0) !important;
  box-shadow: none !important;
}

/* Divider — subtler line */
.auth-divider {
  margin: var(--space-5) 0 !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.05em !important;
  text-transform: lowercase !important;
}

/* Error messages — refined */
.auth-error:not(:empty) {
  background: var(--accent-burgundy-light);
  padding: var(--space-2) var(--space-3);
  border-radius: 4px;
  border-left: 3px solid var(--accent-burgundy);
  text-align: left;
  animation: errorShake 0.3s ease;
}
@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* Register benefits strip — compact row above form */
.auth-register-benefits-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-paper);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  margin-bottom: var(--space-5);
  justify-content: center;
}
.auth-register-benefits-strip > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-ink-soft);
  white-space: nowrap;
}
.auth-register-benefits-strip i {
  color: var(--accent-green);
  font-size: 0.8rem;
}

/* Password strength bar — taller, more readable */
.password-strength-bar {
  height: 3px !important;
}

/* Forgot password link — refined hover */
.auth-forgot a {
  transition: color 0.15s ease !important;
}

/* Auth toggle — refined */
.auth-toggle {
  margin-top: var(--space-5) !important;
  padding-top: var(--space-4) !important;
  border-top: 1px solid var(--border-hairline) !important;
}
.auth-toggle a {
  font-weight: 500 !important;
  color: var(--accent-navy) !important;
}
.auth-toggle a:hover {
  color: var(--accent-burgundy) !important;
  text-decoration: underline !important;
}

/* --- 7.2 User Menu — refined dropdown, polished avatar --- */
.user-avatar {
  transition: box-shadow 0.2s ease !important;
  box-shadow: 0 0 0 2px var(--surface-0), 0 0 0 3px rgba(27, 58, 92, 0.15) !important;
}
.user-avatar:hover {
  box-shadow: 0 0 0 2px var(--surface-0), 0 0 0 3px var(--accent-navy) !important;
}

.user-menu-dropdown {
  animation: dropdownIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 10px 40px -8px rgba(0, 0, 0, 0.12),
              0 0 0 1px rgba(27, 58, 92, 0.06) !important;
  min-width: 240px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.user-menu-info {
  padding: var(--space-5) !important;
  background: var(--bg-paper) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
}
.user-menu-name {
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
}
.user-menu-email {
  font-size: var(--text-xs) !important;
  margin-top: 2px !important;
}
.tier-badge {
  margin-top: var(--space-2) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.user-menu-links {
  padding: var(--space-2) !important;
}
.user-menu-link {
  padding: var(--space-2) var(--space-3) !important;
  border-radius: 4px !important;
  transition: background 0.15s ease !important;
}
.user-menu-link:hover {
  background: var(--primary-50) !important;
  color: var(--accent-navy) !important;
}
.user-menu-admin {
  padding: var(--space-2) var(--space-5) !important;
}
.user-menu-logout {
  margin: 0 var(--space-2) var(--space-2) !important;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: 4px !important;
  border-top: 1px solid var(--border-hairline) !important;
  font-weight: 500 !important;
  transition: background 0.15s ease !important;
}
.user-menu-logout:hover {
  background: var(--accent-burgundy-light) !important;
}

/* --- 7.3 Account Dashboard — elevated sidebar, refined cards --- */

/* Sidebar avatar — larger with accent ring */
.account-avatar-circle {
  width: 64px !important;
  height: 64px !important;
  font-size: 1.5rem !important;
  box-shadow: 0 0 0 3px var(--surface-0), 0 0 0 5px rgba(27, 58, 92, 0.12) !important;
}

/* Sidebar identity — more breathing room */
.account-sidebar-identity {
  padding-bottom: var(--space-5) !important;
  margin-bottom: var(--space-4) !important;
}
.account-sidebar-name {
  font-size: var(--text-base) !important;
  margin-top: var(--space-1) !important;
}

/* Sidebar nav — icon pills for active state */
.account-nav-link {
  padding: var(--space-2) var(--space-4) !important;
  margin-bottom: 2px !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.account-nav-link i {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  font-size: 0.875rem !important;
  transition: background 0.15s ease !important;
}
.account-nav-link.active i {
  background: var(--primary-100) !important;
  color: var(--accent-navy) !important;
}
.account-nav-link:hover:not(.active) i {
  background: var(--surface-2) !important;
}

/* Content area — subtle inner shadow for depth */
.account-content {
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Tab panel headers — serif for editorial feel */
.account-tab-panel h2 {
  font-family: var(--font-serif) !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
  color: var(--text-ink) !important;
  padding-bottom: var(--space-3) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  margin-bottom: var(--space-6) !important;
}

/* Overview cards — subtle hover lift */
/* Usage bars — taller, smoother transitions (usage tab) */
.usage-bar {
  height: 8px !important;
  border-radius: 4px !important;
}
.usage-bar-fill {
  border-radius: 4px !important;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Profile form inputs — match auth modal refinement */
.account-profile-form input[type="text"],
.account-profile-form input[type="password"] {
  padding: 0.65rem var(--space-4) !important;
  border-color: var(--border-hairline) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.account-profile-form input:hover:not(:focus) {
  background: var(--bg-paper) !important;
}
.account-profile-form input:focus {
  border-color: var(--accent-navy) !important;
  box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.08) !important;
}

/* Profile labels — refined */
.account-profile-form label {
  font-size: var(--text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
  color: var(--text-ink-faint) !important;
}

/* Auth method badge — refined */
.account-auth-method {
  border: 1px solid var(--border-hairline) !important;
  background: var(--surface-0) !important;
}

/* Verified badge — refined green */
.account-verified-badge {
  background: var(--accent-green-light);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
}

/* Billing card — subtle top accent */
.billing-plan-card {
  border-top: 3px solid var(--accent-navy) !important;
}

/* Recent items — already styled in base overview section */

/* Trend chart bars — rounder tops */
.trend-bar-stack {
  border-radius: 6px 6px 0 0 !important;
}

/* --- 7.4 Account responsive mobile refinements --- */
@media (max-width: 768px) {
  .auth-modal {
    padding: var(--space-8) var(--space-6) var(--space-6) !important;
    max-width: 95vw !important;
  }
  .auth-modal-wordmark {
    font-size: 1.4rem !important;
  }
  .account-content {
    padding: var(--space-5) !important;
  }
  .account-tab-panel h2 {
    font-size: 1.15rem !important;
  }
  .overview-usage-strip {
    flex-direction: column;
    gap: var(--space-3) !important;
  }
  .overview-recent-mode { display: none; }
  .overview-recent-view { display: none; }
}

/* --- 7.5 Verification & upgrade banners — refined styling --- */
#verification-banner {
  background: rgba(27, 58, 92, 0.04) !important;
  border: 1px solid rgba(27, 58, 92, 0.1) !important;
  border-left: 3px solid var(--accent-navy) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-ink) !important;
}

/* --- 7.6 Header sign-in button — ghost style with navy accent --- */
.site-nav-signin {
  font-weight: 500 !important;
  color: var(--accent-navy) !important;
  border: 1px solid rgba(27, 58, 92, 0.2) !important;
  padding: 6px 16px !important;
  border-radius: 4px !important;
  background: transparent !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.site-nav-signin:hover {
  background: rgba(27, 58, 92, 0.06) !important;
  border-color: var(--accent-navy) !important;
}

/* ===== Global Reduced Motion ===== */
/* Scoped to elements that actually animate rather than universal * selector */
@media (prefers-reduced-motion: reduce) {
  .spin, .view.active, .step-card.active .step-status,
  .issue-card-details.open, .cp-detail,
  .auth-modal, .glossary-preview-modal, .glossary-export-dropdown,
  .glossary-inline-section, .glossary-row, .glossary-empty-icon-stack,
  .celebration-overlay, .confetti-piece,
  .progress-quote, .queue-position,
  .welcome-demo-scan-line, .welcome-demo-results,
  .welcome-demo-time, .welcome-demo-stat,
  .skeleton, .skeleton-line, .skeleton-block,
  .account-tab-panel, .usage-chart-bar,
  [class*="badge"], [class*="toast"],
  #btn-run, .error-shake, .warning-pulse {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   UPLOAD PAGE — Detail Pass (March 2026)
   Retouches: format badges, file-attached state, check card
   descriptions, features strip, run button text-only, upload
   progress editorial feel.
   ============================================================ */

/* --- Format badges inside drop zones --- */
.drop-formats {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-3);
  justify-content: center;
}
.drop-formats span {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-ink-soft);
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 1px 6px;
  line-height: 1.6;
}
.drop-zone:hover .drop-formats span {
  border-color: var(--border-color);
  color: var(--text-ink-soft);
}
/* Hide format badges when file is attached */
.drop-zone.has-file .drop-formats {
  display: none !important;
}

/* --- Drop zone has-file: warmer, success-tinted state --- */
.drop-zone.has-file,
.file-drop-zone.has-file {
  background: #F0F4F1 !important;
  border-color: rgba(46, 90, 68, 0.15) !important;
  border-left: 3px solid var(--accent-green) !important;
  box-shadow: inset 0 1px 4px rgba(46, 90, 68, 0.03) !important;
}
.drop-zone.has-file .drop-icon {
  color: var(--accent-green) !important;
  opacity: 0.55 !important;
}
.drop-zone.has-file .filename {
  color: var(--accent-green) !important;
}

/* --- Check card descriptions: show as subtle subtitle --- */
.check-card p {
  display: block !important;
  font-family: var(--font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 400 !important;
  color: var(--text-ink-faint) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  max-width: 16ch !important;
}
/* Reflow check cards to accommodate subtitle */
.check-card {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--space-1) !important;
  padding: var(--space-3) var(--space-4) !important;
  min-width: 120px !important;
}
.check-card h4 {
  font-size: var(--text-sm) !important;
}

/* --- Features strip — editorial colophon --- */
.upload-features-strip {
  display: flex !important;
  gap: var(--space-6) !important;
  flex-wrap: wrap !important;
  padding: var(--space-4) 0 !important;
  margin: 0 0 var(--space-4) !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  justify-content: flex-start !important;
}
.uf-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-ink-faint) !important;
}
.uf-item i {
  display: inline !important;
  font-size: 0.6875rem !important;
  opacity: 0.5 !important;
}

/* --- Run button: text-only, no icon, refined spacing --- */
#btn-run {
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  padding: 14px 56px !important;
}

/* --- Upload progress: editorial refinement --- */
.upload-status progress {
  height: 2px !important;
  border-radius: 1px !important;
  accent-color: var(--accent-navy) !important;
}
.upload-status .upload-label {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 0.8125rem !important;
  color: var(--text-ink-faint) !important;
}
.upload-cancel-btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-ink-faint) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.75rem !important;
  padding: var(--space-1) 0 !important;
  text-decoration: underline !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 3px !important;
  border-radius: 0 !important;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast) !important;
}
.upload-cancel-btn:hover {
  background: transparent !important;
  color: var(--accent-burgundy) !important;
  text-decoration-color: var(--accent-burgundy) !important;
}

/* --- Early access banner: typographic, quieter --- */

.early-access-banner {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 var(--space-4) !important;
  margin: 0 0 var(--space-4) !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 0.8125rem !important;
  color: var(--text-ink-faint) !important;
  justify-content: flex-start !important;
  opacity: 0.7 !important;
}

/* --- Run history panel: editorial styling --- */
.run-history-panel {
  margin-top: var(--space-6) !important;
  border: none !important;
  background: transparent !important;
}
.run-history-panel > summary {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 400 !important;
  color: var(--text-ink-faint) !important;
  cursor: pointer !important;
  padding: var(--space-2) 0 !important;
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  transition: color var(--transition-fast) !important;
}
.run-history-panel > summary:hover {
  color: var(--accent-navy) !important;
}
.run-history-panel > summary::-webkit-details-marker { display: none; }
.run-history-panel .rh-chevron {
  font-size: 0.6rem !important;
  transition: transform var(--transition-fast) !important;
}
.run-history-panel[open] .rh-chevron {
  transform: rotate(90deg) !important;
}

/* --- Scope range row: align with editorial card padding --- */
.scope-range-row {
  margin-top: var(--space-6) !important;
  padding-top: var(--space-5) !important;
}

/* --- Mobile: features strip stacks nicely --- */
@media (max-width: 640px) {
  .upload-features-strip {
    gap: var(--space-3) var(--space-4) !important;
  }
  .check-card {
    min-width: 100px !important;
    padding: var(--space-2) var(--space-3) !important;
  }
  .check-card p {
    font-size: 0.6875rem !important;
    max-width: 18ch !important;
  }
  .drop-formats {
    gap: 2px !important;
  }
  .drop-formats span {
    font-size: 0.625rem !important;
    padding: 0 4px !important;
  }
}

/* ============================================================
   UPLOAD PAGE — 21st.dev Inspired Polish
   Patterns: dot-grid background texture, refined drag-over glow,
   file-attached card state, check card selection indicator,
   section entrance animations.
   ============================================================ */

/* --- Drop zone: subtle dot pattern background (Aceternity-inspired) --- */
.drop-zone::before,
.file-drop-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.35;
  background-image: radial-gradient(circle, var(--border-color) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
  transition: opacity var(--transition-base);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, transparent 70%);
}
.drop-zone:hover::before,
.file-drop-zone:hover::before {
  opacity: 0.5;
}
.drop-zone.has-file::before,
.file-drop-zone.has-file::before {
  opacity: 0 !important;
}

/* --- Drop zone: refined drag-over state with ring glow --- */
.drop-zone.drag-over,
.file-drop-zone.drag-over {
  border-color: var(--accent-navy) !important;
  background: #EBE8E2 !important;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.04),
    0 0 0 4px rgba(27, 58, 92, 0.08),
    0 0 16px rgba(27, 58, 92, 0.06) !important;
  transform: scale(1.005) !important;
}
.drop-zone.drag-over::before,
.file-drop-zone.drag-over::before {
  opacity: 0.6;
}
.drop-zone.drag-over .drop-label {
  color: var(--accent-navy) !important;
  font-weight: 600 !important;
}

/* --- Drop zone: file-attached — card-like filename display --- */
.drop-zone.has-file .filename {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: var(--space-2) var(--space-4) !important;
  background: rgba(46, 90, 68, 0.04) !important;
  border: 1px solid rgba(46, 90, 68, 0.1) !important;
  border-radius: var(--radius-sm) !important;
  margin-top: var(--space-2) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--text-ink) !important;
  letter-spacing: -0.01em !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.drop-zone.has-file .filename .filename-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.drop-zone.has-file .file-clear-btn {
  color: var(--text-ink-faint) !important;
  opacity: 0.6 !important;
  transition: color var(--transition-fast), opacity var(--transition-fast) !important;
}
.drop-zone.has-file .file-clear-btn:hover {
  color: var(--accent-burgundy) !important;
  opacity: 1 !important;
}

/* --- Check card: selection indicator + transition polish --- */
.check-card {
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    border-left-color 0.2s ease,
    box-shadow 0.2s ease !important;
}
.check-card h4 {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
}
/* Small inline checkmark for selected state */
.check-card.selected h4::before,
.check-card.active h4::before,
.check-card[data-selected="true"] h4::before {
  content: '\2713';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent-navy);
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1;
}
/* Unselected state: show empty box */
.check-card h4::before {
  content: '';
  display: inline-flex;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-color);
  border-radius: 3px;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.check-card:hover h4::before {
  border-color: var(--accent-navy);
}
/* Selected card: subtle background glow */
.check-card.selected,
.check-card.active,
.check-card[data-selected="true"] {
  background: rgba(27, 58, 92, 0.04) !important;
  border-left-color: var(--accent-navy) !important;
  box-shadow: 0 1px 3px rgba(27, 58, 92, 0.06) !important;
}
/* Check card description: slightly different color when selected */
.check-card.selected p,
.check-card.active p,
.check-card[data-selected="true"] p {
  color: var(--text-ink-soft) !important;
}

/* --- Section entrance animations (upload → checks → button flow) --- */
@keyframes sectionFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#view-upload #article-upload {
  animation: sectionFadeUp 0.4s ease both !important;
}
.upload-features-strip {
  animation: sectionFadeUp 0.4s ease 0.1s both !important;
}
#view-upload #article-checks {
  animation: sectionFadeUp 0.4s ease 0.15s both !important;
}

/* --- Drop zone: smooth icon float on idle (breathing effect) --- */
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.drop-zone:not(.has-file) .drop-icon {
  animation: iconFloat 3s ease-in-out infinite !important;
}
.drop-zone:hover:not(.has-file) .drop-icon {
  animation: none !important;
  transform: translateY(-2px) scale(1.05) !important;
}

/* --- Format badges: entrance stagger --- */
@keyframes badgeFadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
.drop-formats span {
  animation: badgeFadeIn 0.3s ease both !important;
}
.drop-formats span:nth-child(2) { animation-delay: 0.05s !important; }
.drop-formats span:nth-child(3) { animation-delay: 0.1s !important; }

/* --- Features strip items: subtle separator dots --- */
.uf-item + .uf-item::before {
  content: '·';
  margin-right: var(--space-6);
  color: var(--border-color);
  font-size: 1rem;
  line-height: 1;
}

/* --- Run button: refined idle → ready transition --- */
#btn-run:not(:disabled) {
  animation: btnReady 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
@keyframes btnReady {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#btn-run:not(:disabled):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(139, 37, 0, 0.2) !important;
}
#btn-run:not(:disabled):active {
  transform: translateY(0) scale(0.99) !important;
  box-shadow: 0 1px 4px rgba(139, 37, 0, 0.15) !important;
}

/* --- Drop zone hover: lift effect --- */
.drop-zone:hover:not(.has-file),
.file-drop-zone:hover:not(.has-file) {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.03),
    0 0 0 3px rgba(27, 58, 92, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* --- Mobile: reduce/disable animations for performance --- */
@media (max-width: 640px) {
  .drop-zone:not(.has-file) .drop-icon {
    animation: none !important;
  }
  #view-upload #article-upload,
  .upload-features-strip,
  #view-upload #article-checks {
    animation: none !important;
  }
}

/* ============================================================
   PROGRESS PAGE: EDITORIAL RITUAL — March 2026
   "Library, not a dashboard." Remove software metrics,
   replace with typographic chapter tracking.
   ============================================================ */

/* 1. Hide step cards — chapter timeline already provides this info */
#view-progress .step-cards {
  display: none !important;
}

/* 2. Chapter timeline: editorial counter, not dot timeline */
#view-progress .chapter-timeline {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: var(--space-2) 0 !important;
}
#view-progress .chapter-timeline-track {
  display: flex !important;
  gap: var(--space-1) !important;
  flex-wrap: wrap !important;
}
#view-progress .ctl-marker {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
#view-progress .ctl-dot {
  display: none !important;
}
#view-progress .ctl-label {
  font-family: var(--font-sans) !important;
  font-size: 0.7rem !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--text-ink-faint) !important;
  opacity: 0.4 !important;
}
#view-progress .ctl-marker.active .ctl-label {
  color: var(--accent-burgundy) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
#view-progress .ctl-marker.done .ctl-label {
  color: var(--text-ink-soft) !important;
  opacity: 0.7 !important;
}

/* 3. Book card as colophon entry, not a card */
#view-progress .progress-book-card {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 var(--space-4) !important;
  margin-bottom: var(--space-2) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
}

/* 4. Progress content — full width, room grid handles layout */
#view-progress .progress-content {
  max-width: 100% !important;
}

/* 5. Queue container: strip card styling */
#view-progress .queue-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#view-progress .queue-visual {
  display: none !important;
}
#view-progress .queue-position {
  font-family: var(--font-serif) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 400 !important;
  color: var(--text-ink-faint) !important;
}
#view-progress .queue-label {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: var(--text-base) !important;
  color: var(--text-ink-soft) !important;
}

/* ============================================================
   HERO MOCKUP: Manuscript Page (not Dashboard)
   "We are building a library for an editor."
   ============================================================ */

.mock-manuscript {
  padding: 0;
  background: #FFFEFB !important;
  font-family: var(--font-serif);
}
.mock-ms-header {
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border-hairline);
  text-align: right;
}
.mock-ms-page {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
}
.mock-ms-body {
  padding: var(--space-6) var(--space-6) var(--space-8);
  position: relative;
}
.mock-ms-text {
  font-family: var(--font-serif) !important;
  font-size: 0.925rem !important;
  line-height: 1.9 !important;
  color: var(--text-ink) !important;
  margin-bottom: var(--space-4) !important;
  text-indent: 1.5em;
}
.mock-ms-text:first-of-type {
  text-indent: 0;
}
.mock-ms-highlight {
  position: relative;
  padding: 1px 2px;
  border-radius: 1px;
}
.mock-ms-highlight.high {
  background: rgba(139, 37, 0, 0.08);
  border-bottom: 2px solid var(--accent-burgundy);
}
.mock-ms-highlight.medium {
  background: rgba(27, 58, 92, 0.06);
  border-bottom: 2px solid var(--accent-navy);
}
.mock-ms-margin-note {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 2px solid var(--border-hairline);
  margin: var(--space-1) 0 var(--space-4);
}
.mock-ms-margin-note.high {
  border-left-color: var(--accent-burgundy);
}
.mock-ms-margin-note.medium {
  border-left-color: var(--accent-navy);
}
.mock-ms-note-badge {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.mock-ms-margin-note.high .mock-ms-note-badge {
  color: var(--accent-burgundy);
}
.mock-ms-margin-note.medium .mock-ms-note-badge {
  color: var(--accent-navy);
}
.mock-ms-note-text {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-ink-soft);
  line-height: 1.5;
}

/* Hide old mock-dashboard elements (replaced by manuscript) */
.mock-dashboard { display: none !important; }

/* ============================================================
   PRICING: Editorial Subscription Page
   "Trust through restraint." — no heavy borders, no glowing
   buttons, just clean typography and generous whitespace.
   ============================================================ */

/* Card: paper-like surface, no heavy shadows */
.pricing-card {
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: box-shadow var(--transition-base), border-color var(--transition-base) !important;
  padding: clamp(28px, 4vw, 40px) !important;
}
.pricing-card:hover {
  box-shadow: var(--shadow-sm) !important;
  border-color: var(--border-color) !important;
}

/* Popular card: subtle burgundy top accent, not glowing border */
.pricing-card.popular {
  border: 1px solid var(--border-color) !important;
  border-top: 3px solid var(--accent-burgundy) !important;
  box-shadow: var(--shadow-sm) !important;
}
.pricing-card.popular:hover {
  box-shadow: var(--shadow-md) !important;
}

/* Recommended label: small-caps serif, not badge */
.pricing-recommended-label {
  font-family: var(--font-sans) !important;
  font-variant: small-caps !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: lowercase !important;
  color: var(--accent-burgundy) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Card name: serif */
.pricing-card-name {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: var(--text-lg) !important;
  color: var(--text-ink) !important;
  margin-bottom: var(--space-4) !important;
}

/* Price: serif, lighter weight */
.pricing-card-price {
  margin-bottom: var(--space-2) !important;
}
.pricing-amount {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: 2.5rem !important;
  letter-spacing: -0.02em !important;
  color: var(--text-ink) !important;
}
.pricing-currency {
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--text-ink-faint) !important;
  vertical-align: super;
}

/* Period text: quiet */
.pricing-card-period,
.pricing-period-text {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  color: var(--text-ink-faint) !important;
  margin-bottom: var(--space-6) !important;
}

/* Divider: hairline */
.pricing-divider {
  height: 1px !important;
  background: var(--border-hairline) !important;
  margin: 0 0 var(--space-6) !important;
  border: none !important;
}

/* Feature list: clean, no bullets */
.pricing-card-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--space-8) !important;
}
.pricing-card-features li {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-ink-soft) !important;
  line-height: 1.6 !important;
  padding: var(--space-2) 0 !important;
  border-bottom: 1px solid var(--border-hairline) !important;
}
.pricing-card-features li:last-child {
  border-bottom: none !important;
}

/* CTA button: text-only for non-popular, solid for popular */
.pricing-card-cta {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  padding: 12px var(--space-8) !important;
  border-radius: var(--radius-sm) !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-ink) !important;
}
.pricing-card-cta:hover {
  border-color: var(--accent-navy) !important;
  color: var(--accent-navy) !important;
}
.pricing-card.popular .pricing-card-cta {
  background: var(--accent-burgundy) !important;
  border-color: var(--accent-burgundy) !important;
  color: #fff !important;
}
.pricing-card.popular .pricing-card-cta:hover {
  background: var(--accent-burgundy-hover) !important;
  border-color: var(--accent-burgundy-hover) !important;
}

/* Pricing hero: serif heading */
.pricing-hero h1 {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: var(--text-xl) !important;
  color: var(--text-ink) !important;
}
.pricing-hero-subtitle {
  font-family: var(--font-sans) !important;
  font-size: var(--text-lead) !important;
  color: var(--text-ink-soft) !important;
}

/* Billing toggle: editorial pill */
.pricing-toggle {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-full) !important;
  padding: 2px !important;
  background: var(--surface-0) !important;
}
.pricing-toggle-btn {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-2) var(--space-6) !important;
  background: transparent !important;
  color: var(--text-ink-soft) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
}
.pricing-toggle-btn.active {
  background: var(--accent-navy) !important;
  color: #fff !important;
  font-weight: 500 !important;
}
.pricing-savings-badge {
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: var(--accent-green) !important;
  margin-left: var(--space-1) !important;
}
.pricing-toggle-btn.active .pricing-savings-badge {
  color: rgba(255,255,255,0.8) !important;
}

/* ============================================================
   CHECKS SECTION: Editorial Typography
   Categories as typographic hierarchy, not icon grid.
   ============================================================ */

.welcome-checks {
  background: var(--surface-0) !important;
}
.checks-layout {
  max-width: 1200px !important;
  margin: 0 auto !important;
}
.checks-intro h2 {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: var(--text-xl) !important;
}
.checks-intro p {
  font-size: var(--text-lead) !important;
  color: var(--text-ink-soft) !important;
  max-width: 620px !important;
  margin-bottom: var(--space-10) !important;
}
.check-label {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: var(--text-md) !important;
  color: var(--text-ink) !important;
  display: block !important;
  margin-bottom: var(--space-2) !important;
}
.check-item {
  border: none !important;
  background: transparent !important;
  padding: var(--space-4) 0 !important;
  border-bottom: 1px solid var(--border-hairline) !important;
}
.check-item:last-child {
  border-bottom: none !important;
}
.check-item p {
  font-size: var(--text-sm) !important;
  color: var(--text-ink-soft) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.check-item--primary {
  border-bottom: 1px solid var(--border-color) !important;
}
.check-item--primary .check-label {
  color: var(--accent-burgundy) !important;
}

/* ============================================================
   WHY SECTION: Editorial Blockquotes
   ============================================================ */

.welcome-why {
  background: transparent !important;
}
.welcome-why-inner h2 {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: var(--text-xl) !important;
  margin-bottom: var(--space-10) !important;
}
.why-list p {
  font-family: var(--font-serif) !important;
  font-size: var(--text-lead) !important;
  line-height: 1.8 !important;
  color: var(--text-ink-soft) !important;
  padding: var(--space-4) 0 !important;
  border-bottom: 1px solid var(--border-hairline) !important;
}
.why-list p:last-child {
  border-bottom: none !important;
}
.em-dash {
  color: var(--accent-burgundy) !important;
  margin-right: var(--space-2) !important;
}

/* ============================================================
   TESTIMONIALS: Literary Blockquote
   ============================================================ */

.welcome-testimonials {
  background: var(--bg-paper-alt) !important;
}
.testimonial blockquote {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: var(--text-lead) !important;
  line-height: 1.8 !important;
  color: var(--text-ink) !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  text-align: center !important;
  border: none !important;
  padding: 0 !important;
}
.testimonial-dash {
  width: 2rem !important;
  height: 1px !important;
  background: var(--border-color) !important;
  margin: var(--space-6) auto !important;
}
.testimonial cite {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-ink-faint) !important;
  display: block !important;
  text-align: center !important;
}

/* ============================================================
   NAVIGATION: Editorial Masthead
   Inspired by literary magazine mastheads and typography
   foundry websites. Restrained, typographic, warm.
   ============================================================ */

/* Nav container: taller, more breathing room, warmer glass */
.site-nav {
  background: rgba(249, 248, 246, 0.88) !important;
  border-bottom: 1px solid rgba(224, 221, 216, 0.5) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
}
.site-nav.scrolled {
  background: rgba(249, 248, 246, 0.95) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) !important;
  border-bottom-color: var(--border-hairline) !important;
}

/* Inner: taller for editorial breathing room */
.site-nav-inner {
  height: 64px !important;
}

/* Brand: larger serif wordmark, like a masthead */
.site-nav-brand {
  font-family: var(--font-serif) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  color: var(--text-ink) !important;
  letter-spacing: -0.04em !important;
  text-decoration: none !important;
}
.site-nav-brand:hover {
  opacity: 0.7 !important;
  color: var(--text-ink) !important;
}

/* Nav links: lighter weight, wider tracking, more editorial */
.site-nav-link {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--text-sm) !important;
  color: var(--text-ink-faint) !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
  padding: 4px 0 !important;
}
.site-nav-link:hover {
  color: var(--text-ink) !important;
}
/* Underline: burgundy, thinner */
.site-nav-link::after {
  height: 1px !important;
  background: var(--accent-burgundy) !important;
  bottom: 0 !important;
  opacity: 0.6 !important;
}

/* Link gap: slightly wider for breathing room */
.site-nav-links {
  gap: clamp(24px, 3vw, 40px) !important;
}

/* Language toggle: quieter, smaller */
.site-nav-text-btn {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-ink-faint) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-full) !important;
  padding: 4px 10px !important;
  transition: border-color var(--transition-fast), color var(--transition-fast) !important;
  min-height: 28px !important;
  min-width: 28px !important;
}
.site-nav-text-btn:hover {
  border-color: var(--border-color) !important;
  color: var(--text-ink-soft) !important;
}

/* CTA: restrained — outlined, not solid. "Trust through restraint." */
.site-nav-cta {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.03em !important;
  color: var(--accent-burgundy) !important;
  background: transparent !important;
  border: 1px solid var(--accent-burgundy) !important;
  padding: 8px 20px !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition-fast), color var(--transition-fast) !important;
  min-height: 36px !important;
}
.site-nav-cta:hover {
  background: var(--accent-burgundy) !important;
  color: #fff !important;
  transform: none !important;
}

/* Sign In: text-only, very quiet */
.site-nav-signin {
  font-weight: 400 !important;
  font-size: var(--text-sm) !important;
  color: var(--text-ink-faint) !important;
  border: none !important;
  padding: var(--space-2) var(--space-3) !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}
.site-nav-signin:hover {
  color: var(--text-ink) !important;
  background: transparent !important;
  border: none !important;
}

/* User avatar: softer, warmer */
.user-avatar {
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}

/* Hamburger: thinner lines */
.site-nav-hamburger svg rect {
  rx: 0.5 !important;
  height: 1px !important;
}

/* Mobile nav: warmer */
.site-nav-mobile {
  background: rgba(249, 248, 246, 0.98) !important;
  padding: var(--space-6) clamp(24px, 5vw, 80px) !important;
}
.site-nav-mobile-link {
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  padding: var(--space-4) 0 !important;
  border-bottom: 1px solid var(--border-hairline) !important;
}
.site-nav-mobile-link:last-of-type {
  border-bottom: none !important;
}

/* ============================================================
   PROGRESS PAGE: VISUAL ZONES — "The Ritual"
   Problem: flat text dump with no rhythm.
   Solution: distinct background zones, oversized numeral,
   compact metadata row, generous breathing between zones.
   Inspired by: Exaggerated Minimalism + Editorial Magazine.
   ============================================================ */

/* --- Zone 0: Article container — top padding for progress page --- */
#view-progress > article {
  padding-top: clamp(32px, 6vw, 64px) !important;
}

/* --- Zone 1: Book Header — subtle warm strip --- */
#view-progress .progress-book-card {
  background: var(--surface-0) !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: var(--space-5) var(--space-6) !important;
  margin: 0 calc(-1 * clamp(24px, 5vw, 48px)) var(--space-8) !important;
  border-radius: var(--radius-md) !important;
  position: relative !important;
}
/* Warm left accent on book card */
#view-progress .progress-book-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 3px !important;
  background: var(--accent-burgundy) !important;
  border-radius: 2px !important;
  opacity: 0.4 !important;
}

/* Filename: serif, editorial weight */
#view-progress .pbc-filename {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: var(--text-lead) !important;
  color: var(--text-ink) !important;
  letter-spacing: -0.01em !important;
}
#view-progress .pbc-icon {
  color: var(--accent-burgundy) !important;
  opacity: 0.5 !important;
}

/* Check tags: compact inline pills */
#view-progress .pbc-meta-row {
  margin-top: var(--space-2) !important;
}
#view-progress .pbc-tag {
  font-size: 0.65rem !important;
  letter-spacing: 0.06em !important;
  color: var(--text-ink-faint) !important;
  background: var(--bg-paper-alt) !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-full) !important;
}

/* --- Zone 2: Progress Hero — oversized numeral on warm bg --- */
#view-progress .progress-ring-container {
  background: linear-gradient(135deg, rgba(243,241,237,0.7) 0%, rgba(249,248,246,0.3) 100%) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-10) var(--space-8) var(--space-8) !important;
  margin: 0 calc(-1 * clamp(24px, 5vw, 48px)) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Subtle decorative watermark */
#view-progress .progress-ring-container::after {
  content: '§' !important;
  position: absolute !important;
  right: var(--space-8) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: var(--font-serif) !important;
  font-size: 8rem !important;
  color: var(--text-ink) !important;
  opacity: 0.018 !important;
  pointer-events: none !important;
  line-height: 1 !important;
}

/* Percentage: dramatically oversized */
#view-progress .progress-ring-pct {
  font-family: var(--font-serif) !important;
  font-weight: 300 !important;
  font-size: clamp(4rem, 10vw, 6rem) !important;
  line-height: 0.9 !important;
  color: var(--text-ink) !important;
  letter-spacing: -0.04em !important;
  margin-bottom: var(--space-3) !important;
  opacity: 1 !important;
}

/* Chapter label: right below the numeral */
#view-progress .progress-ring-label {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: var(--text-lead) !important;
  color: var(--text-ink-soft) !important;
  margin-bottom: var(--space-1) !important;
}

/* Issues count: inline with label */
#view-progress .progress-ring-issues {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-ink-faint) !important;
  font-variant-numeric: tabular-nums !important;
}

/* --- Zone 3: Metadata Row — compact horizontal data --- */
#view-progress .elapsed,
#view-progress .progress-eta {
  display: inline !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--text-ink-faint) !important;
  margin: 0 !important;
}
/* Create a container-like feel by adding a subtle divider above */
#view-progress .elapsed {
  padding-top: var(--space-4) !important;
  border-top: 1px solid var(--border-hairline) !important;
  margin-top: var(--space-6) !important;
}
#view-progress .progress-eta::before {
  content: ' · ' !important;
  color: var(--border-color) !important;
}

/* Chapter info (scope) — inline metadata style */
#view-progress .chapter-info-panel {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-ink-faint) !important;
  padding: 0 !important;
  margin: var(--space-1) 0 0 !important;
  border: none !important;
  background: transparent !important;
}

/* --- Zone 4: Literary Quote — centrepiece with warm bg --- */
#view-progress .progress-quote {
  background: var(--surface-0) !important;
  border: none !important;
  border-left: none !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-8) var(--space-8) var(--space-6) !important;
  margin: var(--space-10) calc(-1 * clamp(24px, 5vw, 48px)) 0 !important;
  text-align: center !important;
  position: relative !important;
}
/* Decorative opening guillemet */
#view-progress .progress-quote::before {
  content: '«' !important;
  display: block !important;
  font-family: var(--font-serif) !important;
  font-size: 2.5rem !important;
  color: var(--accent-burgundy) !important;
  opacity: 0.15 !important;
  line-height: 1 !important;
  margin-bottom: var(--space-3) !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  position: static !important;
}
#view-progress .progress-quote::after {
  display: none !important;
}
#view-progress .progress-quote .pq-text {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: var(--text-lead) !important;
  color: var(--text-ink) !important;
  line-height: 1.8 !important;
  text-align: center !important;
  max-width: 42ch !important;
  margin: 0 auto !important;
}
#view-progress .progress-quote .pq-attr {
  display: block !important;
  text-align: center !important;
  margin-top: var(--space-4) !important;
  padding-top: var(--space-3) !important;
  border-top: 1px solid var(--border-hairline) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-ink-faint) !important;
  max-width: 42ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Zone 5: Tips — burgundy accent card --- */
#view-progress .progress-tips {
  background: rgba(139, 37, 0, 0.03) !important;
  border: none !important;
  border-left: 3px solid var(--accent-burgundy) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  padding: var(--space-5) var(--space-6) !important;
  margin: var(--space-6) calc(-1 * clamp(24px, 5vw, 48px)) 0 !important;
}
#view-progress .progress-tips-label {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--accent-burgundy) !important;
  opacity: 0.5 !important;
  margin-bottom: var(--space-2) !important;
}
#view-progress .progress-tip-text {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-ink-soft) !important;
  line-height: 1.65 !important;
}

/* --- Zone 6: Actions — breathing room above --- */
#view-progress .progress-notify-btn {
  margin-top: var(--space-8) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--accent-navy) !important;
  border: 1px solid rgba(27, 58, 92, 0.2) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-3) var(--space-6) !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background var(--transition-fast), border-color var(--transition-fast) !important;
}
#view-progress .progress-notify-btn:hover {
  background: rgba(27, 58, 92, 0.04) !important;
  border-color: var(--accent-navy) !important;
  text-decoration: none !important;
}

#view-progress #btn-cancel {
  margin-top: var(--space-6) !important;
  opacity: 0.35 !important;
  font-size: var(--text-xs) !important;
}

/* --- Content max-width for readable column --- */
#view-progress .progress-content {
  max-width: 100% !important;
}

/* --- Desktop landscape: two-column layout for progress page --- */
@media (min-width: 860px) {
  #view-progress .progress-content {
    max-width: 100% !important;
  }

  /* Book card spans full width */
  #view-progress .progress-book-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Progress hero: use horizontal space, side-by-side numeral + metadata */
  #view-progress .progress-ring-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: var(--space-4) var(--space-8) !important;
    padding: var(--space-8) var(--space-10) !important;
  }

  /* Two-column grid for quote + tips */
  #view-progress .progress-quote {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #view-progress .progress-tips {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Wider quote text on desktop */
  #view-progress .progress-quote .pq-text {
    max-width: 56ch !important;
  }
  #view-progress .progress-quote .pq-attr {
    max-width: 56ch !important;
  }

  /* Notify + cancel: inline on desktop */
  #view-progress .progress-notify-row {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-6) !important;
    margin-top: var(--space-6) !important;
  }
}

/* --- Progress bar: thin burgundy line at top of hero zone --- */
#view-progress .progress-overall {
  margin: 0 calc(-1 * clamp(24px, 5vw, 48px)) var(--space-2) !important;
  padding: 0 !important;
}

@media (min-width: 860px) {
  #view-progress .progress-overall {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* --- Mobile: tighter zones --- */
@media (max-width: 600px) {
  #view-progress .progress-ring-container {
    margin: 0 calc(-1 * var(--space-4)) !important;
    padding: var(--space-6) var(--space-4) !important;
  }
  #view-progress .progress-ring-pct {
    font-size: 3.5rem !important;
  }
  #view-progress .progress-quote {
    margin-left: calc(-1 * var(--space-4)) !important;
    margin-right: calc(-1 * var(--space-4)) !important;
    padding: var(--space-6) var(--space-4) var(--space-4) !important;
  }
  #view-progress .progress-tips {
    margin-left: calc(-1 * var(--space-4)) !important;
    margin-right: calc(-1 * var(--space-4)) !important;
  }
  #view-progress .progress-book-card {
    margin-left: calc(-1 * var(--space-4)) !important;
    margin-right: calc(-1 * var(--space-4)) !important;
  }
}

/* ============================================================
   UPLOAD PAGE — Desktop Two-Column "Editor's Desk" Layout
   Left: Manuscripts (file upload + scope)
   Right: Configuration (checks + advanced + run button)
   Philosophy: Use the full desktop width. This is a desk,
   not a phone screen.
   ============================================================ */

/* --- The Desk: two-column grid on desktop --- */
.upload-desk {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 0;
  align-items: start;
}

/* Left column: manuscripts area */
.upload-desk-manuscripts {
  padding-right: clamp(32px, 4vw, 56px);
  border-right: 1px solid var(--border-hairline);
  min-width: 0; /* prevent grid blowout */
  overflow: visible;
}

/* Drop zone columns must not exceed their grid cell */
.upload-desk .drop-zone-col {
  min-width: 0 !important;
  overflow: hidden;
}

/* Right column: configuration panel — fixed width */
.upload-desk-config {
  padding-left: clamp(32px, 4vw, 56px);
  min-width: 0; /* prevent grid blowout */
  overflow: hidden; /* contain advanced settings */
}

/* Wider screens get a wider config panel */
@media (min-width: 1400px) {
  .upload-desk {
    grid-template-columns: 1fr 480px;
  }
}

/* Override the old article card styles within the desk */
.upload-desk article,
.upload-desk #article-upload,
.upload-desk #article-checks {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.upload-desk article:hover,
.upload-desk #article-upload:hover,
.upload-desk #article-checks:hover {
  box-shadow: none !important;
}

/* --- Drop zones row: side-by-side within the manuscripts column --- */
.upload-desk .drop-zones-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: stretch;
}

.upload-desk .drop-zone-col {
  display: flex;
  flex-direction: column;
}

.upload-desk .drop-zone-col .drop-zone {
  flex: 1;
}

/* When EN is hidden (editorial mode), TR drop zone goes full width */
.upload-desk .drop-zones-row:has(.drop-zone-col[style*="display: none"]),
.upload-desk .drop-zones-row:has(.drop-zone-col[style*="display:none"]) {
  grid-template-columns: 1fr;
}

/* --- Drop zones: comfortable height, shrink when file attached --- */
.upload-desk .drop-zone {
  min-height: 200px !important;
  padding: var(--space-10) var(--space-6) !important;
}
.upload-desk .drop-zone.has-file {
  min-height: 120px !important;
  padding: var(--space-6) var(--space-5) !important;
}

/* Ensure filenames truncate, don't blow out grid */
.upload-desk .drop-zone .filename {
  max-width: 100% !important;
  overflow: hidden !important;
}
.upload-desk .drop-zone .filename .filename-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* --- Features strip within manuscripts column --- */
.upload-desk .upload-features-strip {
  border-top: none !important;
  border-bottom: none !important;
  margin: var(--space-6) 0 0 !important;
  padding: var(--space-4) 0 0 !important;
}

/* --- Scope range within manuscripts column --- */
.upload-desk .scope-range-row {
  border-top: 1px solid var(--border-hairline) !important;
  margin-top: var(--space-6) !important;
  padding-top: var(--space-6) !important;
}

/* --- Check cards: vertical stack in the config column --- */
.upload-desk .check-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-2) !important;
}

.upload-desk .check-card {
  width: 100% !important;
  min-width: unset !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding: var(--space-4) var(--space-5) !important;
  border: 1px solid var(--border-hairline) !important;
  border-left: 3px solid transparent !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-0) !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  flex-wrap: nowrap !important;
}

.upload-desk .check-card:hover {
  border-color: var(--border-color-hover) !important;
  background: var(--bg-paper) !important;
}

.upload-desk .check-card.selected,
.upload-desk .check-card.active,
.upload-desk .check-card[data-selected="true"] {
  border-left-color: var(--accent-navy) !important;
  background: rgba(27, 58, 92, 0.03) !important;
  box-shadow: 0 1px 4px rgba(27, 58, 92, 0.06) !important;
}

/* Check card separator dots — remove for vertical layout */
.upload-desk .check-card + .check-card::before {
  display: none !important;
}

/* Check card: hide the h4::before checkbox pseudo (we have .check-indicator) */
.upload-desk .check-card h4::before {
  display: none !important;
}

/* Check card: hide the big card icon */
.upload-desk .check-card .card-icon {
  display: none !important;
}

/* Check card: inner content wraps into a vertical group */
.upload-desk .check-card h4 {
  font-size: var(--text-sm) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* Description visible as subtle subtitle below title */
.upload-desk .check-card p {
  display: block !important;
  font-size: 0.6875rem !important;
  color: var(--text-ink-faint) !important;
  margin: 2px 0 0 !important;
  line-height: 1.4 !important;
  max-width: none !important;
  width: 100% !important;
}

/* --- Actions area: run button anchored bottom-right of config --- */
.upload-desk-actions {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
}

.upload-desk-actions #btn-run {
  width: 100% !important;
  justify-content: center !important;
  margin: 0 !important;
}
.upload-desk-actions .run-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  text-align: center;
  letter-spacing: 0.01em;
}

/* --- Advanced settings: contained within config column --- */
.upload-desk .inline-adv-settings {
  margin-top: var(--space-6) !important;
}
.upload-desk .inline-adv-settings[open] .adv-accordion {
  max-height: 50vh !important;
  overflow-y: auto !important;
}

/* --- Config column heading spacing --- */
.upload-desk-config h2 {
  margin-bottom: var(--space-5) !important;
}

/* --- Config column check hint --- */
.upload-desk .check-hint {
  margin-top: var(--space-3) !important;
  margin-bottom: var(--space-2) !important;
}

/* ============================================================
   Responsive: collapse to single column below 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .upload-desk {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
  }

  .upload-desk-manuscripts {
    padding-right: 0 !important;
    border-right: none !important;
    padding-bottom: var(--space-8) !important;
    border-bottom: 1px solid var(--border-hairline) !important;
  }

  .upload-desk-config {
    padding-left: 0 !important;
  }

  .upload-desk .drop-zone {
    min-height: 180px !important;
    padding: var(--space-10) var(--space-6) !important;
  }

  .upload-desk .check-cards {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .upload-desk .check-card {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .upload-desk-actions #btn-run {
    width: auto !important;
  }
}

/* Mobile: single column, compact */
@media (max-width: 640px) {
  .upload-desk .drop-zones-row {
    grid-template-columns: 1fr !important;
  }

  .upload-desk .scope-range-row {
    grid-template-columns: 1fr !important;
  }

  .upload-desk .check-card {
    min-width: 100px !important;
    padding: var(--space-2) var(--space-3) !important;
  }
}

/* ============================================================
   PROGRESS PAGE — "The Reading Room" Desktop Two-Column
   Left: The Desk (progress tracking, chapter timeline)
   Right: The Margin (literary quote, editorial tips)
   ============================================================ */

/* --- The Room: two-column grid on desktop --- */
/* Single-column on mobile, two-column grid on desktop */
/* ============================================================
   PROGRESS PAGE — "Centered Editorial Stage"
   Single column by default, two-column on wide screens.
   Hierarchy: book card → percentage hero → status →
   progress bar → timeline → meta → quote → tips → footer
   ============================================================ */

/* --- The Room: single-column flow, full width --- */
.progress-room {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  align-items: stretch !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  min-height: 60vh !important;
}

/* --- The Desk: single column, centered content --- */
.progress-room-desk {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding-right: 0 !important;
  border-right: none !important;
  min-height: auto !important;
}

/* --- The Margin: flows below desk, separated by hairline --- */
.progress-room-margin {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding-left: 0 !important;
  min-height: auto !important;
  position: relative !important;
  margin-top: var(--space-10) !important;
  padding-top: var(--space-8) !important;
  border-top: 1px solid var(--border-hairline) !important;
}

/* No pseudo-element watermarks */
.progress-room-margin::after {
  display: none !important;
}

/* --- Strip backgrounds / borders from progress-content wrapper --- */
#view-progress .progress-room .progress-content,
#view-progress .progress-room {
  border-top: none !important;
  background: transparent !important;
}

/* ── Book card ──────────────────────────────────────────────
   Bottom-border only. Clean, minimal file identity line.
   ──────────────────────────────────────────────────────── */
#view-progress .progress-room .progress-book-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  border-radius: 0 !important;
  margin: 0 0 var(--space-8) 0 !important;
  padding: 0 0 var(--space-5) var(--space-5) !important;
  box-shadow: none !important;
  width: 100% !important;
  text-align: left !important;
  position: relative !important;
}

/* ── Percentage hero ────────────────────────────────────────
   The ring SVG is suppressed by existing CSS; only the
   number and its companion label are visible.
   ──────────────────────────────────────────────────────── */
#view-progress .progress-room .progress-ring-container {
  background: none !important;
  border-radius: 0 !important;
  margin: 0 0 var(--space-2) 0 !important;
  padding: var(--space-8) 0 var(--space-4) !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  width: 100% !important;
}

#view-progress .progress-room .progress-ring-container::after {
  display: none !important;
}

/* Strip the ring wrap down to a simple container — SVG is hidden by earlier CSS */
#view-progress .progress-room .progress-ring-wrap {
  display: block !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

#view-progress .progress-room .progress-ring-wrap svg {
  display: none !important;
}

#view-progress .progress-room .progress-ring-center {
  position: static !important;
  transform: none !important;
}

#view-progress .progress-room .progress-ring-stats {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--space-1) !important;
}

/* The large percentage numeral */
#view-progress .progress-room .progress-ring-pct {
  font-family: var(--font-serif) !important;
  font-size: clamp(4rem, 10vw, 6rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: var(--text-ink) !important;
  opacity: 1 !important;
  display: block !important;
  animation: none !important;
  transition: color 0.6s ease !important;
}

/* Status label — italic, understated */
#view-progress .progress-room .progress-ring-label {
  font-style: italic !important;
  font-size: var(--text-lead) !important;
  color: var(--text-ink-soft) !important;
  line-height: 1.4 !important;
}

/* Issue count — small caps feel */
#view-progress .progress-room .progress-ring-issues {
  font-size: var(--text-sm) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.04em !important;
  color: var(--text-ink-faint) !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
}

/* ── Progress bar ───────────────────────────────────────────
   Thin 3px burgundy-on-cream track. Rounded.
   ──────────────────────────────────────────────────────── */
#view-progress .progress-room .progress-overall {
  margin: var(--space-6) 0 var(--space-2) !important;
  width: 100% !important;
}

#view-progress .progress-room .progress-overall progress {
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  border: none !important;
  border-radius: 2px !important;
  background: var(--bg-paper-alt) !important;
  overflow: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#view-progress .progress-room .progress-overall progress::-webkit-progress-bar {
  background: var(--bg-paper-alt) !important;
  border-radius: 2px !important;
}

#view-progress .progress-room .progress-overall progress::-webkit-progress-value {
  background: var(--accent-burgundy) !important;
  border-radius: 2px !important;
  transition: width 0.4s ease !important;
}

#view-progress .progress-room .progress-overall progress::-moz-progress-bar {
  background: var(--accent-burgundy) !important;
  border-radius: 2px !important;
}

/* ── Chapter timeline ────────────────────────────────────── */
#view-progress .progress-room .chapter-timeline {
  margin: var(--space-6) 0 var(--space-4) !important;
  padding: var(--space-4) 0 !important;
  border-top: 1px solid var(--border-hairline) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  width: 100% !important;
}

#view-progress .progress-room .chapter-timeline-track {
  justify-content: space-between !important;
  gap: var(--space-3) !important;
}

/* ── Elapsed + ETA meta row ─────────────────────────────── */
#view-progress .progress-room .elapsed,
#view-progress .progress-room .progress-eta {
  display: inline !important;
  margin-top: var(--space-3) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-ink-faint) !important;
  text-align: left !important;
}
#view-progress .progress-room .elapsed {
  width: 100% !important;
}

/* ── Literary quote ─────────────────────────────────────────
   Centered blockquote. Decorative top/bottom rules via
   ::before/::after. The .pq-rule divs are suppressed.
   ──────────────────────────────────────────────────────── */
#view-progress .progress-room .progress-quote {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 0 var(--space-8) !important;
  padding: var(--space-8) 0 !important;
  text-align: center !important;
  position: relative !important;
}

/* Top decorative rule */
#view-progress .progress-room .progress-quote::before {
  content: '' !important;
  display: block !important;
  width: 3rem !important;
  height: 1px !important;
  background: var(--border-hairline) !important;
  margin: 0 auto var(--space-6) !important;
}

/* Bottom decorative rule */
#view-progress .progress-room .progress-quote::after {
  content: '' !important;
  display: block !important;
  width: 3rem !important;
  height: 1px !important;
  background: var(--border-hairline) !important;
  margin: var(--space-6) auto 0 !important;
}

/* Suppress the HTML .pq-rule divs */
#view-progress .progress-room .progress-quote .pq-rule {
  display: none !important;
}

/* Quote body: large italic serif */
#view-progress .progress-room .progress-quote .pq-text {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  line-height: 1.9 !important;
  color: var(--text-ink-soft) !important;
  text-align: center !important;
  max-width: 52ch !important;
  margin: 0 auto !important;
}

/* Attribution: small caps treatment */
#view-progress .progress-room .progress-quote .pq-attr {
  display: block !important;
  text-align: center !important;
  margin-top: var(--space-4) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-ink-faint) !important;
  font-style: normal !important;
}

/* ── Editorial tips ─────────────────────────────────────────
   Left burgundy accent, small label, body text.
   ──────────────────────────────────────────────────────── */
#view-progress .progress-room .progress-tips {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid var(--accent-burgundy) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: var(--space-3) var(--space-5) !important;
}

#view-progress .progress-room .progress-tips-label {
  display: block !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--accent-burgundy) !important;
  margin-bottom: var(--space-2) !important;
  font-weight: 600 !important;
}

#view-progress .progress-room .progress-tip-text {
  font-size: var(--text-sm) !important;
  line-height: 1.75 !important;
  color: var(--text-ink-soft) !important;
}

/* ── Action footer ──────────────────────────────────────────
   Separated by a hairline. Notify + cancel inline.
   ──────────────────────────────────────────────────────── */
.progress-desk-footer {
  margin-top: auto !important;
  padding-top: var(--space-6) !important;
  border-top: 1px solid var(--border-hairline) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-6) !important;
  width: 100% !important;
  text-align: left !important;
}

.progress-desk-footer #btn-cancel {
  margin: 0 !important;
  padding: 0 !important;
}

.progress-desk-footer .progress-notify-btn {
  margin: 0 !important;
}

/* ── Suppress old card/ring backgrounds inherited from base styles ── */
#view-progress .progress-room .progress-quote {
  box-shadow: none !important;
}
#view-progress .progress-room .progress-tips {
  box-shadow: none !important;
}

/* ============================================================
   RESULTS PAGE — Desktop Comfort & Usability Pass
   Focus: navigation, readability, visual hierarchy, comfort.
   Desktop-only (100% desktop users).
   ============================================================ */

/* --- Context panel navigation bar (prev/next) --- */
.cp-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
}
.cp-nav-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.cp-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-ink-faint);
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 0.875rem;
  padding: 0;
}
.cp-nav-btn:hover {
  background: var(--bg-paper-alt);
  border-color: var(--border-color);
  color: var(--text-ink);
}
.cp-nav-btn:active {
  background: var(--surface-3);
}
.cp-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.cp-nav-counter {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-ink-faint);
  min-width: 60px;
  text-align: center;
}
.cp-nav-kbd {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  color: var(--text-ink-faint);
  opacity: 0.5;
  margin-left: var(--space-1);
}

/* --- Sticky group headers in left pane --- */
.results-issue-list .group-section > summary {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: var(--bg-paper) !important;
  padding-top: var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
}
[data-theme="dark"] .results-issue-list .group-section > summary {
  background: var(--bg-paper) !important;
}

/* --- Category section: better visual weight --- */
.results-workspace .cat-section > summary .cat-badge {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--text-ink-soft) !important;
}
.results-workspace .cat-section > summary .cat-count {
  font-size: 0.7rem !important;
  background: var(--bg-paper-alt);
  padding: 1px 6px;
  border-radius: 8px;
}

/* --- Stronger active card state --- */
.results-workspace .issue-card.ws-active {
  background: rgba(27, 58, 92, 0.06) !important;
  border-left-width: 3px !important;
  border-left-style: solid !important;
  border-left-color: var(--accent-navy) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}
.results-workspace .issue-card[data-severity="HIGH"].ws-active {
  background: rgba(139, 37, 0, 0.05) !important;
  border-left-color: var(--accent-burgundy) !important;
}
.results-workspace .issue-card[data-severity="MEDIUM"].ws-active {
  background: rgba(154, 107, 31, 0.04) !important;
  border-left-color: var(--color-amber) !important;
}

/* --- Issue card hover: cursor + subtle lift --- */
.results-workspace .issue-card {
  cursor: pointer !important;
  transition: background 150ms ease !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}
.results-workspace .issue-card:hover:not(.ws-active) {
  background: rgba(27, 58, 92, 0.025) !important;
}

/* --- Category pill in issue cards: more visible --- */
.results-workspace .ic-category-pill {
  font-size: 0.675rem !important;
  opacity: 0.8 !important;
  font-weight: 500 !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
}

/* --- Summary strip: severity dots visual --- */
.ss-severity-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: var(--space-4);
}
.ss-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.ss-dot-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.ss-dot-indicator.dot-high { background: var(--accent-burgundy); }
.ss-dot-indicator.dot-medium { background: var(--color-amber); }
.ss-dot-indicator.dot-low { background: var(--border-color); }
.ss-dot-count {
  color: var(--text-ink-soft);
  font-weight: 500;
}
.ss-dot-label {
  color: var(--text-ink-faint);
}

/* --- Search input: wider on desktop --- */
.ftv2-search {
  max-width: 200px !important;
  transition: max-width 200ms ease !important;
}
.ftv2-search:focus {
  max-width: 320px !important;
}

/* --- Analytics panel: unhide, make it minimal inline --- */
.analytics-panel {
  display: block !important;
  margin-bottom: var(--space-2) !important;
}
.analytics-panel-summary {
  font-size: var(--text-xs) !important;
  padding: var(--space-2) 0 !important;
  color: var(--text-ink-faint) !important;
  border-bottom: none !important;
}
.analytics-panel-summary i {
  font-size: 0.7rem !important;
}

/* --- Context panel footer: sticky at bottom --- */
.results-context-panel .cp-footer {
  position: sticky !important;
  bottom: 0 !important;
  background: var(--bg-paper) !important;
  padding: var(--space-4) 0 var(--space-2) !important;
  margin-top: auto !important;
  z-index: 2 !important;
}
[data-theme="dark"] .results-context-panel .cp-footer {
  background: var(--bg-paper-alt) !important;
}

/* --- Resolution buttons: clearer states, bigger targets --- */
.cp-footer .res-btn {
  padding: var(--space-2) var(--space-5) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--text-sm) !important;
  transition: all 150ms ease !important;
}
.cp-footer .res-btn:hover {
  background: var(--bg-paper-alt) !important;
}
.cp-footer .res-btn.res-accept:hover {
  background: var(--accent-green-light) !important;
}
.cp-footer .res-btn.res-dismiss:hover {
  background: var(--accent-burgundy-light) !important;
}
.cp-footer .res-btn.active {
  background: var(--bg-paper-alt) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
}
.cp-footer .res-btn.active.res-accept {
  background: var(--accent-green-light) !important;
  border-color: var(--accent-green) !important;
}
.cp-footer .res-btn.active.res-dismiss {
  background: var(--accent-burgundy-light) !important;
  border-color: var(--accent-burgundy) !important;
}

/* --- Empty state: warmer editorial --- */
.cp-empty-state {
  padding-top: var(--space-16) !important;
  align-items: center !important;
  text-align: center !important;
}
.cp-empty-icon {
  font-size: 2rem !important;
  opacity: 0.15 !important;
  color: var(--accent-navy) !important;
}
.cp-empty-hint {
  font-size: var(--text-base) !important;
  max-width: 280px !important;
  opacity: 0.5 !important;
}
.cp-empty-shortcuts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
  opacity: 0.4;
}
.cp-empty-shortcuts kbd {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  background: var(--bg-paper-alt);
  border: 1px solid var(--border-hairline);
  border-radius: 3px;
  padding: 1px 5px;
  margin: 0 2px;
  line-height: 1.4;
}

/* --- Context panel description: more breathing room --- */
#view-results .cp-description {
  margin-top: var(--space-2) !important;
  margin-bottom: var(--space-2) !important;
}

/* --- Context panel blocks: better visual separation --- */
#view-results .cp-block {
  margin-bottom: var(--space-2) !important;
}
#view-results .cp-block-label {
  font-size: 0.6875rem !important;
  margin-bottom: var(--space-2) !important;
}

/* --- Diff view: cleaner track-changes --- */
#view-results .cp-block-text.cp-diff-current {
  opacity: 0.6 !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-2) var(--space-4) !important;
  border-left-width: 2px !important;
}
#view-results .cp-block-text.cp-diff-suggested {
  font-size: var(--text-base) !important;
  padding: var(--space-3) var(--space-4) !important;
  background: rgba(46, 90, 68, 0.03) !important;
  border-left-width: 3px !important;
}

/* --- Scroll context bar: subtle fixed position indicator --- */

/* --- Resolved card in left pane: visual distinction --- */
.results-workspace .issue-card.res-accepted .ic-desc {
  color: var(--text-ink-faint) !important;
}
.results-workspace .issue-card.res-accepted .ic-page {
  color: var(--accent-green) !important;
}
.results-workspace .issue-card.res-accepted::after {
  content: '';
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  opacity: 0.5;
}
.results-workspace .issue-card {
  position: relative !important;
}

/* --- Bottom export bar: add resolution progress --- */
.export-bar-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: auto;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-ink-faint);
}
.export-bar-progress-bar {
  width: 120px;
  height: 3px;
  background: var(--border-hairline);
  border-radius: 2px;
  overflow: hidden;
}
.export-bar-progress-fill {
  height: 100%;
  background: var(--accent-green);
  border-radius: 2px;
  transition: width 300ms ease;
}

/* --- Issue card header: cleaner layout for desktop --- */
.results-workspace .issue-card-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-2) !important;
  padding: var(--space-3) var(--space-3) !important;
}
.results-workspace .ic-page {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--text-ink-faint) !important;
  white-space: nowrap !important;
  min-width: 32px !important;
}
.results-workspace .ic-desc {
  flex: 1 !important;
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* --- Left pane: better max-height for desktop --- */
.results-issue-list {
  max-height: calc(100vh - 180px) !important;
  scrollbar-gutter: stable !important;
}

/* --- Context panel: better max-height --- */
.results-context-panel {
  max-height: calc(100vh - 180px) !important;
  display: flex !important;
  flex-direction: column !important;
}
.results-context-panel .cp-detail {
  flex: 1 !important;
  overflow-y: auto !important;
}

/* ============================================================
   EDITORIAL POLISH — Comfort & Elegance Pass
   Desktop-first. 100% of users are on desktop browsers.
   No stacking, no mobile-first compromises.
   ============================================================ */

/* --- 1. Custom scrollbars — thin, warm, editorial --- */
.results-issue-list::-webkit-scrollbar,
.results-context-panel::-webkit-scrollbar,
.results-context-panel .cp-detail::-webkit-scrollbar {
  width: 5px;
}
.results-issue-list::-webkit-scrollbar-track,
.results-context-panel::-webkit-scrollbar-track,
.results-context-panel .cp-detail::-webkit-scrollbar-track {
  background: transparent;
}
.results-issue-list::-webkit-scrollbar-thumb,
.results-context-panel::-webkit-scrollbar-thumb,
.results-context-panel .cp-detail::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}
.results-issue-list::-webkit-scrollbar-thumb:hover,
.results-context-panel::-webkit-scrollbar-thumb:hover,
.results-context-panel .cp-detail::-webkit-scrollbar-thumb:hover {
  background: var(--border-color-hover);
}
/* Firefox thin scrollbars */
.results-issue-list,
.results-context-panel,
.results-context-panel .cp-detail {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

/* --- 2. Workspace: soft visual separator, warmer right pane --- */
.results-workspace {
  gap: 0 !important;
  border-top: 1px solid var(--border-hairline);
}
.results-context-panel {
  background: rgba(249, 248, 246, 0.5) !important; /* hint of warm paper */
  border-left: 1px solid var(--border-hairline) !important;
}
[data-theme="dark"] .results-context-panel {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* --- 3. Issue cards — warmer hover, richer active state --- */
.results-workspace .issue-card {
  transition: background 0.2s ease, border-left-color 0.2s ease !important;
  border-radius: 2px !important;
}
.results-workspace .issue-card:hover {
  background: rgba(243, 241, 237, 0.7) !important; /* --bg-paper-alt at 70% */
}
/* Active card: warm paper tint + navy left accent */
.results-workspace .issue-card.ws-active {
  background: rgba(232, 237, 242, 0.35) !important; /* navy tint at 35% */
  border-left-color: var(--accent-navy) !important;
}
.results-workspace .issue-card[data-severity="HIGH"].ws-active {
  background: rgba(253, 240, 236, 0.4) !important; /* burgundy tint at 40% */
  border-left-color: var(--accent-burgundy) !important;
}
/* Subtle left-accent animation on hover */
.results-workspace .issue-card[data-severity="LOW"]:hover {
  border-left-color: var(--border-color) !important;
}

/* --- 4. Issue card header — better vertical rhythm --- */
.results-workspace .issue-card-header {
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2) !important;
  border-bottom-color: transparent !important;
  transition: background 0.15s ease !important;
}
.results-workspace .issue-card:last-child .issue-card-header {
  border-bottom-color: transparent !important;
}

/* --- 5. Context panel content — reuses cpFadeIn from above --- */
.cp-detail {
  animation: cpFadeIn 0.25s ease !important;
}

/* --- 6. Context panel blocks — subtle warm fills for readability --- */
.cp-block-text.cp-source {
  background: rgba(243, 241, 237, 0.5) !important; /* warm paper tint */
  border-left: 2px solid var(--border-color) !important;
  border-radius: 0 3px 3px 0 !important;
  padding: var(--space-3) var(--space-4) !important;
  font-style: italic !important;
}
.cp-block-text.cp-translation {
  background: rgba(232, 237, 242, 0.3) !important; /* navy tint */
  border-left: 2px solid var(--accent-navy) !important;
  border-radius: 0 3px 3px 0 !important;
  padding: var(--space-3) var(--space-4) !important;
}
.cp-block-text.cp-suggestion {
  background: rgba(235, 241, 237, 0.4) !important; /* green tint */
  border-left: 2px solid var(--accent-green) !important;
  border-radius: 0 3px 3px 0 !important;
  padding: var(--space-3) var(--space-4) !important;
}
[data-theme="dark"] .cp-block-text.cp-source {
  background: rgba(255, 255, 255, 0.03) !important;
}
[data-theme="dark"] .cp-block-text.cp-translation {
  background: rgba(27, 58, 92, 0.08) !important;
}
[data-theme="dark"] .cp-block-text.cp-suggestion {
  background: rgba(46, 90, 68, 0.08) !important;
}

/* --- 7. Context panel explanation — better reading comfort --- */
.cp-description {
  font-family: var(--font-serif) !important;
  font-size: var(--text-base) !important;
  line-height: 1.8 !important;
  color: var(--text-ink-soft) !important;
  letter-spacing: 0.005em !important;
}

/* --- 8. Summary strip — vertical dividers between stat groups --- */
#summary-strip.summary-strip {
  gap: var(--space-4) !important;
}
.ss-verdict {
  position: relative !important;
}
/* Separator dot between count items in verdict */
.ss-verdict .count-high + .count-med::before,
.ss-verdict .count-med + .count-low::before {
  content: '\00B7' !important;
  margin: 0 var(--space-2) !important;
  color: var(--border-color) !important;
  font-weight: 400 !important;
}

/* --- 9. Filter toolbar — editorial softness --- */
.filter-toolbar-v2 {
  border-bottom-color: var(--border-hairline) !important;
  padding: var(--space-3) 0 !important;
}
.ftv2-search {
  background: var(--bg-paper-alt) !important;
  border-color: transparent !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}
.ftv2-search:focus {
  background: var(--surface-0) !important;
  border-color: var(--accent-navy) !important;
  box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.08) !important;
  outline: none !important;
}
.ftv2-search::placeholder {
  color: var(--text-ink-faint) !important;
  font-style: italic !important;
}

/* Quick-filter chips: softer resting state */
.quick-chip {
  transition: all 0.2s ease !important;
  border-color: transparent !important;
}
.quick-chip:hover {
  border-color: var(--border-color) !important;
}

/* --- 10. Group section headers — warmer hover, subtle indent marker --- */
.group-section > summary {
  transition: color 0.2s ease, background 0.15s ease !important;
  padding-left: var(--space-2) !important;
}
.group-section > summary:hover {
  background: rgba(243, 241, 237, 0.5) !important;
  color: var(--text-ink-soft) !important;
}
.group-section > summary .group-count {
  opacity: 0.5 !important;
  transition: opacity 0.15s ease !important;
}
.group-section > summary:hover .group-count {
  opacity: 0.8 !important;
}

/* --- 11. Export bar — frosted glass, elevated presence --- */
.results-export-bar {
  background: rgba(249, 248, 246, 0.85) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-top: 1px solid var(--border-hairline) !important;
  box-shadow: 0 -2px 16px rgba(44, 44, 44, 0.05) !important;
}
[data-theme="dark"] .results-export-bar {
  background: rgba(30, 30, 30, 0.85) !important;
}

/* --- 12. Empty state — warmer, more editorial --- */
.cp-empty-state {
  padding-top: var(--space-12) !important;
  align-items: center !important;
  text-align: center !important;
}
.cp-empty-icon {
  font-size: 2rem !important;
  opacity: 0.15 !important;
  color: var(--accent-navy) !important;
}
.cp-empty-hint {
  font-size: var(--text-base) !important;
  max-width: 260px !important;
  opacity: 0.5 !important;
  line-height: 1.8 !important;
}
.cp-empty-shortcuts {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-2) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  color: var(--text-ink-faint) !important;
  opacity: 0.4 !important;
  margin-top: var(--space-4) !important;
}
.cp-empty-shortcuts kbd {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  padding: 1px 5px !important;
  background: var(--bg-paper-alt) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: 3px !important;
  margin: 0 2px !important;
}

/* --- 13. Resolution buttons — more refined in context panel --- */
.cp-footer .res-btn {
  border-radius: var(--radius-sm) !important;
  transition: all 0.2s ease !important;
}
.cp-footer .res-btn:hover {
  background: var(--bg-paper-alt) !important;
}
.cp-footer .res-btn.res-accept:hover {
  background: rgba(235, 241, 237, 0.6) !important;
  color: var(--accent-green) !important;
}
.cp-footer .res-btn.res-dismiss:hover {
  background: rgba(253, 240, 236, 0.5) !important;
  color: var(--accent-burgundy) !important;
}

/* --- 14. Category heading in context panel — more presence --- */
.cp-category-heading {
  padding-bottom: var(--space-3) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  margin-bottom: var(--space-4) !important;
}

/* --- 15. Block labels — refined small-caps treatment --- */
.cp-block-label {
  margin-bottom: var(--space-3) !important;
  opacity: 0.7 !important;
}

/* --- 16. Highlight marks — warmer, more visible --- */
.cp-highlight {
  background: rgba(139, 37, 0, 0.08) !important;
  border-radius: 2px !important;
  padding: 1px 4px !important;
  border-bottom: 1px solid rgba(139, 37, 0, 0.2) !important;
}

/* --- 17. Undo toast — frosted glass match --- */
.undo-toast {
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  background: rgba(27, 58, 92, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* --- 18. Scope banner — softer presence --- */
.scope-banner {
  border-radius: 3px !important;
  font-style: italic !important;
}

/* --- 19. Perfect score empty state — celebration warmth --- */
.empty-state-perfect {
  padding: var(--space-16) var(--space-8) !important;
}
.empty-state-perfect i {
  font-size: 2.5rem !important;
  opacity: 0.7 !important;
}
.empty-state-perfect h3 {
  font-family: var(--font-serif) !important;
  font-size: var(--text-lg) !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

/* --- 20. Reduced motion — respect accessibility --- */
@media (prefers-reduced-motion: reduce) {
  .cp-detail {
    animation: none !important;
  }
  .results-workspace .issue-card {
    transition: none !important;
  }
  .ftv2-search {
    transition: none !important;
  }
  .cp-footer .res-btn {
    transition: none !important;
  }
}

/* ============================================================
   FINAL POLISH — March 2026
   Visual hierarchy, readability, brand refinement pass.
   ============================================================ */

/* ----------------------------------------------------------
   1. WELCOME PAGE — Hero H1 smooth scaling
   Replace hard breakpoint jump (48px → 72px) with fluid clamp.
   ---------------------------------------------------------- */
.hero-text h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem) !important;
  line-height: 1.08 !important;
  letter-spacing: clamp(-0.01em, -0.005em - 0.5vw, -0.03em) !important;
}

/* How-step h3: explicit line-height for consistency */
.how-step h3 {
  line-height: 1.3 !important;
}

/* Mock manuscript: use design variables instead of hardcoded */
.mock-manuscript {
  background: var(--bg-paper) !important;
}
.mock-ms-highlight.high {
  background: rgba(139, 37, 0, 0.06) !important;
  border-bottom-color: var(--accent-burgundy) !important;
}
.mock-ms-highlight.medium {
  background: rgba(27, 58, 92, 0.05) !important;
  border-bottom-color: var(--accent-navy) !important;
}

/* Hero metrics: slightly less faint for readability */
.hero-metrics {
  color: var(--text-ink-soft) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
}

/* Checks grid: improve hover transition */
.check-item {
  transition: transform 200ms ease, opacity 200ms ease !important;
}
.check-item:hover {
  opacity: 0.85 !important;
}
.check-item:hover .check-label {
  transition: color 200ms ease, border-color 200ms ease !important;
}

/* Testimonial: slightly increase quote font weight for presence */
.testimonial blockquote {
  font-weight: 500 !important;
  color: var(--text-ink) !important;
}

/* ----------------------------------------------------------
   2. PRICING PAGE — Polish & depth
   ---------------------------------------------------------- */

/* Popular card CTA: shadow on hover for depth perception */
.pricing-card.popular .pricing-card-cta:hover {
  box-shadow: 0 4px 16px rgba(139, 37, 0, 0.18) !important;
}

/* Non-popular card CTAs: subtle shadow on hover */
.pricing-card:not(.popular) .pricing-card-cta:hover {
  box-shadow: 0 2px 8px rgba(27, 58, 92, 0.1) !important;
}

/* Card padding: bump minimum from 28px to 32px */
.pricing-card {
  padding: clamp(32px, 4vw, 40px) !important;
}

/* Feature list: slightly more vertical breathing room */
.pricing-card-features li {
  padding: var(--space-2) 0 !important;
  line-height: 1.65 !important;
}

/* Popular card checkmarks: ensure visible burgundy */
.pricing-card.popular .pricing-card-features li::before {
  color: var(--accent-burgundy) !important;
  font-weight: 700 !important;
}

/* Value section stat: slightly larger for emphasis */
.pricing-value-stat {
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* FAQ: improve answer text readability */
.pricing-faq-item p {
  line-height: 1.75 !important;
  color: var(--text-ink-soft) !important;
}

/* Pricing hero subtitle: slightly larger */
.pricing-hero-subtitle {
  font-size: clamp(0.9375rem, 2vw, 1.0625rem) !important;
  line-height: 1.7 !important;
}

/* ----------------------------------------------------------
   3. UPLOAD PAGE — Better interactivity feedback
   ---------------------------------------------------------- */

/* Drop zone icon: more visible at rest */
.drop-zone .drop-icon {
  opacity: 0.50 !important;
}

/* Drop zone hover: stronger visual feedback */
.drop-zone:hover .drop-icon {
  opacity: 0.60 !important;
  color: var(--accent-navy) !important;
}
.drop-zone:hover:not(.has-file),
.file-drop-zone:hover:not(.has-file) {
  background: #EDE9E3 !important;
  border-color: var(--accent-navy) !important;
}

/* Upload progress bar: 3px for visibility (restore from 2px override) */
.upload-status progress {
  height: 3px !important;
}

/* Check card descriptions on mobile: less aggressive truncation */
@media (max-width: 640px) {
  .check-card p {
    max-width: 28ch !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* Check card disabled state: clearer visual */
.check-card[aria-disabled="true"] {
  opacity: 0.35 !important;
  position: relative !important;
}
.check-card[aria-disabled="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-paper);
  opacity: 0.3;
  border-radius: inherit;
  pointer-events: none;
}

/* Run button: stronger disabled state distinction */
#btn-run:disabled {
  opacity: 0.45 !important;
  filter: grayscale(0.3) !important;
}
#btn-run:not(:disabled) {
  box-shadow: 0 2px 8px rgba(139, 37, 0, 0.15) !important;
}
#btn-run:not(:disabled):hover {
  box-shadow: 0 4px 16px rgba(139, 37, 0, 0.22) !important;
  transform: translateY(-1px) !important;
}

/* Drop zone has-file: stronger success indicator */
.drop-zone.has-file {
  background: #ECF2EE !important;
  border-color: rgba(46, 90, 68, 0.25) !important;
}
.drop-zone.has-file .drop-icon {
  color: var(--accent-green) !important;
  opacity: 0.65 !important;
}

/* Scope range inputs: more visible focus state */
.scope-range-field input:focus {
  border-bottom-width: 2px !important;
  border-bottom-color: var(--accent-navy) !important;
  box-shadow: 0 2px 0 0 var(--accent-navy) !important;
}

/* ----------------------------------------------------------
   4. PROGRESS PAGE — Minor refinements
   ---------------------------------------------------------- */

/* Chapter timeline active label: slightly bolder */
#view-progress .ctl-marker.active .ctl-label {
  font-weight: 700 !important;
  font-size: 0.75rem !important;
}

/* Progress percentage: improve number readability */
#view-progress .progress-ring-pct {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
}

/* Progress tips: warmer left border */
.progress-tips {
  border-left-width: 3px !important;
}

/* ----------------------------------------------------------
   5. RESULTS PAGE — Critical for editor experience
   ---------------------------------------------------------- */

/* 5a. Category pill: full opacity, readable at a glance */
.results-workspace .ic-category-pill,
.results-workspace .issue-card .ic-category-pill {
  opacity: 1 !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* 5b. Issue card description: better readability for scanning */
.results-workspace .issue-card .ic-desc {
  line-height: 1.65 !important;
  color: var(--text-ink-soft) !important;
  -webkit-line-clamp: 3 !important;
}

/* 5c. Issue card: cleaner hover state */
.results-workspace .issue-card:hover {
  background: var(--bg-paper-alt) !important;
  transition: background 150ms ease !important;
}

/* 5d. Active issue: subtle left background gradient for focus indication */
.results-workspace .issue-card.ws-active {
  background: linear-gradient(
    90deg,
    rgba(27, 58, 92, 0.04) 0%,
    transparent 50%
  ) !important;
}
.results-workspace .issue-card.ws-active .ic-desc {
  color: var(--text-ink) !important;
}

/* 5e. Empty state: warmer, more inviting */
.cp-empty-icon {
  opacity: 0.25 !important;
}
.cp-empty-hint {
  opacity: 0.65 !important;
  line-height: 1.8 !important;
}
.cp-empty-shortcuts {
  opacity: 0.55 !important;
}

/* 5f. Context panel block text: improved readability */
.cp-block-text {
  line-height: 1.75 !important;
  font-size: var(--text-base) !important;
}

/* 5g. Context panel suggestion: distinguish from translation */
.cp-block-text.cp-suggestion {
  font-weight: 500 !important;
  border-left-color: var(--accent-green) !important;
  border-left-width: 3px !important;
}

/* 5h. Context panel source: softer styling */
.cp-block-text.cp-source {
  color: var(--text-ink-soft) !important;
  border-left-color: var(--border-color) !important;
}

/* 5i. Context panel navigation buttons: clearer active states */
.cp-nav-prev:hover,
.cp-nav-next:hover {
  background: var(--bg-paper-alt) !important;
  color: var(--text-ink) !important;
}

/* 5j. Filter toolbar search: smoother expand transition */
.ftv2-search {
  transition: width 250ms ease, border-color 200ms ease !important;
}
.ftv2-search:focus {
  border-color: var(--accent-navy) !important;
  box-shadow: 0 0 0 2px rgba(27, 58, 92, 0.08) !important;
}

/* 5k. Group section headers: slightly more padding for scanability */
.results-workspace .group-section > summary {
  padding: var(--space-4) 0 var(--space-3) !important;
  letter-spacing: 0.01em !important;
}

/* 5l. Category sub-headers: cleaner spacing */
.results-workspace .cat-section > summary {
  padding: var(--space-3) 0 var(--space-2) !important;
}

/* 5m. Severity border: medium uses amber consistently */
.results-workspace .issue-card[data-severity="MEDIUM"] {
  border-left-color: var(--color-amber) !important;
}

/* 5n. Issue card page number: slightly more visible */
.results-workspace .issue-card .ic-page {
  font-weight: 600 !important;
  opacity: 0.9 !important;
}

/* 5o. Context panel: subtle top separator for visual anchoring */
.results-context-panel {
  border-left: 1px solid var(--border-hairline) !important;
}

/* 5p. Resolution progress indicator: improve contrast */
.ftv2-resolution-progress {
  font-variant-numeric: tabular-nums !important;
}

/* ----------------------------------------------------------
   6. GLOBAL REFINEMENTS
   ---------------------------------------------------------- */

/* Scrollbar styling for results list (webkit) */
.results-issue-list::-webkit-scrollbar {
  width: 4px;
}
.results-issue-list::-webkit-scrollbar-track {
  background: transparent;
}
.results-issue-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}
.results-issue-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-ink-faint);
}

/* Focus-visible: consistent ring across interactive elements */
.pricing-card-cta:focus-visible,
.btn-burgundy:focus-visible,
.site-nav-cta:focus-visible,
#btn-run:focus-visible {
  outline: 2px solid var(--accent-navy) !important;
  outline-offset: 2px !important;
}

/* Reduced motion: cover new animations */
@media (prefers-reduced-motion: reduce) {
  .hero-text h1,
  .check-item,
  .pricing-card,
  .pricing-card-cta,
  #btn-run,
  .drop-zone,
  .ftv2-search {
    transition: none !important;
  }
  .results-workspace .issue-card {
    animation: none !important;
  }
}

/* ============================================================
   FIX PASS 2 — Group vs Category hierarchy, filter alignment
   ============================================================ */

/* ----------------------------------------------------------
   A. GROUP SECTION HEADERS — much more prominent than sub-cats
   "Yazım & Noktalama" must clearly dominate "TİPOGRAFİ"
   ---------------------------------------------------------- */
.results-workspace .group-section > summary {
  font-family: var(--font-serif) !important;
  font-style: normal !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  color: var(--text-ink) !important;
  letter-spacing: -0.01em !important;
  padding: var(--space-5) 0 var(--space-3) !important;
  border-bottom: 2px solid var(--border-color) !important;
  margin-top: var(--space-4) !important;
}
.results-workspace .group-section:first-child > summary {
  margin-top: 0 !important;
}
.results-workspace .group-section > summary:hover {
  color: var(--accent-burgundy) !important;
}
.results-workspace .group-section > summary .group-count {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: var(--text-sm) !important;
  color: var(--text-ink-faint) !important;
  font-weight: 400 !important;
}

/* CATEGORY sub-headers: clearly subordinate, small-caps, lighter */
.results-workspace .cat-section > summary {
  padding: var(--space-2) 0 var(--space-2) var(--space-3) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
}
.results-workspace .cat-section > summary .cat-badge {
  font-size: 0.65rem !important;
  color: var(--text-ink-faint) !important;
  letter-spacing: 0.08em !important;
  opacity: 0.8 !important;
}
.results-workspace .cat-section > summary .cat-count {
  font-size: 0.6rem !important;
  color: var(--text-ink-faint) !important;
  opacity: 0.6 !important;
}
.results-workspace .cat-section > summary .chevron-icon {
  font-size: 0.5rem !important;
  opacity: 0.5 !important;
}

/* ----------------------------------------------------------
   B. FILTER TOOLBAR ALIGNMENT
   All elements in ftv2-row1 must share the same height and
   vertical alignment. The search input was taller than chips.
   ---------------------------------------------------------- */
.ftv2-row1 {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  flex-wrap: wrap !important;
  min-height: 32px !important;
}
.ftv2-row1 button,
.ftv2-row1 input,
.ftv2-row1 select,
.ftv2-row1 .quick-chip,
.ftv2-row1 .filter-hint {
  margin: 0 !important;
}
/* Quick-filter chips container */
.quick-filters {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-1) !important;
  flex-shrink: 0 !important;
}
/* All interactive elements in the row: unified 28px height */
.quick-chip {
  height: 28px !important;
  line-height: 26px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  font-size: 0.75rem !important;
}
/* Search input: MUST match chip height exactly */
.ftv2-search {
  height: 28px !important;
  line-height: 26px !important;
  padding: 0 var(--space-3) !important;
  box-sizing: border-box !important;
  font-size: 0.8rem !important;
  max-width: 160px !important;
}
.ftv2-search:focus {
  max-width: 240px !important;
}
/* Filter hint text: same height, vertically centered */
.filter-hint {
  display: inline-flex !important;
  align-items: center !important;
  height: 28px !important;
  line-height: 28px !important;
  font-size: 0.7rem !important;
  color: var(--text-ink-faint) !important;
  white-space: nowrap !important;
  margin-left: var(--space-1) !important;
  opacity: 0.7 !important;
}
/* Filter button: same height */
.ftv2-filter-btn {
  height: 28px !important;
  line-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-1) !important;
  padding: 0 var(--space-2) !important;
  box-sizing: border-box !important;
}

/* ----------------------------------------------------------
   C. PROGRESS PAGE — Two-column "Reading Room" on wide screens
   Left desk (~60%): progress tracking, chapter timeline,
   action footer. Right margin (~40%): quote + tips, sticky.
   ---------------------------------------------------------- */
@media (min-width: 1200px) {
  /* Outer room: two-column grid */
  .progress-room {
    display: grid !important;
    grid-template-columns: 3fr 2fr !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    max-width: none !important;
    align-items: start !important;
    flex-direction: unset !important;
    min-height: 60vh !important;
  }

  /* Desk: single flex column with right border */
  .progress-room-desk {
    display: flex !important;
    flex-direction: column !important;
    grid-column: 1 / 2 !important;
    padding-right: clamp(48px, 5vw, 80px) !important;
    border-right: 1px solid var(--border-hairline) !important;
    min-height: auto !important;
  }

  /* Margin: sticky sidebar, left border, left padding */
  .progress-room-margin {
    grid-column: 2 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    padding-left: clamp(40px, 4vw, 64px) !important;
    padding-top: var(--space-4) !important;
    margin-top: 0 !important;
    border-top: none !important;
    border-left: none !important; /* border-right on desk is the visual separator */
    position: sticky !important;
    top: 80px !important;
    align-self: start !important;
    min-height: auto !important;
  }

  /* Quote: hero of the margin — generous vertical padding */
  #view-progress .progress-room .progress-room-margin .progress-quote {
    padding: var(--space-10) 0 !important;
    margin-bottom: var(--space-6) !important;
    text-align: center !important;
  }

  #view-progress .progress-room .progress-room-margin .progress-quote .pq-text {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important;
    max-width: 38ch !important;
  }

  /* Tips: below quote, subtle divider */
  #view-progress .progress-room .progress-room-margin .progress-tips {
    margin-top: var(--space-2) !important;
    padding-top: var(--space-1) !important;
  }

  /* Desk footer: bottom of the desk column */
  .progress-room-desk .progress-desk-footer {
    margin-top: auto !important;
    padding-top: var(--space-8) !important;
  }
}

/* ----------------------------------------------------------
   D. RESULTS — Hide empty state shortcuts & bottom export bar
   ---------------------------------------------------------- */

/* Empty state: hide keyboard shortcuts — confusing for first-time users.
   Show only the hint text and book icon. */
.cp-empty-shortcuts {
  display: none !important;
}

/* Bottom export bar: redundant with top header actions.
   Top has full export dropdown (MD, PDF, JSON) + Share + ProofView.
   Hiding to avoid duplicate controls and bottom-of-page clutter. */
.results-export-bar {
  display: none !important;
}