/* Shared design system. Color aliases also cover existing JS-rendered markup. */
:root, html[data-theme="light"] {
  color-scheme: light;
  --page: #f6f8fb; --surface: #ffffff; --soft: #eef2f7;
  --line: #d6dee9; --ink: #182538; --muted: #55657b;
  --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: #eaf1ff; --on-accent: #ffffff;
  --success: #047857; --success-solid: #047857; --success-soft: #e7f6ef; --success-line: #a3d6c0;
  --warning: #92400e; --warning-solid: #b45309; --warning-soft: #fff5df; --warning-line: #e7c481;
  --danger: #b91c1c; --danger-solid: #dc2626; --danger-soft: #fff0ef; --danger-line: #e9b5b1;
  --chart-secondary: #7c3aed; --shadow: #15253b18; --overlay: #101b3280;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #101722; --surface: #172130; --soft: #202d40;
  --line: #34445a; --ink: #edf2fa; --muted: #adbbcf;
  --accent: #8ab4ff; --accent-hover: #a8c7ff; --accent-soft: #213755; --on-accent: #10213b;
  --success: #6ee7b7; --success-solid: #047857; --success-soft: #133b30; --success-line: #2f6b55;
  --warning: #fcd58a; --warning-solid: #b45309; --warning-soft: #3d301e; --warning-line: #7d6235;
  --danger: #fca5a5; --danger-solid: #b91c1c; --danger-soft: #3c232c; --danger-line: #7a424a;
  --chart-secondary: #b4a2ff; --shadow: #00000040; --overlay: #030913b3;
}
body.ui-shell { background: var(--page); color: var(--ink); font-size: 16px; line-height: 1.6; }
.ui-shell *, .ui-shell *::before, .ui-shell *::after { box-sizing: border-box; }
.ui-shell [hidden], .ui-shell .hidden { display: none !important; }
.ui-shell :is(h1, h2, h3, h4) { color: var(--ink); line-height: 1.35; letter-spacing: -.025em; }
.ui-shell :is(.text-xs, .text-sm) { font-size: 14px; line-height: 1.6; }
.ui-shell :is(.text-\[9px\], .text-\[10px\], .text-\[11px\]) { font-size: 12px; line-height: 1.5; }
.ui-shell :is(button, select, input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea) { min-height: 40px; border-radius: 8px; font-size: 14px; }
.ui-shell :is(select, input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea) { background: var(--surface); color: var(--ink); max-width: 100%; }
.ui-shell :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
.ui-shell :is(button, input, select, textarea):disabled { opacity: .5; cursor: not-allowed; }
.ui-shell :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 3px !important; }
.ui-shell :is(input[type="range"], input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
.ui-shell > header { background: var(--surface); border-color: var(--line); box-shadow: 0 1px 0 var(--shadow); }
.ui-shell > header nav > a { min-height: 40px; display: inline-flex; align-items: center; border-radius: 8px; }
.ui-shell :is(section, article, .rounded-xl, .rounded-2xl):not(.rounded-full) { border-radius: 12px; }
.ui-shell .shadow-lg, .ui-shell .shadow-xl, .ui-shell .shadow-2xl { box-shadow: 0 4px 16px var(--shadow); }
.ui-shell table { width: 100%; font-size: 14px; }
.ui-shell :is(th, td) { padding: 12px 16px; vertical-align: top; overflow-wrap: anywhere; }
.ui-shell th { background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 600; }
.ui-shell main, .ui-shell .view-panel, .ui-shell .grid > * { min-width: 0; }
.ui-shell .overflow-x-auto { max-width: 100%; }
.ui-shell [role="dialog"] { padding: 24px; overflow-y: auto; background: var(--overlay); }
.ui-shell [role="dialog"] > div { max-width: 100%; max-height: calc(100dvh - 48px); overflow-y: auto; background: var(--surface); border-color: var(--line); border-radius: 12px; }
.ui-shell #toast-container { max-width: calc(100vw - 32px); right: 16px; top: 16px; }
.ui-shell #toast-container > * { border-radius: 12px; box-shadow: 0 4px 16px var(--shadow); overflow-wrap: anywhere; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--soft); color: var(--ink); border: 1px solid var(--line); padding: 8px 12px; font-weight: 600; white-space: nowrap; }
.theme-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.theme-toggle:hover { background: var(--accent-soft); }
.page-intro h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; margin: 4px 0 8px; }
.page-intro > p:last-child { color: var(--muted); font-size: 15px; }
.page-eyebrow { color: var(--accent); font-size: 12px; letter-spacing: .15em; font-weight: 700; }
.ui-shell .active-btn, .ui-shell .btn-lang-choice.bg-brand-600, .ui-shell .btn-lang-choice.bg-zinc-800 { background: var(--accent-soft) !important; border-color: var(--accent) !important; color: var(--accent) !important; box-shadow: none !important; }
.ui-shell .active-btn :is(span, svg) { color: var(--accent) !important; }
.ui-shell .nav-tab.active-tab { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent) !important; box-shadow: none !important; }
.ui-shell .nav-tab.active-tab :is(span, svg) { color: var(--accent) !important; }
.ui-shell .nav-tab:not(.active-tab):hover { background: var(--soft); color: var(--ink) !important; }
.ui-shell .nav-tab:not(.active-tab):hover :is(span, svg) { color: var(--ink) !important; }
.ui-shell ::selection { background: var(--accent-soft); color: var(--ink); }
::-webkit-scrollbar-track { background: var(--page); }
::-webkit-scrollbar-thumb { background: var(--line); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
@media (max-width: 640px) {
  .ui-shell [role="dialog"] { padding: 16px; }
  .ui-shell [role="dialog"] > div { max-height: calc(100dvh - 32px); }
  .ui-shell .grid-cols-2:not(#dashboard-metrics) { grid-template-columns: minmax(0, 1fr); }
  .ui-shell :is(th, td) { padding: 12px; }
}

/* Compatibility aliases for static and dynamically rendered Tailwind colors. */
.ui-shell [class~="bg-[#5865F2]"],
.ui-shell [class~="bg-[#5865F2]/20"],
.ui-shell [class~="bg-blue-500/20"],
.ui-shell [class~="bg-blue-900/80"],
.ui-shell [class~="bg-blue-950/70"],
.ui-shell [class~="bg-indigo-900/60"],
.ui-shell [class~="bg-indigo-950"],
.ui-shell [class~="bg-indigo-950/60"],
.ui-shell [class~="bg-indigo-950/80"],
.ui-shell [class~="bg-purple-950/20"],
.ui-shell [class~="bg-purple-950/60"],
.ui-shell [class~="hover:bg-[#4752C4]"]:hover,
.ui-shell [class~="hover:bg-indigo-900/60"]:hover { background-color: var(--accent-soft); }
.ui-shell [class~="bg-amber-500"],
.ui-shell [class~="hover:bg-amber-400"]:hover { background-color: var(--warning-solid); }
.ui-shell [class~="bg-amber-500/15"],
.ui-shell [class~="bg-amber-500/20"],
.ui-shell [class~="bg-amber-800/60"],
.ui-shell [class~="bg-amber-900/60"],
.ui-shell [class~="bg-amber-900/80"],
.ui-shell [class~="bg-amber-950"],
.ui-shell [class~="bg-amber-950/30"],
.ui-shell [class~="bg-amber-950/50"],
.ui-shell [class~="bg-amber-950/60"],
.ui-shell [class~="bg-amber-950/90"],
.ui-shell [class~="bg-amber-950/95"],
.ui-shell [class~="hover:bg-amber-500/10"]:hover,
.ui-shell [class~="hover:bg-amber-700/80"]:hover { background-color: var(--warning-soft); }
.ui-shell [class~="bg-black/20"],
.ui-shell [class~="bg-black/30"],
.ui-shell [class~="bg-black/40"],
.ui-shell [class~="bg-dark-border"],
.ui-shell [class~="bg-slate-500"],
.ui-shell [class~="bg-slate-600"],
.ui-shell [class~="bg-slate-800"],
.ui-shell [class~="bg-white"],
.ui-shell [class~="bg-zinc-100"],
.ui-shell [class~="bg-zinc-300"],
.ui-shell [class~="bg-zinc-400"],
.ui-shell [class~="bg-zinc-500"],
.ui-shell [class~="bg-zinc-600"],
.ui-shell [class~="bg-zinc-800"],
.ui-shell [class~="bg-zinc-800/80"],
.ui-shell [class~="hover:bg-dark-hover"]:hover,
.ui-shell [class~="hover:bg-white"]:hover,
.ui-shell [class~="hover:bg-zinc-200"]:hover,
.ui-shell [class~="hover:bg-zinc-700"]:hover,
.ui-shell [class~="hover:bg-zinc-800"]:hover,
.ui-shell [class~="hover:bg-zinc-800/40"]:hover,
.ui-shell [class~="hover:bg-zinc-800/80"]:hover { background-color: var(--soft); }
.ui-shell [class~="bg-black/80"] { background-color: var(--overlay); }
.ui-shell [class~="bg-blue-600"],
.ui-shell [class~="bg-brand-600"],
.ui-shell [class~="bg-cyan-500"],
.ui-shell [class~="bg-indigo-500"],
.ui-shell [class~="bg-indigo-600"],
.ui-shell [class~="bg-purple-600"],
.ui-shell [class~="bg-violet-500"],
.ui-shell [class~="bg-violet-600"],
.ui-shell [class~="hover:bg-blue-500"]:hover,
.ui-shell [class~="hover:bg-indigo-500"]:hover,
.ui-shell [class~="hover:bg-purple-500"]:hover,
.ui-shell [class~="hover:bg-violet-500"]:hover { background-color: var(--accent); }
.ui-shell [class~="bg-dark-bg"],
.ui-shell [class~="bg-dark-bg/50"],
.ui-shell [class~="bg-dark-bg/60"],
.ui-shell [class~="bg-dark-bg/70"],
.ui-shell [class~="bg-dark-bg/80"],
.ui-shell [class~="bg-dark-bg/90"],
.ui-shell [class~="bg-dark-bg/95"] { background-color: var(--page); }
.ui-shell [class~="bg-dark-card"],
.ui-shell [class~="bg-dark-card/40"],
.ui-shell [class~="bg-dark-card/50"],
.ui-shell [class~="bg-dark-card/90"],
.ui-shell [class~="bg-zinc-900"],
.ui-shell [class~="bg-zinc-900/60"],
.ui-shell [class~="bg-zinc-900/80"],
.ui-shell [class~="bg-zinc-900/95"],
.ui-shell [class~="bg-zinc-950"],
.ui-shell [class~="hover:bg-dark-card"]:hover,
.ui-shell [class~="hover:bg-dark-cardHover"]:hover { background-color: var(--surface); }
.ui-shell [class~="bg-emerald-400"],
.ui-shell [class~="bg-emerald-500"],
.ui-shell [class~="bg-emerald-600"],
.ui-shell [class~="bg-emerald-700"],
.ui-shell [class~="hover:bg-emerald-500"]:hover,
.ui-shell [class~="hover:bg-emerald-600"]:hover { background-color: var(--success-solid); }
.ui-shell [class~="bg-emerald-500/20"],
.ui-shell [class~="bg-emerald-900/60"],
.ui-shell [class~="bg-emerald-950"],
.ui-shell [class~="bg-emerald-950/20"],
.ui-shell [class~="bg-emerald-950/40"],
.ui-shell [class~="bg-emerald-950/50"],
.ui-shell [class~="bg-emerald-950/60"],
.ui-shell [class~="bg-emerald-950/80"],
.ui-shell [class~="bg-emerald-950/90"] { background-color: var(--success-soft); }
.ui-shell [class~="bg-red-500"],
.ui-shell [class~="bg-red-600"],
.ui-shell [class~="hover:bg-red-500"]:hover,
.ui-shell [class~="hover:bg-red-700"]:hover { background-color: var(--danger-solid); }
.ui-shell [class~="bg-red-500/20"],
.ui-shell [class~="bg-red-900/60"],
.ui-shell [class~="bg-red-900/80"],
.ui-shell [class~="bg-red-950"],
.ui-shell [class~="bg-red-950/30"],
.ui-shell [class~="bg-red-950/40"],
.ui-shell [class~="bg-red-950/50"],
.ui-shell [class~="bg-red-950/60"],
.ui-shell [class~="bg-red-950/70"],
.ui-shell [class~="bg-red-950/80"],
.ui-shell [class~="bg-red-950/90"],
.ui-shell [class~="bg-red-950/95"],
.ui-shell [class~="bg-rose-950/40"],
.ui-shell [class~="bg-rose-950/50"],
.ui-shell [class~="hover:bg-red-800"]:hover,
.ui-shell [class~="hover:bg-red-900/50"]:hover,
.ui-shell [class~="hover:bg-red-950/50"]:hover,
.ui-shell [class~="hover:bg-rose-900/40"]:hover { background-color: var(--danger-soft); }
.ui-shell [class~="border-[#5865F2]/40"],
.ui-shell [class~="border-blue-500/40"],
.ui-shell [class~="border-blue-500/50"],
.ui-shell [class~="border-blue-700/50"],
.ui-shell [class~="border-brand-500"],
.ui-shell [class~="border-indigo-500/40"],
.ui-shell [class~="border-indigo-600"],
.ui-shell [class~="border-indigo-700/60"],
.ui-shell [class~="border-purple-500/20"],
.ui-shell [class~="border-purple-500/30"],
.ui-shell [class~="focus:border-cyan-500"]:focus,
.ui-shell [class~="focus:border-indigo-500"]:focus,
.ui-shell [class~="focus:border-purple-500"]:focus,
.ui-shell [class~="focus:border-violet-500"]:focus { border-color: var(--accent); }
.ui-shell [class~="border-amber-500/30"],
.ui-shell [class~="border-amber-500/40"],
.ui-shell [class~="border-amber-500/50"],
.ui-shell [class~="border-amber-500/60"],
.ui-shell [class~="border-amber-500/80"],
.ui-shell [class~="border-amber-600"],
.ui-shell [class~="border-amber-600/50"],
.ui-shell [class~="border-amber-700/40"],
.ui-shell [class~="border-amber-700/50"],
.ui-shell [class~="border-amber-700/60"],
.ui-shell [class~="border-amber-800/40"] { border-color: var(--warning-line); }
.ui-shell [class~="border-dark-bg"],
.ui-shell [class~="border-dark-border"],
.ui-shell [class~="border-dark-border/40"],
.ui-shell [class~="border-dark-border/50"],
.ui-shell [class~="border-dark-border/60"],
.ui-shell [class~="border-dark-border/70"],
.ui-shell [class~="border-dark-border/80"],
.ui-shell [class~="border-slate-700"],
.ui-shell [class~="border-zinc-200"],
.ui-shell [class~="border-zinc-500/60"],
.ui-shell [class~="border-zinc-600"],
.ui-shell [class~="border-zinc-700"],
.ui-shell [class~="border-zinc-700/60"],
.ui-shell [class~="border-zinc-700/80"],
.ui-shell [class~="border-zinc-800"],
.ui-shell [class~="border-zinc-800/80"],
.ui-shell [class~="border-zinc-900/80"],
.ui-shell [class~="divide-dark-border"] > :not([hidden]) ~ :not([hidden]),
.ui-shell [class~="divide-dark-border/60"] > :not([hidden]) ~ :not([hidden]),
.ui-shell [class~="focus:border-zinc-500"]:focus,
.ui-shell [class~="focus:border-zinc-600"]:focus,
.ui-shell [class~="hover:border-zinc-500"]:hover,
.ui-shell [class~="hover:border-zinc-600"]:hover,
.ui-shell [class~="hover:border-zinc-700"]:hover { border-color: var(--line); }
.ui-shell [class~="border-emerald-500"],
.ui-shell [class~="border-emerald-500/30"],
.ui-shell [class~="border-emerald-500/40"],
.ui-shell [class~="border-emerald-500/50"],
.ui-shell [class~="border-emerald-700"],
.ui-shell [class~="border-emerald-700/50"],
.ui-shell [class~="border-emerald-700/60"],
.ui-shell [class~="border-emerald-800/30"],
.ui-shell [class~="focus:border-emerald-500"]:focus { border-color: var(--success-line); }
.ui-shell [class~="border-red-500/30"],
.ui-shell [class~="border-red-500/40"],
.ui-shell [class~="border-red-500/50"],
.ui-shell [class~="border-red-500/60"],
.ui-shell [class~="border-red-500/80"],
.ui-shell [class~="border-red-700"],
.ui-shell [class~="border-red-700/50"],
.ui-shell [class~="border-red-700/60"],
.ui-shell [class~="border-rose-500/40"],
.ui-shell [class~="border-rose-700/50"] { border-color: var(--danger-line); }
.ui-shell [class~="focus:ring-indigo-500"]:focus { --tw-ring-color: var(--accent); }
.ui-shell [class~="from-amber-500"],
.ui-shell [class~="from-amber-500/20"],
.ui-shell [class~="from-amber-950/30"],
.ui-shell [class~="hover:from-amber-400"]:hover { --tw-gradient-from: var(--warning-soft); }
.ui-shell [class~="from-zinc-900"] { --tw-gradient-from: var(--surface); }
.ui-shell [class~="hover:text-amber-300"]:hover,
.ui-shell [class~="text-amber-100"],
.ui-shell [class~="text-amber-200"],
.ui-shell [class~="text-amber-300"],
.ui-shell [class~="text-amber-300/80"],
.ui-shell [class~="text-amber-300/90"],
.ui-shell [class~="text-amber-400"] { color: var(--warning); }
.ui-shell [class~="hover:text-red-200"]:hover,
.ui-shell [class~="hover:text-red-300"]:hover,
.ui-shell [class~="hover:text-red-400"]:hover,
.ui-shell [class~="hover:text-rose-300"]:hover,
.ui-shell [class~="text-red-200"],
.ui-shell [class~="text-red-300"],
.ui-shell [class~="text-red-400"],
.ui-shell [class~="text-rose-300"] { color: var(--danger); }
.ui-shell [class~="hover:text-white"]:hover,
.ui-shell [class~="hover:text-zinc-300"]:hover,
.ui-shell [class~="text-slate-200"],
.ui-shell [class~="text-slate-300"],
.ui-shell [class~="text-white"],
.ui-shell [class~="text-zinc-100"],
.ui-shell [class~="text-zinc-200"],
.ui-shell [class~="text-zinc-300"],
.ui-shell [class~="text-zinc-950"] { color: var(--ink); }
.ui-shell [class~="hover:text-zinc-400"]:hover,
.ui-shell [class~="text-slate-400"],
.ui-shell [class~="text-slate-500"],
.ui-shell [class~="text-slate-600"],
.ui-shell [class~="text-zinc-400"],
.ui-shell [class~="text-zinc-500"],
.ui-shell [class~="text-zinc-600"] { color: var(--muted); }
.ui-shell [class~="hover:to-amber-500"]:hover,
.ui-shell [class~="to-amber-600"] { --tw-gradient-to: var(--warning-soft); }
.ui-shell [class~="ring-emerald-400"],
.ui-shell [class~="ring-emerald-500/30"],
.ui-shell [class~="ring-emerald-500/40"] { --tw-ring-color: var(--success-line); }
.ui-shell [class~="ring-red-500/30"] { --tw-ring-color: var(--danger-line); }
.ui-shell [class~="text-[#5865F2]"],
.ui-shell [class~="text-blue-200"],
.ui-shell [class~="text-blue-300"],
.ui-shell [class~="text-blue-400"],
.ui-shell [class~="text-cyan-400"],
.ui-shell [class~="text-indigo-300"],
.ui-shell [class~="text-indigo-400"],
.ui-shell [class~="text-indigo-600"],
.ui-shell [class~="text-purple-300"],
.ui-shell [class~="text-purple-400"],
.ui-shell [class~="text-violet-300"],
.ui-shell [class~="text-violet-400"] { color: var(--accent); }
.ui-shell [class~="text-emerald-200"],
.ui-shell [class~="text-emerald-300"],
.ui-shell [class~="text-emerald-400"],
.ui-shell [class~="text-emerald-500"] { color: var(--success); }
.ui-shell [class~="to-dark-card"],
.ui-shell [class~="to-zinc-900"] { --tw-gradient-to: var(--surface); }
.ui-shell [class~="to-indigo-500/20"] { --tw-gradient-to: var(--accent-soft); }

/* Primary actions share one color; statuses retain their semantic palettes. */
.ui-shell :is(button, a):is(.bg-white, .bg-zinc-100, .bg-emerald-600, .bg-indigo-600, .bg-blue-600, .bg-amber-500, [href="/api/auth/login"], #btn-join-voice, #btn-save-ai, #btn-refresh),
.ui-shell :is(button, a).ui-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ui-shell :is(button, a):is(.bg-white, .bg-zinc-100, .bg-emerald-600, .bg-indigo-600, .bg-blue-600, .bg-amber-500, [href="/api/auth/login"], #btn-join-voice, #btn-save-ai, #btn-refresh) :is(span, svg),
.ui-shell :is(button, a).ui-primary :is(span, svg) { color: var(--on-accent); }
.ui-shell :is(button, a):is(.bg-white, .bg-zinc-100, .bg-emerald-600, .bg-indigo-600, .bg-blue-600, .bg-amber-500, [href="/api/auth/login"], #btn-join-voice, #btn-save-ai, #btn-refresh):hover { background: var(--accent-hover); }
.ui-shell :is(button, a):is(.bg-red-600, .bg-red-500) { background: var(--danger-solid); color: #fff; }
.ui-shell :is(button, a):is(.bg-red-600, .bg-red-500) :is(span, svg) { color: #fff; }
.ui-shell :is(.bg-emerald-500, .bg-green-500):not(button):not(a) { background-color: var(--success-solid); }
.ui-shell [class*="bg-gradient-"] { background-image: none; }
/* Keep headers and dense data headings distinct from page backgrounds. */
.ui-shell > header[class] { background: var(--surface); }
.ui-shell th { white-space: nowrap; overflow-wrap: normal; }
.ui-shell #events-table-body td:nth-child(-n+6) { white-space: nowrap; overflow-wrap: normal; }
.ui-shell .overflow-x-auto > table { min-width: 640px; }
.ui-shell .dashboard-activity .overflow-x-auto > table { min-width: 1120px; }
/* Custom switches use the same action color and expose keyboard focus. */
.ui-shell .peer:checked ~ :is([class~="peer-checked:bg-zinc-200"], [class~="peer-checked:bg-indigo-600"], [class~="peer-checked:bg-emerald-500"]) { background-color: var(--accent); }
.ui-shell .peer:checked ~ [class~="peer-checked:after:border-white"]::after { background: var(--on-accent); border-color: var(--on-accent); }
.ui-shell .peer:focus-visible ~ div { outline: 2px solid var(--accent); outline-offset: 3px; }
.ui-shell .group:hover [class~="group-hover:text-white"] { color: var(--ink); }
.ui-shell .group:hover [class~="group-hover:bg-white"] { background-color: var(--accent); }