/* Theme and accent palettes. Page/component selectors do not belong here. */

.theme-aurora {
  color-scheme: dark;
  --bg: #08131c;
  --panel: rgba(16, 34, 45, 0.78);
  --panel-soft: rgba(255, 255, 255, 0.08);
  --text: #f4fbff;
  --muted: rgba(218, 231, 237, 0.72);
  --line: rgba(255, 255, 255, 0.22);
  --accent: #18a891;
  --accent-dark: #0d766b;
  --accent-soft: #dff8f3;
  --gold: #d7a84e;
  --sidebar-bg: #0a1b25;
  --sidebar-veil: rgba(24, 168, 145, 0.13);
  --sidebar-text: #f4fbff;
  --sidebar-muted: rgba(218, 231, 237, 0.72);
  --sidebar-line: rgba(255, 255, 255, 0.16);
  --sidebar-hover: rgba(24, 168, 145, 0.13);
  --sidebar-active: rgba(24, 168, 145, 0.22);
  --sidebar-user-bg: rgba(255, 255, 255, 0.07);
}

.theme-midnight {
  color-scheme: dark;
  --bg: #11151a;
  --panel: #1a2027;
  --panel-soft: #222a33;
  --text: #f2f4f5;
  --muted: #a8b0b8;
  --line: #343d46;
  --gold: #c5a66b;
  --shadow-lg: 0 2px 5px rgba(0, 0, 0, 0.22);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
  --sidebar-bg: #151a20;
  --sidebar-veil: transparent;
  --sidebar-text: #f2f4f5;
  --sidebar-muted: #a8b0b8;
  --sidebar-line: #303841;
  --sidebar-hover: #252d36;
  --sidebar-active: #293a3d;
  --sidebar-user-bg: #1e252d;
}

.theme-graphite {
  color-scheme: dark;
  --bg: #121311;
  --panel: rgba(33, 34, 31, 0.84);
  --panel-soft: rgba(255, 255, 255, 0.08);
  --text: #fffaf0;
  --muted: rgba(232, 225, 208, 0.72);
  --line: rgba(255, 248, 224, 0.18);
  --gold: #e0b85f;
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.34);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.18);
  --sidebar-bg: #1c1c18;
  --sidebar-veil: rgba(224, 184, 95, 0.12);
  --sidebar-text: #fffaf0;
  --sidebar-muted: rgba(232, 225, 208, 0.7);
  --sidebar-line: rgba(255, 248, 224, 0.14);
  --sidebar-hover: rgba(224, 184, 95, 0.12);
  --sidebar-active: rgba(224, 184, 95, 0.2);
  --sidebar-user-bg: rgba(255, 248, 224, 0.06);
}

.theme-copper {
  color-scheme: dark;
  --bg: #130c12;
  --panel: rgba(35, 22, 28, 0.86);
  --panel-soft: rgba(255, 255, 255, 0.075);
  --text: #fff7ef;
  --muted: rgba(239, 221, 207, 0.72);
  --line: rgba(255, 222, 190, 0.18);
  --gold: #d7964a;
  --shadow-lg: 0 24px 70px rgba(28, 12, 18, 0.34);
  --shadow-sm: 0 10px 28px rgba(28, 12, 18, 0.2);
  --sidebar-bg: #170f17;
  --sidebar-veil: rgba(217, 117, 74, 0.12);
  --sidebar-text: #fff7ef;
  --sidebar-muted: rgba(239, 221, 207, 0.7);
  --sidebar-line: rgba(255, 222, 190, 0.14);
  --sidebar-hover: rgba(217, 117, 74, 0.13);
  --sidebar-active: rgba(217, 117, 74, 0.22);
  --sidebar-user-bg: rgba(255, 239, 224, 0.06);
}

.theme-alpine {
  color-scheme: light;
  --bg: #eef5f7;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-soft: rgba(8, 33, 45, 0.055);
  --text: #16252d;
  --muted: rgba(51, 72, 82, 0.72);
  --line: rgba(30, 67, 82, 0.18);
  --gold: #b88a2f;
  --shadow-lg: 0 24px 70px rgba(50, 91, 108, 0.18);
  --shadow-sm: 0 10px 28px rgba(50, 91, 108, 0.09);
  --sidebar-bg: #e3eff3;
  --sidebar-veil: rgba(255, 255, 255, 0.74);
  --sidebar-text: #16252d;
  --sidebar-muted: rgba(51, 72, 82, 0.68);
  --sidebar-line: rgba(30, 67, 82, 0.16);
  --sidebar-hover: rgba(51, 120, 212, 0.12);
  --sidebar-active: rgba(51, 120, 212, 0.18);
  --sidebar-user-bg: rgba(255, 255, 255, 0.58);
}

.theme-porcelain {
  color-scheme: light;
  --bg: #f7f8f3;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-soft: rgba(26, 74, 63, 0.06);
  --text: #1f2d29;
  --muted: rgba(68, 83, 78, 0.72);
  --line: rgba(41, 93, 81, 0.17);
  --gold: #bd9143;
  --shadow-lg: 0 24px 70px rgba(80, 103, 96, 0.16);
  --shadow-sm: 0 10px 28px rgba(80, 103, 96, 0.08);
  --sidebar-bg: #eef5ed;
  --sidebar-veil: rgba(255, 255, 255, 0.7);
  --sidebar-text: #1f2d29;
  --sidebar-muted: rgba(68, 83, 78, 0.68);
  --sidebar-line: rgba(41, 93, 81, 0.16);
  --sidebar-hover: rgba(47, 157, 104, 0.12);
  --sidebar-active: rgba(47, 157, 104, 0.18);
  --sidebar-user-bg: rgba(255, 255, 255, 0.6);
}

