html[data-theme],
.theme-preview[data-theme] {
  --font-sans: Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --bg: #f6f8fb;
  --bg-soft: #eef4f8;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --text: #111827;
  --text-muted: #5b6472;
  --border: #d9dee7;
  --primary: #0f766e;
  --primary-hover: #0d625b;
  --secondary: #334155;
  --button-text: #ffffff;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.12);
  --hero-title-size: clamp(17px, 2.4vw, 28px);
  --hero-subtitle-size: clamp(12px, 1.125vw, 15px);
  --section-title-size: clamp(13px, 1.5vw, 20px);
  --card-title-size: clamp(9.5px, 0.8vw, 12px);
  --body-size: clamp(11.25px, 0.75vw, 12.75px);
  --small-size: clamp(9px, 0.675vw, 10.5px);
  --container-width: 1120px;
  --section-padding: clamp(28px, 5vw, 68px);
  --button-height: 46px;
  --button-radius: 8px;
  --hero-bg: transparent;
  --hero-border: transparent;
  --header-bg: rgba(255, 255, 255, 0.92);
  --header-blur: saturate(180%) blur(16px);
  --menu-bg: rgba(255, 255, 255, 0.78);
  --menu-panel-bg: rgba(255, 255, 255, 0.97);
  --input-bg: #ffffff;
  --input-text: var(--text);
  --focus-ring: rgba(15, 118, 110, 0.22);
  --success-bg: #ecfdf5;
  --success-border: #99f6e4;
  --success-text: #064e3b;
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --error-text: #7f1d1d;
  --table-head-bg: #eef2f7;
  --trend-bg: var(--surface);
  --pill-bg: #ecfdf5;
  --pill-text: #115e59;
  --pill-border: #cce7e4;
  --ink: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --panel: var(--surface);
  --accent: var(--primary);
  --accent-ink: var(--success-text);
  --navy: var(--secondary);
  --soft: var(--bg-soft);
  --shadow: var(--shadow-lg);
}

html[data-theme="apple-clean"],
.theme-preview[data-theme="apple-clean"] {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;
  --bg: #fbfbfd;
  --bg-soft: #f5f5f7;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --text: #1d1d1f;
  --text-muted: #6e6e73;
  --border: #e5e5ea;
  --primary: #0071e3;
  --primary-hover: #0066cc;
  --secondary: #1d1d1f;
  --button-text: #ffffff;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.10);
  --hero-title-size: clamp(18px, 2.5vw, 30px);
  --section-title-size: clamp(14px, 1.6vw, 21px);
  --button-height: 48px;
  --button-radius: 999px;
  --hero-bg: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
  --header-bg: rgba(251, 251, 253, 0.86);
  --menu-bg: rgba(255, 255, 255, 0.72);
  --menu-panel-bg: rgba(255, 255, 255, 0.96);
  --focus-ring: rgba(0, 113, 227, 0.22);
}

