/* Copyright (c) 2025-2026 William Chesher | MIT License */
/* microverse admin shell - shared header/nav styles */

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================
   Color Schemes
   Using Tapestry palette families
   Duplicated from admin.css for standalone shell use
   ============================================ */

:root {
    /* Default: Neon Blue (electric neon) */
    --accent: #00d4ff;
    --accent-hover: #00b8e6;
    --accent-light: #33ddff;
    --accent-bg: rgba(0, 212, 255, 0.1);

    /* Premium easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

    /* Semantic colors - Light theme */
    --text-primary: #333;
    --text-secondary: #666;
    --text-muted: #888;
    --text-disabled: #aaa;

    --bg-primary: #fff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #f0f0f0;
    --bg-hover: #e8e8e8;

    --border-light: #eee;
    --border-default: #ddd;
    --border-dark: #ccc;

    /* Status colors */
    --success: #2e7d32;
    --success-light: #81c784;
    --success-bg: rgba(76, 175, 80, 0.15);

    --error: #c62828;
    --error-light: #ef5350;
    --error-bg: rgba(244, 67, 54, 0.15);

    --warning: #f57c00;
    --warning-light: #ffb74d;
    --warning-bg: rgba(255, 193, 7, 0.15);

    --info: #1976d2;
    --info-light: #64b5f6;
    --info-bg: rgba(33, 150, 243, 0.15);
}

/* Dark theme semantic color overrides */
html.dark-theme {
    --text-primary: #e0e0e0;
    --text-secondary: #bdbdbd;
    --text-muted: #888;
    --text-disabled: #666;

    --bg-primary: #1f2940;
    --bg-secondary: #2a3a55;
    --bg-tertiary: #3a4a65;
    --bg-hover: #3a4a65;

    --border-light: #3a4a65;
    --border-default: #4a5a75;
    --border-dark: #5a6a85;

    --success-light: #81c784;
    --error-light: #ef5350;
    --warning-light: #ffc107;
    --info-light: #64b5f6;
}

/* === COOL PASTELS === */

/* Ocean - soft blue */
body.scheme-ocean,
html.scheme-ocean {
    --accent: #60a7d2;
    --accent-hover: #4a97c2;
    --accent-light: #7cb7dc;
    --accent-bg: rgba(96, 167, 210, 0.1);
}

/* Jade - soft teal */
body.scheme-jade,
html.scheme-jade {
    --accent: #03b59f;
    --accent-hover: #00a58f;
    --accent-light: #33c5af;
    --accent-bg: rgba(3, 181, 159, 0.1);
}

/* Mint - soft mint green */
body.scheme-mint,
html.scheme-mint {
    --accent: #5dbd69;
    --accent-hover: #4dad59;
    --accent-light: #7dcd89;
    --accent-bg: rgba(93, 189, 105, 0.1);
}

/* === WARM PASTELS === */

/* Rose - soft pink */
body.scheme-rose,
html.scheme-rose {
    --accent: #d186ba;
    --accent-hover: #c176aa;
    --accent-light: #e1a6ca;
    --accent-bg: rgba(209, 134, 186, 0.1);
}

/* Peach - soft coral */
body.scheme-peach,
html.scheme-peach {
    --accent: #ffb07c;
    --accent-hover: #ffa06c;
    --accent-light: #ffc09c;
    --accent-bg: rgba(255, 176, 124, 0.1);
}

/* Gold - soft amber */
body.scheme-gold,
html.scheme-gold {
    --accent: #ddbb4c;
    --accent-hover: #cdab3c;
    --accent-light: #e7cb6c;
    --accent-bg: rgba(221, 187, 76, 0.1);
}

/* Blush - soft warm pink */
body.scheme-blush,
html.scheme-blush {
    --accent: #f0a0c0;
    --accent-hover: #e090b0;
    --accent-light: #f5b8d0;
    --accent-bg: rgba(240, 160, 192, 0.1);
}

/* === ELECTRIC NEON === */

/* Neon Blue - electric cyan */
body.scheme-neon-blue,
html.scheme-neon-blue {
    --accent: #00d4ff;
    --accent-hover: #00b8e6;
    --accent-light: #33ddff;
    --accent-bg: rgba(0, 212, 255, 0.15);
    --accent-glow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* Hot Pink - vibrant magenta */
body.scheme-hot-pink,
html.scheme-hot-pink {
    --accent: #ff1493;
    --accent-hover: #e60073;
    --accent-light: #ff69b4;
    --accent-bg: rgba(255, 20, 147, 0.15);
    --accent-glow: 0 0 10px rgba(255, 20, 147, 0.5);
}

/* Neon Green - electric lime */
body.scheme-neon-green,
html.scheme-neon-green {
    --accent: #39ff14;
    --accent-hover: #32e010;
    --accent-light: #7fff00;
    --accent-bg: rgba(57, 255, 20, 0.15);
    --accent-glow: 0 0 10px rgba(57, 255, 20, 0.5);
}

/* Neon Orange - electric orange */
body.scheme-neon-orange,
html.scheme-neon-orange {
    --accent: #ff6b35;
    --accent-hover: #e55a25;
    --accent-light: #ff8c5a;
    --accent-bg: rgba(255, 107, 53, 0.15);
    --accent-glow: 0 0 10px rgba(255, 107, 53, 0.5);
}

/* === ELECTRIC VIVID === */

/* Electric Blue - true electric blue */
body.scheme-electric-blue,
html.scheme-electric-blue {
    --accent: #0066ff;
    --accent-hover: #0052cc;
    --accent-light: #3385ff;
    --accent-bg: rgba(0, 102, 255, 0.15);
    --accent-glow: 0 0 10px rgba(0, 102, 255, 0.5);
}

/* Electric Yellow - vivid yellow */
body.scheme-electric-yellow,
html.scheme-electric-yellow {
    --accent: #fff01f;
    --accent-hover: #e6d800;
    --accent-light: #fff566;
    --accent-bg: rgba(255, 240, 31, 0.15);
    --accent-glow: 0 0 10px rgba(255, 240, 31, 0.5);
}

/* Electric Purple - vivid purple */
body.scheme-electric-purple,
html.scheme-electric-purple {
    --accent: #bf00ff;
    --accent-hover: #a000d9;
    --accent-light: #d24dff;
    --accent-bg: rgba(191, 0, 255, 0.15);
    --accent-glow: 0 0 10px rgba(191, 0, 255, 0.5);
}

/* Electric Red - vivid red */
body.scheme-electric-red,
html.scheme-electric-red {
    --accent: #ff003c;
    --accent-hover: #d90033;
    --accent-light: #ff4d6f;
    --accent-bg: rgba(255, 0, 60, 0.15);
    --accent-glow: 0 0 10px rgba(255, 0, 60, 0.5);
}

/* === RETRO GRID === */

/* Grid Crimson - deep red */
body.scheme-grid-crimson,
html.scheme-grid-crimson {
    --accent: #dc2626;
    --accent-hover: #b91c1c;
    --accent-light: #ef4444;
    --accent-bg: rgba(220, 38, 38, 0.15);
    --accent-glow: 0 0 12px rgba(220, 38, 38, 0.6);
}

/* Grid Cobalt - deep blue */
body.scheme-grid-cobalt,
html.scheme-grid-cobalt {
    --accent: #1d4ed8;
    --accent-hover: #1e40af;
    --accent-light: #3b82f6;
    --accent-bg: rgba(29, 78, 216, 0.15);
    --accent-glow: 0 0 12px rgba(29, 78, 216, 0.6);
}

/* Grid Gold - burnished gold */
body.scheme-grid-gold,
html.scheme-grid-gold {
    --accent: #ca8a04;
    --accent-hover: #a16207;
    --accent-light: #eab308;
    --accent-bg: rgba(202, 138, 4, 0.15);
    --accent-glow: 0 0 12px rgba(202, 138, 4, 0.6);
}

/* Grid Emerald - deep emerald */
body.scheme-grid-emerald,
html.scheme-grid-emerald {
    --accent: #047857;
    --accent-hover: #065f46;
    --accent-light: #059669;
    --accent-bg: rgba(4, 120, 87, 0.15);
    --accent-glow: 0 0 12px rgba(4, 120, 87, 0.6);
}

/* === CYBER DUSK === */

/* Dusk Violet - electric violet */
body.scheme-dusk-violet,
html.scheme-dusk-violet {
    --accent: #7c3aed;
    --accent-hover: #6d28d9;
    --accent-light: #a78bfa;
    --accent-bg: rgba(124, 58, 237, 0.15);
    --accent-glow: 0 0 15px rgba(124, 58, 237, 0.6);
    --accent-pulse: dusk-violet-pulse 2s ease-in-out infinite;
}

/* Dusk Rose - vivid crimson-rose */
body.scheme-dusk-rose,
html.scheme-dusk-rose {
    --accent: #e11d48;
    --accent-hover: #be123c;
    --accent-light: #fb7185;
    --accent-bg: rgba(225, 29, 72, 0.15);
    --accent-glow: 0 0 15px rgba(225, 29, 72, 0.6);
    --accent-pulse: dusk-rose-pulse 2s ease-in-out infinite;
}

/* Dusk Aqua - deep aqua */
body.scheme-dusk-aqua,
html.scheme-dusk-aqua {
    --accent: #0891b2;
    --accent-hover: #0e7490;
    --accent-light: #22d3ee;
    --accent-bg: rgba(8, 145, 178, 0.15);
    --accent-glow: 0 0 15px rgba(8, 145, 178, 0.6);
    --accent-pulse: dusk-aqua-pulse 2s ease-in-out infinite;
}

/* Dusk Acid - acid yellow-green */
body.scheme-dusk-acid,
html.scheme-dusk-acid {
    --accent: #84cc16;
    --accent-hover: #65a30d;
    --accent-light: #a3e635;
    --accent-bg: rgba(132, 204, 22, 0.15);
    --accent-glow: 0 0 15px rgba(132, 204, 22, 0.6);
    --accent-pulse: dusk-acid-pulse 2s ease-in-out infinite;
}

/* Cyber dusk pulse animations */
@keyframes dusk-violet-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

@keyframes dusk-rose-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}

@keyframes dusk-aqua-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.25); }
}

@keyframes dusk-acid-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}

/* Apply glow effects in dark theme for neon/retro/cyber schemes */
html.dark-theme.scheme-neon-blue .circle-btn,
html.dark-theme.scheme-hot-pink .circle-btn,
html.dark-theme.scheme-neon-green .circle-btn,
html.dark-theme.scheme-neon-orange .circle-btn,
html.dark-theme.scheme-electric-blue .circle-btn,
html.dark-theme.scheme-electric-yellow .circle-btn,
html.dark-theme.scheme-electric-purple .circle-btn,
html.dark-theme.scheme-electric-red .circle-btn,
html.dark-theme.scheme-grid-crimson .circle-btn,
html.dark-theme.scheme-grid-cobalt .circle-btn,
html.dark-theme.scheme-grid-gold .circle-btn,
html.dark-theme.scheme-grid-emerald .circle-btn,
html.dark-theme.scheme-dusk-violet .circle-btn,
html.dark-theme.scheme-dusk-rose .circle-btn,
html.dark-theme.scheme-dusk-aqua .circle-btn,
html.dark-theme.scheme-dusk-acid .circle-btn {
    box-shadow: var(--accent-glow), 0 3px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Apply pulse animation for cyber dusk schemes */
html.dark-theme.scheme-dusk-violet .stat-card .stat-icon,
html.dark-theme.scheme-dusk-rose .stat-card .stat-icon,
html.dark-theme.scheme-dusk-aqua .stat-card .stat-icon,
html.dark-theme.scheme-dusk-acid .stat-card .stat-icon {
    animation: var(--accent-pulse);
}

/* ============================================
   Admin Shell Styles

   These styles are used by both:
   - Standard admin pages (via main.css which includes these)
   - Full-screen apps like editor (standalone include)

   Use .admin-shell class on body for full-screen apps
   ============================================ */

/* Shell header - works with both #header and .admin-bar */
/* Dark header on light theme for contrast */
.admin-bar,
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5em;
    background: #1a1a2e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2em;
    z-index: 1000;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

/* Accent strip under admin bar */
.admin-bar::after,
#header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
}

/* Logo */
.admin-bar .admin-logo,
#header .logo,
#header .logo a {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3em;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    text-transform: lowercase;
    display: flex;
    align-items: center;
    gap: 0.4em;
}

/* Subtle floating drift on logo text */
@keyframes logo-drift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}

.admin-bar .admin-logo a,
#header .logo a {
    animation: logo-drift 8s ease-in-out infinite;
    animation-delay: 3s;
}

/* Logo icon */
#header .logo svg,
.admin-bar .admin-logo svg {
    width: 1.3em;
    height: 1.3em;
    color: #fff;
}

/* Logo subtitle text */
.admin-bar .admin-logo span,
#header .logo span {
    font-weight: 400;
    color: #aaa;
    font-size: 0.85em;
}

/* Instance badge (dev/local) - injected by JS for non-prod instances */
.instance-badge {
    font-size: 0.55em;
    font-weight: 500;
    color: var(--accent);
    background: none;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-left: 0.3em;
    vertical-align: middle;
}

/* Dev instance accent strip override */
html.instance-dev #header::after,
html.instance-dev .admin-bar::after {
    background: linear-gradient(90deg, #d4a054 0%, #e8c47a 100%);
}

/* Navigation container */
.admin-bar nav,
#header nav {
    display: flex;
    gap: 1.5em;
    align-items: center;
}

/* Navigation links */
.admin-bar nav a,
#header nav a {
    color: #aaa;
    font-weight: 400;
    text-decoration: none;
    text-transform: lowercase;
    transition: color 0.2s;
}

.admin-bar nav a:hover,
.admin-bar nav a.active,
#header nav a:hover,
#header nav a.active {
    color: var(--accent);
}

/* Navigation icons - larger for better visibility */
#header nav svg,
.admin-bar nav svg,
.nav-dropdown-toggle svg,
.nav-dropdown-menu svg {
    width: 1.32em;
    height: 1.32em;
    margin-right: 0.3em;
    vertical-align: middle;
}