.theme-sunrise {
  color-scheme: light;
  --bg: #f8f1ea;
  --panel: rgba(255, 252, 247, 0.9);
  --panel-soft: rgba(135, 74, 32, 0.06);
  --text: #2b211b;
  --muted: rgba(86, 69, 57, 0.72);
  --line: rgba(132, 85, 45, 0.18);
  --gold: #c68c38;
  --shadow-lg: 0 24px 70px rgba(116, 82, 54, 0.16);
  --shadow-sm: 0 10px 28px rgba(116, 82, 54, 0.08);
  --sidebar-bg: #f3e5d8;
  --sidebar-veil: rgba(255, 252, 247, 0.7);
  --sidebar-text: #2b211b;
  --sidebar-muted: rgba(86, 69, 57, 0.68);
  --sidebar-line: rgba(132, 85, 45, 0.16);
  --sidebar-hover: rgba(199, 93, 119, 0.12);
  --sidebar-active: rgba(199, 93, 119, 0.18);
  --sidebar-user-bg: rgba(255, 252, 247, 0.62);
}

.theme-studio {
  color-scheme: light;
  --bg: #f1ede5;
  --panel: #fffdf8;
  --panel-soft: #f7f2e9;
  --text: #202a32;
  --muted: #68727a;
  --line: #d7d0c5;
  --gold: #a77c3e;
  --shadow-lg: 0 2px 5px rgba(45, 39, 31, 0.1);
  --shadow-sm: 0 1px 2px rgba(45, 39, 31, 0.08);
  --sidebar-bg: #e9e3d9;
  --sidebar-veil: transparent;
  --sidebar-text: #202a32;
  --sidebar-muted: #68727a;
  --sidebar-line: #cec5b8;
  --sidebar-hover: #ded7cc;
  --sidebar-active: #d7e2df;
  --sidebar-user-bg: #f5f0e7;
}

.theme-aurora,
.theme-graphite,
.theme-copper,
.theme-alpine,
.theme-porcelain,
.theme-sunrise {
  --sidebar-bg: color-mix(in srgb, var(--surface-card) 84%, var(--surface-page));
  --sidebar-veil: color-mix(in srgb, var(--accent) 8%, transparent);
  --sidebar-text: var(--text-primary);
  --sidebar-muted: var(--text-secondary);
  --sidebar-line: var(--border-subtle);
  --sidebar-hover: var(--surface-control-hover);
  --sidebar-active: color-mix(in srgb, var(--accent) 16%, var(--surface-card-soft));
  --sidebar-user-bg: var(--surface-card-soft);
}

.theme-aurora {
  --surface-page: #06141c;
  --surface-page-tint: #0b3034;
  --surface-card: rgba(13, 34, 45, 0.92);
  --surface-card-soft: rgba(24, 168, 145, 0.1);
  --surface-card-raised: #112d36;
  --surface-control: rgba(244, 251, 255, 0.1);
  --surface-control-hover: color-mix(in srgb, var(--accent) 18%, rgba(244, 251, 255, 0.08));
  --border-subtle: rgba(214, 239, 245, 0.18);
  --border-strong: rgba(214, 239, 245, 0.32);
  --surface-overlay: rgba(2, 9, 13, 0.72);
  --text-primary: #f4fbff;
  --text-secondary: rgba(218, 231, 237, 0.78);
  --control-secondary-text: #f4fbff;
}

.theme-midnight {
  --surface-page: #11151a;
  --surface-page-tint: #11151a;
  --surface-card: #1a2027;
  --surface-card-soft: #222a33;
  --surface-card-raised: #202831;
  --surface-control: #242c35;
  --surface-control-hover: #2c3640;
  --border-subtle: #343d46;
  --border-strong: #52606d;
  --surface-overlay: rgba(6, 8, 10, 0.72);
  --text-primary: #f2f4f5;
  --text-secondary: #a8b0b8;
  --control-secondary-text: #f2f4f5;
}

.theme-custom {
  --bg: var(--custom-page);
  --panel: var(--custom-panel);
  --panel-soft: var(--custom-panel-soft);
  --text: var(--custom-text);
  --muted: var(--custom-muted);
  --line: var(--custom-line);
  --gold: var(--custom-warning);
  --danger: var(--custom-danger);
  --surface-page: var(--custom-page);
  --surface-page-tint: color-mix(in srgb, var(--custom-page) 84%, var(--custom-accent));
  --surface-card: var(--custom-panel);
  --surface-card-soft: var(--custom-panel-soft);
  --surface-card-raised: color-mix(in srgb, var(--custom-panel) 90%, var(--custom-text));
  --surface-control: var(--custom-control);
  --surface-control-hover: color-mix(in srgb, var(--custom-accent) 12%, var(--custom-control));
  --surface-overlay: color-mix(in srgb, var(--custom-page) 76%, transparent);
  --text-primary: var(--custom-text);
  --text-secondary: var(--custom-muted);
  --text-inverse: var(--custom-accent-contrast);
  --border-subtle: var(--custom-line);
  --border-strong: color-mix(in srgb, var(--custom-line) 68%, var(--custom-text));
  --border-accent: color-mix(in srgb, var(--custom-accent) 46%, transparent);
  --sidebar-bg: var(--custom-sidebar);
  --sidebar-veil: color-mix(in srgb, var(--custom-accent) 7%, transparent);
  --sidebar-text: var(--custom-text);
  --sidebar-muted: var(--custom-muted);
  --sidebar-line: var(--custom-line);
  --sidebar-hover: color-mix(in srgb, var(--custom-accent) 11%, var(--custom-sidebar));
  --sidebar-active: color-mix(in srgb, var(--custom-accent) 20%, var(--custom-sidebar));
  --sidebar-user-bg: color-mix(in srgb, var(--custom-panel-soft) 72%, var(--custom-sidebar));
  --status-success: var(--custom-success);
  --status-warning: var(--custom-warning);
  --status-danger: var(--custom-danger);
  --shadow-sm: var(--custom-shadow-sm);
  --shadow-lg: var(--custom-shadow-lg);
}

