:root {
  --aui-bg: #ffffff;
  --aui-bg-alt: #f8f9fd;
  --aui-surface: rgba(255, 255, 255, 0.88);
  --aui-surface-strong: rgba(255, 255, 255, 0.97);
  --aui-surface-soft: rgba(243, 245, 250, 0.8);
  --aui-border: rgba(155, 161, 170, 0.22);
  --aui-text: #1f2937;
  --aui-muted: #6b7280;
  --aui-faint: #8a93a0;
  --aui-subtle-text: #9ca3af;
  --aui-link: #1c5ece;
  --aui-link-hover: #164ca7;
  --aui-accent: #2f8fe8;
  --aui-accent-2: #2a6bff;
  --aui-success: #14ab6b;
  --aui-warning: #d08a1f;
  --aui-danger: #d54f73;
  --aui-shadow: 0 14px 34px rgba(37, 45, 56, 0.06);
  --aui-body-layer-1: radial-gradient(circle at 14% 14%, rgba(165, 180, 205, 0.07), transparent 56%);
  --aui-body-layer-2: radial-gradient(circle at 84% 22%, rgba(160, 178, 210, 0.05), transparent 50%);
  --aui-body-layer-3: radial-gradient(circle at 50% 95%, rgba(155, 172, 200, 0.05), transparent 52%);
  --aui-body-before: radial-gradient(circle at 50% 52%, rgba(165, 182, 212, 0.04), transparent 72%);
  --aui-grid-line: rgba(96, 96, 96, 0.015);
  --aui-grid-opacity: 0.08;
  --aui-card-grad-start: rgba(255, 255, 255, 0.96);
  --aui-card-grad-end: rgba(250, 251, 254, 0.94);
  --aui-card-hover-border: rgba(95, 146, 217, 0.38);
  --aui-badge-bg: rgba(54, 117, 199, 0.14);
  --aui-badge-fg: #174b8f;
  --aui-badge-border: rgba(94, 151, 223, 0.36);
  --aui-input-bg: rgba(255, 255, 255, 0.92);
  --aui-shell-bg: rgba(248, 249, 251, 0.9);
  --aui-shell-border: rgba(151, 158, 169, 0.3);
  --aui-kbd-bg: rgba(248, 248, 250, 0.96);
  --aui-kbd-text: #374151;
  --aui-kbd-shadow: inset 0 -1px 0 rgba(115, 122, 133, 0.16);
  --aui-pre-bg: rgba(248, 249, 251, 0.97);
  --aui-pre-text: #374151;
  --aui-pre-border: rgba(139, 147, 158, 0.35);
  --aui-inline-code: #22578f;
  --aui-nav-bg: rgba(255, 255, 255, 0.88);
  --aui-nav-link-bg: rgba(82, 131, 205, 0.12);
  --aui-chip-bg: rgba(69, 119, 192, 0.16);
  --aui-chip-text: #1f518f;
  --aui-chip-warn-bg: rgba(224, 160, 31, 0.16);
  --aui-chip-warn-border: rgba(208, 138, 31, 0.4);
  --aui-chip-warn-text: #8f5f0e;
  --aui-chip-danger-bg: rgba(205, 63, 101, 0.15);
  --aui-chip-danger-border: rgba(209, 81, 118, 0.36);
  --aui-chip-danger-text: #8b2644;
  --aui-dashboard-bg: rgba(69, 118, 188, 0.15);
  --aui-dashboard-hover-bg: rgba(60, 109, 180, 0.24);
  --aui-dashboard-hover-border: rgba(95, 145, 214, 0.44);
  --aui-user-toggle-bg: rgba(71, 118, 187, 0.14);
  --aui-avatar-grad-start: rgba(64, 119, 189, 0.9);
  --aui-avatar-grad-end: rgba(42, 84, 141, 0.9);
  --aui-avatar-text: #f2f8ff;
  --aui-avatar-border: rgba(171, 201, 236, 0.44);
  --aui-dropdown-bg: rgba(250, 253, 255, 0.97);
  --aui-dropdown-item-hover: rgba(79, 127, 195, 0.16);
  --aui-mobile-toggle-bg: rgba(72, 119, 187, 0.14);
  --aui-mobile-panel-bg: rgba(249, 253, 255, 0.95);
  --aui-mobile-section-border: rgba(128, 162, 207, 0.24);
  --aui-mobile-link-hover: rgba(79, 127, 195, 0.16);
  --aui-footer-bg: rgba(255, 255, 255, 0.9);
  --aui-footer-bottom-border: rgba(122, 156, 203, 0.28);
  --aui-language-trigger-bg: rgba(71, 119, 187, 0.16);
  --aui-language-dropdown-bg: rgba(252, 252, 253, 0.98);
  --aui-language-option-hover: rgba(79, 127, 195, 0.16);
  --aui-glass-bg: rgba(255, 255, 255, 0.93);
  --aui-glass-button-bg: rgba(71, 120, 191, 0.16);
  --aui-glass-button-text: #25518c;
  --aui-glass-button-active-bg: rgba(66, 117, 190, 0.28);
  --aui-glass-button-active-border: rgba(93, 143, 213, 0.44);
  --aui-glass-button-active-text: #153f75;
  --aui-auth-bg: rgba(255, 255, 255, 0.95);
  --aui-section-glow: radial-gradient(circle, rgba(155, 175, 210, 0.06), transparent 72%);
  --aui-section-divider: rgba(124, 156, 201, 0.24);
  --aui-alert-50-bg: rgba(242, 244, 247, 0.82);
  --aui-alert-100-bg: rgba(232, 236, 241, 0.88);
  --aui-text-red: #b43b5e;
  --aui-text-yellow: #98630d;
  --aui-text-green: #1d8f64;
  --aui-text-blue: #1e5ca5;
  --aui-text-amber: #ab6a0d;
  --aui-cta-from: #FFC83A;
  --aui-cta-to: #FF9E18;
  --aui-cta-from-hover: #FFBA28;
  --aui-cta-to-hover: #FF8E0C;
  --aui-cta-solid: #FFB328;
  --aui-cta-solid-hover: #FFA51C;
  --aui-cta-text: #ffffff;
  --aui-cta-shadow: 0 4px 22px rgba(255, 185, 40, 0.38);
  --aui-cta-shadow-hover: 0 8px 34px rgba(255, 155, 20, 0.48);
  --aui-cta-glow: rgba(255, 190, 50, 0.20);
  --aui-color-scheme: light;
  --aui-radius: 12px;
  --aui-radius-sm: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --aui-bg: #070d16;
    --aui-bg-alt: #0a1322;
    --aui-surface: rgba(14, 26, 42, 0.82);
    --aui-surface-strong: rgba(10, 19, 33, 0.95);
    --aui-surface-soft: rgba(23, 40, 63, 0.68);
    --aui-border: rgba(137, 165, 204, 0.25);
    --aui-text: #e8efff;
    --aui-muted: #9eb0cb;
    --aui-faint: #7b8eac;
    --aui-subtle-text: #c9d6ea;
    --aui-link: #9ed1ff;
    --aui-link-hover: #d9ecff;
    --aui-accent: #47beff;
    --aui-accent-2: #2a6bff;
    --aui-success: #4be0a5;
    --aui-warning: #f9c85e;
    --aui-danger: #ff7f9f;
    --aui-shadow: 0 18px 44px rgba(1, 7, 17, 0.42);
    --aui-body-layer-1: radial-gradient(circle at 14% 14%, rgba(72, 124, 209, 0.24), transparent 46%);
    --aui-body-layer-2: radial-gradient(circle at 82% 22%, rgba(56, 154, 232, 0.18), transparent 40%);
    --aui-body-layer-3: radial-gradient(circle at 50% 96%, rgba(58, 88, 156, 0.22), transparent 45%);
    --aui-body-before: radial-gradient(circle, rgba(76, 143, 231, 0.08) 0%, transparent 64%);
    --aui-grid-line: rgba(255, 255, 255, 0.02);
    --aui-grid-opacity: 0.22;
    --aui-card-grad-start: rgba(17, 31, 49, 0.9);
    --aui-card-grad-end: rgba(11, 20, 35, 0.86);
    --aui-card-hover-border: rgba(178, 206, 246, 0.42);
    --aui-badge-bg: rgba(56, 113, 186, 0.22);
    --aui-badge-fg: #d9eaff;
    --aui-badge-border: rgba(122, 177, 242, 0.3);
    --aui-input-bg: rgba(8, 17, 31, 0.88);
    --aui-shell-bg: rgba(11, 22, 37, 0.8);
    --aui-shell-border: rgba(149, 176, 213, 0.34);
    --aui-kbd-bg: rgba(19, 35, 55, 0.95);
    --aui-kbd-text: #d9e7ff;
    --aui-kbd-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
    --aui-pre-bg: rgba(7, 14, 25, 0.98);
    --aui-pre-text: #d6e3fb;
    --aui-pre-border: rgba(116, 149, 196, 0.32);
    --aui-inline-code: #b1d7ff;
    --aui-nav-bg: rgba(6, 13, 24, 0.82);
    --aui-nav-link-bg: rgba(89, 133, 204, 0.16);
    --aui-chip-bg: rgba(36, 69, 108, 0.36);
    --aui-chip-text: #d7e8ff;
    --aui-chip-warn-bg: rgba(233, 175, 46, 0.2);
    --aui-chip-warn-border: rgba(249, 200, 94, 0.45);
    --aui-chip-warn-text: #ffe8ab;
    --aui-chip-danger-bg: rgba(219, 72, 110, 0.22);
    --aui-chip-danger-border: rgba(255, 127, 159, 0.42);
    --aui-chip-danger-text: #ffd2df;
    --aui-dashboard-bg: rgba(27, 52, 85, 0.35);
    --aui-dashboard-hover-bg: rgba(45, 81, 126, 0.4);
    --aui-dashboard-hover-border: rgba(173, 210, 255, 0.42);
    --aui-user-toggle-bg: rgba(29, 51, 77, 0.4);
    --aui-avatar-grad-start: rgba(66, 120, 189, 0.85);
    --aui-avatar-grad-end: rgba(43, 79, 131, 0.85);
    --aui-avatar-text: #f3f8ff;
    --aui-avatar-border: rgba(202, 223, 250, 0.38);
    --aui-dropdown-bg: rgba(8, 16, 30, 0.96);
    --aui-dropdown-item-hover: rgba(74, 121, 184, 0.2);
    --aui-mobile-toggle-bg: rgba(29, 50, 76, 0.35);
    --aui-mobile-panel-bg: rgba(10, 19, 33, 0.95);
    --aui-mobile-section-border: rgba(149, 176, 213, 0.18);
    --aui-mobile-link-hover: rgba(73, 116, 178, 0.2);
    --aui-footer-bg: rgba(6, 12, 22, 0.86);
    --aui-footer-bottom-border: rgba(149, 176, 213, 0.2);
    --aui-language-trigger-bg: rgba(28, 50, 78, 0.45);
    --aui-language-dropdown-bg: rgba(8, 16, 30, 0.98);
    --aui-language-option-hover: rgba(73, 116, 178, 0.2);
    --aui-glass-bg: rgba(10, 19, 33, 0.92);
    --aui-glass-button-bg: rgba(27, 49, 75, 0.45);
    --aui-glass-button-text: #cfe2ff;
    --aui-glass-button-active-bg: rgba(70, 121, 190, 0.35);
    --aui-glass-button-active-border: rgba(163, 202, 252, 0.42);
    --aui-glass-button-active-text: #eef6ff;
    --aui-auth-bg: rgba(12, 23, 39, 0.9);
    --aui-section-glow: radial-gradient(circle, rgba(78, 159, 232, 0.2), transparent 65%);
    --aui-section-divider: rgba(148, 173, 209, 0.2);
    --aui-alert-50-bg: rgba(24, 42, 66, 0.7);
    --aui-alert-100-bg: rgba(31, 52, 79, 0.8);
    --aui-text-red: #ff99ae;
    --aui-text-yellow: #ffd786;
    --aui-text-green: #97edc6;
    --aui-text-blue: #9ed1ff;
    --aui-text-amber: #ffdea2;
    --aui-cta-from: #fb923c;
    --aui-cta-to: #f97316;
    --aui-cta-from-hover: #f97316;
    --aui-cta-to-hover: #ea580c;
    --aui-cta-solid: #fb923c;
    --aui-cta-solid-hover: #f97316;
    --aui-cta-text: #ffffff;
    --aui-cta-shadow: 0 4px 18px rgba(249, 115, 22, 0.3);
    --aui-cta-shadow-hover: 0 6px 24px rgba(234, 88, 12, 0.4);
    --aui-cta-glow: rgba(251, 146, 60, 0.18);
    --aui-color-scheme: dark;
  }
}

