:root {
    --gps-primary: #0d9f96;
    --cyber-bg: #eef3f6;
    --cyber-bg-deep: #e3ebf0;
    --cyber-panel: rgba(251, 253, 255, 0.88);
    --cyber-panel-strong: #f9fbff;
    --cyber-ink: #0c1b2e;
    --cyber-text: #26364a;
    --cyber-muted: #68788a;
    --cyber-line: rgba(57, 83, 107, 0.2);
    --cyber-line-strong: color-mix(in srgb, var(--gps-primary, #0d9f96) 38%, transparent);
    --cyber-cyan: var(--gps-primary, #0d9f96);
    --cyber-violet: #6b477f;
    --cyber-magenta: #b55f79;
    --cyber-amber: #e99a0c;
    --cyber-green: #138f79;
    --cyber-danger: #c6534c;
    --cyber-shadow: 0 20px 48px rgba(7, 20, 36, 0.13);
    --cyber-glow: 0 0 0 1px color-mix(in srgb, var(--gps-primary, #00d7ff) 22%, transparent), 0 16px 34px color-mix(in srgb, var(--gps-primary, #00d7ff) 13%, transparent);
}

html.dark-mode,
body.dark-mode {
    --cyber-bg: #061120;
    --cyber-bg-deep: #081522;
    --cyber-panel: rgba(15, 32, 50, 0.93);
    --cyber-panel-strong: #11263a;
    --cyber-ink: #f7f9ff;
    --cyber-text: #d7e0ea;
    --cyber-muted: #91a0b2;
    --cyber-line: rgba(133, 166, 195, 0.23);
    --cyber-line-strong: color-mix(in srgb, var(--gps-primary, #22c7ba) 46%, transparent);
    --cyber-cyan: var(--gps-primary, #22c7ba);
    --cyber-violet: #9f76bd;
    --cyber-magenta: #d9859c;
    --cyber-amber: #ffb62e;
    --cyber-green: #42d1b8;
    --cyber-danger: #ff7c70;
    --cyber-shadow: 0 22px 54px rgba(0, 0, 0, 0.48);
    --cyber-glow: 0 0 0 1px color-mix(in srgb, var(--gps-primary, #00e5ff) 28%, transparent), 0 18px 42px color-mix(in srgb, var(--cyber-violet, #9a72ff) 16%, transparent);
}

html[data-theme-scheme],
body[data-theme-scheme] {
    --infradac-green: var(--gps-primary, var(--cyber-cyan));
    --infradac-green-dark: color-mix(in srgb, var(--cyber-violet) 78%, var(--cyber-ink));
    --infradac-gold: var(--cyber-amber);
    --infradac-cream: var(--cyber-bg);
    --infradac-ink: var(--cyber-ink);
    --infradac-heading: var(--cyber-ink);
    --infradac-text: var(--cyber-text);
    --infradac-muted: var(--cyber-muted);
    --infradac-surface: var(--cyber-bg-deep);
    --infradac-card: var(--cyber-panel-strong);
    --infradac-border: var(--cyber-line);
    --infradac-danger: var(--cyber-danger);
    --infradac-warning: var(--cyber-amber);
    --infradac-success: var(--cyber-green);
    --infradac-shadow: var(--cyber-shadow);
}

html {
    background: var(--cyber-bg);
}

body {
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--gps-primary, #00d7ff) 9%, transparent), transparent 34%),
        radial-gradient(circle at 86% 0%, color-mix(in srgb, var(--cyber-violet, #7b4dff) 7%, transparent), transparent 31%),
        linear-gradient(160deg, var(--cyber-bg), var(--cyber-bg-deep));
    color: var(--cyber-text);
}

body.dark-mode,
html.dark-mode body {
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--gps-primary, #00e5ff) 11%, transparent), transparent 34%),
        radial-gradient(circle at 86% 0%, color-mix(in srgb, var(--cyber-violet, #9a72ff) 8%, transparent), transparent 31%),
        linear-gradient(160deg, var(--cyber-bg), var(--cyber-bg-deep) 54%, color-mix(in srgb, var(--cyber-violet, #9a72ff) 14%, var(--cyber-bg-deep)));
}

html,
body,
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    width: 0;
    height: 0;
}

html[data-theme-scheme="galaxy"] {
    --cyber-bg: #eef3f6;
    --cyber-bg-deep: #e3ebf0;
    --cyber-panel: rgba(247, 251, 255, 0.91);
    --cyber-panel-strong: #fbfdff;
    --cyber-ink: #0c1b2e;
    --cyber-text: #26364a;
    --cyber-muted: #68788a;
    --cyber-line: rgba(57, 83, 107, 0.2);
}

html.dark-mode[data-theme-scheme="galaxy"] {
    --cyber-bg: #061120;
    --cyber-bg-deep: #081522;
    --cyber-panel: rgba(15, 32, 50, 0.93);
    --cyber-panel-strong: #11263a;
    --cyber-ink: #f7f9ff;
    --cyber-text: #d7e0ea;
    --cyber-muted: #91a0b2;
    --cyber-line: rgba(133, 166, 195, 0.23);
}

html[data-theme-scheme="matrix"] {
    --cyber-bg: #edf4ee;
    --cyber-bg-deep: #dfeae2;
    --cyber-panel: rgba(248, 252, 248, 0.92);
    --cyber-panel-strong: #fbfffb;
    --cyber-ink: #0e2419;
    --cyber-text: #243b2f;
    --cyber-muted: #617568;
    --cyber-line: rgba(0, 104, 55, 0.2);
}

html.dark-mode[data-theme-scheme="matrix"] {
    --cyber-bg: #020803;
    --cyber-bg-deep: #071507;
    --cyber-panel: rgba(2, 15, 7, 0.92);
    --cyber-panel-strong: #081a0c;
    --cyber-ink: #edfff4;
    --cyber-text: #d4ffe6;
    --cyber-muted: #8fbfa2;
    --cyber-line: rgba(0, 255, 117, 0.25);
}

html[data-theme-scheme="redblack"] {
    --cyber-bg: #e8e1e3;
    --cyber-bg-deep: #dad0d3;
    --cyber-panel: rgba(245, 240, 242, 0.92);
    --cyber-panel-strong: #f7f1f3;
    --cyber-ink: #261016;
    --cyber-text: #432631;
    --cyber-muted: #816977;
    --cyber-line: rgba(128, 38, 53, 0.22);
}

html.dark-mode[data-theme-scheme="redblack"] {
    --cyber-bg: #080507;
    --cyber-bg-deep: #15070a;
    --cyber-panel: rgba(16, 6, 9, 0.94);
    --cyber-panel-strong: #220910;
    --cyber-ink: #fff4f5;
    --cyber-text: #ffd7dc;
    --cyber-muted: #c4909a;
    --cyber-line: rgba(255, 39, 63, 0.29);
}

html[data-theme-scheme="solar"] {
    --cyber-bg: #f1eee5;
    --cyber-bg-deep: #e3ddcf;
    --cyber-panel: rgba(252, 249, 242, 0.92);
    --cyber-panel-strong: #fffdf8;
    --cyber-ink: #251b0b;
    --cyber-text: #443621;
    --cyber-muted: #786b57;
    --cyber-line: rgba(138, 96, 18, 0.22);
}

html.dark-mode[data-theme-scheme="solar"] {
    --cyber-bg: #090704;
    --cyber-bg-deep: #171109;
    --cyber-panel: rgba(24, 15, 5, 0.92);
    --cyber-panel-strong: #291a08;
    --cyber-ink: #fff8e5;
    --cyber-text: #ffe7b1;
    --cyber-muted: #c9a972;
    --cyber-line: rgba(255, 176, 0, 0.26);
}

html[data-theme-scheme="violet"] {
    --cyber-bg: #efedf6;
    --cyber-bg-deep: #e2def0;
    --cyber-panel: rgba(250, 248, 255, 0.88);
    --cyber-panel-strong: #fdfbff;
    --cyber-ink: #1f1836;
    --cyber-text: #393052;
    --cyber-muted: #746b8a;
    --cyber-line: rgba(101, 75, 169, 0.21);
}

html.dark-mode[data-theme-scheme="violet"] {
    --cyber-bg: #070611;
    --cyber-bg-deep: #120c21;
    --cyber-panel: rgba(12, 8, 28, 0.88);
    --cyber-panel-strong: #1b1135;
    --cyber-ink: #f8f4ff;
    --cyber-text: #e4d8ff;
    --cyber-muted: #aaa0c9;
    --cyber-line: rgba(154, 114, 255, 0.25);
}

html[data-theme-scheme="ice"] {
    --cyber-bg: #e9eef4;
    --cyber-bg-deep: #dbe4ee;
    --cyber-panel: rgba(247, 251, 255, 0.91);
    --cyber-panel-strong: #f3f7fb;
    --cyber-ink: #0d203b;
    --cyber-text: #253852;
    --cyber-muted: #64778d;
    --cyber-line: rgba(35, 105, 180, 0.22);
}

html.dark-mode[data-theme-scheme="ice"] {
    --cyber-bg: #03101d;
    --cyber-bg-deep: #071a30;
    --cyber-panel: rgba(7, 21, 39, 0.92);
    --cyber-panel-strong: #0c2744;
    --cyber-ink: #f2fbff;
    --cyber-text: #d9f1ff;
    --cyber-muted: #96b8cf;
    --cyber-line: rgba(35, 199, 255, 0.25);
}

html[data-theme-scheme="carbon"] {
    --cyber-bg: #e1e3e6;
    --cyber-bg-deep: #cfd3d9;
    --cyber-panel: rgba(236, 238, 241, 0.93);
    --cyber-panel-strong: #eceef1;
    --cyber-ink: #111821;
    --cyber-text: #283140;
    --cyber-muted: #626c79;
    --cyber-line: rgba(40, 49, 64, 0.24);
}

html.dark-mode[data-theme-scheme="carbon"] {
    --cyber-bg: #07090d;
    --cyber-bg-deep: #11151c;
    --cyber-panel: rgba(16, 20, 27, 0.94);
    --cyber-panel-strong: #1a202a;
    --cyber-ink: #f2f5f8;
    --cyber-text: #d5dbe3;
    --cyber-muted: #99a3b0;
    --cyber-line: rgba(125, 139, 161, 0.25);
}

html[data-theme-scheme="monochrome"] {
    --cyber-bg: #e7e5df;
    --cyber-bg-deep: #d4d1c9;
    --cyber-panel: rgba(239, 237, 231, 0.94);
    --cyber-panel-strong: #ebe8df;
    --cyber-ink: #111111;
    --cyber-text: #282828;
    --cyber-muted: #62605b;
    --cyber-line: rgba(22, 22, 22, 0.25);
}

html.dark-mode[data-theme-scheme="monochrome"] {
    --cyber-bg: #030303;
    --cyber-bg-deep: #101010;
    --cyber-panel: rgba(17, 17, 17, 0.95);
    --cyber-panel-strong: #1a1a1a;
    --cyber-ink: #f0f0ec;
    --cyber-text: #d8d8d2;
    --cyber-muted: #a7a7a1;
    --cyber-line: rgba(230, 230, 222, 0.24);
}

html[data-theme-scheme="ember"] {
    --cyber-bg: #f2ece7;
    --cyber-bg-deep: #e5dcd3;
    --cyber-panel: rgba(252, 248, 244, 0.92);
    --cyber-panel-strong: #fffaf6;
    --cyber-ink: #2b180e;
    --cyber-text: #492e21;
    --cyber-muted: #816957;
    --cyber-line: rgba(170, 73, 28, 0.22);
}

html.dark-mode[data-theme-scheme="ember"] {
    --cyber-bg: #0d0603;
    --cyber-bg-deep: #1a0c05;
    --cyber-panel: rgba(24, 10, 4, 0.93);
    --cyber-panel-strong: #2b1208;
    --cyber-ink: #fff3ea;
    --cyber-text: #ffd7c0;
    --cyber-muted: #c89675;
    --cyber-line: rgba(255, 111, 42, 0.26);
}

html[data-theme-scheme="matrix"] body {
    background:
        radial-gradient(circle at 10% 12%, rgba(0, 255, 117, 0.09), transparent 34%),
        linear-gradient(160deg, #e8f0e9, #dce7df);
}

html.dark-mode[data-theme-scheme="matrix"] body,
body.dark-mode[data-theme-scheme="matrix"] {
    background:
        radial-gradient(circle at 10% 12%, rgba(0, 255, 117, 0.12), transparent 34%),
        linear-gradient(160deg, #020803, #071507 58%, #0c1c10);
}

html[data-theme-scheme="redblack"] body {
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 39, 63, 0.09), transparent 34%),
        linear-gradient(160deg, #e8e1e3, #d9ced1);
}

html.dark-mode[data-theme-scheme="redblack"] body,
body.dark-mode[data-theme-scheme="redblack"] {
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 39, 63, 0.13), transparent 34%),
        linear-gradient(160deg, #080507, #15070a 58%, #21070d);
}

html[data-theme-scheme="solar"] body {
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 176, 0, 0.09), transparent 34%),
        linear-gradient(160deg, #ece8de, #ded7c8);
}

html.dark-mode[data-theme-scheme="solar"] body,
body.dark-mode[data-theme-scheme="solar"] {
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 176, 0, 0.12), transparent 34%),
        linear-gradient(160deg, #090704, #171109 58%, #23180a);
}

html[data-theme-scheme="violet"] body {
    background:
        radial-gradient(circle at 14% 10%, rgba(154, 114, 255, 0.09), transparent 34%),
        linear-gradient(160deg, #ece8f3, #ded9eb);
}

html.dark-mode[data-theme-scheme="violet"] body,
body.dark-mode[data-theme-scheme="violet"] {
    background:
        radial-gradient(circle at 14% 10%, rgba(154, 114, 255, 0.12), transparent 34%),
        linear-gradient(160deg, #070611, #120c21 58%, #1a102e);
}

html[data-theme-scheme="ice"] body {
    background:
        radial-gradient(circle at 14% 10%, rgba(0, 109, 255, 0.08), transparent 34%),
        linear-gradient(160deg, #e2e7ed, #d4dde7);
}

html.dark-mode[data-theme-scheme="ice"] body,
body.dark-mode[data-theme-scheme="ice"] {
    background:
        radial-gradient(circle at 14% 10%, rgba(35, 199, 255, 0.12), transparent 34%),
        linear-gradient(160deg, #03101d, #071a30 58%, #092039);
}

html[data-theme-scheme="carbon"] body {
    background:
        radial-gradient(circle at 14% 10%, rgba(101, 114, 134, 0.09), transparent 34%),
        linear-gradient(160deg, #e1e3e6, #cfd3d9);
}

html.dark-mode[data-theme-scheme="carbon"] body,
body.dark-mode[data-theme-scheme="carbon"] {
    background:
        radial-gradient(circle at 14% 10%, rgba(101, 114, 134, 0.11), transparent 34%),
        linear-gradient(160deg, #07090d, #11151c 58%, #171d25);
}

html[data-theme-scheme="ember"] body {
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 111, 42, 0.09), transparent 34%),
        linear-gradient(160deg, #e9e1da, #dcd2c8);
}

html.dark-mode[data-theme-scheme="ember"] body,
body.dark-mode[data-theme-scheme="ember"] {
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 111, 42, 0.12), transparent 34%),
        linear-gradient(160deg, #0d0603, #1a0c05 58%, #281205);
}

html[data-theme-scheme="monochrome"] body {
    background:
        radial-gradient(circle at 14% 10%, rgba(42, 42, 42, 0.08), transparent 34%),
        linear-gradient(160deg, #e7e5df, #d4d1c9);
}

html.dark-mode[data-theme-scheme="monochrome"] body,
body.dark-mode[data-theme-scheme="monochrome"] {
    background:
        radial-gradient(circle at 14% 10%, rgba(245, 245, 245, 0.06), transparent 34%),
        linear-gradient(160deg, #050505, #101010 58%, #181818);
}

.side-menu,
.top-bar,
.card,
.modal-content,
.login-container,
.connected-api-card,
.app-card,
.settings-page .card,
.dashboard-page .card,
.account-card,
.stat-panel,
.stat-board,
.support-ticket-form,
.support-ticket-card,
.apps-command-panel {
    border-color: var(--cyber-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--gps-primary, #00d7ff) 6%, transparent), transparent 36%),
        linear-gradient(315deg, rgba(255, 63, 148, 0.045), transparent 42%),
        var(--cyber-panel);
    color: var(--cyber-text);
    box-shadow: var(--cyber-shadow);
}

body.dark-mode .side-menu,
html.dark-mode .side-menu,
body.dark-mode .top-bar,
html.dark-mode .top-bar,
body.dark-mode .card,
html.dark-mode .card,
body.dark-mode .modal-content,
html.dark-mode .modal-content,
body.dark-mode .login-container,
body.dark-mode .connected-api-card,
html.dark-mode .connected-api-card,
body.dark-mode .app-card,
html.dark-mode .app-card,
body.dark-mode .settings-page .card,
html.dark-mode .settings-page .card,
body.dark-mode .dashboard-page .card,
html.dark-mode .dashboard-page .card,
body.dark-mode .account-card,
html.dark-mode .account-card {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--gps-primary, #00e5ff) 9%, transparent), transparent 36%),
        linear-gradient(315deg, rgba(255, 79, 163, 0.07), transparent 42%),
        var(--cyber-panel);
}

html[data-theme-scheme="matrix"] .side-menu,
html[data-theme-scheme="matrix"] .top-bar,
html[data-theme-scheme="matrix"] .card,
html[data-theme-scheme="matrix"] .modal-content,
html[data-theme-scheme="matrix"] .login-container,
html[data-theme-scheme="matrix"] .connected-api-card,
html[data-theme-scheme="matrix"] .app-card,
html[data-theme-scheme="matrix"] .account-card,
html[data-theme-scheme="matrix"] .stat-panel,
html[data-theme-scheme="matrix"] .stat-board,
html[data-theme-scheme="matrix"] .security-key-panel {
    border-radius: 2px;
    border-color: color-mix(in srgb, var(--gps-primary, #00ff75) 54%, rgba(0, 68, 35, 0.34));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--gps-primary, #00ff75) 8%, transparent), transparent 48%),
        var(--cyber-panel);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--gps-primary, #00ff75) 12%, transparent),
        0 18px 38px rgba(0, 60, 26, 0.12);
}

html.dark-mode[data-theme-scheme="matrix"] .side-menu,
html.dark-mode[data-theme-scheme="matrix"] .top-bar,
html.dark-mode[data-theme-scheme="matrix"] .card,
html.dark-mode[data-theme-scheme="matrix"] .modal-content,
html.dark-mode[data-theme-scheme="matrix"] .login-container,
html.dark-mode[data-theme-scheme="matrix"] .connected-api-card,
html.dark-mode[data-theme-scheme="matrix"] .app-card,
html.dark-mode[data-theme-scheme="matrix"] .account-card,
html.dark-mode[data-theme-scheme="matrix"] .stat-panel,
html.dark-mode[data-theme-scheme="matrix"] .stat-board,
html.dark-mode[data-theme-scheme="matrix"] .security-key-panel {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--gps-primary, #00ff75) 10%, transparent), transparent 52%),
        rgba(2, 15, 7, 0.92);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--gps-primary, #00ff75) 22%, transparent),
        0 20px 46px rgba(0, 0, 0, 0.46);
}

html[data-theme-scheme="matrix"] .content-header h1,
html[data-theme-scheme="matrix"] .section-header h3,
html[data-theme-scheme="matrix"] .card-title,
html[data-theme-scheme="matrix"] .button,
html[data-theme-scheme="matrix"] .btn {
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 0;
}

html[data-theme-scheme="matrix"] .menu-list a.active {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--gps-primary, #00ff75) 18%, transparent), transparent),
        rgba(0, 255, 117, 0.04);
    box-shadow: inset 3px 0 0 var(--gps-primary, #00ff75), 0 0 20px color-mix(in srgb, var(--gps-primary, #00ff75) 14%, transparent);
}

html[data-theme-scheme="redblack"] .side-menu,
html[data-theme-scheme="redblack"] .top-bar,
html[data-theme-scheme="redblack"] .card,
html[data-theme-scheme="redblack"] .modal-content,
html[data-theme-scheme="redblack"] .login-container,
html[data-theme-scheme="redblack"] .connected-api-card,
html[data-theme-scheme="redblack"] .app-card,
html[data-theme-scheme="redblack"] .account-card,
html[data-theme-scheme="redblack"] .stat-panel,
html[data-theme-scheme="redblack"] .stat-board,
html[data-theme-scheme="redblack"] .security-key-panel {
    border-radius: 0;
    border-color: color-mix(in srgb, var(--gps-primary, #ff273f) 46%, var(--cyber-line));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--gps-primary, #ff273f) 13%, transparent) 0 4px, transparent 4px),
        linear-gradient(135deg, color-mix(in srgb, var(--gps-primary, #ff273f) 7%, transparent), transparent 44%),
        var(--cyber-panel);
    box-shadow:
        inset 4px 0 0 color-mix(in srgb, var(--gps-primary, #ff273f) 76%, transparent),
        0 18px 42px rgba(83, 7, 18, 0.16);
}

html.dark-mode[data-theme-scheme="redblack"] .side-menu,
html.dark-mode[data-theme-scheme="redblack"] .top-bar,
html.dark-mode[data-theme-scheme="redblack"] .card,
html.dark-mode[data-theme-scheme="redblack"] .modal-content,
html.dark-mode[data-theme-scheme="redblack"] .login-container,
html.dark-mode[data-theme-scheme="redblack"] .connected-api-card,
html.dark-mode[data-theme-scheme="redblack"] .app-card,
html.dark-mode[data-theme-scheme="redblack"] .account-card,
html.dark-mode[data-theme-scheme="redblack"] .stat-panel,
html.dark-mode[data-theme-scheme="redblack"] .stat-board,
html.dark-mode[data-theme-scheme="redblack"] .security-key-panel {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--gps-primary, #ff273f) 20%, transparent) 0 4px, transparent 4px),
        linear-gradient(135deg, color-mix(in srgb, var(--gps-primary, #ff273f) 9%, transparent), transparent 48%),
        rgba(16, 6, 9, 0.94);
}

html[data-theme-scheme="redblack"] .status-pill,
html[data-theme-scheme="redblack"] .portal-pill,
html[data-theme-scheme="redblack"] .badge {
    border-radius: 2px;
    text-transform: uppercase;
}

html[data-theme-scheme="solar"] .side-menu,
html[data-theme-scheme="solar"] .top-bar,
html[data-theme-scheme="solar"] .card,
html[data-theme-scheme="solar"] .modal-content,
html[data-theme-scheme="solar"] .login-container,
html[data-theme-scheme="solar"] .connected-api-card,
html[data-theme-scheme="solar"] .app-card,
html[data-theme-scheme="solar"] .account-card,
html[data-theme-scheme="solar"] .stat-panel,
html[data-theme-scheme="solar"] .stat-board,
html[data-theme-scheme="solar"] .security-key-panel {
    border-radius: 10px 2px 10px 2px;
    border-color: color-mix(in srgb, var(--gps-primary, #ffb000) 42%, rgba(115, 76, 12, 0.22));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--gps-primary, #ffb000) 16%, transparent) 0 3px, transparent 3px),
        linear-gradient(135deg, rgba(255, 176, 0, 0.08), transparent 42%),
        color-mix(in srgb, var(--cyber-panel) 92%, #fff1c4);
    box-shadow: 0 18px 34px rgba(116, 78, 15, 0.14);
}

html.dark-mode[data-theme-scheme="solar"] .side-menu,
html.dark-mode[data-theme-scheme="solar"] .top-bar,
html.dark-mode[data-theme-scheme="solar"] .card,
html.dark-mode[data-theme-scheme="solar"] .modal-content,
html.dark-mode[data-theme-scheme="solar"] .login-container,
html.dark-mode[data-theme-scheme="solar"] .connected-api-card,
html.dark-mode[data-theme-scheme="solar"] .app-card,
html.dark-mode[data-theme-scheme="solar"] .account-card,
html.dark-mode[data-theme-scheme="solar"] .stat-panel,
html.dark-mode[data-theme-scheme="solar"] .stat-board,
html.dark-mode[data-theme-scheme="solar"] .security-key-panel {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--gps-primary, #ffb000) 18%, transparent) 0 3px, transparent 3px),
        linear-gradient(135deg, rgba(255, 176, 0, 0.1), transparent 44%),
        rgba(24, 15, 5, 0.92);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.42);
}

html[data-theme-scheme="violet"] .side-menu,
html[data-theme-scheme="violet"] .top-bar,
html[data-theme-scheme="violet"] .card,
html[data-theme-scheme="violet"] .modal-content,
html[data-theme-scheme="violet"] .login-container,
html[data-theme-scheme="violet"] .connected-api-card,
html[data-theme-scheme="violet"] .app-card,
html[data-theme-scheme="violet"] .account-card,
html[data-theme-scheme="violet"] .stat-panel,
html[data-theme-scheme="violet"] .stat-board,
html[data-theme-scheme="violet"] .security-key-panel {
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--cyber-violet, #9a72ff) 42%, var(--cyber-line));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cyber-violet, #9a72ff) 10%, transparent), transparent 38%),
        linear-gradient(315deg, color-mix(in srgb, var(--cyber-cyan, #7ef4ff) 8%, transparent), transparent 44%),
        color-mix(in srgb, var(--cyber-panel) 86%, transparent);
    box-shadow:
        0 18px 44px color-mix(in srgb, var(--cyber-violet, #9a72ff) 14%, transparent),
        inset 0 0 0 1px color-mix(in srgb, white 8%, transparent);
    backdrop-filter: blur(22px);
}

html.dark-mode[data-theme-scheme="violet"] .side-menu,
html.dark-mode[data-theme-scheme="violet"] .top-bar,
html.dark-mode[data-theme-scheme="violet"] .card,
html.dark-mode[data-theme-scheme="violet"] .modal-content,
html.dark-mode[data-theme-scheme="violet"] .login-container,
html.dark-mode[data-theme-scheme="violet"] .connected-api-card,
html.dark-mode[data-theme-scheme="violet"] .app-card,
html.dark-mode[data-theme-scheme="violet"] .account-card,
html.dark-mode[data-theme-scheme="violet"] .stat-panel,
html.dark-mode[data-theme-scheme="violet"] .stat-board,
html.dark-mode[data-theme-scheme="violet"] .security-key-panel {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cyber-violet, #9a72ff) 13%, transparent), transparent 42%),
        linear-gradient(315deg, color-mix(in srgb, var(--cyber-cyan, #7ef4ff) 10%, transparent), transparent 48%),
        rgba(12, 8, 28, 0.88);
}

html[data-theme-scheme="ice"] .side-menu,
html[data-theme-scheme="ice"] .top-bar,
html[data-theme-scheme="ice"] .card,
html[data-theme-scheme="ice"] .modal-content,
html[data-theme-scheme="ice"] .login-container,
html[data-theme-scheme="ice"] .connected-api-card,
html[data-theme-scheme="ice"] .app-card,
html[data-theme-scheme="ice"] .account-card,
html[data-theme-scheme="ice"] .stat-panel,
html[data-theme-scheme="ice"] .stat-board,
html[data-theme-scheme="ice"] .security-key-panel {
    border-radius: 6px;
    border-color: color-mix(in srgb, var(--cyber-cyan, #23c7ff) 34%, var(--cyber-line));
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 24%),
        linear-gradient(315deg, color-mix(in srgb, var(--cyber-cyan, #23c7ff) 10%, transparent), transparent 50%),
        color-mix(in srgb, var(--cyber-panel) 84%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        0 18px 42px rgba(30, 92, 150, 0.12);
}

html.dark-mode[data-theme-scheme="ice"] .side-menu,
html.dark-mode[data-theme-scheme="ice"] .top-bar,
html.dark-mode[data-theme-scheme="ice"] .card,
html.dark-mode[data-theme-scheme="ice"] .modal-content,
html.dark-mode[data-theme-scheme="ice"] .login-container,
html.dark-mode[data-theme-scheme="ice"] .connected-api-card,
html.dark-mode[data-theme-scheme="ice"] .app-card,
html.dark-mode[data-theme-scheme="ice"] .account-card,
html.dark-mode[data-theme-scheme="ice"] .stat-panel,
html.dark-mode[data-theme-scheme="ice"] .stat-board,
html.dark-mode[data-theme-scheme="ice"] .security-key-panel {
    background:
        linear-gradient(135deg, rgba(100, 212, 255, 0.13), transparent 28%),
        linear-gradient(315deg, color-mix(in srgb, var(--cyber-cyan, #23c7ff) 13%, transparent), transparent 52%),
        rgba(7, 21, 39, 0.92);
}

html[data-theme-scheme="carbon"] .side-menu,
html[data-theme-scheme="carbon"] .top-bar,
html[data-theme-scheme="carbon"] .card,
html[data-theme-scheme="carbon"] .modal-content,
html[data-theme-scheme="carbon"] .login-container,
html[data-theme-scheme="carbon"] .connected-api-card,
html[data-theme-scheme="carbon"] .app-card,
html[data-theme-scheme="carbon"] .account-card,
html[data-theme-scheme="carbon"] .stat-panel,
html[data-theme-scheme="carbon"] .stat-board,
html[data-theme-scheme="carbon"] .security-key-panel {
    border-radius: 0;
    border-color: color-mix(in srgb, var(--cyber-ink, #161a22) 22%, var(--cyber-line));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--gps-primary, #d5dae5) 7%, transparent), transparent 42%),
        var(--cyber-panel);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, white 8%, transparent),
        0 12px 24px rgba(0, 0, 0, 0.1);
}

html.dark-mode[data-theme-scheme="carbon"] .side-menu,
html.dark-mode[data-theme-scheme="carbon"] .top-bar,
html.dark-mode[data-theme-scheme="carbon"] .card,
html.dark-mode[data-theme-scheme="carbon"] .modal-content,
html.dark-mode[data-theme-scheme="carbon"] .login-container,
html.dark-mode[data-theme-scheme="carbon"] .connected-api-card,
html.dark-mode[data-theme-scheme="carbon"] .app-card,
html.dark-mode[data-theme-scheme="carbon"] .account-card,
html.dark-mode[data-theme-scheme="carbon"] .stat-panel,
html.dark-mode[data-theme-scheme="carbon"] .stat-board,
html.dark-mode[data-theme-scheme="carbon"] .security-key-panel {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--gps-primary, #d5dae5) 5%, transparent), transparent 45%),
        rgba(16, 18, 24, 0.93);
}

html[data-theme-scheme="ember"] .side-menu,
html[data-theme-scheme="ember"] .top-bar,
html[data-theme-scheme="ember"] .card,
html[data-theme-scheme="ember"] .modal-content,
html[data-theme-scheme="ember"] .login-container,
html[data-theme-scheme="ember"] .connected-api-card,
html[data-theme-scheme="ember"] .app-card,
html[data-theme-scheme="ember"] .account-card,
html[data-theme-scheme="ember"] .stat-panel,
html[data-theme-scheme="ember"] .stat-board,
html[data-theme-scheme="ember"] .security-key-panel {
    border-radius: 2px 12px 2px 12px;
    border-color: color-mix(in srgb, var(--gps-primary, #ff6f2a) 44%, var(--cyber-line));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--gps-primary, #ff6f2a) 18%, transparent) 0 3px, transparent 3px),
        linear-gradient(135deg, color-mix(in srgb, var(--cyber-amber, #ffc247) 10%, transparent), transparent 34%),
        color-mix(in srgb, var(--cyber-panel) 88%, transparent);
    box-shadow:
        inset 0 -3px 0 color-mix(in srgb, var(--gps-primary, #ff6f2a) 45%, transparent),
        0 18px 38px rgba(122, 44, 12, 0.14);
}

html.dark-mode[data-theme-scheme="ember"] .side-menu,
html.dark-mode[data-theme-scheme="ember"] .top-bar,
html.dark-mode[data-theme-scheme="ember"] .card,
html.dark-mode[data-theme-scheme="ember"] .modal-content,
html.dark-mode[data-theme-scheme="ember"] .login-container,
html.dark-mode[data-theme-scheme="ember"] .connected-api-card,
html.dark-mode[data-theme-scheme="ember"] .app-card,
html.dark-mode[data-theme-scheme="ember"] .account-card,
html.dark-mode[data-theme-scheme="ember"] .stat-panel,
html.dark-mode[data-theme-scheme="ember"] .stat-board,
html.dark-mode[data-theme-scheme="ember"] .security-key-panel {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--gps-primary, #ff6f2a) 22%, transparent) 0 3px, transparent 3px),
        linear-gradient(135deg, color-mix(in srgb, var(--cyber-amber, #ffc247) 9%, transparent), transparent 38%),
        rgba(24, 10, 4, 0.93);
}

.side-menu,
.menu-list a,
.menu-button,
.menu-text,
.menu-section-label,
.side-menu-build-version,
.top-bar,
.top-bar-title,
.top-bar-user,
.notification-summary,
.profile-info {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.main-container {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--gps-primary, #00d7ff) 8%, transparent), transparent 24%),
        transparent;
}

.side-menu {
    border-right: 1px solid var(--cyber-line-strong);
    border-radius: 0 !important;
    backdrop-filter: blur(18px);
}

.menu-list {
    gap: 5px;
}

.menu-list a,
.menu-button,
.menu-theme-toggle {
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--cyber-text);
}

.menu-list a:hover,
.menu-list a:focus-visible,
.menu-button:hover,
.menu-theme-toggle:hover {
    border-color: var(--cyber-line-strong);
    background: color-mix(in srgb, var(--gps-primary, #00d7ff) 10%, transparent);
    color: var(--cyber-ink);
    box-shadow: var(--cyber-glow);
}

.menu-list a.active {
    border-color: var(--cyber-line-strong);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--gps-primary, #00d7ff) 18%, transparent), color-mix(in srgb, var(--cyber-violet, #7b4dff) 10%, transparent)),
        var(--cyber-panel-strong);
    color: var(--cyber-ink);
    box-shadow: inset 4px 0 0 var(--cyber-magenta), var(--cyber-glow);
}

.menu-list a.active i,
.menu-list a:hover i,
.menu-button:hover i,
.menu-theme-toggle:hover i {
    color: var(--cyber-cyan);
}

.menu-section-label,
.top-bar-status-label,
.apps-command-kicker,
.connected-api-meta dt,
.app-card-eyebrow,
.status-pill,
.small-muted,
.form-text,
.side-menu-build-version {
    color: var(--cyber-muted);
}

.menu-divider hr,
.top-bar,
.modal-header,
.modal-footer,
.app-card-footer,
.notification-row,
.timeline-entry,
.connected-api-endpoint,
.connected-api-generate-key,
.app-card-stats div,
.apps-command-stats span,
.form-control,
.form-select,
.input-group-text,
.table,
.table th,
.table td {
    border-color: var(--cyber-line);
}

.top-bar {
    border-bottom: 1px solid var(--cyber-line-strong);
    border-radius: 0 !important;
    backdrop-filter: blur(18px);
}

.top-bar-brand {
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.dark-mode .top-bar-brand,
html.dark-mode .top-bar-brand {
    background: transparent;
}

.top-bar-logo {
    max-height: 34px;
}

.top-bar-status,
.top-bar-notification-button,
.mobile-menu-toggle,
.auth-theme-toggle,
.toggle-theme-button,
.theme-toggle,
.menu-theme-toggle {
    border-color: var(--cyber-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--gps-primary, #00d7ff) 8%, transparent);
    color: var(--cyber-text);
}

.top-bar-date-time,
.admin-page-title,
.content-header h2,
.content-header h1,
.card-title,
.card h5,
.card h4,
.card h3,
.connected-api-card h3,
.app-card h3,
.notification-row h4,
.timeline-entry strong,
.apps-command-panel strong,
.app-card-stats strong,
.dashboard-page h2,
.settings-page h2 {
    color: var(--cyber-ink);
}

.content-area > .content,
.content-area > main,
.dashboard-page,
.settings-page,
.container.py-4,
.content-shell {
    position: relative;
}

.content-header,
.page-header,
.admin-page-title {
    min-width: 0;
}

.content-header p,
.app-card p,
.connected-api-card p,
.connected-api-endpoint,
.app-card-summary,
.app-notification-preview,
.notification-row p,
.timeline-entry p,
.small-muted {
    color: var(--cyber-muted);
}

.button,
.btn,
.gradient-btn {
    border-radius: 8px;
    font-weight: 900;
}

.button.primary,
.btn-primary,
.gradient-btn {
    border: 1px solid color-mix(in srgb, var(--gps-primary, #00d7ff) 70%, transparent);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--cyber-cyan) 88%, #10162e), color-mix(in srgb, var(--cyber-violet) 74%, #10162e));
    color: #ffffff;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--gps-primary, #00d7ff) 16%, transparent);
}

.button.secondary,
.btn-outline-secondary,
.btn-secondary {
    border: 1px solid var(--cyber-line-strong);
    background: color-mix(in srgb, var(--gps-primary, #00d7ff) 7%, transparent);
    color: var(--cyber-ink);
}

.button:hover,
.button:focus-visible,
.btn:hover,
.btn:focus-visible,
.gradient-btn:hover,
.gradient-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--cyber-glow);
}

.form-control,
.form-select,
.input-group-text,
textarea.form-control {
    border-radius: 8px;
    background: color-mix(in srgb, var(--cyber-panel-strong) 84%, transparent);
    color: var(--cyber-text);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--cyber-cyan);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--gps-primary, #00d7ff) 18%, transparent);
    background: var(--cyber-panel-strong);
    color: var(--cyber-ink);
}

.form-control::placeholder,
textarea.form-control::placeholder {
    color: color-mix(in srgb, var(--cyber-muted) 82%, transparent);
}

.form-control[type="file"],
input[type="file"].form-control {
    display: block;
    min-height: 46px;
    height: 46px;
    padding: 5px 10px;
    line-height: 32px;
    overflow: hidden;
}

.form-control[type="file"]::file-selector-button,
input[type="file"].form-control::file-selector-button,
.form-control[type="file"]::-webkit-file-upload-button,
input[type="file"].form-control::-webkit-file-upload-button {
    height: 32px;
    min-height: 32px;
    margin: 0 12px 0 0;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 54%, var(--cyber-line));
    border-radius: 7px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 18%, transparent), color-mix(in srgb, var(--cyber-violet) 10%, transparent)),
        color-mix(in srgb, var(--cyber-panel-strong) 86%, transparent);
    color: var(--cyber-ink);
    font: inherit;
    font-weight: 900;
    line-height: 30px;
    vertical-align: middle;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.form-control[type="file"]::file-selector-button:hover,
input[type="file"].form-control::file-selector-button:hover,
.form-control[type="file"]::-webkit-file-upload-button:hover,
input[type="file"].form-control::-webkit-file-upload-button:hover {
    border-color: var(--gps-primary, var(--cyber-cyan));
    box-shadow: 0 0 16px color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 24%, transparent);
    transform: translateY(-1px);
}

.modal-content {
    overflow: hidden;
}

.modal-header {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--gps-primary, #00d7ff) 12%, transparent), color-mix(in srgb, var(--cyber-violet, #7b4dff) 7%, transparent)),
        transparent;
}

.modal-title {
    color: var(--cyber-ink);
    font-weight: 950;
}

.alert {
    border-radius: 8px;
    border: 1px solid var(--cyber-line);
}

.alert.success,
.alert-success {
    border-color: color-mix(in srgb, var(--cyber-green) 54%, var(--cyber-line));
    background: color-mix(in srgb, var(--cyber-green) 13%, transparent);
    color: color-mix(in srgb, var(--cyber-green) 52%, var(--cyber-ink));
}

.alert.error,
.alert-danger {
    border-color: color-mix(in srgb, var(--cyber-danger) 54%, var(--cyber-line));
    background: color-mix(in srgb, var(--cyber-danger) 12%, transparent);
    color: color-mix(in srgb, var(--cyber-danger) 56%, var(--cyber-ink));
}

.alert-warning {
    border-color: color-mix(in srgb, var(--cyber-amber) 54%, var(--cyber-line));
    background: color-mix(in srgb, var(--cyber-amber) 13%, transparent);
    color: color-mix(in srgb, var(--cyber-amber) 52%, var(--cyber-ink));
}

.status-pill {
    border-radius: 999px;
    background: color-mix(in srgb, var(--gps-primary, #00d7ff) 7%, transparent);
}

.status-pill.is-on {
    border-color: color-mix(in srgb, var(--cyber-green) 56%, var(--cyber-line));
    background: color-mix(in srgb, var(--cyber-green) 12%, transparent);
    color: color-mix(in srgb, var(--cyber-green) 54%, var(--cyber-ink));
}

.status-pill.is-off {
    border-color: color-mix(in srgb, var(--cyber-violet) 32%, var(--cyber-line));
    background: color-mix(in srgb, var(--cyber-violet) 9%, transparent);
}

.status-pill.is-danger {
    border-color: color-mix(in srgb, var(--cyber-danger) 56%, var(--cyber-line));
    background: color-mix(in srgb, var(--cyber-danger) 12%, transparent);
    color: var(--cyber-danger);
}

.account-link-verification-note,
.connected-api-setup-guide {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--cyber-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--gps-primary, #00d7ff) 7%, transparent);
    color: var(--cyber-text);
    font-size: 0.84rem;
    font-weight: 850;
    line-height: 1.45;
}

.account-link-verification-note {
    display: inline-flex;
    align-items: center;
}

.account-link-verification-note i {
    color: var(--cyber-cyan);
}

.connected-api-setup-guide {
    margin-top: 12px;
}

.connected-api-setup-guide strong {
    color: var(--cyber-ink);
    font-weight: 950;
}

.connected-api-setup-guide ol {
    margin: 0;
    padding-left: 1.2rem;
}

.connected-api-setup-guide li + li {
    margin-top: 5px;
}

.connected-api-setup-guide code {
    color: var(--cyber-ink);
    overflow-wrap: anywhere;
}

.admin-system-test-run-row {
    margin-top: 16px;
}

.admin-system-test-export-row {
    margin-top: 10px;
}

.connected-api-grid,
.apps-grid {
    align-items: stretch;
}

.connected-api-card,
.app-card {
    border-radius: 8px;
    overflow: hidden;
}

.connected-api-card {
    position: relative;
}

.connected-api-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--app-colour, var(--cyber-cyan));
}

.connected-api-icon,
.app-icon,
.notification-icon,
.top-bar-notification-button {
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.connected-api-meta,
.connected-api-meta div,
.connected-api-meta dd,
.connected-api-endpoint,
.app-card-summary,
.app-notification-preview {
    min-width: 0;
    overflow-wrap: anywhere;
}

.connected-api-endpoint,
.connected-api-generate-key,
.notification-row,
.timeline-entry,
.app-card-stats div,
.apps-command-stats span {
    border-radius: 8px;
    background: color-mix(in srgb, var(--gps-primary, #00d7ff) 6%, transparent);
}

.table {
    color: var(--cyber-text);
}

.table thead th,
.dash-thead th {
    background: color-mix(in srgb, var(--gps-primary, #00d7ff) 11%, transparent);
    color: var(--cyber-ink);
}

.table tbody tr:hover {
    background: color-mix(in srgb, var(--gps-primary, #00d7ff) 8%, transparent);
}

.badge,
.badge-pill,
.rounded-pill {
    border-radius: 999px;
}

.login-container,
.fido2-challenge-card,
.opt-challenge-card,
.choose-card,
.password-change-card,
.qr-code-card,
.fido2-card {
    border: 1px solid var(--cyber-line-strong);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--gps-primary, #00d7ff) 11%, transparent), transparent 38%),
        linear-gradient(315deg, rgba(255, 63, 148, 0.08), transparent 42%),
        var(--cyber-panel);
    box-shadow: var(--cyber-shadow);
}

body.auth-layout {
    min-height: 100dvh;
    background:
        radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--gps-primary, #00d7ff) 10%, transparent), transparent 34%),
        radial-gradient(circle at 82% 4%, rgba(255, 63, 148, 0.07), transparent 32%),
        linear-gradient(160deg, var(--cyber-bg), var(--cyber-bg-deep));
}

body.auth-layout.dark-mode {
    background:
        radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--gps-primary, #00e5ff) 11%, transparent), transparent 34%),
        radial-gradient(circle at 82% 4%, rgba(255, 79, 163, 0.08), transparent 32%),
        linear-gradient(160deg, #060915, #0a1023 56%, #17091e);
}

.login-container .logo,
.choose-logo,
.fido2-challenge-logo,
.opt-challenge-logo {
    max-height: 92px;
    object-fit: contain;
}

.login-logo-dark {
    display: none;
}

body.dark-mode .login-logo-light,
html.dark-mode .login-logo-light {
    display: none;
}

body.dark-mode .login-logo-dark,
html.dark-mode .login-logo-dark {
    display: block;
}

.galaxy-auth-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.88;
}

body > .login-container,
body > .challenge-container,
body > .setup-container,
.toggle-theme-container {
    position: relative;
    z-index: 1;
}

.build-version {
    color: var(--cyber-muted);
    font-weight: 800;
}

.apps-command-panel,
.app-card,
.connected-api-card {
    border-color: color-mix(in srgb, var(--app-colour, var(--cyber-cyan)) 28%, var(--cyber-line));
}

.app-card:hover,
.app-card:focus-visible,
.connected-api-card.is-verified {
    border-color: color-mix(in srgb, var(--app-colour, var(--cyber-cyan)) 68%, var(--cyber-line));
    box-shadow: 0 20px 46px color-mix(in srgb, var(--app-colour, var(--cyber-cyan)) 17%, transparent);
}

.app-card::before,
.connected-api-card::before {
    box-shadow: 0 0 18px color-mix(in srgb, var(--app-colour, var(--cyber-cyan)) 65%, transparent);
}

.settings-card-icon,
.dashboard-page i,
.admin-page-title i,
.content-header i {
    color: var(--cyber-cyan);
}

.menu-image-icon.xero-menu-icon {
    display: inline-block;
    width: 1.08rem;
    height: 1.08rem;
    background: var(--cyber-cyan);
    -webkit-mask: url("../resources/images/Xero_Icon.png") center / contain no-repeat;
    mask: url("../resources/images/Xero_Icon.png") center / contain no-repeat;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cyber-cyan) 58%, transparent));
    opacity: 0.96;
}

.theme-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 520ms ease;
}

.theme-transition-overlay.is-active {
    opacity: 1;
}

html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease, box-shadow 260ms ease !important;
}

.connected-api-oauth-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--cyber-cyan) 38%, var(--cyber-line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--cyber-cyan) 9%, transparent);
}

.connected-api-oauth-callout strong,
.connected-api-oauth-callout span {
    display: block;
}

.connected-api-oauth-callout strong {
    color: var(--cyber-ink);
    font-weight: 950;
}

.connected-api-oauth-callout span {
    color: var(--cyber-muted);
    font-size: 0.84rem;
}

.security-key-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin: 16px 0;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--cyber-amber) 52%, var(--cyber-line));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cyber-amber) 12%, transparent), transparent 58%),
        var(--cyber-panel);
    box-shadow: var(--cyber-shadow);
}

.security-key-panel strong {
    display: block;
    color: var(--cyber-ink);
    font-weight: 950;
}

.security-key-panel p {
    margin: 6px 0 0;
    color: var(--cyber-muted);
    line-height: 1.45;
}

.security-key-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.security-key-status {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb, var(--cyber-amber) 42%, var(--cyber-line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--cyber-amber) 13%, transparent);
    color: color-mix(in srgb, var(--cyber-amber) 70%, var(--cyber-ink));
    font-size: 0.76rem;
    font-weight: 950;
}

.security-key-status.is-verified {
    border-color: color-mix(in srgb, var(--cyber-green) 58%, var(--cyber-line));
    background: color-mix(in srgb, var(--cyber-green) 13%, transparent);
    color: color-mix(in srgb, var(--cyber-green) 72%, var(--cyber-ink));
}

.security-key-panel,
.stat-panel,
.stat-panel-wrapper,
.stat-board,
.stat-carousel,
.stat-item,
.area-graph-wrapper,
.bar-graph-wrapper,
.donut-chart-wrapper,
.pie-chart-wrapper,
.chart-container,
.software-page .card,
.software-page .modal-content,
.software-page .form-control,
.software-page .form-select,
.software-page textarea,
.software-page .table,
.admin-mini-toggle,
.employee-access-form .button,
.employee-detail-panel,
.employee-external-card,
.connected-api-form-section,
.connected-api-enabled-toggle,
.connected-api-key-vault {
    border-color: color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 34%, var(--cyber-line)) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 10%, transparent), transparent 56%),
        linear-gradient(315deg, color-mix(in srgb, var(--cyber-magenta) 7%, transparent), transparent 60%),
        color-mix(in srgb, var(--cyber-panel-strong) 88%, transparent) !important;
    color: var(--cyber-text) !important;
    box-shadow: var(--cyber-shadow);
}

.security-key-panel::before,
.stat-panel-wrapper::before,
.stat-item::before,
.grid-item::before,
.admin-stat-grid div::before,
.admin-table-card::before {
    background: linear-gradient(180deg, var(--gps-primary, var(--cyber-cyan)), var(--cyber-violet), var(--cyber-magenta));
}

.software-page label,
.software-page .form-label,
.software-page .modal-title,
.software-page h1,
.software-page h2,
.software-page h3,
.software-page h4,
.software-page h5,
.statboard-title h3,
.stat-value,
.panel-title,
.stat-panel-value,
.graph-legend strong,
.graph-range-extents strong {
    color: var(--cyber-ink) !important;
}

.software-page .text-muted,
.software-page small,
.stat-label,
.stat-panel-description,
.graph-range-extents,
.graph-legend {
    color: var(--cyber-muted) !important;
}

.area-graph-wrapper svg circle,
.bar-graph-wrapper svg circle,
.donut-chart-wrapper svg circle,
.pie-chart-wrapper svg circle {
    transform-box: fill-box;
    transform-origin: center;
}

.graph-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.graph-legend span,
.graph-legend li,
.graph-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1.2;
}

.graph-legend span::before,
.graph-legend li::before,
.graph-legend .legend-dot {
    content: "";
    flex: 0 0 10px;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px;
    min-height: 10px;
    max-width: 10px;
    max-height: 10px;
    border-radius: 999px;
    aspect-ratio: 1 / 1;
}

.galaxy-away-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(24px, 5vw, 64px);
    background:
        radial-gradient(circle at 25% 45%, color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 18%, transparent), transparent 30%),
        radial-gradient(circle at 74% 24%, color-mix(in srgb, var(--cyber-violet, #7b4dff) 14%, transparent), transparent 28%),
        linear-gradient(135deg, rgba(0, 0, 0, 0.78), rgba(8, 13, 29, 0.92));
    backdrop-filter: blur(18px) saturate(0.72);
    -webkit-backdrop-filter: blur(18px) saturate(0.72);
    color: #f7f9ff;
}

.galaxy-away-screen[hidden] {
    display: none !important;
}

.galaxy-away-active {
    overflow: hidden;
}

.galaxy-lock-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0.92;
    pointer-events: none;
}

.galaxy-lock-login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 360px;
    margin: 0;
    padding: 2rem 2rem 1rem;
    color: var(--cyber-text);
    isolation: isolate;
}

.galaxy-lock-login-card .logo {
    display: block;
    max-width: 80%;
    margin: 0 auto 1.5rem;
}

.galaxy-away-status {
    color: var(--cyber-muted);
}

.galaxy-lock-login-card form {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.galaxy-lock-login-card .form-group {
    display: grid;
    gap: 6px;
    margin: 0;
    text-align: left;
}

.galaxy-lock-login-card .form-group label {
    margin: 0;
    color: var(--cyber-ink);
    font-weight: 900;
}

.galaxy-away-status {
    min-height: 22px;
    margin-top: 12px;
    font-weight: 850;
}

.galaxy-away-countdown {
    position: absolute;
    left: 50%;
    bottom: clamp(22px, 5vw, 54px);
    z-index: 2;
    transform: translateX(-50%);
    min-width: 180px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 34%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--cyber-panel-strong) 70%, transparent);
    color: var(--cyber-ink);
    font-size: 0.82rem;
    font-weight: 950;
    text-align: center;
    backdrop-filter: blur(10px);
}

@media (max-width: 780px) {
    .galaxy-away-screen {
        justify-content: center;
        padding: 18px;
    }

    .galaxy-lock-login-card {
        width: min(520px, 100%);
        margin-right: 0;
    }

    .security-key-panel {
        grid-template-columns: 1fr;
    }

    .security-key-panel-actions {
        justify-content: flex-start;
    }
}

.area-graph-wrapper,
.bar-graph-wrapper,
.donut-chart-wrapper,
.pie-chart-wrapper,
.chart-container,
.grid-item,
.xero-stat-card,
.xero-card-heading,
.xero-dashboard-filters .filter-row,
.stat-panel,
.stat-panel-wrapper,
.stat-board,
.stat-carousel,
.stat-item,
.table-wrapper {
    border-color: var(--cyber-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cyber-cyan) 7%, transparent), transparent 48%),
        var(--cyber-panel);
    color: var(--cyber-text);
}

.stat-carousel,
.stat-item,
.stat-panel-wrapper,
.xero-stat-card,
.xero-card-heading,
.grid-item,
.admin-stat-grid div,
.admin-table-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--cyber-line);
    box-shadow: var(--cyber-shadow);
}

.stat-item::before,
.stat-panel-wrapper::before,
.grid-item::before,
.admin-stat-grid div::before,
.admin-table-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--cyber-cyan), var(--cyber-violet), var(--cyber-magenta));
    opacity: 0.82;
    box-shadow: 0 0 18px color-mix(in srgb, var(--cyber-cyan) 54%, transparent);
}

.stat-info,
.stat-panel-wrapper > *,
.grid-item > *,
.admin-table-card > * {
    position: relative;
    z-index: 1;
}

.statboard-title h3,
.stat-value,
.panel-title,
.stat-panel-value,
.currency-symbol,
.value-text,
.xero-card-heading strong,
.xero-stat-card strong,
.admin-stat-grid strong,
.admin-table-header h3,
.table-title h5,
.donut-chart-title,
.pie-chart-title,
.bar-graph-title {
    color: var(--cyber-ink);
    font-weight: 950;
}

.stat-label,
.stat-panel-description,
.stat-panel-description.inline,
.panel-filters,
.graph-range-extents,
.graph-legend,
.xero-card-heading span,
.xero-stat-card span,
.xero-stat-card small {
    color: var(--cyber-muted);
}

.stat-change,
.stat-panel-change {
    border-radius: 999px;
    padding: 4px 8px;
    font-weight: 950;
}

.stat-change.positive,
.stat-panel-change.positive {
    color: var(--cyber-green);
    background: color-mix(in srgb, var(--cyber-green) 12%, transparent);
}

.stat-change.negative,
.stat-panel-change.negative {
    color: var(--cyber-danger);
    background: color-mix(in srgb, var(--cyber-danger) 12%, transparent);
}

.stat-change.neutral,
.stat-panel-change.neutral {
    color: var(--cyber-muted);
    background: color-mix(in srgb, var(--cyber-muted) 12%, transparent);
}

.area-graph-filters input,
.area-graph-filters select,
.bar-graph-filters input,
.bar-graph-filters select,
.xero-dashboard-filters input,
.xero-dashboard-filters select,
.dataset-toggle-btn,
.dropbtn {
    border: 1px solid var(--cyber-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--cyber-panel-strong) 86%, transparent);
    color: var(--cyber-text);
}

.dataset-toggle-btn,
.dropbtn {
    color: var(--cyber-ink);
    font-weight: 950;
}

.dataset-dropdown,
.dropdown-content {
    border: 1px solid var(--cyber-line-strong);
    border-radius: 8px;
    background: var(--cyber-panel-strong);
    color: var(--cyber-text);
    box-shadow: var(--cyber-shadow);
}

.dataset-dropdown label,
.dropdown-content a {
    color: var(--cyber-text);
}

.dataset-dropdown input[type="checkbox"],
.connected-api-generate-key input[type="checkbox"],
.admin-mini-toggle input[type="checkbox"] {
    accent-color: var(--cyber-cyan);
}

.connected-api-enabled-toggle,
.connected-api-key-vault {
    border-color: color-mix(in srgb, var(--app-colour, var(--cyber-cyan)) 38%, var(--cyber-line));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--app-colour, var(--cyber-cyan)) 10%, transparent), transparent 56%),
        color-mix(in srgb, var(--cyber-panel-strong) 72%, transparent);
}

.connected-api-enabled-copy strong,
.connected-api-key-vault label {
    color: var(--cyber-ink);
}

.connected-api-enabled-copy small,
.connected-api-key-vault .form-text {
    color: var(--cyber-muted);
}

.connected-api-key-row .form-control {
    letter-spacing: 0;
}

.admin-table {
    --bs-table-color: var(--cyber-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--cyber-line);
    --bs-table-striped-color: var(--cyber-text);
    --bs-table-striped-bg: color-mix(in srgb, var(--cyber-cyan) 6%, transparent);
    --bs-table-hover-color: var(--cyber-ink);
    --bs-table-hover-bg: color-mix(in srgb, var(--cyber-cyan) 10%, transparent);
    margin: 0;
    color: var(--cyber-text);
}

.admin-table thead th {
    border-bottom: 1px solid var(--cyber-line-strong);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--cyber-cyan) 14%, transparent), color-mix(in srgb, var(--cyber-violet) 8%, transparent)),
        var(--cyber-panel-strong);
    color: var(--cyber-ink);
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.admin-table tbody td {
    background: transparent;
    color: var(--cyber-text);
}

.admin-table tbody tr {
    border-color: var(--cyber-line);
}

.employee-access-form {
    color: var(--cyber-text);
    gap: 6px;
}

.admin-mini-toggle {
    border-color: var(--cyber-line);
    background: color-mix(in srgb, var(--cyber-cyan) 7%, transparent);
    color: var(--cyber-text);
    min-height: 28px;
    padding: 4px 7px;
}

.employee-row:hover,
.employee-row:focus-visible {
    background: color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 9%, transparent) !important;
}

.employee-detail-modal .modal-content {
    border-color: color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 38%, var(--cyber-line));
}

.employee-external-card .app-icon {
    border: 1px solid color-mix(in srgb, var(--app-colour, var(--cyber-cyan)) 48%, var(--cyber-line));
    background: color-mix(in srgb, var(--app-colour, var(--cyber-cyan)) 12%, transparent);
    color: var(--app-colour, var(--cyber-cyan));
}

.menu-notification-badge {
    border-color: var(--cyber-panel-strong);
    background: var(--cyber-magenta);
    box-shadow: 0 0 12px rgba(255, 63, 148, 0.74);
}

.notification-row.is-unread {
    border-color: color-mix(in srgb, var(--cyber-amber) 56%, var(--cyber-line));
    background: color-mix(in srgb, var(--cyber-amber) 12%, var(--cyber-panel));
}

.notification-link,
a:not(.button):not(.btn):not(.app-card):not(.top-bar-brand) {
    color: color-mix(in srgb, var(--cyber-cyan) 74%, var(--cyber-violet));
}

.progress,
.startup-progress {
    border-radius: 999px;
    background: color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 12%, transparent);
}

.progress-bar,
.startup-progress-bar {
    background: linear-gradient(90deg, var(--cyber-cyan), var(--cyber-violet), var(--cyber-magenta));
}

.startup-screen {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 28px;
}

.startup-shell {
    width: min(1120px, 100%);
}

.startup-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 22px;
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid var(--cyber-line-strong);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 12%, transparent), transparent 34%),
        linear-gradient(315deg, rgba(255, 63, 148, 0.09), transparent 46%),
        var(--cyber-panel);
    box-shadow: var(--cyber-shadow);
}

.startup-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 18%, transparent), transparent 34%),
        linear-gradient(90deg, color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 13%, transparent), transparent 46%);
    opacity: 0.75;
}

.startup-panel > * {
    position: relative;
    z-index: 1;
}

.startup-header {
    display: grid;
    grid-template-columns: minmax(160px, 260px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(18px, 4vw, 36px);
}

.startup-header img {
    width: 100%;
    max-height: 116px;
    object-fit: contain;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.dark-mode .startup-header img,
html.dark-mode .startup-header img {
    background: transparent;
}

@media (max-width: 980px) {
    .side-menu,
    .top-bar {
        border-radius: 0 !important;
    }
}

.startup-kicker {
    color: var(--cyber-cyan);
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.startup-header h1 {
    margin: 6px 0 8px;
    color: var(--cyber-ink);
    font-size: clamp(2rem, 5vw, 4.4rem);
    line-height: 0.98;
    font-weight: 950;
}

.startup-header p {
    margin: 0;
    color: var(--cyber-muted);
    font-size: 1rem;
}

.startup-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.startup-metric {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--cyber-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 7%, transparent);
}

.startup-metric span,
.startup-metric small {
    display: block;
    color: var(--cyber-muted);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.startup-metric strong {
    display: block;
    margin: 6px 0 4px;
    color: var(--cyber-ink);
    font-size: clamp(1.45rem, 4vw, 2.4rem);
    line-height: 1;
    font-weight: 950;
}

.startup-connection-strip {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.startup-connection {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--app-colour, var(--cyber-cyan)) 36%, var(--cyber-line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--app-colour, var(--cyber-cyan)) 8%, transparent);
}

.startup-connection i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--app-colour, var(--cyber-cyan)) 14%, transparent);
    color: var(--app-colour, var(--cyber-cyan));
}

.startup-connection span {
    min-width: 0;
    color: var(--cyber-text);
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.startup-connection strong {
    color: var(--app-colour, var(--cyber-cyan));
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.startup-progress {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border: 1px solid var(--cyber-line);
}

.startup-progress-bar {
    width: 0;
    height: 100%;
    transition: width 520ms ease;
}

.startup-progress-text {
    margin-top: -10px;
    color: var(--cyber-muted);
    font-size: 0.86rem;
    font-weight: 850;
}

.startup-actions,
.startup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.startup-footer {
    color: var(--cyber-muted);
    font-size: 0.82rem;
    font-weight: 850;
}

@supports not selector(:has(*)) {
    body.auth-layout {
        min-height: 100dvh;
        background:
            radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--gps-primary, var(--cyber-cyan)) 10%, transparent), transparent 34%),
            radial-gradient(circle at 82% 4%, rgba(255, 63, 148, 0.07), transparent 32%),
            linear-gradient(160deg, var(--cyber-bg), var(--cyber-bg-deep));
    }
}

@media (max-width: 760px) {
    .startup-header,
    .startup-grid {
        grid-template-columns: 1fr;
    }

    .startup-header img {
        max-width: 280px;
    }
}

@media (max-width: 860px) {
    .side-menu {
        background: var(--cyber-panel-strong);
    }

    .top-bar-brand {
        max-width: min(64vw, 320px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* v1.9 studio system: quieter surfaces and the public-site colour language. */
.side-menu-particles { opacity: .24; mix-blend-mode: normal; }
.side-menu, .top-bar { background: color-mix(in srgb, var(--cyber-panel-strong) 96%, transparent); backdrop-filter: blur(18px); }
.content-container { background: transparent; }
.card, .modal-content, .login-container, .connected-api-card, .app-card, .account-card,
.admin-table-card, .stat-panel, .stat-panel-wrapper, .stat-board, .stat-carousel, .stat-item,
.security-key-panel, .startup-panel, .employee-detail-panel, .website-studio .studio-panel {
    border-radius: 14px !important;
    border-color: color-mix(in srgb, var(--gps-primary) 18%, var(--cyber-line)) !important;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--gps-primary) 4%, transparent), transparent 58%),
        var(--cyber-panel) !important;
    box-shadow: 0 18px 46px rgba(7, 20, 36, .13) !important;
}
html.dark-mode .card, html.dark-mode .modal-content, html.dark-mode .login-container,
html.dark-mode .connected-api-card, html.dark-mode .app-card, html.dark-mode .account-card,
html.dark-mode .admin-table-card, html.dark-mode .stat-panel, html.dark-mode .stat-panel-wrapper,
html.dark-mode .stat-board, html.dark-mode .stat-carousel, html.dark-mode .stat-item,
html.dark-mode .security-key-panel, html.dark-mode .startup-panel {
    box-shadow: 0 22px 55px rgba(0, 0, 0, .28) !important;
}
.button, .btn { border-radius: 10px !important; box-shadow: none !important; }
.button.primary, .btn-primary, .progress-bar, .startup-progress-bar {
    background: linear-gradient(135deg, color-mix(in srgb, var(--gps-primary) 88%, #061120), color-mix(in srgb, var(--gps-primary) 72%, var(--cyber-violet))) !important;
}
.stat-item::before, .stat-panel-wrapper::before, .grid-item::before, .admin-stat-grid div::before, .admin-table-card::before {
    width: 2px;
    background: linear-gradient(180deg, var(--gps-primary), var(--cyber-amber));
    box-shadow: none;
}
.menu-notification-badge { background: var(--cyber-amber); box-shadow: none; }
.primary-nav a, .menu-list a, .menu-button { letter-spacing: 0; }
.theme-transition-overlay { backdrop-filter: blur(8px); }