.custom-tone-dark { color-scheme: dark; }
.custom-tone-light { color-scheme: light; }

.accent-custom {
  --accent: var(--custom-accent);
  --accent-dark: var(--custom-accent-dark);
  --accent-soft: color-mix(in srgb, var(--custom-accent) 16%, var(--surface-card));
  --accent-contrast: var(--custom-accent-contrast);
}

body.theme-custom :where(button, input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
  border-radius: var(--custom-radius);
}

body.theme-custom :where([class$="-card"], [class$="-panel"], [class$="-shell"], dialog) {
  border-radius: calc(var(--custom-radius) * 1.15);
}

.theme-graphite {
  --surface-page: #11110f;
  --surface-page-tint: #2b2922;
  --surface-card: rgba(35, 34, 29, 0.94);
  --surface-card-soft: rgba(224, 184, 95, 0.1);
  --surface-card-raised: #302d25;
  --surface-control: rgba(255, 250, 240, 0.1);
  --surface-control-hover: color-mix(in srgb, var(--gold) 16%, rgba(255, 250, 240, 0.08));
  --border-subtle: rgba(255, 248, 224, 0.16);
  --border-strong: rgba(255, 248, 224, 0.3);
  --surface-overlay: rgba(10, 10, 8, 0.74);
  --text-primary: #fffaf0;
  --text-secondary: rgba(232, 225, 208, 0.78);
  --control-secondary-text: #fffaf0;
}

.theme-copper {
  --surface-page: #120b12;
  --surface-page-tint: #321a25;
  --surface-card: rgba(35, 22, 30, 0.94);
  --surface-card-soft: rgba(217, 117, 74, 0.1);
  --surface-card-raised: #31202a;
  --surface-control: rgba(255, 247, 239, 0.1);
  --surface-control-hover: color-mix(in srgb, var(--accent) 18%, rgba(255, 247, 239, 0.08));
  --border-subtle: rgba(255, 222, 190, 0.16);
  --border-strong: rgba(255, 222, 190, 0.3);
  --surface-overlay: rgba(10, 5, 9, 0.74);
  --text-primary: #fff7ef;
  --text-secondary: rgba(239, 221, 207, 0.78);
  --control-secondary-text: #fff7ef;
}

