/* ============================================================================
   LOREBENCH NEON THEME
   ============================================================================
   Synthwave/cyberpunk aesthetic with neon colors and glowing effects.
   Pink, cyan, and purple color-shifting gradients.
   ============================================================================ */

:root[data-theme="neon"] {
    /* Holographic gradient colors */
    --holo-cyan: #00d4ff;
    --holo-magenta: #ff00ff;
    --holo-pink: #ff6ec7;
    --holo-purple: #8a2be2;
    --holo-blue: #4169e1;
    --holo-teal: #00ced1;
    --holo-green: #00ff88;

    /* The signature holographic gradient */
    --holo-gradient: linear-gradient(
        135deg,
        #00d4ff 0%,
        #ff6ec7 25%,
        #8a2be2 50%,
        #00ced1 75%,
        #00d4ff 100%
    );

    /* Animated holographic gradient for special elements */
    --holo-gradient-animated: linear-gradient(
        90deg,
        #00d4ff,
        #ff6ec7,
        #8a2be2,
        #00ced1,
        #00ff88,
        #ff6ec7,
        #00d4ff
    );

    /* Subtle holographic tint for backgrounds */
    --holo-tint: linear-gradient(
        135deg,
        rgba(0, 212, 255, 0.1) 0%,
        rgba(255, 110, 199, 0.08) 33%,
        rgba(138, 43, 226, 0.1) 66%,
        rgba(0, 206, 209, 0.08) 100%
    );

    /* PRIMARY ACCENT COLOR - shifts through spectrum */
    --lb-accent-primary: #00d4ff;
    --lb-accent-primary-light: #ff6ec7;
    --lb-accent-primary-dark: #8a2be2;
    --lb-accent-primary-darker: #4169e1;

    /* BACKGROUND COLORS - deep dark for contrast */
    --lb-bg-base: #0a0a0f;
    --lb-bg-elevated: #12121a;
    --lb-bg-elevated-1: #16161f;
    --lb-bg-elevated-2: #1a1a24;
    --lb-bg-elevated-3: #1e1e28;
    --lb-bg-input: #12121a;
    --lb-bg-hover: rgba(0, 212, 255, 0.1);
    --bg-tertiary: #12121a;
    --bg-primary: #16161f;

    /* BORDER COLORS - holographic tint */
    --lb-border-subtle: rgba(0, 212, 255, 0.15);
    --lb-border-default: rgba(138, 43, 226, 0.25);
    --lb-border-strong: rgba(255, 110, 199, 0.35);
    --lb-border-focus: var(--holo-cyan);

    /* TEXT COLORS */
    --lb-text-primary: #f0f0ff;
    --lb-text-secondary: #c0c0d0;
    --lb-text-muted: rgba(192, 192, 208, 0.6);
    --lb-text-subtle: rgba(192, 192, 208, 0.4);
    --lb-text-inverse: #0a0a0f;

    /* STATE COLORS */
    --lb-success: #00ff88;
    --lb-error: #ff4466;
    --lb-error-bg: #1a0008;
    --lb-error-border: #440022;
    --lb-warning: #ffaa00;
    --lb-info: var(--holo-cyan);

    /* COMPONENT-SPECIFIC */
    --lb-card-bg: linear-gradient(180deg, rgba(18, 18, 26, 0.95) 0%, rgba(16, 16, 22, 0.98) 100%);
    --lb-card-border: rgba(138, 43, 226, 0.2);
    --lb-card-header-bg: linear-gradient(180deg, rgba(22, 22, 31, 0.95) 0%, rgba(18, 18, 26, 0.95) 100%);

    /* INTERACTIVE ELEMENTS */
    --lb-button-primary-bg: rgba(0, 212, 255, 0.2);
    --lb-button-primary-hover: rgba(255, 110, 199, 0.25);
    --lb-button-primary-text: var(--holo-cyan);
    --lb-button-secondary-bg: transparent;
    --lb-button-secondary-hover: rgba(138, 43, 226, 0.15);
    --lb-button-secondary-text: var(--holo-pink);

    /* RATING SYSTEM */
    --lb-rating-fill: var(--holo-pink);
    --lb-rating-empty: rgba(138, 43, 226, 0.3);
    --lb-rating-hover: var(--holo-cyan);

    /* SHADOWS - multi-color holographic glow */
    --lb-shadow-sm: 0 0 10px rgba(0, 212, 255, 0.1), 0 0 20px rgba(138, 43, 226, 0.05);
    --lb-shadow-md: 0 0 20px rgba(0, 212, 255, 0.15), 0 0 40px rgba(255, 110, 199, 0.08);
    --lb-shadow-lg: 0 0 40px rgba(0, 212, 255, 0.2), 0 0 60px rgba(138, 43, 226, 0.15);

    /* ========================================================================
       BACKWARDS COMPATIBILITY MAPPINGS
       ======================================================================== */
    --primary-color: var(--holo-cyan);
    --primary-hover: var(--holo-pink);
    --bg-secondary: var(--lb-bg-elevated-2);
    --bg-card: var(--lb-bg-elevated);
    --bg-hover: var(--lb-bg-hover);
    --border-color: var(--lb-border-default);
    --text-primary: var(--lb-text-primary);
    --text-secondary: var(--lb-text-secondary);
    --text-muted: var(--lb-text-muted);

    /* UX Component Mappings */
    --ux-bg: var(--lb-bg-base);
    --ux-text: var(--lb-text-primary);
}