html.dark,
body.dark,
body.agents-theme.dark {
  --aui-bg: #070d16;
  --aui-bg-alt: #0a1322;
  --aui-surface: rgba(14, 26, 42, 0.82);
  --aui-surface-strong: rgba(10, 19, 33, 0.95);
  --aui-surface-soft: rgba(23, 40, 63, 0.68);
  --aui-border: rgba(137, 165, 204, 0.25);
  --aui-text: #e8efff;
  --aui-muted: #9eb0cb;
  --aui-faint: #7b8eac;
  --aui-subtle-text: #c9d6ea;
  --aui-link: #9ed1ff;
  --aui-link-hover: #d9ecff;
  --aui-accent: #47beff;
  --aui-accent-2: #2a6bff;
  --aui-success: #4be0a5;
  --aui-warning: #f9c85e;
  --aui-danger: #ff7f9f;
  --aui-shadow: 0 18px 44px rgba(1, 7, 17, 0.42);
  --aui-body-layer-1: radial-gradient(circle at 14% 14%, rgba(72, 124, 209, 0.24), transparent 46%);
  --aui-body-layer-2: radial-gradient(circle at 82% 22%, rgba(56, 154, 232, 0.18), transparent 40%);
  --aui-body-layer-3: radial-gradient(circle at 50% 96%, rgba(58, 88, 156, 0.22), transparent 45%);
  --aui-body-before: radial-gradient(circle, rgba(76, 143, 231, 0.08) 0%, transparent 64%);
  --aui-grid-line: rgba(255, 255, 255, 0.02);
  --aui-grid-opacity: 0.22;
  --aui-card-grad-start: rgba(17, 31, 49, 0.9);
  --aui-card-grad-end: rgba(11, 20, 35, 0.86);
  --aui-card-hover-border: rgba(178, 206, 246, 0.42);
  --aui-badge-bg: rgba(56, 113, 186, 0.22);
  --aui-badge-fg: #d9eaff;
  --aui-badge-border: rgba(122, 177, 242, 0.3);
  --aui-input-bg: rgba(8, 17, 31, 0.88);
  --aui-shell-bg: rgba(11, 22, 37, 0.8);
  --aui-shell-border: rgba(149, 176, 213, 0.34);
  --aui-kbd-bg: rgba(19, 35, 55, 0.95);
  --aui-kbd-text: #d9e7ff;
  --aui-kbd-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  --aui-pre-bg: rgba(7, 14, 25, 0.98);
  --aui-pre-text: #d6e3fb;
  --aui-pre-border: rgba(116, 149, 196, 0.32);
  --aui-inline-code: #b1d7ff;
  --aui-nav-bg: rgba(6, 13, 24, 0.82);
  --aui-nav-link-bg: rgba(89, 133, 204, 0.16);
  --aui-chip-bg: rgba(36, 69, 108, 0.36);
  --aui-chip-text: #d7e8ff;
  --aui-chip-warn-bg: rgba(233, 175, 46, 0.2);
  --aui-chip-warn-border: rgba(249, 200, 94, 0.45);
  --aui-chip-warn-text: #ffe8ab;
  --aui-chip-danger-bg: rgba(219, 72, 110, 0.22);
  --aui-chip-danger-border: rgba(255, 127, 159, 0.42);
  --aui-chip-danger-text: #ffd2df;
  --aui-dashboard-bg: rgba(27, 52, 85, 0.35);
  --aui-dashboard-hover-bg: rgba(45, 81, 126, 0.4);
  --aui-dashboard-hover-border: rgba(173, 210, 255, 0.42);
  --aui-user-toggle-bg: rgba(29, 51, 77, 0.4);
  --aui-avatar-grad-start: rgba(66, 120, 189, 0.85);
  --aui-avatar-grad-end: rgba(43, 79, 131, 0.85);
  --aui-avatar-text: #f3f8ff;
  --aui-avatar-border: rgba(202, 223, 250, 0.38);
  --aui-dropdown-bg: rgba(8, 16, 30, 0.96);
  --aui-dropdown-item-hover: rgba(74, 121, 184, 0.2);
  --aui-mobile-toggle-bg: rgba(29, 50, 76, 0.35);
  --aui-mobile-panel-bg: rgba(10, 19, 33, 0.95);
  --aui-mobile-section-border: rgba(149, 176, 213, 0.18);
  --aui-mobile-link-hover: rgba(73, 116, 178, 0.2);
  --aui-footer-bg: rgba(6, 12, 22, 0.86);
  --aui-footer-bottom-border: rgba(149, 176, 213, 0.2);
  --aui-language-trigger-bg: rgba(28, 50, 78, 0.45);
  --aui-language-dropdown-bg: rgba(8, 16, 30, 0.98);
  --aui-language-option-hover: rgba(73, 116, 178, 0.2);
  --aui-glass-bg: rgba(10, 19, 33, 0.92);
  --aui-glass-button-bg: rgba(27, 49, 75, 0.45);
  --aui-glass-button-text: #cfe2ff;
  --aui-glass-button-active-bg: rgba(70, 121, 190, 0.35);
  --aui-glass-button-active-border: rgba(163, 202, 252, 0.42);
  --aui-glass-button-active-text: #eef6ff;
  --aui-auth-bg: rgba(12, 23, 39, 0.9);
  --aui-section-glow: radial-gradient(circle, rgba(78, 159, 232, 0.2), transparent 65%);
  --aui-section-divider: rgba(148, 173, 209, 0.2);
  --aui-alert-50-bg: rgba(24, 42, 66, 0.7);
  --aui-alert-100-bg: rgba(31, 52, 79, 0.8);
  --aui-text-red: #ff99ae;
  --aui-text-yellow: #ffd786;
  --aui-text-green: #97edc6;
  --aui-text-blue: #9ed1ff;
  --aui-text-amber: #ffdea2;
  --aui-cta-from: #fb923c;
  --aui-cta-to: #f97316;
  --aui-cta-from-hover: #f97316;
  --aui-cta-to-hover: #ea580c;
  --aui-cta-solid: #fb923c;
  --aui-cta-solid-hover: #f97316;
  --aui-cta-text: #ffffff;
  --aui-cta-shadow: 0 4px 18px rgba(249, 115, 22, 0.3);
  --aui-cta-shadow-hover: 0 6px 24px rgba(234, 88, 12, 0.4);
  --aui-cta-glow: rgba(251, 146, 60, 0.18);
  --aui-color-scheme: dark;
}