/* Navigation dropdown */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-toggle {
    cursor: pointer;
    color: #aaa;
    font-weight: 400;
    text-decoration: none;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active {
    color: var(--accent);
}

.nav-dropdown-toggle::after {
    content: ' \25BC';
    font-size: 0.7em;
    margin-left: 0.3em;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    background: #1f2940;
    border: 1px solid #2a3a55;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    min-width: 180px;
    z-index: 1001;
    padding: 0.5em 0;
    padding-top: 1em;
}

/* Invisible bridge to maintain hover across gap */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -0.5em;
    left: 0;
    right: 0;
    height: 0.5em;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.5em 1em;
    color: #ddd;
    text-decoration: none;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    background: #2a3a55;
    color: var(--accent);
}

.nav-dropdown-menu a.active {
    color: var(--accent);
    background: rgba(42, 58, 85, 0.5);
}

/* Section headers within dropdown menus */
.nav-dropdown-section {
    padding: 0.6em 1em 0.25em;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #667;
    border-top: 1px solid #2a3a55;
    margin-top: 0.25em;
}

.nav-dropdown-section:first-child {
    border-top: none;
    margin-top: 0;
}

/* Navigation separator (pipe between main nav and settings) */
.nav-separator {
    color: #444;
    font-weight: 300;
    margin: 0 0.5em;
    user-select: none;
}

/* Settings dropdown (icon-only, right-aligned) */
.nav-settings-dropdown .nav-dropdown-toggle {
    padding: 0.25em;
}

.nav-settings-dropdown .nav-dropdown-toggle::after {
    display: none;
}

.nav-settings-dropdown .nav-dropdown-toggle i {
    font-size: 1.15em;
}

.nav-settings-dropdown .nav-dropdown-menu {
    transform: translateX(calc(100% - 2.25em));
}

/* Navigation submenu (flyout for miniverses) */
.nav-submenu-wrapper {
    position: relative;
}

.nav-submenu-wrapper > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 1em;
    color: #ddd;
    text-decoration: none;
    white-space: nowrap;
}

.nav-submenu-wrapper > a:hover {
    background: #2a3a55;
    color: var(--accent);
}

.nav-submenu-label {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.nav-submenu-arrow {
    margin-left: auto;
    padding-left: 0.75em;
    font-size: 0.7em;
    opacity: 0.8;
}

.nav-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 180px;
    max-height: 300px;
    overflow-y: auto;
    background: #1f2940;
    border: 1px solid #2a3a55;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1001;
}

.nav-submenu::before {
    content: '';
    position: absolute;
    top: 0;
    left: -0.5em;
    bottom: 0;
    width: 0.5em;
}

.nav-submenu-wrapper:hover .nav-submenu {
    display: block;
}

.nav-submenu-item {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em 1em;
    color: #ddd;
    text-decoration: none;
    white-space: nowrap;
}

.nav-submenu-item:hover {
    background: #2a3a55;
    color: var(--accent);
}

.nav-submenu-health {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.nav-submenu-health.online {
    background: #4caf50;
    box-shadow: 0 0 4px rgba(76, 175, 80, 0.5);
}

.nav-submenu-health.offline {
    background: #9e9e9e;
}

.nav-submenu-health.virtual {
    background: #a29bfe;
}

.nav-submenu-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.nav-submenu-empty {
    padding: 0.75em 1em;
    color: #888;
    font-size: 0.9em;
    font-style: italic;
}

.nav-submenu-action {
    display: block;
    padding: 0.5em 1em;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9em;
    border-top: 1px solid #2a3a55;
}

.nav-submenu-action:hover {
    background: #2a3a55;
}

/* User info section */
.admin-bar .user-info,
#header .user-info {
    display: flex;
    align-items: center;
    gap: 1em;
}

.admin-bar .user-info span,
#header .user-info span {
    color: #aaa;
    font-size: 0.9em;
}

.admin-bar .user-info .logout,
.admin-bar .user-info .logout-btn,
.admin-bar .user-info .docs-link,
#header .user-info .logout,
#header .user-info .docs-link {
    color: #888;
    font-size: 1.3em;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0.25em;
    display: flex;
    align-items: center;
}

/* User info icons - explicit sizing */
.admin-bar .user-info .logout svg,
.admin-bar .user-info .docs-link svg,
#header .user-info .logout svg,
#header .user-info .docs-link svg {
    width: 1.2em;
    height: 1.2em;
}

.admin-bar .user-info .logout:hover,
.admin-bar .user-info .logout-btn:hover,
.admin-bar .user-info .docs-link:hover,
#header .user-info .logout:hover,
#header .user-info .docs-link:hover {
    color: var(--accent);
}

/* ============================================
   Notification Bell (in user-info section)
   ============================================ */

.notification-bell {
    position: relative;
}

.notification-bell .bell-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #888;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-bell .bell-button:hover {
    color: var(--accent);
}

.notification-bell .bell-button .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    line-height: 1;
}

.notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    max-height: 400px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
    z-index: 1000;
    overflow: hidden;
}

.notification-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.notification-dropdown .dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    font-weight: 500;
}

.notification-dropdown .dropdown-header button {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 12px;
}

.notification-dropdown .dropdown-content {
    max-height: 340px;
    overflow-y: auto;
}

