:root,
[data-theme="aurora-dark"] {
  color-scheme: dark;
  --bg: oklch(9% 0.02 265);
  --surface: oklch(14.5% 0.024 265 / 0.82);
  --surface2: oklch(18% 0.026 265 / 0.86);
  --surface3: oklch(22% 0.028 265 / 0.92);
  --line: oklch(25% 0.024 265 / 0.88);
  --line-strong: oklch(34% 0.032 260 / 0.92);
  --text: oklch(98% 0.005 250);
  --text-soft: oklch(86% 0.012 250);
  --muted: oklch(63% 0.018 250);
  --muted-2: oklch(47% 0.018 250);
  --blue: oklch(74% 0.16 225);
  --violet: oklch(64% 0.2 260);
  --green: oklch(80% 0.16 155);
  --amber: oklch(82% 0.15 85);
  --red: oklch(72% 0.18 25);
  --blue-soft: oklch(64% 0.2 260 / 0.14);
  --green-soft: oklch(80% 0.16 155 / 0.12);
  --amber-soft: oklch(82% 0.15 85 / 0.12);
  --red-soft: oklch(72% 0.18 25 / 0.12);
  --app-background:
    radial-gradient(1100px 620px at 7% -8%, oklch(36% 0.17 260 / 0.36), transparent 61%),
    radial-gradient(900px 520px at 100% 2%, oklch(41% 0.14 225 / 0.25), transparent 64%),
    radial-gradient(780px 480px at 88% 100%, oklch(36% 0.16 285 / 0.22), transparent 62%),
    var(--bg);
  --sidebar-background: oklch(10.5% 0.022 265 / 0.83);
  --panel-background: linear-gradient(145deg, oklch(16% 0.027 265 / 0.9), oklch(12% 0.023 265 / 0.92));
  --field-background: oklch(11.5% 0.023 265 / 0.85);
  --shadow: 0 22px 62px -34px oklch(2% 0.02 260 / 0.92);
  --shadow-hover: 0 28px 74px -36px oklch(45% 0.2 260 / 0.38);
  --accent-gradient: linear-gradient(135deg, var(--blue), var(--violet));
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
}

[data-theme="aurora-light"] {
  color-scheme: light;
  --bg: oklch(98.5% 0.004 250);
  --surface: oklch(100% 0 0 / 0.82);
  --surface2: oklch(97.5% 0.005 250 / 0.9);
  --surface3: oklch(94.5% 0.008 250 / 0.92);
  --line: oklch(89% 0.01 250 / 0.9);
  --line-strong: oklch(80% 0.022 255 / 0.92);
  --text: oklch(20% 0.02 260);
  --text-soft: oklch(34% 0.02 260);
  --muted: oklch(53% 0.014 260);
  --muted-2: oklch(68% 0.012 260);
  --blue: oklch(58% 0.17 225);
  --violet: oklch(51% 0.2 260);
  --green: oklch(58% 0.16 155);
  --amber: oklch(62% 0.15 75);
  --red: oklch(58% 0.19 25);
  --blue-soft: oklch(58% 0.17 235 / 0.09);
  --green-soft: oklch(58% 0.16 155 / 0.1);
  --amber-soft: oklch(62% 0.15 75 / 0.1);
  --red-soft: oklch(58% 0.19 25 / 0.09);
  --app-background:
    radial-gradient(1100px 620px at 7% -8%, oklch(85% 0.1 260 / 0.34), transparent 61%),
    radial-gradient(900px 520px at 100% 2%, oklch(88% 0.09 225 / 0.3), transparent 64%),
    radial-gradient(780px 480px at 88% 100%, oklch(86% 0.1 285 / 0.24), transparent 62%),
    var(--bg);
  --sidebar-background: oklch(98.5% 0.004 250 / 0.82);
  --panel-background: linear-gradient(145deg, oklch(100% 0 0 / 0.88), oklch(97.5% 0.006 250 / 0.92));
  --field-background: oklch(99% 0.003 250 / 0.9);
  --shadow: 0 22px 62px -34px oklch(35% 0.08 260 / 0.35);
  --shadow-hover: 0 28px 74px -36px oklch(48% 0.17 255 / 0.3);
}

