:root {
  --bg: #020617;
  --bg2: #08111f;
  --surface: rgba(15, 23, 42, .78);
  --surface2: rgba(30, 41, 59, .74);
  --line: rgba(148, 163, 184, .22);
  --text: #e5e7eb;
  --muted: #94a3b8;
  --primary: #38bdf8;
  --secondary: #818cf8;
  --accent: #22c55e;
  --danger: #fb7185;
  --glow: rgba(56, 189, 248, .28);
}

html[data-theme="regulatory_ivory"] {
  --bg: #fbf7ef; --bg2: #f3eadc; --surface: rgba(255,255,255,.82); --surface2: rgba(243,234,220,.78);
  --line: rgba(100,116,139,.24); --text: #111827; --muted: #64748b; --primary: #1e3a8a; --secondary: #b45309; --accent: #334155; --glow: rgba(30,58,138,.20);
}
html[data-theme="arctic_precision"] {
  --bg: #f8fafc; --bg2: #e2e8f0; --surface: rgba(255,255,255,.84); --surface2: rgba(226,232,240,.78);
  --line: rgba(71,85,105,.22); --text: #0f172a; --muted: #475569; --primary: #2563eb; --secondary: #0891b2; --accent: #059669; --glow: rgba(37,99,235,.20);
}
html[data-theme="quantum_command"] {
  --bg: #020617; --bg2: #08111f; --surface: rgba(15,23,42,.78); --surface2: rgba(30,41,59,.74);
  --line: rgba(148,163,184,.22); --text: #e5e7eb; --muted: #94a3b8; --primary: #38bdf8; --secondary: #818cf8; --accent: #22c55e; --glow: rgba(56,189,248,.28);
}
html[data-theme="executive_carbon"] {
  --bg: #050505; --bg2: #18181b; --surface: rgba(24,24,27,.82); --surface2: rgba(39,39,42,.78);
  --line: rgba(161,161,170,.24); --text: #fafafa; --muted: #a1a1aa; --primary: #60a5fa; --secondary: #e5e7eb; --accent: #93c5fd; --glow: rgba(96,165,250,.25);
}
html[data-theme="aurora_intelligence"] {
  --bg: #03140f; --bg2: #064e3b; --surface: rgba(6,78,59,.78); --surface2: rgba(15,118,110,.66);
  --line: rgba(153,246,228,.22); --text: #ecfeff; --muted: #99f6e4; --primary: #2dd4bf; --secondary: #22c55e; --accent: #a3e635; --glow: rgba(45,212,191,.25);
}
html[data-theme="violet_graphite"] {
  --bg: #10051f; --bg2: #2e1065; --surface: rgba(46,16,101,.78); --surface2: rgba(88,28,135,.66);
  --line: rgba(196,181,253,.24); --text: #f5f3ff; --muted: #c4b5fd; --primary: #a78bfa; --secondary: #ec4899; --accent: #22d3ee; --glow: rgba(167,139,250,.25);
}
html[data-theme="solar_plasma"] {
  --bg: #1c0a00; --bg2: #431407; --surface: rgba(67,20,7,.80); --surface2: rgba(124,45,18,.68);
  --line: rgba(254,215,170,.24); --text: #fff7ed; --muted: #fed7aa; --primary: #f97316; --secondary: #f59e0b; --accent: #fb7185; --glow: rgba(249,115,22,.24);
}
html[data-theme="cybernetic_crimson"] {
  --bg: #111111; --bg2: #1f2937; --surface: rgba(31,41,55,.82); --surface2: rgba(55,65,81,.70);
  --line: rgba(209,213,219,.20); --text: #f9fafb; --muted: #d1d5db; --primary: #ef4444; --secondary: #f59e0b; --accent: #94a3b8; --glow: rgba(239,68,68,.24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 30%),
    radial-gradient(circle at 80% 12%, color-mix(in srgb, var(--secondary) 20%, transparent), transparent 28%),
    linear-gradient(135deg, var(--bg), var(--bg2));
  overflow-x: hidden;
}
.orbital-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 64%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 64%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}
.kx-topbar {
  position: sticky;
  top: 14px;
  z-index: 50;
  width: calc(100% - 28px);
  margin: 14px auto 0;
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(22px);
  box-shadow: 0 24px 90px rgba(0,0,0,.22);
}
.kx-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  min-width: 270px;
}
.kx-brand-mark {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 950;
  color: #fff;
  background: conic-gradient(from 180deg, var(--primary), var(--secondary), var(--accent), var(--primary));
  box-shadow: 0 0 34px var(--glow);
}
.kx-brand-text strong { display: block; letter-spacing: -.04em; font-size: 18px; }
.kx-brand-text small { display: block; color: var(--muted); font-size: 12px; max-width: 340px; }