.notification-dropdown .empty-state {
    padding: 32px;
    text-align: center;
    color: #888;
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.notification-item:hover {
    background: #f8f8f8;
}

.notification-item.unread {
    background: var(--accent-bg);
}

.notification-item.unread:hover {
    background: rgba(138, 79, 255, 0.15);
}

.notification-item.priority-high {
    border-left: 3px solid #ef4444;
}

.notification-item .notification-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.notification-item .notification-content {
    flex: 1;
    min-width: 0;
}

.notification-item .notification-title {
    font-weight: 500;
    font-size: 13px;
    color: #333;
    line-height: 1.3;
}

.notification-item .notification-message {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-item .notification-time {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

/* ============================================
   Layout modes for full-screen apps
   ============================================ */

/* Standard layout - content below header with padding */
body.layout-standard main {
    padding-top: 5em;
}

/* Fullscreen layout - minimal padding, content fills viewport */
body.layout-fullscreen {
    overflow: hidden;
}

body.layout-fullscreen .app-content {
    position: fixed;
    top: 3.5em;  /* Below shell header */
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* When app has its own header below shell */
body.layout-fullscreen .app-header {
    height: 3em;
    background: #1a1a1a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1em;
}

body.layout-fullscreen .app-main {
    position: absolute;
    top: 3em;  /* Below app header */
    left: 0;
    right: 0;
    bottom: 0;
}

/* ============================================
   Context Bar - secondary toolbar below shell header
   Used for iframe viewers, editors, etc.
   ============================================ */

.context-bar {
    height: 3em;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5em;
    flex-shrink: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

.context-bar .left,
.context-bar .right {
    display: flex;
    align-items: center;
    gap: 1em;
}

.context-bar .back-btn {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: #666;
    text-decoration: none;
    font-size: 0.9em;
    padding: 0.4em 0.8em;
    border-radius: 4px;
    transition: all 0.2s;
}

.context-bar .back-btn:hover {
    background: #eee;
    color: #333;
}

.context-bar .title {
    font-weight: 500;
    color: #333;
    font-size: 1em;
}

.context-bar .title .subtitle {
    color: #888;
    font-weight: 400;
    font-size: 0.85em;
    margin-left: 0.5em;
}

/* Theme toggle (reusable) */
.theme-toggle {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.theme-toggle button {
    padding: 0.35em 0.75em;
    border: none;
    background: #fff;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s;
    color: #666;
    font-family: inherit;
}

.theme-toggle button.active {
    background: var(--accent);
    color: #fff;
}

.theme-toggle button:hover:not(.active) {
    background: #f0f0f0;
}

/* Color preview swatches */
.color-preview {
    display: flex;
    gap: 0.25em;
}

.color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
}

/* ============================================
   Iframe layout - for embedded content viewers
   ============================================ */

body.layout-iframe {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.layout-iframe .context-bar {
    margin-top: 3.5em; /* Below fixed shell header */
}

body.layout-iframe .iframe-container {
    flex: 1;
    position: relative;
    background: #f5f5f5;
}

body.layout-iframe .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

body.layout-iframe .iframe-container .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #888;
    font-size: 1.1em;
}

body.layout-iframe .iframe-container.loaded .loading {
    display: none;
}

/* ============================================
   Profile link in header
   ============================================ */

.profile-link {
    color: #aaa;
    text-decoration: none;
    transition: color 0.2s;
}

.profile-link:hover {
    color: var(--accent);
}

/* ============================================
   Dark Theme
   Applied via html.dark-theme class
   ============================================ */

html.dark-theme,
html.dark-theme body {
    background: #1a1a2e;
    color: #e0e0e0;
}

/* Dark theme: Light/white header for contrast with dark content */
html.dark-theme #header,
html.dark-theme .admin-bar,
html.dark-theme #header,
html.dark-theme .admin-bar {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

html.dark-theme #header .logo a,
html.dark-theme .admin-bar .admin-logo,
html.dark-theme #header .logo a,
html.dark-theme .admin-bar .admin-logo {
    color: #222;
}

html.dark-theme #header .logo svg,
html.dark-theme .admin-bar .admin-logo svg,
html.dark-theme #header .logo svg,
html.dark-theme .admin-bar .admin-logo svg {
    color: var(--accent) !important;
}

html.dark-theme #header .logo span,
html.dark-theme .admin-bar .admin-logo span,
html.dark-theme #header .logo span,
html.dark-theme .admin-bar .admin-logo span {
    color: #888;
}

html.dark-theme #header nav a,
html.dark-theme .admin-bar nav a,
html.dark-theme .nav-dropdown-toggle,
html.dark-theme #header nav a,
html.dark-theme .admin-bar nav a,
html.dark-theme .nav-dropdown-toggle {
    color: #666;
}

html.dark-theme #header nav a:hover,
html.dark-theme #header nav a.active,
html.dark-theme .admin-bar nav a:hover,
html.dark-theme .admin-bar nav a.active,
html.dark-theme .nav-dropdown-toggle:hover,
html.dark-theme .nav-dropdown-toggle.active,
html.dark-theme #header nav a:hover,
html.dark-theme #header nav a.active,
html.dark-theme .admin-bar nav a:hover,
html.dark-theme .admin-bar nav a.active,
html.dark-theme .nav-dropdown-toggle:hover,
html.dark-theme .nav-dropdown-toggle.active {
    color: var(--accent);
}

html.dark-theme .nav-dropdown-menu,
html.dark-theme .nav-dropdown-menu {
    background: #fff;
    border-color: #e0e0e0;
}

html.dark-theme .nav-dropdown-menu a,
html.dark-theme .nav-dropdown-menu a {
    color: #333;
}

html.dark-theme .nav-dropdown-menu a:hover,
html.dark-theme .nav-dropdown-menu a:hover {
    background: #f5f5f5;
    color: var(--accent);
}

/* Dark theme submenu (flyout) */
html.dark-theme .nav-submenu,
html.dark-theme .nav-submenu {
    background: #fff;
    border-color: #e0e0e0;
}

html.dark-theme .nav-submenu-wrapper > a,
html.dark-theme .nav-submenu-wrapper > a {
    color: #333;
}

html.dark-theme .nav-submenu-wrapper > a:hover,
html.dark-theme .nav-submenu-wrapper > a:hover {
    background: #f5f5f5;
    color: var(--accent);
}

html.dark-theme .nav-submenu-item,
html.dark-theme .nav-submenu-item {
    color: #333;
}

html.dark-theme .nav-submenu-item:hover,
html.dark-theme .nav-submenu-item:hover {
    background: #f5f5f5;
    color: var(--accent);
}

html.dark-theme .nav-submenu-empty,
html.dark-theme .nav-submenu-empty {
    color: #666;
}

html.dark-theme .nav-submenu-action,
html.dark-theme .nav-submenu-action {
    border-color: #e0e0e0;
}

html.dark-theme .nav-submenu-action:hover,
html.dark-theme .nav-submenu-action:hover {
    background: #f5f5f5;
}

html.dark-theme #header .user-info span,
html.dark-theme .admin-bar .user-info span,
html.dark-theme #header .user-info span,
html.dark-theme .admin-bar .user-info span {
    color: #666;
}

html.dark-theme .profile-link,
html.dark-theme .profile-link {
    color: #666;
}

html.dark-theme .profile-link:hover,
html.dark-theme .profile-link:hover {
    color: var(--accent);
}

html.dark-theme #header .user-info .logout,
html.dark-theme #header .user-info .docs-link,
html.dark-theme .admin-bar .user-info .logout,
html.dark-theme .admin-bar .user-info .docs-link,
html.dark-theme #header .user-info .logout,
html.dark-theme #header .user-info .docs-link,
html.dark-theme .admin-bar .user-info .logout,
html.dark-theme .admin-bar .user-info .docs-link {
    color: #999;
}

html.dark-theme #header .user-info .logout:hover,
html.dark-theme #header .user-info .docs-link:hover,
html.dark-theme .admin-bar .user-info .logout:hover,
html.dark-theme .admin-bar .user-info .docs-link:hover,
html.dark-theme #header .user-info .logout:hover,
html.dark-theme #header .user-info .docs-link:hover,
html.dark-theme .admin-bar .user-info .logout:hover,
html.dark-theme .admin-bar .user-info .docs-link:hover {
    color: var(--accent);
}

/* Page header icon styling - black on light, white on dark */
main h1 svg,
.page-header h1 svg {
    color: #000;
    margin-right: 0.3em;
}

html.dark-theme main h1,
html.dark-theme main h2,
html.dark-theme main h3 {
    color: #eee;
}

html.dark-theme main h1 svg,
html.dark-theme .page-header h1 svg {
    color: #fff;
}

html.dark-theme .card,
html.dark-theme .profile-card,
html.dark-theme .dashboard-card {
    background: #1f2940;
    border-color: #2a3a55;
}

html.dark-theme .card-header {
    border-color: #2a3a55;
}

html.dark-theme table {
    background: #1f2940;
}

html.dark-theme table th {
    background: #16213e;
    color: #ccc;
}

html.dark-theme table td {
    border-color: #2a3a55;
    color: #ddd;
}

html.dark-theme table tr:hover td {
    background: #2a3a55;
}

html.dark-theme .stat-card {
    background: #1f2940;
    border-color: #2a3a55;
}

html.dark-theme .stat-card .label {
    color: #aaa;
}

html.dark-theme .button {
    background: #2a3a55;
    border-color: #3a4a65;
    color: #ddd;
}

html.dark-theme .button:hover {
    background: #3a4a65;
}

html.dark-theme .button.alt {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

html.dark-theme input[type="text"],
html.dark-theme input[type="password"],
html.dark-theme input[type="email"],
html.dark-theme select,
html.dark-theme textarea {
    background: #16213e;
    border-color: #2a3a55;
    color: #ddd;
}

html.dark-theme input:focus,
html.dark-theme select:focus,
html.dark-theme textarea:focus {
    border-color: var(--accent);
}

html.dark-theme .context-bar {
    background: #16213e;
    border-color: #2a3a55;
}

html.dark-theme .context-bar .back-btn {
    color: #aaa;
}

html.dark-theme .context-bar .back-btn:hover {
    background: #2a3a55;
    color: #eee;
}

html.dark-theme .context-bar .title {
    color: #eee;
}

html.dark-theme .theme-toggle {
    border-color: #2a3a55;
}

html.dark-theme .theme-toggle button {
    background: #1f2940;
    color: #aaa;
}

html.dark-theme .theme-toggle button:hover:not(.active) {
    background: #2a3a55;
}

html.dark-theme .theme-toggle button.active {
    background: var(--accent);
    color: #fff;
}

html.dark-theme .toggle-group {
    border-color: #2a3a55;
}

html.dark-theme .toggle-group button {
    background: #1f2940;
    color: #aaa;
}

html.dark-theme .toggle-group button:hover:not(.active) {
    background: #2a3a55;
}

html.dark-theme .toggle-group button.active {
    background: var(--accent);
    color: #fff;
}

/* ============================================
   Dark Theme: Neon Cyberpunk Enhancement
   Space galaxy background with neon glow effects
   ============================================ */

/* Neon color palette for dark theme */
html.dark-theme,
html.dark-theme body {
    --neon-purple: #c47cff;
    --neon-cyan: #7cffdc;
    --neon-blue: #7cc8ff;
    --neon-pink: #ff7cdc;
    --neon-orange: #ffb07c;
    --dark-bg: #0a0a1a;
    --darker-bg: #050510;
    --card-bg: rgba(15, 15, 35, 0.85);
}

/* Space galaxy background */
html.dark-theme,
html.dark-theme body {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(196, 124, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(124, 255, 220, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(124, 200, 255, 0.05) 0%, transparent 60%),
        linear-gradient(180deg, #050510 0%, #0a0a1a 50%, #0f0f25 100%);
    background-attachment: fixed;
}

/* Animated grid overlay for dark theme main content */
html.dark-theme main::before,
html.dark-theme main::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(90deg, rgba(124, 255, 220, 0.02) 1px, transparent 1px),
        linear-gradient(rgba(124, 255, 220, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: -1;
}

/* Subtle scanline effect */
html.dark-theme main::after,
html.dark-theme main::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.03) 0px,
        rgba(0, 0, 0, 0.03) 1px,
        transparent 1px,
        transparent 3px
    );
    z-index: -1;
}

/* Neon stat cards */
html.dark-theme .stat-card,
html.dark-theme .stat-card {
    background: var(--card-bg);
    border: 1px solid rgba(124, 255, 220, 0.2);
    border-radius: 8px;
    box-shadow:
        0 0 20px rgba(124, 255, 220, 0.1),
        inset 0 0 20px rgba(124, 255, 220, 0.02);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

html.dark-theme .stat-card:hover,
html.dark-theme .stat-card:hover {
    border-color: rgba(196, 124, 255, 0.4);
    box-shadow:
        0 0 30px rgba(196, 124, 255, 0.2),
        inset 0 0 30px rgba(196, 124, 255, 0.03);
    transform: translateY(-2px);
}

/* Stat card icon glow */
html.dark-theme .stat-card .stat-icon,
html.dark-theme .stat-card .stat-icon {
    color: var(--neon-cyan);
    text-shadow: 0 0 15px var(--neon-cyan);
    transition: all 0.3s ease;
}

html.dark-theme .stat-card:hover .stat-icon,
html.dark-theme .stat-card:hover .stat-icon {
    color: var(--neon-purple);
    text-shadow: 0 0 20px var(--neon-purple);
}

/* Stat card number glow */
html.dark-theme .stat-card .number,
html.dark-theme .stat-card .number {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Alternate stat card colors */
html.dark-theme .stat-card.alt,
html.dark-theme .stat-card.alt {
    border-color: rgba(196, 124, 255, 0.2);
    box-shadow:
        0 0 20px rgba(196, 124, 255, 0.1),
        inset 0 0 20px rgba(196, 124, 255, 0.02);
}

html.dark-theme .stat-card.alt .stat-icon,
html.dark-theme .stat-card.alt .stat-icon {
    color: var(--neon-purple);
    text-shadow: 0 0 15px var(--neon-purple);
}

html.dark-theme .stat-card.success,
html.dark-theme .stat-card.success {
    border-color: rgba(124, 200, 255, 0.2);
    box-shadow:
        0 0 20px rgba(124, 200, 255, 0.1),
        inset 0 0 20px rgba(124, 200, 255, 0.02);
}

html.dark-theme .stat-card.success .stat-icon,
html.dark-theme .stat-card.success .stat-icon {
    color: var(--neon-blue);
    text-shadow: 0 0 15px var(--neon-blue);
}

html.dark-theme .stat-card.warning,
html.dark-theme .stat-card.warning {
    border-color: rgba(255, 176, 124, 0.2);
    box-shadow:
        0 0 20px rgba(255, 176, 124, 0.1),
        inset 0 0 20px rgba(255, 176, 124, 0.02);
}

html.dark-theme .stat-card.warning .stat-icon,
html.dark-theme .stat-card.warning .stat-icon {
    color: var(--neon-orange);
    text-shadow: 0 0 15px var(--neon-orange);
}

/* Neon cards */
html.dark-theme .card,
html.dark-theme .profile-card,
html.dark-theme .dashboard-card,
html.dark-theme .card,
html.dark-theme .profile-card,
html.dark-theme .dashboard-card {
    background: var(--card-bg);
    border: 1px solid rgba(124, 255, 220, 0.15);
    border-radius: 8px;
    box-shadow:
        0 0 25px rgba(124, 255, 220, 0.08),
        inset 0 0 25px rgba(124, 255, 220, 0.01);
    backdrop-filter: blur(10px);
}

html.dark-theme .card-header,
html.dark-theme .card-header {
    border-color: rgba(124, 255, 220, 0.1);
}

html.dark-theme .card-header h2,
html.dark-theme .card-header h2 {
    color: #fff;
    text-shadow: none;
}

/* Neon tables */
html.dark-theme table,
html.dark-theme table {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0;
}

html.dark-theme table th,
html.dark-theme table th {
    background: rgba(10, 10, 30, 0.6);
    color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(124, 255, 220, 0.3);
    border-bottom: 1px solid rgba(124, 255, 220, 0.2);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.5px;
}

html.dark-theme table td,
html.dark-theme table td {
    border-color: rgba(124, 255, 220, 0.08);
    color: #d0d0e0;
}

html.dark-theme table tr:hover td,
html.dark-theme table tr:hover td {
    background: rgba(124, 255, 220, 0.05);
}

/* Inline table icons - white, no glow */
html.dark-theme td > svg,
html.dark-theme td > i svg,
html.dark-theme td > svg,
html.dark-theme td > i svg {
    color: #fff !important;
    text-shadow: none !important;
}

/* Neon badges */
html.dark-theme .badge.online,
html.dark-theme .badge.online {
    background: rgba(124, 255, 220, 0.15);
    color: var(--neon-cyan);
    border: 1px solid rgba(124, 255, 220, 0.3);
    text-shadow: 0 0 8px var(--neon-cyan);
}

html.dark-theme .badge.offline,
html.dark-theme .badge.offline {
    background: rgba(255, 124, 160, 0.15);
    color: #ff7ca0;
    border: 1px solid rgba(255, 124, 160, 0.3);
}

html.dark-theme .badge.admin,
html.dark-theme .badge.admin {
    background: rgba(196, 124, 255, 0.15);
    color: var(--neon-purple);
    border: 1px solid rgba(196, 124, 255, 0.3);
    text-shadow: 0 0 8px var(--neon-purple);
}

/* Neon buttons */
html.dark-theme .button,
html.dark-theme .button {
    background: linear-gradient(135deg, rgba(124, 255, 220, 0.1), rgba(196, 124, 255, 0.1));
    border: 1px solid rgba(124, 255, 220, 0.3);
    color: var(--neon-cyan);
    box-shadow: 0 0 15px rgba(124, 255, 220, 0.1);
    transition: all 0.3s ease;
}

html.dark-theme .button:hover,
html.dark-theme .button:hover {
    background: linear-gradient(135deg, rgba(124, 255, 220, 0.2), rgba(196, 124, 255, 0.2));
    border-color: var(--neon-purple);
    color: #fff;
    box-shadow: 0 0 25px rgba(196, 124, 255, 0.25);
    transform: translateY(-1px);
}

html.dark-theme .button.alt,
html.dark-theme .button.alt {
    background: transparent;
    border-color: var(--neon-purple);
    color: var(--neon-purple);
}

html.dark-theme .button.alt:hover,
html.dark-theme .button.alt:hover {
    background: rgba(196, 124, 255, 0.15);
    box-shadow: 0 0 20px rgba(196, 124, 255, 0.2);
}

/* Neon page title */
html.dark-theme main h1,
html.dark-theme main h1 {
    color: #fff;
    text-shadow: 0 0 30px rgba(124, 255, 220, 0.3);
}

html.dark-theme main h1 svg,
html.dark-theme main h1 svg {
    color: #fff;
}

/* Neon links */
html.dark-theme a,
html.dark-theme a {
    color: var(--neon-cyan);
    transition: all 0.2s ease;
}

html.dark-theme a:hover,
html.dark-theme a:hover {
    color: var(--neon-purple);
    text-shadow: 0 0 10px var(--neon-purple);
}

/* Footer - white text on dark theme */
html.dark-theme .site-footer,
html.dark-theme .site-footer {
    color: #fff;
}

html.dark-theme .site-footer a,
html.dark-theme .site-footer a {
    color: #fff;
}

html.dark-theme .site-footer a:hover,
html.dark-theme .site-footer a:hover {
    color: var(--accent);
    text-shadow: none;
}

/* Neon background effects container - hidden in light mode */
.neon-bg-effects {
    display: none;
}

html.dark-theme .neon-bg-effects,
html.dark-theme .neon-bg-effects {
    display: block;
}

/* Radial glow overlay */
html.dark-theme .glow-overlay,
html.dark-theme .glow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 15% 25%, rgba(196, 124, 255, 0.12) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 75%, rgba(124, 255, 220, 0.12) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(124, 200, 255, 0.08) 0%, transparent 55%);
    animation: glowPulse 10s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Floating particles */
html.dark-theme .particles,
html.dark-theme .particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

html.dark-theme .particle,
html.dark-theme .particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--neon-cyan);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--neon-cyan), 0 0 16px var(--neon-cyan);
    animation: particleFloat 20s infinite ease-in-out;
    opacity: 0;
}

html.dark-theme .particle:nth-child(1),
html.dark-theme .particle:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    animation-duration: 22s;
}

html.dark-theme .particle:nth-child(2),
html.dark-theme .particle:nth-child(2) {
    left: 25%;
    animation-delay: 3s;
    animation-duration: 18s;
    background: var(--neon-purple);
    box-shadow: 0 0 8px var(--neon-purple), 0 0 16px var(--neon-purple);
}

html.dark-theme .particle:nth-child(3),
html.dark-theme .particle:nth-child(3) {
    left: 45%;
    animation-delay: 6s;
    animation-duration: 24s;
}

html.dark-theme .particle:nth-child(4),
html.dark-theme .particle:nth-child(4) {
    left: 65%;
    animation-delay: 2s;
    animation-duration: 20s;
    background: var(--neon-pink);
    box-shadow: 0 0 8px var(--neon-pink), 0 0 16px var(--neon-pink);
}

html.dark-theme .particle:nth-child(5),
html.dark-theme .particle:nth-child(5) {
    left: 80%;
    animation-delay: 5s;
    animation-duration: 16s;
    background: var(--neon-blue);
    box-shadow: 0 0 8px var(--neon-blue), 0 0 16px var(--neon-blue);
}

html.dark-theme .particle:nth-child(6),
html.dark-theme .particle:nth-child(6) {
    left: 92%;
    animation-delay: 8s;
    animation-duration: 19s;
    background: var(--neon-orange);
    box-shadow: 0 0 8px var(--neon-orange), 0 0 16px var(--neon-orange);
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
        transform: translateY(95vh) scale(1);
    }
    95% {
        opacity: 0.8;
        transform: translateY(5vh) scale(1);
    }
    100% {
        transform: translateY(-5vh) scale(0);
        opacity: 0;
    }
}

/* ============================================
   SPACE CYBERPUNK THEME
   Curated theme with deep violet backgrounds,
   stark white buttons/icons, and neon purple glows.
   Activated via body.theme-space-cyberpunk
   ============================================ */

/* Space Cyberpunk color palette */
body.theme-space-cyberpunk,
html.theme-space-cyberpunk body {
    --space-void: #0a0515;
    --space-deep: #0d0221;
    --space-mid: #150734;
    --space-surface: #1a0a3e;
    --space-elevated: #220b4a;

    --violet-core: #9945ff;
    --violet-bright: #c47cff;
    --violet-glow: #d4a5ff;
    --violet-dim: #7b2cbf;

    --magenta-accent: #ff45ff;
    --cyan-accent: #05d9e8;

    --white-pure: #ffffff;
    --white-soft: #f0f0ff;
    --white-muted: #d0d0e8;

    /* Override standard accent vars for consistency */
    --accent: var(--violet-bright);
    --accent-hover: var(--violet-core);
    --accent-light: var(--violet-glow);
    --accent-bg: rgba(196, 124, 255, 0.15);
    --accent-glow: 0 0 20px rgba(196, 124, 255, 0.6);
}

/* Deep space background with gradient nebula */
body.theme-space-cyberpunk,
html.theme-space-cyberpunk body {
    background:
        radial-gradient(ellipse at 10% 10%, rgba(153, 69, 255, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 20%, rgba(255, 69, 255, 0.12) 0%, transparent 35%),
        radial-gradient(ellipse at 30% 80%, rgba(5, 217, 232, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 70%, rgba(196, 124, 255, 0.1) 0%, transparent 45%),
        linear-gradient(180deg, var(--space-void) 0%, var(--space-deep) 30%, var(--space-mid) 70%, var(--space-surface) 100%);
    background-attachment: fixed;
    color: var(--white-soft);
}

/* Animated grid overlay */
body.theme-space-cyberpunk::before,
html.theme-space-cyberpunk body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(90deg, rgba(196, 124, 255, 0.04) 1px, transparent 1px),
        linear-gradient(rgba(196, 124, 255, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Scanline effect */
body.theme-space-cyberpunk::after,
html.theme-space-cyberpunk body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.02) 0px,
        rgba(0, 0, 0, 0.02) 1px,
        transparent 1px,
        transparent 3px
    );
    z-index: 0;
}

/* ========== SPACE CYBERPUNK HEADER ========== */

body.theme-space-cyberpunk #header,
body.theme-space-cyberpunk .admin-bar,
html.theme-space-cyberpunk #header,
html.theme-space-cyberpunk .admin-bar {
    background: linear-gradient(135deg, var(--space-deep) 0%, var(--space-mid) 100%);
    border-bottom: 1px solid rgba(196, 124, 255, 0.3);
    box-shadow:
        0 0 30px rgba(196, 124, 255, 0.2),
        inset 0 -1px 0 rgba(196, 124, 255, 0.2);
}

/* Accent strip - vibrant gradient */
body.theme-space-cyberpunk #header::after,
body.theme-space-cyberpunk .admin-bar::after,
html.theme-space-cyberpunk #header::after,
html.theme-space-cyberpunk .admin-bar::after {
    background: linear-gradient(90deg,
        var(--violet-core) 0%,
        var(--magenta-accent) 25%,
        var(--cyan-accent) 50%,
        var(--magenta-accent) 75%,
        var(--violet-core) 100%);
    background-size: 200% 100%;
    animation: headerGradient 6s linear infinite;
    height: 2px;
}

@keyframes headerGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Logo - white with intense glow */
body.theme-space-cyberpunk #header .logo a,
body.theme-space-cyberpunk .admin-bar .admin-logo,
html.theme-space-cyberpunk #header .logo a,
html.theme-space-cyberpunk .admin-bar .admin-logo {
    color: var(--white-pure);
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 30px rgba(255, 255, 255, 0.4),
        0 0 50px rgba(196, 124, 255, 0.3);
}

body.theme-space-cyberpunk #header .logo svg,
body.theme-space-cyberpunk .admin-bar .admin-logo svg,
html.theme-space-cyberpunk #header .logo svg,
html.theme-space-cyberpunk .admin-bar .admin-logo svg {
    color: var(--white-pure) !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 15px rgba(196, 124, 255, 0.6));
}

body.theme-space-cyberpunk #header .logo span,
body.theme-space-cyberpunk .admin-bar .admin-logo span,
html.theme-space-cyberpunk #header .logo span,
html.theme-space-cyberpunk .admin-bar .admin-logo span {
    color: var(--violet-glow);
}

/* Nav links - violet with white hover */
body.theme-space-cyberpunk #header nav a,
body.theme-space-cyberpunk .admin-bar nav a,
body.theme-space-cyberpunk .nav-dropdown-toggle,
html.theme-space-cyberpunk #header nav a,
html.theme-space-cyberpunk .admin-bar nav a,
html.theme-space-cyberpunk .nav-dropdown-toggle {
    color: var(--violet-bright);
    transition: all 0.3s ease;
}

body.theme-space-cyberpunk #header nav a:hover,
body.theme-space-cyberpunk #header nav a.active,
body.theme-space-cyberpunk .admin-bar nav a:hover,
body.theme-space-cyberpunk .admin-bar nav a.active,
body.theme-space-cyberpunk .nav-dropdown-toggle:hover,
body.theme-space-cyberpunk .nav-dropdown-toggle.active,
html.theme-space-cyberpunk #header nav a:hover,
html.theme-space-cyberpunk #header nav a.active,
html.theme-space-cyberpunk .admin-bar nav a:hover,
html.theme-space-cyberpunk .admin-bar nav a.active,
html.theme-space-cyberpunk .nav-dropdown-toggle:hover,
html.theme-space-cyberpunk .nav-dropdown-toggle.active {
    color: var(--white-pure);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

/* Nav dropdown */
body.theme-space-cyberpunk .nav-dropdown-menu,
html.theme-space-cyberpunk .nav-dropdown-menu {
    background: var(--space-mid);
    border: 1px solid rgba(196, 124, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(196, 124, 255, 0.2);
}

body.theme-space-cyberpunk .nav-dropdown-menu a,
html.theme-space-cyberpunk .nav-dropdown-menu a {
    color: var(--violet-bright);
}

body.theme-space-cyberpunk .nav-dropdown-menu a:hover,
html.theme-space-cyberpunk .nav-dropdown-menu a:hover {
    background: rgba(196, 124, 255, 0.15);
    color: var(--white-pure);
}

/* Space-cyberpunk submenu (flyout) */
body.theme-space-cyberpunk .nav-submenu,
html.theme-space-cyberpunk .nav-submenu {
    background: var(--space-mid);
    border: 1px solid rgba(196, 124, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(196, 124, 255, 0.2);
}

body.theme-space-cyberpunk .nav-submenu-wrapper > a,
html.theme-space-cyberpunk .nav-submenu-wrapper > a {
    color: var(--violet-bright);
}

body.theme-space-cyberpunk .nav-submenu-wrapper > a:hover,
html.theme-space-cyberpunk .nav-submenu-wrapper > a:hover {
    background: rgba(196, 124, 255, 0.15);
    color: var(--white-pure);
}

body.theme-space-cyberpunk .nav-submenu-item,
html.theme-space-cyberpunk .nav-submenu-item {
    color: var(--violet-bright);
}

body.theme-space-cyberpunk .nav-submenu-item:hover,
html.theme-space-cyberpunk .nav-submenu-item:hover {
    background: rgba(196, 124, 255, 0.15);
    color: var(--white-pure);
}

body.theme-space-cyberpunk .nav-submenu-health.online,
html.theme-space-cyberpunk .nav-submenu-health.online {
    background: var(--cyber-green);
    box-shadow: 0 0 6px var(--cyber-green);
}

body.theme-space-cyberpunk .nav-submenu-health.virtual,
html.theme-space-cyberpunk .nav-submenu-health.virtual {
    background: var(--violet-bright);
    box-shadow: 0 0 6px var(--violet-bright);
}

body.theme-space-cyberpunk .nav-submenu-empty,
html.theme-space-cyberpunk .nav-submenu-empty {
    color: var(--violet-bright);
    opacity: 0.7;
}

body.theme-space-cyberpunk .nav-submenu-action,
html.theme-space-cyberpunk .nav-submenu-action {
    border-color: rgba(196, 124, 255, 0.3);
}

body.theme-space-cyberpunk .nav-submenu-action:hover,
html.theme-space-cyberpunk .nav-submenu-action:hover {
    background: rgba(196, 124, 255, 0.15);
}

/* User info section */
body.theme-space-cyberpunk #header .user-info span,
body.theme-space-cyberpunk .admin-bar .user-info span,
html.theme-space-cyberpunk #header .user-info span,
html.theme-space-cyberpunk .admin-bar .user-info span {
    color: var(--violet-glow);
}

body.theme-space-cyberpunk #header .user-info .logout,
body.theme-space-cyberpunk #header .user-info .docs-link,
body.theme-space-cyberpunk .admin-bar .user-info .logout,
body.theme-space-cyberpunk .admin-bar .user-info .docs-link,
html.theme-space-cyberpunk #header .user-info .logout,
html.theme-space-cyberpunk #header .user-info .docs-link,
html.theme-space-cyberpunk .admin-bar .user-info .logout,
html.theme-space-cyberpunk .admin-bar .user-info .docs-link {
    color: var(--violet-bright);
}

body.theme-space-cyberpunk #header .user-info .logout:hover,
body.theme-space-cyberpunk #header .user-info .docs-link:hover,
body.theme-space-cyberpunk .admin-bar .user-info .logout:hover,
body.theme-space-cyberpunk .admin-bar .user-info .docs-link:hover,
html.theme-space-cyberpunk #header .user-info .logout:hover,
html.theme-space-cyberpunk #header .user-info .docs-link:hover,
html.theme-space-cyberpunk .admin-bar .user-info .logout:hover,
html.theme-space-cyberpunk .admin-bar .user-info .docs-link:hover {
    color: var(--white-pure);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* ========== SPACE CYBERPUNK MAIN CONTENT ========== */

body.theme-space-cyberpunk main,
html.theme-space-cyberpunk main {
    position: relative;
    z-index: 1;
}

/* Page titles - white with intense glow */
body.theme-space-cyberpunk main h1,
html.theme-space-cyberpunk main h1 {
    color: var(--white-pure);
    text-shadow:
        0 0 15px rgba(255, 255, 255, 0.6),
        0 0 40px rgba(255, 255, 255, 0.3),
        0 0 60px rgba(196, 124, 255, 0.4);
}

body.theme-space-cyberpunk main h1 svg,
body.theme-space-cyberpunk .page-header h1 svg,
html.theme-space-cyberpunk main h1 svg,
html.theme-space-cyberpunk .page-header h1 svg {
    color: var(--white-pure) !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 15px rgba(196, 124, 255, 0.6));
}

body.theme-space-cyberpunk main h2,
body.theme-space-cyberpunk main h3,
html.theme-space-cyberpunk main h2,
html.theme-space-cyberpunk main h3 {
    color: var(--violet-glow);
    text-shadow: 0 0 15px rgba(196, 124, 255, 0.3);
}

/* ========== SPACE CYBERPUNK CARDS ========== */

body.theme-space-cyberpunk .card,
body.theme-space-cyberpunk .profile-card,
body.theme-space-cyberpunk .dashboard-card,
html.theme-space-cyberpunk .card,
html.theme-space-cyberpunk .profile-card,
html.theme-space-cyberpunk .dashboard-card {
    background: linear-gradient(145deg,
        rgba(21, 7, 52, 0.9) 0%,
        rgba(26, 10, 62, 0.85) 50%,
        rgba(34, 11, 74, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    backdrop-filter: blur(15px);
    transition: all 0.3s ease;
}

body.theme-space-cyberpunk .card:hover,
body.theme-space-cyberpunk .profile-card:hover,
body.theme-space-cyberpunk .dashboard-card:hover,
html.theme-space-cyberpunk .card:hover,
html.theme-space-cyberpunk .profile-card:hover,
html.theme-space-cyberpunk .dashboard-card:hover {
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

body.theme-space-cyberpunk .card h3,
body.theme-space-cyberpunk .profile-card h3,
html.theme-space-cyberpunk .card h3,
html.theme-space-cyberpunk .profile-card h3 {
    color: var(--white-pure);
    border-bottom-color: rgba(196, 124, 255, 0.3);
}

body.theme-space-cyberpunk .card-header,
html.theme-space-cyberpunk .card-header {
    border-color: rgba(196, 124, 255, 0.2);
}

body.theme-space-cyberpunk .card-header h2,
html.theme-space-cyberpunk .card-header h2 {
    color: var(--white-pure);
}

/* ========== SPACE CYBERPUNK STAT CARDS ========== */

body.theme-space-cyberpunk .stat-card,
html.theme-space-cyberpunk .stat-card {
    background: linear-gradient(135deg,
        rgba(21, 7, 52, 0.95) 0%,
        rgba(34, 11, 74, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

body.theme-space-cyberpunk .stat-card::before,
html.theme-space-cyberpunk .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--white-pure), var(--violet-bright), var(--white-pure), transparent);
}

body.theme-space-cyberpunk .stat-card:hover,
html.theme-space-cyberpunk .stat-card:hover {
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
}

body.theme-space-cyberpunk .stat-card .stat-icon,
html.theme-space-cyberpunk .stat-card .stat-icon {
    color: var(--white-pure) !important;
    text-shadow: 0 0 20px rgba(196, 124, 255, 0.8);
    filter: drop-shadow(0 0 8px rgba(196, 124, 255, 0.6));
}

body.theme-space-cyberpunk .stat-card .number,
html.theme-space-cyberpunk .stat-card .number {
    color: var(--white-pure);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

body.theme-space-cyberpunk .stat-card .label,
html.theme-space-cyberpunk .stat-card .label {
    color: var(--violet-glow);
}

/* ========== SPACE CYBERPUNK BUTTONS - STARK WHITE WITH GLOW ========== */

body.theme-space-cyberpunk .button,
body.theme-space-cyberpunk button:not(.circle-btn):not(.scheme-selector button),
html.theme-space-cyberpunk .button,
html.theme-space-cyberpunk button:not(.circle-btn):not(.scheme-selector button) {
    background: var(--white-pure);
    color: var(--space-deep);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    box-shadow:
        0 0 25px rgba(255, 255, 255, 0.5),
        0 0 50px rgba(255, 255, 255, 0.2),
        0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

body.theme-space-cyberpunk .button::before,
body.theme-space-cyberpunk button:not(.circle-btn):not(.scheme-selector button)::before,
html.theme-space-cyberpunk .button::before,
html.theme-space-cyberpunk button:not(.circle-btn):not(.scheme-selector button)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(196, 124, 255, 0.2) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.theme-space-cyberpunk .button:hover,
body.theme-space-cyberpunk button:not(.circle-btn):not(.scheme-selector button):hover,
html.theme-space-cyberpunk .button:hover,
html.theme-space-cyberpunk button:not(.circle-btn):not(.scheme-selector button):hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 40px rgba(255, 255, 255, 0.7),
        0 0 70px rgba(255, 255, 255, 0.3),
        0 0 100px rgba(196, 124, 255, 0.3),
        0 8px 25px rgba(0, 0, 0, 0.4);
}

body.theme-space-cyberpunk .button:hover::before,
body.theme-space-cyberpunk button:not(.circle-btn):not(.scheme-selector button):hover::before,
html.theme-space-cyberpunk .button:hover::before,
html.theme-space-cyberpunk button:not(.circle-btn):not(.scheme-selector button):hover::before {
    opacity: 1;
}

body.theme-space-cyberpunk .button:active,
body.theme-space-cyberpunk button:not(.circle-btn):not(.scheme-selector button):active,
html.theme-space-cyberpunk .button:active,
html.theme-space-cyberpunk button:not(.circle-btn):not(.scheme-selector button):active {
    transform: translateY(0);
}

/* Alt/secondary button style */
body.theme-space-cyberpunk .button.alt,
html.theme-space-cyberpunk .button.alt {
    background: transparent;
    color: var(--white-pure);
    border: 2px solid var(--white-pure);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

body.theme-space-cyberpunk .button.alt:hover,
html.theme-space-cyberpunk .button.alt:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow:
        0 0 25px rgba(255, 255, 255, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Circle buttons - white with intense glow */
body.theme-space-cyberpunk .circle-btn,
html.theme-space-cyberpunk .circle-btn {
    background: var(--white-pure) !important;
    color: var(--space-deep) !important;
    border: none !important;
    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.5),
        0 0 40px rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

body.theme-space-cyberpunk .circle-btn:hover,
html.theme-space-cyberpunk .circle-btn:hover {
    box-shadow:
        0 0 35px rgba(255, 255, 255, 0.7),
        0 0 60px rgba(255, 255, 255, 0.3),
        0 0 80px rgba(196, 124, 255, 0.3);
    transform: scale(1.05);
}

body.theme-space-cyberpunk .circle-btn.active,
html.theme-space-cyberpunk .circle-btn.active {
    background: var(--violet-core) !important;
    color: var(--white-pure) !important;
    box-shadow:
        0 0 20px rgba(153, 69, 255, 0.6),
        0 0 40px rgba(153, 69, 255, 0.3);
}

body.theme-space-cyberpunk .circle-btn svg,
body.theme-space-cyberpunk .circle-btn i,
html.theme-space-cyberpunk .circle-btn svg,
html.theme-space-cyberpunk .circle-btn i {
    color: inherit !important;
}

/* ========== SPACE CYBERPUNK TABLES ========== */

body.theme-space-cyberpunk table,
html.theme-space-cyberpunk table {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0;
}

body.theme-space-cyberpunk table th,
html.theme-space-cyberpunk table th {
    background: rgba(21, 7, 52, 0.8);
    color: var(--white-pure);
    text-shadow: 0 0 10px rgba(196, 124, 255, 0.5);
    border-bottom: 2px solid rgba(196, 124, 255, 0.4);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 1px;
}

body.theme-space-cyberpunk table td,
html.theme-space-cyberpunk table td {
    border-color: rgba(196, 124, 255, 0.15);
    color: var(--white-muted);
}

body.theme-space-cyberpunk table tr:hover td,
html.theme-space-cyberpunk table tr:hover td {
    background: rgba(196, 124, 255, 0.1);
}

body.theme-space-cyberpunk td > svg,
body.theme-space-cyberpunk td > i svg,
html.theme-space-cyberpunk td > svg,
html.theme-space-cyberpunk td > i svg {
    color: var(--white-pure) !important;
    filter: drop-shadow(0 0 5px rgba(196, 124, 255, 0.5));
}

/* ========== SPACE CYBERPUNK INPUTS ========== */

body.theme-space-cyberpunk input[type="text"],
body.theme-space-cyberpunk input[type="password"],
body.theme-space-cyberpunk input[type="email"],
body.theme-space-cyberpunk input[type="search"],
body.theme-space-cyberpunk select,
body.theme-space-cyberpunk textarea,
html.theme-space-cyberpunk input[type="text"],
html.theme-space-cyberpunk input[type="password"],
html.theme-space-cyberpunk input[type="email"],
html.theme-space-cyberpunk input[type="search"],
html.theme-space-cyberpunk select,
html.theme-space-cyberpunk textarea {
    background: rgba(13, 2, 33, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white-soft);
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

body.theme-space-cyberpunk input:focus,
body.theme-space-cyberpunk select:focus,
body.theme-space-cyberpunk textarea:focus,
html.theme-space-cyberpunk input:focus,
html.theme-space-cyberpunk select:focus,
html.theme-space-cyberpunk textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 0 25px rgba(255, 255, 255, 0.3),
        0 0 40px rgba(196, 124, 255, 0.3),
        inset 0 0 10px rgba(196, 124, 255, 0.1);
}

body.theme-space-cyberpunk input::placeholder,
body.theme-space-cyberpunk textarea::placeholder,
html.theme-space-cyberpunk input::placeholder,
html.theme-space-cyberpunk textarea::placeholder {
    color: rgba(196, 124, 255, 0.5);
}

/* ========== SPACE CYBERPUNK BADGES ========== */

body.theme-space-cyberpunk .badge,
html.theme-space-cyberpunk .badge {
    background: rgba(196, 124, 255, 0.2);
    color: var(--violet-glow);
    border: 1px solid rgba(196, 124, 255, 0.4);
    text-shadow: 0 0 8px rgba(196, 124, 255, 0.5);
}

body.theme-space-cyberpunk .badge.online,
html.theme-space-cyberpunk .badge.online {
    background: rgba(5, 217, 232, 0.2);
    color: var(--cyan-accent);
    border-color: rgba(5, 217, 232, 0.5);
    text-shadow: 0 0 10px var(--cyan-accent);
}

body.theme-space-cyberpunk .badge.offline,
html.theme-space-cyberpunk .badge.offline {
    background: rgba(255, 69, 100, 0.2);
    color: #ff6b8a;
    border-color: rgba(255, 69, 100, 0.4);
}

body.theme-space-cyberpunk .badge.admin,
html.theme-space-cyberpunk .badge.admin {
    background: rgba(255, 69, 255, 0.2);
    color: var(--magenta-accent);
    border-color: rgba(255, 69, 255, 0.5);
    text-shadow: 0 0 10px var(--magenta-accent);
}

/* ========== SPACE CYBERPUNK LINKS ========== */

body.theme-space-cyberpunk a,
html.theme-space-cyberpunk a {
    color: var(--violet-bright);
    transition: all 0.2s ease;
}

body.theme-space-cyberpunk a:hover,
html.theme-space-cyberpunk a:hover {
    color: var(--white-pure);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

/* ========== SPACE CYBERPUNK ALERTS ========== */

body.theme-space-cyberpunk .alert.success,
html.theme-space-cyberpunk .alert.success {
    background: rgba(5, 217, 232, 0.15);
    color: var(--cyan-accent);
    border: 1px solid rgba(5, 217, 232, 0.4);
}

body.theme-space-cyberpunk .alert.error,
html.theme-space-cyberpunk .alert.error {
    background: rgba(255, 69, 100, 0.15);
    color: #ff6b8a;
    border: 1px solid rgba(255, 69, 100, 0.4);
}

/* ========== SPACE CYBERPUNK CONTEXT BAR ========== */

body.theme-space-cyberpunk .context-bar,
html.theme-space-cyberpunk .context-bar {
    background: linear-gradient(135deg, var(--space-deep) 0%, var(--space-mid) 100%);
    border-color: rgba(196, 124, 255, 0.3);
}

body.theme-space-cyberpunk .context-bar .back-btn,
html.theme-space-cyberpunk .context-bar .back-btn {
    color: var(--violet-bright);
}

body.theme-space-cyberpunk .context-bar .back-btn:hover,
html.theme-space-cyberpunk .context-bar .back-btn:hover {
    background: rgba(196, 124, 255, 0.15);
    color: var(--white-pure);
}

body.theme-space-cyberpunk .context-bar .title,
html.theme-space-cyberpunk .context-bar .title {
    color: var(--white-pure);
}

body.theme-space-cyberpunk .context-bar .title .subtitle,
html.theme-space-cyberpunk .context-bar .title .subtitle {
    color: var(--violet-glow);
}

/* ========== SPACE CYBERPUNK THEME TOGGLE ========== */

body.theme-space-cyberpunk .theme-toggle,
html.theme-space-cyberpunk .theme-toggle {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

body.theme-space-cyberpunk .theme-toggle button,
html.theme-space-cyberpunk .theme-toggle button {
    background: var(--space-mid);
    color: var(--violet-bright);
}

body.theme-space-cyberpunk .theme-toggle button:hover:not(.active),
html.theme-space-cyberpunk .theme-toggle button:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white-pure);
}

body.theme-space-cyberpunk .theme-toggle button.active,
html.theme-space-cyberpunk .theme-toggle button.active {
    background: var(--white-pure);
    color: var(--space-deep);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* ========== SPACE CYBERPUNK TOGGLE GROUP ========== */

body.theme-space-cyberpunk .toggle-group,
html.theme-space-cyberpunk .toggle-group {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

body.theme-space-cyberpunk .toggle-group button,
html.theme-space-cyberpunk .toggle-group button {
    background: var(--space-mid);
    color: var(--violet-bright);
}

body.theme-space-cyberpunk .toggle-group button:hover:not(.active),
html.theme-space-cyberpunk .toggle-group button:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white-pure);
}

body.theme-space-cyberpunk .toggle-group button.active,
html.theme-space-cyberpunk .toggle-group button.active {
    background: var(--white-pure);
    color: var(--space-deep);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* ========== SPACE CYBERPUNK PROFILE LINK ========== */

body.theme-space-cyberpunk .profile-link,
html.theme-space-cyberpunk .profile-link {
    color: var(--violet-bright);
}

body.theme-space-cyberpunk .profile-link:hover,
html.theme-space-cyberpunk .profile-link:hover {
    color: var(--white-pure);
}

/* ========== SPACE CYBERPUNK NOTIFICATION DROPDOWN ========== */

body.theme-space-cyberpunk .notification-dropdown,
html.theme-space-cyberpunk .notification-dropdown {
    background: var(--space-mid);
    border: 1px solid rgba(196, 124, 255, 0.4);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(196, 124, 255, 0.2);
}

body.theme-space-cyberpunk .notification-dropdown .dropdown-header,
html.theme-space-cyberpunk .notification-dropdown .dropdown-header {
    border-color: rgba(196, 124, 255, 0.3);
    color: var(--white-pure);
}

body.theme-space-cyberpunk .notification-item,
html.theme-space-cyberpunk .notification-item {
    border-color: rgba(196, 124, 255, 0.15);
}

body.theme-space-cyberpunk .notification-item:hover,
html.theme-space-cyberpunk .notification-item:hover {
    background: rgba(196, 124, 255, 0.1);
}

body.theme-space-cyberpunk .notification-item .notification-title,
html.theme-space-cyberpunk .notification-item .notification-title {
    color: var(--white-pure);
}

body.theme-space-cyberpunk .notification-item .notification-message,
html.theme-space-cyberpunk .notification-item .notification-message {
    color: var(--violet-glow);
}

body.theme-space-cyberpunk .notification-item .notification-time,
html.theme-space-cyberpunk .notification-item .notification-time {
    color: var(--violet-bright);
}

/* ========== SPACE CYBERPUNK FOOTER ========== */

body.theme-space-cyberpunk .site-footer,
html.theme-space-cyberpunk .site-footer {
    color: var(--violet-glow);
}

body.theme-space-cyberpunk .site-footer a,
html.theme-space-cyberpunk .site-footer a {
    color: var(--violet-bright);
}

body.theme-space-cyberpunk .site-footer a:hover,
html.theme-space-cyberpunk .site-footer a:hover {
    color: var(--white-pure);
}

/* ========== SPACE CYBERPUNK SCROLLBAR ========== */

body.theme-space-cyberpunk::-webkit-scrollbar,
html.theme-space-cyberpunk ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.theme-space-cyberpunk::-webkit-scrollbar-track,
html.theme-space-cyberpunk ::-webkit-scrollbar-track {
    background: var(--space-deep);
}

body.theme-space-cyberpunk::-webkit-scrollbar-thumb,
html.theme-space-cyberpunk ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--violet-core), var(--violet-dim));
    border-radius: 5px;
    border: 2px solid var(--space-deep);
}

body.theme-space-cyberpunk::-webkit-scrollbar-thumb:hover,
html.theme-space-cyberpunk ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--violet-bright), var(--violet-core));
}

/* ========== SPACE CYBERPUNK SPECIAL EFFECTS ========== */

/* Floating particles for space cyberpunk */
body.theme-space-cyberpunk .space-particles,
html.theme-space-cyberpunk .space-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

body.theme-space-cyberpunk .space-particle,
html.theme-space-cyberpunk .space-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--white-pure);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--white-pure), 0 0 12px var(--violet-bright);
    animation: spaceFloat 25s infinite ease-in-out;
    opacity: 0;
}

body.theme-space-cyberpunk .space-particle:nth-child(1) { left: 5%; animation-delay: 0s; }
body.theme-space-cyberpunk .space-particle:nth-child(2) { left: 15%; animation-delay: 2s; background: var(--violet-bright); box-shadow: 0 0 6px var(--violet-bright), 0 0 12px var(--magenta-accent); }
body.theme-space-cyberpunk .space-particle:nth-child(3) { left: 25%; animation-delay: 5s; }
body.theme-space-cyberpunk .space-particle:nth-child(4) { left: 35%; animation-delay: 1s; background: var(--magenta-accent); box-shadow: 0 0 6px var(--magenta-accent), 0 0 12px var(--magenta-accent); }
body.theme-space-cyberpunk .space-particle:nth-child(5) { left: 50%; animation-delay: 4s; }
body.theme-space-cyberpunk .space-particle:nth-child(6) { left: 65%; animation-delay: 7s; background: var(--cyan-accent); box-shadow: 0 0 6px var(--cyan-accent), 0 0 12px var(--cyan-accent); }
body.theme-space-cyberpunk .space-particle:nth-child(7) { left: 75%; animation-delay: 3s; }
body.theme-space-cyberpunk .space-particle:nth-child(8) { left: 85%; animation-delay: 6s; background: var(--violet-glow); box-shadow: 0 0 6px var(--violet-glow), 0 0 12px var(--violet-core); }
body.theme-space-cyberpunk .space-particle:nth-child(9) { left: 95%; animation-delay: 8s; }

@keyframes spaceFloat {
    0%, 100% {
        transform: translateY(100vh) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
        transform: translateY(90vh) scale(1);
    }
    90% {
        opacity: 0.9;
        transform: translateY(10vh) scale(1);
    }
    100% {
        transform: translateY(0vh) scale(0.5);
        opacity: 0;
    }
}

/* Glow pulse animation for special elements - white accent */
@keyframes spacePulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(255, 255, 255, 0.2),
            0 0 35px rgba(196, 124, 255, 0.3);
    }
    50% {
        box-shadow:
            0 0 30px rgba(255, 255, 255, 0.4),
            0 0 50px rgba(255, 69, 255, 0.4),
            0 0 70px rgba(196, 124, 255, 0.2);
    }
}

/* White glow pulse for buttons */
@keyframes whiteGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 25px rgba(255, 255, 255, 0.5),
            0 0 50px rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow:
            0 0 35px rgba(255, 255, 255, 0.7),
            0 0 70px rgba(255, 255, 255, 0.3),
            0 0 100px rgba(196, 124, 255, 0.2);
    }
}

