/* ========================================
   Cyberpunk Theme
   Neon pink/cyan on near-black
   ======================================== */

[data-theme="cyberpunk"] {
    --sidebar-bg: #08081a;
    --sidebar-header-bg: #0a0a20;
    --topbar-bg: #0a0a20;
    --content-bg: transparent;
    --page-bg: #050510;

    --card-bg: rgba(12, 12, 30, 0.96);
    --card-header-bg: rgba(15, 10, 40, 0.5);
    --card-border: rgba(255, 0, 255, 0.12);

    --table-bg: rgba(12, 12, 30, 0.96);
    --table-header-bg: rgba(15, 10, 40, 0.5);
    --table-border: rgba(255, 0, 255, 0.1);
    --table-hover-bg: rgba(20, 15, 50, 0.8);
    --table-stripe-bg: rgba(10, 8, 25, 0.3);

    --text-primary: #e0d4ff;
    --text-secondary: #b8a4e0;
    --text-muted: #7c6aaa;
    --text-inverse: #0d0221;

    --border-color: rgba(255, 0, 255, 0.15);
    --border-light: #5228c0;
    --sidebar-header-border: rgba(255, 0, 255, 0.15);
    --topbar-border: rgba(255, 0, 255, 0.15);

    --scrollbar-thumb: #5228c0;
    --scrollbar-thumb-hover: #7c3aed;

    --sidebar-text: #b8a4e0;
    --sidebar-text-hover: #ff00ff;
    --sidebar-active-bg: rgba(255, 0, 255, 0.12);
    --sidebar-active-text: #ff00ff;
    --sidebar-active-border: #ff00ff;
    --nav-group-bg: transparent;
    --nav-group-border: transparent;
    --nav-group-hover-bg: rgba(255, 0, 255, 0.06);

    --topbar-text: #b8a4e0;
    --topbar-text-active: #00ffff;

    --btn-primary-bg: #ff00ff;
    --btn-primary-bg-hover: #ff44ff;
    --btn-primary-text: #000000;
    --btn-secondary-bg: #2a1260;
    --btn-secondary-bg-hover: #3d1a8e;
    --btn-secondary-text: #d4b8ff;
    --btn-secondary-border: #3d1a8e;
    --btn-outline-border: #5228c0;
    --btn-outline-text: #d4b8ff;

    --input-bg: rgba(12, 12, 30, 0.8);
    --input-border: rgba(255, 0, 255, 0.2);
    --input-text: #e0d4ff;
    --input-placeholder: #7c6aaa;
    --input-focus-border: #ff00ff;
    --input-disabled-bg: #0d0221;

    --dropdown-bg: #1a0a3e;
    --dropdown-border: #3d1a8e;
    --dropdown-text: #d4b8ff;
    --dropdown-hover-bg: #2a1260;
    --dropdown-hover-text: #ff00ff;

    --modal-bg: #1a0a3e;
    --modal-header-bg: #210c4a;
    --modal-border: #3d1a8e;
    --modal-backdrop: rgba(5, 5, 16, 0.9);

    --alert-info-bg: rgba(0, 255, 255, 0.1);
    --alert-info-border: #00ffff;
    --alert-info-text: #00ffff;
    --alert-success-bg: rgba(0, 255, 136, 0.1);
    --alert-success-border: #00ff88;
    --alert-success-text: #00ff88;
    --alert-warning-bg: rgba(255, 230, 0, 0.1);
    --alert-warning-border: #ffe600;
    --alert-warning-text: #ffe600;
    --alert-danger-bg: rgba(255, 0, 68, 0.1);
    --alert-danger-border: #ff0044;
    --alert-danger-text: #ff4477;

    --success-color: #00ff88;
    --success-hover: #00cc6a;
    --warning-color: #ffe600;
    --warning-hover: #ccb800;
    --danger-color: #ff0044;
    --danger-hover: #cc0036;

    --progress-bg: #2a1260;

    --avatar-bg: #ff00ff;
    --logo-filter: invert(100%) sepia(0%) saturate(0%) brightness(100%);
    --shadow: 0 4px 24px rgba(255, 0, 255, 0.15), 0 0 8px rgba(0, 255, 255, 0.08);
    --link-color: #00ffff;
    --link-hover-color: #66ffff;

    /* ── canonical --tl-* contract bridge ───────────────────────────── */
    --tl-bg-base:        #050510;   /* SOLID near-black (matches body background) */
    --tl-bg-elevated:    var(--card-bg);
    --tl-bg-elevated-2:  var(--card-header-bg, var(--table-stripe-bg, var(--card-bg)));
    --tl-bg-elevated-3:  var(--btn-secondary-bg, var(--table-hover-bg, var(--card-bg)));
    --tl-bg-hover:       var(--table-hover-bg, var(--nav-group-hover-bg, var(--card-bg)));
    --tl-bg-input:       var(--input-bg, var(--card-bg));

    --tl-text-primary:   var(--text-primary);
    --tl-text-secondary: var(--text-secondary, var(--text-primary));
    --tl-text-muted:     var(--text-muted, var(--text-secondary));
    --tl-text-subtle:    var(--input-placeholder, var(--text-muted));
    --tl-text-inverse:   var(--text-inverse, #0d0221);

    --tl-accent-primary:        var(--btn-primary-bg, #ff00ff);            /* signature neon magenta */
    --tl-accent-primary-light:  var(--btn-primary-bg-hover, var(--sidebar-text-hover, #ff44ff));
    --tl-accent-primary-dark:   var(--sidebar-active-border, var(--btn-primary-bg, #ff00ff));

    --tl-border-default: var(--border-color, var(--card-border));
    --tl-border-subtle:  var(--card-border, var(--border-color));
    --tl-border-strong:  var(--border-light, var(--input-border, var(--border-color)));
    --tl-border-focus:   var(--input-focus-border, var(--btn-primary-bg));

    --tl-card-bg:        var(--card-bg);
    --tl-card-border:    var(--card-border, var(--border-color));
    --tl-card-header-bg: var(--card-header-bg, var(--card-bg));

    --tl-button-primary-bg:     var(--btn-primary-bg);
    --tl-button-primary-text:   var(--btn-primary-text, #000000);
    --tl-button-secondary-bg:   var(--btn-secondary-bg, var(--card-header-bg));
    --tl-button-secondary-text: var(--btn-secondary-text, var(--text-secondary));

    --tl-success: var(--success-color, #00ff88);
    --tl-error:   var(--danger-color, #ff0044);
    --tl-warning: var(--warning-color, #ffe600);
    --tl-info:    var(--alert-info-text, var(--link-color, #00ffff));
    --tl-error-bg:     var(--alert-danger-bg, rgba(255, 0, 68, .1));
    --tl-error-border: var(--alert-danger-border, var(--danger-color, #ff0044));

    --tl-shadow-sm: var(--shadow, 0 1px 2px rgba(0,0,0,.3));
    --tl-shadow-md: var(--shadow, 0 4px 12px rgba(0,0,0,.4));
    --tl-shadow-lg: var(--shadow, 0 10px 30px rgba(0,0,0,.5));
}

/* Cyberpunk theme personality */
[data-theme="cyberpunk"] {
    --focus-ring-color: rgba(255, 0, 255, 0.3);
    --border-radius-card: 2px;
    --border-radius-btn: 0;
    --scrollbar-track: #050510;
}

[data-theme="cyberpunk"] ::selection {
    background-color: rgba(255, 0, 255, 0.3);
    color: #ffffff;
}

/* Near-black body background */
[data-theme="cyberpunk"] body {
    background: #050510 !important;
}

/* Cards above rain(1), below glitch overlays — no backdrop-filter for perf */
[data-theme="cyberpunk"] .card,
[data-theme="cyberpunk"] .content-card,
[data-theme="cyberpunk"] .content-section,
[data-theme="cyberpunk"] .stat-card,
[data-theme="cyberpunk"] .collapsible-section {
    position: relative;
    z-index: 2;
}

/* Sidebar and topbar above all effects */
[data-theme="cyberpunk"] .sidebar {
    position: relative;
    z-index: 3;
}

[data-theme="cyberpunk"] .top-row {
    position: relative;
    z-index: 3;
}

/* Neon text glow on headings */
[data-theme="cyberpunk"] h1,
[data-theme="cyberpunk"] h2,
[data-theme="cyberpunk"] h3 {
    text-shadow: 0 0 6px rgba(255, 0, 255, 0.3), 0 0 12px rgba(0, 255, 255, 0.15);
}

/* Glowing focus inputs */
[data-theme="cyberpunk"] .form-control:focus,
[data-theme="cyberpunk"] .form-select:focus {
    box-shadow: 0 0 0 2px rgba(255, 0, 255, 0.3), 0 0 12px rgba(0, 255, 255, 0.15);
}

/* Pulsing neon on active sidebar items */
@media (prefers-reduced-motion: no-preference) {
    [data-theme="cyberpunk"] .sidebar .nav-link.active,
    [data-theme="cyberpunk"] .sidebar a.custom-nav-item.custom-active {
        animation: neon-pulse 2s ease-in-out infinite alternate;
    }

    @keyframes neon-pulse {
        from { box-shadow: inset -2px 0 0 #ff00ff, 0 0 6px rgba(255, 0, 255, 0.15); }
        to   { box-shadow: inset -2px 0 0 #ff44ff, 0 0 14px rgba(255, 0, 255, 0.4); }
    }
}

/* ========================================
   EFFECT: Grid — neon grid background
   Toggle key: grid
   ======================================== */

[data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-grid-off]) #page-root::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 0, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ========================================
   EFFECT: Rain — angled neon streaks
   Toggle key: rain
   ======================================== */

@media (prefers-reduced-motion: no-preference) {
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-rain-off]) #page-root::after {
        content: '';
        position: fixed;
        top: -100%;
        left: -20%;
        width: 140%;
        height: 300%;
        pointer-events: none;
        z-index: 1;
        will-change: transform;
        background-image:
            /* Magenta rain streaks — duller, subtle */
            radial-gradient(ellipse 1px 45px at 40px 80px, rgba(255, 0, 255, 0.25), transparent),
            radial-gradient(ellipse 1px 55px at 130px 320px, rgba(255, 0, 255, 0.2), transparent),
            radial-gradient(ellipse 1px 40px at 210px 150px, rgba(255, 0, 255, 0.3), transparent),
            radial-gradient(ellipse 1px 50px at 310px 480px, rgba(255, 0, 255, 0.15), transparent),
            radial-gradient(ellipse 1px 60px at 400px 50px, rgba(255, 0, 255, 0.25), transparent),
            radial-gradient(ellipse 1px 35px at 490px 390px, rgba(255, 0, 255, 0.2), transparent),
            radial-gradient(ellipse 1px 50px at 580px 220px, rgba(255, 0, 255, 0.3), transparent),
            radial-gradient(ellipse 1px 45px at 660px 540px, rgba(255, 0, 255, 0.15), transparent),
            radial-gradient(ellipse 1px 55px at 750px 110px, rgba(255, 0, 255, 0.25), transparent),
            radial-gradient(ellipse 1px 40px at 830px 430px, rgba(255, 0, 255, 0.2), transparent),
            radial-gradient(ellipse 1px 50px at 920px 280px, rgba(255, 0, 255, 0.3), transparent),
            radial-gradient(ellipse 1px 45px at 70px 500px, rgba(255, 0, 255, 0.15), transparent),
            radial-gradient(ellipse 1px 60px at 170px 60px, rgba(255, 0, 255, 0.2), transparent),
            radial-gradient(ellipse 1px 35px at 270px 360px, rgba(255, 0, 255, 0.25), transparent),
            radial-gradient(ellipse 1px 50px at 360px 190px, rgba(255, 0, 255, 0.15), transparent),
            /* Cyan rain streaks — duller, subtle */
            radial-gradient(ellipse 1px 50px at 85px 260px, rgba(0, 255, 255, 0.2), transparent),
            radial-gradient(ellipse 1px 40px at 180px 520px, rgba(0, 255, 255, 0.25), transparent),
            radial-gradient(ellipse 1px 55px at 260px 30px, rgba(0, 255, 255, 0.15), transparent),
            radial-gradient(ellipse 1px 45px at 345px 340px, rgba(0, 255, 255, 0.3), transparent),
            radial-gradient(ellipse 1px 35px at 440px 170px, rgba(0, 255, 255, 0.2), transparent),
            radial-gradient(ellipse 1px 55px at 530px 450px, rgba(0, 255, 255, 0.25), transparent),
            radial-gradient(ellipse 1px 40px at 615px 90px, rgba(0, 255, 255, 0.15), transparent),
            radial-gradient(ellipse 1px 50px at 710px 380px, rgba(0, 255, 255, 0.3), transparent),
            radial-gradient(ellipse 1px 45px at 790px 210px, rgba(0, 255, 255, 0.2), transparent),
            radial-gradient(ellipse 1px 60px at 880px 500px, rgba(0, 255, 255, 0.25), transparent),
            radial-gradient(ellipse 1px 35px at 960px 140px, rgba(0, 255, 255, 0.15), transparent),
            radial-gradient(ellipse 1px 50px at 55px 410px, rgba(0, 255, 255, 0.3), transparent),
            radial-gradient(ellipse 1px 45px at 150px 240px, rgba(0, 255, 255, 0.2), transparent),
            radial-gradient(ellipse 1px 55px at 240px 560px, rgba(0, 255, 255, 0.25), transparent),
            radial-gradient(ellipse 1px 40px at 330px 70px, rgba(0, 255, 255, 0.15), transparent);
        background-size: 1000px 600px;
        background-repeat: repeat;
        animation: cyber-rain 1.2s linear infinite;
    }

    @keyframes cyber-rain {
        from { transform: rotate(12deg) translateY(0); }
        to { transform: rotate(12deg) translateY(600px); }
    }
}

/* ========================================
   EFFECT: Glitch — bar, RGB split, text glitch, button flicker
   Toggle key: glitch
   ======================================== */

@media (prefers-reduced-motion: no-preference) {
    /* Glitch bar */
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-glitch-off]) body::before {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        height: 3px;
        pointer-events: none;
        z-index: 9999;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 0, 255, 0.6) 15%,
            rgba(0, 255, 255, 0.6) 30%,
            transparent 35%,
            rgba(0, 255, 255, 0.4) 60%,
            rgba(255, 0, 255, 0.5) 75%,
            transparent 80%
        );
        animation: glitch-bar 8s step-end infinite;
        opacity: 0;
    }

    @keyframes glitch-bar {
        0%, 92%   { opacity: 0; top: 0; }
        92.5%     { opacity: 1; top: 15%; height: 2px; }
        93%       { opacity: 1; top: 65%; height: 4px; }
        93.5%     { opacity: 0; top: 40%; }
        94%       { opacity: 1; top: 80%; height: 2px; }
        94.5%     { opacity: 1; top: 25%; height: 3px; }
        95%       { opacity: 0; }
        96%       { opacity: 1; top: 50%; height: 2px; }
        96.5%     { opacity: 1; top: 10%; height: 5px; }
        97%       { opacity: 0; }
        100%      { opacity: 0; }
    }

    /* RGB split overlay */
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-glitch-off]) body::after {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9998;
        background: transparent;
        animation: glitch-rgb 8s step-end infinite;
        mix-blend-mode: screen;
    }

    @keyframes glitch-rgb {
        0%, 91%   { box-shadow: none; }
        92%       { box-shadow: -3px 0 rgba(255, 0, 255, 0.15), 3px 0 rgba(0, 255, 255, 0.15); }
        93%       { box-shadow: 4px 0 rgba(0, 255, 255, 0.2), -2px 0 rgba(255, 0, 255, 0.2); }
        93.5%     { box-shadow: none; }
        94%       { box-shadow: -5px 0 rgba(255, 0, 255, 0.18), 2px 0 rgba(0, 255, 255, 0.12); }
        95%       { box-shadow: none; }
        96%       { box-shadow: 3px 0 rgba(255, 0, 255, 0.15), -4px 0 rgba(0, 255, 255, 0.15); }
        96.5%     { box-shadow: none; }
        100%      { box-shadow: none; }
    }

    /* Text glitch on headings */
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-glitch-off]) h1,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-glitch-off]) h2,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-glitch-off]) h3 {
        animation: text-glitch 6s step-end infinite;
    }

    @keyframes text-glitch {
        0%, 89%   { text-shadow: 0 0 6px rgba(255, 0, 255, 0.3), 0 0 12px rgba(0, 255, 255, 0.15); }
        90%       { text-shadow: -3px 0 #ff00ff, 3px 0 #00ffff; transform: skewX(-2deg); }
        91%       { text-shadow: 2px 0 #00ffff, -2px 0 #ff00ff; transform: skewX(1deg); }
        92%       { text-shadow: 0 0 6px rgba(255, 0, 255, 0.3), 0 0 12px rgba(0, 255, 255, 0.15); transform: none; }
        95%       { text-shadow: -2px 1px #ff00ff, 3px -1px #00ffff; transform: skewX(-1deg); }
        96%       { text-shadow: 0 0 6px rgba(255, 0, 255, 0.3), 0 0 12px rgba(0, 255, 255, 0.15); transform: none; }
        100%      { text-shadow: 0 0 6px rgba(255, 0, 255, 0.3), 0 0 12px rgba(0, 255, 255, 0.15); }
    }

    /* Static neon glow on primary buttons (not animated — hover glitch needs priority) */
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-glitch-off]) .btn-primary {
        box-shadow: 0 0 6px rgba(255, 0, 255, 0.3);
    }

    /* One-shot hover glitch on buttons and cards — fires immediately */
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-glitch-off]) .btn:hover:not(.glitch-cooldown),
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-glitch-off]) .card:hover:not(.glitch-cooldown) {
        animation: cyber-hover-glitch 0.2s ease forwards !important;
    }

    @keyframes cyber-hover-glitch {
        0% { transform: translate(0); filter: none; }
        15% { transform: translate(-3px, 1px); filter: hue-rotate(90deg); }
        30% { transform: translate(3px, -1px); filter: hue-rotate(-90deg); }
        45% { transform: translate(-1px, 2px); filter: hue-rotate(45deg) brightness(1.3); }
        60% { transform: translate(1px, -1px); filter: hue-rotate(-45deg); }
        75% { transform: translate(0); filter: none; }
        100% { transform: translate(0); filter: none; }
    }
}