/* ============================================================================
   HOLOGRAPHIC-SPECIFIC STYLING OVERRIDES
   ============================================================================ */

/* Holographic shimmer animation */
@keyframes holo-shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes holo-border-shift {
    0% { border-color: var(--holo-cyan); }
    33% { border-color: var(--holo-pink); }
    66% { border-color: var(--holo-purple); }
    100% { border-color: var(--holo-cyan); }
}

/* Cards get holographic border effect */
:root[data-theme="neon"] .ux-card,
:root[data-theme="neon"] .collapsible-section,
:root[data-theme="neon"] .infobox {
    background: var(--lb-bg-elevated);
    border: 1px solid transparent;
    border-radius: 8px;
    position: relative;
    box-shadow:
        0 0 20px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 212, 255, 0.08),
        0 0 40px rgba(138, 43, 226, 0.05);
}

:root[data-theme="neon"] .ux-card::before,
:root[data-theme="neon"] .collapsible-section::before,
:root[data-theme="neon"] .infobox::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 9px;
    padding: 1px;
    background: linear-gradient(135deg, var(--holo-cyan), var(--holo-pink), var(--holo-purple), var(--holo-teal));
    background-size: 300% 300%;
    animation: holo-shimmer 8s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    z-index: -1;
}

:root[data-theme="neon"] .ux-card:hover::before,
:root[data-theme="neon"] .collapsible-section:hover::before,
:root[data-theme="neon"] .infobox:hover::before {
    opacity: 0.8;
    animation-duration: 3s;
}

/* Buttons get holographic gradient */
:root[data-theme="neon"] .btn,
:root[data-theme="neon"] button {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(138, 43, 226, 0.15));
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: var(--holo-cyan);
    border-radius: 6px;
    transition: all 0.3s ease;
}

:root[data-theme="neon"] .btn:hover,
:root[data-theme="neon"] button:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(255, 110, 199, 0.2));
    border-color: var(--holo-pink);
    color: var(--holo-pink);
    box-shadow: 0 0 20px rgba(255, 110, 199, 0.2), 0 0 40px rgba(0, 212, 255, 0.1);
}