[x-cloak] {
  display: none !important;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body.agents-theme {
  margin: 0;
  min-height: 100vh;
  color: var(--aui-text);
  color-scheme: var(--aui-color-scheme);
  background:
    var(--aui-body-layer-1),
    var(--aui-body-layer-2),
    var(--aui-body-layer-3),
    linear-gradient(180deg, var(--aui-bg), var(--aui-bg-alt));
  font-family: "Satoshi", "Avenir Next", "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}

body.agents-theme::before {
  content: "";
  position: fixed;
  inset: -20%;
  background: var(--aui-body-before);
  pointer-events: none;
  z-index: -2;
}

body.agents-theme::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: linear-gradient(var(--aui-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--aui-grid-line) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
  z-index: -1;
  opacity: var(--aui-grid-opacity);
}

body.agents-theme main {
  position: relative;
}

body.agents-theme a {
  color: var(--aui-link);
  transition: color 0.2s ease;
}

body.agents-theme a:hover {
  color: var(--aui-link-hover);
}

body.agents-theme h1,
body.agents-theme h2,
body.agents-theme h3,
body.agents-theme h4,
body.agents-theme h5,
body.agents-theme h6,
body.agents-theme strong,
body.agents-theme .font-semibold,
body.agents-theme .font-bold {
  color: var(--aui-text) !important;
}

body.agents-theme .text-black,
body.agents-theme .text-gray-900,
body.agents-theme .text-gray-800,
body.agents-theme .text-gray-700,
body.agents-theme .text-slate-900,
body.agents-theme .text-slate-800,
body.agents-theme .text-slate-700 {
  color: var(--aui-text) !important;
}

body.agents-theme .text-gray-600,
body.agents-theme .text-gray-500,
body.agents-theme .text-gray-400,
body.agents-theme .text-slate-600,
body.agents-theme .text-slate-500,
body.agents-theme .text-slate-400 {
  color: var(--aui-muted) !important;
}

body.agents-theme .text-gray-300,
body.agents-theme .text-slate-300 {
  color: var(--aui-subtle-text) !important;
}

/* Preserve white text — must come AFTER font-weight and gray overrides
   so it wins via source order on elements like <button class="font-semibold text-white bg-blue-600"> */
body.agents-theme .text-white,
body.agents-theme .text-white\/90,
body.agents-theme .text-white\/80 {
  color: #ffffff !important;
}

body.agents-theme .bg-white,
body.agents-theme .bg-white\/95,
body.agents-theme .bg-white\/90,
body.agents-theme .bg-white\/80,
body.agents-theme .bg-white\/70,
body.agents-theme .bg-white\/60,
body.agents-theme .bg-white\/50,
body.agents-theme .bg-white\/40,
body.agents-theme .bg-white\/30,
body.agents-theme .bg-gray-50,
body.agents-theme .bg-gray-100,
body.agents-theme .bg-gray-200,
body.agents-theme .bg-card {
  background-color: var(--aui-surface) !important;
}

body.agents-theme .bg-gray-900,
body.agents-theme .bg-black,
body.agents-theme .bg-slate-900,
body.agents-theme .bg-slate-950 {
  background-color: var(--aui-surface-strong) !important;
}

body.agents-theme .border,
body.agents-theme .border-gray-100,
body.agents-theme .border-gray-200,
body.agents-theme .border-gray-300,
body.agents-theme .border-gray-700,
body.agents-theme .border-gray-800,
body.agents-theme .border-slate-100,
body.agents-theme .border-slate-200,
body.agents-theme .border-slate-700,
body.agents-theme .border-slate-800 {
  border-color: var(--aui-border) !important;
}

body.agents-theme .rounded-2xl {
  border-radius: 0.9rem !important;
}

body.agents-theme .rounded-xl {
  border-radius: 0.72rem !important;
}

body.agents-theme .rounded-lg {
  border-radius: 0.58rem !important;
}

body.agents-theme .rounded-md {
  border-radius: 0.45rem !important;
}

body.agents-theme .rounded-sm {
  border-radius: 0.35rem !important;
}

body.agents-theme .shadow,
body.agents-theme .shadow-sm,
body.agents-theme .shadow-md,
body.agents-theme .shadow-lg,
body.agents-theme .shadow-xl,
body.agents-theme .shadow-2xl {
  box-shadow: var(--aui-shadow) !important;
}

body.agents-theme .feature-card,
body.agents-theme .glass-card,
body.agents-theme .glass-table,
body.agents-theme .glass-code-block,
body.agents-theme .rounded-xl.border,
body.agents-theme .rounded-2xl.border,
body.agents-theme .rounded-lg.border,
body.agents-theme .data-display,
body.agents-theme .json-display,
body.agents-theme .download-card,
body.agents-theme .problem-card,
body.agents-theme .philosophy-card,
body.agents-theme .feature-item {
  background: linear-gradient(165deg, var(--aui-card-grad-start), var(--aui-card-grad-end)) !important;
  border: 1px solid var(--aui-border) !important;
  border-radius: var(--aui-radius);
  box-shadow: var(--aui-shadow);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

body.agents-theme .feature-card:hover,
body.agents-theme .glass-card:hover,
body.agents-theme .problem-card:hover,
body.agents-theme .philosophy-card:hover,
body.agents-theme .feature-item:hover {
  transform: translateY(-4px);
  border-color: var(--aui-card-hover-border) !important;
}

body.agents-theme .badge,
body.agents-theme .badge-text,
body.agents-theme .hero-badge,
body.agents-theme .tr-badge {
  background: var(--aui-badge-bg) !important;
  color: var(--aui-badge-fg) !important;
  border: 1px solid var(--aui-badge-border) !important;
}

body.agents-theme .gradient-text {
  background: linear-gradient(95deg, #7ed1ff, #66b4ff 38%, #88dcf8 70%, #b3c4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

body.agents-theme input,
body.agents-theme textarea,
body.agents-theme select {
  background: var(--aui-input-bg) !important;
  border: 1px solid var(--aui-border) !important;
  color: var(--aui-text) !important;
  border-radius: 8px;
}

/* Playground search bar — one unified container, no nested boxes */
body.agents-theme .playground-input-shell {
  background: transparent !important;
  border: 1px solid var(--aui-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 5px !important;
  gap: 6px !important;
}

/* Input is invisible inside the shell — the shell IS the visual field */
body.agents-theme .playground-shell-input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 0.9rem !important;
}

body.agents-theme .playground-shell-input:focus,
body.agents-theme .playground-shell-input:focus-visible {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Focus glow on the shell when input inside is focused */
body.agents-theme .playground-input-shell:focus-within {
  border-color: var(--aui-accent) !important;
  box-shadow: 0 0 0 3px rgba(47, 143, 232, 0.10) !important;
}

/* Compact on mobile — reduce sizes, inset from glass container edges */
@media (max-width: 639px) {
  body.agents-theme .playground-input-shell {
    padding: 4px !important;
    gap: 4px !important;
    margin: 0 12px !important;
    border-radius: 12px !important;
  }
  body.agents-theme .playground-shell-input {
    height: 36px !important;
    font-size: 0.85rem !important;
  }
  body.agents-theme .playground-input-shell button[type="submit"],
  body.agents-theme .playground-input-shell button[type="button"] {
    height: 34px !important;
    font-size: 0.8rem !important;
    border-radius: 10px !important;
  }
}

body.agents-theme input::placeholder,
body.agents-theme textarea::placeholder {
  color: var(--aui-faint) !important;
}

body.agents-theme kbd {
  background: var(--aui-kbd-bg);
  color: var(--aui-kbd-text);
  border: 1px solid var(--aui-border);
  border-radius: 6px;
  box-shadow: var(--aui-kbd-shadow);
}

body.agents-theme pre,
body.agents-theme pre code {
  background: var(--aui-pre-bg) !important;
  color: var(--aui-pre-text) !important;
  border-color: var(--aui-pre-border) !important;
}

body.agents-theme code {
  color: var(--aui-inline-code) !important;
}

.agents-nav {
  position: sticky;
  top: 0;
  z-index: 120;
  border-bottom: 1px solid var(--aui-border);
  background: var(--aui-nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.agents-nav-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.agents-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--aui-text) !important;
  font-weight: 700;
  font-size: 1.03rem;
  letter-spacing: 0.02em;
}

.agents-brand img {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  box-shadow: none;
  border: 0;
}

.agents-nav-desktop {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.agents-nav-mobile-actions {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

.agents-nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.agents-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.78rem;
  border-radius: 8px;
  color: var(--aui-muted) !important;
  text-decoration: none;
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 500;
}

.agents-nav-link:hover,
.agents-nav-link.is-active {
  color: var(--aui-text) !important;
  background: var(--aui-nav-link-bg);
  border-color: var(--aui-border);
}

.agents-divider {
  width: 1px;
  height: 26px;
  background: var(--aui-border);
  margin: 0 0.4rem;
}

.agents-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  border-radius: 8px;
  padding: 0.38rem 0.74rem;
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--aui-border);
  background: var(--aui-chip-bg);
  color: var(--aui-chip-text);
}

.agents-chip--warn {
  background: var(--aui-chip-warn-bg);
  border-color: var(--aui-chip-warn-border);
  color: var(--aui-chip-warn-text);
}

.agents-chip--danger {
  background: var(--aui-chip-danger-bg);
  border-color: var(--aui-chip-danger-border);
  color: var(--aui-chip-danger-text);
}

.agents-dashboard-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9px;
  border: 1px solid var(--aui-border);
  background: transparent;
  color: var(--aui-text) !important;
  padding: 0 0.72rem;
  height: 38px;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
}

.agents-dashboard-btn:hover {
  border-color: var(--aui-border);
  background: var(--aui-nav-link-bg);
}

.agents-dashboard-btn .agents-chip {
  padding: 0.2rem 0.52rem;
  font-size: 0.72rem;
  height: auto;
}

.agents-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 38px;
  padding: 0 0.72rem;
  border-radius: 9px;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--aui-border);
}

.agents-auth-btn--subtle {
  background: transparent;
  color: var(--aui-muted) !important;
}

.agents-auth-btn--subtle:hover {
  background: var(--aui-nav-link-bg);
  color: var(--aui-text) !important;
}

.agents-auth-btn--cta {
  background: linear-gradient(135deg, var(--aui-cta-from), var(--aui-cta-to));
  color: var(--aui-cta-text) !important;
  border: none;
  box-shadow: var(--aui-shadow);
  transition: all 0.3s ease;
  filter: brightness(1);
}

.agents-auth-btn--cta:hover {
  filter: brightness(1.1);
  box-shadow: var(--aui-shadow);
  transform: none;
}

.agents-auth-btn--cta:active {
  transform: scale(0.98);
}

.agents-user-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.62rem;
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--aui-border);
  background: transparent;
  color: var(--aui-text);
}