html[data-theme="stripe-gradient"],
.theme-preview[data-theme="stripe-gradient"] {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
  --bg: #f7f9fc;
  --bg-soft: #edf3ff;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --text: #0a2540;
  --text-muted: #526b86;
  --border: #d8e2ef;
  --primary: #635bff;
  --primary-hover: #4f46e5;
  --secondary: #0a2540;
  --button-text: #ffffff;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.08);
  --shadow-md: 0 16px 38px rgba(10, 37, 64, 0.12);
  --shadow-lg: 0 30px 70px rgba(88, 80, 236, 0.18);
  --button-height: 48px;
  --button-radius: 999px;
  --hero-bg: radial-gradient(circle at 10% 0%, rgba(99, 91, 255, 0.20), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(0, 212, 255, 0.18), transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
  --hero-border: rgba(99, 91, 255, 0.16);
  --focus-ring: rgba(99, 91, 255, 0.22);
}

html[data-theme="linear-dark"],
.theme-preview[data-theme="linear-dark"] {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --bg: #08090c;
  --bg-soft: #0f1117;
  --surface: rgba(20, 22, 30, 0.82);
  --surface-elevated: rgba(28, 31, 42, 0.86);
  --text: #f7f8fb;
  --text-muted: #a5adba;
  --border: rgba(255, 255, 255, 0.12);
  --primary: #7c5cff;
  --primary-hover: #8f75ff;
  --secondary: #242938;
  --button-text: #ffffff;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 34px 80px rgba(0, 0, 0, 0.46);
  --button-height: 44px;
  --button-radius: 10px;
  --hero-bg: radial-gradient(circle at 15% 0%, rgba(124, 92, 255, 0.20), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  --hero-border: rgba(255, 255, 255, 0.11);
  --header-bg: rgba(8, 9, 12, 0.76);
  --menu-bg: rgba(18, 20, 28, 0.74);
  --menu-panel-bg: rgba(18, 20, 28, 0.96);
  --input-bg: rgba(255, 255, 255, 0.06);
  --input-text: #f7f8fb;
  --table-head-bg: rgba(255, 255, 255, 0.06);
  --focus-ring: rgba(124, 92, 255, 0.30);
  --pill-bg: rgba(124, 92, 255, 0.14);
  --pill-text: #dcd4ff;
  --pill-border: rgba(124, 92, 255, 0.35);
}

html[data-theme="vercel-mono"],
.theme-preview[data-theme="vercel-mono"] {
  --font-sans: Geist, "Geist Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --text: #000000;
  --text-muted: #555555;
  --border: #d4d4d4;
  --primary: #000000;
  --primary-hover: #333333;
  --secondary: #ffffff;
  --button-text: #ffffff;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --button-height: 44px;
  --button-radius: 0;
  --hero-bg: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  --header-bg: rgba(255, 255, 255, 0.92);
  --menu-bg: #ffffff;
  --menu-panel-bg: #ffffff;
  --focus-ring: rgba(0, 0, 0, 0.16);
}

html[data-theme="notion-editorial"],
.theme-preview[data-theme="notion-editorial"] {
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --bg: #fbfaf8;
  --bg-soft: #f3f1ed;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --text: #2f3437;
  --text-muted: #6b625c;
  --border: #e4dfd8;
  --primary: #2f3437;
  --primary-hover: #111111;
  --secondary: #eee9e2;
  --button-text: #ffffff;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(47, 52, 55, 0.04);
  --shadow-md: 0 8px 22px rgba(47, 52, 55, 0.07);
  --shadow-lg: 0 20px 50px rgba(47, 52, 55, 0.10);
  --button-height: 44px;
  --button-radius: 6px;
  --hero-bg: #ffffff;
  --header-bg: rgba(251, 250, 248, 0.90);
  --menu-bg: rgba(255, 255, 255, 0.78);
  --menu-panel-bg: #ffffff;
  --focus-ring: rgba(47, 52, 55, 0.18);
  --pill-bg: #f3f1ed;
  --pill-text: #2f3437;
  --pill-border: #e4dfd8;
}

html[data-theme="proton-privacy"],
.theme-preview[data-theme="proton-privacy"] {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --bg: #09051f;
  --bg-soft: #151033;
  --surface: rgba(27, 21, 58, 0.92);
  --surface-elevated: rgba(38, 29, 78, 0.94);
  --text: #f8f7ff;
  --text-muted: #c8c2e8;
  --border: rgba(196, 181, 253, 0.22);
  --primary: #8b5cf6;
  --primary-hover: #a78bfa;
  --secondary: #31245e;
  --button-text: #ffffff;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 18px 42px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 30px 80px rgba(72, 36, 170, 0.35);
  --button-height: 50px;
  --button-radius: 14px;
  --hero-bg: radial-gradient(circle at 20% 0%, rgba(139, 92, 246, 0.28), transparent 36%),
    radial-gradient(circle at 82% 0%, rgba(6, 182, 212, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(31, 24, 74, 0.95), rgba(10, 7, 35, 0.95));
  --hero-border: rgba(196, 181, 253, 0.24);
  --header-bg: rgba(9, 5, 31, 0.80);
  --menu-bg: rgba(27, 21, 58, 0.75);
  --menu-panel-bg: rgba(27, 21, 58, 0.98);
  --input-bg: rgba(255, 255, 255, 0.07);
  --input-text: #f8f7ff;
  --table-head-bg: rgba(196, 181, 253, 0.10);
  --focus-ring: rgba(139, 92, 246, 0.32);
  --pill-bg: rgba(139, 92, 246, 0.16);
  --pill-text: #eee9ff;
  --pill-border: rgba(196, 181, 253, 0.30);
}

html[data-theme="mullvad-minimal"],
.theme-preview[data-theme="mullvad-minimal"] {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --bg: #f4f1e8;
  --bg-soft: #ebe5d6;
  --surface: #fffdf6;
  --surface-elevated: #fffdf6;
  --text: #111111;
  --text-muted: #4d493f;
  --border: #d1c7ad;
  --primary: #174ea6;
  --primary-hover: #0f3e86;
  --secondary: #f6c344;
  --button-text: #ffffff;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-sm: none;
  --shadow-md: 0 4px 0 rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 8px 0 rgba(17, 17, 17, 0.08);
  --button-height: 46px;
  --button-radius: 6px;
  --hero-bg: #fffdf6;
  --header-bg: rgba(244, 241, 232, 0.92);
  --menu-bg: #fffdf6;
  --menu-panel-bg: #fffdf6;
  --focus-ring: rgba(23, 78, 166, 0.22);
  --pill-bg: #e8f1ff;
  --pill-text: #0f3e86;
  --pill-border: #b9d4ff;
}

html[data-theme] body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--body-size);
}

html[data-theme] body,
html[data-theme] .top,
html[data-theme] .site-menu,
html[data-theme] .card,
html[data-theme] .table,
html[data-theme] .footer,
html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea,
html[data-theme] .button,
html[data-theme] button,
html[data-theme] .menu-trigger,
html[data-theme] .menu-direct,
html[data-theme] .menu-panel {
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

html[data-theme] .wrap,
.theme-preview[data-theme] {
  max-width: var(--container-width);
}

html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] .brand,
.theme-preview[data-theme] h2,
.theme-preview[data-theme] h3 {
  color: var(--text);
}

html[data-theme] h1 {
  font-size: clamp(15px, 1.7vw, 23px);
  letter-spacing: 0;
  line-height: 1.08;
}

html[data-theme] h2 {
  font-size: clamp(12px, 1.2vw, 17px);
  line-height: 1.14;
}

html[data-theme] h3 {
  font-size: var(--card-title-size);
  line-height: 1.2;
}

html[data-theme] p,
html[data-theme] .muted,
html[data-theme] .landing-html,
.theme-preview[data-theme] p,
.theme-preview[data-theme] .muted {
  color: var(--text-muted);
}

html[data-theme] a {
  color: var(--primary);
}

html[data-theme] .top {
  background: var(--header-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--header-blur);
}

html[data-theme] .nav,
html[data-theme] .menu-bar {
  max-width: var(--container-width);
}

html[data-theme] .site-menu {
  border-color: var(--border);
  background: var(--bg-soft);
}

html[data-theme] .menu-trigger,
html[data-theme] .menu-direct {
  background: var(--menu-bg);
  color: var(--text);
  border-color: var(--border);
  border-radius: var(--button-radius);
  box-shadow: var(--shadow-sm);
}

html[data-theme] .menu-trigger::after {
  border-color: var(--text-muted);
}

html[data-theme] .menu-panel {
  background: var(--menu-panel-bg);
  color: var(--text);
  border-color: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

html[data-theme] .menu-link {
  color: var(--primary);
  border-radius: var(--radius-md);
}

html[data-theme] .menu-direct,
html[data-theme] .mobile-drawer-link {
  color: var(--primary);
}

html[data-theme] .menu-link small,
html[data-theme] .menu-section-label {
  color: var(--text-muted);
}

html[data-theme] .hero-account-link,
html[data-theme] .step-action a {
  color: var(--primary);
}

html[data-theme] .menu-link:hover,
html[data-theme] .menu-link:focus-visible,
html[data-theme] .mobile-drawer-link:hover,
html[data-theme] .mobile-drawer-link:focus-visible {
  background: var(--bg-soft);
}

html[data-theme] .mobile-menu-toggle,
html[data-theme] .mobile-drawer-close {
  background: var(--secondary);
  color: var(--button-text);
}

html[data-theme] .mobile-drawer {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme] .mobile-drawer-title,
html[data-theme] .mobile-drawer-link {
  color: var(--text);
}

html[data-theme] .mobile-drawer-section {
  border-color: var(--border);
}

html[data-theme] .hero {
  padding: var(--section-padding);
  border: 1px solid var(--hero-border);
  border-radius: var(--radius-lg);
  background: var(--hero-bg);
  box-shadow: var(--shadow-sm);
  margin-bottom: clamp(18px, 3vw, 34px);
}

html[data-theme] .hero h1 {
  font-size: var(--hero-title-size);
  line-height: 1.05;
}

html[data-theme] .hero p {
  font-size: var(--hero-subtitle-size);
}

html[data-theme] .hero-note {
  font-size: clamp(11.25px, 0.975vw, 13.5px);
}

html[data-theme] .landing-html {
  font-size: clamp(13px, 1vw, 14px);
}

html[data-theme] .landing-section-card h3 {
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.22;
}

html[data-theme] .landing-section-card p,
html[data-theme] .landing-section-card .landing-html {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
}

html[data-theme] .faq-page > p,
html[data-theme] .faq-page .faq-item p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.62;
}

html[data-theme] .faq-page .faq-item summary {
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.35;
}

html[data-theme] .about-page > p,
html[data-theme] .about-page .card p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
}