html { min-width: 320px; background: var(--bg); }
body {
  background: var(--app-background);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(circle, color-mix(in oklab, var(--blue) 20%, transparent) 0.65px, transparent 0.8px);
  background-size: 22px 22px;
  content: "";
  opacity: 0.2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 82%);
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
::selection { background: color-mix(in oklab, var(--blue) 32%, transparent); color: var(--text); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

.app-shell { position: relative; z-index: 1; grid-template-columns: 276px minmax(0, 1fr); }
.sidebar {
  gap: 18px;
  padding: 20px 16px;
  border-right-color: var(--line);
  background: var(--sidebar-background);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
}
.brand { min-height: 54px; padding: 7px 9px 13px; border-bottom: 1px solid var(--line); }
.brand strong { font-family: var(--font-display); font-size: 15px; font-weight: 650; letter-spacing: -0.015em; }
.brand small, .user-box small, .sidebar-foot small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid color-mix(in oklab, var(--blue) 45%, var(--line));
  border-radius: 13px;
  background: var(--accent-gradient);
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 30%, transparent), 0 12px 32px -14px color-mix(in oklab, var(--violet) 68%, transparent);
  color: white;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 760;
}
.sidebar nav, .tech-nav { gap: 4px; }
.tech-nav { padding-top: 16px; border-top-color: var(--line); }
.tech-nav > span, .nav-label {
  margin: 11px 11px 5px;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.14em;
}
.nav-item, .ghost, .nav-group-toggle {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.nav-item { padding: 9px 12px; }
.nav-item:hover, .nav-item:focus-visible, .nav-item.active,
.nav-group-toggle:hover, .nav-group-toggle:focus-visible, .nav-group-toggle.has-active-child {
  border-color: var(--line);
  background: color-mix(in oklab, var(--surface2) 88%, transparent);
  color: var(--text);
}
.nav-item.active {
  border-color: color-mix(in oklab, var(--blue) 30%, var(--line));
  background: linear-gradient(90deg, var(--blue-soft), color-mix(in oklab, var(--surface2) 82%, transparent));
  box-shadow: inset 2px 0 var(--blue);
}
.sidebar-foot {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  color: var(--text-soft);
  text-align: left;
}
.status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: var(--green);
  box-shadow: 0 0 0 5px var(--green-soft), 0 0 18px color-mix(in oklab, var(--green) 45%, transparent);
}

.main { width: min(100%, 1640px); margin: 0 auto; padding: 24px clamp(20px, 3.2vw, 48px) 54px; }
.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  min-height: 86px;
  margin: -24px calc(clamp(20px, 3.2vw, 48px) * -1) 22px;
  padding: 18px clamp(20px, 3.2vw, 48px) 13px;
  border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
}
.topbar h1 { margin: 3px 0 0; font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 42px); font-weight: 590; letter-spacing: -0.035em; line-height: 1.05; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.eyebrow { color: var(--blue); font-family: var(--font-mono); font-size: 10px; font-weight: 560; letter-spacing: 0.14em; }
.user-box { grid-template-columns: minmax(95px, 1fr) auto; padding: 8px 8px 8px 12px; border-color: var(--line); border-radius: 12px; background: color-mix(in oklab, var(--surface) 90%, transparent); box-shadow: var(--shadow); }
.user-box > span { overflow: hidden; font-size: 13px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.user-box .ghost { min-height: 34px; padding: 7px 10px; color: var(--blue); }
.theme-toggle {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  color: var(--text-soft);
  box-shadow: var(--shadow);
}
.theme-toggle:hover { border-color: var(--line-strong); color: var(--text); }
.theme-toggle__icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-family: var(--font-mono); font-size: 12px; }
.theme-toggle__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }

.view { animation: view-in 220ms ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.alert { border-color: var(--line); border-left-width: 3px; border-radius: 12px; background: color-mix(in oklab, var(--surface) 90%, transparent); color: var(--text-soft); font-size: 13px; box-shadow: var(--shadow); }
.alert.info { border-left-color: var(--blue); background: linear-gradient(90deg, var(--blue-soft), color-mix(in oklab, var(--surface) 88%, transparent)); }
.alert.warning { border-left-color: var(--amber); background: linear-gradient(90deg, var(--amber-soft), color-mix(in oklab, var(--surface) 88%, transparent)); }
.alert.danger { border-left-color: var(--red); background: linear-gradient(90deg, var(--red-soft), color-mix(in oklab, var(--surface) 88%, transparent)); }

.metric-grid { gap: 10px; }
.metric, .panel, .bot-card, .process-card, .report-card,
.channel-card, .scenario-card, .operations-map-card {
  border-color: var(--line);
  border-radius: 12px;
  background: var(--panel-background);
  box-shadow: var(--shadow);
}
.metric { position: relative; min-height: 134px; overflow: hidden; padding: 16px; }
.metric::after { position: absolute; right: -24px; bottom: -38px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, var(--blue-soft), transparent 68%); content: ""; }
.metric span { color: var(--muted); font-size: 12px; }
.metric strong { font-family: var(--font-mono); font-size: clamp(26px, 2.8vw, 36px); font-variant-numeric: tabular-nums; font-weight: 620; letter-spacing: -0.045em; }
.metric small { color: var(--muted-2); font-family: var(--font-mono); font-size: 9px; }
.two-col { gap: 12px; }
.panel { padding: clamp(18px, 2vw, 24px); }
.panel h2, .section-head h2, .panel h3 { color: var(--text); font-family: var(--font-display); font-weight: 590; letter-spacing: -0.025em; }
.section-head p { max-width: 760px; color: var(--muted); }
.card-grid, .channel-grid, .scenario-grid { gap: 12px; }
.bot-card { position: relative; overflow: hidden; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.bot-card::before { position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--accent-gradient); content: ""; opacity: 0; transition: opacity 160ms ease; }
.bot-card:hover, .bot-card:focus-visible, .operations-map-card:hover, .operations-map-card:focus-visible { border-color: color-mix(in oklab, var(--blue) 50%, var(--line)); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.bot-card:hover::before, .bot-card:focus-visible::before { opacity: 1; }
.bot-card p, .report-card p, .process-card p, .detail-panel p,
.channel-card > p, .scenario-card > p, .operations-map-card p { color: var(--muted); line-height: 1.55; }
.badge { border-color: var(--line); color: var(--muted); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.badge::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.badge.good { border-color: color-mix(in oklab, var(--green) 38%, var(--line)); color: var(--green); }
.badge.warn { border-color: color-mix(in oklab, var(--amber) 38%, var(--line)); color: var(--amber); }
.badge.bad { border-color: color-mix(in oklab, var(--red) 42%, var(--line)); color: var(--red); }
.badge.unknown { color: var(--muted); }

.filters label { color: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
select, input, textarea, .manual-form textarea { min-height: 42px; padding: 9px 11px; border-color: var(--line); border-radius: 10px; background: var(--field-background); color: var(--text); }
select:hover, input:hover, textarea:hover { border-color: var(--line-strong); }
select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); outline: none; }
.flow-node, .detail-block, .activity-card, .node-detail { border-color: var(--line); background: var(--surface2); }
.flow-arrow, .activity-card a { color: var(--blue); }
.table-wrap { border-color: var(--line); border-radius: 12px; background: color-mix(in oklab, var(--surface) 92%, transparent); box-shadow: var(--shadow); }
table { background: transparent; }
th, td { border-bottom-color: var(--line); }
th { background: color-mix(in oklab, var(--surface2) 94%, transparent); color: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; }
td { color: var(--text-soft); font-size: 13px; }
tbody tr:hover { background: var(--blue-soft); }
.source { color: var(--muted-2); font-family: var(--font-mono); font-size: 9px; }
.attention-item strong { font-family: var(--font-mono); font-size: 22px; letter-spacing: -0.04em; }
.primary { min-height: 44px; border: 1px solid color-mix(in oklab, var(--blue) 56%, var(--violet)); border-radius: 11px; background: var(--accent-gradient); box-shadow: inset 0 1px 0 color-mix(in oklab, white 28%, transparent), 0 14px 28px -16px color-mix(in oklab, var(--violet) 75%, transparent); }
.primary:hover { filter: saturate(1.08) brightness(1.04); transform: translateY(-1px); }

.platform-intro {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, color-mix(in oklab, var(--violet) 15%, var(--surface)), var(--panel-background));
}
.platform-intro::after { position: absolute; right: -100px; bottom: -160px; width: 380px; height: 380px; border: 1px solid color-mix(in oklab, var(--blue) 17%, transparent); border-radius: 50%; box-shadow: 0 0 0 46px color-mix(in oklab, var(--blue) 3%, transparent), 0 0 0 92px color-mix(in oklab, var(--violet) 3%, transparent); content: ""; pointer-events: none; }
.platform-intro > * { position: relative; z-index: 1; }
.platform-intro-copy h2 { max-width: 23ch; }
.platform-intro-meta { display: grid; gap: 14px; }
.platform-live { display: inline-flex; width: max-content; align-items: center; gap: 8px; padding: 5px 9px; border: 1px solid color-mix(in oklab, var(--green) 30%, var(--line)); border-radius: 999px; background: var(--green-soft); color: var(--green); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.platform-live::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; content: ""; }
.platform-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.platform-point { min-height: 64px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in oklab, var(--surface2) 82%, transparent); }
.platform-point strong, .platform-point small { display: block; }
.platform-point strong { font-family: var(--font-mono); font-size: 13px; }
.platform-point small { margin-top: 4px; color: var(--muted); font-size: 10px; }