.agents-user-toggle:hover {
  background: var(--aui-nav-link-bg);
}

.agents-avatar {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--aui-avatar-grad-start), var(--aui-avatar-grad-end));
  color: var(--aui-avatar-text);
  box-shadow: inset 0 0 0 1px var(--aui-avatar-border);
}

.agents-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 250px;
  border-radius: 10px;
  border: 1px solid var(--aui-border);
  background: var(--aui-dropdown-bg);
  box-shadow: var(--aui-shadow);
  overflow: hidden;
}

.agents-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.62rem 0.85rem;
  color: var(--aui-muted) !important;
  text-decoration: none;
  border: 0;
  background: transparent;
  font-size: 0.88rem;
}

.agents-dropdown-item:hover {
  background: var(--aui-dropdown-item-hover);
  color: var(--aui-text) !important;
}

.agents-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--aui-border);
  background: var(--aui-mobile-toggle-bg);
  color: var(--aui-text);
}

.agents-mobile-menu {
  display: none;
  margin: 0 auto;
  max-width: 1220px;
  padding: 0 1rem 1rem;
}

.agents-mobile-menu.is-open {
  display: block;
}

.agents-mobile-panel {
  border-radius: 11px;
  border: 1px solid var(--aui-border);
  background: var(--aui-mobile-panel-bg);
  box-shadow: var(--aui-shadow);
  overflow: hidden;
}

