/* ============================================================
   Rankwell Design System — Colors & Type
   ============================================================
   Light-mode primary. Cool neutrals. Forest-green primary
   (rooted in growth/SEO) + ink blue secondary. Amber + rose
   for status.
   ============================================================ */

/* -------- Fonts: self-hosted Geist variable families -------- */
@font-face {
  font-family: "Geist";
  src: url("./assets/fonts/Geist-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ===========================================================
     COLORS — Base palette
     =========================================================== */

  /* Neutrals (cool, slightly blue-tinted) */
  --ink-950: #0b0f14;
  --ink-900: #121821;
  --ink-800: #1c2532;
  --ink-700: #2a3445;
  --ink-600: #465167;
  --ink-500: #687489;
  --ink-400: #8d97aa;
  --ink-300: #b5bdcc;
  --ink-200: #d6dbe5;
  --ink-100: #e9ecf2;
  --ink-50:  #f4f6fa;
  --ink-0:   #ffffff;

  /* Primary — Ink black (tool-forward, personal dashboard) */
  --brand-950: #0a0d12;
  --brand-900: var(--brand-950);
  --brand-800: #151a22;
  --brand-700: #1f2630;
  --brand-600: #2a3240;   /* primary action */
  --brand-500: #3a4455;
  --brand-400: #58627a;
  --brand-300: #8790a4;
  --brand-200: #c3c9d4;
  --brand-100: #e1e4ec;
  --brand-50:  #f4f5f9;

  /* Accent — Moss green (growth/up indicators only) */
  --moss-900: #0d3524;
  --moss-800: #134a33;
  --moss-700: #1a6344;
  --moss-600: #22805a;
  --moss-500: #2ea373;
  --moss-400: #57bd91;
  --moss-300: #8fd5b3;
  --moss-200: #c2e9d5;
  --moss-100: #e3f4ec;
  --moss-50:  #f1faf5;

  /* Secondary — Ink blue (links, info) */
  --blue-900: #0b2042;
  --blue-800: #11315f;
  --blue-700: #184383;
  --blue-600: #2056a6;
  --blue-500: #2a6ccb;   /* link default */
  --blue-400: #5389dc;
  --blue-300: #8baee9;
  --blue-200: #bed0f2;
  --blue-100: #e1e9f8;
  --blue-50:  #f1f5fc;

  /* Amber — warnings, mid-tier rankings */
  --amber-700: #8a5a00;
  --amber-600: #b67400;
  --amber-500: #d89200;
  --amber-400: #eab341;
  --amber-300: #f4ce78;
  --amber-200: #fbe6b1;
  --amber-100: #fef3d9;
  --amber-50:  #fefaee;

  /* Rose — errors, ranking drops */
  --rose-700: #8a1d2f;
  --rose-600: #b22540;
  --rose-500: #d43155;
  --rose-400: #e56180;
  --rose-300: #f093a9;
  --rose-200: #f8c2cf;
  --rose-100: #fce3ea;
  --rose-50:  #fef3f6;

  /* ===========================================================
     SEMANTIC COLORS
     =========================================================== */

  /* Foreground */
  --fg-1: var(--ink-950);         /* primary text */
  --fg-2: var(--ink-700);         /* body */
  --fg-3: var(--ink-500);         /* secondary / meta */
  --fg-4: var(--ink-400);         /* tertiary / placeholder */
  --fg-on-primary: var(--ink-0);
  --fg-on-dark: var(--ink-0);

  /* Background */
  --bg-0: var(--ink-0);           /* app canvas */
  --bg-1: var(--ink-50);          /* subtle */
  --bg-2: var(--ink-100);         /* sunken */
  --bg-3: var(--ink-200);         /* deeper sunken */
  --bg-inverse: var(--ink-950);

  /* Surface (cards, menus) */
  --surface-1: var(--ink-0);
  --surface-2: var(--ink-50);
  --surface-raised: var(--ink-0);

  /* Borders */
  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus: var(--brand-900);

  /* Brand actions — ink black primary, moss is success accent only */
  --action-primary: var(--brand-900);
  --action-primary-hover: var(--brand-700);
  --action-primary-press: var(--brand-600);

  --action-secondary-bg: var(--ink-0);
  --action-secondary-border: var(--ink-200);
  --action-secondary-hover: var(--ink-50);

  --link: var(--blue-600);
  --link-hover: var(--blue-700);

  /* Status */
  --status-success: var(--moss-500);
  --status-success-bg: var(--moss-50);
  --status-success-fg: var(--moss-800);

  --status-warning: var(--amber-500);
  --status-warning-bg: var(--amber-50);
  --status-warning-fg: var(--amber-700);

  --status-danger: var(--rose-500);
  --status-danger-bg: var(--rose-50);
  --status-danger-fg: var(--rose-700);

  --status-info: var(--blue-500);
  --status-info-bg: var(--blue-50);
  --status-info-fg: var(--blue-700);

  /* Ranking-specific (SEO semantics) */
  --rank-top3: var(--moss-600);       /* positions 1–3 */
  --rank-page1: var(--moss-400);      /* positions 4–10 */
  --rank-page2: var(--amber-500);     /* positions 11–20 */
  --rank-deep: var(--ink-400);        /* 20+ */
  --rank-drop: var(--rose-500);
  --rank-rise: var(--moss-500);

  /* ===========================================================
     TYPOGRAPHY
     =========================================================== */

  --font-sans: "Geist", -apple-system, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, "Cascadia Mono", "PingFang SC", monospace;
  --font-display: "Geist", -apple-system, "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;

  /* Scale — 1.200 minor third, anchored at 15px */
  --fs-12: 0.75rem;    /* 12 — caption, labels */
  --fs-13: 0.8125rem;  /* 13 — small UI */
  --fs-14: 0.875rem;   /* 14 — dense UI / table */
  --fs-15: 0.9375rem;  /* 15 — body default */
  --fs-16: 1rem;       /* 16 — body large */
  --fs-18: 1.125rem;   /* 18 — lede */
  --fs-20: 1.25rem;    /* 20 — h4 */
  --fs-24: 1.5rem;     /* 24 — h3 */
  --fs-30: 1.875rem;   /* 30 — h2 */
  --fs-36: 2.25rem;    /* 36 — h1 */
  --fs-48: 3rem;       /* 48 — display sm */
  --fs-60: 3.75rem;    /* 60 — display md */
  --fs-72: 4.5rem;     /* 72 — display lg */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-caps: 0.08em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ===========================================================
     SPACING — 4px base, half-steps at low end
     =========================================================== */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;

  /* ===========================================================
     RADII
     =========================================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;    /* default for inputs, buttons */
  --radius-lg: 12px;   /* cards */
  --radius-xl: 16px;   /* modals, big surfaces */
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* ===========================================================
     SHADOWS — soft, cool-tinted, multi-layer
     =========================================================== */
  --shadow-xs: 0 1px 1px rgba(16, 24, 40, 0.04), 0 0 0 1px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.10), 0 8px 8px -4px rgba(16, 24, 40, 0.04);
  --shadow-focus-ring: 0 0 0 3px rgba(42, 50, 64, 0.20);
  --shadow-inset: inset 0 1px 2px rgba(16, 24, 40, 0.06);

  /* ===========================================================
     MOTION
     =========================================================== */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.22, 1.4, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ===========================================================
     LAYOUT
     =========================================================== */
  --container-max: 1280px;
  --sidebar-w: 248px;
  --topbar-h: 56px;

  /* Saymple theme surfaces */
  --accent: #2ea373;
  --accent-strong: #1a6f4b;
  --accent-hover: #135c3d;
  --accent-bright: #23825a;
  --accent-soft: #e3f4ec;
  --accent-ring: rgba(35, 130, 90, 0.26);
  --header-bg: rgba(255, 255, 255, 0.86);
  --header-fg: #14231c;
  --header-muted: #61736a;
  --header-border: rgba(27, 72, 52, 0.13);
  --hero-bg:
    radial-gradient(circle at 18% 6%, rgba(255, 255, 255, 0.82), transparent 34%),
    linear-gradient(145deg, #f4fbf7 0%, #e6f5ec 46%, #d9ede2 100%);
  --hero-header-bg: rgba(245, 251, 247, 0.78);
  --hero-header-border: rgba(33, 105, 73, 0.14);
  --hero-fg: #153329;
  --hero-muted: #587166;
  --hero-panel: rgba(250, 253, 251, 0.82);
  --hero-panel-border: rgba(43, 122, 87, 0.2);
  --hero-rule: #82aa97;
  --hero-chip-border: #9bc2b0;
}

html[data-theme="dark"] {
  --fg-1: #eff5f1;
  --fg-2: #cedbd4;
  --fg-3: #9eafa6;
  --fg-4: #7f9188;
  --fg-on-primary: #07100b;
  --fg-on-dark: #f2f7f4;
  --bg-0: #0f1612;
  --bg-1: #141e18;
  --bg-2: #1b2821;
  --bg-3: #24342b;
  --bg-inverse: #080d0a;
  --surface-1: #111a15;
  --surface-2: #18231d;
  --surface-raised: #19241e;
  --border-subtle: #25362d;
  --border-default: #354b40;
  --border-strong: #4b6658;
  --border-focus: #6bc89e;
  --action-primary: #65c397;
  --action-primary-hover: #7bd1aa;
  --action-primary-press: #52ae84;
  --action-secondary-bg: #151f19;
  --action-secondary-border: #354b40;
  --action-secondary-hover: #1d2b23;
  --link: #70caa2;
  --link-hover: #8bd9b6;
  --status-success-bg: #173829;
  --status-success-fg: #8bd9b6;
  --status-warning-bg: #352d18;
  --status-warning-fg: #f0ce7b;
  --status-danger-bg: #3a2026;
  --status-danger-fg: #f3a3b6;
  --accent: #62c394;
  --accent-strong: #72cda4;
  --accent-hover: #88d9b4;
  --accent-bright: #77d0aa;
  --accent-soft: #173829;
  --accent-ring: rgba(107, 200, 158, 0.32);
  --header-bg: rgba(15, 22, 18, 0.86);
  --header-fg: #eff5f1;
  --header-muted: #a1b2a9;
  --header-border: rgba(117, 166, 142, 0.18);
  --hero-bg:
    radial-gradient(circle at 18% 6%, rgba(68, 117, 91, 0.2), transparent 38%),
    linear-gradient(145deg, #17271f 0%, #111c17 52%, #0d1511 100%);
  --hero-header-bg: rgba(15, 25, 20, 0.76);
  --hero-header-border: rgba(120, 177, 149, 0.16);
  --hero-fg: #eff7f2;
  --hero-muted: #a7bbb0;
  --hero-panel: rgba(17, 28, 22, 0.86);
  --hero-panel-border: rgba(117, 176, 147, 0.2);
  --hero-rule: #668c79;
  --hero-chip-border: #4d705e;
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 18px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 30px -12px rgba(0, 0, 0, 0.58);
  --shadow-xl: 0 24px 46px -18px rgba(0, 0, 0, 0.68);
  --shadow-focus-ring: 0 0 0 3px rgba(107, 200, 158, 0.26);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] body {
  --accent: #62c394 !important;
  --accent-strong: #72cda4 !important;
  --accent-hover: #88d9b4 !important;
  --accent-bright: #77d0aa !important;
  --accent-soft: #173829 !important;
  --accent-ring: rgba(107, 200, 158, 0.32) !important;
}

/* ===========================================================
   SEMANTIC TYPE CLASSES
   =========================================================== */

html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-0);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.display-lg, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.display-md {
  font-family: var(--font-display);
  font-size: var(--fs-60);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.display-sm {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

h1, .h1 {
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

h2, .h2 {
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

h3, .h3 {
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

h4, .h4 {
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

h5, .h5 {
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.lede {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

p, .body {
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.body-sm, small {
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.caption {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.eyebrow {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
}

.code, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--bg-2);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { color: var(--link-hover); text-decoration: underline; }

/* tabular numerals for tables & metric cards */
.nums-tabular { font-variant-numeric: tabular-nums; }

/* ===========================================================
   SAYMPLE THEME CONTROLS & SHARED SURFACES
   =========================================================== */

html {
  background: var(--bg-0);
  color: var(--fg-2);
}

body,
body * {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-out);
}

.saymple-hero {
  background: var(--hero-bg) !important;
}

.hero-header,
.site-header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border) !important;
  color: var(--header-fg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.hero-header {
  background: var(--hero-header-bg) !important;
  border-bottom-color: var(--hero-header-border) !important;
}

.brand-mark > div:not(:last-child) {
  background: var(--header-fg) !important;
}

.brand-word,
.header-title {
  color: var(--header-fg) !important;
}

.header-subtitle {
  color: var(--header-muted) !important;
  border-color: var(--header-border) !important;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.locale-switch,
.header-cta {
  color: var(--header-muted) !important;
  border-color: transparent !important;
}

.locale-switch:hover,
.header-cta:hover {
  color: var(--header-fg) !important;
  border-color: var(--header-border) !important;
  text-decoration: none;
}

.header-cta {
  border-color: var(--header-border) !important;
}

.hero-title {
  color: var(--hero-fg) !important;
}

.hero-copy,
.hero-muted {
  color: var(--hero-muted) !important;
}

.hero-panel {
  background: var(--hero-panel) !important;
  border-color: var(--hero-panel-border) !important;
  box-shadow: 0 24px 65px -42px rgba(26, 80, 55, 0.46);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  --ink-300: var(--hero-muted);
  --ink-500: var(--hero-muted);
  --ink-600: var(--hero-rule);
  --ink-700: var(--hero-chip-border);
  --ink-800: var(--hero-panel-border);
  --ink-0: var(--hero-fg);
}

.hero-idle-line {
  background: var(--hero-rule) !important;
}

.hero-busy {
  border-color: var(--hero-panel-border) !important;
}

.hero-chip {
  color: var(--hero-muted) !important;
  border-color: var(--hero-chip-border) !important;
}

.hero-chip:hover {
  color: var(--hero-fg) !important;
  border-color: var(--accent-strong) !important;
}

saymple-theme {
  display: inline-flex;
  align-items: center;
}

/* Homepage comparison: one focused example at a time. */
.comparison-intro {
  max-width: 650px;
  margin: 10px 0 0;
  color: var(--fg-3);
  font-size: 14px;
  line-height: 1.7;
}

.comparison-tabs {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  padding: 2px 0 4px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.comparison-tabs::-webkit-scrollbar {
  display: none;
}

.comparison-tab {
  flex: none;
  min-height: 38px;
  padding: 9px 15px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-0);
  color: var(--fg-3);
  font: 500 13px/1.2 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}

.comparison-tab:hover {
  border-color: var(--fg-4);
  color: var(--fg-1);
}

.comparison-tab[aria-selected="true"] {
  border-color: var(--fg-1);
  background: var(--fg-1);
  color: var(--bg-0);
}

.comparison-tab:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.comparison-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  align-items: stretch;
}

.comparison-card {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-0);
}

.comparison-card--before {
  display: flex;
  flex-direction: column;
}

.comparison-card--after {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-default));
  box-shadow: var(--shadow-sm);
}

.comparison-label {
  display: block;
  margin-bottom: 14px;
  color: var(--fg-4);
  font: 600 10.5px/1.3 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.comparison-card--after .comparison-label {
  color: var(--accent-strong);
}

.comparison-source {
  margin: 0;
  color: var(--fg-3);
  font-size: 13.5px;
  line-height: 1.75;
  text-wrap: pretty;
}

.comparison-meta {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  color: var(--fg-4);
  font-size: 11.5px;
  line-height: 1.5;
}

.comparison-result-title {
  margin: 0;
  color: var(--fg-1);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.comparison-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.comparison-point {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.comparison-point::before {
  width: 13px;
  height: 3px;
  margin-top: 9px;
  border-radius: 2px;
  background: var(--accent);
  content: "";
}

.comparison-point p {
  margin: 0;
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.65;
  text-wrap: pretty;
}

.comparison-term {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--fg-3);
  font-size: 12.5px;
  line-height: 1.6;
}

.comparison-term strong {
  color: var(--fg-1);
  font-weight: 650;
}

/* Result actions: make regeneration unmistakable without hiding the current result. */
.result-card {
  position: relative;
  isolation: isolate;
}

.result-card::after {
  position: absolute;
  inset: -2px;
  z-index: -1;
  border: 2px solid var(--accent-bright);
  border-radius: calc(var(--radius-lg) + 2px);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.result-card[aria-busy="true"]::after {
  animation: saymple-regen-border 1.25s var(--ease-in-out) infinite;
}

.result-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.result-action-divider {
  width: 1px;
  height: 20px;
  margin: 4px 3px;
  background: var(--border-default);
}

.result-new-button,
.result-regenerate-button {
  min-height: 30px;
  white-space: nowrap;
}

.result-new-button {
  border: 1px solid var(--border-default) !important;
  background: var(--bg-0) !important;
  color: var(--fg-2) !important;
}

.result-new-button:hover {
  border-color: var(--border-strong) !important;
  background: var(--bg-1) !important;
  color: var(--fg-1) !important;
}

.result-regenerate-button[aria-busy="true"] {
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
  opacity: 1;
}

.result-regenerate-button[aria-busy="true"] .result-regenerate-icon,
.regeneration-status-icon {
  animation: saymple-regen-spin .9s linear infinite;
}

.regeneration-status {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  overflow: hidden;
}

.regeneration-status::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 48%, transparent 100%);
  content: "";
  transform: translateX(-100%);
  animation: saymple-regen-sweep 1.35s var(--ease-in-out) infinite;
}

.regeneration-status-mark {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-default));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-0) 68%, transparent);
}

.regeneration-status-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.regeneration-status-copy strong {
  color: var(--fg-1);
  font-size: 12.5px;
  font-weight: 650;
}

.regeneration-status-copy span {
  color: var(--accent-strong);
  font-size: 11.5px;
}

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

@keyframes saymple-regen-sweep {
  to { transform: translateX(100%); }
}

@keyframes saymple-regen-border {
  0%, 100% { opacity: .32; }
  50% { opacity: .9; }
}

.theme-select {
  appearance: none;
  min-width: 76px;
  height: 32px;
  padding: 0 24px 0 10px;
  border: 1px solid var(--header-border);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--header-bg) 74%, transparent);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 13px, calc(100% - 9px) 13px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  color: var(--header-fg);
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
}

.theme-select:hover {
  border-color: var(--hero-chip-border);
}

.theme-select:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.site-logo {
  display: block;
  height: 24px;
  width: auto;
}

html[data-theme="dark"] .site-logo {
  content: url('/assets/saymple-logo-dark.svg');
}

@media (max-width: 520px) {
  .header-actions { gap: 5px; }
  .theme-select { min-width: 66px; padding-left: 9px; font-size: 11.5px; }
  .header-cta { padding-inline: 10px !important; }
  .result-toolbar { width: 100%; justify-content: flex-start; }
  .result-action-divider { display: none; }
  .result-new-button,
  .result-regenerate-button { flex: 1 1 112px; justify-content: center; }
  .comparison-grid { grid-template-columns: 1fr; gap: 12px; }
  .comparison-card { padding: 18px; }
  .comparison-tabs { margin-right: -16px; padding-right: 16px; }
  .comparison-source { font-size: 13px; line-height: 1.7; }
}

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

  .result-card[aria-busy="true"]::after,
  .result-regenerate-button[aria-busy="true"] .result-regenerate-icon,
  .regeneration-status-icon,
  .regeneration-status::after {
    animation: none !important;
  }

  .result-card[aria-busy="true"]::after { opacity: .72; }
  .regeneration-status::after { transform: none; }
}