/* Login composition */
.login-body { padding: clamp(18px, 4vw, 48px); }
.login-shell { position: relative; z-index: 1; display: grid; width: min(100%, 1060px); min-height: 620px; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in oklab, var(--surface) 74%, transparent); box-shadow: 0 40px 120px -46px color-mix(in oklab, var(--violet) 48%, black); -webkit-backdrop-filter: blur(26px) saturate(1.2); backdrop-filter: blur(26px) saturate(1.2); }
.login-aside { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(28px, 5vw, 58px); border-right: 1px solid var(--line); background: radial-gradient(520px 420px at 20% 12%, color-mix(in oklab, var(--violet) 33%, transparent), transparent 68%), radial-gradient(420px 360px at 95% 95%, color-mix(in oklab, var(--blue) 25%, transparent), transparent 70%); }
.login-aside::after { position: absolute; right: -120px; bottom: -150px; width: 420px; height: 420px; border: 1px solid color-mix(in oklab, var(--blue) 18%, transparent); border-radius: 50%; box-shadow: 0 0 0 54px color-mix(in oklab, var(--blue) 4%, transparent), 0 0 0 108px color-mix(in oklab, var(--violet) 3%, transparent); content: ""; }
.login-brand, .login-story, .login-trust { position: relative; z-index: 1; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand-copy strong, .login-brand-copy small { display: block; }
.login-brand-copy small { color: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.login-story h2 { max-width: 12ch; margin: 16px 0; font-family: var(--font-display); font-size: clamp(38px, 5.6vw, 68px); font-weight: 570; letter-spacing: -0.055em; line-height: 0.98; }
.login-story h2 em { background: var(--accent-gradient); background-clip: text; color: transparent; font-style: normal; }
.login-story > p { max-width: 46ch; color: var(--text-soft); }
.login-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.login-trust div { padding-top: 10px; border-top: 1px solid var(--line); }
.login-trust strong, .login-trust small { display: block; }
.login-trust strong { font-family: var(--font-mono); font-size: 12px; }
.login-trust small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.login-card { display: flex; width: 100%; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 58px); border: 0; border-radius: 0; background: color-mix(in oklab, var(--surface) 78%, transparent); box-shadow: none; }
.login-card h1 { margin: 9px 0 10px; font-family: var(--font-display); font-size: 34px; font-weight: 590; letter-spacing: -0.035em; }
.login-card form { margin-top: 24px; }
.login-card label { color: var(--muted); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.security-note { color: var(--muted-2); }
.login-theme { position: absolute; z-index: 4; top: 18px; right: 18px; }

@media (max-width: 900px) {
  .login-shell { min-height: auto; grid-template-columns: 1fr; }
  .login-aside { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--line); }
  .login-story h2 { max-width: 16ch; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: relative; width: 100%; height: auto; padding: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar nav, .tech-nav { display: flex; overflow-x: auto; padding-bottom: 3px; }
  .nav-item, .nav-group-toggle { min-width: max-content; }
  .main { padding: 20px 15px 42px; }
  .topbar { position: relative; min-height: auto; margin: -20px -15px 18px; padding: 17px 15px 13px; }
  .theme-toggle__label { display: none; }
  .platform-points { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .login-body { padding: 0; }
  .login-shell { min-height: 100vh; border: 0; border-radius: 0; }
  .login-aside { min-height: 315px; padding: 26px 22px; }
  .login-story h2 { margin: 12px 0; font-size: 40px; }
  .login-trust { display: none; }
  .login-card { padding: 34px 22px 46px; }
  .login-theme { top: 14px; right: 14px; }
}
@media (max-width: 460px) {
  .topbar-actions { margin-top: 12px; justify-content: space-between; }
  .user-box { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Four user-selectable color presets. The default remains aurora-dark. */
[data-theme="aurora-cold"] {
  color-scheme: dark;
  --bg: oklch(11.5% 0.038 225);
  --surface: oklch(16% 0.043 225 / 0.84);
  --surface2: oklch(19.5% 0.046 225 / 0.88);
  --surface3: oklch(24% 0.05 225 / 0.94);
  --line: oklch(30% 0.05 220 / 0.86);
  --line-strong: oklch(42% 0.065 215 / 0.92);
  --text: oklch(98% 0.01 210);
  --text-soft: oklch(87% 0.02 210);
  --muted: oklch(69% 0.035 215);
  --muted-2: oklch(52% 0.035 220);
  --blue: oklch(77% 0.14 210);
  --violet: oklch(69% 0.13 245);
  --green: oklch(80% 0.15 165);
  --amber: oklch(84% 0.14 85);
  --red: oklch(73% 0.17 25);
  --blue-soft: oklch(74% 0.14 210 / 0.14);
  --green-soft: oklch(80% 0.15 165 / 0.12);
  --amber-soft: oklch(84% 0.14 85 / 0.12);
  --red-soft: oklch(73% 0.17 25 / 0.12);
  --app-background:
    radial-gradient(1100px 620px at 7% -8%, oklch(44% 0.16 215 / 0.34), transparent 61%),
    radial-gradient(900px 520px at 100% 2%, oklch(42% 0.13 190 / 0.25), transparent 64%),
    radial-gradient(780px 480px at 88% 100%, oklch(37% 0.13 245 / 0.2), transparent 62%),
    var(--bg);
  --sidebar-background: oklch(12.5% 0.04 225 / 0.86);
  --panel-background: linear-gradient(145deg, oklch(18% 0.047 225 / 0.92), oklch(13.5% 0.04 225 / 0.94));
  --field-background: oklch(13% 0.04 225 / 0.88);
  --shadow: 0 22px 62px -34px oklch(2% 0.04 220 / 0.94);
  --shadow-hover: 0 28px 74px -36px oklch(55% 0.16 210 / 0.4);
  --accent-gradient: linear-gradient(135deg, var(--blue), var(--violet));
}

[data-theme="aurora-warm"] {
  color-scheme: light;
  --bg: oklch(96.5% 0.018 72);
  --surface: oklch(99% 0.012 75 / 0.86);
  --surface2: oklch(94.5% 0.025 72 / 0.92);
  --surface3: oklch(91% 0.034 68 / 0.94);
  --line: oklch(83% 0.038 65 / 0.9);
  --line-strong: oklch(72% 0.058 58 / 0.94);
  --text: oklch(24% 0.035 45);
  --text-soft: oklch(36% 0.04 48);
  --muted: oklch(52% 0.045 52);
  --muted-2: oklch(67% 0.04 58);
  --blue: oklch(58% 0.16 42);
  --violet: oklch(52% 0.16 22);
  --green: oklch(56% 0.13 145);
  --amber: oklch(61% 0.15 70);
  --red: oklch(55% 0.18 25);
  --blue-soft: oklch(64% 0.14 48 / 0.11);
  --green-soft: oklch(56% 0.13 145 / 0.1);
  --amber-soft: oklch(61% 0.15 70 / 0.11);
  --red-soft: oklch(55% 0.18 25 / 0.09);
  --app-background:
    radial-gradient(1050px 610px at 7% -8%, oklch(83% 0.1 72 / 0.42), transparent 61%),
    radial-gradient(900px 520px at 100% 2%, oklch(88% 0.09 48 / 0.34), transparent 64%),
    radial-gradient(760px 470px at 88% 100%, oklch(84% 0.08 28 / 0.25), transparent 62%),
    var(--bg);
  --sidebar-background: oklch(97% 0.018 72 / 0.86);
  --panel-background: linear-gradient(145deg, oklch(99% 0.012 75 / 0.9), oklch(94% 0.026 69 / 0.94));
  --field-background: oklch(98% 0.014 74 / 0.92);
  --shadow: 0 22px 62px -34px oklch(38% 0.07 48 / 0.32);
  --shadow-hover: 0 28px 74px -36px oklch(52% 0.14 35 / 0.28);
  --accent-gradient: linear-gradient(135deg, var(--blue), var(--violet));
}

.sidebar-foot { margin-bottom: 60px; }
.theme-switcher {
  position: fixed;
  z-index: 90;
  bottom: 16px;
  left: 16px;
  font-family: var(--font-display);
}
.theme-trigger {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 8px 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  color: var(--text-soft);
  box-shadow: var(--shadow);
  cursor: pointer;
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
}
.theme-trigger:hover,
.theme-trigger[aria-expanded="true"] { border-color: var(--line-strong); color: var(--text); }
.theme-trigger__icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 9px;
  background: var(--accent-gradient);
  color: white;
  font-size: 12px;
  box-shadow: inset 0 1px color-mix(in oklab, white 32%, transparent);
}
.theme-trigger__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.theme-menu {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  display: grid;
  width: min(258px, calc(100vw - 32px));
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 15px;
  background: color-mix(in oklab, var(--surface) 96%, transparent);
  box-shadow: 0 24px 64px -28px color-mix(in oklab, var(--text) 28%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  backdrop-filter: blur(26px) saturate(1.2);
}
.theme-menu[hidden] { display: none; }
.theme-menu__title { margin: 1px 7px 5px; color: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; }
.theme-option {
  display: grid;
  min-height: 51px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-soft);
  text-align: left;
  cursor: pointer;
}
.theme-option:hover,
.theme-option:focus-visible { border-color: var(--line); background: var(--surface2); color: var(--text); }
.theme-option[aria-checked="true"] {
  border-color: color-mix(in oklab, var(--blue) 42%, var(--line));
  background: var(--blue-soft);
  color: var(--text);
}
.theme-option > span:last-child,
.theme-option strong,
.theme-option small { display: block; }
.theme-option strong { font-size: 12px; font-weight: 650; }
.theme-option small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.theme-swatch { width: 30px; height: 30px; border: 1px solid color-mix(in oklab, white 26%, var(--line)); border-radius: 9px; box-shadow: inset 0 1px color-mix(in oklab, white 36%, transparent); }
.theme-swatch--cold { background: linear-gradient(135deg, #0d3049, #47c6de); }
.theme-swatch--warm { background: linear-gradient(135deg, #f5e2bd, #c8653e); }
.theme-swatch--light { background: linear-gradient(135deg, #ffffff, #b8c9f5); }
.theme-swatch--dark { background: linear-gradient(135deg, #11131f, #7158df); }

@media (max-width: 760px) {
  .theme-switcher { bottom: 12px; left: 12px; }
  .theme-trigger { padding-right: 9px; }
  .theme-trigger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}