.agents-mobile-section {
  padding: 0.85rem;
  border-top: 1px solid var(--aui-mobile-section-border);
}

.agents-mobile-section:first-child {
  border-top: 0;
}

.agents-mobile-link {
  display: block;
  padding: 0.58rem 0.62rem;
  border-radius: 8px;
  color: var(--aui-muted) !important;
  text-decoration: none;
  font-size: 0.92rem;
}

.agents-mobile-link:hover {
  background: var(--aui-mobile-link-hover);
  color: var(--aui-text) !important;
}

.agents-footer {
  margin-top: auto;
  border-top: 1px solid var(--aui-border);
  background: var(--aui-footer-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.agents-footer-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 2.6rem 1rem;
}

.agents-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
  gap: 1.35rem;
}

.agents-footer-title {
  color: var(--aui-text);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.55rem;
}

.agents-footer-copy {
  color: var(--aui-muted);
  font-size: 0.88rem;
  margin-top: 0.4rem;
  line-height: 1.55;
}

.agents-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.agents-footer-list li {
  margin: 0.35rem 0;
}

.agents-footer-link {
  color: var(--aui-muted) !important;
  text-decoration: none;
  font-size: 0.86rem;
}

.agents-footer-link:hover {
  color: var(--aui-text) !important;
}

