/* Dual-theme visual layer. The original Aurora palette remains the dark theme. */
html {
  background: var(--bg);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* Theme switch ------------------------------------------------------------ */
.theme-toggle {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px 3px 4px;
  color: var(--text-soft);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: visible;
}
.theme-toggle:hover {
  border-color: var(--line-bright);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15), inset 0 1px rgba(255, 255, 255, .08);
}
.theme-toggle:disabled {
  cursor: wait;
}
.theme-toggle-track {
  width: 54px;
  height: 27px;
  position: relative;
  display: block;
  flex: none;
  border: 1px solid rgba(147, 160, 224, .18);
  border-radius: 999px;
  background: linear-gradient(135deg, #2b3154, #14182d);
  box-shadow: inset 0 3px 9px rgba(0, 0, 0, .28);
  overflow: hidden;
}
.theme-thumb {
  position: absolute;
  z-index: 4;
  width: 21px;
  height: 21px;
  left: 3px;
  top: 2px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fffef5, #ffd063 58%, #ff9e43);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .28), 0 0 13px rgba(255, 191, 66, .55), inset 0 1px rgba(255,255,255,.8);
  transition: transform .55s var(--ease-out), background .45s, box-shadow .45s;
}
.theme-sun,
.theme-moon {
  position: absolute;
  z-index: 2;
  width: 13px;
  height: 13px;
  top: 6px;
  opacity: .48;
  transition: opacity .35s, transform .55s var(--ease-out);
}
.theme-sun { left: 7px; }
.theme-moon { right: 6px; }
.theme-sun i {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #ffca52;
  box-shadow: 0 -6px 0 -2px #ffca52, 0 6px 0 -2px #ffca52, 6px 0 0 -2px #ffca52, -6px 0 0 -2px #ffca52;
}
.theme-moon i {
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: #dce3ff;
}
.theme-moon b {
  position: absolute;
  width: 11px;
  height: 11px;
  left: -2px;
  top: -2px;
  border-radius: 50%;
  background: #202641;
}
.theme-label {
  min-width: 48px;
  text-align: left;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}
html[data-theme="dark"] .theme-thumb { transform: translateX(26px); background: linear-gradient(145deg, #fbfcff, #c6d0ff 58%, #8e9be8); box-shadow: 0 3px 9px rgba(0,0,0,.32), 0 0 14px rgba(153,169,255,.42), inset 0 1px rgba(255,255,255,.85); }
html[data-theme="dark"] .theme-sun { opacity: .22; transform: rotate(-50deg) scale(.78); }
html[data-theme="dark"] .theme-moon { opacity: .9; transform: rotate(12deg); }
html[data-theme="light"] .theme-track { background: #fff; }
html[data-theme="light"] .theme-sun { opacity: .92; transform: rotate(38deg); }
html[data-theme="light"] .theme-moon { opacity: .38; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .55s;
  animation-timing-function: var(--ease-out);
}
::view-transition-old(root) { animation-name: themeFadeOut; }
::view-transition-new(root) { animation-name: themeReveal; }
html.theme-changing body { animation: themeBodyPulse .6s var(--ease-out); }

/* Light theme ------------------------------------------------------------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7fbff;
  --bg-deep: #eaf5ff;
  --surface: rgba(255, 255, 255, .72);
  --surface-strong: rgba(255, 255, 255, .94);
  --surface-soft: rgba(49, 116, 198, .055);
  --text: #17233f;
  --text-soft: #465875;
  --muted: #7585a3;
  --line: rgba(61, 105, 164, .16);
  --line-bright: rgba(62, 121, 203, .31);
  --primary: #4d72f5;
  --primary-2: #8b5cf6;
  --cyan: #1bb4df;
  --cloudflare: #ef7c18;
  --success: #13ad72;
  --warning: #eda72c;
  --danger: #e94e68;
  --shadow-card: 0 28px 80px rgba(58, 92, 145, .13), 0 7px 25px rgba(74, 112, 167, .07);
  --shadow-glow: 0 0 80px rgba(73, 125, 246, .12);
}
html[data-theme="light"] body {
  color: var(--text);
  background: var(--bg);
}
html[data-theme="light"] ::selection {
  color: #fff;
  background: rgba(77, 114, 245, .62);
}

html[data-theme="light"] .ambient {
  background:
    radial-gradient(circle at 9% 7%, rgba(255, 221, 116, .43), transparent 25%),
    radial-gradient(circle at 85% 11%, rgba(152, 201, 255, .44), transparent 32%),
    radial-gradient(circle at 52% 56%, rgba(196, 178, 255, .18), transparent 35%),
    linear-gradient(180deg, #f4fbff 0%, #f9fcff 43%, #f5f9ff 100%);
}
html[data-theme="light"] .ambient::before {
  background: linear-gradient(90deg, rgba(76, 131, 194, .055) 1px, transparent 1px), linear-gradient(rgba(76, 131, 194, .055) 1px, transparent 1px);
  background-size: 70px 70px;
  opacity: .78;
}
html[data-theme="light"] .aurora {
  mix-blend-mode: multiply;
  filter: blur(110px);
  opacity: .24;
}
html[data-theme="light"] .aurora-one { background: rgba(70, 152, 255, .58); }
html[data-theme="light"] .aurora-two { background: rgba(255, 181, 84, .46); }
html[data-theme="light"] .aurora-three { background: rgba(153, 106, 255, .32); }
html[data-theme="light"] .grid-glow { background: radial-gradient(circle at 50% 32%, rgba(74, 132, 245, .11), transparent 40%); }
html[data-theme="light"] .noise { opacity: .022; mix-blend-mode: multiply; }
html[data-theme="light"] .particles i { background: #6e9ce8; box-shadow: 0 0 12px rgba(78, 133, 226, .58); }

html[data-theme="light"] .topbar {
  border-bottom-color: rgba(59, 101, 157, .13);
}
html[data-theme="light"] .brand-core {
  background: linear-gradient(135deg, #fffef5, #ffd46b 35%, #5b93ff 72%, #9a63ff);
  box-shadow: 0 0 25px rgba(80, 135, 245, .45), 0 0 12px rgba(255, 188, 68, .52);
}
html[data-theme="light"] .brand-orbit { border-color: rgba(73, 117, 221, .48); }
html[data-theme="light"] .brand-copy small { color: #7484a1; }
html[data-theme="light"] .system-pill,
html[data-theme="light"] .version-pill,
html[data-theme="light"] .theme-toggle {
  color: #51617e;
  border-color: rgba(65, 111, 169, .16);
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 8px 24px rgba(71, 106, 157, .07), inset 0 1px rgba(255,255,255,.95);
}
html[data-theme="light"] .version-pill { color: #71809d; }
html[data-theme="light"] .theme-toggle-track {
  border-color: rgba(78, 125, 180, .16);
  background: linear-gradient(135deg, #dff3ff, #fff4c8);
  box-shadow: inset 0 2px 7px rgba(75, 119, 170, .12);
}
html[data-theme="light"] .theme-moon b { background: #dff0fb; }

html[data-theme="light"] .eyebrow,
html[data-theme="light"] .section-kicker { color: #667a9e; }
html[data-theme="light"] h1 { color: #14223f; text-shadow: 0 5px 25px rgba(64, 96, 145, .06); }
html[data-theme="light"] h1 span {
  background-image: linear-gradient(90deg, #3260d9 0%, #4a86f8 30%, #8b61ee 64%, #f08b4f 100%);
  text-shadow: 0 12px 45px rgba(83, 109, 226, .15);
}
html[data-theme="light"] .summary { color: #50617f; }
html[data-theme="light"] .feature-row > span {
  color: #536481;
  border-color: rgba(72, 115, 171, .15);
  background: rgba(255,255,255,.7);
  box-shadow: 0 8px 22px rgba(74, 105, 152, .055), inset 0 1px rgba(255,255,255,.96);
}
html[data-theme="light"] .feature-row > span:hover {
  color: #27446f;
  border-color: rgba(71, 119, 210, .34);
  background: rgba(241, 248, 255, .96);
  box-shadow: 0 15px 35px rgba(74, 107, 164, .11);
}
html[data-theme="light"] .shield-icon::before { border-color: #168fc8; }
html[data-theme="light"] .edge-icon::before { border-color: #7957da; box-shadow: inset 0 0 0 3px rgba(121,87,218,.1); }
html[data-theme="light"] .edge-icon::after { background: #7957da; }

html[data-theme="light"] .cloud-visual {
  border-color: rgba(80, 122, 177, .17);
  background:
    radial-gradient(circle at 66% 12%, rgba(255, 223, 131, .35), transparent 25%),
    linear-gradient(145deg, rgba(255,255,255,.83), rgba(228,243,255,.66));
  box-shadow: inset 0 1px rgba(255,255,255,.96), 0 35px 90px rgba(73, 105, 151, .14), 0 0 100px rgba(73, 131, 236, .1);
}
html[data-theme="light"] .visual-glow { background: radial-gradient(circle, rgba(91, 143, 255, .28), rgba(163, 112, 255, .09) 46%, transparent 72%); }
html[data-theme="light"] .visual-grid { background: linear-gradient(rgba(82, 128, 185, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(82, 128, 185, .075) 1px, transparent 1px); }
html[data-theme="light"] .orbit-ring { border-color: rgba(83, 119, 207, .25); }
html[data-theme="light"] .orbit-ring::after { background: #567eed; box-shadow: 0 0 17px rgba(70, 111, 236, .7); }
html[data-theme="light"] .core-node {
  border-color: rgba(89, 123, 216, .34);
  background: radial-gradient(circle at 34% 22%, rgba(255,255,255,.98), rgba(211,227,255,.96) 38%, rgba(160,184,249,.92) 72%, rgba(120,104,222,.94));
  box-shadow: inset 0 0 32px rgba(255,255,255,.74), 0 18px 45px rgba(73, 101, 196, .22), 0 0 46px rgba(101, 111, 255, .18);
}
html[data-theme="light"] .core-node::before { border-color: rgba(94, 126, 220, .2); }
html[data-theme="light"] .core-halo { border-color: rgba(103, 128, 208, .28); }
html[data-theme="light"] .cloud-symbol i { background: linear-gradient(145deg, #fff, #c5d4ff 50%, #6e84ef); }
html[data-theme="light"] .core-node strong { color: #253b78; }
html[data-theme="light"] .core-node small { color: #5f6f9d; }
html[data-theme="light"] .flow-path { background: linear-gradient(90deg, rgba(74, 111, 233, .8), rgba(74,111,233,.06)); }
html[data-theme="light"] .flow-path b { background: #fff; box-shadow: 0 0 12px #5279ed, 0 0 4px #5279ed; }
html[data-theme="light"] .satellite {
  border-color: rgba(73, 111, 169, .17);
  background: rgba(255,255,255,.82);
  box-shadow: 0 15px 35px rgba(64, 94, 139, .12), inset 0 1px rgba(255,255,255,.98);
}
html[data-theme="light"] .satellite::before { background: linear-gradient(120deg, transparent 20%, rgba(80, 123, 226, .24), rgba(255, 180, 89, .18), transparent 80%); }
html[data-theme="light"] .node-icon { color: #4d64a9; background: rgba(74, 110, 223, .095); }
html[data-theme="light"] .satellite small,
html[data-theme="light"] .visual-status { color: #70819f; }

html[data-theme="light"] .glass-panel,
html[data-theme="light"] .panel {
  border-color: rgba(64, 105, 161, .15);
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(246,250,255,.7));
  box-shadow: var(--shadow-card), inset 0 1px rgba(255,255,255,.98);
  backdrop-filter: blur(28px) saturate(130%);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
}
html[data-theme="light"] .glow-card::before {
  background: radial-gradient(420px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(71, 125, 244, .34), rgba(255, 186, 76, .17), transparent 46%);
}
html[data-theme="light"] .panel-aura { background: rgba(94, 120, 255, .13); }
html[data-theme="light"] .login-story::after {
  border-color: rgba(85, 123, 220, .16);
  box-shadow: 0 0 0 28px rgba(73, 117, 230, .026), 0 0 0 56px rgba(255, 183, 72, .025);
}
html[data-theme="light"] .login-story > p { color: #657590; }
html[data-theme="light"] .security-list > div {
  border-color: rgba(69, 108, 160, .1);
  background: rgba(245, 250, 255, .58);
}
html[data-theme="light"] .security-list > div:hover {
  border-color: rgba(70, 119, 211, .25);
  background: rgba(235, 245, 255, .86);
  box-shadow: 0 9px 24px rgba(77, 111, 163, .07);
}
html[data-theme="light"] .security-index { color: #4f6ee8; }
html[data-theme="light"] .trust-head { color: #667895; }
html[data-theme="light"] .trust-track { background: rgba(69, 110, 164, .1); }
html[data-theme="light"] .lock-badge {
  border-color: rgba(83, 118, 213, .2);
  background: rgba(82, 111, 231, .075);
  box-shadow: inset 0 0 20px rgba(82,111,231,.06);
}
html[data-theme="light"] .lock-badge span,
html[data-theme="light"] .lock-badge span::before { border-color: #526ac1; }

html[data-theme="light"] .field-label { color: #4e5f7d; }
html[data-theme="light"] .input-shell input,
html[data-theme="light"] .input-shell select {
  color: #1d2d4b;
  border-color: rgba(65, 104, 157, .15);
  background: rgba(255,255,255,.75);
  box-shadow: inset 0 1px rgba(255,255,255,.98);
}
html[data-theme="light"] .input-shell input::placeholder { color: #9aa8bb; }
html[data-theme="light"] .input-shell input:focus,
html[data-theme="light"] .input-shell select:focus {
  border-color: rgba(71, 112, 229, .52);
  background: rgba(255,255,255,.96);
  box-shadow: 0 0 0 4px rgba(72,112,231,.08), 0 12px 28px rgba(67, 102, 157, .1);
}
html[data-theme="light"] .input-shell input:disabled,
html[data-theme="light"] .input-shell select:disabled { color: #8997ac; background: rgba(234,241,248,.72); }
html[data-theme="light"] .select-shell::after { color: #637596; }
html[data-theme="light"] .select-shell:focus-within::after { color: #506de1; }
html[data-theme="light"] .email-icon::before,
html[data-theme="light"] .key-icon::before,
html[data-theme="light"] .globe-icon::before,
html[data-theme="light"] .link-icon::before,
html[data-theme="light"] .link-icon::after { border-color: #7183a7; }
html[data-theme="light"] .email-icon::after { border-bottom-color: #7183a7; }
html[data-theme="light"] .key-icon::after,
html[data-theme="light"] .globe-icon::after { background: #7183a7; box-shadow: 4px 2px 0 -.2px #7183a7; }
html[data-theme="light"] .login-safety { color: #6d7d98; }

html[data-theme="light"] .secondary {
  color: #526786;
  border-color: rgba(68, 107, 161, .16);
  background: rgba(240,247,255,.78);
  box-shadow: inset 0 1px rgba(255,255,255,.95);
}
html[data-theme="light"] .secondary:hover {
  color: #29436b;
  border-color: rgba(66, 113, 207, .34);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 28px rgba(63, 98, 153, .12);
}
html[data-theme="light"] .status-result {
  color: #657590;
  border-color: rgba(65, 105, 159, .13);
  background: rgba(245,249,254,.72);
}
html[data-theme="light"] .result-orb { background: #8b9aaf; box-shadow: 0 0 0 5px rgba(109,127,151,.08); }
html[data-theme="light"] .result.success { color: #14734f; border-color: rgba(19,173,114,.2); background: rgba(19,173,114,.065); }
html[data-theme="light"] .result.error { color: #b7354b; border-color: rgba(233,78,104,.2); background: rgba(233,78,104,.06); }

html[data-theme="light"] .sidebar::before { background: rgba(75, 112, 235, .11); }
html[data-theme="light"] .sidebar-profile { border-bottom-color: rgba(62, 101, 153, .1); }
html[data-theme="light"] .profile-orb { border-color: rgba(78, 112, 211, .18); background: linear-gradient(145deg, rgba(73,112,235,.12), rgba(154,92,246,.08)); }
html[data-theme="light"] .sidebar-profile small { color: #72819c; }
html[data-theme="light"] .side-nav a { color: #657593; }
html[data-theme="light"] .side-nav a > span { color: #9aa7b9; }
html[data-theme="light"] .side-nav a:hover,
html[data-theme="light"] .side-nav a.active {
  color: #29466f;
  border-color: rgba(67, 112, 207, .17);
  background: linear-gradient(90deg, rgba(76, 119, 238, .11), rgba(255, 187, 83, .04));
}
html[data-theme="light"] .deploy-icon::before,
html[data-theme="light"] .deploy-icon::after { border-color: #667ba9; }
html[data-theme="light"] .sidebar-network { border-color: rgba(66, 104, 155, .1); background: rgba(244,249,255,.62); }
html[data-theme="light"] .sidebar-network small { color: #73819a; }
html[data-theme="light"] .workspace-welcome p { color: #697994; }
html[data-theme="light"] .session-card { border-color: rgba(62, 105, 162, .14); background: rgba(255,255,255,.63); box-shadow: 0 9px 25px rgba(68,101,148,.06); }
html[data-theme="light"] .session-card small { color: #78869c; }
html[data-theme="light"] .session-card strong { color: #384f70; }
html[data-theme="light"] .live-badge { color: #147b55; border-color: rgba(19,173,114,.19); background: rgba(19,173,114,.065); }

html[data-theme="light"] .progress-line { background: rgba(69, 109, 161, .13); }
html[data-theme="light"] .progress-step { color: #8a98ac; }
html[data-theme="light"] .progress-step i { border-color: rgba(64, 104, 158, .15); background: rgba(244,249,255,.9); box-shadow: inset 0 1px rgba(255,255,255,.96); }
html[data-theme="light"] .progress-step.active,
html[data-theme="light"] .progress-step.done { color: #3d5272; }
html[data-theme="light"] .progress-step.done i { color: #fff; }
html[data-theme="light"] .toggle-card { border-color: rgba(65, 105, 158, .12); background: rgba(245,250,255,.6); }
html[data-theme="light"] .toggle-card:hover { border-color: rgba(69, 116, 207, .24); background: rgba(237,246,255,.88); }
html[data-theme="light"] .toggle-copy small { color: #71819b; }
html[data-theme="light"] .switch i { border-color: rgba(65, 104, 159, .18); background: #dbe5ef; }
html[data-theme="light"] .switch i::after { background: #fff; box-shadow: 0 2px 7px rgba(53,82,120,.25); }

html[data-theme="light"] .deployment-preview {
  border-color: rgba(63, 104, 159, .13);
  background: radial-gradient(circle at 50% 35%, rgba(92, 130, 255, .16), transparent 39%), linear-gradient(160deg, rgba(255,255,255,.88), rgba(230,242,255,.72));
  box-shadow: inset 0 1px rgba(255,255,255,.97), 0 15px 35px rgba(69,103,151,.08);
}
html[data-theme="light"] .preview-head { color: #6e7e99; }
html[data-theme="light"] .preview-ring { border-color: rgba(69, 105, 195, .22); }
html[data-theme="light"] .preview-dot { background: #627fec; box-shadow: 0 0 8px rgba(81,111,231,.7); }
html[data-theme="light"] .preview-data { border-color: rgba(65, 103, 155, .1); background: rgba(255,255,255,.48); }
html[data-theme="light"] .preview-data > div { border-bottom-color: rgba(65, 103, 155, .08); }
html[data-theme="light"] .preview-data span { color: #74839b; }
html[data-theme="light"] .preview-data strong { color: #3e5272; }
html[data-theme="light"] .preview-scan { background: linear-gradient(transparent, rgba(73, 119, 238, .06), transparent); }

html[data-theme="light"] .summary-icon { border-color: rgba(67, 106, 159, .15); background: rgba(76, 113, 229, .065); }
html[data-theme="light"] .summary-icon i,
html[data-theme="light"] .summary-icon i::before { border-color: #6b7fa9; }
html[data-theme="light"] .advanced-panel summary small { color: #71809a; }
html[data-theme="light"] .summary-arrow { color: #71809e; }
html[data-theme="light"] .advanced-content { border-top-color: rgba(63, 102, 154, .1); }
html[data-theme="light"] .config-section { border-color: rgba(64, 104, 157, .09); background: rgba(247,251,255,.6); }
html[data-theme="light"] .config-section:hover { border-color: rgba(68, 113, 204, .18); background: rgba(241,248,255,.88); }
html[data-theme="light"] .config-title small { color: #71809a; }
html[data-theme="light"] .config-icon { border-color: rgba(66, 105, 159, .13); background: rgba(75, 112, 226, .065); }
html[data-theme="light"] .resource-config-icon::before {
  border-color: #6c7fa8;
  box-shadow: 0 5px 0 -1px #f6faff, 0 5px 0 0 #6c7fa8, 0 10px 0 -1px #f6faff, 0 10px 0 0 #6c7fa8;
}
html[data-theme="light"] .project-config-icon::before { color: #6c7fa8; }
html[data-theme="light"] .form-note { color: #55708e; border-color: rgba(27,180,223,.15); background: rgba(27,180,223,.055); }
html[data-theme="light"] .action-row p { color: #71809a; }

/* A dark terminal remains intentionally high-contrast inside the light UI. */
html[data-theme="light"] .logs-panel {
  border-color: rgba(54, 79, 119, .2);
  background: linear-gradient(145deg, rgba(24,31,54,.98), rgba(10,15,31,.98));
  box-shadow: 0 28px 70px rgba(47, 73, 112, .18), inset 0 1px rgba(255,255,255,.06);
  color: #f7f8ff;
}
html[data-theme="light"] .logs-panel .section-kicker { color: #8d9ac1; }
html[data-theme="light"] .logs-panel .secondary { color: #b5bee0; border-color: rgba(147,161,220,.14); background: rgba(108,114,255,.06); }
html[data-theme="light"] .logs-panel .secondary:hover { color: #fff; border-color: rgba(132,147,255,.32); background: rgba(108,114,255,.12); }
html[data-theme="light"] .footer { color: #8290a7; }

@media (max-width: 780px) {
  .theme-label { display: none; }
  .theme-toggle { padding-right: 4px; }
}
@media (max-width: 520px) {
  .theme-toggle-track { width: 50px; }
  html[data-theme="dark"] .theme-thumb { transform: translateX(22px); }
  .topbar-actions { gap: 7px; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="light"] .glass-panel,
  html[data-theme="light"] .panel { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html[data-theme="light"] .logs-panel { background: #11172b; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  html.theme-changing body { animation: none !important; }
}

@keyframes themeFadeOut {
  to { opacity: .25; filter: blur(3px) saturate(.8); }
}
@keyframes themeReveal {
  from { opacity: .2; filter: blur(5px) saturate(.7); transform: scale(1.012); }
  to { opacity: 1; filter: none; transform: none; }
}
@keyframes themeBodyPulse {
  0% { opacity: .72; filter: saturate(.72); }
  100% { opacity: 1; filter: none; }
}