.theme-alpine {
  --surface-page: #e5f0f6;
  --surface-page-tint: #cfe4ef;
  --surface-card: rgba(255, 255, 255, 0.96);
  --surface-card-soft: rgba(42, 112, 148, 0.09);
  --surface-card-raised: #f7fbfd;
  --surface-control: rgba(255, 255, 255, 0.78);
  --surface-control-hover: color-mix(in srgb, var(--accent) 12%, #f5fbff);
  --border-subtle: rgba(42, 83, 103, 0.18);
  --border-strong: rgba(42, 83, 103, 0.34);
  --surface-overlay: rgba(18, 42, 54, 0.34);
}

.theme-porcelain {
  --surface-page: #edf5ed;
  --surface-page-tint: #d8eddf;
  --surface-card: rgba(255, 255, 251, 0.96);
  --surface-card-soft: rgba(47, 157, 104, 0.1);
  --surface-card-raised: #fbfff9;
  --surface-control: rgba(255, 255, 251, 0.8);
  --surface-control-hover: color-mix(in srgb, var(--accent) 12%, #f8fff8);
  --border-subtle: rgba(49, 102, 82, 0.18);
  --border-strong: rgba(49, 102, 82, 0.34);
  --surface-overlay: rgba(22, 50, 39, 0.32);
}

.theme-sunrise {
  --surface-page: #f6eadf;
  --surface-page-tint: #efd6c2;
  --surface-card: rgba(255, 252, 247, 0.96);
  --surface-card-soft: rgba(199, 93, 119, 0.1);
  --surface-card-raised: #fff8ef;
  --surface-control: rgba(255, 252, 247, 0.78);
  --surface-control-hover: color-mix(in srgb, var(--accent) 12%, #fff8ef);
  --border-subtle: rgba(132, 85, 45, 0.2);
  --border-strong: rgba(132, 85, 45, 0.36);
  --surface-overlay: rgba(78, 46, 26, 0.32);
}

.theme-studio {
  --surface-page: #f1ede5;
  --surface-page-tint: #f1ede5;
  --surface-card: #fffdf8;
  --surface-card-soft: #f7f2e9;
  --surface-card-raised: #ffffff;
  --surface-control: #f5f1e9;
  --surface-control-hover: #ebe5da;
  --border-subtle: #d7d0c5;
  --border-strong: #aea497;
  --surface-overlay: rgba(32, 42, 50, 0.46);
}

.theme-nebula {
  color-scheme: dark;
  --bg: #070413;
  --panel: rgba(22, 13, 45, 0.86);
  --panel-soft: rgba(151, 105, 255, 0.11);
  --text: #fbf8ff;
  --muted: rgba(226, 220, 244, 0.8);
  --line: rgba(205, 190, 255, 0.18);
  --gold: #ffb86b;
  --surface-page: #070413;
  --surface-page-tint: #25114b;
  --surface-card: rgba(22, 13, 45, 0.86);
  --surface-card-soft: rgba(151, 105, 255, 0.11);
  --surface-card-raised: rgba(39, 23, 72, 0.94);
  --surface-control: rgba(246, 240, 255, 0.1);
  --surface-control-hover: color-mix(in srgb, var(--accent) 20%, rgba(246, 240, 255, 0.08));
  --surface-overlay: rgba(4, 1, 14, 0.78);
  --text-primary: #fbf8ff;
  --text-secondary: rgba(226, 220, 244, 0.8);
  --control-secondary-text: #fbf8ff;
  --border-subtle: rgba(205, 190, 255, 0.18);
  --border-strong: rgba(205, 190, 255, 0.34);
  --sidebar-bg: color-mix(in srgb, var(--surface-card) 84%, var(--surface-page));
  --sidebar-veil: color-mix(in srgb, var(--accent) 9%, transparent);
  --sidebar-text: var(--text-primary);
  --sidebar-muted: var(--text-secondary);
  --sidebar-line: var(--border-subtle);
  --sidebar-hover: var(--surface-control-hover);
  --sidebar-active: color-mix(in srgb, var(--accent) 18%, var(--surface-card-soft));
  --sidebar-user-bg: var(--surface-card-soft);
  --shadow-lg: 0 28px 80px rgba(2, 0, 18, 0.52);
  --shadow-sm: 0 12px 32px rgba(2, 0, 18, 0.3);
}

.theme-nebula.dashboard-page {
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 63, 180, 0.25), transparent 33rem),
    radial-gradient(circle at 8% 72%, rgba(48, 214, 255, 0.2), transparent 36rem),
    radial-gradient(circle at 52% 108%, rgba(126, 74, 255, 0.26), transparent 42rem),
    #070413;
  background-size: 145% 145%, 160% 160%, 150% 150%, auto;
  background-position: 100% 0, 0 75%, 50% 100%, 0 0;
  background-attachment: fixed;
  animation: nebula-theme-flow 24s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.theme-singularity {
  color-scheme: dark;
  --bg: #01030a;
  --panel: rgba(5, 13, 29, 0.82);
  --panel-soft: rgba(67, 246, 255, 0.075);
  --text: #f4fdff;
  --muted: rgba(190, 219, 232, 0.78);
  --line: rgba(87, 224, 255, 0.2);
  --gold: #ffda72;
  --surface-page: #01030a;
  --surface-page-tint: #04162c;
  --surface-card: rgba(5, 13, 29, 0.82);
  --surface-card-soft: rgba(67, 246, 255, 0.075);
  --surface-card-raised: rgba(8, 24, 47, 0.94);
  --surface-control: rgba(8, 27, 50, 0.86);
  --surface-control-hover: color-mix(in srgb, var(--accent) 22%, rgba(7, 26, 48, 0.9));
  --surface-overlay: rgba(0, 2, 10, 0.84);
  --text-primary: #f4fdff;
  --text-secondary: rgba(190, 219, 232, 0.78);
  --control-secondary-text: #f4fdff;
  --border-subtle: rgba(87, 224, 255, 0.2);
  --border-strong: rgba(103, 235, 255, 0.44);
  --sidebar-bg: rgba(3, 10, 24, 0.82);
  --sidebar-veil: rgba(62, 241, 255, 0.1);
  --sidebar-text: #f4fdff;
  --sidebar-muted: rgba(174, 215, 231, 0.72);
  --sidebar-line: rgba(75, 235, 255, 0.38);
  --sidebar-hover: rgba(59, 226, 255, 0.1);
  --sidebar-active: rgba(100, 76, 255, 0.18);
  --sidebar-user-bg: rgba(61, 224, 255, 0.07);
  --shadow-lg: 0 30px 90px rgba(0, 2, 14, 0.68);
  --shadow-sm: 0 14px 38px rgba(0, 3, 18, 0.44);
}

body.theme-singularity.dashboard-page {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 52% 108%, rgba(40, 221, 255, 0.22), transparent 34rem),
    radial-gradient(circle at 91% 9%, rgba(244, 54, 255, 0.19), transparent 31rem),
    radial-gradient(circle at 9% 26%, rgba(91, 79, 255, 0.19), transparent 29rem),
    linear-gradient(145deg, #010208 0%, #031124 46%, #02030b 100%);
  background-attachment: fixed;
}

body.theme-singularity.dashboard-page::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 43% -18% -38%;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(66, 240, 255, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 240, 255, 0.28) 1px, transparent 1px);
  background-size: 52px 36px;
  opacity: 0.42;
  transform: perspective(520px) rotateX(62deg) scale(1.42);
  transform-origin: center top;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 70%, transparent);
  animation: singularity-grid-drive 9s linear infinite;
}