.agents-footer-bottom {
  margin-top: 1.4rem;
  border-top: 1px solid var(--aui-footer-bottom-border);
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.agents-language-menu {
  position: relative;
}

.agents-language-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--aui-border);
  background: var(--aui-language-trigger-bg);
  color: var(--aui-text);
  padding: 0.4rem 0.64rem;
  font-size: 0.83rem;
}

.agents-language-trigger--compact {
  height: 38px;
  padding: 0 0.6rem;
  gap: 0.42rem;
  font-size: 0.78rem;
  border-radius: 9px;
  background: transparent;
  color: var(--aui-muted);
}

.agents-language-trigger--compact:hover {
  background: var(--aui-nav-link-bg);
  color: var(--aui-text);
}

.agents-language-code {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.agents-language-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-height: 320px;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid var(--aui-border);
  background: var(--aui-language-dropdown-bg);
  box-shadow: var(--aui-shadow);
  padding: 0.45rem;
}

.agents-language-dropdown--top {
  bottom: auto;
  top: calc(100% + 10px);
  z-index: 200;
}

.agents-language-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--aui-muted) !important;
  border-radius: 9px;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
}

.agents-language-option:hover {
  background: var(--aui-language-option-hover);
  color: var(--aui-text) !important;
}

body.agents-theme .glass-sidebar,
body.agents-theme .glass-topbar,
body.agents-theme .glass-header {
  background: var(--aui-glass-bg) !important;
  border-color: var(--aui-border) !important;
  box-shadow: none !important;
}

body.agents-theme .glass-button {
  border-color: var(--aui-border) !important;
  background: var(--aui-glass-button-bg);
  color: var(--aui-glass-button-text) !important;
  border-radius: 6px !important;
}

body.agents-theme .glass-button.active,
body.agents-theme .glass-button:hover {
  background: var(--aui-glass-button-active-bg) !important;
  border-color: var(--aui-glass-button-active-border) !important;
  color: var(--aui-glass-button-active-text) !important;
}

body.agents-theme button,
body.agents-theme .btn,
body.agents-theme [role="button"] {
  border-radius: 0.45rem;
}

body.agents-theme .timeline-bar-operational {
  background: var(--aui-success) !important;
}

body.agents-theme .timeline-bar-minor {
  background: var(--aui-warning) !important;
}

body.agents-theme .timeline-bar-major {
  background: var(--aui-danger) !important;
}

body.agents-theme .timeline-bar-maintenance {
  background: var(--aui-muted) !important;
}

body.agents-theme .auth-card {
  border-radius: 12px;
  border: 1px solid var(--aui-border);
  background: var(--aui-auth-bg);
  box-shadow: var(--aui-shadow);
}

body.agents-theme #playground,
body.agents-theme #live,
body.agents-theme #features,
body.agents-theme #pricing {
  position: relative;
  isolation: isolate;
}

body.agents-theme #playground::before,
body.agents-theme #live::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 4%;
  height: 210px;
  border-radius: 999px;
  background: var(--aui-section-glow);
  filter: blur(28px);
  z-index: -1;
}

body.agents-theme #features::after,
body.agents-theme #pricing::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  border-top: 1px solid var(--aui-section-divider);
  z-index: -1;
}

body.agents-theme #features.aui-no-divider::after,
body.agents-theme #pricing.aui-no-divider::after {
  content: none;
}

/* ── Fullscreen overlay fix ── */
/* When fullscreen is active, neutralise ancestor stacking contexts
   so the fixed overlay can sit above the entire page. */
body.fullscreen-active {
  overflow: hidden !important;
}

body.fullscreen-active .fullscreen-overlay {
  z-index: 99999 !important;
}

body.fullscreen-active #playground,
body.fullscreen-active #live,
body.fullscreen-active #features,
body.fullscreen-active #pricing {
  isolation: auto !important;
}

/* Tab bar / switcher */
body.agents-theme .aui-tab-bar {
  background: var(--aui-surface-soft);
  border: 1px solid var(--aui-border);
  border-radius: var(--aui-radius);
  padding: 3px;
  overflow: hidden;
}

body.agents-theme .aui-tab-bar button {
  border-radius: var(--aui-radius-sm);
  color: var(--aui-muted);
  border: 1px solid transparent;
  transition: all 0.22s ease;
  background: transparent;
  font-weight: 500;
  position: relative;
}

body.agents-theme .aui-tab-bar button:hover {
  color: var(--aui-text);
  background: var(--aui-nav-link-bg);
}

body.agents-theme .aui-tab-bar button.aui-tab-active {
  background: var(--aui-surface);
  color: var(--aui-cta-solid);
  box-shadow: none;
}

/* Themed badges (hero pills) */
body.agents-theme .aui-badge-success {
  background: var(--aui-badge-bg);
  color: var(--aui-badge-fg);
  border: 1px solid var(--aui-badge-border);
}

body.agents-theme .aui-badge-accent {
  background: var(--aui-chip-bg);
  color: var(--aui-chip-text);
  border: 1px solid var(--aui-border);
}

/* Themed pricing option buttons */
body.agents-theme .aui-option-btn {
  background: var(--aui-surface) !important;
  border: 1px solid var(--aui-border) !important;
  color: var(--aui-muted) !important;
  border-radius: var(--aui-radius-sm);
  transition: all 0.2s ease;
}