html[data-theme] .card,
html[data-theme] .faq-item,
html[data-theme] .how-step,
html[data-theme] .trend-card,
html[data-theme] .analytics-card,
html[data-theme] .admin-command-center,
.theme-preview[data-theme] {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

html[data-theme] .card {
  padding: clamp(16px, 2.4vw, 26px);
}

html[data-theme] .pricing-card,
html[data-theme] .grid > .card {
  background: var(--surface-elevated);
}

html[data-theme] .pricing-price {
  color: var(--primary);
  font-size: var(--pricing-price-size, 24px);
  line-height: 1.05;
}

html[data-theme] .pricing-benefit {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 14px 0 18px;
  padding: 13px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--bg-soft)), var(--surface));
  color: var(--text-muted);
  border: 2px solid color-mix(in srgb, var(--text) 45%, var(--border));
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--surface) 80%, transparent),
    0 10px 24px rgba(15, 23, 42, 0.06);
  font-size: var(--hero-note-size, var(--body-size));
  font-weight: 400;
  line-height: 1.5;
}

html[data-theme] .pricing-benefit-title {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-weight: 700;
}

html[data-theme] .pricing-benefit::before {
  content: none;
}

html[data-theme] .hero-profile-benefit {
  margin-top: 16px;
}

html[data-theme] .table {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme] .table th,
html[data-theme] .table td {
  border-color: var(--border);
  color: var(--text);
}