/* Inputs get holographic focus */
:root[data-theme="neon"] input,
:root[data-theme="neon"] textarea,
:root[data-theme="neon"] select,
:root[data-theme="neon"] .form-control {
    background: rgba(18, 18, 26, 0.9);
    border: 1px solid rgba(138, 43, 226, 0.25);
    color: var(--lb-text-primary);
    border-radius: 6px;
    transition: all 0.3s ease;
}

:root[data-theme="neon"] input::placeholder,
:root[data-theme="neon"] textarea::placeholder {
    color: rgba(192, 192, 208, 0.4);
}

:root[data-theme="neon"] input:focus,
:root[data-theme="neon"] textarea:focus,
:root[data-theme="neon"] select:focus,
:root[data-theme="neon"] .form-control:focus {
    border-color: var(--holo-cyan);
    box-shadow:
        0 0 10px rgba(0, 212, 255, 0.3),
        0 0 20px rgba(255, 110, 199, 0.15),
        0 0 30px rgba(138, 43, 226, 0.1);
    outline: none;
}

/* Links shift color on hover */
:root[data-theme="neon"] a {
    color: var(--holo-cyan);
    transition: all 0.3s ease;
}

:root[data-theme="neon"] a:hover {
    color: var(--holo-pink);
    text-shadow: 0 0 10px rgba(255, 110, 199, 0.5);
}

/* Logo styling - animated holographic gradient text */
:root[data-theme="neon"] .ww-logo {
    background: linear-gradient(90deg, var(--holo-cyan), var(--holo-pink), var(--holo-purple), var(--holo-teal), var(--holo-cyan));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: holo-shimmer 6s linear infinite;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Badge styling - holographic */
:root[data-theme="neon"] .pillar-badge,
:root[data-theme="neon"] .badge,
:root[data-theme="neon"] .collapsible-count {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(138, 43, 226, 0.2));
    color: var(--holo-cyan);
    border-radius: 9999px;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

/* Header bar styling - subtle holographic border */
:root[data-theme="neon"] .ww-topbar {
    background: linear-gradient(180deg, rgba(18, 18, 26, 0.98) 0%, rgba(16, 16, 22, 0.98) 100%);
    border-bottom: 1px solid transparent;
    position: sticky;
    top: 0;
    z-index: 100;
}

:root[data-theme="neon"] .ww-topbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--holo-cyan) 20%,
        var(--holo-pink) 40%,
        var(--holo-purple) 60%,
        var(--holo-teal) 80%,
        transparent
    );
    opacity: 0.6;
}

/* Navigation links */
:root[data-theme="neon"] .ww-nav-link {
    color: var(--lb-text-muted);
}

:root[data-theme="neon"] .ww-nav-link:hover {
    color: var(--holo-cyan);
    background: rgba(0, 212, 255, 0.1);
}