body.agents-theme .aui-option-btn:hover {
  border-color: var(--aui-card-hover-border) !important;
  color: var(--aui-text) !important;
}

body.agents-theme .aui-option-btn.active {
  background: var(--aui-badge-bg) !important;
  border-color: var(--aui-accent) !important;
  color: var(--aui-accent) !important;
}

/* Themed pricing cards */
body.agents-theme .aui-pricing-card {
  background: linear-gradient(165deg, var(--aui-card-grad-start), var(--aui-card-grad-end));
  border: 1px solid var(--aui-border);
  border-radius: var(--aui-radius);
  box-shadow: var(--aui-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.agents-theme .aui-pricing-card:hover {
  border-color: var(--aui-card-hover-border);
}

body.agents-theme .aui-pricing-card--featured {
  border-color: var(--aui-accent);
  border-width: 2px;
}

body.agents-theme .prose {
  color: var(--aui-muted);
}

body.agents-theme .prose h1,
body.agents-theme .prose h2,
body.agents-theme .prose h3,
body.agents-theme .prose h4 {
  color: var(--aui-text);
}

body.agents-theme .prose a {
  color: var(--aui-link);
}

body.agents-theme table {
  border-color: var(--aui-border) !important;
}

body.agents-theme th,
body.agents-theme td {
  border-color: var(--aui-border) !important;
}

body.agents-theme summary {
  color: var(--aui-link);
}

body.agents-theme .bg-red-50,
body.agents-theme .bg-yellow-50,
body.agents-theme .bg-green-50,
body.agents-theme .bg-blue-50,
body.agents-theme .bg-amber-50 {
  background-color: var(--aui-alert-50-bg) !important;
}

body.agents-theme .bg-red-100,
body.agents-theme .bg-yellow-100,
body.agents-theme .bg-green-100,
body.agents-theme .bg-blue-100,
body.agents-theme .bg-amber-100 {
  background-color: var(--aui-alert-100-bg) !important;
}

body.agents-theme .text-red-700,
body.agents-theme .text-red-800 {
  color: var(--aui-text-red) !important;
}

body.agents-theme .text-yellow-700,
body.agents-theme .text-yellow-800 {
  color: var(--aui-text-yellow) !important;
}

body.agents-theme .text-green-700,
body.agents-theme .text-green-800 {
  color: var(--aui-text-green) !important;
}

body.agents-theme .text-blue-700,
body.agents-theme .text-blue-800 {
  color: var(--aui-text-blue) !important;
}

body.agents-theme .text-amber-700,
body.agents-theme .text-amber-800 {
  color: var(--aui-text-amber) !important;
}

/* ── CTA Button ── */
body.agents-theme .aui-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--aui-cta-from), var(--aui-cta-to));
  color: var(--aui-cta-text) !important;
  border: none;
  border-radius: var(--aui-radius-sm);
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: var(--aui-cta-shadow);
  transition: all 0.24s ease;
  text-decoration: none;
  cursor: pointer;
}

body.agents-theme .aui-cta:hover {
  background: linear-gradient(135deg, var(--aui-cta-from-hover), var(--aui-cta-to-hover));
  box-shadow: var(--aui-cta-shadow-hover);
  transform: translateY(-1px);
  color: var(--aui-cta-text) !important;
}

body.agents-theme .aui-cta:active {
  transform: translateY(0);
}

/* Global overrides: remap Tailwind blue gradients to theme CTA */
body.agents-theme .from-blue-500 {
  --tw-gradient-from: var(--aui-cta-from) !important;
}

body.agents-theme .from-blue-600 {
  --tw-gradient-from: var(--aui-cta-from) !important;
}

body.agents-theme .to-indigo-600 {
  --tw-gradient-to: var(--aui-cta-to) !important;
}

body.agents-theme .to-indigo-700 {
  --tw-gradient-to: var(--aui-cta-to) !important;
}

/* Override solid blue buttons */
body.agents-theme .bg-blue-600 {
  background-color: var(--aui-cta-solid) !important;
}

body.agents-theme .bg-blue-500 {
  background-color: var(--aui-cta-solid) !important;
}

body.agents-theme .hover\:bg-blue-700:hover {
  background-color: var(--aui-cta-solid-hover) !important;
}

body.agents-theme .hover\:bg-blue-600:hover {
  background-color: var(--aui-cta-solid-hover) !important;
}

/* Override blue border on CTA */
body.agents-theme .border-blue-500 {
  border-color: var(--aui-cta-from) !important;
}

/* Override gradient hover stops */
body.agents-theme .hover\:from-blue-600:hover {
  --tw-gradient-from: var(--aui-cta-from-hover) !important;
}

body.agents-theme .hover\:to-indigo-700:hover {
  --tw-gradient-to: var(--aui-cta-to-hover) !important;
}

/* Dark mode gradient overrides via Tailwind dark: prefix */
body.agents-theme .dark\:from-blue-600 {
  --tw-gradient-from: var(--aui-cta-from) !important;
}

body.agents-theme .dark\:to-indigo-700 {
  --tw-gradient-to: var(--aui-cta-to) !important;
}

body.agents-theme .dark\:from-blue-400 {
  --tw-gradient-from: var(--aui-cta-from) !important;
}

body.agents-theme .dark\:to-indigo-400 {
  --tw-gradient-to: var(--aui-cta-to) !important;
}

/* Slider thumb override */
body.agents-theme input[type="range"]::-webkit-slider-thumb {
  background-color: var(--aui-cta-solid) !important;
}

body.agents-theme input[type="range"]::-moz-range-thumb {
  background-color: var(--aui-cta-solid) !important;
}

/* Blue text accents — keep blue for informational links (website, email, etc.) */
body.agents-theme .text-blue-600 {
  color: var(--aui-link) !important;
}

body.agents-theme .text-blue-500 {
  color: var(--aui-link) !important;
}

body.agents-theme .dark\:text-blue-400 {
  color: var(--aui-link) !important;
}

body.agents-theme .dark\:text-blue-500 {
  color: var(--aui-link) !important;
}

/* Peer-checked gradient (AI Mode toggle, checkboxes) */
body.agents-theme .peer-checked\:from-blue-500 {
  --tw-gradient-from: var(--aui-cta-from) !important;
}