/* Apply pulse to key interactive elements */
body.theme-space-cyberpunk .stat-card:hover,
html.theme-space-cyberpunk .stat-card:hover {
    animation: spacePulse 2s ease-in-out infinite;
}

/* Global white glow for all icons in space cyberpunk */
body.theme-space-cyberpunk svg,
body.theme-space-cyberpunk i[data-icon] svg,
html.theme-space-cyberpunk svg,
html.theme-space-cyberpunk i[data-icon] svg {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

body.theme-space-cyberpunk nav svg,
body.theme-space-cyberpunk .stat-icon svg,
html.theme-space-cyberpunk nav svg,
html.theme-space-cyberpunk .stat-icon svg {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 12px rgba(196, 124, 255, 0.4));
}

/* ============================================================
   CYBERPURPLE CURATED THEME
   Dark translucent aesthetic from UX Labs
   Overrides semantic CSS variables so admin CSS works naturally
   ============================================================ */

/* Cyberpurple: remap semantic variables to labs palette */
html.theme-cyberpurple,
body.theme-cyberpurple {
    /* Labs palette tokens */
    --cp-space-deep: #0d0221;
    --cp-space-mid: #150734;
    --cp-space-light: #1a0a3e;
    --cp-purple: #7b2cbf;
    --cp-neon-purple: #c47cff;
    --cp-neon-purple-deep: #9945ff;
    --cp-neon-magenta: #ff45ff;
    --cp-neon-violet: #7c4dff;
    --cp-cyan: #05d9e8;

    /* Remap admin semantic variables */
    --accent: #c47cff;
    --accent-hover: #9945ff;
    --accent-light: #d9a6ff;
    --accent-bg: rgba(196, 124, 255, 0.12);
    --accent-dark: #7b2cbf;

    --text-primary: #e0e0e0;
    --text-secondary: #bda8d9;
    --text-muted: rgba(196, 124, 255, 0.6);
    --text-disabled: rgba(196, 124, 255, 0.4);

    --bg-primary: rgba(21, 7, 52, 0.8);
    --bg-secondary: #0d0221;
    --bg-tertiary: rgba(26, 10, 62, 0.6);
    --bg-hover: rgba(196, 124, 255, 0.1);

    --border-light: rgba(196, 124, 255, 0.15);
    --border-default: rgba(196, 124, 255, 0.25);
    --border-dark: rgba(196, 124, 255, 0.4);

    --success: #05d9e8;
    --success-light: #33e5f0;
    --success-bg: rgba(5, 217, 232, 0.15);
    --error: #ff4545;
    --error-light: #ff6b6b;
    --error-bg: rgba(255, 69, 69, 0.15);
    --warning: #f9c80e;
    --warning-light: #fad94a;
    --warning-bg: rgba(249, 200, 14, 0.15);
    --info: #7c4dff;
    --info-light: #a07cff;
    --info-bg: rgba(124, 77, 255, 0.15);
}