/* Avatar styling */
:root[data-theme="neon"] .author-avatar {
    background: linear-gradient(135deg, var(--holo-cyan), var(--holo-purple));
    color: white;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

/* Tables */
:root[data-theme="neon"] .table {
    border-color: rgba(138, 43, 226, 0.2);
}

:root[data-theme="neon"] .table th,
:root[data-theme="neon"] .table td {
    border-color: rgba(0, 212, 255, 0.15);
}

/* Create button - strong holographic effect */
:root[data-theme="neon"] .ww-btn-create {
    background: linear-gradient(135deg,
        rgba(0, 212, 255, 0.25),
        rgba(255, 110, 199, 0.2),
        rgba(138, 43, 226, 0.25)
    );
    background-size: 200% 200%;
    animation: holo-shimmer 4s ease infinite;
    color: var(--holo-cyan);
    border: 1px solid var(--holo-cyan);
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

:root[data-theme="neon"] .ww-btn-create:hover {
    background: linear-gradient(135deg,
        rgba(0, 212, 255, 0.35),
        rgba(255, 110, 199, 0.3),
        rgba(138, 43, 226, 0.35)
    );
    background-size: 200% 200%;
    border-color: var(--holo-pink);
    color: var(--holo-pink);
    box-shadow:
        0 0 20px rgba(255, 110, 199, 0.3),
        0 0 40px rgba(0, 212, 255, 0.2);
    transform: translateY(-2px);
}

/* Theme switcher dropdown styling */
:root[data-theme="neon"] .ww-theme-toggle {
    border: 1px solid rgba(0, 212, 255, 0.3);
    background: rgba(0, 212, 255, 0.1);
}

:root[data-theme="neon"] .ww-theme-toggle:hover {
    border-color: var(--holo-pink);
    background: rgba(255, 110, 199, 0.15);
}

:root[data-theme="neon"] .ww-theme-menu {
    background: rgba(18, 18, 26, 0.98);
    border: 1px solid rgba(138, 43, 226, 0.3);
    box-shadow:
        0 0 30px rgba(0, 212, 255, 0.15),
        0 0 50px rgba(138, 43, 226, 0.1);
    backdrop-filter: blur(10px);
}

:root[data-theme="neon"] .ww-theme-item {
    color: var(--lb-text-secondary);
}

:root[data-theme="neon"] .ww-theme-item:hover,
:root[data-theme="neon"] .ww-theme-item.active {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(138, 43, 226, 0.1));
    color: var(--holo-cyan);
}

/* Start Creating card - holographic gradient background */
:root[data-theme="neon"] .stat-card.create-card {
    background: linear-gradient(135deg,
        var(--lb-bg-elevated) 0%,
        rgba(0, 212, 255, 0.08) 30%,
        rgba(255, 110, 199, 0.06) 60%,
        rgba(138, 43, 226, 0.08) 100%
    );
    border: 1px solid rgba(0, 212, 255, 0.25);
}

:root[data-theme="neon"] .stat-card.create-card:hover {
    background: linear-gradient(135deg,
        var(--lb-bg-elevated) 0%,
        rgba(0, 212, 255, 0.15) 30%,
        rgba(255, 110, 199, 0.12) 60%,
        rgba(138, 43, 226, 0.15) 100%
    );
    border-color: var(--holo-pink);
    box-shadow:
        0 0 30px rgba(0, 212, 255, 0.15),
        0 0 50px rgba(255, 110, 199, 0.1);
}

/* Stat cards - holographic border on hover */
:root[data-theme="neon"] .stat-card {
    border: 1px solid rgba(138, 43, 226, 0.2);
    transition: all 0.3s ease;
}

:root[data-theme="neon"] .stat-card:hover {
    border-color: var(--holo-cyan);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.15);
}

/* Search input styling */
:root[data-theme="neon"] .ww-search-input {
    background: rgba(18, 18, 26, 0.9);
    border: 1px solid rgba(0, 212, 255, 0.2);
    color: var(--lb-text-primary);
}

:root[data-theme="neon"] .ww-search-input:focus {
    border-color: var(--holo-cyan);
    box-shadow:
        0 0 15px rgba(0, 212, 255, 0.25),
        0 0 30px rgba(138, 43, 226, 0.1);
}

/* Footer styling */
:root[data-theme="neon"] .ww-footer {
    background: linear-gradient(180deg, rgba(16, 16, 22, 0.98) 0%, rgba(10, 10, 15, 0.99) 100%);
    border-top: 1px solid transparent;
    position: relative;
}

:root[data-theme="neon"] .ww-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--holo-purple) 20%,
        var(--holo-pink) 50%,
        var(--holo-cyan) 80%,
        transparent
    );
    opacity: 0.4;
}

:root[data-theme="neon"] .ww-footer a {
    color: var(--lb-text-muted);
}

:root[data-theme="neon"] .ww-footer a:hover {
    color: var(--holo-cyan);
}

/* Hero section - holographic welcome text */
:root[data-theme="neon"] .hero-title {
    background: linear-gradient(90deg, var(--holo-cyan), var(--holo-pink), var(--holo-purple), var(--holo-cyan));
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: holo-shimmer 8s linear infinite;
}

