/* ============================================
   NEXUS ZG - NEON THEME (Vibrant Cyberpunk)
   body.neon class applies this theme
   ============================================ */

body.neon {
    --bg-darkest: #0a0a12;
    --bg-dark: #0d0d18;
    --bg-primary: #111120;
    --bg-secondary: #151528;
    --bg-tertiary: #1a1a30;
    --bg-card: #1c1c35;
    --bg-hover: rgba(0, 255, 255, 0.08);

    --text-primary: #e0e0ff;
    --text-secondary: #a0a0cc;
    --text-muted: #6060aa;
    --text-bright: #ffffff;

    --border-color: rgba(0, 255, 255, 0.15);
    --border-active: #00ffff;

    --accent-primary: #00ffff;
    --accent-secondary: #ff00ff;
    --accent-tertiary: #00ff88;
    --accent-glow: rgba(0, 255, 255, 0.5);
    --neon-glow: rgba(0, 255, 255, 0.4);

    background: var(--bg-darkest) !important;
    color: var(--text-primary) !important;
}

/* Neon Glow Effect on Body */
body.neon::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(0, 255, 255, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(255, 0, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Main Layout */
body.neon #main,
body.neon .main-layout,
body.neon html {
    background: var(--bg-darkest) !important;
}

/* Server Rail with Neon Border */
body.neon .server-rail,
body.neon .guild-list,
body.neon #left,
body.neon #leftRail {
    background: var(--bg-dark) !important;
    border-right: 1px solid var(--border-color) !important;
}

/* Channel Sidebar */
body.neon .channel-sidebar,
body.neon .sidebar,
body.neon #categoryList {
    background: var(--bg-primary) !important;
    border-right: 1px solid var(--border-color) !important;
}

/* Center Panel */
body.neon #center,
body.neon .chat-panel,
body.neon .message-area,
body.neon #centerEmpty {
    background: var(--bg-secondary) !important;
}

/* Member List */
body.neon #right,
body.neon .member-list,
body.neon .members-panel {
    background: var(--bg-primary) !important;
    border-left: 1px solid var(--border-color) !important;
}

/* Welcome Card with Neon Glow */
body.neon .welcome-card,
body.neon [class*="welcome"] {
    background: linear-gradient(135deg, var(--bg-card), var(--bg-tertiary)) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 0 20px var(--neon-glow), inset 0 0 30px rgba(0, 255, 255, 0.05) !important;
}

/* Header with subtle glow */
body.neon .channel-header,
body.neon #channelHeader,
body.neon .header-bar {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 10px rgba(0, 255, 255, 0.1) !important;
}

/* Modals with Neon Border */
body.neon .modal-content,
body.neon .card,
body.neon .admin-panel,
body.neon .admin-panel-overlay .admin-panel {
    background: linear-gradient(135deg, var(--bg-card), var(--bg-tertiary)) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 0 30px var(--neon-glow) !important;
}

body.neon .admin-panel-sidebar {
    background: var(--bg-primary) !important;
    border-right: 1px solid var(--border-color) !important;
}

body.neon .admin-panel-tab.active {
    background: rgba(0, 255, 255, 0.15) !important;
    color: var(--accent-primary) !important;
    border-left: 2px solid var(--accent-primary) !important;
}

body.neon .premium-group {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Inputs with Neon Focus */
body.neon .admin-input,
body.neon input,
body.neon textarea,
body.neon select {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.neon input:focus,
body.neon textarea:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 10px var(--neon-glow) !important;
}

/* Composer with Glow */
body.neon #composer .composer-inner,
body.neon .message-composer {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

body.neon #composer:focus-within .composer-inner {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 15px var(--neon-glow), inset 0 0 20px rgba(0, 255, 255, 0.05) !important;
}

/* Server Icons with Neon Hover */
body.neon .server-icon,
body.neon .guild-icon,
body.neon .badge-round {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-card)) !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

body.neon .server-icon:hover,
body.neon .guild-icon:hover {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 15px var(--neon-glow) !important;
    transform: scale(1.05) !important;
}

body.neon .server-icon.active,
body.neon .guild-icon.active {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 20px var(--neon-glow) !important;
}

/* Profile Footer */
body.neon .profile-footer,
body.neon #profileFooter {
    background: linear-gradient(180deg, transparent, var(--bg-dark)) !important;
    border-top: 1px solid var(--border-color) !important;
}

body.neon #meBox {
    background: var(--bg-card) !important;
}

body.neon #meBox:hover {
    background: rgba(0, 255, 255, 0.1) !important;
}

/* Scrollbars */
body.neon ::-webkit-scrollbar-track {
    background: var(--bg-dark) !important;
}

body.neon ::-webkit-scrollbar-thumb {
    background: var(--bg-hover) !important;
    border-radius: 4px !important;
}

body.neon ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary) !important;
}

/* Buttons with Neon Style */
body.neon .btn.primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary)) !important;
    color: #000 !important;
    box-shadow: 0 2px 15px var(--neon-glow) !important;
    font-weight: 600 !important;
}

body.neon .btn.primary:hover {
    box-shadow: 0 4px 25px var(--neon-glow) !important;
    transform: translateY(-2px) !important;
}

body.neon .btn.ghost {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

body.neon .btn.ghost:hover {
    background: rgba(0, 255, 255, 0.15) !important;
    box-shadow: 0 0 10px var(--neon-glow) !important;
}

/* Channel Items */
body.neon .channel-item.active,
body.neon .channel-list-item.active {
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.2), transparent) !important;
    border-left: 3px solid var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

body.neon .channel-item:hover,
body.neon .channel-list-item:hover {
    background: var(--bg-hover) !important;
}

/* Status Dots with Glow */
body.neon .status-dot.online,
body.neon .status-indicator.online {
    background: #00ff88 !important;
    box-shadow: 0 0 8px #00ff88 !important;
}

/* Selection */
body.neon ::selection {
    background: var(--accent-primary) !important;
    color: #000 !important;
}

/* Links */
body.neon a {
    color: var(--accent-primary) !important;
}

body.neon a:hover {
    text-shadow: 0 0 8px var(--neon-glow) !important;
}