html[data-theme] .table th {
  background: var(--table-head-bg);
}

html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea,
.theme-preview[data-theme] input {
  background: var(--input-bg);
  color: var(--input-text);
  border-color: var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
}

html[data-theme] input:focus,
html[data-theme] select:focus,
html[data-theme] textarea:focus,
.theme-preview[data-theme] input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

html[data-theme] label,
html[data-theme] .step-kicker,
html[data-theme] .trust-pill,
.theme-preview[data-theme] label,
.theme-preview[data-theme] .theme-preview-kicker {
  color: var(--text);
  font-size: var(--small-size);
}

html[data-theme] .language-form select {
  background: var(--input-bg);
  color: var(--input-text);
  border-color: var(--border);
  border-radius: var(--radius-sm);
}

html[data-theme] .button,
html[data-theme] button,
.theme-preview[data-theme] .button,
.theme-preview[data-theme] button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--button-height);
  border-radius: var(--button-radius);
  background: var(--primary);
  color: var(--button-text);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  line-height: 1;
}

html[data-theme] .button:hover,
html[data-theme] button:hover,
.theme-preview[data-theme] .button:hover,
.theme-preview[data-theme] button:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-md);
}

html[data-theme] .mobile-menu-toggle {
  display: none;
}

html[data-theme] .button.secondary,
.theme-preview[data-theme] .button.secondary {
  background: var(--secondary);
  color: var(--button-text);
}

html[data-theme="vercel-mono"] .button.secondary,
html[data-theme="vercel-mono"] button.secondary,
.theme-preview[data-theme="vercel-mono"] .button.secondary {
  border: 1px solid var(--border);
  color: var(--text);
}

html[data-theme="notion-editorial"] .button.secondary,
.theme-preview[data-theme="notion-editorial"] .button.secondary,
html[data-theme="mullvad-minimal"] .button.secondary,
.theme-preview[data-theme="mullvad-minimal"] .button.secondary {
  color: var(--text);
}

html[data-theme] .notice {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
  border-radius: var(--radius-md);
}

html[data-theme] .notice.error,
html[data-theme] .error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

html[data-theme] .trust-pill {
  background: var(--bg-soft);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  color: var(--text-muted);
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 999px;
}