/* Featured universe card holographic border */
:root[data-theme="neon"] .featured-universe-card {
    border: 1px solid transparent;
    position: relative;
}

:root[data-theme="neon"] .featured-universe-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--holo-cyan), var(--holo-pink), var(--holo-purple));
    background-size: 200% 200%;
    animation: holo-shimmer 6s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6;
    z-index: -1;
}

/* ============================================================================
   MODALS - Neon/Synthwave Styling
   ============================================================================ */

/* Modal Overlays - specific modal classes only */
:root[data-theme="neon"] .rp-overlay,
:root[data-theme="neon"] .aem-overlay,
:root[data-theme="neon"] .uxdesc-modal-overlay,
:root[data-theme="neon"] .stat-modal-overlay {
    background: rgba(10, 10, 15, 0.92);
    backdrop-filter: blur(8px);
}

/* Modal Containers */
:root[data-theme="neon"] .rp-modal,
:root[data-theme="neon"] .aem-modal-wide,
:root[data-theme="neon"] .uxdesc-modal,
:root[data-theme="neon"] .stat-modal {
    background: linear-gradient(180deg, rgba(18, 18, 26, 0.98) 0%, rgba(12, 12, 18, 0.98) 100%);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 12px;
    box-shadow:
        0 0 60px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(0, 212, 255, 0.1),
        0 0 20px rgba(255, 110, 199, 0.1),
        inset 0 0 1px rgba(0, 212, 255, 0.3);
    color: #f0f0ff;
}

/* Modal Containers - holographic border animation */
:root[data-theme="neon"] .rp-modal::before,
:root[data-theme="neon"] .aem-modal-wide::before,
:root[data-theme="neon"] .stat-modal::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--holo-cyan), var(--holo-pink), var(--holo-purple), var(--holo-teal));
    background-size: 300% 300%;
    animation: holo-shimmer 8s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

/* Modal Headers */
:root[data-theme="neon"] .rp-header,
:root[data-theme="neon"] .aem-header,
:root[data-theme="neon"] .stat-modal-header {
    border-color: rgba(138, 43, 226, 0.25);
    background: linear-gradient(180deg, rgba(22, 22, 31, 0.95) 0%, rgba(18, 18, 26, 0.95) 100%);
}