body.theme-singularity.dashboard-page::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: min(94vw, 920px);
  aspect-ratio: 1;
  left: 58%;
  top: 48%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 17.7%, rgba(67, 246, 255, 0.72) 17.9% 18%, transparent 18.3% 27.8%, rgba(243, 65, 255, 0.52) 28% 28.12%, transparent 28.4%),
    conic-gradient(from 20deg, transparent 0 7%, rgba(67, 246, 255, 0.34) 8%, transparent 10% 46%, rgba(243, 65, 255, 0.28) 48%, transparent 51% 79%, rgba(255, 218, 114, 0.24) 80%, transparent 82%);
  filter: blur(0.2px) drop-shadow(0 0 24px rgba(52, 230, 255, 0.18));
  mix-blend-mode: screen;
  opacity: 0.46;
  transform: translate(-50%, -50%);
  animation: singularity-orbit 26s linear infinite;
}

.theme-singularity .app-layout {
  position: relative;
  z-index: 1;
}

.theme-singularity .app-sidebar {
  border-right-color: rgba(69, 239, 255, 0.38);
  background:
    linear-gradient(180deg, rgba(66, 240, 255, 0.1), transparent 19%),
    repeating-linear-gradient(0deg, rgba(115, 238, 255, 0.025) 0 1px, transparent 1px 5px),
    rgba(3, 10, 24, 0.82);
  box-shadow: 18px 0 70px rgba(1, 204, 255, 0.09), inset -1px 0 rgba(173, 250, 255, 0.12);
  backdrop-filter: blur(24px) saturate(155%);
}

.theme-singularity .app-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 36%, rgba(85, 242, 255, 0.12) 49.8%, rgba(85, 242, 255, 0.34) 50%, rgba(85, 242, 255, 0.12) 50.2%, transparent 64%);
  background-size: 100% 220%;
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: singularity-sidebar-scan 7s linear infinite;
}

.theme-singularity .app-main {
  position: relative;
}

.theme-singularity .app-main::before,
.theme-singularity .app-main::after {
  position: fixed;
  z-index: 8;
  right: 20px;
  pointer-events: none;
  color: rgba(135, 239, 255, 0.7);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(67, 246, 255, 0.6);
}

.theme-singularity .app-main::before {
  content: "VIPTOUR // SINGULARITY";
  top: 12px;
}

.theme-singularity .app-main::after {
  content: "● CORE ONLINE";
  bottom: 12px;
  color: rgba(126, 255, 198, 0.78);
  animation: singularity-status-pulse 2.4s ease-in-out infinite;
}

.theme-singularity .sidebar-logo {
  filter: drop-shadow(0 0 9px rgba(69, 242, 255, 0.62)) drop-shadow(0 0 22px rgba(154, 67, 255, 0.34));
  animation: singularity-core-breathe 4.6s ease-in-out infinite;
}

.theme-singularity .sidebar-logo__frame {
  fill: rgba(5, 23, 43, 0.82);
  stroke-width: 2.2;
}