/* ========== CYBERPURPLE BASE ========== */

html.theme-cyberpurple {
    background: var(--cp-space-deep);
}

body.theme-cyberpurple {
    background: var(--cp-space-deep);
    color: #e0e0e0;
}

/* Subtle grid background */
html.theme-cyberpurple::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(90deg, rgba(196, 124, 255, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(196, 124, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Nebula glow overlays */
html.theme-cyberpurple::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 15%, rgba(196, 124, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 25%, rgba(153, 69, 255, 0.1) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 80%, rgba(255, 69, 255, 0.08) 0%, transparent 50%);
    z-index: 0;
}

/* Disable the standard neon-bg-effects */
html.theme-cyberpurple .neon-bg-effects {
    display: none;
}


/* ========== CYBERPURPLE HEADER ========== */

html.theme-cyberpurple #header {
    background: rgba(21, 7, 52, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cp-purple);
    box-shadow: 0 0 30px rgba(196, 124, 255, 0.15);
}

html.theme-cyberpurple #header .logo a {
    color: #fff;
    text-shadow: 0 0 15px var(--cp-neon-purple), 0 0 30px rgba(196, 124, 255, 0.5);
}

html.theme-cyberpurple #header .logo svg {
    filter: drop-shadow(0 0 6px var(--cp-neon-purple));
}