html[data-theme] .trust-pill::before {
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
}

html[data-theme] .metric span {
  background: var(--primary);
}

html[data-theme] .metric {
  background: var(--bg-soft);
}

html[data-theme] .trend,
html[data-theme] .video-frame,
html[data-theme] .how-media,
html[data-theme] .media {
  background: var(--bg-soft);
  border-color: var(--border);
  border-radius: var(--radius-md);
}

html[data-theme] .trend-label {
  fill: var(--text-muted);
  font-family: var(--font-sans);
}

html[data-theme] #trend-tooltip {
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-sm);
}

html[data-theme] .share-panel {
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

html[data-theme] .share-link {
  background: var(--surface-elevated);
  color: var(--text);
  border-color: var(--border);
  border-radius: var(--button-radius);
}

html[data-theme] .footer {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}

html[data-theme="linear-dark"] .brand-logo,
html[data-theme="proton-privacy"] .brand-logo {
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.35));
}

html[data-theme="vercel-mono"] .muted,
html[data-theme="vercel-mono"] .menu-link small,
html[data-theme="vercel-mono"] .step-kicker,
html[data-theme="vercel-mono"] label {
  font-family: var(--font-mono);
}

html[data-theme="linear-dark"] body,
html[data-theme="proton-privacy"] body {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 32%),
    var(--bg);
}

.theme-settings-block {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}

.theme-preview[data-theme] {
  margin: 12px 0;
  padding: clamp(16px, 2.2vw, 24px);
  font-family: var(--font-sans);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  max-width: none;
}

.theme-preview-hero {
  padding: clamp(18px, 4vw, 36px);
  border: 1px solid var(--hero-border);
  border-radius: var(--radius-lg);
  background: var(--hero-bg);
  margin-bottom: 14px;
}

.theme-preview-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.theme-preview[data-theme] .theme-preview-kicker {
  color: var(--text-muted);
}

.theme-preview h2 {
  margin: 0 0 8px;
  font-size: clamp(12px, 1.7vw, 19px);
  line-height: 1.1;
}

.theme-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.theme-preview-price {
  margin: 6px 0;
  color: var(--text);
  font-size: clamp(12px, 1.5vw, 17px);
  font-weight: 900;
}

.typography-controls {
  flex: 1 1 680px !important;
  max-width: none !important;
}

.typography-control-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.typography-control {
  display: block;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
}

.typography-control span,
.typography-control small {
  display: block;
}

.typography-control small {
  margin: 3px 0 8px;
  color: var(--text-muted);
  font-size: var(--small-size);
  font-weight: 600;
}

.typography-preview {
  flex: 1 1 360px;
  position: sticky;
  top: calc(var(--header-height) + 16px);
  align-self: flex-start;
}

.typography-preview .preview-hero,
.theme-preview-hero {
  background: var(--hero-bg);
}

.typography-preview .preview-hero {
  padding: 18px;
  border: 1px solid var(--hero-border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
}

.typography-preview .faq-item {
  margin: 12px 0;
}

.typography-preview .card {
  margin-top: 12px;
}

@media (max-width: 760px) {
  html[data-theme] .hero {
    padding: clamp(20px, 6vw, 34px);
    border-radius: var(--radius-md);
  }

  html[data-theme] .hero h1 {
    font-size: clamp(16px, 4.5vw, 22px);
  }

  html[data-theme] .hero p {
    font-size: clamp(11.25px, 3vw, 13.5px);
  }

  html[data-theme] .card,
  html[data-theme] .how-step,
  html[data-theme] .faq-item,
  html[data-theme] .trend-card {
    border-radius: var(--radius-md);
  }

  html[data-theme] .top {
    background: var(--header-bg);
    border-color: var(--border);
    z-index: 2147483000;
  }

  html[data-theme] .mobile-menu-toggle {
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    position: relative;
    z-index: 2147483200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 12px;
    background: #334155;
    color: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
    line-height: 1;
  }

  html[data-theme] .mobile-menu-toggle:hover,
  html[data-theme] .mobile-menu-toggle:focus {
    background: #334155;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
  }

  html[data-theme] .mobile-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    flex: 0 0 auto;
  }

  html[data-theme] .mobile-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2147483001;
  }

  html[data-theme] .mobile-drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    z-index: 2147483100;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .typography-preview {
    position: static;
  }
}