body.agents-theme .peer-checked\:to-indigo-600 {
  --tw-gradient-to: var(--aui-cta-to) !important;
}

/* ── Indigo → Theme overrides ── */
/* Solid indigo buttons / toggle tracks → CTA */
body.agents-theme .bg-indigo-600 {
  background-color: var(--aui-cta-solid) !important;
}
body.agents-theme .bg-indigo-700,
body.agents-theme .hover\:bg-indigo-700:hover {
  background-color: var(--aui-cta-solid-hover) !important;
}

/* Indigo tint backgrounds → theme badge */
body.agents-theme .bg-indigo-50,
body.agents-theme .bg-indigo-100 {
  background-color: var(--aui-badge-bg) !important;
}
body.agents-theme .dark\:bg-indigo-900\/20,
body.agents-theme .dark\:bg-indigo-900\/30 {
  background-color: var(--aui-badge-bg) !important;
}
body.agents-theme .dark\:bg-indigo-600\/20 {
  background-color: var(--aui-badge-bg) !important;
}

/* Indigo text → theme accent blue */
body.agents-theme .text-indigo-500,
body.agents-theme .text-indigo-600,
body.agents-theme .text-indigo-700,
body.agents-theme .text-indigo-800 {
  color: var(--aui-accent) !important;
}
body.agents-theme .dark\:text-indigo-300,
body.agents-theme .dark\:text-indigo-400 {
  color: var(--aui-accent) !important;
}

/* Indigo borders → theme */
body.agents-theme .border-indigo-200,
body.agents-theme .border-indigo-400 {
  border-color: var(--aui-badge-border) !important;
}
body.agents-theme .dark\:border-indigo-600,
body.agents-theme .dark\:border-indigo-800,
body.agents-theme .dark\:border-indigo-300 {
  border-color: var(--aui-border) !important;
}

/* Indigo gradient-to stops */
body.agents-theme .to-indigo-50,
body.agents-theme .to-indigo-100 {
  --tw-gradient-to: transparent !important;
}
body.agents-theme .from-indigo-50 {
  --tw-gradient-from: transparent !important;
}

/* Indigo focus rings */
body.agents-theme .focus\:ring-indigo-500:focus,
body.agents-theme .focus\:ring-indigo-300:focus {
  --tw-ring-color: var(--aui-cta-glow) !important;
}
body.agents-theme .focus\:border-indigo-500:focus,
body.agents-theme .focus\:border-indigo-700:focus {
  border-color: var(--aui-accent) !important;
}
body.agents-theme .focus\:text-indigo-800:focus {
  color: var(--aui-accent) !important;
}
body.agents-theme .dark\:focus\:border-indigo-300:focus {
  border-color: var(--aui-accent) !important;
}

/* ── Purple → Theme Blue overrides ── */
/* Purple text → accent blue */
body.agents-theme .text-purple-500,
body.agents-theme .text-purple-600,
body.agents-theme .text-purple-700,
body.agents-theme .text-purple-800 {
  color: var(--aui-accent) !important;
}
body.agents-theme .dark\:text-purple-200,
body.agents-theme .dark\:text-purple-300,
body.agents-theme .dark\:text-purple-400 {
  color: var(--aui-accent) !important;
}

/* Purple tint backgrounds → theme badge */
body.agents-theme .bg-purple-50,
body.agents-theme .bg-purple-100 {
  background-color: var(--aui-badge-bg) !important;
}
body.agents-theme .dark\:bg-purple-900\/20,
body.agents-theme .dark\:bg-purple-900\/30,
body.agents-theme .dark\:bg-purple-900\/50 {
  background-color: var(--aui-badge-bg) !important;
}

/* Purple solid buttons → CTA */
body.agents-theme .bg-purple-500,
body.agents-theme .bg-purple-600 {
  background-color: var(--aui-cta-solid) !important;
}
body.agents-theme .hover\:bg-purple-700:hover {
  background-color: var(--aui-cta-solid-hover) !important;
}

/* Purple borders → theme */
body.agents-theme .border-purple-200,
body.agents-theme .border-purple-300,
body.agents-theme .border-purple-200\/40 {
  border-color: var(--aui-badge-border) !important;
}
body.agents-theme .dark\:border-purple-700,
body.agents-theme .dark\:border-purple-800,
body.agents-theme .dark\:border-purple-800\/40 {
  border-color: var(--aui-border) !important;
}

/* Purple focus rings */
body.agents-theme .focus\:ring-purple-500:focus {
  --tw-ring-color: var(--aui-cta-glow) !important;
}
body.agents-theme .text-purple-600.focus\:ring-purple-500:focus {
  --tw-ring-color: var(--aui-cta-glow) !important;
}

/* Purple/pink gradient stops → accent blue */
body.agents-theme .from-purple-500,
body.agents-theme .from-purple-600,
body.agents-theme .from-purple-400 {
  --tw-gradient-from: var(--aui-accent) !important;
}
body.agents-theme .to-pink-500,
body.agents-theme .to-pink-600 {
  --tw-gradient-to: var(--aui-link) !important;
}

/* Purple gradient tint stops */
body.agents-theme .from-purple-50,
body.agents-theme .to-purple-50,
body.agents-theme .to-purple-100,
body.agents-theme .to-pink-100 {
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
}
body.agents-theme .dark\:from-purple-900\/20,
body.agents-theme .dark\:to-purple-900\/20,
body.agents-theme .dark\:to-pink-900\/20,
body.agents-theme .dark\:from-purple-900\/30 {
  --tw-gradient-from: var(--aui-badge-bg) !important;
  --tw-gradient-to: var(--aui-badge-bg) !important;
}

/* ── Focus rings (all variants) ── */
body.agents-theme .focus\:ring-blue-500:focus,
body.agents-theme .focus-visible\:ring-blue-500:focus-visible {
  --tw-ring-color: var(--aui-cta-glow) !important;
}

@media (max-width: 1024px) {
  .agents-nav-desktop {
    display: none;
  }

  .agents-nav-mobile-actions {
    display: inline-flex;
  }

  .agents-mobile-toggle {
    display: inline-flex;
  }

  .agents-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .agents-nav-inner {
    padding: 0.72rem 0.85rem;
  }

  .agents-brand span {
    font-size: 0.93rem;
  }

  .agents-footer-inner {
    padding: 2rem 0.9rem;
  }

  .agents-footer-grid {
    grid-template-columns: 1fr;
  }
}