/* ========================================
   EFFECT: Borders — spinning neon conic-gradient
   Toggle key: borders
   ======================================== */

@media (prefers-reduced-motion: no-preference) {
    @property --cyber-border-angle {
        syntax: "<angle>";
        inherits: false;
        initial-value: 0deg;
    }

    @keyframes cyber-border-spin {
        to { --cyber-border-angle: 360deg; }
    }

    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .card,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .content-card,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .content-section,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .stat-card,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .collapsible-section,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .form-control,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .form-select,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .dropdown-menu,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .modal-content,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .table,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .alert,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .list-group,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .accordion-item,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .input-group {
        position: relative;
        overflow: hidden;
    }

    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .card::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .content-card::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .content-section::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .stat-card::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .collapsible-section::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .form-control::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .form-select::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .dropdown-menu::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .modal-content::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .table::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .alert::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .list-group::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .accordion-item::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .input-group::before {
        content: '';
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: inherit;
        background: conic-gradient(
            from var(--cyber-border-angle, 0deg),
            #ff00ff, #00ffff, #ff00ff, #00ffff, #ff00ff
        );
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        -webkit-mask-composite: xor;
        pointer-events: none;
        animation: cyber-border-spin 4s linear infinite;
    }

    /* Cards and modals get thicker border */
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .card::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .content-card::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .content-section::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .stat-card::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .collapsible-section::before,
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .modal-content::before {
        padding: 2px;
    }

    /* Button border chase */
    @property --cyber-btn-angle {
        syntax: "<angle>";
        inherits: false;
        initial-value: 0deg;
    }

    @keyframes cyber-btn-spin {
        to { --cyber-btn-angle: 360deg; }
    }

    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .btn-primary {
        position: relative;
        overflow: hidden;
    }

    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-borders-off]) .btn-primary::after {
        content: '';
        position: absolute;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: conic-gradient(
            from var(--cyber-btn-angle, 0deg),
            transparent 60%, #00ffff 75%, #ff00ff 85%, transparent 95%
        );
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        -webkit-mask-composite: xor;
        pointer-events: none;
        animation: cyber-btn-spin 2s linear infinite;
    }
}

/* ========================================
   EFFECT: Screen Shake
   Toggle key: shake
   ======================================== */

@media (prefers-reduced-motion: no-preference) {
    [data-theme="cyberpunk"]:not([data-effects-off]):not([data-effect-shake-off]) #page-root {
        animation: screen-shake 12s step-end infinite;
    }

    /* Uses margin instead of transform to avoid creating a containing block
       on #page-root, which would break position:fixed descendants (e.g. detail panels) */
    @keyframes screen-shake {
        0%, 93%    { margin: 0; }
        93.2%      { margin: -2px 0 0 1px; }
        93.4%      { margin: 1px 0 0 -1px; }
        93.6%      { margin: 2px 0 0 -1px; }
        93.8%      { margin: -2px 0 0 2px; }
        94%        { margin: 0 0 0 -3px; }
        94.2%      { margin: 0; }
        100%       { margin: 0; }
    }
}