:root[data-theme="neon"] .rp-title,
:root[data-theme="neon"] .aem-title,
:root[data-theme="neon"] .stat-modal-title {
    color: var(--holo-cyan);
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

/* Modal Close Buttons */
:root[data-theme="neon"] .rp-close,
:root[data-theme="neon"] .aem-close,
:root[data-theme="neon"] .stat-modal-close {
    color: var(--holo-pink);
}

:root[data-theme="neon"] .rp-close:hover,
:root[data-theme="neon"] .aem-close:hover,
:root[data-theme="neon"] .stat-modal-close:hover {
    color: var(--holo-cyan);
    background: rgba(0, 212, 255, 0.1);
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
}

/* Modal Body/Content */
:root[data-theme="neon"] .rp-body,
:root[data-theme="neon"] .aem-body,
:root[data-theme="neon"] .stat-modal-body {
    background: transparent;
}

/* Modal Footer */
:root[data-theme="neon"] .rp-footer,
:root[data-theme="neon"] .aem-footer,
:root[data-theme="neon"] .stat-modal-footer {
    border-color: rgba(138, 43, 226, 0.25);
    background: linear-gradient(180deg, rgba(18, 18, 26, 0.95) 0%, rgba(14, 14, 20, 0.95) 100%);
}

/* Side Panels */
:root[data-theme="neon"] .rp-side-panel {
    background: linear-gradient(180deg, rgba(18, 18, 26, 0.98) 0%, rgba(14, 14, 20, 0.98) 100%);
    border-left: 1px solid rgba(138, 43, 226, 0.3);
    box-shadow: -15px 0 40px rgba(138, 43, 226, 0.1);
}

/* Panel Headers */
:root[data-theme="neon"] .panel-header {
    background: linear-gradient(180deg, rgba(22, 22, 31, 0.95) 0%, rgba(18, 18, 26, 0.95) 100%);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

:root[data-theme="neon"] .panel-header h6 {
    color: var(--holo-cyan);
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
}

/* Panel Search */
:root[data-theme="neon"] .panel-search input {
    background: rgba(18, 18, 26, 0.8);
    border: 1px solid rgba(138, 43, 226, 0.25);
    color: #f0f0ff;
}

:root[data-theme="neon"] .panel-search input:focus {
    border-color: var(--holo-cyan);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

/* Entity/Relationship Items in Modals */
:root[data-theme="neon"] .entity-card,
:root[data-theme="neon"] .relationship-item {
    background: rgba(18, 18, 26, 0.6);
    border: 1px solid rgba(138, 43, 226, 0.2);
    color: rgba(240, 240, 255, 0.7);
    transition: all 0.3s ease;
}

:root[data-theme="neon"] .entity-card:hover,
:root[data-theme="neon"] .relationship-item:hover {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}

:root[data-theme="neon"] .entity-card.selected,
:root[data-theme="neon"] .relationship-item.selected {
    background: rgba(255, 110, 199, 0.1);
    border-color: var(--holo-pink);
    box-shadow: 0 0 25px rgba(255, 110, 199, 0.2);
}

/* Diagram Elements */
:root[data-theme="neon"] .rp-entity-box {
    background: linear-gradient(180deg, rgba(18, 18, 26, 0.9) 0%, rgba(14, 14, 20, 0.9) 100%);
    border: 2px solid rgba(138, 43, 226, 0.3);
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.15);
}

:root[data-theme="neon"] .rp-entity-box.clickable:hover {
    border-color: var(--holo-cyan);
    box-shadow: 0 0 35px rgba(0, 212, 255, 0.25);
}

:root[data-theme="neon"] .rp-entity-box.active {
    border-color: var(--holo-pink);
    box-shadow: 0 0 40px rgba(255, 110, 199, 0.3);
}

:root[data-theme="neon"] .rp-arrow-box {
    background: rgba(18, 18, 26, 0.6);
    border: 2px solid rgba(138, 43, 226, 0.2);
    color: var(--holo-cyan);
}

:root[data-theme="neon"] .rp-arrow-box:hover {
    border-color: var(--holo-cyan);
    background: rgba(0, 212, 255, 0.08);
}

:root[data-theme="neon"] .arrow-icon {
    color: var(--holo-cyan);
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
}

/* Sentence Preview */
:root[data-theme="neon"] .rp-sentence {
    background: rgba(18, 18, 26, 0.6);
    border: 1px solid rgba(138, 43, 226, 0.2);
    color: rgba(240, 240, 255, 0.8);
}

:root[data-theme="neon"] .rp-sentence strong {
    color: var(--holo-pink);
    text-shadow: 0 0 15px rgba(255, 110, 199, 0.5);
}

/* Primary Button in Modals */
:root[data-theme="neon"] .rp-modal .btn-primary,
:root[data-theme="neon"] .aem-modal-wide .btn-primary,
:root[data-theme="neon"] .aem-add-btn {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(255, 110, 199, 0.2) 100%);
    border: 1px solid var(--holo-cyan);
    color: var(--holo-cyan);
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

:root[data-theme="neon"] .rp-modal .btn-primary:hover,
:root[data-theme="neon"] .aem-modal-wide .btn-primary:hover,
:root[data-theme="neon"] .aem-add-btn:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.3) 0%, rgba(255, 110, 199, 0.3) 100%);
    border-color: var(--holo-pink);
    color: var(--holo-pink);
    box-shadow: 0 0 25px rgba(255, 110, 199, 0.3);
}