/* Accent strip under header */
html.theme-cyberpurple #header::after {
    background: linear-gradient(90deg,
        var(--cp-neon-purple-deep),
        var(--cp-neon-purple),
        var(--cp-neon-magenta),
        var(--cp-cyan));
}

html.theme-cyberpurple .user-info a,
html.theme-cyberpurple .user-info span {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .user-info a:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(196, 124, 255, 0.6);
}

html.theme-cyberpurple .user-info .logout,
html.theme-cyberpurple .user-info .docs-link {
    color: rgba(196, 124, 255, 0.5);
}

html.theme-cyberpurple .user-info .logout:hover,
html.theme-cyberpurple .user-info .docs-link:hover {
    color: var(--cp-neon-purple);
}

/* ========== CYBERPURPLE NAVIGATION ========== */

html.theme-cyberpurple nav {
    background: rgba(21, 7, 52, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cp-purple);
    box-shadow: 0 0 30px rgba(196, 124, 255, 0.15);
    position: relative;
    z-index: 100;
}

html.theme-cyberpurple nav a {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple nav a:hover {
    background: rgba(196, 124, 255, 0.15);
    text-shadow: 0 0 12px var(--cp-neon-purple), 0 0 24px var(--cp-neon-purple);
    color: #fff;
}

html.theme-cyberpurple nav a.active {
    color: #fff;
    background: rgba(196, 124, 255, 0.2);
    box-shadow: inset 0 -2px 0 var(--cp-neon-purple), 0 0 15px rgba(196, 124, 255, 0.3);
    text-shadow: 0 0 10px var(--cp-neon-purple);
}

html.theme-cyberpurple nav svg {
    filter: drop-shadow(0 0 4px rgba(196, 124, 255, 0.6));
}

html.theme-cyberpurple .nav-dropdown-menu {
    background: rgba(21, 7, 52, 0.98);
    border: 1px solid var(--cp-purple);
    box-shadow: 0 8px 30px rgba(196, 124, 255, 0.25);
    backdrop-filter: blur(15px);
}

html.theme-cyberpurple .nav-dropdown-menu a {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .nav-dropdown-menu a:hover {
    background: rgba(196, 124, 255, 0.15);
    color: #fff;
}

html.theme-cyberpurple .nav-dropdown-menu .section-label {
    color: rgba(196, 124, 255, 0.5);
}

/* ========== CYBERPURPLE CONTENT ========== */

html.theme-cyberpurple main {
    position: relative;
    z-index: 10;
}

html.theme-cyberpurple .page-header {
    position: relative;
    z-index: 10;
}

html.theme-cyberpurple .page-header h1,
html.theme-cyberpurple main h1 {
    color: #fff;
    text-shadow: 0 0 10px rgba(196, 124, 255, 0.5);
}

html.theme-cyberpurple .page-header h1 svg,
html.theme-cyberpurple main h1 svg {
    color: var(--cp-neon-purple);
    filter: drop-shadow(0 0 8px var(--cp-neon-purple));
}

html.theme-cyberpurple .subtitle {
    color: rgba(196, 124, 255, 0.7);
}

html.theme-cyberpurple .breadcrumbs a {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .breadcrumbs .separator {
    color: rgba(196, 124, 255, 0.3);
}

/* ========== CYBERPURPLE CARDS ========== */
/* Dark translucent cards matching labs aesthetic */

html.theme-cyberpurple .card,
html.theme-cyberpurple .profile-card,
html.theme-cyberpurple .dashboard-card,
html.theme-cyberpurple .content-card,
html.theme-cyberpurple .setting-card,
html.theme-cyberpurple .info-section,
html.theme-cyberpurple .form-section,
html.theme-cyberpurple .settings-section {
    background: rgba(21, 7, 52, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(196, 124, 255, 0.3);
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

html.theme-cyberpurple .card:hover,
html.theme-cyberpurple .profile-card:hover,
html.theme-cyberpurple .setting-card:hover {
    border-color: var(--cp-neon-purple);
    box-shadow: 0 0 20px rgba(196, 124, 255, 0.2);
}

html.theme-cyberpurple .card-header {
    border-bottom-color: rgba(196, 124, 255, 0.2);
}

html.theme-cyberpurple .card-header h2 {
    color: var(--cp-neon-purple);
}

/* ========== CYBERPURPLE HEADINGS ========== */

html.theme-cyberpurple h2,
html.theme-cyberpurple .section-title {
    color: var(--cp-neon-purple);
    text-shadow: 0 0 10px rgba(196, 124, 255, 0.3);
    border-bottom-color: var(--cp-purple);
}

html.theme-cyberpurple h3 {
    color: var(--cp-neon-purple);
}

/* ========== CYBERPURPLE STAT CARDS ========== */

html.theme-cyberpurple .stat-card,
html.theme-cyberpurple .stat-card-lg {
    background: rgba(21, 7, 52, 0.8);
    border: 1px solid rgba(196, 124, 255, 0.3);
    backdrop-filter: blur(10px);
}

html.theme-cyberpurple .stat-card:hover,
html.theme-cyberpurple .stat-card-lg:hover {
    border-color: var(--cp-neon-purple);
    box-shadow: 0 0 20px rgba(196, 124, 255, 0.25);
}

html.theme-cyberpurple .stat-card::before {
    background: linear-gradient(90deg, var(--cp-neon-purple), transparent);
}

html.theme-cyberpurple .stat-card .stat-icon {
    color: var(--cp-neon-purple);
    filter: drop-shadow(0 0 6px rgba(196, 124, 255, 0.4));
}

html.theme-cyberpurple .stat-card .number,
html.theme-cyberpurple .stat-card .value,
html.theme-cyberpurple .stat-card-lg .value {
    color: #fff;
}

html.theme-cyberpurple .stat-card .label,
html.theme-cyberpurple .stat-card-lg .label {
    color: rgba(196, 124, 255, 0.7);
}

/* Stat card color variants -- neon accents on dark */
html.theme-cyberpurple .stat-card.alt {
    border-color: rgba(5, 217, 232, 0.4);
}
html.theme-cyberpurple .stat-card.alt:hover {
    box-shadow: 0 0 20px rgba(5, 217, 232, 0.2);
}
html.theme-cyberpurple .stat-card.alt .stat-icon {
    color: var(--cp-cyan);
    filter: drop-shadow(0 0 6px rgba(5, 217, 232, 0.4));
}

html.theme-cyberpurple .stat-card.success {
    border-color: rgba(5, 217, 232, 0.4);
}
html.theme-cyberpurple .stat-card.success:hover {
    box-shadow: 0 0 20px rgba(5, 217, 232, 0.2);
}
html.theme-cyberpurple .stat-card.success .stat-icon {
    color: var(--cp-cyan);
    filter: drop-shadow(0 0 6px rgba(5, 217, 232, 0.4));
}

html.theme-cyberpurple .stat-card.warning {
    border-color: rgba(249, 200, 14, 0.4);
}
html.theme-cyberpurple .stat-card.warning:hover {
    box-shadow: 0 0 20px rgba(249, 200, 14, 0.15);
}
html.theme-cyberpurple .stat-card.warning .stat-icon {
    color: var(--warning);
    filter: drop-shadow(0 0 6px rgba(249, 200, 14, 0.4));
}

/* ========== CYBERPURPLE DASHBOARD ========== */

html.theme-cyberpurple .dashboard-section h2 {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .status-card {
    background: rgba(21, 7, 52, 0.6);
    border: 1px solid rgba(196, 124, 255, 0.15);
    border-radius: 6px;
}

html.theme-cyberpurple .status-card .name {
    color: #e0e0e0;
}

html.theme-cyberpurple .status-card .state {
    color: rgba(196, 124, 255, 0.6);
}

html.theme-cyberpurple .indicator.healthy { color: var(--cp-cyan); }
html.theme-cyberpurple .indicator.down { color: var(--error); }
html.theme-cyberpurple .indicator.degraded { color: var(--warning); }
html.theme-cyberpurple .indicator.unknown { color: rgba(196, 124, 255, 0.4); }

html.theme-cyberpurple .version-info .item .label {
    color: rgba(196, 124, 255, 0.6);
}

html.theme-cyberpurple .version-info .item .value {
    color: #e0e0e0;
}

html.theme-cyberpurple .env-badge {
    background: rgba(196, 124, 255, 0.15);
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .activity-item {
    border-bottom-color: rgba(196, 124, 255, 0.1);
}

html.theme-cyberpurple .activity-item .title {
    color: #e0e0e0;
}

html.theme-cyberpurple .activity-item .meta {
    color: rgba(196, 124, 255, 0.5);
}

/* Quick actions */
html.theme-cyberpurple .quick-action,
html.theme-cyberpurple .quick-action-primary {
    background: rgba(21, 7, 52, 0.6);
    border: 1px solid rgba(196, 124, 255, 0.2);
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .quick-action:hover,
html.theme-cyberpurple .quick-action-primary:hover {
    border-color: var(--cp-neon-purple);
    background: rgba(196, 124, 255, 0.1);
    box-shadow: 0 0 15px rgba(196, 124, 255, 0.2);
}


/* ========== CYBERPURPLE BUTTONS ========== */

html.theme-cyberpurple .button,
html.theme-cyberpurple button,
html.theme-cyberpurple input[type="submit"] {
    background: linear-gradient(135deg, var(--cp-purple) 0%, var(--cp-neon-purple-deep) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 0 15px rgba(196, 124, 255, 0.2);
}

html.theme-cyberpurple .button:hover,
html.theme-cyberpurple button:hover,
html.theme-cyberpurple input[type="submit"]:hover {
    background: linear-gradient(135deg, var(--cp-neon-purple-deep) 0%, var(--cp-neon-magenta) 100%);
    box-shadow: 0 0 25px rgba(196, 124, 255, 0.4);
}

html.theme-cyberpurple .button.alt {
    background: transparent;
    border: 1px solid var(--cp-neon-purple);
    color: var(--cp-neon-purple);
    box-shadow: none;
}

html.theme-cyberpurple .button.alt:hover {
    background: rgba(196, 124, 255, 0.15);
    color: #fff;
    box-shadow: 0 0 15px rgba(196, 124, 255, 0.2);
}

html.theme-cyberpurple .button.danger {
    background: linear-gradient(135deg, #c62828, #e53935);
}

html.theme-cyberpurple .button.danger:hover {
    background: linear-gradient(135deg, #e53935, #ff5252);
    box-shadow: 0 0 20px rgba(255, 69, 69, 0.3);
}

/* Circle buttons */
html.theme-cyberpurple .circle-btn {
    background: linear-gradient(145deg, var(--cp-neon-purple), var(--cp-purple));
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

html.theme-cyberpurple .circle-btn:hover {
    box-shadow: 0 3px 8px rgba(196, 124, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html.theme-cyberpurple .circle-btn.danger {
    background: linear-gradient(145deg, #ef5350, #c62828);
}

/* Icon buttons */
html.theme-cyberpurple .icon-btn,
html.theme-cyberpurple .btn-icon {
    background: rgba(196, 124, 255, 0.1);
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .icon-btn:hover,
html.theme-cyberpurple .btn-icon:hover {
    background: rgba(196, 124, 255, 0.2);
    color: #fff;
}

/* Preserve semantic icon button colors */
html.theme-cyberpurple .icon-btn.delete,
html.theme-cyberpurple .btn-icon.delete,
html.theme-cyberpurple .icon-btn.stop,
html.theme-cyberpurple .btn-icon.stop {
    background: rgba(255, 69, 69, 0.15);
    color: #ff6b6b;
}
html.theme-cyberpurple .icon-btn.delete:hover,
html.theme-cyberpurple .btn-icon.delete:hover,
html.theme-cyberpurple .icon-btn.stop:hover,
html.theme-cyberpurple .btn-icon.stop:hover {
    background: rgba(255, 69, 69, 0.25);
}

html.theme-cyberpurple .icon-btn.refresh,
html.theme-cyberpurple .btn-icon.refresh,
html.theme-cyberpurple .icon-btn.sync,
html.theme-cyberpurple .btn-icon.sync {
    background: rgba(5, 217, 232, 0.15);
    color: var(--cp-cyan);
}
html.theme-cyberpurple .icon-btn.refresh:hover,
html.theme-cyberpurple .btn-icon.refresh:hover,
html.theme-cyberpurple .icon-btn.sync:hover,
html.theme-cyberpurple .btn-icon.sync:hover {
    background: rgba(5, 217, 232, 0.25);
}

html.theme-cyberpurple .icon-btn.edit,
html.theme-cyberpurple .btn-icon.edit,
html.theme-cyberpurple .icon-btn.key,
html.theme-cyberpurple .btn-icon.key {
    background: rgba(153, 69, 255, 0.15);
    color: #b98eff;
}
html.theme-cyberpurple .icon-btn.edit:hover,
html.theme-cyberpurple .btn-icon.edit:hover,
html.theme-cyberpurple .icon-btn.key:hover,
html.theme-cyberpurple .btn-icon.key:hover {
    background: rgba(153, 69, 255, 0.25);
}

html.theme-cyberpurple .icon-btn.add,
html.theme-cyberpurple .btn-icon.add,
html.theme-cyberpurple .icon-btn.enable,
html.theme-cyberpurple .btn-icon.enable {
    background: rgba(5, 217, 232, 0.15);
    color: var(--cp-cyan);
}
html.theme-cyberpurple .icon-btn.add:hover,
html.theme-cyberpurple .btn-icon.add:hover,
html.theme-cyberpurple .icon-btn.enable:hover,
html.theme-cyberpurple .btn-icon.enable:hover {
    background: rgba(5, 217, 232, 0.25);
}

html.theme-cyberpurple .icon-btn.disable,
html.theme-cyberpurple .btn-icon.disable {
    background: rgba(249, 200, 14, 0.15);
    color: #f9c80e;
}
html.theme-cyberpurple .icon-btn.disable:hover,
html.theme-cyberpurple .btn-icon.disable:hover {
    background: rgba(249, 200, 14, 0.25);
}

/* Action buttons */
html.theme-cyberpurple .action-btn {
    background: rgba(21, 7, 52, 0.8);
    border-color: rgba(196, 124, 255, 0.3);
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .action-btn:hover:not(:disabled) {
    border-color: var(--cp-neon-purple);
    color: #fff;
    background: rgba(196, 124, 255, 0.15);
    box-shadow: 0 4px 15px rgba(196, 124, 255, 0.25);
}

html.theme-cyberpurple .action-btn.primary {
    background: linear-gradient(145deg, var(--cp-neon-purple), var(--cp-purple));
    border-color: var(--cp-neon-purple);
    color: #fff;
}

/* Toggle buttons */
html.theme-cyberpurple .toggle-group button {
    background: rgba(21, 7, 52, 0.6);
    border-color: rgba(196, 124, 255, 0.2);
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .toggle-group button.active {
    background: linear-gradient(135deg, var(--cp-purple), var(--cp-neon-purple-deep));
    color: #fff;
}

html.theme-cyberpurple .toggle-group button:not(:last-child) {
    border-right-color: rgba(196, 124, 255, 0.2);
}

/* ========== CYBERPURPLE INPUTS ========== */

html.theme-cyberpurple input[type="text"],
html.theme-cyberpurple input[type="email"],
html.theme-cyberpurple input[type="password"],
html.theme-cyberpurple input[type="search"],
html.theme-cyberpurple input[type="number"],
html.theme-cyberpurple input[type="url"],
html.theme-cyberpurple textarea,
html.theme-cyberpurple select {
    background: rgba(13, 2, 33, 0.8);
    border: 1px solid rgba(196, 124, 255, 0.3);
    color: #e0e0e0;
}

html.theme-cyberpurple input:focus,
html.theme-cyberpurple textarea:focus,
html.theme-cyberpurple select:focus {
    border-color: var(--cp-neon-purple);
    box-shadow: 0 0 15px rgba(196, 124, 255, 0.3);
}

html.theme-cyberpurple input::placeholder,
html.theme-cyberpurple textarea::placeholder {
    color: rgba(196, 124, 255, 0.4);
}

html.theme-cyberpurple .search-input {
    background: rgba(13, 2, 33, 0.6);
    border-color: rgba(196, 124, 255, 0.2);
    color: #e0e0e0;
}

html.theme-cyberpurple select.inline,
html.theme-cyberpurple input.inline {
    background: rgba(13, 2, 33, 0.6);
}

/* Toggle switch */
html.theme-cyberpurple .toggle-switch .slider {
    background-color: rgba(196, 124, 255, 0.25);
}

html.theme-cyberpurple .toggle-switch input:checked + .slider {
    background-color: var(--cp-neon-purple);
}

/* Form labels */
html.theme-cyberpurple .form-group label {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .form-hint {
    color: rgba(196, 124, 255, 0.5);
}


/* ========== CYBERPURPLE TABLES ========== */

html.theme-cyberpurple table {
    background: rgba(21, 7, 52, 0.6);
    border-radius: 8px;
    overflow: hidden;
}

html.theme-cyberpurple th {
    background: rgba(123, 44, 191, 0.15);
    color: var(--cp-neon-purple);
    border-bottom: 1px solid rgba(196, 124, 255, 0.2);
}

html.theme-cyberpurple td {
    color: #e0e0e0;
    border-bottom: 1px solid rgba(196, 124, 255, 0.1);
}

html.theme-cyberpurple tr:hover td {
    background: rgba(196, 124, 255, 0.05);
}

html.theme-cyberpurple td > svg,
html.theme-cyberpurple td > i svg {
    color: var(--cp-neon-purple);
}

/* ========== CYBERPURPLE TABS ========== */

html.theme-cyberpurple .tab-container {
    background: rgba(21, 7, 52, 0.8);
    border: 1px solid rgba(196, 124, 255, 0.2);
    border-radius: 8px;
}

html.theme-cyberpurple .tab-nav {
    border-bottom-color: rgba(196, 124, 255, 0.2);
}

html.theme-cyberpurple .tab-btn {
    color: rgba(196, 124, 255, 0.6);
}

html.theme-cyberpurple .tab-btn:hover {
    color: var(--cp-neon-purple);
    background: rgba(196, 124, 255, 0.08);
}

html.theme-cyberpurple .tab-btn.active {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .tab-btn.active::after {
    background: linear-gradient(90deg, var(--cp-neon-purple-deep), var(--cp-neon-purple));
}

/* ========== CYBERPURPLE BADGES ========== */
/* Dark translucent backgrounds matching labs palette */

html.theme-cyberpurple .badge {
    background: rgba(196, 124, 255, 0.2);
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .badge.online,
html.theme-cyberpurple .badge.active {
    background: rgba(5, 217, 232, 0.2);
    color: var(--cp-cyan);
}

html.theme-cyberpurple .badge.offline,
html.theme-cyberpurple .badge.inactive {
    background: rgba(196, 124, 255, 0.15);
    color: rgba(196, 124, 255, 0.5);
}

html.theme-cyberpurple .badge.pending,
html.theme-cyberpurple .badge.warning {
    background: rgba(249, 200, 14, 0.2);
    color: var(--warning);
}

html.theme-cyberpurple .badge.error {
    background: rgba(255, 69, 69, 0.2);
    color: var(--error-light);
}

html.theme-cyberpurple .badge.virtual {
    background: rgba(124, 77, 255, 0.2);
    color: #a07cff;
}

html.theme-cyberpurple .badge.loading {
    background: rgba(5, 217, 232, 0.15);
    color: var(--cp-cyan);
}

html.theme-cyberpurple .badge.production {
    background: rgba(5, 217, 232, 0.2);
    color: var(--cp-cyan);
}

html.theme-cyberpurple .badge.alpha {
    background: rgba(255, 69, 255, 0.15);
    color: var(--cp-neon-magenta);
}

html.theme-cyberpurple .badge.beta {
    background: rgba(249, 200, 14, 0.15);
    color: var(--warning);
}

/* Alert severity badges */
html.theme-cyberpurple .badge-critical {
    background: rgba(255, 69, 69, 0.2);
    color: #ff6b6b;
}

html.theme-cyberpurple .badge-info {
    background: rgba(5, 217, 232, 0.2);
    color: var(--cp-cyan);
}

html.theme-cyberpurple .badge-escalated {
    background: rgba(255, 69, 255, 0.2);
    color: var(--cp-neon-magenta);
}

/* Health badges */
html.theme-cyberpurple .health-badge.online {
    background: rgba(5, 217, 232, 0.2);
    color: var(--cp-cyan);
}

html.theme-cyberpurple .health-badge.offline {
    background: rgba(196, 124, 255, 0.15);
    color: rgba(196, 124, 255, 0.5);
}

html.theme-cyberpurple .health-badge.virtual {
    background: rgba(124, 77, 255, 0.2);
    color: #a07cff;
}

/* Status badges */
html.theme-cyberpurple .status-badge {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .status-badge .state-indicator.on {
    color: var(--cp-cyan);
}

html.theme-cyberpurple .status-badge .state-indicator.off {
    color: rgba(196, 124, 255, 0.4);
}

/* Semantic badges */
html.theme-cyberpurple .badge-semantic.rss {
    background: rgba(255, 107, 53, 0.2);
    color: #ff6b35;
}

html.theme-cyberpurple .badge-semantic.webhook {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

html.theme-cyberpurple .badge-semantic.api {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
}

html.theme-cyberpurple .badge-semantic.mqtt {
    background: rgba(5, 217, 232, 0.2);
    color: var(--cp-cyan);
}

/* Type badges */
html.theme-cyberpurple .type-badge.anomaly { background: rgba(255, 69, 69, 0.2); color: #ff6b6b; }
html.theme-cyberpurple .type-badge.trend { background: rgba(5, 217, 232, 0.2); color: var(--cp-cyan); }
html.theme-cyberpurple .type-badge.forecast { background: rgba(124, 77, 255, 0.2); color: #a07cff; }
html.theme-cyberpurple .type-badge.correlation { background: rgba(5, 217, 232, 0.15); color: #33e5f0; }

/* ========== CYBERPURPLE MODALS ========== */

html.theme-cyberpurple .modal-overlay {
    background: rgba(13, 2, 33, 0.85);
}

html.theme-cyberpurple .modal,
html.theme-cyberpurple .dialog {
    background: rgba(21, 7, 52, 0.95);
    border: 1px solid rgba(196, 124, 255, 0.3);
    box-shadow: 0 0 50px rgba(196, 124, 255, 0.2);
    backdrop-filter: blur(15px);
    color: #e0e0e0;
}

html.theme-cyberpurple .modal h2 {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .dialog-overlay {
    background: rgba(13, 2, 33, 0.85);
}

html.theme-cyberpurple .alert-modal-overlay {
    background: rgba(13, 2, 33, 0.85);
}

html.theme-cyberpurple .alert-modal-card {
    background: rgba(21, 7, 52, 0.95);
    border: 1px solid rgba(196, 124, 255, 0.3);
    color: #e0e0e0;
}

html.theme-cyberpurple .detail-label {
    color: rgba(196, 124, 255, 0.6);
}

html.theme-cyberpurple .detail-value {
    color: #e0e0e0;
}

/* ========== CYBERPURPLE SIDEBAR ========== */

html.theme-cyberpurple aside,
html.theme-cyberpurple .sidebar {
    background: rgba(21, 7, 52, 0.95);
    border-right: 1px solid var(--cp-purple);
}

html.theme-cyberpurple .sidebar a {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .sidebar a:hover {
    background: rgba(196, 124, 255, 0.15);
    color: #fff;
}

html.theme-cyberpurple .sidebar a.active {
    background: rgba(196, 124, 255, 0.2);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--cp-neon-purple);
}

/* ========== CYBERPURPLE LINKS ========== */

html.theme-cyberpurple a {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple a:hover {
    color: #fff;
    text-shadow: 0 0 8px rgba(196, 124, 255, 0.5);
}


/* ========== CYBERPURPLE NOTIFICATIONS ========== */

html.theme-cyberpurple .notification-bell .bell-button {
    color: rgba(196, 124, 255, 0.6);
}

html.theme-cyberpurple .notification-bell .bell-button:hover {
    color: var(--cp-neon-purple);
    filter: drop-shadow(0 0 6px rgba(196, 124, 255, 0.5));
}

html.theme-cyberpurple .notification-bell .badge {
    background: var(--cp-neon-magenta);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 69, 255, 0.5);
}

html.theme-cyberpurple .notification-dropdown {
    background: rgba(21, 7, 52, 0.98);
    border: 1px solid rgba(196, 124, 255, 0.3);
    box-shadow: 0 8px 30px rgba(196, 124, 255, 0.2);
    backdrop-filter: blur(15px);
}

html.theme-cyberpurple .notification-dropdown .dropdown-header {
    border-bottom-color: rgba(196, 124, 255, 0.2);
    color: #e0e0e0;
}

html.theme-cyberpurple .notification-item {
    border-bottom-color: rgba(196, 124, 255, 0.1);
    color: #e0e0e0;
}

html.theme-cyberpurple .notification-item:hover {
    background: rgba(196, 124, 255, 0.08);
}

html.theme-cyberpurple .notification-item.unread {
    background: rgba(196, 124, 255, 0.1);
    border-left: 3px solid var(--cp-neon-purple);
}

html.theme-cyberpurple .notification-item .notification-title {
    color: #e0e0e0;
}

html.theme-cyberpurple .notification-item .notification-message {
    color: rgba(196, 124, 255, 0.5);
}

/* ========== CYBERPURPLE TOASTS ========== */

html.theme-cyberpurple .toast {
    background: rgba(21, 7, 52, 0.95);
    border: 1px solid rgba(196, 124, 255, 0.3);
    color: #e0e0e0;
    box-shadow: 0 4px 30px rgba(196, 124, 255, 0.2);
    backdrop-filter: blur(10px);
}

html.theme-cyberpurple .toast.success {
    background: rgba(5, 217, 232, 0.15);
    border-color: rgba(5, 217, 232, 0.4);
    color: var(--cp-cyan);
}

html.theme-cyberpurple .toast.error {
    background: rgba(255, 69, 69, 0.15);
    border-color: rgba(255, 69, 69, 0.4);
    color: var(--error-light);
}

html.theme-cyberpurple .toast.warning {
    background: rgba(249, 200, 14, 0.15);
    border-color: rgba(249, 200, 14, 0.4);
    color: var(--warning);
}

/* ========== CYBERPURPLE ALERTS ========== */

html.theme-cyberpurple .alert.success {
    background: rgba(5, 217, 232, 0.1);
    color: var(--cp-cyan);
}

html.theme-cyberpurple .alert.error {
    background: rgba(255, 69, 69, 0.1);
    color: var(--error-light);
}

html.theme-cyberpurple .alert-summary {
    background: rgba(21, 7, 52, 0.8);
    border: 1px solid rgba(196, 124, 255, 0.2);
}

html.theme-cyberpurple .alert-summary .num.critical {
    color: var(--error-light);
}

html.theme-cyberpurple .alert-summary .num.warning {
    color: var(--warning);
}

html.theme-cyberpurple .severity-pills button {
    background: rgba(21, 7, 52, 0.6);
    border: 1px solid rgba(196, 124, 255, 0.2);
    color: rgba(196, 124, 255, 0.7);
}

html.theme-cyberpurple .severity-pills button.active {
    background: linear-gradient(135deg, var(--cp-purple), var(--cp-neon-purple-deep));
    border-color: var(--cp-neon-purple);
    color: #fff;
}

/* ========== CYBERPURPLE EMPTY STATES ========== */

html.theme-cyberpurple .empty-state {
    color: rgba(196, 124, 255, 0.6);
}

html.theme-cyberpurple .empty-state .empty-icon {
    color: var(--cp-neon-purple);
    filter: drop-shadow(0 0 12px rgba(196, 124, 255, 0.4));
}

html.theme-cyberpurple .empty-state .empty-title {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .empty-state .empty-message {
    color: rgba(196, 124, 255, 0.5);
}

/* ========== CYBERPURPLE PROGRESS ========== */

html.theme-cyberpurple .progress-bar {
    background: rgba(123, 44, 191, 0.2);
}

html.theme-cyberpurple .progress-fill {
    background: linear-gradient(90deg, var(--cp-purple), var(--cp-neon-purple));
}

/* ========== CYBERPURPLE LOADING ========== */

html.theme-cyberpurple .skeleton {
    background: linear-gradient(90deg,
        rgba(21, 7, 52, 0.8) 25%,
        rgba(123, 44, 191, 0.2) 50%,
        rgba(21, 7, 52, 0.8) 75%);
    background-size: 200% 100%;
}

html.theme-cyberpurple .loading {
    color: var(--cp-neon-purple);
}

/* ========== CYBERPURPLE TOKEN DISPLAY ========== */

html.theme-cyberpurple .token-display {
    background: rgba(13, 2, 33, 0.8);
    color: var(--cp-cyan);
    border: 1px solid rgba(196, 124, 255, 0.2);
}

html.theme-cyberpurple code {
    background: rgba(13, 2, 33, 0.6);
    color: var(--cp-cyan);
}

html.theme-cyberpurple pre {
    background: rgba(13, 2, 33, 0.8);
    color: #e0e0e0;
    border: 1px solid rgba(196, 124, 255, 0.15);
}

/* ========== CYBERPURPLE APPLIANCE CARDS ========== */

html.theme-cyberpurple .appliance-card {
    background: rgba(21, 7, 52, 0.8);
    border: 1px solid rgba(196, 124, 255, 0.25);
    backdrop-filter: blur(10px);
}

html.theme-cyberpurple .appliance-card:hover {
    border-color: var(--cp-neon-purple);
    box-shadow: 0 0 20px rgba(196, 124, 255, 0.2);
}

html.theme-cyberpurple .appliance-card-header h3 {
    color: #e0e0e0;
}

html.theme-cyberpurple .appliance-card .model {
    color: rgba(196, 124, 255, 0.6);
}

html.theme-cyberpurple .allocation-bar-track {
    background: rgba(196, 124, 255, 0.15);
}

html.theme-cyberpurple .allocation-bar-fill {
    background: linear-gradient(90deg, var(--cp-purple), var(--cp-neon-purple));
}

html.theme-cyberpurple .safety-info {
    color: rgba(196, 124, 255, 0.5);
}

/* ========== CYBERPURPLE DEVICE CARDS ========== */

html.theme-cyberpurple .device-card {
    background: rgba(21, 7, 52, 0.8);
    border: 1px solid rgba(196, 124, 255, 0.25);
    backdrop-filter: blur(10px);
}

html.theme-cyberpurple .device-card:hover {
    border-color: var(--cp-neon-purple);
    box-shadow: 0 0 20px rgba(196, 124, 255, 0.2);
}

html.theme-cyberpurple .device-card-header {
    color: #e0e0e0;
}

html.theme-cyberpurple .version-row {
    color: rgba(196, 124, 255, 0.7);
}

html.theme-cyberpurple .update-badge {
    background: rgba(249, 200, 14, 0.2);
    color: var(--warning);
}

/* ========== CYBERPURPLE DIAGNOSTIC CARDS ========== */

html.theme-cyberpurple .diagnostic-card {
    background: rgba(21, 7, 52, 0.6);
    border: 1px solid rgba(196, 124, 255, 0.2);
    border-radius: 6px;
}

html.theme-cyberpurple .diagnostic-card h4 {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .diagnostic-card p {
    color: rgba(196, 124, 255, 0.6);
}

html.theme-cyberpurple .diag-status.success { color: var(--cp-cyan); }
html.theme-cyberpurple .diag-status.failed { color: var(--error-light); }
html.theme-cyberpurple .diag-status.running { color: var(--warning); }
html.theme-cyberpurple .diag-status.pending { color: rgba(196, 124, 255, 0.4); }

/* ========== CYBERPURPLE AUDIT LOG ========== */

html.theme-cyberpurple .audit-entry {
    border-bottom-color: rgba(196, 124, 255, 0.1);
}

html.theme-cyberpurple .audit-entry-time {
    color: rgba(196, 124, 255, 0.5);
}

html.theme-cyberpurple .audit-result-success { color: var(--cp-cyan); }
html.theme-cyberpurple .audit-result-failed { color: var(--error-light); }
html.theme-cyberpurple .audit-result-cooldown { color: var(--warning); }

/* ========== CYBERPURPLE CONFIGURE ========== */

html.theme-cyberpurple .config-section {
    border-color: rgba(196, 124, 255, 0.15);
}

html.theme-cyberpurple .section-header .section-title {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .section-count {
    background: rgba(196, 124, 255, 0.2);
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .summary-bar {
    background: rgba(21, 7, 52, 0.6);
    border: 1px solid rgba(196, 124, 255, 0.15);
}

html.theme-cyberpurple .summary-stat .value {
    color: #fff;
}

html.theme-cyberpurple .summary-stat .label {
    color: rgba(196, 124, 255, 0.6);
}

html.theme-cyberpurple .channel-hint {
    color: rgba(196, 124, 255, 0.5);
}

html.theme-cyberpurple .empty-hint {
    color: rgba(196, 124, 255, 0.5);
}

/* Wizard */
html.theme-cyberpurple .wizard-progress .progress-dot {
    border-color: rgba(196, 124, 255, 0.3);
}

html.theme-cyberpurple .wizard-progress .progress-dot.active {
    background: var(--cp-neon-purple);
    border-color: var(--cp-neon-purple);
    box-shadow: 0 0 10px rgba(196, 124, 255, 0.5);
}

html.theme-cyberpurple .wizard-progress .progress-dot.complete {
    background: var(--cp-cyan);
    border-color: var(--cp-cyan);
}

html.theme-cyberpurple .wizard-icon {
    color: var(--cp-neon-purple);
    filter: drop-shadow(0 0 15px rgba(196, 124, 255, 0.5));
}

html.theme-cyberpurple .wizard-icon.success {
    color: var(--cp-cyan);
    filter: drop-shadow(0 0 15px rgba(5, 217, 232, 0.5));
}

html.theme-cyberpurple .wizard-icon.error {
    color: var(--error-light);
    filter: drop-shadow(0 0 15px rgba(255, 69, 69, 0.5));
}

html.theme-cyberpurple .wizard-text {
    color: #e0e0e0;
}

/* ========== CYBERPURPLE FOOTER ========== */

html.theme-cyberpurple .site-footer {
    border-top-color: rgba(196, 124, 255, 0.15);
    color: rgba(196, 124, 255, 0.4);
}

html.theme-cyberpurple .site-footer a {
    color: rgba(196, 124, 255, 0.5);
}

html.theme-cyberpurple .site-footer a:hover {
    color: var(--cp-neon-purple);
    text-shadow: 0 0 8px rgba(196, 124, 255, 0.4);
}

html.theme-cyberpurple .site-footer .separator {
    color: rgba(196, 124, 255, 0.2);
}

/* ========== CYBERPURPLE SCROLLBAR ========== */

html.theme-cyberpurple ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.theme-cyberpurple ::-webkit-scrollbar-track {
    background: var(--cp-space-deep);
}

html.theme-cyberpurple ::-webkit-scrollbar-thumb {
    background: var(--cp-purple);
    border-radius: 4px;
}

html.theme-cyberpurple ::-webkit-scrollbar-thumb:hover {
    background: var(--cp-neon-purple);
}

/* ========== CYBERPURPLE PROFILE ========== */

html.theme-cyberpurple .profile-grid {
    color: #e0e0e0;
}

html.theme-cyberpurple .profile-card h3 {
    color: var(--cp-neon-purple);
}

html.theme-cyberpurple .info-row .label {
    color: rgba(196, 124, 255, 0.6);
}

html.theme-cyberpurple .info-row .value {
    color: #e0e0e0;
}

html.theme-cyberpurple .preference-label {
    color: #e0e0e0;
}

html.theme-cyberpurple .preference-label .desc {
    color: rgba(196, 124, 255, 0.5);
}

html.theme-cyberpurple .scheme-selector button {
    background: rgba(21, 7, 52, 0.6);
    border: 1px solid rgba(196, 124, 255, 0.2);
    color: rgba(196, 124, 255, 0.7);
}

html.theme-cyberpurple .theme-toggle-buttons .circle-btn {
    background: rgba(21, 7, 52, 0.6);
    border: 1px solid rgba(196, 124, 255, 0.3);
}

html.theme-cyberpurple .theme-toggle-buttons .circle-btn.active {
    background: linear-gradient(145deg, var(--cp-neon-purple), var(--cp-purple));
    border-color: var(--cp-neon-purple);
    box-shadow: 0 0 12px rgba(196, 124, 255, 0.4);
}

/* ========== CYBERPURPLE BULK ACTIONS ========== */

html.theme-cyberpurple .bulk-actions,
html.theme-cyberpurple .bulk-bar {
    background: rgba(123, 44, 191, 0.15);
    border-color: rgba(196, 124, 255, 0.2);
}

html.theme-cyberpurple .bulk-actions span {
    color: var(--cp-neon-purple);
}

/* ========== CYBERPURPLE CONTEXT SWITCHER ========== */

html.theme-cyberpurple .context-switcher,
html.theme-cyberpurple .miniverse-selector {
    background: rgba(21, 7, 52, 0.9);
    border: 1px solid var(--cp-purple);
    color: var(--cp-neon-purple);
}

/* ========== CYBERPURPLE LOG VIEWER ========== */

html.theme-cyberpurple #log-viewer {
    background: rgba(13, 2, 33, 0.9);
    border: 1px solid rgba(196, 124, 255, 0.15);
    color: #e0e0e0;
}

/* ========== CYBERPURPLE RANGE SLIDER ========== */

html.theme-cyberpurple .rangeslider {
    background: var(--cp-purple);
}

html.theme-cyberpurple .rangeslider::-webkit-slider-thumb {
    background: var(--cp-neon-purple);
    box-shadow: 0 0 8px rgba(196, 124, 255, 0.5);
}

html.theme-cyberpurple .rangeslider::-moz-range-thumb {
    background: var(--cp-neon-purple);
    box-shadow: 0 0 8px rgba(196, 124, 255, 0.5);
}

/* ========== CYBERPURPLE LOGIN ========== */

html.theme-cyberpurple .login-wrapper {
    background: linear-gradient(135deg, var(--cp-space-deep), var(--cp-space-mid), var(--cp-purple));
}

html.theme-cyberpurple .login-box {
    background: rgba(21, 7, 52, 0.9);
    border: 1px solid rgba(196, 124, 255, 0.3);
    box-shadow: 0 10px 60px rgba(196, 124, 255, 0.2);
    backdrop-filter: blur(15px);
}

html.theme-cyberpurple .login-box h1 {
    color: #fff;
    text-shadow: 0 0 15px rgba(196, 124, 255, 0.5);
}

html.theme-cyberpurple .login-box .error {
    background: rgba(255, 69, 69, 0.15);
    color: var(--error-light);
}