.theme-singularity .sidebar-link,
.theme-singularity .sidebar-logout button {
  border-radius: 2px;
  letter-spacing: 0.02em;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

.theme-singularity .sidebar-link.is-active {
  border-color: rgba(77, 239, 255, 0.54);
  background:
    linear-gradient(90deg, rgba(50, 235, 255, 0.22), rgba(119, 68, 255, 0.16) 66%, transparent),
    rgba(5, 25, 48, 0.78);
  box-shadow: inset 0 0 22px rgba(55, 229, 255, 0.1), 0 0 24px rgba(104, 64, 255, 0.1);
}

.theme-singularity .sidebar-link.is-active::before {
  background: linear-gradient(180deg, #f8feff, #46f2ff 48%, #c34cff);
  box-shadow: 0 0 8px #46f2ff, 0 0 18px rgba(195, 76, 255, 0.78);
  animation: singularity-active-rail 2.8s ease-in-out infinite;
}

body.theme-singularity :where(button, input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
  border-radius: 2px;
}

body.theme-singularity button {
  border: 1px solid rgba(109, 238, 255, 0.34);
  clip-path: polygon(8px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 2px 100%, 0 calc(100% - 2px), 0 8px);
  box-shadow: inset 0 1px rgba(230, 253, 255, 0.2), 0 0 18px color-mix(in srgb, var(--accent) 16%, transparent);
  letter-spacing: 0.025em;
}

body.theme-singularity button:hover {
  border-color: rgba(144, 246, 255, 0.72);
  filter: brightness(1.12) saturate(1.12);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 0 26px color-mix(in srgb, var(--accent) 28%, transparent);
}

body.theme-singularity :where(input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
  border-color: rgba(99, 225, 255, 0.3);
  background-image: linear-gradient(120deg, rgba(71, 238, 255, 0.045), transparent 45%, rgba(175, 68, 255, 0.045));
  box-shadow: inset 0 1px rgba(201, 249, 255, 0.08);
}

body.theme-singularity :where(input, select, textarea):focus {
  border-color: rgba(81, 242, 255, 0.78);
  box-shadow: 0 0 0 3px rgba(68, 232, 255, 0.12), inset 0 0 20px rgba(74, 222, 255, 0.045);
}

body.theme-singularity :where([class$="-card"], [class$="-panel"], [class$="-shell"]) {
  border-color: color-mix(in srgb, #55eaff 28%, var(--border-subtle));
  box-shadow: inset 0 1px rgba(180, 249, 255, 0.055), 0 18px 52px rgba(0, 3, 18, 0.24);
  backdrop-filter: blur(14px) saturate(128%);
}

body.theme-singularity :where(h1, h2, h3, .eyebrow) {
  letter-spacing: -0.018em;
  text-shadow: 0 0 22px rgba(72, 230, 255, 0.12);
}

body.theme-singularity ::selection {
  background: rgba(72, 232, 255, 0.34);
  color: #ffffff;
}

body.theme-singularity ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #45edf8, #854cff);
  box-shadow: 0 0 8px rgba(69, 237, 248, 0.42);
}

.theme-kyoto {
  color-scheme: light;
  --bg: #eee5d5;
  --panel: rgba(255, 252, 244, 0.95);
  --panel-soft: rgba(111, 47, 39, 0.075);
  --text: #211b18;
  --muted: rgba(69, 57, 50, 0.72);
  --line: rgba(77, 55, 43, 0.2);
  --gold: #a87a34;
  --surface-page: #eee5d5;
  --surface-page-tint: #dccbb2;
  --surface-card: rgba(255, 252, 244, 0.95);
  --surface-card-soft: rgba(111, 47, 39, 0.075);
  --surface-card-raised: #fffaf0;
  --surface-control: rgba(255, 252, 244, 0.82);
  --surface-control-hover: color-mix(in srgb, var(--accent) 10%, #fffaf0);
  --surface-overlay: rgba(48, 35, 28, 0.34);
  --border-subtle: rgba(77, 55, 43, 0.2);
  --border-strong: rgba(77, 55, 43, 0.36);
  --sidebar-bg: color-mix(in srgb, var(--surface-card) 84%, var(--surface-page));
  --sidebar-veil: color-mix(in srgb, var(--accent) 7%, transparent);
  --sidebar-text: var(--text-primary);
  --sidebar-muted: var(--text-secondary);
  --sidebar-line: var(--border-subtle);
  --sidebar-hover: var(--surface-control-hover);
  --sidebar-active: color-mix(in srgb, var(--accent) 16%, var(--surface-card-soft));
  --sidebar-user-bg: var(--surface-card-soft);
  --shadow-lg: 0 24px 65px rgba(76, 50, 34, 0.18);
  --shadow-sm: 0 10px 26px rgba(76, 50, 34, 0.1);
}

.theme-kyoto.dashboard-page {
  background:
    linear-gradient(90deg, rgba(89, 57, 38, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(89, 57, 38, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 92% 4%, rgba(219, 82, 119, 0.2), transparent 29rem),
    radial-gradient(circle at 5% 84%, rgba(52, 156, 137, 0.15), transparent 34rem),
    radial-gradient(circle at 52% 112%, rgba(222, 162, 65, 0.18), transparent 38rem),
    linear-gradient(135deg, #eee5d5, #fff8ed 52%, #e8e0f2);
  background-size: 24px 24px, 24px 24px, 150% 150%, 165% 165%, 145% 145%, 180% 180%;
  background-position: 0 0, 0 0, 100% 0, 0 100%, 50% 100%, 0 50%;
  background-attachment: fixed;
  animation: kyoto-theme-bloom 28s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.accent-teal {
  --accent: #18a891;
  --accent-dark: #0d766b;
  --accent-soft: #dff8f3;
}

.accent-emerald {
  --accent: #2f9d68;
  --accent-dark: #21724c;
  --accent-soft: #e3f6eb;
}

.accent-sapphire {
  --accent: #3378d4;
  --accent-dark: #2459a4;
  --accent-soft: #e5efff;
}

.accent-amber {
  --accent: #c78b28;
  --accent-dark: #94661d;
  --accent-soft: #fff1d8;
}

.accent-rose {
  --accent: #c75d77;
  --accent-dark: #963f58;
  --accent-soft: #fde8ee;
}

.accent-violet {
  --accent: #7b68d8;
  --accent-dark: #5845a9;
  --accent-soft: #eeeafe;
}

.accent-coral {
  --accent: #df6f54;
  --accent-dark: #a84b38;
  --accent-soft: #fde9e3;
}

.accent-lime {
  --accent: #7aa62f;
  --accent-dark: #597722;
  --accent-soft: #edf7d8;
}

.accent-volt {
  --accent: #c8f43d;
  --accent-dark: #80ad00;
  --accent-soft: #efffc1;
  --accent-contrast: #101700;
}

.accent-plasma {
  --accent: #f23ca6;
  --accent-dark: #7b49ff;
  --accent-soft: #ffe3f5;
  --accent-contrast: #ffffff;
}

.accent-teal,
.accent-emerald,
.accent-sapphire,
.accent-amber,
.accent-rose,
.accent-violet,
.accent-coral,
.accent-lime,
.accent-volt,
.accent-plasma {
  --border-accent: color-mix(in srgb, var(--accent) 58%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 22%, transparent);
  --control-primary-bg: linear-gradient(135deg, var(--accent), var(--accent-dark));
  --control-primary-bg-hover: linear-gradient(135deg, var(--accent-dark), var(--accent));
  --surface-control-hover: color-mix(in srgb, var(--accent) 16%, var(--surface-control));
  --sidebar-hover: color-mix(in srgb, var(--accent) 13%, var(--surface-control));
  --sidebar-active: color-mix(in srgb, var(--accent) 22%, var(--surface-card-soft));
}

.accent-volt {
  --control-primary-bg: linear-gradient(135deg, #dfff55, #8fc900 72%);
  --control-primary-bg-hover: linear-gradient(135deg, #efff8a, #a9df16 72%);
}

.accent-plasma {
  --control-primary-bg: linear-gradient(135deg, #ff3da6, #8a4dff 58%, #30cfff);
  --control-primary-bg-hover: linear-gradient(135deg, #ff63b9, #a66cff 58%, #57d9ff);
}

body.theme-singularity {
  --control-primary-bg: linear-gradient(105deg, var(--accent-dark), var(--accent) 42%, #43efff 70%, var(--accent));
  --control-primary-bg-hover: linear-gradient(105deg, #43efff, var(--accent) 46%, var(--accent-dark));
}

body.accent-volt {
  animation: volt-accent-pulse 8s ease-in-out infinite;
}

body.accent-plasma {
  animation: plasma-accent-wave 11s ease-in-out infinite;
}

body.theme-nebula.dashboard-page.accent-volt {
  animation: nebula-theme-flow 24s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate,
    volt-accent-pulse 8s ease-in-out infinite;
}

body.theme-nebula.dashboard-page.accent-plasma {
  animation: nebula-theme-flow 24s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate,
    plasma-accent-wave 11s ease-in-out infinite;
}

body.theme-kyoto.dashboard-page.accent-volt {
  animation: kyoto-theme-bloom 28s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate,
    volt-accent-pulse 8s ease-in-out infinite;
}

body.theme-kyoto.dashboard-page.accent-plasma {
  animation: kyoto-theme-bloom 28s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate,
    plasma-accent-wave 11s ease-in-out infinite;
}

@keyframes nebula-theme-flow {
  0% { background-position: 100% 0, 0 72%, 48% 100%, 0 0; }
  50% { background-position: 76% 18%, 18% 54%, 62% 82%, 0 0; }
  100% { background-position: 58% 34%, 32% 38%, 40% 68%, 0 0; }
}

@keyframes kyoto-theme-bloom {
  0% { background-position: 0 0, 0 0, 100% 0, 0 100%, 50% 100%, 0 50%; }
  50% { background-position: 12px 7px, 7px 12px, 78% 18%, 20% 78%, 58% 82%, 50% 35%; }
  100% { background-position: 24px 14px, 14px 24px, 58% 32%, 34% 58%, 42% 66%, 100% 50%; }
}

@keyframes volt-accent-pulse {
  0%, 100% { --accent: #c8f43d; --accent-dark: #72a900; }
  34% { --accent: #52f7c8; --accent-dark: #059d82; }
  67% { --accent: #f6d84a; --accent-dark: #d58d00; }
}

@keyframes plasma-accent-wave {
  0%, 100% { --accent: #f23ca6; --accent-dark: #754cff; }
  33% { --accent: #8c5cff; --accent-dark: #4831c8; }
  66% { --accent: #32d7ff; --accent-dark: #087dbb; }
}

@keyframes singularity-grid-drive {
  from {
    background-position: 0 0, 0 0;
    transform: perspective(520px) rotateX(62deg) scale(1.42) translateY(0);
  }
  to {
    background-position: 0 108px, 104px 0;
    transform: perspective(520px) rotateX(62deg) scale(1.42) translateY(36px);
  }
}

@keyframes singularity-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(0.94); }
  50% { opacity: 0.62; }
  to { transform: translate(-50%, -50%) rotate(360deg) scale(1.06); }
}

@keyframes singularity-sidebar-scan {
  from { background-position: 0 -110%; }
  to { background-position: 0 210%; }
}

@keyframes singularity-core-breathe {
  0%, 100% { transform: scale(0.98); filter: drop-shadow(0 0 8px rgba(69, 242, 255, 0.54)) drop-shadow(0 0 18px rgba(154, 67, 255, 0.28)); }
  50% { transform: scale(1.055) rotate(1.5deg); filter: drop-shadow(0 0 15px rgba(69, 242, 255, 0.82)) drop-shadow(0 0 30px rgba(154, 67, 255, 0.48)); }
}

@keyframes singularity-active-rail {
  0%, 100% { opacity: 0.72; transform: scaleY(0.82); }
  50% { opacity: 1; transform: scaleY(1.08); }
}

@keyframes singularity-status-pulse {
  0%, 100% { opacity: 0.46; }
  50% { opacity: 1; }
}


@media (prefers-reduced-motion: reduce) {
body.theme-nebula.dashboard-page,
body.theme-kyoto.dashboard-page,
body.accent-volt,
body.accent-plasma {
    animation: none !important;
  }

  body.theme-singularity.dashboard-page::before,
  body.theme-singularity.dashboard-page::after,
  .theme-singularity .app-sidebar::before,
  .theme-singularity .sidebar-logo,
  .theme-singularity .sidebar-link.is-active::before,
  .theme-singularity .app-main::after {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  body.theme-singularity.dashboard-page::before {
    inset: 50% -65% -32%;
    opacity: 0.3;
  }

  body.theme-singularity.dashboard-page::after {
    width: 150vw;
    left: 50%;
    top: 44%;
    opacity: 0.32;
  }

  .theme-singularity .app-main::before,
  .theme-singularity .app-main::after {
    display: none;
  }
}

.theme-retro {
  color-scheme: light;
  --font-main: Tahoma, "MS Sans Serif", "Segoe UI", Arial, sans-serif;
  --bg: #008080;
  --panel: #c0c0c0;
  --panel-soft: #d4d0c8;
  --text: #000000;
  --muted: #404040;
  --line: #808080;
  --gold: #808000;
  --surface-page: #008080;
  --surface-page-tint: #006f6f;
  --surface-card: #c0c0c0;
  --surface-card-soft: #d4d0c8;
  --surface-card-raised: #dfdfdf;
  --surface-control: #ffffff;
  --surface-control-hover: #e8e8e8;
  --surface-overlay: rgba(0, 0, 0, 0.48);
  --text-primary: #000000;
  --text-secondary: #404040;
  --text-inverse: #ffffff;
  --border-subtle: #808080;
  --border-strong: #000000;
  --sidebar-bg: #c0c0c0;
  --sidebar-veil: transparent;
  --sidebar-text: #000000;
  --sidebar-muted: #404040;
  --sidebar-line: #808080;
  --sidebar-hover: #d4d0c8;
  --sidebar-active: var(--accent);
  --sidebar-user-bg: #d4d0c8;
  --control-secondary-bg: #c0c0c0;
  --control-secondary-text: #000000;
  --shadow-lg: 4px 4px 0 #000000;
  --shadow-sm: 2px 2px 0 #404040;
}

.theme-retro.dashboard-page {
  background-color: var(--surface-page);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.025) 1px, transparent 1px);
  background-size: 4px 4px;
}

.accent-retro-light {
  --accent: #5b9bb5;
  --accent-dark: #2f677d;
  --accent-soft: #c9e5ef;
  --accent-contrast: #ffffff;
  --border-accent: #2f677d;
  --accent-ring: rgba(91, 155, 181, 0.28);
  --control-primary-bg: #5b9bb5;
  --control-primary-bg-hover: #2f677d;
  --surface-control-hover: color-mix(in srgb, #5b9bb5 22%, var(--surface-control));
  --sidebar-hover: color-mix(in srgb, #5b9bb5 18%, var(--surface-control));
  --sidebar-active: #5b9bb5;
}

.accent-retro-dark {
  --accent: #000080;
  --accent-dark: #00004f;
  --accent-soft: #c8c8e0;
  --accent-contrast: #ffffff;
  --border-accent: #00004f;
  --accent-ring: rgba(0, 0, 128, 0.24);
  --control-primary-bg: #000080;
  --control-primary-bg-hover: #00004f;
  --surface-control-hover: color-mix(in srgb, #000080 18%, var(--surface-control));
  --sidebar-hover: color-mix(in srgb, #000080 14%, var(--surface-control));
  --sidebar-active: #000080;
}

.theme-preview--retro .theme-option__preview {
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  background: #008080;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080;
}

.theme-preview--retro i {
  border: 1px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  background: #c0c0c0;
}

.theme-preview--retro b { background: #000080; }
.theme-preview--retro em { background: #d4d0c8; }

.accent-preview--retro-light span,
.accent-preview--retro-dark span {
  border: 3px outset #d4d0c8;
  border-radius: 0;
}

.accent-preview--retro-light span { background: #5b9bb5; }
.accent-preview--retro-dark span { background: #000080; }

body.theme-retro,
body.theme-retro button,
body.theme-retro input,
body.theme-retro select,
body.theme-retro textarea {
  font-family: Tahoma, "MS Sans Serif", "Segoe UI", Arial, sans-serif;
}

body.theme-retro * {
  border-radius: 0 !important;
}

body.theme-retro :where(
  button,
  input:not([type="radio"]):not([type="checkbox"]),
  select,
  textarea,
  .sidebar-link
) {
  border: 2px solid !important;
  border-color: #ffffff #404040 #404040 #ffffff !important;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080 !important;
}

body.theme-retro :where(button, .sidebar-link):active {
  border-color: #404040 #ffffff #ffffff #404040 !important;
  box-shadow: inset 1px 1px #808080 !important;
  transform: translate(1px, 1px);
}

body.theme-retro :where([class*="card"], [class*="panel"], [class*="hero"]) {
  border: 2px solid !important;
  border-color: #ffffff #404040 #404040 #ffffff !important;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080 !important;
  backdrop-filter: none !important;
}

body.theme-retro :where(h1, h2, h3, strong, .eyebrow) {
  letter-spacing: 0;
  text-shadow: none;
}

body.theme-retro .sidebar-link.is-active {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

/* Lite themes are low-power profiles for old and memory-constrained devices. */
body:is(.theme-studio, .theme-midnight) {
  --control-primary-bg: var(--accent);
  --control-primary-bg-hover: var(--accent-dark);
  scroll-behavior: auto !important;
}

body.theme-studio {
  --shadow-md: 0 1px 3px rgba(45, 39, 31, 0.09);
  --shadow-card: 0 1px 2px rgba(45, 39, 31, 0.08);
}

body.theme-midnight {
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.18);
}

body.theme-studio.dashboard-page {
  background: #f1ede5;
  background-attachment: scroll;
}

body.theme-midnight.dashboard-page {
  background: #11151a;
  background-attachment: scroll;
}

body:is(.theme-studio, .theme-midnight) *,
body:is(.theme-studio, .theme-midnight) *::before,
body:is(.theme-studio, .theme-midnight) *::after {
  animation: none !important;
  transition: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

body.theme-studio .app-sidebar {
  background: #e9e3d9;
  box-shadow: none;
}

body.theme-midnight .app-sidebar {
  background: #151a20;
  box-shadow: none;
}

body:is(.theme-studio, .theme-midnight) :where(
  [class*="card"],
  [class*="panel"],
  [class*="modal"],
  [class*="dialog"],
  [class*="popover"]
) {
  box-shadow: 0 1px 2px rgba(45, 39, 31, 0.08) !important;
}

body.theme-midnight :where(
  [class*="card"],
  [class*="panel"],
  [class*="modal"],
  [class*="dialog"],
  [class*="popover"]
) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

body:is(.theme-studio, .theme-midnight) :where(h1, h2, h3, strong, .eyebrow) {
  text-shadow: none !important;
}