.kx-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.kx-nav a,
.kx-actions a,
.kx-drop-trigger {
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}
.kx-nav a:hover,
.kx-nav a.active,
.kx-drop-trigger:hover {
  color: var(--text);
  border-color: var(--line);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.kx-dropdown { position: relative; }
.kx-drop-trigger { display: flex; gap: 6px; align-items: center; }
.kx-drop-panel {
  position: absolute;
  right: 0;
  top: 46px;
  width: 330px;
  display: none;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 96%, var(--bg));
  box-shadow: 0 26px 90px rgba(0,0,0,.35);
  backdrop-filter: blur(22px);
}
.kx-dropdown:hover .kx-drop-panel { display: grid; }
.kx-drop-panel a {
  border-radius: 14px;
  padding: 11px 12px;
}
.kx-drop-panel a.restricted {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.kx-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kx-actions select {
  max-width: 150px;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 12px;
  outline: none;
}
.kx-ghost {
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.kx-solid {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.kx-mobile {
  display: none;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 22px;
}

.kx-shell {
  width: min(1480px, calc(100% - 36px));
  margin: 26px auto 70px;
}
.kx-hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, .68fr);
  gap: 22px;
  min-height: 630px;
}
.kx-copy,
.kx-visual-card,
.kx-band,
.kx-card {
  border: 1px solid var(--line);
  border-radius: 36px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(24px);
  box-shadow: 0 26px 110px rgba(0,0,0,.22);
}
.kx-copy {
  padding: clamp(28px, 5vw, 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kx-kicker {
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  font-weight: 950;
}
.kx-copy h1 {
  margin: 18px 0;
  font-size: clamp(48px, 7vw, 104px);
  line-height: .88;
  letter-spacing: -.085em;
}
.kx-copy p {
  max-width: 850px;
  margin: 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.72;
}
.kx-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.kx-primary,
.kx-secondary {
  padding: 14px 18px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 900;
}
.kx-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 0 44px var(--glow);
}
.kx-secondary {
  color: var(--text);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface2) 72%, transparent);
}
.kx-visual-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
#pageCanvas {
  width: 100%;
  height: 100%;
  min-height: 470px;
  border-radius: 28px;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--primary) 16%, transparent), transparent 56%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface2) 72%, transparent), color-mix(in srgb, var(--bg) 86%, transparent));
}
.kx-visual-caption {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 34px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(18px);
}
.kx-visual-caption strong { display: block; margin-bottom: 6px; }
.kx-visual-caption span { display: block; color: var(--muted); line-height: 1.5; }

.kx-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.kx-card {
  min-height: 190px;
  padding: 22px;
  text-decoration: none;
  color: var(--text);
  transition: transform .18s ease, border-color .18s ease;
}
.kx-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 68%, var(--line));
}
.kx-card span {
  width: 42px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 14px;
  color: #fff;
  font-weight: 950;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.kx-card h3 {
  margin: 0 0 10px;
  letter-spacing: -.04em;
}
.kx-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.kx-band {
  margin-top: 20px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: 22px;
  align-items: center;
}
.kx-band h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 3vw, 46px);
  letter-spacing: -.06em;
}
.kx-band p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}
.kx-status {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.kx-status span {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  font-weight: 900;
}

.kx-mobile-panel {
  display: none;
  position: fixed;
  right: 18px;
  top: 104px;
  z-index: 60;
  width: min(340px, calc(100vw - 36px));
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  padding: 12px;
  box-shadow: 0 26px 90px rgba(0,0,0,.35);
}
.kx-mobile-panel.open { display: grid; gap: 6px; }
.kx-mobile-panel a {
  color: var(--text);
  text-decoration: none;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
}

@media (max-width: 1280px) {
  .kx-nav { display: none; }
  .kx-mobile { display: block; }
  .kx-hero { grid-template-columns: 1fr; }
  .kx-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .kx-topbar { flex-wrap: wrap; }
  .kx-brand { flex: 1; min-width: 220px; }
  .kx-actions { width: 100%; flex-wrap: wrap; }
  .kx-actions select { flex: 1; max-width: none; }
  .kx-shell { width: min(100% - 22px, 1480px); }
  .kx-copy h1 { font-size: 48px; }
  .kx-grid, .kx-band { grid-template-columns: 1fr; }
  .kx-status { grid-template-columns: 1fr 1fr; }
}