/* ================================================================
   PROFILE CUSTOMIZATION SYSTEM - MySpace-style Themes & Customization
   ================================================================ */

/* Base CSS Variables (Default Theme) */
:root {
    --profile-bg: #0f0f13;
    --profile-bg-secondary: #16161d;
    --profile-bg-opacity: 1;
    --profile-bg-blur: 0px;
    --profile-bg-image: none;
    --profile-text-color: #f0f0f5;
    --profile-text-secondary: #8a8a9a;
    --profile-accent: #7d19ff;
    --profile-accent-secondary: #F4CA81;
    --profile-font-family: system-ui, -apple-system, sans-serif;
    --profile-font-size: 16px;
    --profile-heading-font: system-ui, -apple-system, sans-serif;
    --profile-text-glow: none;
    --profile-card-shadow: 0 4px 24px rgba(0,0,0,0.4);
    --profile-card-padding: 20px;
    --profile-border-style: solid;
    --profile-border-color: rgba(255, 255, 255, 0.08);
    --profile-border-radius: 12px;
    --profile-border-width: 1px;
    --profile-card-bg: rgba(22, 22, 29, 0.95);
    --profile-link-color: #a855f7;
    --profile-link-hover: #c084fc;
}

/* ================================================================
   SCROLLBAR HIDING FOR ALL THEMES
   ================================================================ */

/* Hide scrollbar for all profile themes - WebKit (Chrome, Safari, Edge) */
[class*="profile-theme-"]::-webkit-scrollbar,
[class*="profile-theme-"] *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Hide scrollbar for all profile themes - Firefox */
[class*="profile-theme-"],
[class*="profile-theme-"] * {
    scrollbar-width: none;
}

/* Hide scrollbar for all profile themes - IE/Edge legacy */
[class*="profile-theme-"],
[class*="profile-theme-"] * {
    -ms-overflow-style: none;
}

/* ================================================================
   PRESET THEMES
   ================================================================ */

/* Theme: Default (Modern Dark with Purple Accent) */
.profile-theme-default {
    --profile-bg: #0f0f13;
    --profile-bg-secondary: #16161d;
    --profile-text-color: #f0f0f5;
    --profile-text-secondary: #8a8a9a;
    --profile-accent: #7d19ff;
    --profile-accent-secondary: #F4CA81;
    --profile-card-bg: rgba(22, 22, 29, 0.95);
    --profile-border-color: rgba(255, 255, 255, 0.08);
    --profile-link-color: #a855f7;
}

/* ================================================================
   DEFAULT THEME - Component Overrides for Modern Dark Look
   ================================================================ */

/* Main Profile Card - Subtle Elegance */
.profile-theme-default .profile-theme-card,
.profile-customized:not([class*="profile-theme-"]) .profile-theme-card {
    background: linear-gradient(165deg, rgba(22, 22, 29, 0.98), rgba(18, 18, 24, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
}

/* Card Header - Subtle gradient accent */
.profile-theme-default .profile-theme-card .card-header,
.profile-customized:not([class*="profile-theme-"]) .profile-theme-card .card-header {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Profile Header Card - Elegant Gradient */
.profile-theme-default .profile-header-card,
.profile-customized:not([class*="profile-theme-"]) .profile-header-card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
}

/* Stat Cards - Consistent styling */
.profile-theme-default .stat-card,
.profile-customized:not([class*="profile-theme-"]) .stat-card {
    background: rgba(22, 22, 29, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Navigation Pills - Modern feel */
.profile-theme-default .nav-pills .nav-link.active,
.profile-customized:not([class*="profile-theme-"]) .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #7d19ff 0%, #9333ea 100%) !important;
    box-shadow: 0 4px 16px rgba(125, 25, 255, 0.35) !important;
}

/* Dark cards styling */
.profile-theme-default .card.bg-dark,
.profile-customized:not([class*="profile-theme-"]) .card.bg-dark {
    background: rgba(22, 22, 29, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Theme: Cyberpunk (Neon Pink/Cyan on Dark) */
.profile-theme-cyberpunk {
    --profile-bg: linear-gradient(135deg, #0a0a0f 0%, #1a0a2e 50%, #0f1a2a 100%);
    --profile-bg-secondary: #0d0d15;
    --profile-text-color: #f0f0ff;
    --profile-text-secondary: #00ffff;
    --profile-accent: #ff00ff;
    --profile-accent-secondary: #00ffff;
    --profile-card-bg: rgba(10, 10, 20, 0.95);
    --profile-border-color: #ff00ff;
    --profile-link-color: #00ffff;
    --profile-link-hover: #ff00ff;
    --profile-text-glow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
    --profile-card-shadow: 0 0 20px rgba(255, 0, 255, 0.3), 0 0 40px rgba(0, 255, 255, 0.2);
}

/* ================================================================
   CYBERPUNK THEME - Component Overrides
   ================================================================ */

/* Main Profile Card - Neon Border Glow */
.profile-theme-cyberpunk .profile-theme-card {
    background: linear-gradient(145deg, rgba(10, 10, 20, 0.95), rgba(20, 10, 40, 0.9)) !important;
    border: 2px solid transparent !important;
    border-image: linear-gradient(135deg, #ff00ff, #00ffff, #ff00ff) 1 !important;
    box-shadow: 
        0 0 20px rgba(255, 0, 255, 0.4),
        0 0 40px rgba(0, 255, 255, 0.2),
        inset 0 0 60px rgba(255, 0, 255, 0.05) !important;
    position: relative;
    overflow: hidden;
}

/* Cyberpunk scanline effect */
.profile-theme-cyberpunk .profile-theme-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 255, 0.03) 2px,
        rgba(0, 255, 255, 0.03) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* Profile Card Header - Neon accent line */
.profile-theme-cyberpunk .profile-theme-card .card-header {
    background: linear-gradient(90deg, rgba(255, 0, 255, 0.15), transparent 50%, rgba(0, 255, 255, 0.15)) !important;
    border-bottom: none !important;
    position: relative;
    padding-bottom: 12px;
}

.profile-theme-cyberpunk .profile-theme-card .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff);
    box-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
}

.profile-theme-cyberpunk .profile-theme-card .card-header h6 {
    color: #00ffff !important;
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem !important;
}

.profile-theme-cyberpunk .profile-theme-card .card-header h6 i {
    color: #ff00ff !important;
    filter: drop-shadow(0 0 5px #ff00ff);
}

/* Section Labels - Glowing Cyan */
.profile-theme-cyberpunk .profile-field-group .form-label,
.profile-theme-cyberpunk .profile-field-group label {
    color: #00ffff !important;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.75rem !important;
}

/* About Section - Neon Container */
.profile-theme-cyberpunk .profile-field-group > div[style*="background: rgba"],
.profile-theme-cyberpunk .profile-field-group > div.p-3.rounded,
.profile-theme-cyberpunk #viewModeAboutMe {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(0, 255, 255, 0.15) !important;
    box-shadow: 
        0 0 15px rgba(0, 255, 255, 0.15),
        inset 0 0 30px rgba(0, 255, 255, 0.03) !important;
    color: #f0f0ff !important;
    border-radius: 8px !important;
}

/* Interests/Tags - Neon Pills */
.profile-theme-cyberpunk .badge.rounded-pill,
.profile-theme-cyberpunk .profile-tag-btn.active {
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.3), rgba(0, 255, 255, 0.3)) !important;
    border: 1px solid #ff00ff !important;
    color: #00ffff !important;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.4), inset 0 0 10px rgba(0, 255, 255, 0.1) !important;
    text-shadow: 0 0 5px #ff00ff !important;
    font-weight: 500 !important;
}

.profile-theme-cyberpunk .badge.rounded-pill:hover,
.profile-theme-cyberpunk .profile-tag-btn:hover {
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.3) !important;
    transform: translateY(-1px);
}

/* Language/Info Rows - Clean with accent */
.profile-theme-cyberpunk .profile-field-group .d-flex.align-items-center {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(0, 255, 255, 0.12);
}

.profile-theme-cyberpunk .profile-field-group .d-flex.align-items-center i {
    color: #00ffff !important;
    filter: drop-shadow(0 0 5px #00ffff);
}

/* Server Role Items - Neon Hover */
.profile-theme-cyberpunk .server-role-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 0, 255, 0.1) !important;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.profile-theme-cyberpunk .server-role-item:hover {
    border-color: rgba(255, 0, 255, 0.3) !important;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.15);
    background: rgba(255, 0, 255, 0.08);
}

.profile-theme-cyberpunk .server-icon-img,
.profile-theme-cyberpunk .server-icon-fallback {
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    box-shadow: none;
}

/* Owner Badge - Gold Neon */
.profile-theme-cyberpunk .badge.bg-warning {
    background: linear-gradient(135deg, #ffd700, #ffaa00) !important;
    color: #000 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    text-shadow: none;
    font-weight: 700;
}

/* Mode Toggle - Cyberpunk Style */
.profile-theme-cyberpunk .profile-mode-toggle {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
}

.profile-theme-cyberpunk .profile-mode-toggle .btn {
    color: #00ffff !important;
}

.profile-theme-cyberpunk .profile-mode-toggle .btn:hover:not(.active) {
    background: rgba(255, 0, 255, 0.2) !important;
    text-shadow: 0 0 10px #ff00ff;
}

.profile-theme-cyberpunk .profile-mode-toggle .btn.active {
    background: linear-gradient(135deg, #ff00ff, #cc00cc) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5) !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* View Mode Alert - Cyberpunk Style */
.profile-theme-cyberpunk .view-mode-alert {
    background: rgba(0, 255, 255, 0.1) !important;
    border: 1px solid #00ffff !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.profile-theme-cyberpunk .view-mode-alert i,
.profile-theme-cyberpunk .view-mode-alert strong {
    color: #00ffff !important;
    text-shadow: 0 0 5px #00ffff;
}

/* Profile Header Card - Already themed but enhance glow */
.profile-theme-cyberpunk .profile-header-card {
    box-shadow: 
        0 0 30px rgba(255, 0, 255, 0.5),
        0 0 60px rgba(0, 255, 255, 0.3),
        inset 0 0 40px rgba(0, 0, 0, 0.3) !important;
}

/* Remove excessive borders */
.profile-theme-cyberpunk .card.bg-dark,
.profile-theme-cyberpunk .stat-card {
    border: none !important;
    background: linear-gradient(145deg, rgba(10, 10, 20, 0.9), rgba(20, 10, 35, 0.85)) !important;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.2);
}

/* Hidden/Visible Toggle Button */
.profile-theme-cyberpunk .server-visibility-toggle {
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid #00ffff !important;
    color: #00ffff !important;
}

.profile-theme-cyberpunk .server-visibility-toggle.hidden-server {
    background: rgba(255, 0, 255, 0.1);
    border-color: #ff00ff !important;
    color: #ff00ff !important;
}

/* Form Controls - Neon Focus */
.profile-theme-cyberpunk .form-control,
.profile-theme-cyberpunk .form-select {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    color: #f0f0ff !important;
}

.profile-theme-cyberpunk .form-control:focus,
.profile-theme-cyberpunk .form-select:focus {
    border-color: #ff00ff !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 255, 0.2), 0 0 15px rgba(255, 0, 255, 0.3) !important;
}

/* Primary Buttons - Neon Magenta */
.profile-theme-cyberpunk .btn-primary {
    background: linear-gradient(135deg, #ff00ff, #cc00cc) !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.profile-theme-cyberpunk .btn-primary:hover {
    background: linear-gradient(135deg, #ff33ff, #ff00ff) !important;
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.6);
    transform: translateY(-1px);
}

.profile-theme-cyberpunk .join-btn:not(.disabled) {
    background: var(--profile-accent, #ff00ff) !important;
    border-color: var(--profile-accent, #ff00ff) !important;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
}

.profile-theme-cyberpunk .join-btn:not(.disabled) i.fab.fa-discord,
.profile-theme-cyberpunk .join-btn:not(.disabled) i.fa-discord {
    color: inherit !important;
}

.profile-theme-cyberpunk .join-btn:not(.disabled):hover {
    background: var(--profile-accent-secondary, #00ffff) !important;
    border-color: var(--profile-accent-secondary, #00ffff) !important;
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.6);
}

.profile-theme-cyberpunk .btn-invite-bot {
    background: var(--profile-accent, #ff00ff) !important;
    border-color: var(--profile-accent, #ff00ff) !important;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
}

.profile-theme-cyberpunk .btn-invite-bot i {
    color: inherit !important;
}

.profile-theme-cyberpunk .btn-invite-bot:hover {
    background: var(--profile-accent-secondary, #00ffff) !important;
    border-color: var(--profile-accent-secondary, #00ffff) !important;
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.6);
    color: var(--profile-text-color, #fff) !important;
}

/* Outline Buttons - Cyan */
.profile-theme-cyberpunk .btn-outline-primary {
    color: #00ffff !important;
    border-color: #00ffff !important;
    background: transparent !important;
}

.profile-theme-cyberpunk .btn-outline-primary:hover {
    background: rgba(0, 255, 255, 0.15) !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

/* Accent Color Buttons in Edit Mode */
.profile-theme-cyberpunk .accent-color-btn {
    border: 2px solid rgba(0, 255, 255, 0.3) !important;
}

.profile-theme-cyberpunk .accent-color-btn.active {
    border-color: #00ffff !important;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

/* Main Content Area - background controlled by JavaScript */

/* Remove card-body borders and backgrounds */
.profile-theme-cyberpunk .card-body {
    border: none !important;
}

/* Profile Settings Section */
.profile-theme-cyberpunk .profile-settings-section > div[style*="background: rgba"] {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
}

/* Switch Toggle - Cyberpunk Colors */
.profile-theme-cyberpunk .form-check-input:checked {
    background-color: #ff00ff !important;
    border-color: #ff00ff !important;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

/* Glitch Animation for Header (subtle) */
@keyframes cyberpunk-glitch {
    0%, 100% { text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff; }
    25% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff, 0 0 10px #00ffff; }
    50% { text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; }
    75% { text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff, 0 0 10px #ff00ff; }
}

.profile-theme-cyberpunk .profile-theme-card .card-header h6 {
    animation: cyberpunk-glitch 4s ease-in-out infinite;
}

/* Theme: Retro Wave (Sunset Gradient Pastels) */
.profile-theme-retrowave {
    --profile-bg: linear-gradient(180deg, #1a0533 0%, #4a1942 30%, #ff6b6b 70%, #ffd93d 100%);
    --profile-bg-secondary: #2d1b4e;
    --profile-text-color: #fff5e6;
    --profile-text-secondary: #ffb347;
    --profile-accent: #ff6b9d;
    --profile-accent-secondary: #c44569;
    --profile-card-bg: rgba(45, 27, 78, 0.9);
    --profile-border-color: #ff6b9d;
    --profile-link-color: #ffd93d;
    --profile-link-hover: #ff6b9d;
    --profile-card-shadow: 0 4px 20px rgba(255, 107, 157, 0.4);
}

/* ================================================================
   RETROWAVE THEME - Component Overrides
   ================================================================ */

/* Main Profile Card - Sunset Gradient Border */
.profile-theme-retrowave .profile-theme-card {
    background: linear-gradient(145deg, rgba(45, 27, 78, 0.95), rgba(26, 5, 51, 0.9)) !important;
    border: 2px solid transparent !important;
    border-image: linear-gradient(135deg, #ff6b9d, #ffd93d, #ff6b6b) 1 !important;
    box-shadow: 
        0 0 20px rgba(255, 107, 157, 0.4),
        0 0 40px rgba(255, 217, 61, 0.2),
        inset 0 0 60px rgba(255, 107, 157, 0.05) !important;
    position: relative;
    overflow: hidden;
}

/* Retrowave sun rays effect */
.profile-theme-retrowave .profile-theme-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 40px,
        rgba(255, 217, 61, 0.02) 40px,
        rgba(255, 217, 61, 0.02) 80px
    );
    pointer-events: none;
    z-index: 1;
}

/* Profile Card Header - Sunset accent line */
.profile-theme-retrowave .profile-theme-card .card-header {
    background: linear-gradient(90deg, rgba(255, 107, 157, 0.15), transparent 50%, rgba(255, 217, 61, 0.15)) !important;
    border-bottom: none !important;
    position: relative;
    padding-bottom: 12px;
}

.profile-theme-retrowave .profile-theme-card .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff6b9d, #ffd93d, #ff6b6b);
    box-shadow: 0 0 10px #ff6b9d, 0 0 20px #ffd93d;
}

.profile-theme-retrowave .profile-theme-card .card-header h6 {
    color: #ffd93d !important;
    text-shadow: 0 0 10px rgba(255, 217, 61, 0.8), 0 0 20px rgba(255, 107, 157, 0.5);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem !important;
}

.profile-theme-retrowave .profile-theme-card .card-header h6 i {
    color: #ff6b9d !important;
    filter: drop-shadow(0 0 5px #ff6b9d);
}

/* Section Labels - Warm Gold */
.profile-theme-retrowave .profile-field-group .form-label,
.profile-theme-retrowave .profile-field-group label {
    color: #ffd93d !important;
    text-shadow: 0 0 8px rgba(255, 217, 61, 0.5);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.75rem !important;
}

/* About Section - Sunset Container */
.profile-theme-retrowave .profile-field-group > div.p-3.rounded,
.profile-theme-retrowave #viewModeAboutMe {
    background: rgba(26, 5, 51, 0.6) !important;
    border: 1px solid rgba(255, 107, 157, 0.15) !important;
    box-shadow: 
        0 0 15px rgba(255, 107, 157, 0.15),
        inset 0 0 30px rgba(255, 217, 61, 0.03) !important;
    color: #fff5e6 !important;
    border-radius: 8px !important;
}

/* Interests/Tags - Sunset Pills */
.profile-theme-retrowave .badge.rounded-pill {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.3), rgba(255, 217, 61, 0.2)) !important;
    border: 1px solid #ff6b9d !important;
    color: #fff5e6 !important;
    box-shadow: 0 0 8px rgba(255, 107, 157, 0.3), inset 0 0 10px rgba(255, 217, 61, 0.1) !important;
    text-shadow: 0 0 5px rgba(255, 107, 157, 0.5) !important;
    font-weight: 500 !important;
}

.profile-theme-retrowave .badge.rounded-pill:hover {
    box-shadow: 0 0 15px rgba(255, 107, 157, 0.5), 0 0 25px rgba(255, 217, 61, 0.3) !important;
    transform: translateY(-1px);
}

/* Language/Info Rows */
.profile-theme-retrowave .profile-field-group .d-flex.align-items-center {
    padding: 8px 12px;
    background: rgba(26, 5, 51, 0.4);
    border-radius: 6px;
    border: 1px solid rgba(255, 107, 157, 0.12);
}

.profile-theme-retrowave .profile-field-group .d-flex.align-items-center i {
    color: #ffd93d !important;
    filter: drop-shadow(0 0 5px rgba(255, 217, 61, 0.5));
}

/* Server Role Items */
.profile-theme-retrowave .server-role-item {
    background: rgba(26, 5, 51, 0.4);
    border: 1px solid rgba(255, 107, 157, 0.1) !important;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.profile-theme-retrowave .server-role-item:hover {
    border-color: rgba(255, 107, 157, 0.3) !important;
    box-shadow: 0 0 8px rgba(255, 107, 157, 0.15);
    background: rgba(255, 107, 157, 0.08);
}

.profile-theme-retrowave .server-icon-img,
.profile-theme-retrowave .server-icon-fallback {
    border: 1px solid rgba(255, 217, 61, 0.3) !important;
    box-shadow: none;
}

/* Owner Badge - Warm Gold */
.profile-theme-retrowave .badge.bg-warning {
    background: linear-gradient(135deg, #ffd93d, #ff6b6b) !important;
    color: #1a0533 !important;
    box-shadow: 0 0 10px rgba(255, 217, 61, 0.5);
    text-shadow: none;
    font-weight: 700;
}

/* Server Visibility Toggle */
.profile-theme-retrowave .server-visibility-toggle {
    background: rgba(255, 217, 61, 0.1);
    border: 1px solid #ffd93d !important;
    color: #ffd93d !important;
}

.profile-theme-retrowave .server-visibility-toggle.hidden-server {
    background: rgba(255, 107, 157, 0.1);
    border-color: #ff6b9d !important;
    color: #ff6b9d !important;
}

/* Mode Toggle - Retrowave Style */
.profile-theme-retrowave .profile-mode-toggle {
    background: rgba(26, 5, 51, 0.6) !important;
    border: 1px solid rgba(255, 107, 157, 0.3) !important;
}

.profile-theme-retrowave .profile-mode-toggle .btn {
    color: #ffd93d !important;
}

.profile-theme-retrowave .profile-mode-toggle .btn:hover:not(.active) {
    background: rgba(255, 107, 157, 0.2) !important;
    text-shadow: 0 0 10px #ff6b9d;
}

.profile-theme-retrowave .profile-mode-toggle .btn.active {
    background: linear-gradient(135deg, #ff6b9d, #c44569) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.5) !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* View Mode Alert */
.profile-theme-retrowave .view-mode-alert {
    background: rgba(255, 217, 61, 0.1) !important;
    border: 1px solid #ffd93d !important;
    box-shadow: 0 0 15px rgba(255, 217, 61, 0.2);
}

.profile-theme-retrowave .view-mode-alert i,
.profile-theme-retrowave .view-mode-alert strong {
    color: #ffd93d !important;
    text-shadow: 0 0 5px rgba(255, 217, 61, 0.5);
}

/* Buttons */
.profile-theme-retrowave .btn-primary {
    background: linear-gradient(135deg, #ff6b9d, #c44569) !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(255, 107, 157, 0.4);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.profile-theme-retrowave .btn-primary:hover {
    background: linear-gradient(135deg, #ff8db3, #ff6b9d) !important;
    box-shadow: 0 0 25px rgba(255, 107, 157, 0.6);
    transform: translateY(-1px);
}

.profile-theme-retrowave .join-btn:not(.disabled) {
    background: var(--profile-accent, #ff6b9d) !important;
    border-color: var(--profile-accent, #ff6b9d) !important;
}

.profile-theme-retrowave .join-btn:not(.disabled) i.fab.fa-discord,
.profile-theme-retrowave .join-btn:not(.disabled) i.fa-discord {
    color: inherit !important;
}

.profile-theme-retrowave .join-btn:not(.disabled):hover {
    background: var(--profile-accent-secondary, #ffd93d) !important;
    border-color: var(--profile-accent-secondary, #ffd93d) !important;
    box-shadow: 0 0 25px rgba(255, 107, 157, 0.6);
}

.profile-theme-retrowave .btn-invite-bot {
    background: var(--profile-accent, #ff6b9d) !important;
    border-color: var(--profile-accent, #ff6b9d) !important;
}

.profile-theme-retrowave .btn-invite-bot i {
    color: inherit !important;
}

.profile-theme-retrowave .btn-invite-bot:hover {
    background: var(--profile-accent-secondary, #ffd93d) !important;
    border-color: var(--profile-accent-secondary, #ffd93d) !important;
    box-shadow: 0 0 25px rgba(255, 107, 157, 0.6);
    color: var(--profile-text-color, #fff) !important;
}

.profile-theme-retrowave .btn-outline-primary {
    color: #ffd93d !important;
    border-color: #ffd93d !important;
    background: transparent !important;
}

.profile-theme-retrowave .btn-outline-primary:hover {
    background: rgba(255, 217, 61, 0.15) !important;
    box-shadow: 0 0 15px rgba(255, 217, 61, 0.3);
}

/* Form Controls */
.profile-theme-retrowave .form-control,
.profile-theme-retrowave .form-select {
    background: rgba(26, 5, 51, 0.6) !important;
    border: 1px solid rgba(255, 107, 157, 0.3) !important;
    color: #fff5e6 !important;
}

.profile-theme-retrowave .form-control:focus,
.profile-theme-retrowave .form-select:focus {
    border-color: #ff6b9d !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.2), 0 0 15px rgba(255, 107, 157, 0.3) !important;
}

.profile-theme-retrowave .form-check-input:checked {
    background-color: #ff6b9d !important;
    border-color: #ff6b9d !important;
    box-shadow: 0 0 10px rgba(255, 107, 157, 0.5);
}

/* Tags (edit mode) */
.profile-theme-retrowave .profile-tag-btn {
    background: rgba(255, 107, 157, 0.2) !important;
    border-color: #ff6b9d !important;
    color: #fff5e6 !important;
}

.profile-theme-retrowave .profile-tag-btn.active {
    background: linear-gradient(135deg, #ff6b9d, #ffd93d) !important;
    border-color: #ffd93d !important;
    color: #1a0533 !important;
    box-shadow: 0 0 10px rgba(255, 107, 157, 0.4);
}

/* Sidebar overrides */
.profile-theme-retrowave .sidebar-box {
    background: linear-gradient(145deg, rgba(45, 27, 78, 0.95), rgba(26, 5, 51, 0.9)) !important;
    border-color: #ff6b9d !important;
}

.profile-theme-retrowave .sidebar-header {
    background: linear-gradient(145deg, rgba(255, 107, 157, 0.15), rgba(255, 217, 61, 0.1)) !important;
    border-bottom-color: #ffd93d !important;
}

.profile-theme-retrowave .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #ff6b9d, #ffd93d) !important;
    color: #1a0533 !important;
    box-shadow: 0 4px 15px rgba(255, 107, 157, 0.4) !important;
}

.profile-theme-retrowave .nav-pills .nav-link:hover:not(.active) {
    background: rgba(255, 107, 157, 0.15) !important;
}

/* Main content background - controlled by JavaScript */

/* Sunset pulse animation for header */
@keyframes retrowave-pulse {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 217, 61, 0.8), 0 0 20px rgba(255, 107, 157, 0.5); }
    50% { text-shadow: 0 0 15px rgba(255, 107, 157, 0.8), 0 0 30px rgba(255, 217, 61, 0.6); }
}

.profile-theme-retrowave .profile-theme-card .card-header h6 {
    animation: retrowave-pulse 3s ease-in-out infinite;
}

/* Theme: Midnight (Deep Blue/Purple Aurora) */
.profile-theme-midnight {
    --profile-bg: linear-gradient(135deg, #0c0c1e 0%, #1a1a3e 30%, #0d2137 60%, #1a0a2e 100%);
    --profile-bg-secondary: #0f0f2a;
    --profile-text-color: #e6e6ff;
    --profile-text-secondary: #7eb8da;
    --profile-accent: #5e60ce;
    --profile-accent-secondary: #48bfe3;
    --profile-card-bg: rgba(15, 15, 40, 0.92);
    --profile-border-color: #3d5a80;
    --profile-link-color: #48bfe3;
    --profile-link-hover: #5e60ce;
    --profile-card-shadow: 0 4px 24px rgba(94, 96, 206, 0.3);
}

/* ================================================================
   MIDNIGHT THEME - Component Overrides (Aurora Deep Blue)
   ================================================================ */

/* Main Profile Card - Aurora Border Glow */
.profile-theme-midnight .profile-theme-card {
    background: linear-gradient(145deg, rgba(15, 15, 42, 0.95), rgba(12, 12, 30, 0.9)) !important;
    border: 2px solid transparent !important;
    border-image: linear-gradient(135deg, #5e60ce, #48bfe3, #5e60ce) 1 !important;
    box-shadow: 
        0 0 25px rgba(94, 96, 206, 0.3),
        0 0 50px rgba(72, 191, 227, 0.15),
        inset 0 0 60px rgba(94, 96, 206, 0.05) !important;
    position: relative;
    overflow: hidden;
}

/* Midnight aurora shimmer effect */
.profile-theme-midnight .profile-theme-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top, rgba(72, 191, 227, 0.05), transparent 50%),
                radial-gradient(ellipse at bottom, rgba(94, 96, 206, 0.05), transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Profile Card Header - Aurora accent line */
.profile-theme-midnight .profile-theme-card .card-header {
    background: linear-gradient(90deg, rgba(94, 96, 206, 0.15), transparent 50%, rgba(72, 191, 227, 0.15)) !important;
    border-bottom: none !important;
    position: relative;
    padding-bottom: 12px;
}

.profile-theme-midnight .profile-theme-card .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #5e60ce, #48bfe3, #5e60ce);
    box-shadow: 0 0 10px #5e60ce, 0 0 20px #48bfe3;
}

.profile-theme-midnight .profile-theme-card .card-header h6 {
    color: #48bfe3 !important;
    text-shadow: 0 0 10px rgba(72, 191, 227, 0.8), 0 0 20px rgba(94, 96, 206, 0.5);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem !important;
    animation: midnight-glow 4s ease-in-out infinite;
}

.profile-theme-midnight .profile-theme-card .card-header h6 i {
    color: #5e60ce !important;
    filter: drop-shadow(0 0 5px #5e60ce);
}

/* Section Labels - Aurora Blue */
.profile-theme-midnight .profile-field-group .form-label,
.profile-theme-midnight .profile-field-group label {
    color: #48bfe3 !important;
    text-shadow: 0 0 8px rgba(72, 191, 227, 0.5);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.75rem !important;
}

/* About Section - Deep Blue Container */
.profile-theme-midnight .profile-field-group > div.p-3.rounded,
.profile-theme-midnight #viewModeAboutMe {
    background: rgba(12, 12, 30, 0.6) !important;
    border: 1px solid rgba(72, 191, 227, 0.15) !important;
    box-shadow: 
        0 0 15px rgba(72, 191, 227, 0.1),
        inset 0 0 30px rgba(94, 96, 206, 0.03) !important;
    color: #e6e6ff !important;
    border-radius: 8px !important;
}

/* Interests/Tags - Aurora Pills */
.profile-theme-midnight .badge.rounded-pill {
    background: linear-gradient(135deg, rgba(94, 96, 206, 0.3), rgba(72, 191, 227, 0.2)) !important;
    border: 1px solid #5e60ce !important;
    color: #e6e6ff !important;
    box-shadow: 0 0 8px rgba(94, 96, 206, 0.3), inset 0 0 10px rgba(72, 191, 227, 0.1) !important;
    text-shadow: 0 0 5px rgba(94, 96, 206, 0.5) !important;
    font-weight: 500 !important;
}

.profile-theme-midnight .badge.rounded-pill:hover {
    box-shadow: 0 0 15px rgba(94, 96, 206, 0.5), 0 0 25px rgba(72, 191, 227, 0.3) !important;
    transform: translateY(-1px);
}

/* Language/Info Rows */
.profile-theme-midnight .profile-field-group .d-flex.align-items-center {
    padding: 8px 12px;
    background: rgba(12, 12, 30, 0.4);
    border-radius: 6px;
    border: 1px solid rgba(72, 191, 227, 0.12);
}

.profile-theme-midnight .profile-field-group .d-flex.align-items-center i {
    color: #48bfe3 !important;
    filter: drop-shadow(0 0 5px rgba(72, 191, 227, 0.5));
}

/* Server Role Items */
.profile-theme-midnight .server-role-item {
    background: rgba(12, 12, 30, 0.4);
    border: 1px solid rgba(94, 96, 206, 0.1) !important;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.profile-theme-midnight .server-role-item:hover {
    border-color: rgba(94, 96, 206, 0.3) !important;
    box-shadow: 0 0 8px rgba(94, 96, 206, 0.15);
    background: rgba(94, 96, 206, 0.08);
}

.profile-theme-midnight .server-icon-img,
.profile-theme-midnight .server-icon-fallback {
    border: 1px solid rgba(72, 191, 227, 0.3) !important;
    box-shadow: none;
}

/* Owner Badge - Ice Blue */
.profile-theme-midnight .badge.bg-warning {
    background: linear-gradient(135deg, #48bfe3, #5e60ce) !important;
    color: #0c0c1e !important;
    box-shadow: 0 0 10px rgba(72, 191, 227, 0.5);
    text-shadow: none;
    font-weight: 700;
}

/* Server Visibility Toggle */
.profile-theme-midnight .server-visibility-toggle {
    background: rgba(72, 191, 227, 0.1);
    border: 1px solid #48bfe3 !important;
    color: #48bfe3 !important;
}

.profile-theme-midnight .server-visibility-toggle.hidden-server {
    background: rgba(94, 96, 206, 0.1);
    border-color: #5e60ce !important;
    color: #5e60ce !important;
}

/* Mode Toggle - Midnight Style */
.profile-theme-midnight .profile-mode-toggle {
    background: rgba(12, 12, 30, 0.6) !important;
    border: 1px solid rgba(72, 191, 227, 0.3) !important;
}

.profile-theme-midnight .profile-mode-toggle .btn {
    color: #48bfe3 !important;
}

.profile-theme-midnight .profile-mode-toggle .btn:hover:not(.active) {
    background: rgba(94, 96, 206, 0.2) !important;
    text-shadow: 0 0 10px #5e60ce;
}

.profile-theme-midnight .profile-mode-toggle .btn.active {
    background: linear-gradient(135deg, #5e60ce, #48bfe3) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(94, 96, 206, 0.5) !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* View Mode Alert */
.profile-theme-midnight .view-mode-alert {
    background: rgba(72, 191, 227, 0.1) !important;
    border: 1px solid #48bfe3 !important;
    box-shadow: 0 0 15px rgba(72, 191, 227, 0.2);
}

.profile-theme-midnight .view-mode-alert i,
.profile-theme-midnight .view-mode-alert strong {
    color: #48bfe3 !important;
    text-shadow: 0 0 5px rgba(72, 191, 227, 0.5);
}

/* Buttons */
.profile-theme-midnight .btn-primary {
    background: linear-gradient(135deg, #5e60ce, #48bfe3) !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(94, 96, 206, 0.4);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.profile-theme-midnight .btn-primary:hover {
    background: linear-gradient(135deg, #7577d8, #5e60ce) !important;
    box-shadow: 0 0 25px rgba(94, 96, 206, 0.6);
    transform: translateY(-1px);
}

.profile-theme-midnight .join-btn:not(.disabled) {
    background: var(--profile-accent, #5e60ce) !important;
    border-color: var(--profile-accent, #5e60ce) !important;
}

.profile-theme-midnight .join-btn:not(.disabled) i.fab.fa-discord,
.profile-theme-midnight .join-btn:not(.disabled) i.fa-discord {
    color: inherit !important;
}

.profile-theme-midnight .join-btn:not(.disabled):hover {
    background: var(--profile-accent-secondary, #48bfe3) !important;
    border-color: var(--profile-accent-secondary, #48bfe3) !important;
    box-shadow: 0 0 25px rgba(94, 96, 206, 0.6);
}

.profile-theme-midnight .btn-invite-bot {
    background: var(--profile-accent, #5e60ce) !important;
    border-color: var(--profile-accent, #5e60ce) !important;
}

.profile-theme-midnight .btn-invite-bot i {
    color: inherit !important;
}

.profile-theme-midnight .btn-invite-bot:hover {
    background: var(--profile-accent-secondary, #48bfe3) !important;
    border-color: var(--profile-accent-secondary, #48bfe3) !important;
    box-shadow: 0 0 25px rgba(94, 96, 206, 0.6);
    color: var(--profile-text-color, #fff) !important;
}

.profile-theme-midnight .btn-outline-primary {
    color: #48bfe3 !important;
    border-color: #48bfe3 !important;
    background: transparent !important;
}

.profile-theme-midnight .btn-outline-primary:hover {
    background: rgba(72, 191, 227, 0.15) !important;
    box-shadow: 0 0 15px rgba(72, 191, 227, 0.3);
}

/* Form Controls */
.profile-theme-midnight .form-control,
.profile-theme-midnight .form-select {
    background: rgba(12, 12, 30, 0.6) !important;
    border: 1px solid rgba(72, 191, 227, 0.3) !important;
    color: #e6e6ff !important;
}

.profile-theme-midnight .form-control:focus,
.profile-theme-midnight .form-select:focus {
    border-color: #5e60ce !important;
    box-shadow: 0 0 0 3px rgba(94, 96, 206, 0.2), 0 0 15px rgba(94, 96, 206, 0.3) !important;
}

.profile-theme-midnight .form-check-input:checked {
    background-color: #5e60ce !important;
    border-color: #5e60ce !important;
    box-shadow: 0 0 10px rgba(94, 96, 206, 0.5);
}

/* Tags (edit mode) */
.profile-theme-midnight .profile-tag-btn {
    background: rgba(94, 96, 206, 0.2) !important;
    border-color: #5e60ce !important;
    color: #e6e6ff !important;
}

.profile-theme-midnight .profile-tag-btn.active {
    background: linear-gradient(135deg, #5e60ce, #48bfe3) !important;
    border-color: #48bfe3 !important;
    color: #0c0c1e !important;
    box-shadow: 0 0 10px rgba(94, 96, 206, 0.4);
}

/* Sidebar overrides */
.profile-theme-midnight .sidebar-box {
    background: linear-gradient(145deg, rgba(15, 15, 42, 0.95), rgba(12, 12, 30, 0.9)) !important;
    border-color: #5e60ce !important;
}

.profile-theme-midnight .sidebar-header {
    background: linear-gradient(145deg, rgba(94, 96, 206, 0.15), rgba(72, 191, 227, 0.1)) !important;
    border-bottom-color: #48bfe3 !important;
}

.profile-theme-midnight .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #5e60ce, #48bfe3) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(94, 96, 206, 0.4) !important;
}

.profile-theme-midnight .nav-pills .nav-link:hover:not(.active) {
    background: rgba(94, 96, 206, 0.15) !important;
}

/* Main content background - controlled by JavaScript */

/* Aurora glow animation */
@keyframes midnight-glow {
    0%, 100% { text-shadow: 0 0 10px rgba(72, 191, 227, 0.8), 0 0 20px rgba(94, 96, 206, 0.5); }
    50% { text-shadow: 0 0 15px rgba(94, 96, 206, 0.8), 0 0 30px rgba(72, 191, 227, 0.6); }
}

/* Theme: Forest (Dark Green Nature) */
.profile-theme-forest {
    --profile-bg: linear-gradient(135deg, #0a1a0a 0%, #1a2f1a 50%, #0f2010 100%);
    --profile-bg-secondary: #0d1f0d;
    --profile-text-color: #e8f5e9;
    --profile-text-secondary: #81c784;
    --profile-accent: #4caf50;
    --profile-accent-secondary: #8bc34a;
    --profile-card-bg: rgba(15, 30, 15, 0.92);
    --profile-border-color: #2e7d32;
    --profile-link-color: #8bc34a;
    --profile-link-hover: #4caf50;
    --profile-card-shadow: 0 4px 20px rgba(76, 175, 80, 0.25);
}

/* ================================================================
   FOREST THEME - Component Overrides (Dark Green Nature)
   ================================================================ */

/* Main Profile Card - Natural Border Glow */
.profile-theme-forest .profile-theme-card {
    background: linear-gradient(145deg, rgba(15, 30, 15, 0.95), rgba(10, 26, 10, 0.9)) !important;
    border: 2px solid transparent !important;
    border-image: linear-gradient(135deg, #4caf50, #8bc34a, #2e7d32) 1 !important;
    box-shadow: 
        0 0 25px rgba(76, 175, 80, 0.3),
        0 0 50px rgba(139, 195, 74, 0.15),
        inset 0 0 60px rgba(76, 175, 80, 0.05) !important;
    position: relative;
    overflow: hidden;
}

/* Forest leaf pattern effect */
.profile-theme-forest .profile-theme-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top right, rgba(139, 195, 74, 0.05), transparent 40%),
                radial-gradient(ellipse at bottom left, rgba(76, 175, 80, 0.05), transparent 40%);
    pointer-events: none;
    z-index: 1;
}

/* Profile Card Header - Nature accent line */
.profile-theme-forest .profile-theme-card .card-header {
    background: linear-gradient(90deg, rgba(76, 175, 80, 0.15), transparent 50%, rgba(139, 195, 74, 0.15)) !important;
    border-bottom: none !important;
    position: relative;
    padding-bottom: 12px;
}

.profile-theme-forest .profile-theme-card .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #2e7d32, #4caf50, #8bc34a, #4caf50, #2e7d32);
    box-shadow: 0 0 10px #4caf50, 0 0 20px #8bc34a;
}

.profile-theme-forest .profile-theme-card .card-header h6 {
    color: #8bc34a !important;
    text-shadow: 0 0 10px rgba(139, 195, 74, 0.8), 0 0 20px rgba(76, 175, 80, 0.5);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem !important;
    animation: forest-glow 4s ease-in-out infinite;
}

.profile-theme-forest .profile-theme-card .card-header h6 i {
    color: #4caf50 !important;
    filter: drop-shadow(0 0 5px #4caf50);
}

/* Section Labels - Lime Green */
.profile-theme-forest .profile-field-group .form-label,
.profile-theme-forest .profile-field-group label {
    color: #8bc34a !important;
    text-shadow: 0 0 8px rgba(139, 195, 74, 0.5);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.75rem !important;
}

/* About Section - Forest Container */
.profile-theme-forest .profile-field-group > div.p-3.rounded,
.profile-theme-forest #viewModeAboutMe {
    background: rgba(10, 26, 10, 0.6) !important;
    border: 1px solid rgba(76, 175, 80, 0.15) !important;
    box-shadow: 
        0 0 10px rgba(76, 175, 80, 0.08),
        inset 0 0 30px rgba(139, 195, 74, 0.02) !important;
    color: #e8f5e9 !important;
    border-radius: 8px !important;
}

/* Interests/Tags - Nature Pills */
.profile-theme-forest .badge.rounded-pill {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3), rgba(139, 195, 74, 0.2)) !important;
    border: 1px solid #4caf50 !important;
    color: #e8f5e9 !important;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3), inset 0 0 10px rgba(139, 195, 74, 0.1) !important;
    text-shadow: 0 0 5px rgba(76, 175, 80, 0.5) !important;
    font-weight: 500 !important;
}

.profile-theme-forest .badge.rounded-pill:hover {
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5), 0 0 25px rgba(139, 195, 74, 0.3) !important;
    transform: translateY(-1px);
}

/* Language/Info Rows */
.profile-theme-forest .profile-field-group .d-flex.align-items-center {
    padding: 8px 12px;
    background: rgba(10, 26, 10, 0.4);
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.12);
}

.profile-theme-forest .profile-field-group .d-flex.align-items-center i {
    color: #8bc34a !important;
    filter: drop-shadow(0 0 5px rgba(139, 195, 74, 0.5));
}

/* Server Role Items */
.profile-theme-forest .server-role-item {
    background: rgba(10, 26, 10, 0.4);
    border: 1px solid rgba(76, 175, 80, 0.1) !important;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.profile-theme-forest .server-role-item:hover {
    border-color: rgba(76, 175, 80, 0.3) !important;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.15);
    background: rgba(76, 175, 80, 0.08);
}

.profile-theme-forest .server-icon-img,
.profile-theme-forest .server-icon-fallback {
    border: 1px solid rgba(139, 195, 74, 0.3) !important;
    box-shadow: none;
}

/* Owner Badge - Golden Leaf */
.profile-theme-forest .badge.bg-warning {
    background: linear-gradient(135deg, #cddc39, #8bc34a) !important;
    color: #0a1a0a !important;
    box-shadow: 0 0 10px rgba(205, 220, 57, 0.5);
    text-shadow: none;
    font-weight: 700;
}

/* Server Visibility Toggle */
.profile-theme-forest .server-visibility-toggle {
    background: rgba(139, 195, 74, 0.1);
    border: 1px solid #8bc34a !important;
    color: #8bc34a !important;
}

.profile-theme-forest .server-visibility-toggle.hidden-server {
    background: rgba(76, 175, 80, 0.1);
    border-color: #4caf50 !important;
    color: #4caf50 !important;
}

/* Mode Toggle - Forest Style */
.profile-theme-forest .profile-mode-toggle {
    background: rgba(10, 26, 10, 0.6) !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
}

.profile-theme-forest .profile-mode-toggle .btn {
    color: #8bc34a !important;
}

.profile-theme-forest .profile-mode-toggle .btn:hover:not(.active) {
    background: rgba(76, 175, 80, 0.2) !important;
    text-shadow: 0 0 10px #4caf50;
}

.profile-theme-forest .profile-mode-toggle .btn.active {
    background: linear-gradient(135deg, #4caf50, #2e7d32) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5) !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* View Mode Alert */
.profile-theme-forest .view-mode-alert {
    background: rgba(139, 195, 74, 0.1) !important;
    border: 1px solid #8bc34a !important;
    box-shadow: 0 0 15px rgba(139, 195, 74, 0.2);
}

.profile-theme-forest .view-mode-alert i,
.profile-theme-forest .view-mode-alert strong {
    color: #8bc34a !important;
    text-shadow: 0 0 5px rgba(139, 195, 74, 0.5);
}

/* Buttons */
.profile-theme-forest .btn-primary {
    background: linear-gradient(135deg, #4caf50, #2e7d32) !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.profile-theme-forest .btn-primary:hover {
    background: linear-gradient(135deg, #66bb6a, #4caf50) !important;
    box-shadow: 0 0 25px rgba(76, 175, 80, 0.6);
    transform: translateY(-1px);
}

.profile-theme-forest .join-btn:not(.disabled) {
    background: var(--profile-accent, #4caf50) !important;
    border-color: var(--profile-accent, #4caf50) !important;
}

.profile-theme-forest .join-btn:not(.disabled) i.fab.fa-discord,
.profile-theme-forest .join-btn:not(.disabled) i.fa-discord {
    color: inherit !important;
}

.profile-theme-forest .join-btn:not(.disabled):hover {
    background: var(--profile-accent-secondary, #8bc34a) !important;
    border-color: var(--profile-accent-secondary, #8bc34a) !important;
    box-shadow: 0 0 25px rgba(76, 175, 80, 0.6);
}

.profile-theme-forest .btn-invite-bot {
    background: var(--profile-accent, #4caf50) !important;
    border-color: var(--profile-accent, #4caf50) !important;
}

.profile-theme-forest .btn-invite-bot i {
    color: inherit !important;
}

.profile-theme-forest .btn-invite-bot:hover {
    background: var(--profile-accent-secondary, #8bc34a) !important;
    border-color: var(--profile-accent-secondary, #8bc34a) !important;
    box-shadow: 0 0 25px rgba(76, 175, 80, 0.6);
    color: var(--profile-text-color, #fff) !important;
}

.profile-theme-forest .btn-outline-primary {
    color: #8bc34a !important;
    border-color: #8bc34a !important;
    background: transparent !important;
}

.profile-theme-forest .btn-outline-primary:hover {
    background: rgba(139, 195, 74, 0.15) !important;
    box-shadow: 0 0 15px rgba(139, 195, 74, 0.3);
}

/* Form Controls */
.profile-theme-forest .form-control,
.profile-theme-forest .form-select {
    background: rgba(10, 26, 10, 0.6) !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
    color: #e8f5e9 !important;
}

.profile-theme-forest .form-control:focus,
.profile-theme-forest .form-select:focus {
    border-color: #4caf50 !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2), 0 0 15px rgba(76, 175, 80, 0.3) !important;
}

.profile-theme-forest .form-check-input:checked {
    background-color: #4caf50 !important;
    border-color: #4caf50 !important;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

/* Tags (edit mode) */
.profile-theme-forest .profile-tag-btn {
    background: rgba(76, 175, 80, 0.2) !important;
    border-color: #4caf50 !important;
    color: #e8f5e9 !important;
}

.profile-theme-forest .profile-tag-btn.active {
    background: linear-gradient(135deg, #4caf50, #8bc34a) !important;
    border-color: #8bc34a !important;
    color: #0a1a0a !important;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
}

/* Sidebar overrides */
.profile-theme-forest .sidebar-box {
    background: linear-gradient(145deg, rgba(15, 30, 15, 0.95), rgba(10, 26, 10, 0.9)) !important;
    border-color: #4caf50 !important;
}

.profile-theme-forest .sidebar-header {
    background: linear-gradient(145deg, rgba(76, 175, 80, 0.15), rgba(139, 195, 74, 0.1)) !important;
    border-bottom-color: #8bc34a !important;
}

.profile-theme-forest .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #4caf50, #8bc34a) !important;
    color: #0a1a0a !important;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4) !important;
}

.profile-theme-forest .nav-pills .nav-link:hover:not(.active) {
    background: rgba(76, 175, 80, 0.15) !important;
}

/* Main content background - controlled by JavaScript */

/* Forest glow animation */
@keyframes forest-glow {
    0%, 100% { text-shadow: 0 0 10px rgba(139, 195, 74, 0.8), 0 0 20px rgba(76, 175, 80, 0.5); }
    50% { text-shadow: 0 0 15px rgba(76, 175, 80, 0.8), 0 0 30px rgba(139, 195, 74, 0.6); }
}

/* Theme: Neon Glow (Bright Neon with Effects) */
.profile-theme-neon-glow {
    --profile-bg: #0a0a0a;
    --profile-bg-secondary: #111111;
    --profile-text-color: #ffffff;
    --profile-text-secondary: #39ff14;
    --profile-accent: #ff073a;
    --profile-accent-secondary: #39ff14;
    --profile-card-bg: rgba(15, 15, 15, 0.95);
    --profile-border-color: #39ff14;
    --profile-link-color: #39ff14;
    --profile-link-hover: #ff073a;
    --profile-text-glow: 0 0 10px #39ff14, 0 0 30px #39ff14;
    --profile-card-shadow: 0 0 30px rgba(57, 255, 20, 0.4), inset 0 0 30px rgba(57, 255, 20, 0.1);
}

/* ================================================================
   NEON GLOW THEME - Component Overrides (Bright Neon Effects)
   ================================================================ */

/* Main Profile Card - Intense Neon Border */
.profile-theme-neon-glow .profile-theme-card {
    background: linear-gradient(145deg, rgba(15, 15, 15, 0.98), rgba(5, 5, 5, 0.95)) !important;
    border: 2px solid #39ff14 !important;
    box-shadow: 
        0 0 30px rgba(57, 255, 20, 0.5),
        0 0 60px rgba(255, 7, 58, 0.3),
        inset 0 0 60px rgba(57, 255, 20, 0.05) !important;
    position: relative;
    overflow: hidden;
}

/* Neon flicker/pulse effect */
.profile-theme-neon-glow .profile-theme-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(57, 255, 20, 0.08), transparent 30%),
        radial-gradient(circle at 80% 80%, rgba(255, 7, 58, 0.08), transparent 30%);
    pointer-events: none;
    z-index: 1;
    animation: neon-pulse-bg 4s ease-in-out infinite;
}

/* Profile Card Header - Neon accent line */
.profile-theme-neon-glow .profile-theme-card .card-header {
    background: linear-gradient(90deg, rgba(57, 255, 20, 0.1), transparent 50%, rgba(255, 7, 58, 0.1)) !important;
    border-bottom: none !important;
    position: relative;
    padding-bottom: 12px;
}

.profile-theme-neon-glow .profile-theme-card .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #39ff14, #ff073a, #39ff14);
    box-shadow: 0 0 15px #39ff14, 0 0 30px #ff073a;
    animation: neon-line-pulse 2s ease-in-out infinite;
}

.profile-theme-neon-glow .profile-theme-card .card-header h6 {
    color: #39ff14 !important;
    text-shadow: 
        0 0 10px #39ff14, 
        0 0 20px #39ff14, 
        0 0 40px #39ff14,
        0 0 80px rgba(57, 255, 20, 0.5);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.9rem !important;
    animation: neon-text-flicker 3s ease-in-out infinite;
}

.profile-theme-neon-glow .profile-theme-card .card-header h6 i {
    color: #ff073a !important;
    filter: drop-shadow(0 0 10px #ff073a);
}

/* Section Labels - Neon Green */
.profile-theme-neon-glow .profile-field-group .form-label,
.profile-theme-neon-glow .profile-field-group label {
    color: #39ff14 !important;
    text-shadow: 0 0 10px #39ff14, 0 0 20px rgba(57, 255, 20, 0.5);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.75rem !important;
}

/* About Section - Neon Container */
.profile-theme-neon-glow .profile-field-group > div.p-3.rounded,
.profile-theme-neon-glow #viewModeAboutMe {
    background: rgba(5, 5, 5, 0.8) !important;
    border: 1px solid rgba(57, 255, 20, 0.2) !important;
    box-shadow: 
        0 0 10px rgba(57, 255, 20, 0.1),
        inset 0 0 30px rgba(57, 255, 20, 0.03) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

/* Interests/Tags - Neon Pills */
.profile-theme-neon-glow .badge.rounded-pill {
    background: rgba(57, 255, 20, 0.15) !important;
    border: 1px solid #39ff14 !important;
    color: #39ff14 !important;
    box-shadow: 
        0 0 10px rgba(57, 255, 20, 0.4), 
        0 0 20px rgba(57, 255, 20, 0.2),
        inset 0 0 10px rgba(57, 255, 20, 0.1) !important;
    text-shadow: 0 0 8px #39ff14 !important;
    font-weight: 600 !important;
}

.profile-theme-neon-glow .badge.rounded-pill:hover {
    background: rgba(255, 7, 58, 0.15) !important;
    border-color: #ff073a !important;
    color: #ff073a !important;
    box-shadow: 
        0 0 15px rgba(255, 7, 58, 0.5), 
        0 0 30px rgba(255, 7, 58, 0.3) !important;
    text-shadow: 0 0 8px #ff073a !important;
    transform: translateY(-2px);
}

/* Language/Info Rows */
.profile-theme-neon-glow .profile-field-group .d-flex.align-items-center {
    padding: 8px 12px;
    background: rgba(5, 5, 5, 0.6);
    border-radius: 6px;
    border: 1px solid rgba(57, 255, 20, 0.12);
}

.profile-theme-neon-glow .profile-field-group .d-flex.align-items-center i {
    color: #39ff14 !important;
    filter: drop-shadow(0 0 8px #39ff14);
}

/* Server Role Items */
.profile-theme-neon-glow .server-role-item {
    background: rgba(5, 5, 5, 0.6);
    border: 1px solid rgba(57, 255, 20, 0.1) !important;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.profile-theme-neon-glow .server-role-item:hover {
    border-color: rgba(57, 255, 20, 0.3) !important;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.15);
    background: rgba(57, 255, 20, 0.08);
}

.profile-theme-neon-glow .server-icon-img,
.profile-theme-neon-glow .server-icon-fallback {
    border: 1px solid rgba(57, 255, 20, 0.3) !important;
    box-shadow: none;
}

/* Owner Badge - Neon Red */
.profile-theme-neon-glow .badge.bg-warning {
    background: linear-gradient(135deg, #ff073a, #ff4466) !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(255, 7, 58, 0.6);
    text-shadow: none;
    font-weight: 700;
}

/* Server Visibility Toggle */
.profile-theme-neon-glow .server-visibility-toggle {
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid #39ff14 !important;
    color: #39ff14 !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

.profile-theme-neon-glow .server-visibility-toggle.hidden-server {
    background: rgba(255, 7, 58, 0.1);
    border-color: #ff073a !important;
    color: #ff073a !important;
    box-shadow: 0 0 10px rgba(255, 7, 58, 0.3);
}

/* Mode Toggle - Neon Style */
.profile-theme-neon-glow .profile-mode-toggle {
    background: rgba(5, 5, 5, 0.8) !important;
    border: 1px solid rgba(57, 255, 20, 0.4) !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.2);
}

.profile-theme-neon-glow .profile-mode-toggle .btn {
    color: #39ff14 !important;
    text-shadow: 0 0 5px #39ff14;
}

.profile-theme-neon-glow .profile-mode-toggle .btn:hover:not(.active) {
    background: rgba(255, 7, 58, 0.2) !important;
    text-shadow: 0 0 10px #ff073a;
    color: #ff073a !important;
}

.profile-theme-neon-glow .profile-mode-toggle .btn.active {
    background: #39ff14 !important;
    color: #000 !important;
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.6) !important;
    text-shadow: none;
    font-weight: 700;
}

/* View Mode Alert */
.profile-theme-neon-glow .view-mode-alert {
    background: rgba(57, 255, 20, 0.1) !important;
    border: 1px solid #39ff14 !important;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.3);
}

.profile-theme-neon-glow .view-mode-alert i,
.profile-theme-neon-glow .view-mode-alert strong {
    color: #39ff14 !important;
    text-shadow: 0 0 10px #39ff14;
}

/* Buttons */
.profile-theme-neon-glow .btn-primary {
    background: #39ff14 !important;
    border: none !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
    text-shadow: none;
    font-weight: 700;
}

.profile-theme-neon-glow .btn-primary:hover {
    background: #ff073a !important;
    box-shadow: 0 0 30px rgba(255, 7, 58, 0.6);
    transform: translateY(-2px);
}

.profile-theme-neon-glow .join-btn:not(.disabled) {
    background: var(--profile-accent, #39ff14) !important;
    border-color: var(--profile-accent, #39ff14) !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.6);
}

.profile-theme-neon-glow .join-btn:not(.disabled) i.fab.fa-discord,
.profile-theme-neon-glow .join-btn:not(.disabled) i.fa-discord {
    color: inherit !important;
}

.profile-theme-neon-glow .join-btn:not(.disabled):hover {
    background: var(--profile-accent-secondary, #ff073a) !important;
    border-color: var(--profile-accent-secondary, #ff073a) !important;
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.8);
}

.profile-theme-neon-glow .btn-invite-bot {
    background: var(--profile-accent, #39ff14) !important;
    border-color: var(--profile-accent, #39ff14) !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.6);
}

.profile-theme-neon-glow .btn-invite-bot i {
    color: inherit !important;
}

.profile-theme-neon-glow .btn-invite-bot:hover {
    background: var(--profile-accent-secondary, #ff073a) !important;
    border-color: var(--profile-accent-secondary, #ff073a) !important;
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.8);
    color: var(--profile-text-color, #fff) !important;
}

.profile-theme-neon-glow .btn-outline-primary {
    color: #39ff14 !important;
    border-color: #39ff14 !important;
    background: transparent !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

.profile-theme-neon-glow .btn-outline-primary:hover {
    background: rgba(57, 255, 20, 0.15) !important;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
}

/* Form Controls */
.profile-theme-neon-glow .form-control,
.profile-theme-neon-glow .form-select {
    background: rgba(5, 5, 5, 0.8) !important;
    border: 1px solid rgba(57, 255, 20, 0.4) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.1);
}

.profile-theme-neon-glow .form-control:focus,
.profile-theme-neon-glow .form-select:focus {
    border-color: #39ff14 !important;
    box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.3), 0 0 20px rgba(57, 255, 20, 0.4) !important;
}

.profile-theme-neon-glow .form-check-input:checked {
    background-color: #39ff14 !important;
    border-color: #39ff14 !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.6);
}

/* Tags (edit mode) */
.profile-theme-neon-glow .profile-tag-btn {
    background: rgba(57, 255, 20, 0.1) !important;
    border-color: #39ff14 !important;
    color: #39ff14 !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.2);
}

.profile-theme-neon-glow .profile-tag-btn.active {
    background: #39ff14 !important;
    border-color: #39ff14 !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
}

/* Sidebar overrides */
.profile-theme-neon-glow .sidebar-box {
    background: rgba(10, 10, 10, 0.95) !important;
    border: 1px solid #39ff14 !important;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.3);
}

.profile-theme-neon-glow .sidebar-header {
    background: rgba(57, 255, 20, 0.1) !important;
    border-bottom: 1px solid #39ff14 !important;
}

.profile-theme-neon-glow .nav-pills .nav-link.active {
    background: #39ff14 !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.5) !important;
    font-weight: 700;
}

.profile-theme-neon-glow .nav-pills .nav-link:hover:not(.active) {
    background: rgba(255, 7, 58, 0.2) !important;
    color: #ff073a !important;
}

/* Main content background - controlled by JavaScript */

/* Neon animations */
@keyframes neon-text-flicker {
    0%, 100% { 
        text-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14, 0 0 40px #39ff14; 
        opacity: 1;
    }
    92% { 
        text-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14, 0 0 40px #39ff14; 
        opacity: 1;
    }
    93% { 
        opacity: 0.8; 
    }
    94% { 
        text-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14, 0 0 40px #39ff14; 
        opacity: 1;
    }
    96% { 
        opacity: 0.9; 
    }
    97% { 
        text-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14, 0 0 40px #39ff14; 
        opacity: 1;
    }
}

@keyframes neon-line-pulse {
    0%, 100% { 
        box-shadow: 0 0 15px #39ff14, 0 0 30px #ff073a; 
    }
    50% { 
        box-shadow: 0 0 25px #39ff14, 0 0 50px #ff073a; 
    }
}

@keyframes neon-pulse-bg {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.7; 
    }
}

/* Theme: Minimal Light (Clean Light Theme) */
.profile-theme-minimal-light {
    --profile-bg: #f8f9fa;
    --profile-bg-secondary: #ffffff;
    --profile-text-color: #1a1a1a;
    --profile-text-secondary: #6c757d;
    --profile-accent: #7d19ff;
    --profile-accent-secondary: #5c0dbe;
    --profile-card-bg: rgba(255, 255, 255, 0.98);
    --profile-border-color: #e9ecef;
    --profile-link-color: #7d19ff;
    --profile-link-hover: #5c0dbe;
    --profile-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    
    /* Light theme customization panel variables */
    --customization-panel-bg: rgba(255, 255, 255, 0.98);
    --customization-text-color: #1a1a1a;
    --customization-text-secondary: #6c757d;
    --customization-text-muted: #999;
    --customization-border-color: #dee2e6;
    --customization-input-bg: #f8f9fa;
    --customization-header-bg: rgba(0, 0, 0, 0.03);
    --customization-toggle-bg: rgba(0, 0, 0, 0.03);
    --customization-slider-track: rgba(0, 0, 0, 0.1);
    --customization-btn-border: rgba(0, 0, 0, 0.2);
    --customization-btn-border-hover: rgba(0, 0, 0, 0.4);
}

/* Light Theme Customization Panel Overrides */
.profile-theme-minimal-light.customization-panel,
.customization-panel.profile-theme-minimal-light {
    background: rgba(255, 255, 255, 0.98) !important;
    color: #1a1a1a !important;
    border-color: #dee2e6 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.profile-theme-minimal-light .customization-section,
.customization-panel.profile-theme-minimal-light .customization-section {
    border-bottom-color: #dee2e6 !important;
}

.profile-theme-minimal-light .customization-section-title,
.customization-panel.profile-theme-minimal-light .customization-section-title {
    color: #495057 !important;
}

.profile-theme-minimal-light .bg-type-btn,
.customization-panel.profile-theme-minimal-light .bg-type-btn {
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #495057 !important;
    background: #fff !important;
}

.profile-theme-minimal-light .bg-type-btn:hover,
.customization-panel.profile-theme-minimal-light .bg-type-btn:hover {
    border-color: rgba(0, 0, 0, 0.3) !important;
    color: #1a1a1a !important;
    background: #f8f9fa !important;
}

.profile-theme-minimal-light .bg-type-btn.active,
.customization-panel.profile-theme-minimal-light .bg-type-btn.active {
    background: #7d19ff !important;
    border-color: #7d19ff !important;
    color: #fff !important;
}

.profile-theme-minimal-light .effect-toggle,
.customization-panel.profile-theme-minimal-light .effect-toggle {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #dee2e6 !important;
}

.profile-theme-minimal-light .effect-toggle-label,
.customization-panel.profile-theme-minimal-light .effect-toggle-label {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .css-editor,
.customization-panel.profile-theme-minimal-light .css-editor {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

.profile-theme-minimal-light .css-editor-header,
.customization-panel.profile-theme-minimal-light .css-editor-header {
    background: rgba(0, 0, 0, 0.03) !important;
    border-bottom-color: #dee2e6 !important;
}

.profile-theme-minimal-light .css-editor-header span,
.customization-panel.profile-theme-minimal-light .css-editor-header span {
    color: #666 !important;
}

.profile-theme-minimal-light .css-editor-textarea,
.customization-panel.profile-theme-minimal-light .css-editor-textarea {
    color: #1a1a1a !important;
    background: #fff !important;
}

.profile-theme-minimal-light .css-editor-footer,
.customization-panel.profile-theme-minimal-light .css-editor-footer {
    background: rgba(0, 0, 0, 0.02) !important;
    border-top-color: #dee2e6 !important;
    color: #666 !important;
}

.profile-theme-minimal-light .slider-control input[type="range"],
.customization-panel.profile-theme-minimal-light .slider-control input[type="range"] {
    background: rgba(0, 0, 0, 0.1) !important;
}

.profile-theme-minimal-light .slider-value,
.customization-panel.profile-theme-minimal-light .slider-value {
    color: #495057 !important;
}

.profile-theme-minimal-light .theme-card-name,
.customization-panel.profile-theme-minimal-light .theme-card-name {
    color: inherit !important;
}

.profile-theme-minimal-light .layout-option,
.customization-panel.profile-theme-minimal-light .layout-option {
    background: #fff !important;
    border-color: #dee2e6 !important;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .layout-option:hover,
.customization-panel.profile-theme-minimal-light .layout-option:hover {
    border-color: rgba(0, 0, 0, 0.3) !important;
    background: #f8f9fa !important;
}

.profile-theme-minimal-light .layout-option.active,
.customization-panel.profile-theme-minimal-light .layout-option.active {
    border-color: #7d19ff !important;
    background: rgba(125, 25, 255, 0.05) !important;
}

.profile-theme-minimal-light .layout-option-name,
.customization-panel.profile-theme-minimal-light .layout-option-name {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .pattern-item,
.customization-panel.profile-theme-minimal-light .pattern-item {
    border-color: #dee2e6 !important;
}

.profile-theme-minimal-light .pattern-item.active,
.customization-panel.profile-theme-minimal-light .pattern-item.active {
    border-color: #7d19ff !important;
}

/* Light theme form elements in customization panel */
.profile-theme-minimal-light .form-control,
.customization-panel.profile-theme-minimal-light .form-control,
.profile-theme-minimal-light .form-select,
.customization-panel.profile-theme-minimal-light .form-select {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .form-control:focus,
.customization-panel.profile-theme-minimal-light .form-control:focus,
.profile-theme-minimal-light .form-select:focus,
.customization-panel.profile-theme-minimal-light .form-select:focus {
    background-color: #fff !important;
    border-color: #7d19ff !important;
    box-shadow: 0 0 0 2px rgba(125, 25, 255, 0.15) !important;
}

/* Light theme labels */
.profile-theme-minimal-light label,
.customization-panel.profile-theme-minimal-light label,
.profile-theme-minimal-light .text-white,
.customization-panel.profile-theme-minimal-light .text-white {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light small,
.customization-panel.profile-theme-minimal-light small,
.profile-theme-minimal-light .text-muted,
.customization-panel.profile-theme-minimal-light .text-muted {
    color: #6c757d !important;
}

/* Light theme buttons */
.profile-theme-minimal-light .btn-outline-light,
.customization-panel.profile-theme-minimal-light .btn-outline-light {
    color: #495057 !important;
    border-color: #dee2e6 !important;
}

.profile-theme-minimal-light .btn-outline-light:hover,
.customization-panel.profile-theme-minimal-light .btn-outline-light:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1a1a1a !important;
}

/* Light theme header text */
.profile-theme-minimal-light h5,
.customization-panel.profile-theme-minimal-light h5,
.profile-theme-minimal-light p,
.customization-panel.profile-theme-minimal-light p {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .mb-0.small,
.customization-panel.profile-theme-minimal-light .mb-0.small {
    color: #6c757d !important;
}

/* Customization Panel Header Styles */
.customization-header-title {
    color: var(--customization-text-color, #fff);
    transition: color 0.3s ease;
}

.customization-header-subtitle {
    color: var(--customization-text-secondary, #a0a0a0) !important;
    transition: color 0.3s ease;
}

.customization-reset-btn {
    color: var(--customization-text-secondary, rgba(255, 255, 255, 0.7));
    border-color: var(--customization-border-color, rgba(255, 255, 255, 0.2));
    background: transparent;
    transition: all 0.3s ease;
}

.customization-reset-btn:hover {
    color: var(--customization-text-color, #fff);
    background: var(--customization-toggle-bg, rgba(255, 255, 255, 0.1));
}

/* Light theme overrides for header */
.profile-theme-minimal-light .customization-header-title,
.customization-panel.profile-theme-minimal-light .customization-header-title {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .customization-header-subtitle,
.customization-panel.profile-theme-minimal-light .customization-header-subtitle {
    color: #6c757d !important;
}

.profile-theme-minimal-light .customization-reset-btn,
.customization-panel.profile-theme-minimal-light .customization-reset-btn {
    color: #495057 !important;
    border-color: #dee2e6 !important;
}

.profile-theme-minimal-light .customization-reset-btn:hover,
.customization-panel.profile-theme-minimal-light .customization-reset-btn:hover {
    color: #1a1a1a !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Override Bootstrap utility classes in light theme customization panel */
.profile-theme-minimal-light .bg-dark,
.customization-panel.profile-theme-minimal-light .bg-dark {
    background-color: #f8f9fa !important;
}

.profile-theme-minimal-light.customization-panel .form-control.bg-dark,
.profile-theme-minimal-light.customization-panel .form-select.bg-dark {
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light.customization-panel .form-control.text-white,
.profile-theme-minimal-light.customization-panel .form-select.text-white {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light.customization-panel .form-control:focus,
.profile-theme-minimal-light.customization-panel .form-select:focus {
    background-color: #fff !important;
    border-color: #7d19ff !important;
    color: #1a1a1a !important;
    box-shadow: 0 0 0 2px rgba(125, 25, 255, 0.15) !important;
}

/* Font preview in light theme */
.profile-theme-minimal-light .font-preview,
.customization-panel.profile-theme-minimal-light .font-preview {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #dee2e6 !important;
}

.profile-theme-minimal-light .font-preview-heading,
.customization-panel.profile-theme-minimal-light .font-preview-heading {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .font-preview-body,
.customization-panel.profile-theme-minimal-light .font-preview-body {
    color: #495057 !important;
}

/* Color picker wrapper labels */
.profile-theme-minimal-light .color-picker-wrapper label,
.customization-panel.profile-theme-minimal-light .color-picker-wrapper label {
    color: #495057 !important;
}

/* Theme card borders in light theme */
.profile-theme-minimal-light .theme-card,
.customization-panel.profile-theme-minimal-light .theme-card {
    border-color: #dee2e6 !important;
}

.profile-theme-minimal-light .theme-card:hover,
.customization-panel.profile-theme-minimal-light .theme-card:hover {
    border-color: rgba(0, 0, 0, 0.3) !important;
}

.profile-theme-minimal-light .theme-card.active,
.customization-panel.profile-theme-minimal-light .theme-card.active {
    border-color: #7d19ff !important;
    box-shadow: 0 0 15px rgba(125, 25, 255, 0.25) !important;
}

/* ================================================================
   MINIMAL LIGHT THEME - Profile Content Component Overrides
   ================================================================ */

/* Main Profile Card - Clean Light Border */
.profile-theme-minimal-light .profile-theme-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    position: relative;
    overflow: hidden;
}

/* Subtle top accent line */
.profile-theme-minimal-light .profile-theme-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7d19ff, #9945ff, #7d19ff);
    pointer-events: none;
    z-index: 1;
}

/* Profile Card Header - Clean Light Style */
.profile-theme-minimal-light .profile-theme-card .card-header {
    background: rgba(248, 249, 250, 0.9) !important;
    border-bottom: 1px solid #e9ecef !important;
    position: relative;
}

.profile-theme-minimal-light .profile-theme-card .card-header h6 {
    color: #1a1a1a !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem !important;
}

.profile-theme-minimal-light .profile-theme-card .card-header h6 i {
    color: #7d19ff !important;
}

/* Section Labels - Dark on Light */
.profile-theme-minimal-light .profile-field-group .form-label,
.profile-theme-minimal-light .profile-field-group label {
    color: #495057 !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.75rem !important;
}

/* About Section - Light Container */
.profile-theme-minimal-light .profile-field-group > div[style*="background: rgba"],
.profile-theme-minimal-light .profile-field-group > div.p-3.rounded,
.profile-theme-minimal-light #viewModeAboutMe {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-left: 3px solid #7d19ff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    color: #1a1a1a !important;
    border-radius: 8px !important;
}

/* Interests/Tags - Light Purple Pills */
.profile-theme-minimal-light .badge.rounded-pill,
.profile-theme-minimal-light .profile-tag-btn.active {
    background: rgba(125, 25, 255, 0.1) !important;
    border: 1px solid rgba(125, 25, 255, 0.3) !important;
    color: #7d19ff !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

/* Inactive tags in minimal-light theme */
.profile-theme-minimal-light .profile-tag-btn:not(.active) {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #dee2e6 !important;
    color: #6c757d !important;
}

.profile-theme-minimal-light .profile-tag-btn:not(.active):hover {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: #adb5bd !important;
    color: #495057 !important;
}

.profile-theme-minimal-light .badge.rounded-pill:hover,
.profile-theme-minimal-light .profile-tag-btn:hover {
    background: rgba(125, 25, 255, 0.15) !important;
    border-color: #7d19ff !important;
    transform: translateY(-1px);
}

/* Language/Info Rows - Clean with accent */
.profile-theme-minimal-light .profile-field-group .d-flex.align-items-center {
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 2px solid #7d19ff;
}

.profile-theme-minimal-light .profile-field-group .d-flex.align-items-center i {
    color: #7d19ff !important;
}

/* Server Role Items - Light Hover */
.profile-theme-minimal-light .server-role-item {
    background: transparent;
    border: none !important;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.profile-theme-minimal-light .server-role-item:hover {
    background: rgba(125, 25, 255, 0.05);
    box-shadow: none;
}

.profile-theme-minimal-light .server-roles-list {
    background: transparent !important;
}

.profile-theme-minimal-light .server-icon-img,
.profile-theme-minimal-light .server-icon-fallback {
    border: 2px solid #7d19ff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Owner Badge - Golden accent */
.profile-theme-minimal-light .badge.bg-warning {
    background: linear-gradient(135deg, #ffc107, #ff9800) !important;
    color: #1a1a1a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    font-weight: 700;
}

/* Mode Toggle - Light Style */
.profile-theme-minimal-light .profile-mode-toggle {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
}

.profile-theme-minimal-light .profile-mode-toggle .btn {
    color: #495057 !important;
}

.profile-theme-minimal-light .profile-mode-toggle .btn:hover:not(.active) {
    background: rgba(125, 25, 255, 0.08) !important;
    color: #7d19ff !important;
}

.profile-theme-minimal-light .profile-mode-toggle .btn.active {
    background: #7d19ff !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(125, 25, 255, 0.3) !important;
}

/* View Mode Alert - Light Style */
.profile-theme-minimal-light .view-mode-alert {
    background: rgba(125, 25, 255, 0.05) !important;
    border: 1px solid rgba(125, 25, 255, 0.2) !important;
    box-shadow: none;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .view-mode-alert i,
.profile-theme-minimal-light .view-mode-alert strong {
    color: #7d19ff !important;
}

/* Profile Header Card - Clean Light */
.profile-theme-minimal-light .profile-header-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Profile Header Text - Light Theme Overrides */
.profile-theme-minimal-light .profile-header-name {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .profile-header-bio {
    color: rgba(26, 26, 26, 0.8) !important;
}

/* Cards and Stat Cards */
.profile-theme-minimal-light .card.bg-dark,
.profile-theme-minimal-light .stat-card {
    background: #fff !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .card.bg-dark .text-white,
.profile-theme-minimal-light .stat-card .text-white {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .card.bg-dark .text-muted,
.profile-theme-minimal-light .stat-card .text-muted {
    color: #6c757d !important;
}

.profile-theme-minimal-light .card.bg-dark .card-header,
.profile-theme-minimal-light .card-header {
    background: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef !important;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .card.bg-dark .card-header h6,
.profile-theme-minimal-light .card-header h6 {
    color: #1a1a1a !important;
}

/* Hidden/Visible Toggle Button */
.profile-theme-minimal-light .server-visibility-toggle {
    background: rgba(125, 25, 255, 0.08);
    border: 1px solid rgba(125, 25, 255, 0.3) !important;
    color: #7d19ff !important;
}

.profile-theme-minimal-light .server-visibility-toggle.hidden-server {
    background: rgba(108, 117, 125, 0.1);
    border-color: #adb5bd !important;
    color: #6c757d !important;
}

/* Form Controls - Light Theme */
.profile-theme-minimal-light .profile-edit-mode .form-control,
.profile-theme-minimal-light .profile-edit-mode .form-select {
    background: #fff !important;
    border: 1px solid #dee2e6 !important;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .profile-edit-mode .form-control:focus,
.profile-theme-minimal-light .profile-edit-mode .form-select:focus {
    border-color: #7d19ff !important;
    box-shadow: 0 0 0 3px rgba(125, 25, 255, 0.15) !important;
}

.profile-theme-minimal-light .profile-edit-mode .form-check-input:checked {
    background-color: #7d19ff !important;
    border-color: #7d19ff !important;
}

/* Primary Buttons - Purple */
.profile-theme-minimal-light .btn-primary {
    background: #7d19ff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(125, 25, 255, 0.3);
    color: #fff !important;
}

.profile-theme-minimal-light .btn-primary:hover {
    background: #6a14d9 !important;
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.4);
    transform: translateY(-1px);
}

.profile-theme-minimal-light .join-btn:not(.disabled) {
    background: var(--profile-accent, #7d19ff) !important;
    border-color: var(--profile-accent, #7d19ff) !important;
    color: var(--profile-text-color, #fff) !important;
}

.profile-theme-minimal-light .join-btn:not(.disabled) i.fab.fa-discord,
.profile-theme-minimal-light .join-btn:not(.disabled) i.fa-discord {
    color: inherit !important;
}

.profile-theme-minimal-light .join-btn:not(.disabled):hover {
    background: var(--profile-accent-secondary, #9945ff) !important;
    border-color: var(--profile-accent-secondary, #9945ff) !important;
    color: var(--profile-text-color, #fff) !important;
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.4);
}

.profile-theme-minimal-light .btn-invite-bot {
    background: var(--profile-accent, #7d19ff) !important;
    border-color: var(--profile-accent, #7d19ff) !important;
}

.profile-theme-minimal-light .btn-invite-bot i {
    color: inherit !important;
}

.profile-theme-minimal-light .btn-invite-bot:hover {
    background: var(--profile-accent-secondary, #9945ff) !important;
    border-color: var(--profile-accent-secondary, #9945ff) !important;
    box-shadow: 0 4px 12px rgba(125, 25, 255, 0.4);
}

/* Outline Buttons */
.profile-theme-minimal-light .btn-outline-primary {
    color: var(--profile-accent, #7d19ff) !important;
    border-color: var(--profile-accent, #7d19ff) !important;
    background: transparent !important;
}

.profile-theme-minimal-light .btn-outline-primary:hover {
    background: color-mix(in srgb, var(--profile-accent, #7d19ff) 10%, transparent) !important;
    color: var(--profile-accent, #7d19ff) !important;
}

.profile-theme-minimal-light .btn-outline-secondary {
    color: #495057 !important;
    border-color: #dee2e6 !important;
}

.profile-theme-minimal-light .btn-outline-secondary:hover {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
}

/* Accent Color Buttons in Edit Mode */
.profile-theme-minimal-light .accent-color-btn {
    border: 2px solid #dee2e6 !important;
}

.profile-theme-minimal-light .accent-color-btn.active {
    border-color: #1a1a1a !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

/* Main Content Area - background controlled by JavaScript */

/* Sidebar styles */
.profile-theme-minimal-light .sidebar-box {
    background: #fff !important;
    border: 1px solid #e9ecef !important;
}

.profile-theme-minimal-light .sidebar-header {
    background: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef !important;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .sidebar-content {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .sidebar-content .text-muted {
    color: #6c757d !important;
}

/* Navigation Pills */
.profile-theme-minimal-light .nav-pills .nav-link {
    color: #495057 !important;
}

.profile-theme-minimal-light .nav-pills .nav-link:hover:not(.active) {
    background: rgba(125, 25, 255, 0.08) !important;
    color: #7d19ff !important;
}

.profile-theme-minimal-light .nav-pills .nav-link.active {
    background: #7d19ff !important;
    color: #fff !important;
}

/* Settings Section Toggles */
.profile-theme-minimal-light .profile-settings-section .rounded {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
}

.profile-theme-minimal-light .profile-settings-section .text-white {
    color: #1a1a1a !important;
}

/* Profile Save Bar */
.profile-theme-minimal-light .profile-save-bar {
    background: rgba(248, 249, 250, 0.98) !important;
    border-top: 1px solid #e9ecef !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
}

.profile-theme-minimal-light .profile-save-bar .profile-save-text {
    color: #1a1a1a !important;
}

/* Icons in Light Theme */
.profile-theme-minimal-light .fas,
.profile-theme-minimal-light .fab,
.profile-theme-minimal-light .far {
    color: #7d19ff;
}

/* Exception for icons that should inherit their parent color */
.profile-theme-minimal-light .btn .fas,
.profile-theme-minimal-light .btn .fab,
.profile-theme-minimal-light .btn .far,
.profile-theme-minimal-light .text-success .fas,
.profile-theme-minimal-light .text-danger .fas,
.profile-theme-minimal-light .text-warning .fas,
.profile-theme-minimal-light .text-info .fas {
    color: inherit !important;
}

/* Calendar in Light Theme */
.profile-theme-minimal-light .calendar-day {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .calendar-day.active {
    background: rgba(125, 25, 255, 0.15) !important;
    color: #7d19ff !important;
}

.profile-theme-minimal-light .calendar-day.today {
    border-color: #7d19ff !important;
}

/* Table styles in Light Theme */
.profile-theme-minimal-light .table-dark {
    background: #fff !important;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .table-dark th,
.profile-theme-minimal-light .table-dark td {
    border-color: #e9ecef !important;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .table-dark thead {
    background: #f8f9fa !important;
}

/* Stats icons - use primary accent color from theme (works for all themes) */
.profile-customized .stat-card .fa-calendar-check,
.profile-customized .stat-card .fa-server,
.profile-customized .stat-card .fa-gift,
.profile-customized .stat-card .fa-coins,
.profile-customized .stat-icon-accent {
    color: var(--profile-accent, #7d19ff) !important;
}

/* Stats icons in Light Theme - use primary accent */
.profile-theme-minimal-light .stat-card .fa-calendar-check,
.profile-theme-minimal-light .stat-card .fa-server,
.profile-theme-minimal-light .stat-card .fa-gift,
.profile-theme-minimal-light .stat-card .fa-coins {
    color: var(--profile-accent, #7d19ff) !important;
}

/* Top Active Servers card in Light Theme */
.profile-theme-minimal-light .card.bg-dark.h-100 {
    background: #fff !important;
}

.profile-theme-minimal-light .card.bg-dark.h-100 .card-header {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .card.bg-dark.h-100 .card-header h6 {
    color: #1a1a1a !important;
}

/* Top Active Servers Table - Light Theme */
.profile-theme-minimal-light .table-dark {
    background-color: #fff !important;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .table-dark thead th {
    background-color: #f8f9fa !important;
    color: #1a1a1a !important;
    border-color: #e9ecef !important;
}

.profile-theme-minimal-light .table-dark tbody tr {
    background-color: #fff !important;
    border-color: #e9ecef !important;
}

.profile-theme-minimal-light .table-dark tbody tr:hover {
    background-color: #f8f9fa !important;
}

.profile-theme-minimal-light .table-dark tbody td {
    color: #1a1a1a !important;
    border-color: #e9ecef !important;
}

.profile-theme-minimal-light .table-dark tbody td a {
    color: var(--profile-accent, #7d19ff) !important;
    text-decoration: none;
}

.profile-theme-minimal-light .table-dark tbody td a:hover {
    text-decoration: underline;
}

/* Game Vote Section - Light Theme */
.profile-theme-minimal-light .vote-container {
    color: #1a1a1a;
}

.profile-theme-minimal-light .vote-options,
.profile-theme-minimal-light .share-section {
    background: #fff !important;
    border-color: #e9ecef !important;
}

.profile-theme-minimal-light .game-option {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: #e9ecef !important;
}

.profile-theme-minimal-light .game-option:hover {
    background: color-mix(in srgb, var(--profile-accent, #7d19ff) 8%, transparent) !important;
}

.profile-theme-minimal-light .game-option.selected {
    background: color-mix(in srgb, var(--profile-accent, #7d19ff) 15%, transparent) !important;
    border-color: var(--profile-accent, #7d19ff) !important;
}

.profile-theme-minimal-light .game-option label {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .vote-title,
.profile-theme-minimal-light .share-title,
.profile-theme-minimal-light .results-title {
    background: linear-gradient(135deg, var(--profile-accent, #7d19ff), var(--profile-accent-secondary, #b388ff)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.profile-theme-minimal-light .vote-subtitle,
.profile-theme-minimal-light .share-description {
    color: #495057 !important;
}

.profile-theme-minimal-light .custom-input {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .custom-input::placeholder {
    color: #6c757d !important;
}

.profile-theme-minimal-light .timer-container {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .timer-title {
    color: #495057 !important;
}

.profile-theme-minimal-light .timer {
    color: #7d19ff !important;
}

.profile-theme-minimal-light .result-label .result-name,
.profile-theme-minimal-light .result-label .result-count {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .result-bar-container {
    background: #e9ecef !important;
}

.profile-theme-minimal-light .share-input-group .share-input {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .points-info {
    background: color-mix(in srgb, var(--profile-accent, #7d19ff) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--profile-accent, #7d19ff) 20%, transparent) !important;
}

.profile-theme-minimal-light .points-amount {
    color: var(--profile-accent, #7d19ff) !important;
}

.profile-theme-minimal-light .points-text {
    color: #495057 !important;
}

/* Connection boxes in Light Theme */
.profile-theme-minimal-light .connection-box {
    background-color: #fff !important;
    border-color: #e9ecef !important;
}

.profile-theme-minimal-light .connection-box .form-control {
    color: #1a1a1a !important;
    background: transparent !important;
}

.profile-theme-minimal-light .connection-box .form-control::placeholder {
    color: #6c757d !important;
}

.profile-theme-minimal-light .connection-section h6 {
    color: #1a1a1a !important;
}

.profile-theme-minimal-light .connection-section .text-muted {
    color: #6c757d !important;
}

.profile-theme-minimal-light .connection-icon {
    color: #7d19ff !important;
}

.profile-theme-minimal-light .connection-box .input-group-text {
    color: #1a1a1a !important;
}

/* Nav Tabs in Light Theme */
.profile-theme-minimal-light .nav-tabs {
    border-bottom-color: #e9ecef !important;
}

.profile-theme-minimal-light .nav-tabs .nav-link {
    color: #495057 !important;
}

.profile-theme-minimal-light .nav-tabs .nav-link:hover {
    color: #7d19ff !important;
    border-color: #e9ecef #e9ecef #fff !important;
    background-color: rgba(125, 25, 255, 0.05) !important;
}

.profile-theme-minimal-light .nav-tabs .nav-link.active {
    color: #7d19ff !important;
    background-color: #fff !important;
    border-color: #e9ecef #e9ecef #fff !important;
}

/* Table hover in light theme */
.profile-theme-minimal-light .table-dark.table-hover tbody tr:hover {
    background: rgba(125, 25, 255, 0.05) !important;
}

/* Rewards section text in light theme */
.profile-theme-minimal-light .tab-pane .text-center p,
.profile-theme-minimal-light .tab-pane .text-muted {
    color: #6c757d !important;
}

/* Theme: Sakura (Soft Pink Japanese) */
.profile-theme-sakura {
    --profile-bg: linear-gradient(180deg, #1a0f1a 0%, #2d1f2d 50%, #1a1520 100%);
    --profile-bg-secondary: #1f1520;
    --profile-text-color: #fff0f5;
    --profile-text-secondary: #ffb6c1;
    --profile-accent: #ff69b4;
    --profile-accent-secondary: #ff1493;
    --profile-card-bg: rgba(30, 20, 30, 0.92);
    --profile-border-color: #ff69b4;
    --profile-link-color: #ffb6c1;
    --profile-link-hover: #ff69b4;
    --profile-card-shadow: 0 4px 20px rgba(255, 105, 180, 0.3);
}

/* ================================================================
   SAKURA THEME - Component Overrides
   ================================================================ */

/* Main Profile Card - Soft Pink Glow */
.profile-theme-sakura .profile-theme-card {
    background: linear-gradient(145deg, rgba(30, 20, 30, 0.95), rgba(40, 25, 40, 0.9)) !important;
    border: 2px solid transparent !important;
    border-image: linear-gradient(135deg, #ff69b4, #ffb6c1, #ff1493) 1 !important;
    box-shadow: 
        0 0 20px rgba(255, 105, 180, 0.4),
        0 0 40px rgba(255, 182, 193, 0.2),
        inset 0 0 60px rgba(255, 105, 180, 0.05) !important;
    position: relative;
    overflow: hidden;
}

/* Sakura petal shimmer effect */
.profile-theme-sakura .profile-theme-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top right, rgba(255, 182, 193, 0.08), transparent 40%),
                radial-gradient(ellipse at bottom left, rgba(255, 105, 180, 0.08), transparent 40%);
    pointer-events: none;
    z-index: 1;
}

/* Profile Card Header - Pink accent line */
.profile-theme-sakura .profile-theme-card .card-header {
    background: linear-gradient(90deg, rgba(255, 105, 180, 0.15), transparent 50%, rgba(255, 20, 147, 0.15)) !important;
    border-bottom: none !important;
    position: relative;
    padding-bottom: 12px;
}

.profile-theme-sakura .profile-theme-card .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff69b4, #ffb6c1, #ff1493);
    box-shadow: 0 0 10px #ff69b4, 0 0 20px #ffb6c1;
}

.profile-theme-sakura .profile-theme-card .card-header h6 {
    color: #ffb6c1 !important;
    text-shadow: 0 0 10px rgba(255, 182, 193, 0.8), 0 0 20px rgba(255, 105, 180, 0.5);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem !important;
    animation: sakura-glow 4s ease-in-out infinite;
}

.profile-theme-sakura .profile-theme-card .card-header h6 i {
    color: #ff69b4 !important;
    filter: drop-shadow(0 0 5px #ff69b4);
}

/* Section Labels - Soft Pink */
.profile-theme-sakura .profile-field-group .form-label,
.profile-theme-sakura .profile-field-group label {
    color: #ffb6c1 !important;
    text-shadow: 0 0 8px rgba(255, 182, 193, 0.5);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.75rem !important;
}

/* About Section - Sakura Container */
.profile-theme-sakura .profile-field-group > div[style*="background: rgba"],
.profile-theme-sakura .profile-field-group > div.p-3.rounded,
.profile-theme-sakura #viewModeAboutMe {
    background: rgba(26, 15, 26, 0.6) !important;
    border: 1px solid rgba(255, 105, 180, 0.15) !important;
    box-shadow: 
        0 0 10px rgba(255, 105, 180, 0.08),
        inset 0 0 30px rgba(255, 182, 193, 0.02) !important;
    color: #fff0f5 !important;
    border-radius: 8px !important;
}

/* Interests/Tags - Sakura Pills */
.profile-theme-sakura .badge.rounded-pill,
.profile-theme-sakura .profile-tag-btn.active {
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.3), rgba(255, 182, 193, 0.2)) !important;
    border: 1px solid #ff69b4 !important;
    color: #fff0f5 !important;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.4), inset 0 0 10px rgba(255, 182, 193, 0.1) !important;
    text-shadow: 0 0 5px rgba(255, 105, 180, 0.5) !important;
    font-weight: 500 !important;
}

.profile-theme-sakura .badge.rounded-pill:hover,
.profile-theme-sakura .profile-tag-btn:hover {
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.6), 0 0 30px rgba(255, 182, 193, 0.3) !important;
    transform: translateY(-1px);
}

/* Language/Info Rows - Clean with accent */
.profile-theme-sakura .profile-field-group .d-flex.align-items-center {
    padding: 8px 12px;
    background: rgba(26, 15, 26, 0.4);
    border-radius: 6px;
    border: 1px solid rgba(255, 105, 180, 0.12);
}

.profile-theme-sakura .profile-field-group .d-flex.align-items-center i {
    color: #ffb6c1 !important;
    filter: drop-shadow(0 0 5px rgba(255, 182, 193, 0.5));
}

/* Server Role Items - Pink Hover */
.profile-theme-sakura .server-role-item {
    background: rgba(26, 15, 26, 0.4);
    border: 1px solid rgba(255, 105, 180, 0.2) !important;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.profile-theme-sakura .server-role-item:hover {
    border-color: #ff69b4 !important;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
    background: rgba(255, 105, 180, 0.1);
}

.profile-theme-sakura .server-icon-img,
.profile-theme-sakura .server-icon-fallback {
    border: 2px solid #ffb6c1 !important;
    box-shadow: 0 0 10px rgba(255, 182, 193, 0.4);
}

/* Owner Badge - Warm Pink */
.profile-theme-sakura .badge.bg-warning {
    background: linear-gradient(135deg, #ff69b4, #ff1493) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    text-shadow: none;
    font-weight: 700;
}

/* Mode Toggle - Sakura Style */
.profile-theme-sakura .profile-mode-toggle {
    background: rgba(26, 15, 26, 0.6) !important;
    border: 1px solid rgba(255, 105, 180, 0.3) !important;
}

.profile-theme-sakura .profile-mode-toggle .btn {
    color: #ffb6c1 !important;
}

.profile-theme-sakura .profile-mode-toggle .btn:hover:not(.active) {
    background: rgba(255, 105, 180, 0.2) !important;
    text-shadow: 0 0 10px #ff69b4;
}

.profile-theme-sakura .profile-mode-toggle .btn.active {
    background: linear-gradient(135deg, #ff69b4, #ff1493) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.5) !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* View Mode Alert - Sakura Style */
.profile-theme-sakura .view-mode-alert {
    background: rgba(255, 105, 180, 0.1) !important;
    border: 1px solid #ff69b4 !important;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.2);
}

.profile-theme-sakura .view-mode-alert i,
.profile-theme-sakura .view-mode-alert strong {
    color: #ff69b4 !important;
    text-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
}

/* Profile Header Card - Enhanced glow */
.profile-theme-sakura .profile-header-card {
    box-shadow: 
        0 0 30px rgba(255, 105, 180, 0.5),
        0 0 60px rgba(255, 182, 193, 0.3),
        inset 0 0 40px rgba(0, 0, 0, 0.3) !important;
}

/* Card styling */
.profile-theme-sakura .card.bg-dark,
.profile-theme-sakura .stat-card {
    border: none !important;
    background: linear-gradient(145deg, rgba(30, 20, 30, 0.9), rgba(40, 25, 40, 0.85)) !important;
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.2);
}

/* Hidden/Visible Toggle Button */
.profile-theme-sakura .server-visibility-toggle {
    background: rgba(255, 182, 193, 0.1);
    border: 1px solid #ffb6c1 !important;
    color: #ffb6c1 !important;
}

.profile-theme-sakura .server-visibility-toggle.hidden-server {
    background: rgba(255, 20, 147, 0.1);
    border-color: #ff1493 !important;
    color: #ff1493 !important;
}

/* Form Controls - Pink Focus */
.profile-theme-sakura .form-control,
.profile-theme-sakura .form-select {
    background: rgba(26, 15, 26, 0.6) !important;
    border: 1px solid rgba(255, 105, 180, 0.3) !important;
    color: #fff0f5 !important;
}

.profile-theme-sakura .form-control:focus,
.profile-theme-sakura .form-select:focus {
    border-color: #ff69b4 !important;
    box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.2), 0 0 15px rgba(255, 105, 180, 0.3) !important;
}

/* Primary Buttons - Hot Pink */
.profile-theme-sakura .btn-primary {
    background: linear-gradient(135deg, #ff69b4, #ff1493) !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.4);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.profile-theme-sakura .btn-primary:hover {
    background: linear-gradient(135deg, #ff85c1, #ff69b4) !important;
    box-shadow: 0 0 25px rgba(255, 105, 180, 0.6);
    transform: translateY(-1px);
}

.profile-theme-sakura .join-btn:not(.disabled) {
    background: var(--profile-accent, #ff69b4) !important;
    border-color: var(--profile-accent, #ff69b4) !important;
}

.profile-theme-sakura .join-btn:not(.disabled) i.fab.fa-discord,
.profile-theme-sakura .join-btn:not(.disabled) i.fa-discord {
    color: inherit !important;
}

.profile-theme-sakura .join-btn:not(.disabled):hover {
    background: var(--profile-accent-secondary, #ff1493) !important;
    border-color: var(--profile-accent-secondary, #ff1493) !important;
    box-shadow: 0 0 25px rgba(255, 105, 180, 0.6);
}

.profile-theme-sakura .btn-invite-bot {
    background: var(--profile-accent, #ff69b4) !important;
    border-color: var(--profile-accent, #ff69b4) !important;
}

.profile-theme-sakura .btn-invite-bot i {
    color: inherit !important;
}

.profile-theme-sakura .btn-invite-bot:hover {
    background: var(--profile-accent-secondary, #ff1493) !important;
    border-color: var(--profile-accent-secondary, #ff1493) !important;
    box-shadow: 0 0 25px rgba(255, 105, 180, 0.6);
    color: var(--profile-text-color, #fff) !important;
}

/* Outline Buttons - Light Pink */
.profile-theme-sakura .btn-outline-primary {
    color: #ffb6c1 !important;
    border-color: #ffb6c1 !important;
    background: transparent !important;
}

.profile-theme-sakura .btn-outline-primary:hover {
    background: rgba(255, 182, 193, 0.15) !important;
    box-shadow: 0 0 15px rgba(255, 182, 193, 0.3);
}

/* Accent Color Buttons in Edit Mode */
.profile-theme-sakura .accent-color-btn {
    border: 2px solid rgba(255, 182, 193, 0.3) !important;
}

.profile-theme-sakura .accent-color-btn.active {
    border-color: #ffb6c1 !important;
    box-shadow: 0 0 15px rgba(255, 182, 193, 0.5);
}

/* Main Content Area - background controlled by JavaScript */

/* Remove card-body borders and backgrounds */
.profile-theme-sakura .card-body {
    border: none !important;
}

/* Profile Settings Section */
.profile-theme-sakura .profile-settings-section > div[style*="background: rgba"] {
    background: rgba(26, 15, 26, 0.4) !important;
    border: 1px solid rgba(255, 105, 180, 0.2) !important;
}

/* Switch Toggle - Sakura Colors */
.profile-theme-sakura .form-check-input:checked {
    background-color: #ff69b4 !important;
    border-color: #ff69b4 !important;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
}

/* Sakura Glow Animation */
@keyframes sakura-glow {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 182, 193, 0.8), 0 0 20px rgba(255, 105, 180, 0.5); }
    50% { text-shadow: 0 0 15px rgba(255, 105, 180, 0.8), 0 0 30px rgba(255, 182, 193, 0.6); }
}

/* Theme: Golden Hour (Warm Sunset Amber) */
.profile-theme-golden-hour {
    --profile-bg: linear-gradient(145deg, #0f0d0a 0%, #1a1510 35%, #241c14 65%, #0f0d0a 100%);
    --profile-bg-secondary: #1a1510;
    --profile-text-color: #f5ebe0;
    --profile-text-secondary: #c9a66b;
    --profile-accent: #d4a574;
    --profile-accent-secondary: #a67c52;
    --profile-card-bg: rgba(20, 16, 12, 0.95);
    --profile-border-color: #8b7355;
    --profile-link-color: #e8c48a;
    --profile-link-hover: #d4a574;
    --profile-card-shadow: 0 4px 24px rgba(180, 140, 90, 0.15);
}

/* Golden Hour - Explicit component overrides for full theme coverage */
.profile-theme-golden-hour .sidebar-box {
    background: linear-gradient(145deg, #1a1510, #241c14) !important;
    border-color: #8b7355 !important;
}

.profile-theme-golden-hour .sidebar-header {
    background: linear-gradient(145deg, rgba(212, 165, 116, 0.08), rgba(166, 124, 82, 0.12)) !important;
    border-bottom-color: #8b7355 !important;
}

/* Golden Hour main-content - controlled by JavaScript */

.profile-theme-golden-hour .nav-pills .nav-link.active {
    background: linear-gradient(145deg, #d4a574, #a67c52) !important;
    box-shadow: 0 4px 15px rgba(180, 140, 90, 0.25) !important;
    color: #0f0d0a !important;
}

.profile-theme-golden-hour .nav-pills .nav-link:hover:not(.active) {
    background: rgba(212, 165, 116, 0.1) !important;
}

.profile-theme-golden-hour .profile-header-card {
    background: linear-gradient(135deg, #a67c52 0%, #8b6914 50%, #d4a574 100%) !important;
    border-color: #8b7355 !important;
    box-shadow: 0 4px 20px rgba(140, 100, 60, 0.25) !important;
}

/* Main Profile Card - Warm Amber Border */
.profile-theme-golden-hour .profile-theme-card {
    background: linear-gradient(145deg, rgba(20, 16, 12, 0.98), rgba(26, 21, 16, 0.95)) !important;
    border: 1px solid #6b5a48 !important;
    box-shadow: 
        0 0 24px rgba(180, 140, 90, 0.12),
        0 0 48px rgba(140, 100, 60, 0.06),
        inset 0 0 60px rgba(212, 165, 116, 0.02) !important;
    position: relative;
    overflow: hidden;
}

/* Golden Hour warm light effect */
.profile-theme-golden-hour .profile-theme-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top right, rgba(212, 165, 116, 0.03), transparent 50%),
                radial-gradient(ellipse at bottom left, rgba(166, 124, 82, 0.03), transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Profile Card Header - Warm amber accent line */
.profile-theme-golden-hour .profile-theme-card .card-header {
    background: linear-gradient(90deg, rgba(212, 165, 116, 0.06), transparent 50%, rgba(166, 124, 82, 0.06)) !important;
    border-bottom: none !important;
    position: relative;
    padding-bottom: 12px;
}

.profile-theme-golden-hour .profile-theme-card .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #8b7355, #d4a574, #8b7355, transparent);
}

.profile-theme-golden-hour .profile-theme-card .card-header h6 {
    color: #e8c48a !important;
    text-shadow: var(--profile-text-glow);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.85rem !important;
}

.profile-theme-golden-hour .profile-theme-card .card-header h6 i {
    color: #d4a574 !important;
}

/* Section Labels - Muted Gold with text glow */
.profile-theme-golden-hour .profile-field-group .form-label,
.profile-theme-golden-hour .profile-field-group label {
    color: #c9a66b !important;
    text-shadow: var(--profile-text-glow);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 0.7rem !important;
}

/* About Section - Warm Container */
.profile-theme-golden-hour .profile-field-group > div[style*="background: rgba"],
.profile-theme-golden-hour .profile-field-group > div.p-3.rounded,
.profile-theme-golden-hour #viewModeAboutMe {
    background: rgba(26, 21, 16, 0.7) !important;
    border: 1px solid rgba(139, 115, 85, 0.2) !important;
    box-shadow: none !important;
    color: #f5ebe0 !important;
    border-radius: 8px !important;
}

/* Interests/Tags - Warm Amber Pills */
.profile-theme-golden-hour .badge.rounded-pill {
    background: rgba(212, 165, 116, 0.1) !important;
    border: 1px solid rgba(139, 115, 85, 0.3) !important;
    color: #f5ebe0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 500 !important;
}

.profile-theme-golden-hour .badge.rounded-pill:hover {
    background: rgba(212, 165, 116, 0.18) !important;
    border-color: rgba(212, 165, 116, 0.4) !important;
    transform: translateY(-1px);
}

/* Language/Info Rows */
.profile-theme-golden-hour .profile-field-group .d-flex.align-items-center {
    padding: 8px 12px;
    background: rgba(26, 21, 16, 0.4);
    border-radius: 6px;
    border: 1px solid rgba(139, 115, 85, 0.15);
}

.profile-theme-golden-hour .profile-field-group .d-flex.align-items-center i {
    color: #c9a66b !important;
}

/* Server Role Items */
.profile-theme-golden-hour .server-role-item {
    background: rgba(26, 21, 16, 0.4);
    border: 1px solid rgba(139, 115, 85, 0.12) !important;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.profile-theme-golden-hour .server-role-item:hover {
    border-color: rgba(212, 165, 116, 0.25) !important;
    background: rgba(212, 165, 116, 0.06);
}

.profile-theme-golden-hour .server-icon-img,
.profile-theme-golden-hour .server-icon-fallback {
    border: 1px solid rgba(139, 115, 85, 0.35) !important;
    box-shadow: none;
}

/* Owner Badge - Warm Gold */
.profile-theme-golden-hour .badge.bg-warning {
    background: linear-gradient(135deg, #d4a574, #a67c52) !important;
    color: #0f0d0a !important;
    box-shadow: none;
    text-shadow: none;
    font-weight: 700;
}

/* Mode Toggle - Warm Style */
.profile-theme-golden-hour .profile-mode-toggle {
    background: rgba(20, 16, 12, 0.7) !important;
    border: 1px solid rgba(139, 115, 85, 0.3) !important;
}

.profile-theme-golden-hour .profile-mode-toggle .btn {
    color: #c9a66b !important;
}

.profile-theme-golden-hour .profile-mode-toggle .btn:hover:not(.active) {
    background: rgba(212, 165, 116, 0.12) !important;
}

/* Cards - Warm dark background */
.profile-theme-golden-hour .card.bg-dark,
.profile-theme-golden-hour .stat-card {
    border: 1px solid rgba(139, 115, 85, 0.15) !important;
    background: linear-gradient(145deg, rgba(20, 16, 12, 0.95), rgba(26, 21, 16, 0.9)) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* Card Body */
.profile-theme-golden-hour .card-body {
    border: none !important;
}

/* Profile Settings Section */
.profile-theme-golden-hour .profile-settings-section > div[style*="background: rgba"] {
    background: rgba(26, 21, 16, 0.5) !important;
    border: 1px solid rgba(139, 115, 85, 0.2) !important;
}

/* Primary Buttons - Warm Amber */
.profile-theme-golden-hour .btn-primary {
    background: linear-gradient(135deg, #d4a574, #a67c52) !important;
    border: none !important;
    color: #0f0d0a !important;
    box-shadow: 0 2px 12px rgba(180, 140, 90, 0.2);
    text-shadow: none;
    font-weight: 600;
}

.profile-theme-golden-hour .btn-primary:hover {
    background: linear-gradient(135deg, #e0b68a, #b88a60) !important;
    box-shadow: 0 4px 16px rgba(180, 140, 90, 0.3);
    transform: translateY(-1px);
}

.profile-theme-golden-hour .join-btn:not(.disabled) {
    background: var(--profile-accent, #d4a574) !important;
    border-color: var(--profile-accent, #d4a574) !important;
}

.profile-theme-golden-hour .join-btn:not(.disabled) i.fab.fa-discord,
.profile-theme-golden-hour .join-btn:not(.disabled) i.fa-discord {
    color: inherit !important;
}

.profile-theme-golden-hour .join-btn:not(.disabled):hover {
    background: var(--profile-accent-secondary, #a67c52) !important;
    border-color: var(--profile-accent-secondary, #a67c52) !important;
    box-shadow: 0 4px 16px rgba(180, 140, 90, 0.3);
}

.profile-theme-golden-hour .btn-invite-bot {
    background: var(--profile-accent, #b48c5a) !important;
    border-color: var(--profile-accent, #b48c5a) !important;
}

.profile-theme-golden-hour .btn-invite-bot i {
    color: inherit !important;
}

.profile-theme-golden-hour .btn-invite-bot:hover {
    background: var(--profile-accent-secondary, #a67c52) !important;
    border-color: var(--profile-accent-secondary, #a67c52) !important;
    box-shadow: 0 4px 16px rgba(180, 140, 90, 0.3);
    color: var(--profile-text-color, #fff) !important;
}

/* Outline Buttons - Warm */
.profile-theme-golden-hour .btn-outline-primary {
    color: #d4a574 !important;
    border-color: #8b7355 !important;
    background: transparent !important;
}

.profile-theme-golden-hour .btn-outline-primary:hover {
    background: rgba(212, 165, 116, 0.1) !important;
    border-color: #d4a574 !important;
}

/* Accent Color Buttons in Edit Mode */
.profile-theme-golden-hour .accent-color-btn {
    border: 2px solid rgba(139, 115, 85, 0.35) !important;
}

.profile-theme-golden-hour .accent-color-btn.active {
    border-color: #d4a574 !important;
    box-shadow: 0 0 12px rgba(212, 165, 116, 0.3);
}

.profile-theme-golden-hour .profile-mode-toggle .btn.active {
    background: linear-gradient(135deg, #d4a574, #a67c52) !important;
    color: #0f0d0a !important;
    box-shadow: 0 2px 12px rgba(180, 140, 90, 0.25) !important;
    text-shadow: none;
}

/* View Mode Alert - Warm Style */
.profile-theme-golden-hour .view-mode-alert {
    background: rgba(212, 165, 116, 0.08) !important;
    border: 1px solid rgba(139, 115, 85, 0.4) !important;
}

.profile-theme-golden-hour .view-mode-alert i,
.profile-theme-golden-hour .view-mode-alert strong {
    color: #d4a574 !important;
}

/* Profile Header Card - Warm glow */
.profile-theme-golden-hour .profile-header-card {
    box-shadow: 
        0 4px 24px rgba(140, 100, 60, 0.25),
        inset 0 0 40px rgba(0, 0, 0, 0.35) !important;
}

/* Server Visibility Toggle */
.profile-theme-golden-hour .server-visibility-toggle {
    background: rgba(212, 165, 116, 0.08);
    border: 1px solid rgba(139, 115, 85, 0.4) !important;
    color: #c9a66b !important;
}

.profile-theme-golden-hour .server-visibility-toggle.hidden-server {
    background: rgba(166, 124, 82, 0.1);
    border-color: #6b5a48 !important;
    color: #8b7355 !important;
}

/* Form Controls - Warm Focus */
.profile-theme-golden-hour .form-control,
.profile-theme-golden-hour .form-select {
    background: rgba(20, 16, 12, 0.7) !important;
    border: 1px solid rgba(139, 115, 85, 0.25) !important;
    color: #f5ebe0 !important;
}

.profile-theme-golden-hour .form-control:focus,
.profile-theme-golden-hour .form-select:focus {
    border-color: #d4a574 !important;
    box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.15) !important;
}

/* Switch Toggle - Warm Colors */
.profile-theme-golden-hour .form-check-input:checked {
    background-color: #d4a574 !important;
    border-color: #d4a574 !important;
}

.profile-theme-golden-hour .profile-tag-btn.active {
    background: #d4a574 !important;
    border-color: #d4a574 !important;
    color: #0f0d0a !important;
}

.profile-theme-golden-hour .badge.bg-primary {
    background: #d4a574 !important;
    color: #0f0d0a !important;
}

/* Golden Hour - Icons should be theme-colored (warm amber), not purple */
.profile-theme-golden-hour .fas,
.profile-theme-golden-hour .fab,
.profile-theme-golden-hour .far,
.profile-theme-golden-hour i[class*="fa-"] {
    color: #c9a66b !important;
}

/* Exceptions for icons that should stay their original color */
.profile-theme-golden-hour .text-success i,
.profile-theme-golden-hour .text-danger i,
.profile-theme-golden-hour .text-warning i,
.profile-theme-golden-hour .text-info i,
.profile-theme-golden-hour i.text-success,
.profile-theme-golden-hour i.text-danger,
.profile-theme-golden-hour i.text-warning,
.profile-theme-golden-hour i.text-info {
    color: inherit !important;
}

/* Icons inside buttons should match button text */
.profile-theme-golden-hour .btn-primary i,
.profile-theme-golden-hour .btn i {
    color: inherit !important;
}

/* Card header styling */
.profile-theme-golden-hour .card-header {
    background: rgba(20, 16, 12, 0.95) !important;
    border-bottom-color: #6b5a48 !important;
    color: #f5ebe0 !important;
}

.profile-theme-golden-hour .card-header h6,
.profile-theme-golden-hour .card-header .mb-0 {
    color: #f5ebe0 !important;
}

.profile-theme-golden-hour .card-header i {
    color: #d4a574 !important;
}

/* Ensure Profile text in card header is visible */
.profile-theme-golden-hour #profile-card .card-header h6,
.profile-theme-golden-hour .profile-theme-card .card-header h6,
.profile-theme-golden-hour .card .card-header h6 {
    color: #f5ebe0 !important;
    display: flex !important;
    align-items: center !important;
    font-size: 1rem !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.profile-theme-golden-hour #profile-card .card-header h6 i,
.profile-theme-golden-hour .profile-theme-card .card-header h6 i,
.profile-theme-golden-hour .card .card-header h6 i {
    color: #d4a574 !important;
    margin-right: 0.5rem !important;
}

/* Fix any text color inheritance issues */
.profile-theme-golden-hour .card-header * {
    color: #f5ebe0;
}

.profile-theme-golden-hour .card-header .profile-mode-toggle .btn {
    color: rgba(245, 235, 224, 0.7) !important;
}

.profile-theme-golden-hour .card-header .profile-mode-toggle .btn.active {
    color: #0f0d0a !important;
    background: #d4a574 !important;
}

/* Golden Hour Animation - subtle warm pulse */
@keyframes golden-hour-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* Theme: Matrix (Green Terminal) */
/* NOTE: --profile-accent is NOT defined here - it comes from user customization or defaults to #00ff00 via fallback values */
.profile-theme-matrix {
    --profile-bg: #000000;
    --profile-bg-secondary: #0a0a0a;
    --profile-text-color: #00ff00;
    --profile-text-secondary: #00cc00;
    --profile-accent: #00ff00;
    --profile-accent-secondary: #00ffff; /* Cyan for contrast in charts */
    --profile-card-bg: rgba(0, 10, 0, 0.95);
    --profile-border-color: #003300;
    --profile-link-color: #00ff00;
    --profile-link-hover: #00cc00;
    --profile-font-family: 'Fira Code', 'Source Code Pro', monospace;
    --profile-heading-font: 'Fira Code', monospace;
    --profile-text-glow: 0 0 5px #00ff00, 0 0 15px #00ff00;
    --profile-card-shadow: 0 0 20px rgba(0, 255, 0, 0.2), inset 0 0 40px rgba(0, 255, 0, 0.05);
}

/* ================================================================
   MATRIX THEME - Component Overrides (Green Terminal Aesthetic)
   ================================================================ */

/* Main Profile Card - Terminal Border Glow */
.profile-theme-matrix .profile-theme-card {
    background: linear-gradient(145deg, rgba(0, 10, 0, 0.98), rgba(0, 5, 0, 0.95)) !important;
    border: 2px solid #00ff00 !important;
    box-shadow: 
        0 0 20px rgba(0, 255, 0, 0.4),
        0 0 40px rgba(0, 255, 0, 0.2),
        inset 0 0 60px rgba(0, 255, 0, 0.05) !important;
    position: relative;
    overflow: hidden;
}

/* Matrix digital rain effect */
.profile-theme-matrix .profile-theme-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 0, 0.03) 2px,
        rgba(0, 255, 0, 0.03) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* Profile Card Header - Terminal accent line */
.profile-theme-matrix .profile-theme-card .card-header {
    background: linear-gradient(90deg, rgba(0, 255, 0, 0.1), transparent 50%, rgba(0, 255, 0, 0.1)) !important;
    border-bottom: none !important;
    position: relative;
    padding-bottom: 12px;
}

.profile-theme-matrix .profile-theme-card .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #003300, #00ff00, #003300);
    box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
}

.profile-theme-matrix .profile-theme-card .card-header h6 {
    color: #00ff00 !important;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.9rem !important;
    animation: matrix-flicker 3s ease-in-out infinite;
}

.profile-theme-matrix .profile-theme-card .card-header h6 i {
    color: #00ff00 !important;
    filter: drop-shadow(0 0 8px #00ff00);
}

/* Section Labels - Terminal Green */
.profile-theme-matrix .profile-field-group .form-label,
.profile-theme-matrix .profile-field-group label {
    color: #00ff00 !important;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.75rem !important;
}

/* About Section - Terminal Container - Uses custom accent color for borders */
.profile-theme-matrix .profile-field-group > div[style*="background: rgba"],
.profile-theme-matrix .profile-field-group > div.p-3.rounded,
.profile-theme-matrix #viewModeAboutMe {
    background: rgba(0, 5, 0, 0.7) !important;
    border: 1px solid rgba(0, 255, 0, 0.15) !important;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.08), inset 0 0 30px rgba(0, 255, 0, 0.02) !important;
    color: #00ff00 !important;
    border-radius: 4px !important;
}

/* Interests/Tags - Terminal Pills - Uses custom accent color */
.profile-theme-matrix .badge.rounded-pill,
.profile-theme-matrix .profile-tag-btn.active {
    background: rgba(0, 20, 0, 0.5) !important;
    border: 1px solid var(--profile-accent, #00ff00) !important;
    color: var(--profile-accent, #00ff00) !important;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.2) !important;
    text-shadow: 0 0 5px var(--profile-accent, #00ff00) !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
}

.profile-theme-matrix .badge.rounded-pill:hover,
.profile-theme-matrix .profile-tag-btn:hover {
    background: rgba(0, 30, 0, 0.6) !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3) !important;
    transform: translateY(-1px);
}

/* Language/Info Rows - Uses custom accent color for left border */
.profile-theme-matrix .profile-field-group .d-flex.align-items-center {
    padding: 8px 12px;
    background: rgba(0, 5, 0, 0.4);
    border-radius: 4px;
    border: 1px solid rgba(0, 255, 0, 0.12);
}

.profile-theme-matrix .profile-field-group .d-flex.align-items-center i {
    color: #00ff00 !important;
    filter: drop-shadow(0 0 5px #00ff00);
}

/* Server Role Items */
.profile-theme-matrix .server-role-item {
    background: rgba(0, 5, 0, 0.4);
    border: 1px solid rgba(0, 255, 0, 0.2) !important;
    border-radius: 4px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.profile-theme-matrix .server-role-item:hover {
    border-color: var(--profile-accent, #00ff00) !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
    background: rgba(0, 30, 0, 0.4);
}

.profile-theme-matrix .server-icon-img,
.profile-theme-matrix .server-icon-fallback {
    border: 2px solid #00ff00 !important;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
}

/* Owner Badge - Bright Green */
.profile-theme-matrix .badge.bg-warning {
    background: linear-gradient(135deg, #00ff00, #00cc00) !important;
    color: #000 !important;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    text-shadow: none;
    font-weight: 700;
}

/* Mode Toggle - Terminal Style */
.profile-theme-matrix .profile-mode-toggle {
    background: rgba(0, 5, 0, 0.6) !important;
    border: 1px solid rgba(0, 255, 0, 0.3) !important;
}

.profile-theme-matrix .profile-mode-toggle .btn {
    color: #00cc00 !important;
}

.profile-theme-matrix .profile-mode-toggle .btn:hover:not(.active) {
    background: rgba(0, 255, 0, 0.15) !important;
    text-shadow: 0 0 10px #00ff00;
}

.profile-theme-matrix .profile-mode-toggle .btn.active {
    background: var(--profile-accent, #00ff00) !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5) !important;
    text-shadow: none;
    font-weight: 700;
}

/* View Mode Alert - Terminal Style */
.profile-theme-matrix .view-mode-alert {
    background: rgba(0, 255, 0, 0.1) !important;
    border: 1px solid #00ff00 !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
}

.profile-theme-matrix .view-mode-alert i,
.profile-theme-matrix .view-mode-alert strong {
    color: #00ff00 !important;
    text-shadow: 0 0 5px #00ff00;
}

/* Profile Header Card - Enhanced glow */
.profile-theme-matrix .profile-header-card {
    box-shadow: 
        0 0 30px rgba(0, 255, 0, 0.5),
        0 0 60px rgba(0, 255, 0, 0.3),
        inset 0 0 40px rgba(0, 0, 0, 0.5) !important;
}

/* Cards - Terminal glow */
.profile-theme-matrix .card.bg-dark,
.profile-theme-matrix .stat-card {
    border: 1px solid rgba(0, 255, 0, 0.3) !important;
    background: linear-gradient(145deg, rgba(0, 10, 0, 0.95), rgba(0, 5, 0, 0.9)) !important;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
}

/* Server Visibility Toggle */
.profile-theme-matrix .server-visibility-toggle {
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid #00ff00 !important;
    color: #00ff00 !important;
}

.profile-theme-matrix .server-visibility-toggle.hidden-server {
    background: rgba(0, 100, 0, 0.1);
    border-color: #006600 !important;
    color: #006600 !important;
}

/* Form Controls - Terminal Focus */
.profile-theme-matrix .form-control,
.profile-theme-matrix .form-select {
    background: rgba(0, 5, 0, 0.8) !important;
    border: 1px solid rgba(0, 255, 0, 0.3) !important;
    color: #00ff00 !important;
}

.profile-theme-matrix .form-control:focus,
.profile-theme-matrix .form-select:focus {
    border-color: #00ff00 !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.2), 0 0 15px rgba(0, 255, 0, 0.3) !important;
}

/* Primary Buttons - Terminal Green */
.profile-theme-matrix .btn-primary {
    background: #00ff00 !important;
    border: none !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
    text-shadow: none;
    font-weight: 700;
}

.profile-theme-matrix .btn-primary:hover {
    background: #00cc00 !important;
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.6);
    transform: translateY(-1px);
}

.profile-theme-matrix .join-btn:not(.disabled) {
    background: var(--profile-accent, #00ff00) !important;
    border-color: var(--profile-accent, #00ff00) !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
}

.profile-theme-matrix .join-btn:not(.disabled) i.fab.fa-discord,
.profile-theme-matrix .join-btn:not(.disabled) i.fa-discord {
    color: inherit !important;
}

.profile-theme-matrix .join-btn:not(.disabled):hover {
    background: var(--profile-accent-secondary, #00ffff) !important;
    border-color: var(--profile-accent-secondary, #00ffff) !important;
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.6);
}

.profile-theme-matrix .btn-invite-bot {
    background: var(--profile-accent, #00ff00) !important;
    border-color: var(--profile-accent, #00ff00) !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
}

.profile-theme-matrix .btn-invite-bot i {
    color: inherit !important;
}

.profile-theme-matrix .btn-invite-bot:hover {
    background: var(--profile-accent-secondary, #00ffff) !important;
    border-color: var(--profile-accent-secondary, #00ffff) !important;
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.6);
    color: var(--profile-text-color, #000) !important;
}

/* Outline Buttons - Green */
.profile-theme-matrix .btn-outline-primary {
    color: #00ff00 !important;
    border-color: #00ff00 !important;
    background: transparent !important;
}

.profile-theme-matrix .btn-outline-primary:hover {
    background: rgba(0, 255, 0, 0.15) !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
}

/* Accent Color Buttons in Edit Mode */
.profile-theme-matrix .accent-color-btn {
    border: 2px solid rgba(0, 255, 0, 0.3) !important;
}

.profile-theme-matrix .accent-color-btn.active {
    border-color: #00ff00 !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
}

/* Main Content Area - background controlled by JavaScript */

/* Sidebar */
.profile-theme-matrix .sidebar-box {
    background: linear-gradient(145deg, rgba(0, 10, 0, 0.95), rgba(0, 15, 0, 0.9)) !important;
    border-color: #00ff00 !important;
}

.profile-theme-matrix .sidebar-header {
    background: linear-gradient(145deg, rgba(0, 255, 0, 0.1), rgba(0, 200, 0, 0.15)) !important;
    border-bottom-color: #00ff00 !important;
}

.profile-theme-matrix .nav-pills .nav-link.active {
    background: #00ff00 !important;
    box-shadow: 0 4px 15px rgba(0, 255, 0, 0.4) !important;
    color: #000 !important;
    font-weight: 700;
}

.profile-theme-matrix .nav-pills .nav-link:hover:not(.active) {
    background: rgba(0, 255, 0, 0.15) !important;
    color: #00ff00 !important;
}

/* Card Body */
.profile-theme-matrix .card-body {
    border: none !important;
}

/* Profile Settings Section */
.profile-theme-matrix .profile-settings-section > div[style*="background: rgba"] {
    background: rgba(0, 5, 0, 0.4) !important;
    border: 1px solid rgba(0, 255, 0, 0.2) !important;
}

/* Switch Toggle - Matrix Colors */
.profile-theme-matrix .form-check-input:checked {
    background-color: #00ff00 !important;
    border-color: #00ff00 !important;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

/* Card Headers */
.profile-theme-matrix .card-header {
    background: rgba(0, 10, 0, 0.95) !important;
    border-bottom-color: #00ff00 !important;
    color: #00ff00 !important;
}

.profile-theme-matrix .card-header h6,
.profile-theme-matrix .card-header .mb-0 {
    color: #00ff00 !important;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

.profile-theme-matrix .card-header i {
    color: #00ff00 !important;
    filter: drop-shadow(0 0 5px #00ff00);
}

/* Icons - Green with glow */
.profile-theme-matrix .fas,
.profile-theme-matrix .fab,
.profile-theme-matrix .far,
.profile-theme-matrix i[class*="fa-"] {
    color: #00ff00 !important;
}

/* Exceptions for status icons */
.profile-theme-matrix .text-success i,
.profile-theme-matrix .text-danger i,
.profile-theme-matrix .text-warning i,
.profile-theme-matrix .text-info i {
    color: inherit !important;
}

/* Button icons inherit button color */
.profile-theme-matrix .btn-primary i,
.profile-theme-matrix .btn i {
    color: inherit !important;
}

/* Badge primary */
.profile-theme-matrix .badge.bg-primary {
    background: #00ff00 !important;
    color: #000 !important;
}

/* Matrix Flicker Animation */
@keyframes matrix-flicker {
    0%, 100% { 
        text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00; 
        opacity: 1;
    }
    92% { opacity: 1; }
    93% { opacity: 0.8; text-shadow: 0 0 5px #00ff00; }
    94% { opacity: 1; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00; }
    96% { opacity: 0.9; }
    97% { opacity: 1; }
}

/* ================================================================
   BACKGROUND PATTERNS
   ================================================================ */

.profile-pattern-dots {
    background-image: radial-gradient(circle, var(--profile-accent) 1px, transparent 1px);
    background-size: 20px 20px;
}

.profile-pattern-grid {
    background-image: 
        linear-gradient(var(--profile-border-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--profile-border-color) 1px, transparent 1px);
    background-size: 30px 30px;
}

.profile-pattern-diagonal {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        var(--profile-border-color) 10px,
        var(--profile-border-color) 11px
    );
}

.profile-pattern-waves {
    background-image: 
        radial-gradient(ellipse at 50% 0%, transparent 70%, var(--profile-accent) 70%, var(--profile-accent) 71%, transparent 71%),
        radial-gradient(ellipse at 50% 100%, transparent 70%, var(--profile-accent) 70%, var(--profile-accent) 71%, transparent 71%);
    background-size: 40px 80px;
}

.profile-pattern-hexagons {
    background-color: var(--profile-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%237d19ff' fill-opacity='0.1' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/svg%3E");
}

.profile-pattern-circuit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%237d19ff' fill-opacity='0.1' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0z'/%3E%3C/svg%3E");
}

.profile-pattern-stars {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%237d19ff' fill-opacity='0.15' d='M10 0l2.36 6.36L20 6.36l-5 4.64 1.64 7L10 14l-6.64 4 1.64-7L0 6.36l7.64 0z'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}

/* ================================================================
   ANIMATED BACKGROUNDS
   ================================================================ */

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

@keyframes floatParticles {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-10px) translateX(5px); }
    50% { transform: translateY(-5px) translateX(-5px); }
    75% { transform: translateY(-15px) translateX(3px); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: var(--profile-card-shadow); }
    50% { box-shadow: var(--profile-card-shadow), 0 0 30px var(--profile-accent); }
}

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

.profile-animated-gradient {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

.profile-animated-pulse .profile-card {
    animation: pulseGlow 3s ease-in-out infinite;
}

.profile-animated-float {
    animation: floatParticles 6s ease-in-out infinite;
}

/* Sparkle effect container */
.profile-animated-sparkle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image: 
        radial-gradient(circle at 20% 30%, var(--profile-accent) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, var(--profile-accent) 1px, transparent 1px),
        radial-gradient(circle at 50% 10%, var(--profile-accent) 1px, transparent 1px);
    background-size: 100% 100%;
    animation: sparkle 4s ease-in-out infinite;
}

/* ================================================================
   CARD STYLES
   ================================================================ */

/* Rounded (default) - Apply to all card elements */
.profile-card-rounded .profile-theme-card,
.profile-card-rounded .sidebar-box,
.profile-card-rounded .stat-card,
.profile-card-rounded .card.bg-dark,
.profile-card-rounded .profile-header-card,
.profile-card-rounded .card {
    border-radius: var(--profile-border-radius, 12px) !important;
}

/* Sharp edges - Apply to all card elements */
.profile-card-sharp .profile-theme-card,
.profile-card-sharp .sidebar-box,
.profile-card-sharp .stat-card,
.profile-card-sharp .card.bg-dark,
.profile-card-sharp .profile-header-card,
.profile-card-sharp .card {
    border-radius: 0 !important;
}

/* Glassmorphism - Apply to all card elements */
.profile-card-glass .profile-theme-card,
.profile-card-glass .sidebar-box,
.profile-card-glass .stat-card,
.profile-card-glass .card.bg-dark {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Glassmorphism for header card - slightly stronger */
.profile-card-glass .profile-header-card {
    backdrop-filter: blur(16px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Glassmorphism for light theme - use darker tint */
.profile-theme-minimal-light.profile-card-glass .profile-theme-card,
.profile-theme-minimal-light.profile-card-glass .sidebar-box,
.profile-theme-minimal-light.profile-card-glass .stat-card,
.profile-theme-minimal-light.profile-card-glass .card.bg-dark {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Neumorphism - Apply to all card elements */
.profile-card-neumorphism .profile-theme-card,
.profile-card-neumorphism .sidebar-box,
.profile-card-neumorphism .stat-card,
.profile-card-neumorphism .card.bg-dark {
    background: var(--profile-bg-secondary, #16213e) !important;
    border: none !important;
    box-shadow: 
        6px 6px 12px rgba(0, 0, 0, 0.35),
        -6px -6px 12px rgba(255, 255, 255, 0.04) !important;
}

/* Neumorphism for header card */
.profile-card-neumorphism .profile-header-card {
    border: none !important;
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.4),
        -8px -8px 16px rgba(255, 255, 255, 0.05) !important;
}

/* Neumorphism for light theme - inverted shadows */
.profile-theme-minimal-light.profile-card-neumorphism .profile-theme-card,
.profile-theme-minimal-light.profile-card-neumorphism .sidebar-box,
.profile-theme-minimal-light.profile-card-neumorphism .stat-card,
.profile-theme-minimal-light.profile-card-neumorphism .card.bg-dark {
    background: #ffffff !important;
    box-shadow: 
        6px 6px 12px rgba(0, 0, 0, 0.08),
        -6px -6px 12px rgba(255, 255, 255, 1) !important;
}

.profile-theme-minimal-light.profile-card-neumorphism .profile-header-card {
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.1),
        -8px -8px 16px rgba(255, 255, 255, 1) !important;
}

/* Golden Hour neumorphism - warm shadows */
.profile-theme-golden-hour.profile-card-neumorphism .profile-theme-card,
.profile-theme-golden-hour.profile-card-neumorphism .sidebar-box,
.profile-theme-golden-hour.profile-card-neumorphism .stat-card,
.profile-theme-golden-hour.profile-card-neumorphism .card.bg-dark {
    box-shadow: 
        6px 6px 12px rgba(30, 20, 10, 0.4),
        -6px -6px 12px rgba(255, 220, 180, 0.05) !important;
}

/* ================================================================
   CONTENT DENSITY STYLES
   ================================================================ */

/* Compact density - tighter spacing */
.profile-density-compact .card-body {
    padding: 0.75rem !important;
}

.profile-density-compact .card-header {
    padding: 0.5rem 0.75rem !important;
}

.profile-density-compact .stat-card {
    padding: 0.75rem !important;
}

.profile-density-compact .sidebar-box {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.profile-density-compact .mb-3 {
    margin-bottom: 0.5rem !important;
}

.profile-density-compact .mb-4 {
    margin-bottom: 0.75rem !important;
}

.profile-density-compact .p-3 {
    padding: 0.75rem !important;
}

.profile-density-compact .p-4 {
    padding: 1rem !important;
}

.profile-density-compact .gap-3 {
    gap: 0.75rem !important;
}

.profile-density-compact .row > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Normal density - default spacing (no changes needed) */
.profile-density-normal {
    /* Uses default Bootstrap spacing */
}

/* Spacious density - more breathing room */
.profile-density-spacious .card-body {
    padding: 1.5rem !important;
}

.profile-density-spacious .card-header {
    padding: 1rem 1.5rem !important;
}

.profile-density-spacious .stat-card {
    padding: 1.5rem !important;
}

.profile-density-spacious .sidebar-box {
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.profile-density-spacious .mb-3 {
    margin-bottom: 1.25rem !important;
}

.profile-density-spacious .mb-4 {
    margin-bottom: 1.75rem !important;
}

.profile-density-spacious .p-3 {
    padding: 1.25rem !important;
}

.profile-density-spacious .p-4 {
    padding: 1.75rem !important;
}

.profile-density-spacious .gap-3 {
    gap: 1.25rem !important;
}

.profile-density-spacious .row > [class*="col-"] {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ================================================================
   PROFILE CUSTOMIZATION CONTAINER
   ================================================================ */

.profile-customized {
    font-family: var(--profile-font-family);
    font-size: var(--profile-font-size);
    color: var(--profile-text-color);
}

.profile-customized h1,
.profile-customized h2,
.profile-customized h3,
.profile-customized h4,
.profile-customized h5,
.profile-customized h6 {
    font-family: var(--profile-heading-font);
    text-shadow: var(--profile-text-glow);
}

/* Text glow applied to section labels/headings ONLY */
/* Includes: "ABOUT", "INTERESTS", "PRIMARY LANGUAGE", "BIRTHDAY", "SERVER ADMIN AT", etc. */
.profile-customized .form-label,
.profile-customized .profile-field-group > label,
.profile-customized .profile-view-mode .form-label,
.profile-customized #profilePreviewMode .form-label {
    text-shadow: var(--profile-text-glow);
}

/* Text glow for stat card labels (e.g., "Active Days", "Points") - NOT values */
.profile-customized .stat-card .text-muted.small {
    text-shadow: var(--profile-text-glow);
}

/* Profile header name gets full glow */
.profile-customized .profile-header-name {
    text-shadow: var(--profile-text-glow);
}

/* Ensure body content does NOT get glow */
.profile-customized #viewModeAboutMe,
.profile-customized .profile-view-mode .p-3.rounded,
.profile-customized .profile-view-mode .badge,
.profile-customized #viewModeTags .badge,
.profile-customized .server-role-item span,
.profile-customized .stat-card h5,
.profile-customized .stat-card .mb-0,
.profile-customized .stat-value,
.profile-customized [data-stats] {
    text-shadow: none;
}

.profile-customized .profile-card,
.profile-customized .card {
    background: var(--profile-card-bg);
    border: var(--profile-border-width) var(--profile-border-style) var(--profile-border-color);
    border-radius: var(--profile-border-radius);
    box-shadow: var(--profile-card-shadow);
    padding: var(--profile-card-padding);
}

/* Profile theme card - glass effect, no bg-dark override */
.profile-theme-card {
    background: var(--profile-card-bg, rgba(20, 20, 40, 0.6)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--profile-border-width, 1px) var(--profile-border-style, solid) var(--profile-border-color, rgba(255, 255, 255, 0.1)) !important;
    border-radius: var(--profile-border-radius, 12px) !important;
    color: inherit;
}

.profile-theme-card .card-header {
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.profile-theme-card .card-body {
    background: transparent !important;
}

.profile-customized a {
    color: var(--profile-link-color);
}

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

.profile-customized .text-muted {
    color: var(--profile-text-secondary) !important;
}

/* Sidebar buttons - use custom accent color */
.profile-customized .sidebar-box .btn-primary,
.profile-customized .sidebar-container .btn-primary {
    background: var(--profile-accent, #7d19ff) !important;
    background-color: var(--profile-accent, #7d19ff) !important;
    border-color: var(--profile-accent, #7d19ff) !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--profile-accent, #7d19ff) 40%, transparent) !important;
}

.profile-customized .sidebar-box .btn-primary:hover,
.profile-customized .sidebar-container .btn-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--profile-accent, #7d19ff) 50%, transparent) !important;
    transform: translateY(-1px);
}

/* ================================================================
   CUSTOMIZATION PANEL UI
   ================================================================ */

.customization-panel {
    background: var(--customization-panel-bg, rgba(20, 20, 30, 0.98));
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    color: var(--customization-text-color, #ffffff);
    border: 1px solid var(--customization-border-color, rgba(255, 255, 255, 0.1));
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.customization-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--customization-border-color, rgba(255, 255, 255, 0.1));
}

.customization-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.customization-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--customization-text-secondary, #a0a0a0);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.customization-section-title i {
    color: var(--profile-accent, #7d19ff);
}

/* Theme Grid */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.theme-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.theme-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}

.theme-card.active {
    border-color: var(--profile-accent);
    box-shadow: 0 0 15px rgba(125, 25, 255, 0.4);
}

.theme-card-preview {
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8px;
}

.theme-card-name {
    font-size: 11px;
    font-weight: 500;
    color: inherit;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Color Picker */
.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.color-picker-input {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.color-picker-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker-input::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

/* Slider Controls */
.slider-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slider-control input[type="range"] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--customization-slider-track, rgba(255, 255, 255, 0.1));
    -webkit-appearance: none;
}

.slider-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--profile-accent, #7d19ff);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.slider-value {
    min-width: 40px;
    text-align: right;
    font-family: monospace;
    color: var(--customization-text-secondary, #a0a0a0);
}

/* CSS Editor */
.css-editor {
    background: var(--customization-input-bg, #0d0d12);
    border: 1px solid var(--customization-border-color, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    overflow: hidden;
}

.css-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--customization-header-bg, rgba(255, 255, 255, 0.03));
    border-bottom: 1px solid var(--customization-border-color, rgba(255, 255, 255, 0.1));
}

.css-editor-header span {
    font-size: 12px;
    color: var(--customization-text-muted, #666);
}

.css-editor-textarea {
    width: 100%;
    min-height: 200px;
    padding: 16px;
    background: transparent;
    border: none;
    color: var(--customization-text-color, #e0e0e0);
    font-family: 'Fira Code', 'Source Code Pro', monospace;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}

.css-editor-textarea:focus {
    outline: none;
}

.css-editor-footer {
    padding: 8px 16px;
    background: var(--customization-header-bg, rgba(255, 255, 255, 0.02));
    border-top: 1px solid var(--customization-border-color, rgba(255, 255, 255, 0.1));
    font-size: 11px;
    color: var(--customization-text-muted, #666);
}

/* Font Preview */
.font-preview {
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-top: 12px;
}

.font-preview-heading {
    font-size: 20px;
    margin-bottom: 8px;
}

.font-preview-body {
    color: #a0a0a0;
}

/* Effect Toggles */
.effect-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--customization-toggle-bg, rgba(255, 255, 255, 0.03));
    border-radius: 8px;
    margin-bottom: 8px;
}

.effect-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--customization-text-color, inherit);
}

.effect-toggle-label i {
    color: var(--profile-accent, #7d19ff);
    width: 20px;
}

/* Pattern Grid */
.pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px;
}

.pattern-item {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.pattern-item:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.pattern-item.active {
    border-color: var(--profile-accent);
}

/* Background Type Selector */
.bg-type-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bg-type-btn {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--customization-btn-border, rgba(255, 255, 255, 0.2));
    background: transparent;
    color: var(--customization-text-secondary, #a0a0a0);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bg-type-btn:hover {
    border-color: var(--customization-btn-border-hover, rgba(255, 255, 255, 0.4));
    color: var(--customization-text-color, #fff);
}

.bg-type-btn.active {
    background: var(--profile-accent, #7d19ff);
    border-color: var(--profile-accent, #7d19ff);
    color: #fff;
}

.bg-type-btn.bg-type-locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #666;
}

.bg-type-btn.bg-type-locked:hover {
    border-color: rgba(255, 255, 255, 0.1);
    color: #666;
    background: rgba(255, 255, 255, 0.05);
}

/* Layout Options */
.layout-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.layout-option {
    padding: 16px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.layout-option:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.layout-option.active {
    border-color: var(--profile-accent);
    background: rgba(125, 25, 255, 0.1);
}

.layout-option-icon {
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--profile-accent);
}

.layout-option-name {
    font-size: 13px;
    font-weight: 500;
}

/* ================================================================
   END OF PROFILE CUSTOMIZATION SYSTEM
   ================================================================ */

/* Custom styling for dark theme tabs */
.nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.nav-tabs .nav-link {
    color: #8a8a9a;
    background-color: transparent;
    border: 1px solid transparent;
    margin-bottom: -1px;
}

.nav-tabs .nav-link:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-tabs .nav-link.active {
    color: #fff;
    background-color: rgba(125, 25, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) transparent !important;
    font-weight: 500;
}

/* Custom styling for Steam username input */
#parmanentsteamUsername {
    border: none;
    background-color: transparent !important;
    padding: 8px 12px;
    border-radius: 4px;
    color: #fff;
}

#parmanentsteamUsername:hover {
    background-color: transparent !important;
}

#parmanentsteamUsername:focus {
    background-color: transparent !important;
    outline: none;
    box-shadow: none;
}

/* Custom styling for the input group to avoid any Bootstrap overrides */
.input-group .form-control.bg-dark.text-white {
    background-color: transparent !important;
    border: none;
}

/* Custom styling for the Steam save button */
#saveSteamBtn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    background-color: transparent;
}

#saveSteamBtn:hover {
    background-color: rgba(125, 25, 255, 0.1);
}

/* Make sure tab content has dark background */
.tab-content {
    background-color: transparent;
    padding: 20px 0;
}

.tab-pane {
    color: #fff;
    min-height: 300px;  /* Ensure minimum height for content */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tab-pane .text-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tab-pane .table-responsive {
    width: 100%;
}

/* Style for badges in tabs */
.nav-tabs .nav-link .badge {
    font-size: 0.75em;
    padding: 0.25em 0.6em;
}

/* Add this to your existing styles */
.table td {
    vertical-align: middle;
}

/* Server List Styling */
.server-list {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.75rem !important;
    padding-top: 0.5rem;
}

.server-item {
    font-size: 0.85rem;
    padding: 0.25rem 0;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.server-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.server-item small {
    max-width: 140px;
}

/* SweetAlert2 Dark Theme Customization */
.swal2-popup {
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.swal2-title, .swal2-html-container {
    color: #fff !important;
}
.swal2-confirm {
    background-color: #0d6efd !important;
}

.stat-card {
    background: rgba(255, 255, 255, 0.05);
    transition: transform 0.2s;
    height: 100%;
}

.stat-card:hover {
    transform: translateY(0px);
}

.stat-icon {
    font-size: 1.5rem;
    opacity: 0.7;
}

.calendar-wrapper {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 1rem;
}

.calendar-header {
    margin-bottom: 1rem;
}

.weekday {
    width: 2rem;
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
}

.calendar-body {
    border-radius: 4px;
    overflow: hidden;
}

.calendar-body > div {
    padding: 1px 0;
    margin-bottom: 0.25rem;
}

.calendar-day {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 1px;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    position: relative;
    color: #fff;
    cursor: pointer;
}

/* Empty days */
.calendar-day:empty {
    background: transparent;
    cursor: default;
}

/* Future days */
.calendar-day.future {
    color: #6c757d;
    opacity: 0.5;
    cursor: default;
}

/* Active day styling - remove debug border */
.calendar-wrapper .calendar-body .calendar-day.active {
    background-color: #6b46c1 !important;
    color: white !important;
    font-weight: bold !important;
    box-shadow: 0 0 0 2px rgba(125, 25, 255, 0.3) !important;
    opacity: 1 !important;
    z-index: 1;
}

/* Add calendar legend styles */
.calendar-legend {
    font-size: 0.75rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.legend-sample {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.legend-sample.active {
    background-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(125, 25, 255, 0.3) !important;
}

.legend-sample.today {
    border: 2px solid #ffc107;
    background-color: transparent;
}

/* Today styling */
.calendar-day.today {
    border: 2px solid #ffc107;
}

/* Today + Active combination */
.calendar-day.today.active {
    background-color: #6b46c1;
    border: 2px solid #ffc107;
}

/* Hover effects */
.calendar-day.active:hover {
    transform: scale(1.1);
    background-color: #805ad5;
    box-shadow: 0 0 12px rgba(107, 70, 193, 0.5);
}

/* Popover styling */
.popover {
    background-color: #2d2d2d;
    border: 1px solid #444;
    max-width: 200px;
}

.popover-body {
    color: #fff;
    padding: 0.5rem;
    font-size: 0.8rem;
}

.quest-info {
    font-size: 0.9rem;
    line-height: 1.4;
}

.quest-info div {
    margin: 4px 0;
}

/* Added styling for selected calendar day */
.calendar-day.selected {
    background-color: #6b46c1;
    border: 2px solid #ffc107;
    box-shadow: 0 0 12px rgba(107, 70, 193, 0.8);
}

/* Add responsive styles for 768px and below */
@media (max-width: 768px) {
    /* Stats Grid */
    .stat-card {
        margin-bottom: 0.5rem;
        padding: 0.75rem !important;
        min-height: 70px !important;
    }

    .stat-card h5 {
        font-size: 1.1rem;
        margin-bottom: 0;
    }

    .stat-card .text-muted.small {
        font-size: 0.7rem;
    }

    .stat-card i {
        font-size: 1rem;
    }

    .stat-card small {
        font-size: 0.7rem;
    }

    .stats-grid .col-md-3 {
        padding: 0 0.25rem;
    }

    /* Calendar adjustments */
    .calendar-wrapper {
        padding: 1rem;
        margin: 0 -0.5rem;
    }

    .calendar-day {
        width: 2rem;
        height: 2rem;
        font-size: 0.8rem;
        margin: 1px;
    }

    .weekday {
        width: 2rem;
        font-size: 0.7rem;
    }

    /* Tabs and navigation */
    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    /* Tables */
    .table-responsive {
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    .table td, .table th {
        padding: 0.75rem 0.5rem;
        font-size: 0.9rem;
    }

    /* Buttons in tables */
    .table .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Activity Overview card */
    .activity-overview .row {
        margin: 0 -0.5rem;
    }

    .activity-overview .col-md-3 {
        padding: 0 0.5rem;
    }

    /* Calendar legend */
    .calendar-header .d-flex.gap-3 {
        gap: 1rem !important;
    }

    /* Profile Header - For Hire Tags Mobile Styles */
    #profileHeaderForHireTags {
        margin-top: 10px !important;
        width: 100%;
    }

    #profileHeaderForHireTags > div {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100%;
    }

    #profileHeaderForHireTags span:first-child {
        font-size: 0.7rem !important;
        margin-bottom: 2px;
        text-align: center;
        width: 100%;
    }

    #profileHeaderForHireTagsList {
        width: 100% !important;
        gap: 6px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    #profileHeaderForHireTagsList .badge {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
        white-space: nowrap;
        display: inline-block;
        width: fit-content !important;
        max-width: 100%;
    }

    /* Profile Header - For Hire Prompt Mobile Styles */
    .profile-header-for-hire-prompt {
        margin-top: 10px !important;
        padding: 10px !important;
        width: 100%;
    }

    .profile-header-for-hire-prompt > div:first-child {
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center;
    }

    .profile-header-for-hire-prompt span {
        font-size: 0.8rem !important;
        line-height: 1.4;
        text-align: center;
    }

    .profile-header-for-hire-prompt small {
        font-size: 0.65rem !important;
        margin-top: 6px !important;
        text-align: center;
        display: block;
    }

    .legend-sample {
        width: 12px;
        height: 12px;
    }

    /* Modal adjustments */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body {
        padding: 1rem;
    }

    /* Improve spacing in stats cards */
    .stat-icon {
        font-size: 1.25rem;
    }

    .stat-card h3 {
        font-size: 1.5rem;
    }

    .stat-card h6 {
        font-size: 0.85rem;
    }

    /* Improve readability of small text */
    small.text-muted {
        font-size: 0.75rem;
    }

    
    

    
}

/* Add the below rule as a stronger override */

/* Removed conflicting navbar rule that was preventing hamburger menu from working */

/* Add styles for the stats grid container */
.stats-grid {
    display: flex;
    margin: 0 -0.5rem;  /* Compensate for the padding in columns */
}

.stats-grid .col-md-3 {
    padding: 0 0.5rem;  /* Add some spacing between cards */
    display: flex;      /* Enable flex container */
}

.stats-grid .stat-card {
    width: 100%;        /* Ensure card takes full width */
    min-height: 90px;   /* Set minimum height for consistency */
    display: flex;      /* Enable flex for content */
    align-items: center; /* Center content vertically */
}

.stat-card .d-flex {
    width: 100%;        /* Ensure inner content takes full width */
}

/* Make the calendar navigation buttons smaller */
.calendar-header .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Adjust the month text size */
.calendar-header h6 {
    font-size: 0.9rem;
}

/* Add these new styles */
.time-chart-container {
    position: relative;
    width: 100%;
    height: 300px !important;
    margin: 0.5rem 0;
}

canvas#timeChart {
    width: 100% !important;
    height: 100% !important;
}

.points-chart-container {
    position: relative;
    width: 100%;
    height: 300px !important;
    margin-bottom: 1rem;
}

/* Make charts responsive */
canvas {
    max-width: 100%;
    height: 100% !important;
}

@media (max-width: 768px) {
    .time-chart-container {
        height: 250px !important;
    }
    .points-chart-container {
        height: 250px !important;
    }
}

/* Add this to your style section */
.table-responsive.px-0 {
    margin: 0;
    padding: 0;
}

.table-responsive.px-0 .table {
    margin-bottom: 0;
}

.table-responsive.px-0 td,
.table-responsive.px-0 th {
    white-space: normal;
    min-width: auto;
}

.border-warning {
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
}

.bg-warning.bg-opacity-10 {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

/* Profile Header Card - Match Activity Overview styling */
.container-fluid.py-3 {
    padding: 0 !important; /* Remove the container padding */
    margin-bottom: 1rem !important; /* Add consistent spacing */
}

.container-fluid.py-3 .card {
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    cursor: default !important;
    background-color: #212529 !important;
    margin: 0 !important;
    border: none !important; /* Remove the border */
}
/* Activity Overview Section - Remove border */
.row.mt-3 .card {
    border: none !important; /* Remove the border */
}

.container-fluid.py-3 .card:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: #212529 !important;
}

.container-fluid.py-3 .row {
    margin: 0 !important; /* Remove row margins */
}

.container-fluid.py-3 .col-12 {
    padding: 0 !important; /* Remove column padding */
}


.container-fluid.py-3 .card-body {
    padding: 1rem !important; /* Match the padding of Activity Overview */
}

/* Ensure profile image maintains its size */
.container-fluid.py-3 .card img.rounded-circle {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
}

/* Make the text size consistent */
.container-fluid.py-3 .card h5 {
    font-size: 1.1rem !important;
    margin-bottom: 0.25rem !important;
}

.container-fluid.py-3 .card small {
    font-size: 0.875rem !important;
    opacity: 0.7 !important;
}

/* Remove border from all dark cards */
.card.bg-dark {
    border: none !important;
}

/* Add these color variables at the top of the style section */
:root {
    --primary-color: #7d19ff;
    --primary-color-light: rgba(125, 25, 255, 0.1);
    --secondary-color: #F4CA81;
    --secondary-color-light: rgba(244, 202, 129, 0.1);
}

/* Update calendar active day color */
.calendar-wrapper .calendar-body .calendar-day.active {
    background-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(125, 25, 255, 0.3) !important;
}

/* Update calendar hover effect */
.calendar-day.active:hover {
    background-color: var(--primary-color) !important;
    box-shadow: 0 0 12px rgba(125, 25, 255, 0.5) !important;
}

/* Update today's date border color */
.calendar-day.today {
    border: 2px solid var(--secondary-color) !important;
}

/* Update legend colors */
.legend-sample.active {
    background-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(125, 25, 255, 0.3) !important;
}

.legend-sample.today {
    border: 2px solid var(--secondary-color) !important;
}

/* Update icon colors */
.text-warning {
    color: var(--secondary-color) !important;
}

.text-info, .text-primary {
    color: var(--primary-color) !important;
}

/* Update button colors */
.btn-primary, .btn-discord {
    background: linear-gradient(90deg, #7d19ff, #9695ff);
    border: none;
    color: #fff !important;
}
.btn-primary:hover, .btn-discord:hover {
    background: linear-gradient(90deg, #9695ff, #7d19ff);
    color: #fff !important;
}

.btn-outline-primary {
    border: 2px solid var(--profile-accent, #7d19ff);
    color: var(--profile-accent, #7d19ff);
    background: transparent;
    transition: background 0.2s, color 0.2s;
}
.btn-outline-primary:hover {
    background: color-mix(in srgb, var(--profile-accent, #7d19ff) 8%, white);
    color: var(--profile-accent, #7d19ff);
    border-color: var(--profile-accent, #7d19ff);
}

.server-owner-btn {
    min-width: 260px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    font-size: 1.15rem;
    padding: 0.85rem 1.5rem;
    box-sizing: border-box;
    border-radius: 12px;
}

.btn-primary .fa-robot,
.btn-discord .fa-discord {
    color: #F4CA81;
}

.btn-outline-primary .fa-rocket {
    color: #7d19ff;
}

/* Server link styling */
.text-white.text-decoration-none:hover {
    opacity: 0.8;
}

.text-white.text-decoration-none:hover .fa-external-link-alt {
    opacity: 1;
}

.fa-external-link-alt {
    font-size: 0.75em;
    opacity: 0.5;
    transition: opacity 0.2s;
}

/* Mobile-friendly rewards styling */
@media (max-width: 480px) {
    /* Make table non-scrollable */
    .table-responsive {
        overflow-x: visible;
    }


    .row>* {
        padding: 0 !important;
    }
    
    .container {
        padding: 0 !important;
    }

    /* Hide less important columns on mobile */
    .table-responsive .table th:nth-child(3),  /* Reason column */
    .table-responsive .table td:nth-child(3),
    .table-responsive .table th:nth-child(4),  /* Date/Delivered column */
    .table-responsive .table td:nth-child(4) {
        display: none;
    }

    /* Make the table more compact */
    .table-responsive .table td,
    .table-responsive .table th {
        padding: 0.5rem 0.25rem;
        font-size: 0.85rem;
        white-space: normal;
        vertical-align: middle;
    }

    /* Set specific column widths */
    .table-responsive .table td:first-child,  /* Server column */
    .table-responsive .table th:first-child {
        width: 25%;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
    }
    
    .table-responsive .table td:nth-child(2),  /* Reward column */
    .table-responsive .table th:nth-child(2) {
        width: 50%;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Status/Actions column */
    .table-responsive .table td:last-child,
    .table-responsive .table th:last-child {
        width: 35%;
        text-align: center;
        padding: 0.5rem 0.25rem;
    }

    /* Style for deliverable code in Past Rewards */
    .table-responsive .table td .d-flex.align-items-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.25rem;
        margin-bottom: 0.25rem;
    }

    /* Style the code and copy button container */
    .table-responsive .table td code {
        font-size: 0.7rem;
        max-width: 100%;
        overflow: hidden;
        white-space: normal;
        word-wrap: break-word;
        display: inline-block;
        margin: 0;
        text-align: center;
        line-height: 1.2;
    }

    /* Style the copy button */
    .table-responsive .table td .btn-outline-primary {
        padding: 0.15rem 0.4rem;
        font-size: 0.7rem;
        height: fit-content;
        margin-top: 0.25rem;
    }

    /* Style the expiration text */
    .table-responsive .table td small.text-warning {
        display: block;
        text-align: center;
        font-size: 0.65rem;
        width: 100%;
    }

    /* Adjust copy button alignment */
    .table-responsive .table td .d-flex.align-items-center {
        flex-direction: column;
    }

    .table-responsive .table td .btn-sm {
        margin-top: 0.25rem;
    }

    /* Make buttons smaller on mobile */
    .table-responsive .table .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* Ensure table cells have proper padding */
    .table-responsive .table td {
        padding: 0.5rem 0.25rem;
        line-height: 1.2;
    }

    /* Adjust tab navigation */
    .nav-tabs .nav-link {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    /* Make modals take up more screen space */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-body {
        padding: 1rem;
    }

    /* Adjust alert and info text size */
    .alert {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    /* Make reward status badges more visible */
    .badge {
        font-size: 0.7rem;
        padding: 0.25em 0.5em;
    }
}

/* Sidebar Styles */
.sidebar-container {
    padding: 1.5rem;
}

/* Prevent sidebar from breaking Bootstrap grid on smaller desktops */
@media (min-width: 992px) and (max-width: 1400px) {
    .sidebar-container {
        padding: 0.75rem;
    }
    
    .sidebar-box {
        min-width: 0;
    }
    
    .sidebar-content {
        padding: 0.75rem;
    }
    
    .sidebar-header {
        padding: 0.75rem;
    }
}

.sidebar-box {
    background: linear-gradient(165deg, #18181f 0%, #1e1e26 100%);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}


.sidebar-header {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: #f0f0f5;
    padding: 1.25rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-content {
    padding: 1.25rem;
}

/* Navigation Styles */
.nav-pills .nav-link {
    color: rgba(255, 255, 255, 0.7);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.25s ease;
    font-weight: 500;
}

.nav-pills .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    transform: translateX(4px);
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #7d19ff 0%, #9333ea 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(125, 25, 255, 0.35);
}

/* Support Box Styles */
.support-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(135deg, #7d19ff 0%, #F4CA81 100%);
}

.support-icon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.bot-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(125, 25, 255, 0.1), rgba(125, 25, 255, 0.2));
}

.bot-icon {
    font-size: 2.5rem;
    background: linear-gradient(145deg, #7d19ff, #6a14d9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Button Styles */
.btn-discord {
    background: linear-gradient(145deg, #7d19ff, #6a14d9);
    color: white;
    border: none;
    padding: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-discord:hover {
    background: linear-gradient(145deg, #6a14d9, #5710b3);
    color: white;
    transform: translateY(-2px);
}

.btn-primary {
    background: linear-gradient(90deg, #7d19ff, #9695ff);
    border: none;
    color: #fff !important;
    /* Remove any custom width constraints that are breaking the button */
    min-width: auto !important;
    width: auto !important;
}

.btn-primary:hover {
    background: linear-gradient(145deg, #6a14d9, #5710b3);
    transform: translateY(-2px);
}

/* Mobile Responsive Styles */
@media (max-width: 991.98px) {
    .sidebar-container {
        padding: 1rem;
    }
    
    .sidebar-box {
        margin-bottom: 1rem;
    }
    
    .nav-pills {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0.5rem 0;
        margin: -0.5rem -1rem;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-pills .nav-item {
        flex: 0 0 auto;
        margin-right: 0.75rem;
        margin-bottom: 0 !important;
    }
    
    .nav-pills .nav-link {
        white-space: nowrap;
        padding: 0.5rem 1rem;
    }
    
    .nav-pills .nav-link:hover {
        transform: translateY(-2px);
    }
}

@media (max-width: 768px) {
    .sidebar-container {
        display: none !important; /* Force hide sidebar on mobile */
    }
    
    .main-content {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0;
    }
    
    .mobile-nav {
        display: block !important; /* Ensure mobile nav is visible */
    }

    /* Optimize for mobile view */
    .container-fluid {
        padding: 0 !important;
    }
    
    .row {
        margin: 0 !important;
    }
    
    .col-12 {
        padding: 0 !important;
    }
    
    .card {
        border-radius: 0 !important;
        margin-bottom: 1rem !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
}

/* Connection Styles */
.connection-box {
    background-color: rgba(22, 22, 29, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
    padding: 0.75rem !important;
    border-radius: 8px;
}

.connection-box .input-group {
    background: transparent !important;
    border: none !important;
}

.connection-box .input-group-text {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.connection-box .form-control {
    background: transparent !important;
    border: none !important;
    padding-left: 0.5rem !important;
    height: auto !important;
    font-size: 1rem !important;
    color: #fff !important;
}

.connection-box .btn {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
}

/* Card header consistency */
.card-header h5.card-title {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #6c757d !important;
}

.connection-icon {
    font-size: 1.5rem;
    width: 24px;
    text-align: center;
    color: var(--profile-accent, #7d19ff);
}

.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-primary {
    color: var(--profile-accent, #7d19ff);
    border-color: var(--profile-accent, #7d19ff);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--profile-accent, #7d19ff);
    border-color: var(--profile-accent, #7d19ff);
}

/* Connection section spacing */
.connection-section:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Responsive adjustments for connections */
@media (max-width: 768px) {
    .connection-box {
        padding: 0.75rem !important;
    }
    
    .connection-icon {
        font-size: 1.25rem;
        width: 20px;
    }
    
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Add these styles to your existing style section */
.nav-link {
    cursor: pointer;
}

.section-content {
    animation: fadeIn 0.3s ease-in-out;
}

/* Class-based visibility control for dashboard sections */
.dashboard-section-hidden {
    display: none !important;
}

/* Override for navbar interactions */
body.navbar-clicked .section-content:not(.dashboard-section-hidden) {
    display: block !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
    /* Sidebar Adjustments */
    .sidebar-container {
        display: none !important;
    }

    /* Main Content Adjustments */
    .main-content {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* Mobile nav container */
    .container-fluid.d-lg-none {
        margin-top: 0 !important;
        padding: 0 !important;
    }
    
    .container-fluid.d-lg-none .row,
    .container-fluid.d-lg-none .col-12 {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .mobile-nav {
        display: block !important;
        position: relative !important;
        margin: 0 0 1rem 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
    }
    
    .mobile-nav .dropdown {
        position: static;
    }
    
    .mobile-nav .dropdown-menu {
        width: 100% !important;
        border-radius: 0 0 4px 4px !important;
        margin: 0 !important;
        padding: 0.5rem !important;
    }
    
    .mobile-nav .dropdown-toggle {
        border-radius: 0 !important;
    }

    /* Stats Grid - Stack in 2x2 on mobile */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin: 0;
    }

    .stats-grid .col-md-3 {
        width: 100%;
        padding: 0;
    }

    /* Calendar and Points Distribution */
    .calendar-wrapper {
        margin: 0;
        padding: 0.5rem;
    }

    .points-chart-container {
        height: 200px !important;
    }

    /* Tables Responsiveness */
    .table-responsive {
        margin: 0;
        border: none;
    }

    .table th, .table td {
        padding: 0.5rem;
    }

    /* Connections Section */
    .connection-box {
        padding: 0.75rem !important;
    }

    .connection-icon {
        font-size: 1.25rem;
        width: 20px;
    }

    /* Modal Improvements */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-body {
        padding: 1rem;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    /* Navigation Tabs */
    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto;
    }

    .container-fluid.py-3 {
        margin-top: 3rem !important;
    }
}

/* Additional Mobile Optimizations */
@media (max-width: 480px) {
    /* Further optimize for smaller screens */
    .stats-grid {
        grid-template-columns: 1fr;  /* Stack all stats vertically */
    }

    .stat-card {
        min-height: 60px;
    }

    /* Optimize tables for very small screens */
    .table-responsive .table {
        display: block;
    }

    .table-responsive .table thead {
        display: none;  /* Hide table headers */
    }

    .table-responsive .table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        padding: 0.5rem;
    }

    .table-responsive .table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem 0;
        border: none;
    }

    .table-responsive .table td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 1rem;
    }

    /* Optimize modals for small screens */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .modal-content {
        border-radius: 0;
        min-height: 100%;
    }

    /* Optimize buttons for touch */
    .btn {
        min-height: 44px;  /* Minimum touch target size */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Improve form inputs for touch */
    input, select, textarea {
        font-size: 16px !important;  /* Prevent iOS zoom on focus */
    }

    /* Bottom Navigation Bar */
    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #16161d;
        padding: 0.5rem;
        z-index: 100;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
    }

    .mobile-nav .nav {
        display: flex;
        justify-content: space-around;
    }

    .mobile-nav .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .mobile-nav .nav-link i {
        font-size: 1.2rem;
        margin-bottom: 0.25rem;
    }

    /* Add padding to main content to account for bottom nav */
    .main-content {
        padding-bottom: 4rem;
    }
}

/* Dark Mode Optimizations */
@media (prefers-color-scheme: dark) {
    .modal-content {
        background-color: #16161d;
    }

    .table-responsive .table tr {
        background-color: #1e1e26;
    }

    .mobile-nav {
        background-color: #16161d;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* Loading States and Animations */
.skeleton-loading {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.skeleton-loading::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Touch-friendly Improvements */
@media (hover: none) {
    .nav-link, .btn {
        -webkit-tap-highlight-color: transparent;
    }


    .calendar-day.active:active {
        transform: scale(0.95);
    }
}

/* Add these styles for the mobile dropdown navigation */
.mobile-nav {
    position: relative;
    top: 0;
    padding: 1rem;
    background: linear-gradient(165deg, #18181f 0%, #1e1e26 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin: 0 0 1rem 0;
    width: 100%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.mobile-nav .dropdown-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.875rem 1rem;
    font-size: 1rem;
    color: #f0f0f5 !important;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.mobile-nav .dropdown-toggle:hover {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    border-color: rgba(255, 255, 255, 0.1);
}

.mobile-nav .dropdown-toggle i {
    color: inherit !important;
}

.mobile-nav .dropdown-toggle::after {
    display: none !important;
}

.mobile-nav .dropdown-toggle,
.mobile-nav .dropdown-toggle:focus,
.mobile-nav .dropdown-toggle:active {
    pointer-events: auto !important;
}

.mobile-nav .dropdown-menu {
    position: absolute;
    width: calc(100% - 2rem) !important;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1030;
    transform: none !important;
    inset: auto !important;
    top: 100% !important;
    left: 1rem !important;
    right: 1rem !important;
    margin-top: 0.5rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    display: none;
    background: linear-gradient(165deg, #18181f 0%, #1e1e26 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.5rem;
    border-radius: 8px;
}

.mobile-nav .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.mobile-nav .dropdown-item {
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
    transition: all 0.25s ease;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 8px;
    font-weight: 500;
}

.mobile-nav .dropdown-item:last-child {
    margin-bottom: 0;
}

.mobile-nav .dropdown-item:hover, 
.mobile-nav .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

.mobile-nav .dropdown-item.active {
    background: linear-gradient(135deg, #7d19ff 0%, #9333ea 100%) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(125, 25, 255, 0.35);
}

.mobile-nav i {
    width: 20px;
    text-align: center;
    color: inherit !important;
}

/* Theme-aware mobile navigation styles */
.profile-theme-cyberpunk .mobile-nav {
    background: linear-gradient(165deg, #0a0a0f 0%, #1a0033 100%);
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}

.profile-theme-cyberpunk .mobile-nav .dropdown-toggle {
    background: linear-gradient(165deg, rgba(0, 255, 255, 0.08) 0%, rgba(0, 255, 255, 0.04) 100%) !important;
    border-color: rgba(0, 255, 255, 0.3);
    color: #00ffff !important;
}

.profile-theme-cyberpunk .mobile-nav .dropdown-menu {
    background: linear-gradient(165deg, #0a0a0f 0%, #1a0033 100%);
    border-color: rgba(0, 255, 255, 0.2);
}

.profile-theme-cyberpunk .mobile-nav .dropdown-item {
    color: rgba(0, 255, 255, 0.8) !important;
}

.profile-theme-cyberpunk .mobile-nav .dropdown-item:hover {
    background: rgba(0, 255, 255, 0.1) !important;
    color: #00ffff !important;
}

.profile-theme-cyberpunk .mobile-nav .dropdown-item.active {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.3) 0%, rgba(255, 0, 255, 0.3) 100%) !important;
    color: #00ffff !important;
    box-shadow: 0 4px 16px rgba(0, 255, 255, 0.4);
}

.profile-theme-retrowave .mobile-nav {
    background: linear-gradient(165deg, #1a0033 0%, #2d0055 100%);
    border-bottom: 1px solid rgba(255, 217, 61, 0.3);
}

.profile-theme-retrowave .mobile-nav .dropdown-toggle {
    background: linear-gradient(165deg, rgba(255, 217, 61, 0.08) 0%, rgba(255, 105, 180, 0.08) 100%) !important;
    border-color: rgba(255, 217, 61, 0.3);
    color: #ffd93d !important;
}

.profile-theme-retrowave .mobile-nav .dropdown-menu {
    background: linear-gradient(165deg, #1a0033 0%, #2d0055 100%);
    border-color: rgba(255, 217, 61, 0.3);
}

.profile-theme-retrowave .mobile-nav .dropdown-item {
    color: rgba(255, 217, 61, 0.9) !important;
}

.profile-theme-retrowave .mobile-nav .dropdown-item:hover {
    background: rgba(255, 217, 61, 0.15) !important;
    color: #ffd93d !important;
}

.profile-theme-retrowave .mobile-nav .dropdown-item.active {
    background: linear-gradient(135deg, #ffd93d 0%, #ff69b4 100%) !important;
    color: #1a0033 !important;
    box-shadow: 0 4px 16px rgba(255, 217, 61, 0.5);
}

.profile-theme-midnight .mobile-nav {
    background: linear-gradient(165deg, #0f1419 0%, #1a1f2e 100%);
    border-bottom: 1px solid rgba(72, 191, 227, 0.2);
}

.profile-theme-midnight .mobile-nav .dropdown-toggle {
    background: linear-gradient(165deg, rgba(72, 191, 227, 0.08) 0%, rgba(72, 191, 227, 0.04) 100%) !important;
    border-color: rgba(72, 191, 227, 0.3);
    color: #48bfe3 !important;
}

.profile-theme-midnight .mobile-nav .dropdown-menu {
    background: linear-gradient(165deg, #0f1419 0%, #1a1f2e 100%);
    border-color: rgba(72, 191, 227, 0.2);
}

.profile-theme-midnight .mobile-nav .dropdown-item {
    color: rgba(72, 191, 227, 0.8) !important;
}

.profile-theme-midnight .mobile-nav .dropdown-item:hover {
    background: rgba(72, 191, 227, 0.1) !important;
    color: #48bfe3 !important;
}

.profile-theme-midnight .mobile-nav .dropdown-item.active {
    background: linear-gradient(135deg, #48bfe3 0%, #5390d9 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(72, 191, 227, 0.4);
}

.profile-theme-forest .mobile-nav {
    background: linear-gradient(165deg, #1a2e1a 0%, #2d4a2d 100%);
    border-bottom: 1px solid rgba(139, 195, 74, 0.3);
}

.profile-theme-forest .mobile-nav .dropdown-toggle {
    background: linear-gradient(165deg, rgba(139, 195, 74, 0.08) 0%, rgba(139, 195, 74, 0.04) 100%) !important;
    border-color: rgba(139, 195, 74, 0.3);
    color: #8bc34a !important;
}

.profile-theme-forest .mobile-nav .dropdown-menu {
    background: linear-gradient(165deg, #1a2e1a 0%, #2d4a2d 100%);
    border-color: rgba(139, 195, 74, 0.3);
}

.profile-theme-forest .mobile-nav .dropdown-item {
    color: rgba(139, 195, 74, 0.9) !important;
}

.profile-theme-forest .mobile-nav .dropdown-item:hover {
    background: rgba(139, 195, 74, 0.15) !important;
    color: #8bc34a !important;
}

.profile-theme-forest .mobile-nav .dropdown-item.active {
    background: linear-gradient(135deg, #8bc34a 0%, #689f38 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(139, 195, 74, 0.4);
}

.profile-theme-neon-glow .mobile-nav {
    background: linear-gradient(165deg, #0a0a0a 0%, #1a1a1a 100%);
    border-bottom: 2px solid rgba(255, 0, 255, 0.4);
}

.profile-theme-neon-glow .mobile-nav .dropdown-toggle {
    background: linear-gradient(165deg, rgba(255, 0, 255, 0.1) 0%, rgba(0, 255, 255, 0.1) 100%) !important;
    border: 2px solid rgba(255, 0, 255, 0.5);
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
}

.profile-theme-neon-glow .mobile-nav .dropdown-menu {
    background: linear-gradient(165deg, #0a0a0a 0%, #1a1a1a 100%);
    border: 2px solid rgba(255, 0, 255, 0.4);
}

.profile-theme-neon-glow .mobile-nav .dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important;
}

.profile-theme-neon-glow .mobile-nav .dropdown-item:hover {
    background: rgba(255, 0, 255, 0.15) !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
}

.profile-theme-neon-glow .mobile-nav .dropdown-item.active {
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.4) 0%, rgba(0, 255, 255, 0.4) 100%) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.6), 0 0 40px rgba(0, 255, 255, 0.4);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.profile-theme-minimal-light .mobile-nav {
    background: linear-gradient(165deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.profile-theme-minimal-light .mobile-nav .dropdown-toggle {
    background: linear-gradient(165deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-color: #dee2e6;
    color: #495057 !important;
}

.profile-theme-minimal-light .mobile-nav .dropdown-menu {
    background: #ffffff;
    border-color: #dee2e6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-theme-minimal-light .mobile-nav .dropdown-item {
    color: #495057 !important;
}

.profile-theme-minimal-light .mobile-nav .dropdown-item:hover {
    background: #f8f9fa !important;
    color: #212529 !important;
}

.profile-theme-minimal-light .mobile-nav .dropdown-item.active {
    background: linear-gradient(135deg, #7d19ff 0%, #9333ea 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(125, 25, 255, 0.3);
}

.profile-theme-sakura .mobile-nav {
    background: linear-gradient(165deg, #2d1b1e 0%, #3d2328 100%);
    border-bottom: 1px solid rgba(255, 182, 193, 0.3);
}

.profile-theme-sakura .mobile-nav .dropdown-toggle {
    background: linear-gradient(165deg, rgba(255, 182, 193, 0.08) 0%, rgba(255, 182, 193, 0.04) 100%) !important;
    border-color: rgba(255, 182, 193, 0.3);
    color: #ffb6c1 !important;
}

.profile-theme-sakura .mobile-nav .dropdown-menu {
    background: linear-gradient(165deg, #2d1b1e 0%, #3d2328 100%);
    border-color: rgba(255, 182, 193, 0.3);
}

.profile-theme-sakura .mobile-nav .dropdown-item {
    color: rgba(255, 182, 193, 0.9) !important;
}

.profile-theme-sakura .mobile-nav .dropdown-item:hover {
    background: rgba(255, 182, 193, 0.15) !important;
    color: #ffb6c1 !important;
}

.profile-theme-sakura .mobile-nav .dropdown-item.active {
    background: linear-gradient(135deg, #ffb6c1 0%, #ff85a2 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(255, 182, 193, 0.5);
}

.profile-theme-golden-hour .mobile-nav {
    background: linear-gradient(165deg, #2d2419 0%, #3d3222 100%);
    border-bottom: 1px solid rgba(201, 166, 107, 0.3);
}

.profile-theme-golden-hour .mobile-nav .dropdown-toggle {
    background: linear-gradient(165deg, rgba(201, 166, 107, 0.08) 0%, rgba(201, 166, 107, 0.04) 100%) !important;
    border-color: rgba(201, 166, 107, 0.3);
    color: #c9a66b !important;
}

.profile-theme-golden-hour .mobile-nav .dropdown-menu {
    background: linear-gradient(165deg, #2d2419 0%, #3d3222 100%);
    border-color: rgba(201, 166, 107, 0.3);
}

.profile-theme-golden-hour .mobile-nav .dropdown-item {
    color: rgba(201, 166, 107, 0.9) !important;
}

.profile-theme-golden-hour .mobile-nav .dropdown-item:hover {
    background: rgba(201, 166, 107, 0.15) !important;
    color: #c9a66b !important;
}

.profile-theme-golden-hour .mobile-nav .dropdown-item.active {
    background: linear-gradient(135deg, #c9a66b 0%, #d4a574 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(201, 166, 107, 0.5);
}

.profile-theme-matrix .mobile-nav {
    background: linear-gradient(165deg, #000000 0%, #001a00 100%);
    border-bottom: 1px solid rgba(0, 204, 0, 0.3);
}

.profile-theme-matrix .mobile-nav .dropdown-toggle {
    background: linear-gradient(165deg, rgba(0, 204, 0, 0.08) 0%, rgba(0, 204, 0, 0.04) 100%) !important;
    border-color: rgba(0, 204, 0, 0.3);
    color: #00cc00 !important;
    font-family: 'Courier New', monospace;
}

.profile-theme-matrix .mobile-nav .dropdown-menu {
    background: linear-gradient(165deg, #000000 0%, #001a00 100%);
    border-color: rgba(0, 204, 0, 0.3);
}

.profile-theme-matrix .mobile-nav .dropdown-item {
    color: rgba(0, 255, 0, 0.8) !important;
    font-family: 'Courier New', monospace;
}

.profile-theme-matrix .mobile-nav .dropdown-item:hover {
    background: rgba(0, 204, 0, 0.15) !important;
    color: #00ff00 !important;
}

.profile-theme-matrix .mobile-nav .dropdown-item.active {
    background: linear-gradient(135deg, rgba(0, 204, 0, 0.4) 0%, rgba(0, 255, 0, 0.3) 100%) !important;
    color: #00ff00 !important;
    box-shadow: 0 4px 16px rgba(0, 204, 0, 0.6);
}

@media (min-width: 992px) {
    .mobile-nav {
        display: none !important;
    }
}

.verification-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.verification-modal-header h2 {
    font-size: 1.5em;
    margin: 0;
    color: #eee;
}

.verification-modal-step {
    margin-bottom: 20px;
}

.verification-input-group {
    margin-bottom: 15px;
}

.verification-input-group label {
    display: block;
    margin-bottom: 8px;
    color: #ccc;
}

.verification-input-group input {
    width: 100%;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #444;
    border-radius: 5px;
    color: white;
    font-size: 16px;
}

.verification-input-group input:focus {
    border-color: #7D19FF;
    outline: none;
}

.verification-button {
    padding: 10px 15px;
    background-color: #7D19FF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.verification-button:hover {
    background-color: #9541FF;
}

.verification-button:disabled {
    background-color: #555;
    cursor: not-allowed;
}

.verification-secondary-button {
    padding: 10px 15px;
    background-color: transparent;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}

.verification-secondary-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.close-button {
    background: none;
    border: none;
    color: #999;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    transition: color 0.3s;
}

.close-button:hover {
    color: white;
}

.verification-error {
    color: #ff6b6b;
    margin-top: 10px;
    font-size: 14px;
}

#verification-email {
    font-weight: bold;
    color: #7D19FF;
}

#timer-container {
    margin-top: 15px;
    display: none;
    color: #ccc;
    font-size: 14px;
}

#timer {
    font-weight: bold;
    color: white;
}

#resend-code-btn {
    display: none;
    margin-top: 15px;
}

.verification-success {
    text-align: center;
    padding: 20px 0;
}

.success-icon {
    font-size: 60px;
    color: #4cd964;
    margin-bottom: 15px;
}

/* Toast notification for success */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: fadeInUp 0.3s, fadeOut 0.3s 2.7s;
    display: flex;
    align-items: center;
}

.toast-success {
    background-color: #4cd964;
}

.toast span {
    margin-right: 8px;
    font-weight: bold;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Support for mobile devices */
@media (max-width: 600px) {
    .verification-modal-content {
        width: 95%;
        padding: 20px;
    }
    
    .verification-modal-header h2 {
        font-size: 1.2em;
    }
    
    .verification-button, .verification-secondary-button {
        padding: 8px 12px;
        font-size: 14px;
    }
}

.align-items-center {
    width: 100% !important;
}

/* Update Discord icon color */
.discord-icon {
    color: #5865F2;
}

/* Update the existing btn-discord styles to use primary color */
.btn-discord {
    background: linear-gradient(145deg, #7d19ff, #6a14d9);
    color: white;
    border: none;
    padding: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-discord:hover {
    background: linear-gradient(145deg, #6a14d9, #5710b3);
    color: white;
    transform: translateY(-2px);
}

#activity-overview-title {
    margin-left: 1.5rem;
}

#activity-overview-title i {
    margin-right: 0.5rem;
}

#activity-date-range {
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
    margin-right: 1.2rem;
    margin-top: 0.8rem;
}

#activity-overview-title {
    margin-left: 1.2rem;
    margin-top: 0.8rem;
    flex-shrink: 1;
    min-width: 0;
}

.container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Game Vote Styles */
:root {
    --primary-color: #7d19ff;
    --primary-hover: #6614cc;
    --background-dark: #1a1a1a;
    --card-bg: #212529;
    --border-color: rgba(255, 255, 255, 0.1);
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
}

.vote-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.vote-header {
    text-align: center;
    margin-bottom: 2rem;
    animation: fadeIn 0.5s ease-out;
}

.vote-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--profile-accent, #7d19ff), var(--profile-accent-secondary, #b388ff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vote-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.vote-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 2rem;
    align-items: start;
}

.vote-main {
    flex: 1;
}

.vote-grid {
    max-width: 100%;
    margin: 0;
}

.vote-options {
    margin-bottom: 2rem;
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.vote-options.has-voted {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.game-option {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.game-option:hover {
    background: color-mix(in srgb, var(--profile-accent, #7d19ff) 10%, transparent);
    transform: translateX(5px);
}

.game-option.selected {
    background: color-mix(in srgb, var(--profile-accent, #7d19ff) 15%, transparent);
    border-color: var(--profile-accent, #7d19ff);
}

.game-option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--profile-accent, #7d19ff);
    cursor: pointer;
    pointer-events: auto;
    flex-shrink: 0;
}

.game-option label {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    cursor: pointer;
    flex: 1;
    pointer-events: auto;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
}

.custom-input {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    width: 100%;
    color: var(--text-primary);
    font-size: 1.1rem;
    transition: all 0.2s ease;
    margin-top: 0;
}

.custom-input:focus {
    outline: none;
    border-color: var(--profile-accent, #7d19ff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--profile-accent, #7d19ff) 20%, transparent);
    background: color-mix(in srgb, var(--profile-accent, #7d19ff) 10%, transparent);
}

.custom-input::placeholder {
    color: var(--text-secondary);
}

.vote-button {
    background: linear-gradient(135deg, var(--profile-accent, #7d19ff), var(--profile-accent-secondary, #b388ff));
    color: white;
    border: none;
    border-radius: 8px;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    width: 100%;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.vote-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--profile-accent, #7d19ff) 30%, transparent);
}

.vote-button:disabled {
    background: #4a4a4a;
    cursor: not-allowed;
    transform: none;
}

.vote-results {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin-top: 0;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease;
}

.vote-results.hidden {
    display: none;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.results-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    background: linear-gradient(135deg, var(--primary-color), #b388ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.total-votes {
    background: rgba(125, 25, 255, 0.15);
    color: var(--primary-color);
    padding: 0.5rem 1.25rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1rem;
}

.result-item {
    margin-bottom: 1.75rem;
    animation: fadeIn 0.3s ease-out;
}

.result-item:last-child {
    margin-bottom: 0;
}

.result-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.result-label span:first-child {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
}

.result-label span:last-child {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
}

.result-bar-container {
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.result-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #b388ff);
    border-radius: 4px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.result-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    animation: shimmer 2s infinite;
}

.timer-container {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.timer-title {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.timer {
    font-size: 2rem;
    font-weight: 700;
    color: var(--profile-accent, #7d19ff);
    font-family: 'JetBrains Mono', monospace;
    text-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #7d19ff) 20%, transparent);
    margin-bottom: 0.25rem;
}

.share-section {
    position: sticky;
    top: 2rem;
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.75rem;
    border: 1px solid var(--border-color);
    height: fit-content;
    text-align: center;
}

.share-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--profile-accent, #7d19ff), var(--profile-accent-secondary, #b388ff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.share-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
}

.points-info {
    background: color-mix(in srgb, var(--profile-accent, #7d19ff) 10%, transparent);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--profile-accent, #7d19ff) 20%, transparent);
}

.points-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--profile-accent, #7d19ff);
    margin-bottom: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
}

.points-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.share-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0;
}

.share-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    text-align: center;
}

.copy-button {
    background: linear-gradient(135deg, var(--profile-accent, #7d19ff), var(--profile-accent-secondary, #b388ff));
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    width: 100%;
}

.copy-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--profile-accent, #7d19ff) 30%, transparent);
}

.copy-button i {
    font-size: 1.1rem;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@media (max-width: 1024px) {
    .vote-content {
      grid-template-columns: 1fr;
    }

    .share-section {
      position: static;
      margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .vote-container {
      padding: 1rem;
    }

    .vote-title {
      font-size: 2rem;
    }

    .timer {
      font-size: 2rem;
    }

    .share-input-group {
      flex-direction: column;
    }

    .vote-results {
      padding: 1.5rem;
    }

    .results-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }

    .total-votes {
      align-self: flex-start;
    }

}



/* Email Verification Modal Styles */
#emailVerificationModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.verification-modal-content {
    background-color: #212529;
    width: 90%;
    max-width: 500px;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
}

.verification-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.verification-modal-header h2 {
    font-size: 1.5em;
    margin: 0;
    color: #eee;
}

.verification-modal-step {
    margin-bottom: 20px;
}

.verification-input-group {
    margin-bottom: 15px;
}

.verification-input-group label {
    display: block;
    margin-bottom: 8px;
    color: #ccc;
}

.verification-input-group input {
    width: 100%;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #444;
    border-radius: 5px;
    color: white;
    font-size: 16px;
}

.verification-input-group input:focus {
    border-color: #7D19FF;
    outline: none;
}

.verification-button {
    padding: 10px 15px;
    background-color: #7D19FF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.verification-button:hover {
    background-color: #9541FF;
}

.verification-button:disabled {
    background-color: #555;
    cursor: not-allowed;
}

.verification-secondary-button {
    padding: 10px 15px;
    background-color: transparent;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}

.verification-secondary-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.close-button {
    background: none;
    border: none;
    color: #999;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    transition: color 0.3s;
}

.close-button:hover {
    color: white;
}

.verification-error {
    color: #ff6b6b;
    margin-top: 10px;
    font-size: 14px;
}

#verification-email {
    font-weight: bold;
    color: #7D19FF;
}

#timer-container {
    margin-top: 15px;
    color: #ccc;
    font-size: 14px;
}

#timer {
    font-weight: bold;
    color: white;
}

.verification-success {
    text-align: center;
    padding: 20px 0;
}

.success-icon {
    font-size: 60px;
    color: #4cd964;
    margin-bottom: 15px;
}

/* Toast notification for verification success */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    z-index: 2001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: fadeInUp 0.3s, fadeOut 0.3s 2.7s;
    display: flex;
    align-items: center;
}

.toast-success {
    background-color: #4cd964;
}

.toast span {
    margin-right: 8px;
    font-weight: bold;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Support for mobile devices */
@media (max-width: 600px) {
    .verification-modal-content {
        width: 95%;
        padding: 20px;
    }
    
    .verification-modal-header h2 {
        font-size: 1.2em;
    }
    
    .verification-button, .verification-secondary-button {
        padding: 8px 12px;
        font-size: 14px;
    }
}

.danger-zone-actions {
    width: 100%;
    gap: 0.75rem !important;
}
.danger-zone-actions .btn {
    width: 100%;
    font-size: 1rem;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: box-shadow 0.15s, background 0.15s;
    box-shadow: 0 2px 8px rgba(220,53,69,0.04);
}
.danger-zone-actions .btn-outline-danger {
    border-width: 2px;
    background: transparent;
    color: #dc3545;
    font-weight: 500;
}
.danger-zone-actions .btn-outline-danger:hover, .danger-zone-actions .btn-outline-danger:focus {
    background: rgba(220,53,69,0.08);
    color: #dc3545;
    border-color: #dc3545;
    box-shadow: 0 2px 12px rgba(220,53,69,0.10);
}
.danger-zone-actions .btn-danger {
    background: #dc3545;
    color: #fff;
    font-weight: 600;
    border: none;
}
.danger-zone-actions .btn-danger:hover, .danger-zone-actions .btn-danger:focus {
    background: #b52a37;
    color: #fff;
    box-shadow: 0 2px 16px rgba(220,53,69,0.15);
}

@media (max-width: 768px) {
    .danger-zone-actions .btn {
        font-size: 0.98rem;
        padding: 0.7rem 0.8rem;
    }
}

.privacy-info-alert {
    background: rgba(0, 180, 255, 0.10) !important;
    border: 1.5px solid rgba(0, 180, 255, 0.18) !important;
    color: #7de3ff !important;
    border-radius: 12px !important;
    padding: 1.1rem 1.25rem !important;
    font-size: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.privacy-info-alert i.fas.fa-info-circle {
    color: #00cfff !important;
    font-size: 1.3em;
    margin-right: 0.7rem;
}
.privacy-info-alert a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    transition: color 0.15s;
}
.privacy-info-alert a:hover {
    color: #00cfff;
    text-decoration: underline;
}

.get-started-steps {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin: 2.5rem 0 2rem 0;
    flex-wrap: wrap;
}

.get-started-step {
    background: #212530;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 2rem;
    min-width: 260px;
    max-width: 320px;
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.get-started-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(125, 25, 255, 0.12);
}

.get-started-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7d19ff, #4d8bff);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.get-started-step:hover::before {
    opacity: 1;
}

.get-started-step .step-icon {
    background: #2b2540;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 20px rgba(125, 25, 255, 0.15);
    transition: transform 0.3s ease;
}

.get-started-step:hover .step-icon {
    transform: scale(1.05);
}

.get-started-step .step-icon i {
    font-size: 2.2rem;
    color: #4d8bff;
    background: linear-gradient(135deg, #4d8bff, #7d19ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.get-started-step h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
    color: #fff;
    position: relative;
    display: inline-block;
    margin-top: 0;
}

.get-started-step h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #4d8bff, #7d19ff);
    border-radius: 3px;
    opacity: 0.6;
}

.get-started-step p {
    color: #a0a0b0;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.get-started-step .btn-discord {
    background: linear-gradient(135deg, #7d19ff, #4d8bff);
    color: #fff;
    border: none;
    font-weight: 600;
    border-radius: 10px;
    padding: 0.8rem 1.5rem;
    margin-bottom: 0.8rem;
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 5px 15px rgba(125, 25, 255, 0.2);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.get-started-step .btn-discord:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(125, 25, 255, 0.3);
}

.get-started-step .btn-discord::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(30deg);
    transition: transform 0.5s ease;
}

.get-started-step .btn-discord:hover::after {
    transform: rotate(30deg) translate(10%, 10%);
}

.get-started-step .btn-outline {
    background: transparent;
    border: 2px solid rgba(125, 25, 255, 0.3);
    color: #fff;
    border-radius: 10px;
    padding: 0.8rem 1.5rem;
    width: 100%;
    font-weight: 500;
    transition: all 0.2s ease;
}

.get-started-step .btn-outline:hover {
    border-color: #7d19ff;
    color: #7d19ff;
    background: rgba(125, 25, 255, 0.05);
}

.get-started-step .bot-badge {
    background: #3a3a45;
    color: #fff;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    margin-right: 0.5rem;
    display: inline-block;
}

.get-started-step code {
    background: #2a2a35;
    color: #ff4fa3;
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 1.1rem;
    font-weight: 600;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-left: 5px;
    font-family: 'JetBrains Mono', monospace;
}

.get-started-step ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0.5rem 0;
}

.get-started-step ul li {
    display: flex;
    align-items: center;
    color: #a0a0b0;
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
    padding-left: 10px;
}

.get-started-step ul li i {
    margin-right: 0.8rem;
    font-size: 1.2rem;
    color: #4d8bff;
}

@media (max-width: 991px) {
    .get-started-steps {
        gap: 1.5rem;
    }
    
    .get-started-step {
        padding: 1.5rem;
        min-width: 220px;
    }
}

@media (max-width: 768px) {
    .get-started-steps {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        margin: 2rem 0;
    }
    
    .get-started-step {
        max-width: 100%;
        width: 100%;
        padding: 2rem;
    }
    
    .get-started-step .step-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 1.2rem;
    }
    
    .get-started-step h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .get-started-steps {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        margin: 1.5rem 0;
        padding: 0 1rem;
    }
    
    .get-started-step {
        max-width: 100%;
        width: 100%;
        padding: 1.75rem 1.5rem;
        border-radius: 16px;
    }
    
    .get-started-step .step-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 1rem;
    }
    
    .get-started-step .step-icon i {
        font-size: 1.8rem;
    }
    
    .get-started-step h3 {
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
    }
    
    .get-started-step h3::after {
        width: 30px;
        bottom: -4px;
    }
    
    .get-started-step p {
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
    }
    
    /* Fix button sizing for mobile */
    .get-started-step .btn-discord,
    .get-started-step .btn-outline {
        padding: 0.7rem 1rem;
        font-size: 0.95rem;
        border-radius: 8px;
        width: 90%;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 44px; /* Ensure minimum touch target size */
    }
    
    .get-started-step .bot-badge {
        font-size: 0.8rem;
        padding: 0.2rem 0.6rem;
    }
    
    .get-started-step code {
        font-size: 0.95rem;
        padding: 0.3rem 0.6rem;
    }
    
    .get-started-step ul {
        margin-top: 0.8rem;
    }
    
    .get-started-step ul li {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }
    
    .get-started-step ul li i {
        font-size: 1.1rem;
        margin-right: 0.6rem;
    }
}

/* Additional mobile optimization for very small screens */
@media (max-width: 480px) {
    .get-started-steps {
        gap: 1.25rem;
        margin: 1.25rem 0;
        padding: 0 0.5rem;
    }
    
    .get-started-step {
        padding: 1.5rem 1.25rem;
        border-radius: 14px;
    }
    
    .get-started-step .step-icon {
        width: 56px;
        height: 56px;
    }
    
    .get-started-step .step-icon i {
        font-size: 1.6rem;
    }
    
    .get-started-step h3 {
        font-size: 1.3rem;
    }
    
    .get-started-step p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .get-started-step .btn-discord,
    .get-started-step .btn-outline {
        padding: 0.6rem 0.9rem;
    }
    
    /* Fix code and badge alignment on very small screens */
    .bot-badge-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

/* Style specific to the Join Discord and Browse Servers buttons */
.get-started-step .btn-discord,
.get-started-step .btn-outline {
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.get-started-step .btn-discord i,
.get-started-step .btn-outline i {
    margin-right: 8px;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .get-started-step .btn-discord,
    .get-started-step .btn-outline {
        width: 90%; 
        max-width: 240px;
        font-size: 0.9rem;
        padding: 0.65rem 1rem;
        overflow: visible;
        box-sizing: border-box;
        text-overflow: clip;
        white-space: nowrap;
    }
    
    .get-started-step .btn-discord i,
    .get-started-step .btn-outline i {
        margin-right: 6px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .get-started-step .btn-discord,
    .get-started-step .btn-outline {
        width: 100%;
        max-width: 210px;
        font-size: 0.85rem;
        padding: 0.6rem 0.8rem;
    }
    
    .get-started-step .btn-discord i,
    .get-started-step .btn-outline i {
        margin-right: 5px;
        font-size: 0.85rem;
    }
}


.get-started-btn-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    align-items: stretch;
}
@media (max-width: 768px) {
    .get-started-btn-group {
        gap: 0.5rem;
        width: 100%;
        padding: 0;
    }
    .get-started-btn-group .btn {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
}

.btn-discord, .btn-discord *, .btn-discord:visited {
    color: #fff !important;
}

.btn-primary, .btn-outline-primary {
    min-width: 220px;
    text-align: center;
}

/* Override button min-width in sidebar to prevent layout breaking on smaller desktops */
.sidebar-container .btn-primary,
.sidebar-container .btn-outline-primary {
    min-width: 0;
    width: 100%;
}


.server-owner-btn {
    min-width: 260px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    font-size: 1.15rem;
    padding: 0.85rem 1.5rem;
    box-sizing: border-box;
}
@media (max-width: 600px) {
    .server-owner-btn {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 600px) {
    .d-flex.justify-content-center.gap-3.flex-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
}

/* Fix the overridden dashboard button */
.btn-primary {
    background: linear-gradient(90deg, #7d19ff, #9695ff);
    border: none;
    color: #fff !important;
    /* Remove any custom width constraints that are breaking the button */
    min-width: auto !important;
    width: auto !important;
}

/* Remove all the CSS that hides the navbar toggle button */
/* Removed conflicting navbar rules - Bootstrap will handle navbar behavior naturally */

/* Fix buttons in the server owner section */
.server-owner-btn {
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
    display: inline-block;
    margin: 0 0.5rem;
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
    border-radius: 12px;
}

/* Make all icons purple (#7d19ff) */
i.fas, i.far, i.fab, i.fa, .nav-feature-icon i, .fa-discord, .fa-steam, .fa-server, .fa-robot, .fa-rocket, .fa-search, .fa-tasks, .fa-gift, .fa-ticket-alt {
    color: #7d19ff !important;
}

/* Keep white color for icons in buttons with dark backgrounds */
.btn-primary i, .btn-discord i, .btn-dark i, .get-started-step .btn-discord i {
    color: #fff !important;
}

/* Keep yellow color for specific icons if needed */
.text-warning i {
    color: #F4CA81 !important;
}

.btn-outline-primary.server-owner-btn {
    color: var(--profile-accent, #7d19ff) !important;
}

.btn-outline-primary.server-owner-btn:hover {
    background-color: color-mix(in srgb, var(--profile-accent, #7d19ff) 10%, transparent) !important;
    color: var(--profile-accent, #7d19ff) !important;
}

.btn-outline-primary {
    border-color: var(--profile-accent, #7d19ff) !important;
    color: var(--profile-accent, #7d19ff) !important;
}

.btn-outline-primary:hover {
    background-color: color-mix(in srgb, var(--profile-accent, #7d19ff) 10%, transparent) !important;
    color: var(--profile-accent, #7d19ff) !important;
}/* Reduce spacing between cards on mobile */
@media (max-width: 768px) {
    /* Make cards in the 3-step guide closer together */
    .row.justify-content-center .col-md-4.mb-4 {
        margin-bottom: 0.5rem !important;
        padding-bottom: 0 !important;
    }
    
    /* Reduce top margin between cards */
    .card {
        margin-bottom: 0.5rem !important;
    }
    
    /* Reduce padding inside the cards */
    .card-body {
        padding: 1rem !important;
    }
    
    /* Reduce main container padding */
    .container-fluid .row.mt-3, 
    .container-fluid .row.mt-4 {
        margin-top: 0.5rem !important;
    }
    
    /* Adjust spacing for the 3-step guide */
    .col-md-4.mb-4 .card.bg-dark.h-100.p-4 {
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Make all margins between sections smaller */
    .mt-3, .mt-4, .mt-5 {
        margin-top: 0.5rem !important;
    }
    
    .mb-3, .mb-4, .mb-5 {
        margin-bottom: 0.5rem !important;
    }
    
    /* Reduce gap in the get-started-steps */
    .get-started-steps {
        gap: 0.5rem !important;
        margin: 0.5rem 0 !important;
    }
    
    /* Reduce vertical spacing between steps */
    .get-started-step {
        margin-bottom: 0.5rem !important;
        padding: 1rem !important;
    }
    
    /* Server owner card bottom margin */
    .mt-3.mb-5 {
        margin-bottom: 1rem !important;
    }
}

/* Profile Dropdown Menu Dark Theme */
.navbar .nav-item.dropdown .dropdown-menu[aria-labelledby="userDropdown"] {
    background-color: #212529; /* Dark background */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Light border */
    border-radius: 0.375rem; /* Standard Bootstrap border-radius */
    margin-top: 0.5rem; /* Adjust if needed to align with navbar */
}

.navbar .nav-item.dropdown .dropdown-menu[aria-labelledby="userDropdown"] .dropdown-item {
    color: #f8f9fa; /* Light text color */
    padding: 0.5rem 1rem;
}

.navbar .nav-item.dropdown .dropdown-menu[aria-labelledby="userDropdown"] .dropdown-item:hover,
.navbar .nav-item.dropdown .dropdown-menu[aria-labelledby="userDropdown"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1); /* Lighter dark on hover/focus */
    color: #f8f9fa;
}

.navbar .nav-item.dropdown .dropdown-menu[aria-labelledby="userDropdown"] .dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Light divider */
}


    /* Discovery section styling */
    .discovery-section {
        background-color: #212529;
        border: 1px solid #27272a;
        overflow: hidden;
        margin-bottom: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        padding: 2rem;
    }
    
    .discovery-header {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #27272a;
    }
    
    .discovery-header i {
        color: #7d19ff;
        margin-right: 10px;
        font-size: 1.1rem;
    }
    
    .discovery-header span {
        color: white;
        font-weight: 500;
        font-size: 1.1rem;
    }
    
    .discovery-body {
        padding: 15px;
    }
    
    .discovery-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
    }
    
    @media (max-width: 992px) {
        .discovery-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 2px;
        }
    }
    
    @media (max-width: 576px) {
        .discovery-grid {
            grid-template-columns: 1fr;
            gap: 2px;
        }
    }
    
    .discovery-button {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #18181b;
        border: 1px solid #27272a;
        border-radius: 16px;
        color: white;
        padding: 12px;
        text-decoration: none;
        transition: all 0.2s ease;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .discovery-button:hover {
        background-color: #27272a;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .discovery-button i {
        margin-right: 10px;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Colorful icon

/* Add these specific classes for icon colors */
.icon-web3::before {
    color: #5865F2 !important; /* Discord blue */
}

.icon-web2::before {
    color: #EB459E !important; /* Pink */
}

.icon-premium::before {
    color: #FEE75C !important; /* Yellow */
}

.icon-quest::before {
    color: #57F287 !important; /* Green */
}

.icon-crypto::before {
    color: #F4CA81 !important; /* Light orange */
}

.icon-airdrop::before {
    color: #ED4245 !important; /* Red */
}

.icon-chat::before {
    color: #4F98FF !important; /* Light blue */
}

.icon-surprise::before {
    color: #9B59B6 !important; /* Purple */
}

/* Featured Servers Section Styles */
.featured-servers-section {
  background-color: #212529;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 2rem;
}

.featured-title {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 500;
  color: white;
  margin-bottom: 1.5rem;
}

.featured-icon {
  color: #7d19ff;
  margin-right: 10px;
  font-size: 1.1rem;
}

/* Equal height cards */
.featured-servers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}

/* Card styling to match discovery buttons */
.featured-servers-grid .card {
  display: flex;
  flex-direction: column;
  background-color: #18181b;
  border: 1px solid #27272a;
  border-radius: 16px;
  margin: 0;
  height: 320px !important;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.featured-servers-grid .card:hover {
  background-color: #27272a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Banner and header styling */
.featured-servers-section .card-banner {
  position: relative;
  height: 100px;
  overflow: hidden;
}

.featured-servers-section .card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-servers-section .card-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to top, rgba(24, 24, 27, 0.95) 30%, rgba(24, 24, 27, 0.7) 60%, rgba(24, 24, 27, 0.3) 80%, transparent);
  z-index: 1;
}

.featured-servers-section .server-header {
  position: relative;
  margin-top: -70px;
  z-index: 2;
  margin-bottom: 0.75rem !important;
}

.featured-servers-section .server-name,
.featured-servers-section .server-meta,
.featured-servers-section .server-icon {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.featured-servers-section .server-name {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.2rem !important;
}

.featured-servers-section .server-meta {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Content area styling */
.featured-servers-section .card-body {
  padding: 0 1rem 1rem !important;
}

.featured-servers-section .server-description {
  margin-top: 0;
  margin-bottom: 0.75rem !important;
  max-height: 60px;
  overflow: hidden;
}

.featured-servers-section .description-text {
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.7);
}

/* Social links styling */
.featured-servers-section .social-links-top {
  margin-left: auto;
}

.featured-servers-section .social-link-top {
  background-color: rgba(33, 37, 41, 0.6);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.7);
}

.featured-servers-section .social-link-top:hover {
  background-color: rgba(125, 25, 255, 0.3);
  color: white;
}

/* Tags styling */
.featured-servers-section .tags-container {
  margin-bottom: 0.75rem !important;
  gap: 0.25rem !important;
  flex-wrap: wrap;
  display: flex;
}

.featured-servers-section .tag {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  margin: 0 !important;
  white-space: nowrap;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.featured-servers-section .tag.web3 {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
}

.featured-servers-section .tag.web2 {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

/* Join button styling */
.featured-servers-section .server-actions {
  margin-top: auto !important;
  padding-top: 0.5rem;
}

.featured-servers-section .join-server-btn {
  background: #7d19ff;
  color: white !important;
  border: none;
  border-radius: 12px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.featured-servers-section .join-server-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(125, 25, 255, 0.3);
}

/* Responsive breakpoints */
@media (max-width: 991px) {
  .featured-servers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .featured-servers-grid {
    grid-template-columns: 1fr;
  }
  
  .featured-servers-section {
    padding: 1.5rem;
  }
}


.server-card .card-body {
    overflow: visible;
}

/* Responsive adjustments for tablet/medium screens */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Adjust featured server grid */
  .featured-servers-grid {
    gap: 0.75rem;
  }
  
  /* Make server headers more compact */
  .featured-servers-section .server-header {
    margin-top: -55px;
    margin-bottom: 0.5rem !important;
  }
  
  /* Reduce text size */
  .featured-servers-section .server-name {
    font-size: 1rem;
  }
  
  /* Make description more compact */
  .featured-servers-section .description-text {
    font-size: 0.8rem;
    line-height: 1.2;
    max-height: 50px;
  }
  
  /* Adjust tag size */
  .featured-servers-section .tag {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
  }
  
  /* Make social links smaller */
  .featured-servers-section .social-links-top {
    transform: scale(0.85);
  }
}

/* Add these specific CSS styles at the end of the file to fix navbar dropdown positioning and styling */

/* Fix dropdown positioning and styling for navbar dropdowns */
.navbar .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    transform: none !important;
    z-index: 1030 !important;
    padding: 0 !important;
    margin-top: 0.5rem !important;
    min-width: 20rem !important;
    background-color: #1a1a1a !important;
    border: 1px solid #27272a !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
}

/* Hide by default */
.navbar .dropdown-menu:not(.show) {
    display: none !important;
}

/* Features menu specific styling */
.navbar .dropdown-menu.features-menu {
    width: 20rem !important;
    padding: 0 !important;
}

/* Feature item styling */
.navbar .nav-feature-item {
    display: flex !important;
    padding: 16px !important;
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 1px solid #27272a !important;
    transition: background-color 0.2s ease !important;
}

.navbar .nav-feature-item:last-child {
    border-bottom: none !important;
}

.navbar .nav-feature-item:hover {
    background-color: #27272a !important;
}

.navbar .nav-feature-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background-color: #27272a !important;
    border-radius: 8px !important;
    margin-right: 16px !important;
}

.navbar .nav-feature-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.navbar .nav-feature-title {
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
    color: #fff !important;
}

.navbar .nav-feature-description {
    font-size: 0.8rem !important;
    color: #9ca3af !important;
    line-height: 1.4 !important;
}

/* Resources menu styling */
.navbar .dropdown-menu.resources-menu {
    width: auto !important;
    min-width: 40rem !important;
    padding: 0 !important;
}

/* Resources grid layout */
.navbar .resources-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1 !important;
}

/* Resources column styling */
.navbar .resources-column {
    padding: 0 !important;
}

/* Resources section headers */
.navbar .resources-header {
    padding: 16px 16px 8px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* Fix emoji size in dropdowns */
.navbar .nav-feature-icon img {
    width: 20px !important;
    height: 20px !important;
}

/* Fix for Features dropdown specifically */
#featuresDropdown + .dropdown-menu {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 0.5rem !important;
    width: 20rem !important;
    background-color: #16161d !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden !important;
    padding: 0 !important;
    z-index: 9999 !important;
}

#featuresDropdown + .dropdown-menu.show {
    display: block !important;
}

#featuresDropdown + .dropdown-menu .dropdown-item {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

#featuresDropdown + .dropdown-menu .nav-feature-item {
    display: flex !important;
    padding: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: white !important;
    text-decoration: none !important;
    transition: background-color 0.2s !important;
    margin: 1rem !important;
}

#featuresDropdown + .dropdown-menu .nav-feature-item:last-child {
    border-bottom: none !important;
}

#featuresDropdown + .dropdown-menu .nav-feature-item:hover {
    background-color: #1a1a1a !important;
}

#featuresDropdown + .dropdown-menu .nav-feature-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    background-color: #2d2d2d !important;
    border-radius: 0.5rem !important;
    margin-right: 1rem !important;
    flex-shrink: 0 !important;
}

#featuresDropdown + .dropdown-menu .nav-feature-icon i {
    font-size: 1rem !important;
    color: white !important;
}

#featuresDropdown + .dropdown-menu .nav-feature-content {
    display: flex !important;
    flex-direction: column !important;
}

#featuresDropdown + .dropdown-menu .nav-feature-title {
    font-weight: 500 !important;
    font-size: 1rem !important;
    margin-bottom: 0.25rem !important;
    color: white !important;
}

#featuresDropdown + .dropdown-menu .nav-feature-description {
    font-size: 0.8rem !important;
    color: #9ca3af !important;
    line-height: 1.4 !important;
}

/* Update the Features dropdown width and text handling */
#featuresDropdown + .dropdown-menu {
    min-width: 24rem !important; /* Increase width to fit content */
    width: auto !important;
}

#featuresDropdown + .dropdown-menu .nav-feature-description {
    white-space: normal !important;
    display: inline-block !important;
    width: 100% !important;
    overflow: visible !important;
}

#featuresDropdown + .dropdown-menu .nav-feature-item {
    padding: 16px !important;
    min-height: 72px !important; /* Ensure enough height for content */
    align-items: flex-start !important; /* Align items to top */
}

#featuresDropdown + .dropdown-menu .nav-feature-content {
    padding-right: 8px !important; /* Add right padding to prevent text from touching edge */
}

/* Fix for navbar and header styling */
.navbar-toggler {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: rgba(255, 255, 255, 0.55);
}

.navbar-toggler:hover {
    color: rgba(255, 255, 255, 0.75);
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* Ensure dropdown toggle buttons display correctly */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* Fix user dropdown menu position */
.nav-item.dropdown .dropdown-menu {
    right: 0;
    left: auto;
}

/* Global navbar overrides to fix dropdown issues */
.navbar {
    display: flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    background-color: #212529 !important;
    z-index: 1050 !important;
}

.navbar-brand {
    display: flex !important;
    align-items: center !important;
}

.navbar-collapse {
    display: flex !important;
    flex-basis: auto !important;
}

.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
}


/* Dropdown specific fixes */
.dropdown-toggle {
    white-space: nowrap !important;
}

.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
    display: none !important;
    min-width: 10rem !important;
    padding: 0.5rem 0 !important;
    color: #fff !important;
    text-align: left !important;
    background-color: #212529 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0.25rem !important;
}

.dropdown-menu.show {
    display: block !important;
}

/* User dropdown position fix */
#userDropdown + .dropdown-menu {
    right: 0 !important;
    left: auto !important;
}


.text-muted {
    --bs-text-opacity: 1;
    color: #6c757d !important;
}

#userDropdown + .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    min-width: 120px !important; /* Reduced from default size */
    width: auto !important;
}

.navbar .nav-item.dropdown .dropdown-menu[aria-labelledby="userDropdown"] {
    width: 120px !important; /* Set a fixed narrower width */
    min-width: 120px !important;
}

/* Standardize dropdown menu colors */
.dropdown-menu {
    background-color: #1e1e26 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dropdown-item {
    background-color: transparent !important;
    color: #f0f0f5 !important;
    margin-bottom: 2px !important;
}

.dropdown-item:hover, 
.dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.dropdown-item.active {
    background: linear-gradient(135deg, #7d19ff 0%, #9333ea 100%) !important;
}

/* Additional dropdown styling refinements */
.dropdown-menu {
    padding: 8px !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.dropdown-item {
    border-radius: 4px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    transition: background-color 0.15s ease !important;
}

/* Features dropdown specific styling */
#featuresDropdown + .dropdown-menu .nav-feature-item, #resourcesDropdown + .dropdown-menu .nav-feature-item {
    margin-bottom: 2px !important;
    border-radius: 4px !important;
}

#featuresDropdown + .dropdown-menu .nav-feature-item:hover, #resourcesDropdown + .dropdown-menu .nav-feature-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Resources dropdown specific styling */
#resourcesDropdown + .dropdown-menu, #featuresDropdown + .dropdown-menu {
    background-color: #1e1e26 !important;
}

#resourcesDropdown + .dropdown-menu .dropdown-item, #featuresDropdown + .dropdown-menu .dropdown-item {
    background-color: transparent !important;
}

#featuresDropdown + .dropdown-menu, #resourcesDropdown + .dropdown-menu {
    padding: 10px !important;
}

#featuresDropdown + .dropdown-menu .dropdown-item, #resourcesDropdown + .dropdown-menu .dropdown-item {
    padding: 10px !important;
}

/* Fix for dropdown menu items text wrapping and spacing */
.dropdown-menu .dropdown-item {
    padding: 8px 16px !important;
    white-space: normal !important;
    line-height: 1.4 !important;
}

/* Add right margin to dropdown description text */
.nav-feature-description {
    margin-right: 12px !important;
    padding-right: 8px !important;
}

/* Add padding to the content container */
.nav-feature-content {
    padding: 10px !important;
    width: 100% !important;
}

/* Ensure consistent padding and margin in dropdowns */
.dropdown-menu {
    padding: 8px !important;
}

/* Set proper width for the features dropdown */
#featuresDropdown + .dropdown-menu, #resourcesDropdown + .dropdown-menu {
    width: auto !important;
    min-width: 550px !important;
}

/* Make feature items properly aligned and spaced */
#featuresDropdown + .dropdown-menu .nav-feature-item, #resourcesDropdown + .dropdown-menu .nav-feature-item {
    padding: 10px 12px !important;
    margin-left: 1px !important;
    display: flex !important;
    align-items: flex-start !important;
    margin-top: 2px !important;
    margin-bottom: 6px !important;
}

/* Fix width of feature items to prevent text overflow */
#featuresDropdown + .dropdown-menu .nav-feature-item .nav-feature-content, #resourcesDropdown + .dropdown-menu .nav-feature-item .nav-feature-content {
    width: calc(100% - 50px) !important; /* Subtract icon width + margin */
    box-sizing: border-box !important;
}

/* Mobile responsive navbar dropdown menus */
@media (max-width: 768px) {
    /* Ensure both dropdowns work independently */
    .navbar .nav-item.dropdown {
        position: relative !important;
    }
    
    /* Features dropdown mobile styles */
    #featuresDropdown + .dropdown-menu {
        width: 100% !important;
        min-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 0 8px 8px !important;
        max-height: calc(100vh - 120px) !important; /* Account for navbar height */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        position: absolute !important;
        top: 100% !important;
        z-index: 1030 !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    }
    
    /* Resources dropdown mobile styles */
    #resourcesDropdown + .dropdown-menu {
        width: 100% !important;
        min-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 0 8px 8px !important;
        max-height: calc(100vh - 120px) !important; /* Account for navbar height */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        position: absolute !important;
        top: 100% !important;
        z-index: 1030 !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    }
    
    /* IMPORTANT: Force remove grid layout for resources on mobile */
    #resourcesDropdown + .dropdown-menu .resources-grid,
    .navbar .dropdown-menu.resources-menu .resources-grid,
    .navbar .resources-grid {
        display: block !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid: none !important;
    }
    
    /* IMPORTANT: Force stack resource columns vertically */
    #resourcesDropdown + .dropdown-menu .resources-column,
    .navbar .dropdown-menu.resources-menu .resources-column,
    .navbar .resources-column {
        width: 100% !important;
        margin-bottom: 1rem !important;
        display: block !important;
        float: none !important;
        flex: none !important;
    }
    
    /* Make feature items mobile-friendly */
    #featuresDropdown + .dropdown-menu .nav-feature-item,
    #resourcesDropdown + .dropdown-menu .nav-feature-item {
        padding: 1rem !important;
        margin: 5px !important;
        min-height: 60px !important; /* Ensure adequate touch target */
        border-radius: 0 !important;
        width: 100% !important;
        display: flex !important;
        box-sizing: border-box !important;
    }
    
    /* Adjust feature icons for mobile */
    #featuresDropdown + .dropdown-menu .nav-feature-icon,
    #resourcesDropdown + .dropdown-menu .nav-feature-icon {
        width: 2rem !important;
        height: 2rem !important;
        margin-right: 0.75rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Make feature content full width on mobile */
    #featuresDropdown + .dropdown-menu .nav-feature-content,
    #resourcesDropdown + .dropdown-menu .nav-feature-content {
        width: 100% !important;
        padding-right: 0.5rem !important;
        flex: 1 !important;
    }
    
    /* Adjust text sizes for mobile */
    #featuresDropdown + .dropdown-menu .nav-feature-title,
    #resourcesDropdown + .dropdown-menu .nav-feature-title {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.2 !important;
    }
    
    #featuresDropdown + .dropdown-menu .nav-feature-description,
    #resourcesDropdown + .dropdown-menu .nav-feature-description {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        word-wrap: break-word !important;
    }
    
    /* Resource headers mobile styling */
    #resourcesDropdown + .dropdown-menu .resources-header,
    .navbar .dropdown-menu.resources-menu .resources-header,
    .navbar .resources-header {
        padding: 1rem 1rem 0.5rem !important;
        font-size: 0.75rem !important;
        color: rgba(255, 255, 255, 0.6) !important;
        margin-bottom: 0.5rem !important;
        width: 100% !important;
        display: block !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Make dropdown items touch-friendly */
    .navbar .nav-feature-item {
        min-height: 60px !important; /* Larger touch target */
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        touch-action: manipulation !important; /* Improve touch responsiveness */
    }
    
    /* Ensure proper spacing between sections in resources dropdown */
    #resourcesDropdown + .dropdown-menu .resources-column:not(:last-child),
    .navbar .dropdown-menu.resources-menu .resources-column:not(:last-child),
    .navbar .resources-column:not(:last-child) {
        padding-bottom: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Make general navbar dropdowns mobile-friendly */
    .navbar .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        margin-top: 0 !important;
        border-radius: 0 0 8px 8px !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        z-index: 1030 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Make navbar dropdown items more touch-friendly */
    .navbar .dropdown-item {
        padding: 12px 16px !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure navbar items don't overlap */
    .navbar-nav .nav-item {
        position: relative !important;
    }
    
    /* Fix any visibility issues */
    .navbar .nav-item.dropdown .dropdown-toggle {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Add padding to the bottom of dropdowns for better scrolling */
    #featuresDropdown + .dropdown-menu,
    #resourcesDropdown + .dropdown-menu {
        padding-bottom: 1rem !important;
    }
    
    /* Ensure proper scrollbar styling on mobile */
    #featuresDropdown + .dropdown-menu::-webkit-scrollbar,
    #resourcesDropdown + .dropdown-menu::-webkit-scrollbar {
        width: 6px !important;
    }
    
    #featuresDropdown + .dropdown-menu::-webkit-scrollbar-track,
    #resourcesDropdown + .dropdown-menu::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 3px !important;
    }
    
    #featuresDropdown + .dropdown-menu::-webkit-scrollbar-thumb,
    #resourcesDropdown + .dropdown-menu::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3) !important;
        border-radius: 3px !important;
    }
    
    /* Fix user profile dropdown on mobile */
    #userDropdown + .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        right: auto !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        margin-top: 0 !important;
        border-radius: 0 0 8px 8px !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: 1040 !important;
        background-color: #212529 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        transform: none !important;
        -webkit-overflow-scrolling: initial !important;
        border: none !important;
    }
    
    /* Override general dropdown styles for user dropdown */
    .navbar .nav-item.dropdown:has(#userDropdown) .dropdown-menu {
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        left: 0 !important;
        right: auto !important;
        max-height: none !important;
        border-radius: 0 0 8px 8px !important;
        margin-top: 0 !important;
        border: none !important;
    }
    
    /* Style user dropdown items */
    #userDropdown + .dropdown-menu .dropdown-item {
        padding: 1rem !important;
        margin: 5px !important;
        font-size: 16px !important;
        color: #f8f9fa !important;
        white-space: nowrap !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        border: none !important;
    }
    
    #userDropdown + .dropdown-menu .dropdown-item:hover,
    #userDropdown + .dropdown-menu .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #f8f9fa !important;
    }
    
    #userDropdown + .dropdown-menu .dropdown-divider {
        margin: 4px 0 !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        opacity: 1 !important;
        height: 1px !important;
    }
}

/* Fix user dropdown position on very small screens */
@media (max-width: 425px) {
    /* Position user dropdown above profile picture on very small screens */
    #userDropdown + .dropdown-menu {
        top: auto !important;
        bottom: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
        border-radius: 8px 8px 0 0 !important;
    }
    
    /* Override general dropdown styles for user dropdown on small screens */
    .navbar .nav-item.dropdown:has(#userDropdown) .dropdown-menu {
        top: auto !important;
        bottom: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
        border-radius: 8px 8px 0 0 !important;
    }
}

.navbar-toggler {
    display: block !important;
}

/* Hide navbar toggler on desktop - only show on mobile */
@media (min-width: 768px) {
    .navbar-toggler {
        display: none !important;
    }


}

@media (min-width: 768px) and (max-width: 769px) {
    .navbar-expand-md .navbar-collapse {
        display: none !important;
    }
}

/* =============================================
   Profile Section Styles
   ============================================= */

/* Profile Field Groups */
.profile-field-group {
    margin-bottom: 1.5rem;
}

.profile-field-group .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.profile-input {
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s ease;
}

.profile-input:focus {
    border-color: #7d19ff;
    box-shadow: 0 0 0 2px rgba(125, 25, 255, 0.2);
}

/* Gender Options */
.gender-options .form-check {
    padding-left: 0;
}

.gender-options .form-check-input {
    margin-left: 0;
    margin-right: 0.5rem;
}

.gender-options .form-check-label {
    color: #e0e0e0;
}

/* Tags Section */
.profile-tag-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #9ca3af;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    transition: all 0.2s ease;
    font-size: 0.8125rem;
}

.profile-tag-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #e0e0e0;
}

.profile-tag-btn.active {
    background: #7d19ff;
    border-color: #7d19ff;
    color: #fff;
}

.custom-tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 20px;
}

.custom-tag-badge .btn-close {
    font-size: 0.6rem;
    padding: 0;
    margin-left: 0.5rem;
}

/* Server Roles List */
.server-roles-list {
    max-height: 180px;
    overflow-y: auto;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* Server Admin At and Moderating At sections - no scrolling, modern layout */
#viewModeAdminServersSection .server-roles-list,
#viewModeModServersSection .server-roles-list,
.profile-field-group:has(#viewModeAdminServersList) .server-roles-list,
.profile-field-group:has(#viewModeModServersList) .server-roles-list {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Public view - Server Admin At and Moderating At sections (target by structure) */
#profile-section .profile-field-group .server-roles-list {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Universal rule - remove scrolling from all server listing cards in profile section */
#profile-section .server-listing-card {
    overflow: visible !important;
    max-height: none !important;
}

/* Ensure server listing description displays fully */
.server-listing-description {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    display: block !important;
}

/* Most Active In section - no scrolling, display at full height */
#viewModeMostActiveSection .server-roles-list,
#viewModeMostActiveSection .server-listing-card,
.profile-field-group:has(#viewModeMostActiveList) .server-roles-list,
.profile-field-group:has(#viewModeMostActiveList) .server-listing-card {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Public view - Most Active In section (direct card, no server-roles-list wrapper) */
.profile-field-group:has(.most-active-card) .server-listing-card.most-active-card {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Universal rule for Most Active In - target by label text pattern */
.profile-field-group label[for="mostActiveServer"],
.profile-field-group label:contains("Most Active In") {
    /* This ensures parent container doesn't constrain height */
}

/* Most Active card - always full height, no constraints */
.server-listing-card.most-active-card,
#mostActiveServerCard {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Ensure parent containers don't constrain Most Active sections */
.profile-field-group:has(.most-active-card),
#viewModeMostActiveSection {
    overflow: visible !important;
}

.server-role-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.server-role-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Server Icons */
.server-icon-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.server-icon-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5865F2 0%, #7d19ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

/* Server Name */
.server-name {
    flex: 1;
    color: #fff;
    font-size: 0.9rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Owner Badge */
.owner-badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: #fbbf24;
    color: #000;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Invite Bot Button - Matching Join Button styling with dynamic accent color */
.btn-invite-bot {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--profile-link-color, #fff) !important;
    -webkit-text-fill-color: var(--profile-link-color, #fff) !important;
    background: var(--profile-accent, #5865F2);
    border: none;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
}

.btn-invite-bot:hover {
    background: var(--profile-accent-secondary, #4752c4);
    color: var(--profile-link-color, #fff) !important;
    -webkit-text-fill-color: var(--profile-link-color, #fff) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--profile-accent, #5865F2) 40%, transparent);
}

/* Make icon inherit text color in all invite bot buttons */
.btn-invite-bot i,
.server-role-item .btn-invite-bot i {
    font-size: 0.875rem;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Server Visibility Toggle */
.server-visibility-toggle {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #10b981;
    transition: all 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
}

.server-visibility-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.server-visibility-toggle.hidden-server {
    color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.3);
}

.server-visibility-toggle.hidden-server:hover {
    color: #9ca3af;
    background: rgba(107, 114, 128, 0.2);
}

.server-role-item.is-hidden .server-icon-img,
.server-role-item.is-hidden .server-icon-fallback,
.server-role-item.is-hidden span {
    opacity: 0.5;
}

/* Profile Card Preview */
.profile-card-preview {
    background: #1a1a2e;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.profile-card-banner {
    height: 80px;
    background: linear-gradient(135deg, #7d19ff 0%, #1a1a2e 100%);
}

.profile-card-content {
    padding: 1rem;
    padding-top: 0;
    position: relative;
}

.profile-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 4px solid #1a1a2e;
    overflow: hidden;
    margin-top: -32px;
    margin-bottom: 0.5rem;
}

.profile-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-card-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #fff;
}

.profile-card-bio {
    font-size: 0.8125rem;
    color: #999;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.profile-card-actions {
    display: flex;
    gap: 0.5rem;
}

.profile-card-actions .btn {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

/* Profile Header Card (Main header that serves as card preview) */
.profile-header-card {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
}

.profile-header-content {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "avatar info servers actions";
    gap: 1rem;
    align-items: center;
    width: 100%;
}

.profile-header-avatar {
    grid-area: avatar;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    flex-shrink: 0;
}

.profile-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-header-info {
    grid-area: info;
    flex: 1;
    min-width: 0;
}

.profile-header-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
}

.profile-header-bio {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
}

.profile-header-bio:hover {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.05);
}

.profile-header-bio-container:hover .profile-header-bio {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.05);
}

.profile-header-bio-container:hover .profile-header-bio-edit-icon {
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-50%) scale(1.1);
}

.profile-header-bio-container {
    position: relative;
}

.profile-header-bio-edit-icon {
    pointer-events: none;
}

/* Profile Header - For Hire Tags Styles */
#profileHeaderForHireTagsList {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

#profileHeaderForHireTagsList .badge {
    width: fit-content !important;
    display: inline-block;
    white-space: nowrap;
    flex-shrink: 0;
}

.profile-header-servers {
    grid-area: servers;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    max-width: 300px;
    justify-content: flex-end;
    max-height: 80px;
    overflow-y: auto;
    overflow-x: hidden;
}

.profile-header-servers::-webkit-scrollbar {
    width: 4px;
}

.profile-header-servers::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.profile-header-servers::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.profile-header-servers::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.profile-header-actions {
    grid-area: actions;
    flex-shrink: 0;
}

/* Medium desktop - adjust layout for smaller desktops */
@media (max-width: 1400px) {
    .profile-header-content {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: 
            "avatar info actions"
            "servers servers servers";
        gap: 0.75rem;
    }
    
    .profile-header-servers {
        justify-content: flex-start;
        max-width: 100%;
        max-height: 50px;
        margin-top: 0.5rem;
    }
    
    .profile-header-bio {
        max-width: 100%;
    }
}

/* Tablet and below */
@media (max-width: 768px) {
    .profile-header-card {
        padding: 1rem;
    }
    
    .profile-header-content {
        grid-template-columns: 1fr;
        grid-template-areas:
            "avatar"
            "info"
            "servers"
            "actions";
        justify-items: center;
        text-align: center;
        gap: 0.75rem;
    }
    
    .profile-header-avatar {
        justify-self: center;
        margin-top: 1rem;
    }
    
    .profile-header-info {
        width: 100%;
    }
    
    .profile-header-bio {
        max-width: 100%;
        white-space: normal;
    }
    
    .profile-header-servers {
        justify-content: center;
        max-width: 100%;
        width: 100%;
    }
    
    .profile-header-actions {
        width: 100%;
    }
    
    .profile-header-actions .btn {
        width: 100%;
    }
}

/* Horizontal Card Preview Layout (Card at top) */
.profile-card-preview-horizontal {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16162a 100%);
    border: 1px solid rgba(125, 25, 255, 0.2);
}

.profile-card-preview-horizontal .profile-card-content-horizontal {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0;
}

.profile-card-preview-horizontal .profile-card-avatar {
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;
}

.profile-card-preview-horizontal .profile-card-info {
    flex: 1;
    min-width: 0;
}

.profile-card-preview-horizontal .profile-card-name {
    margin-bottom: 0.25rem;
}

.profile-card-preview-horizontal .profile-card-bio {
    margin-bottom: 0;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-card-preview-horizontal .profile-card-actions {
    flex-shrink: 0;
    margin-left: auto;
}

/* Server Icons in Card Preview */
.profile-card-servers {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 1rem;
}

.profile-server-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    overflow: hidden;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
}

.profile-server-icon:hover {
    transform: scale(1.1);
}

.profile-server-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient Accent Color Buttons */
.accent-gradient-btn {
    border-radius: 8px;
}

/* Responsive adjustments for horizontal card */
@media (max-width: 768px) {
    .profile-card-preview-horizontal {
        flex-direction: column;
        padding: 1rem;
    }
    
    .profile-card-preview-horizontal .profile-card-content-horizontal {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-card-preview-horizontal .profile-card-actions {
        margin-left: 0;
        margin-top: 1rem;
    }
    
    .profile-card-servers {
        justify-content: center;
        margin-right: 0;
        margin-top: 0.5rem;
    }
}

/* Accent Color Options */
.accent-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.accent-color-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.accent-color-btn:hover {
    transform: scale(1.1);
}

.accent-color-btn.active {
    border-color: #fff;
}

.accent-color-btn.active::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Banner Upload Area */
.banner-upload-area {
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.banner-upload-area:hover {
    background: rgba(125, 25, 255, 0.1);
    border-color: #7d19ff !important;
}

.banner-upload-area.dragover {
    background: rgba(125, 25, 255, 0.2);
    border-color: #7d19ff !important;
}

/* Privacy Settings Toggles */
.form-switch .form-check-input {
    width: 3em;
    height: 1.5em;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.7%29'/%3e%3c/svg%3e") !important;
    transition: all 0.3s ease;
}

.form-switch .form-check-input:checked {
    background-color: #7d19ff !important;
    border-color: #7d19ff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(125, 25, 255, 0.25) !important;
    border-color: #7d19ff !important;
}

.form-switch .form-check-input:not(:checked) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.7%29'/%3e%3c/svg%3e") !important;
}

/* Profile Section Responsive */
@media (max-width: 991px) {
    #profile-section .col-lg-7,
    #profile-section .col-lg-5 {
        margin-bottom: 2rem;
    }
    
    .profile-preview-section {
        position: sticky;
        top: 1rem;
    }
}

@media (max-width: 576px) {
    .profile-tag-btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .accent-color-btn {
        width: 32px;
        height: 32px;
    }
    
    .profile-card-banner {
        height: 60px;
    }
    
    .profile-card-avatar {
        width: 48px;
        height: 48px;
        margin-top: -24px;
    }
}

/* Floating Profile Save Bar */
.profile-save-bar {
    position: fixed;
    bottom: -80px;
    left: 0;
    right: 0;
    background: var(--profile-accent, #7d19ff);
    padding: 16px 32px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    z-index: 1050;
    transition: bottom 0.3s ease-in-out, background 0.3s ease;
}

.profile-save-bar.visible {
    bottom: 0;
}

.profile-save-bar.visible.hiding {
    bottom: -80px;
    opacity: 0;
    transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Success animation for save button */
@keyframes saveSuccess {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.profile-save-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
}

.profile-save-text {
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.profile-save-actions {
    display: flex;
    gap: 12px;
}

.profile-save-actions .btn {
    padding: 10px 28px;
    font-weight: 600;
    border-radius: 8px;
}

.profile-save-actions .btn-outline-light {
    border: none;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    text-decoration: underline;
    padding: 10px 16px;
}

.profile-save-actions .btn-outline-light:hover {
    color: #fff;
    background: transparent;
}

.profile-save-actions .btn-primary,
.profile-save-actions .btn-primary:focus,
.profile-save-actions .btn-primary:active {
    background: #fff !important;
    color: var(--profile-accent, #7d19ff) !important;
    border: none;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}

.profile-save-actions .btn-primary:hover {
    background: #f0f0f0 !important;
    color: var(--profile-accent, #6a10e0) !important;
}

@media (max-width: 576px) {
    .profile-save-bar {
        padding: 12px 16px;
    }
    
    .profile-save-content {
        flex-direction: column;
        gap: 12px;
    }
    
    .profile-save-text {
        font-size: 0.875rem;
    }
    
    .profile-save-actions {
        width: 100%;
    }
    
    .profile-save-actions .btn {
        flex: 1;
        padding: 10px 16px;
    }
}

/* Save Profile Button Animation */
#saveProfileBtn {
    transition: all 0.3s ease;
    min-width: 140px;
}

#saveProfileBtn:disabled {
    opacity: 0.85;
}

#saveProfileBtn.saving {
    pointer-events: none;
}

#saveProfileBtn.btn-success {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #fff !important;
    animation: saveSuccess 0.4s ease-out;
}

#saveProfileBtn.btn-danger {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

/* Spinner animation in save button */
#saveProfileBtn .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Custom URL Status Messages */
#customUrlStatus.text-success {
    color: #10b981 !important;
}

#customUrlStatus.text-danger {
    color: #ef4444 !important;
}

#customUrlStatus.text-warning {
    color: #f59e0b !important;
}

/* View mode server item visibility - needs !important to override Bootstrap d-flex */
.view-mode-server-item.server-hidden {
    display: none !important;
}

/* ================================================================
   THEME-AWARE COMPONENT OVERRIDES
   These ensure sidebar, main content, nav, and header use theme colors
   ================================================================ */

/* Sidebar theming - use theme variables */
.profile-customized .sidebar-box {
    background: var(--profile-card-bg, linear-gradient(165deg, #18181f 0%, #1e1e26 100%));
    border-color: var(--profile-border-color, rgba(255, 255, 255, 0.06));
    border-radius: var(--profile-border-radius, 12px) !important;
    border-width: var(--profile-border-width, 1px) !important;
    border-style: var(--profile-border-style, solid) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.profile-customized .sidebar-header {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-bottom-color: var(--profile-border-color, rgba(255, 255, 255, 0.06));
}

/* Main content theming - background controlled by JavaScript */
/* Override style.css background-color - use unset to allow JS to control */
.profile-customized .main-content,
.profile-customized.container-fluid .main-content,
.container-fluid.profile-customized .main-content,
body .profile-customized .main-content {
    background-color: unset !important;
    background: unset !important;
    background-image: unset !important;
}

/* Nav pills active state - use theme accent */
.profile-customized .nav-pills .nav-link.active {
    background: linear-gradient(145deg, var(--profile-accent, #7d19ff), var(--profile-accent-secondary, #6a14d9));
    box-shadow: 0 4px 15px color-mix(in srgb, var(--profile-accent, #7d19ff) 30%, transparent);
}

.profile-customized .nav-pills .nav-link:hover:not(.active) {
    background: color-mix(in srgb, var(--profile-accent, #7d19ff) 15%, transparent);
}

/* Profile header card theming */
.profile-customized .profile-header-card {
    background: linear-gradient(135deg, var(--profile-accent, #7d19ff), var(--profile-accent-secondary, #6a14d9)) !important;
    border: 1px solid var(--profile-border-color, rgba(255, 255, 255, 0.2));
    box-shadow: var(--profile-card-shadow, 0 4px 20px rgba(0, 0, 0, 0.3));
}

/* Profile theme card - adapt to theme */
.profile-customized .profile-theme-card {
    background: var(--profile-card-bg, rgba(20, 20, 40, 0.6)) !important;
    border-color: var(--profile-border-color, rgba(255, 255, 255, 0.1)) !important;
    border-radius: var(--profile-border-radius, 12px) !important;
    border-width: var(--profile-border-width, 1px) !important;
    border-style: var(--profile-border-style, solid) !important;
}

/* Button theming for profile section */
.profile-customized .btn-primary {
    background: var(--profile-accent, #7d19ff);
    border-color: var(--profile-accent, #7d19ff);
}

.profile-customized .btn-primary:hover {
    background: var(--profile-accent-secondary, #6a14d9);
    border-color: var(--profile-accent-secondary, #6a14d9);
}

.profile-customized .btn-outline-primary {
    color: var(--profile-accent, #7d19ff);
    border-color: var(--profile-accent, #7d19ff);
}

.profile-customized .btn-outline-primary:hover {
    background: var(--profile-accent, #7d19ff);
    border-color: var(--profile-accent, #7d19ff);
    color: var(--profile-text-color, #fff);
}

/* Join buttons - consistent styling with theme accent colors */
.profile-customized .join-btn:not(.disabled) {
    background: var(--profile-accent, #5865F2) !important;
    border-color: var(--profile-accent, #5865F2) !important;
    color: var(--profile-text-color, #fff) !important;
}

.profile-customized .join-btn:not(.disabled) i.fab.fa-discord,
.profile-customized .join-btn:not(.disabled) i.fa-discord {
    color: inherit !important;
}

.profile-customized .join-btn:not(.disabled):hover {
    background: var(--profile-accent-secondary, #4752c4) !important;
    border-color: var(--profile-accent-secondary, #4752c4) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--profile-accent, #5865F2) 40%, transparent) !important;
    color: var(--profile-text-color, #fff) !important;
}

.profile-customized .join-btn:not(.disabled):hover i.fab.fa-discord,
.profile-customized .join-btn:not(.disabled):hover i.fa-discord {
    color: inherit !important;
}

.profile-customized .join-btn.disabled {
    background: color-mix(in srgb, var(--profile-accent, #5865F2) 30%, transparent) !important;
    border-color: color-mix(in srgb, var(--profile-accent, #5865F2) 30%, transparent) !important;
    color: var(--profile-text-color, #fff) !important;
    opacity: 0.6;
    cursor: not-allowed;
}

.profile-customized .join-btn.disabled i.fab.fa-discord,
.profile-customized .join-btn.disabled i.fa-discord {
    color: inherit !important;
}

/* Cards in themed profile */
.profile-customized .card.bg-dark {
    background: var(--profile-card-bg, rgba(20, 20, 40, 0.92)) !important;
    border-color: var(--profile-border-color, rgba(255, 255, 255, 0.1)) !important;
    border-radius: var(--profile-border-radius, 12px) !important;
    border-width: var(--profile-border-width, 1px) !important;
    border-style: var(--profile-border-style, solid) !important;
}

/* Stat cards in themed profile */
.profile-customized .stat-card {
    background: var(--profile-card-bg, rgba(20, 20, 40, 0.8)) !important;
    border-color: var(--profile-border-color, rgba(255, 255, 255, 0.1)) !important;
    border-radius: var(--profile-border-radius, 12px) !important;
    border-width: var(--profile-border-width, 1px) !important;
    border-style: var(--profile-border-style, solid) !important;
}

/* Profile mode toggle buttons - theme aware */
.profile-customized .profile-mode-toggle .btn.active {
    background: var(--profile-accent, #7d19ff);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--profile-accent, #7d19ff) 30%, transparent);
}

/* Badge colors in themed profile */
.profile-customized .badge.bg-primary {
    background: var(--profile-accent, #7d19ff) !important;
}

/* Interest badges - use custom accent for border, text color for text */
.profile-customized .badge.rounded-pill {
    background: color-mix(in srgb, var(--profile-accent-secondary, #6a14d9) 20%, transparent) !important;
    border: 1px solid var(--profile-accent, #7d19ff) !important;
    color: var(--profile-text-color, #ffffff) !important;
}

/* About section and content boxes - use custom accent color for borders */
.profile-customized .profile-field-group > div.p-3.rounded,
.profile-customized #viewModeAboutMe {
    border: 1px solid var(--profile-accent, #7d19ff) !important;
    border-left: 3px solid var(--profile-accent, #7d19ff) !important;
    opacity: 1;
}

/* Language/info rows - use custom accent for left border */
.profile-customized .profile-field-group .d-flex.align-items-center {
    border-left-color: var(--profile-accent, #7d19ff) !important;
}

/* Form controls in themed profile */
.profile-customized .form-control,
.profile-customized .form-select {
    background: var(--profile-bg-secondary, #16213e);
    border-color: var(--profile-border-color, rgba(255, 255, 255, 0.1));
    color: var(--profile-text-color, #fff);
}

.profile-customized .form-control:focus,
.profile-customized .form-select:focus {
    border-color: var(--profile-accent, #7d19ff);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--profile-accent, #7d19ff) 25%, transparent);
}

/* Switch/checkbox accent color - but NOT in customization panel */
.profile-customized .form-check-input:checked:not(.customization-panel .form-check-input) {
    background-color: var(--profile-accent, #7d19ff);
    border-color: var(--profile-accent, #7d19ff);
}

/* Customization panel switches should always use the standard purple color */
.customization-panel .form-switch .form-check-input:checked {
    background-color: #7d19ff !important;
    border-color: #7d19ff !important;
}

/* Tag buttons in themed profile */
.profile-customized .profile-tag-btn.active {
    background: var(--profile-accent, #7d19ff);
    border-color: var(--profile-accent, #7d19ff);
}

/* Accent color buttons in themed profile */
.profile-customized .accent-color-btn.active {
    box-shadow: 0 0 0 3px var(--profile-text-color, #fff);
}

/* Toast Notifications */
.toast-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 280px;
    max-width: 350px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid;
}

.toast-notification.toast-success {
    background: var(--profile-accent, #7d19ff);
    color: white;
    border-color: color-mix(in srgb, var(--profile-accent, #7d19ff) 85%, black);
}

.toast-notification.toast-error,
.toast-notification.toast-danger {
    background: #ef4444;
    color: white;
    border-color: #dc2626;
}

.toast-notification.toast-warning {
    background: #f59e0b;
    color: white;
    border-color: #d97706;
}

.toast-notification.toast-info {
    background: #3b82f6;
    color: white;
    border-color: #2563eb;
}

.toast-notification .toast-icon {
    font-size: 16px;
    flex-shrink: 0;
    color: white !important;
}

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

.toast-notification .toast-title {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 13px;
}

.toast-notification .toast-message {
    font-weight: 400;
    opacity: 0.95;
    font-size: 12px;
}

.toast-notification .toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s ease;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-notification .toast-close:hover {
    color: rgba(255, 255, 255, 1);
}

.toast-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-notification.hide {
    transform: translateX(100%);
    opacity: 0;
}

/* Social Links Styling */
.social-link-row {
    align-items: center;
}

.social-link-row .remove-social-link {
    flex-shrink: 0;
}

.social-link-view {
    transition: all 0.2s ease;
}

.social-link-view:hover {
    transform: translateY(-1px);
}

/* Theme-specific social link styling - Default */
.profile-theme-default .social-link-view {
    border-color: rgba(125, 25, 255, 0.3) !important;
    color: #7d19ff !important;
}

.profile-theme-default .social-link-view:hover {
    background: rgba(125, 25, 255, 0.1) !important;
    box-shadow: 0 0 10px rgba(125, 25, 255, 0.3);
}

/* Theme-specific social link styling - Cyberpunk */
.profile-theme-cyberpunk .social-link-view {
    border-color: rgba(0, 255, 255, 0.3) !important;
    color: #00ffff !important;
}

.profile-theme-cyberpunk .social-link-view:hover {
    background: rgba(0, 255, 255, 0.1) !important;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

/* Theme-specific social link styling - Retrowave */
.profile-theme-retrowave .social-link-view {
    border-color: rgba(255, 217, 61, 0.3) !important;
    color: #ffd93d !important;
}

.profile-theme-retrowave .social-link-view:hover {
    background: rgba(255, 217, 61, 0.1) !important;
    box-shadow: 0 0 10px rgba(255, 217, 61, 0.3);
}

/* Theme-specific social link styling - Midnight */
.profile-theme-midnight .social-link-view {
    border-color: rgba(72, 191, 227, 0.3) !important;
    color: #48bfe3 !important;
}

.profile-theme-midnight .social-link-view:hover {
    background: rgba(72, 191, 227, 0.1) !important;
    box-shadow: 0 0 10px rgba(72, 191, 227, 0.3);
}

/* Theme-specific social link styling - Forest */
.profile-theme-forest .social-link-view {
    border-color: rgba(139, 195, 74, 0.3) !important;
    color: #8bc34a !important;
}

.profile-theme-forest .social-link-view:hover {
    background: rgba(139, 195, 74, 0.1) !important;
    box-shadow: 0 0 10px rgba(139, 195, 74, 0.3);
}

/* Theme-specific social link styling - Neon Glow */
.profile-theme-neon-glow .social-link-view {
    border-color: rgba(57, 255, 20, 0.3) !important;
    color: #39ff14 !important;
}

.profile-theme-neon-glow .social-link-view:hover {
    background: rgba(57, 255, 20, 0.1) !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
}

/* Theme-specific social link styling - Minimal Light */
.profile-theme-minimal-light .social-link-view {
    border-color: rgba(125, 25, 255, 0.3) !important;
    color: #7d19ff !important;
}

.profile-theme-minimal-light .social-link-view:hover {
    background: rgba(125, 25, 255, 0.1) !important;
    box-shadow: 0 0 10px rgba(125, 25, 255, 0.2);
}

/* Theme-specific social link styling - Sakura */
.profile-theme-sakura .social-link-view {
    border-color: rgba(255, 182, 193, 0.3) !important;
    color: #ffb6c1 !important;
}

.profile-theme-sakura .social-link-view:hover {
    background: rgba(255, 182, 193, 0.1) !important;
    box-shadow: 0 0 10px rgba(255, 182, 193, 0.3);
}

/* Theme-specific social link styling - Golden Hour */
.profile-theme-golden-hour .social-link-view {
    border-color: rgba(201, 166, 107, 0.3) !important;
    color: #c9a66b !important;
}

.profile-theme-golden-hour .social-link-view:hover {
    background: rgba(201, 166, 107, 0.1) !important;
    box-shadow: 0 0 10px rgba(201, 166, 107, 0.3);
}

/* Theme-specific social link styling - Matrix */
.profile-theme-matrix .social-link-view {
    border-color: rgba(0, 255, 0, 0.3) !important;
    color: #00ff00 !important;
}

.profile-theme-matrix .social-link-view:hover {
    background: rgba(0, 255, 0, 0.1) !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
}

/* ================================================================
   Server Listing Card Styles
   ================================================================ */

.server-listing-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid color-mix(in srgb, var(--profile-accent, #7d19ff) 30%, transparent);
    border-left: 3px solid var(--profile-accent, #7d19ff);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.server-listing-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--profile-accent, #7d19ff);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.server-listing-card.has-listing {
    border-color: var(--profile-accent, #7d19ff);
    border-left-color: var(--profile-accent, #7d19ff);
}

.server-listing-card.no-bot {
    opacity: 0.7;
}

.server-listing-card.most-active-card {
    border-width: 2px;
    border-color: var(--profile-accent, #7d19ff);
    border-left-color: var(--profile-accent, #7d19ff);
    background: rgba(255,255,255,0.05);
}

/* Most active card in view mode - match #viewModeAboutMe background */
.server-listing-card.has-listing.most-active-card.view-mode-server-item,
#mostActiveServerCard {
    background: color-mix(in srgb, var(--profile-accent-secondary, #F4CA81) 10%, transparent);
}

.server-listing-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.server-listing-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--profile-accent, rgba(255,255,255,0.2));
}

.server-listing-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Owner badge styling in server listing cards - modern and clean */
.server-listing-card .badge.bg-warning {
    background: linear-gradient(135deg, var(--profile-accent-secondary, #F4CA81), var(--profile-accent, #7d19ff)) !important;
    color: #fff !important;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 12px;
    border: none;
    margin: 0;
    box-shadow: 0 2px 6px rgba(125, 25, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    white-space: nowrap;
    align-self: center;
}

.server-listing-name {
    margin: 0;
}

.server-listing-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    display: inline-block;
    text-decoration: none;
}

.server-listing-name:hover {
    text-decoration: underline;
}

.server-listing-body {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--profile-accent, #7d19ff) 20%, transparent);
}

.server-listing-description {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.server-listing-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.server-listing-tags .tag {
    font-size: 0.8rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--profile-accent, #7d19ff) 20%, transparent);
    color: rgba(255,255,255,0.9);
    border: 1px solid color-mix(in srgb, var(--profile-accent, #7d19ff) 40%, transparent);
}

.server-listing-tags .tag.primary {
    background: var(--profile-accent, #7d19ff);
    color: #fff;
    font-weight: 500;
}

/* Profile Header Icon Enhancements */
.profile-server-icon.has-listing {
    border: 2px solid var(--profile-accent, #7d19ff);
    box-shadow: 0 0 8px rgba(125, 25, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-server-icon.has-listing:hover {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(125, 25, 255, 0.6);
}

.profile-server-icon.has-listing img {
    border-radius: 50%;
}

/* Join Button Styles */
.server-listing-card .join-btn {
    background: var(--profile-accent, #5865F2);
    border: none;
    color: var(--profile-text-color, #fff);
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* Make Discord icon inherit text color in all join buttons */
.join-btn i.fab.fa-discord,
.join-btn i.fa-discord,
.server-listing-card .join-btn i.fab.fa-discord,
.server-listing-card .join-btn i.fa-discord {
    color: inherit;
}

.server-listing-card .join-btn:hover {
    background: var(--profile-accent-secondary, #4752c4);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--profile-accent, #5865F2) 40%, transparent);
}

.server-listing-card .join-btn.disabled {
    background: color-mix(in srgb, var(--profile-accent, #5865F2) 30%, transparent);
    cursor: not-allowed;
    opacity: 0.6;
}

.server-listing-card .join-btn.disabled:hover {
    transform: none;
}

/* Bot Install CTA */
.bot-install-cta {
    background: linear-gradient(135deg, rgba(125, 25, 255, 0.15), rgba(244, 202, 129, 0.1));
    border: 1px solid rgba(125, 25, 255, 0.3);
    border-radius: 12px;
}

.bot-install-cta h6 {
    color: #fff;
    font-weight: 600;
}

.bot-install-cta p {
    color: rgba(255,255,255,0.8);
}

.bot-install-cta i.fa-robot {
    color: var(--profile-accent, #7d19ff);
}

/* ================================================================
   Desktop Server Card Grid Layout
   ================================================================ */

/* Server roles list - modern grid layout on desktop */
@media (min-width: 992px) {
    /* Server Admin At and Moderating At - modern grid layout */
    #viewModeAdminServersList,
    #viewModeModServersList,
    #profile-section .profile-field-group:has-label[for*="Admin"] .server-roles-list,
    #profile-section .profile-field-group:has-label[for*="Moderating"] .server-roles-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 0;
        background: transparent;
    }
    
    /* Public view - also apply grid to server-roles-list in admin/mod sections */
    #profile-section .profile-field-group .server-roles-list:has(.server-listing-card) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 0;
        background: transparent;
    }
    
    /* Exception: Most Active In should remain single column */
    #viewModeMostActiveSection .server-roles-list,
    .profile-field-group:has(.most-active-card) .server-roles-list {
        display: block !important;
        grid-template-columns: none !important;
    }
    
    /* Ensure cards in grid don't have bottom margin (gap handles it) */
    #viewModeAdminServersList .server-listing-card,
    #viewModeModServersList .server-listing-card,
    #profile-section .server-roles-list .server-listing-card {
        margin-bottom: 0;
    }
    
    /* Most active card - full width, single column display */
    #viewModeMostActiveList,
    #viewModeMostActiveSection .server-roles-list {
        display: block;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: visible !important;
    }
    
    #viewModeMostActiveSection .server-listing-card,
    #mostActiveServerCard {
        max-width: 100%;
        margin-bottom: 0;
    }
    
    /* Server listing card desktop enhancements - more spacious and modern */
    #profile-section .server-listing-card {
        padding: 1.75rem;
        min-height: auto;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .server-listing-header {
        gap: 1.25rem;
        margin-bottom: 0;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    
    .server-listing-icon {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
    }
    
    .server-listing-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .server-listing-name {
        font-size: 1.15rem;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
        margin: 0;
    }
    
    /* Owner badge in desktop view */
    .server-listing-header .badge.bg-warning {
        font-size: 0.75rem;
        padding: 0.35rem 0.7rem;
    }
    
    .server-listing-body {
        margin-top: 1rem;
        padding-top: 1rem;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .server-listing-description {
        font-size: 0.95rem;
        line-height: 1.7;
        margin-bottom: 1rem;
        color: rgba(255, 255, 255, 0.85);
        /* Allow full text display, no truncation */
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        display: block !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .server-listing-tags {
        gap: 0.5rem;
        margin-top: auto;
        padding-top: 0.5rem;
    }
    
    /* Join button positioning */
    .server-listing-header .join-btn {
        margin-left: auto;
        flex-shrink: 0;
    }
}

/* Large desktop - 3 column grid for servers */
@media (min-width: 1400px) {
    #viewModeAdminServersList,
    #viewModeModServersList {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
    
    /* Keep most active as single column */
    #viewModeMostActiveList,
    #viewModeMostActiveSection .server-roles-list {
        display: block;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: visible !important;
    }
    
    /* Even more spacious on large screens */
    #profile-section .server-listing-card {
        padding: 2rem;
    }
    
    .server-listing-description {
        font-size: 1rem;
        line-height: 1.75;
    }
}

/* Mobile responsiveness - single column layout */
@media (max-width: 991px) {
    #profile-section .server-roles-list,
    #viewModeAdminServersList,
    #viewModeModServersList {
        display: block !important;
        grid-template-columns: none !important;
        gap: 1rem;
    }
    
    #profile-section .server-listing-card {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .server-listing-description {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

/* Theme-specific server listing card overrides */

/* Cyberpunk Theme */
.profile-theme-cyberpunk .server-listing-card {
    background: rgba(0, 0, 0, 0.3);
    border-color: color-mix(in srgb, var(--profile-accent, rgba(255, 0, 255, 0.3)) 30%, transparent);
    border-left-color: var(--profile-accent, rgba(255, 0, 255, 0.5));
}

.profile-theme-cyberpunk .server-listing-card.has-listing {
    border-color: var(--profile-accent, #00ffff);
    border-left-color: var(--profile-accent, #00ffff);
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #00ffff) 20%, transparent);
}

.profile-theme-cyberpunk .server-listing-card.most-active-card {
    border-color: var(--profile-accent, #00ffff);
    border-left-color: var(--profile-accent, #00ffff);
    box-shadow: 0 0 15px color-mix(in srgb, var(--profile-accent, #00ffff) 30%, transparent);
}

.profile-theme-cyberpunk .server-listing-tags .tag.primary {
    background: var(--profile-accent, linear-gradient(135deg, #ff00ff, #00ffff));
}

.profile-theme-cyberpunk .server-listing-name {
    color: var(--profile-accent, #00ffff);
}

.profile-theme-cyberpunk .server-listing-name:hover {
    text-shadow: 0 0 8px var(--profile-accent, #00ffff);
}

.profile-theme-cyberpunk .profile-server-icon.has-listing {
    border-color: var(--profile-accent, #00ffff);
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #00ffff) 50%, transparent);
}

.profile-theme-cyberpunk .bot-install-cta {
    background: linear-gradient(135deg, color-mix(in srgb, var(--profile-accent, #ff00ff) 15%, transparent), color-mix(in srgb, var(--profile-accent-secondary, #00ffff) 10%, transparent));
    border-color: var(--profile-accent, #00ffff);
}

/* Retrowave Theme */
.profile-theme-retrowave .server-listing-card {
    background: rgba(26, 5, 51, 0.4);
    border-color: color-mix(in srgb, var(--profile-accent, rgba(255, 107, 157, 0.3)) 30%, transparent);
    border-left-color: var(--profile-accent, rgba(255, 107, 157, 0.5));
}

.profile-theme-retrowave .server-listing-card.has-listing {
    border-color: var(--profile-accent, #ffd93d);
    border-left-color: var(--profile-accent, #ffd93d);
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #ffd93d) 20%, transparent);
}

.profile-theme-retrowave .server-listing-tags .tag.primary {
    background: var(--profile-accent, linear-gradient(135deg, #ff6b9d, #ffd93d));
}

.profile-theme-retrowave .server-listing-name {
    color: var(--profile-accent, #ffd93d);
}

.profile-theme-retrowave .profile-server-icon.has-listing {
    border-color: var(--profile-accent, #ffd93d);
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #ffd93d) 50%, transparent);
}

.profile-theme-retrowave .bot-install-cta {
    background: linear-gradient(135deg, color-mix(in srgb, var(--profile-accent, #ff6b9d) 15%, transparent), color-mix(in srgb, var(--profile-accent-secondary, #ffd93d) 10%, transparent));
    border-color: var(--profile-accent, #ffd93d);
}

/* Midnight Theme */
.profile-theme-midnight .server-listing-card {
    background: rgba(12, 12, 30, 0.4);
    border-color: color-mix(in srgb, var(--profile-accent, rgba(94, 96, 206, 0.3)) 30%, transparent);
    border-left-color: var(--profile-accent, rgba(94, 96, 206, 0.5));
}

.profile-theme-midnight .server-listing-card.has-listing {
    border-color: var(--profile-accent, #48bfe3);
    border-left-color: var(--profile-accent, #48bfe3);
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #48bfe3) 20%, transparent);
}

.profile-theme-midnight .server-listing-tags .tag.primary {
    background: var(--profile-accent, linear-gradient(135deg, #5e60ce, #48bfe3));
}

.profile-theme-midnight .server-listing-name {
    color: var(--profile-accent, #48bfe3);
}

.profile-theme-midnight .profile-server-icon.has-listing {
    border-color: var(--profile-accent, #48bfe3);
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #48bfe3) 50%, transparent);
}

.profile-theme-midnight .bot-install-cta {
    background: linear-gradient(135deg, color-mix(in srgb, var(--profile-accent, #5e60ce) 15%, transparent), color-mix(in srgb, var(--profile-accent-secondary, #48bfe3) 10%, transparent));
    border-color: var(--profile-accent, #48bfe3);
}

/* Forest Theme */
.profile-theme-forest .server-listing-card {
    background: rgba(10, 26, 10, 0.4);
    border-color: color-mix(in srgb, var(--profile-accent, rgba(76, 175, 80, 0.3)) 30%, transparent);
    border-left-color: var(--profile-accent, rgba(76, 175, 80, 0.5));
}

.profile-theme-forest .server-listing-card.has-listing {
    border-color: var(--profile-accent, #8bc34a);
    border-left-color: var(--profile-accent, #8bc34a);
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #8bc34a) 20%, transparent);
}

.profile-theme-forest .server-listing-tags .tag.primary {
    background: var(--profile-accent, linear-gradient(135deg, #4caf50, #8bc34a));
}

.profile-theme-forest .server-listing-name {
    color: var(--profile-accent, #8bc34a);
}

.profile-theme-forest .profile-server-icon.has-listing {
    border-color: var(--profile-accent, #8bc34a);
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #8bc34a) 50%, transparent);
}

.profile-theme-forest .bot-install-cta {
    background: linear-gradient(135deg, color-mix(in srgb, var(--profile-accent, #4caf50) 15%, transparent), color-mix(in srgb, var(--profile-accent-secondary, #8bc34a) 10%, transparent));
    border-color: var(--profile-accent, #8bc34a);
}

/* Neon Glow Theme */
.profile-theme-neon-glow .server-listing-card {
    background: rgba(5, 5, 5, 0.6);
    border-color: color-mix(in srgb, var(--profile-accent, rgba(57, 255, 20, 0.3)) 30%, transparent);
    border-left-color: var(--profile-accent, rgba(57, 255, 20, 0.5));
}

.profile-theme-neon-glow .server-listing-card.has-listing {
    border-color: var(--profile-accent, #39ff14);
    border-left-color: var(--profile-accent, #39ff14);
    box-shadow: 0 0 15px color-mix(in srgb, var(--profile-accent, #39ff14) 40%, transparent);
}

.profile-theme-neon-glow .server-listing-tags .tag.primary {
    background: var(--profile-accent, #39ff14);
    color: #000;
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #39ff14) 50%, transparent);
}

.profile-theme-neon-glow .server-listing-name {
    color: var(--profile-accent, #39ff14);
    text-shadow: 0 0 8px color-mix(in srgb, var(--profile-accent, #39ff14) 50%, transparent);
}

.profile-theme-neon-glow .profile-server-icon.has-listing {
    border-color: var(--profile-accent, #39ff14);
    box-shadow: 0 0 15px color-mix(in srgb, var(--profile-accent, #39ff14) 60%, transparent);
}

.profile-theme-neon-glow .bot-install-cta {
    background: color-mix(in srgb, var(--profile-accent, #39ff14) 10%, transparent);
    border-color: var(--profile-accent, #39ff14);
    box-shadow: 0 0 15px color-mix(in srgb, var(--profile-accent, #39ff14) 20%, transparent);
}

/* Minimal Light Theme */
.profile-theme-minimal-light .server-listing-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: color-mix(in srgb, var(--profile-accent, rgba(0, 0, 0, 0.1)) 30%, transparent);
    border-left-color: var(--profile-accent, rgba(125, 25, 255, 0.5));
}

.profile-theme-minimal-light .server-listing-card.has-listing {
    border-color: var(--profile-accent, #7d19ff);
    border-left-color: var(--profile-accent, #7d19ff);
}

.profile-theme-minimal-light .server-listing-name {
    color: #1a1a1a;
}

.profile-theme-minimal-light .server-listing-description {
    color: #495057;
}

.profile-theme-minimal-light .server-listing-tags .tag {
    background: rgba(0, 0, 0, 0.05);
    color: #495057;
}

.profile-theme-minimal-light .server-listing-tags .tag.primary {
    background: var(--profile-accent, #7d19ff);
    color: #fff;
}

.profile-theme-minimal-light .profile-server-icon.has-listing {
    border-color: var(--profile-accent, #7d19ff);
    box-shadow: 0 0 8px color-mix(in srgb, var(--profile-accent, #7d19ff) 30%, transparent);
}

.profile-theme-minimal-light .bot-install-cta {
    background: color-mix(in srgb, var(--profile-accent, #7d19ff) 10%, transparent);
    border-color: var(--profile-accent, #7d19ff);
}

.profile-theme-minimal-light .bot-install-cta h6 {
    color: #1a1a1a;
}

.profile-theme-minimal-light .bot-install-cta p {
    color: #495057;
}

/* Sakura Theme */
.profile-theme-sakura .server-listing-card {
    background: rgba(26, 15, 26, 0.4);
    border-color: color-mix(in srgb, var(--profile-accent, rgba(255, 182, 193, 0.3)) 30%, transparent);
    border-left-color: var(--profile-accent, rgba(255, 182, 193, 0.5));
}

.profile-theme-sakura .server-listing-card.has-listing {
    border-color: var(--profile-accent, #ff69b4);
    border-left-color: var(--profile-accent, #ff69b4);
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #ff69b4) 20%, transparent);
}

.profile-theme-sakura .server-listing-tags .tag.primary {
    background: var(--profile-accent, linear-gradient(135deg, #ff69b4, #ff1493));
}

.profile-theme-sakura .server-listing-name {
    color: var(--profile-accent, #ffb6c1);
}

.profile-theme-sakura .profile-server-icon.has-listing {
    border-color: var(--profile-accent, #ff69b4);
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #ff69b4) 50%, transparent);
}

.profile-theme-sakura .bot-install-cta {
    background: linear-gradient(135deg, color-mix(in srgb, var(--profile-accent, #ff69b4) 15%, transparent), color-mix(in srgb, var(--profile-accent-secondary, #ffb6c1) 10%, transparent));
    border-color: var(--profile-accent, #ff69b4);
}

/* Golden Hour Theme */
.profile-theme-golden-hour .server-listing-card {
    background: rgba(26, 21, 16, 0.4);
    border-color: color-mix(in srgb, var(--profile-accent, rgba(212, 165, 116, 0.3)) 30%, transparent);
    border-left-color: var(--profile-accent, rgba(212, 165, 116, 0.5));
}

.profile-theme-golden-hour .server-listing-card.has-listing {
    border-color: var(--profile-accent, #ffa500);
    border-left-color: var(--profile-accent, #ffa500);
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #ffa500) 20%, transparent);
}

.profile-theme-golden-hour .server-listing-tags .tag.primary {
    background: var(--profile-accent, linear-gradient(135deg, #ffa500, #ffd700));
    color: #1a1510;
}

.profile-theme-golden-hour .server-listing-name {
    color: var(--profile-accent, #c9a66b);
}

.profile-theme-golden-hour .profile-server-icon.has-listing {
    border-color: var(--profile-accent, #ffa500);
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #ffa500) 50%, transparent);
}

.profile-theme-golden-hour .bot-install-cta {
    background: linear-gradient(135deg, color-mix(in srgb, var(--profile-accent, #ffa500) 15%, transparent), color-mix(in srgb, var(--profile-accent-secondary, #ffd700) 10%, transparent));
    border-color: var(--profile-accent, #ffa500);
}

/* Matrix Theme */
.profile-theme-matrix .server-listing-card {
    background: rgba(0, 0, 0, 0.6);
    border-color: color-mix(in srgb, var(--profile-accent, rgba(0, 255, 0, 0.3)) 30%, transparent);
    border-left-color: var(--profile-accent, rgba(0, 255, 0, 0.5));
}

.profile-theme-matrix .server-listing-card.has-listing {
    border-color: var(--profile-accent, #00ff00);
    border-left-color: var(--profile-accent, #00ff00);
    box-shadow: 0 0 15px color-mix(in srgb, var(--profile-accent, #00ff00) 40%, transparent);
}

.profile-theme-matrix .server-listing-tags .tag.primary {
    background: var(--profile-accent, #00ff00);
    color: #000;
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #00ff00) 50%, transparent);
}

.profile-theme-matrix .server-listing-name {
    color: var(--profile-accent, #00ff00);
    text-shadow: 0 0 8px color-mix(in srgb, var(--profile-accent, #00ff00) 50%, transparent);
    font-family: monospace;
}

.profile-theme-matrix .profile-server-icon.has-listing {
    border-color: var(--profile-accent, #00ff00);
    box-shadow: 0 0 15px color-mix(in srgb, var(--profile-accent, #00ff00) 60%, transparent);
}

.profile-theme-matrix .bot-install-cta {
    background: color-mix(in srgb, var(--profile-accent, #00ff00) 10%, transparent);
    border-color: var(--profile-accent, #00ff00);
    box-shadow: 0 0 15px color-mix(in srgb, var(--profile-accent, #00ff00) 20%, transparent);
}

/* ================================================================
   PROFILE CUSTOMIZED - Server Listing Card Accent Integration
   (Placed after theme rules to ensure custom colors take precedence)
   ================================================================ */

/* Server listing card - use custom accent for borders and highlights */
.profile-customized .server-listing-card {
    border-color: color-mix(in srgb, var(--profile-accent, #7d19ff) 30%, transparent) !important;
    border-left-color: var(--profile-accent, #7d19ff) !important;
}

.profile-customized .server-listing-card.has-listing {
    border-color: var(--profile-accent, #7d19ff) !important;
    border-left-color: var(--profile-accent, #7d19ff) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--profile-accent, #7d19ff) 20%, transparent);
}

.profile-customized .server-listing-card.most-active-card {
    border-width: 2px !important;
    border-color: var(--profile-accent, #7d19ff) !important;
    border-left-color: var(--profile-accent, #7d19ff) !important;
    background: color-mix(in srgb, var(--profile-accent-secondary, #F4CA81) 10%, transparent) !important;
}

/* Most active card in view mode - match #viewModeAboutMe background */
.profile-customized .server-listing-card.has-listing.most-active-card.view-mode-server-item,
.profile-customized #mostActiveServerCard {
    background: color-mix(in srgb, var(--profile-accent-secondary, #F4CA81) 10%, transparent) !important;
}

.profile-customized .server-listing-card:hover {
    border-color: var(--profile-accent, #7d19ff) !important;
    border-left-color: var(--profile-accent, #7d19ff) !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--profile-accent, #7d19ff) 25%, transparent);
}

/* Server icon border */
.profile-customized .server-listing-icon,
.profile-customized .server-icon-fallback {
    border-color: color-mix(in srgb, var(--profile-accent, #7d19ff) 50%, transparent) !important;
}

/* Server name link color */
.profile-customized .server-listing-name {
    color: var(--profile-text-color, #fff);
}

.profile-customized .server-listing-name:hover {
    color: var(--profile-accent, #7d19ff);
}

/* Server tags */
.profile-customized .server-listing-tags .tag {
    background: color-mix(in srgb, var(--profile-accent, #7d19ff) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--profile-accent, #7d19ff) 30%, transparent);
    color: var(--profile-text-color, #fff);
}

.profile-customized .server-listing-tags .tag.primary {
    background: var(--profile-accent, #7d19ff);
    color: #fff;
}

/* Server description text */
.profile-customized .server-listing-description {
    color: var(--profile-text-secondary, rgba(255,255,255,0.8));
}

/* Bot install CTA */
.profile-customized .bot-install-cta {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--profile-accent, #7d19ff) 15%, transparent), 
        color-mix(in srgb, var(--profile-accent-secondary, #F4CA81) 10%, transparent));
    border-color: color-mix(in srgb, var(--profile-accent, #7d19ff) 40%, transparent);
}

/* ================================================================
   Most Active Discord Select Dropdown - Theme Support
   ================================================================ */

/* Base styling for Most Active Discord select */
#mostActiveServer {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

#mostActiveServer option {
    background: #1a1a1a;
    color: #fff;
    padding: 0.5rem;
}

/* Theme-specific styling for Most Active Discord select */

/* Cyberpunk Theme */
.profile-theme-cyberpunk #mostActiveServer {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    color: #00ffff !important;
}

.profile-theme-cyberpunk #mostActiveServer:focus {
    border-color: #00ffff !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.2), 0 0 15px rgba(0, 255, 255, 0.3) !important;
}

.profile-theme-cyberpunk #mostActiveServer option {
    background: #000 !important;
    color: #00ffff !important;
}

/* Retrowave Theme */
.profile-theme-retrowave #mostActiveServer {
    background: rgba(26, 5, 51, 0.6) !important;
    border: 1px solid rgba(255, 107, 157, 0.3) !important;
    color: #ffd93d !important;
}

.profile-theme-retrowave #mostActiveServer:focus {
    border-color: #ffd93d !important;
    box-shadow: 0 0 0 3px rgba(255, 217, 61, 0.2), 0 0 15px rgba(255, 217, 61, 0.3) !important;
}

.profile-theme-retrowave #mostActiveServer option {
    background: #1a0533 !important;
    color: #ffd93d !important;
}

/* Midnight Theme */
.profile-theme-midnight #mostActiveServer {
    background: rgba(12, 12, 30, 0.6) !important;
    border: 1px solid rgba(72, 191, 227, 0.3) !important;
    color: #48bfe3 !important;
}

.profile-theme-midnight #mostActiveServer:focus {
    border-color: #48bfe3 !important;
    box-shadow: 0 0 0 3px rgba(72, 191, 227, 0.2), 0 0 15px rgba(72, 191, 227, 0.3) !important;
}

.profile-theme-midnight #mostActiveServer option {
    background: #0c0c1e !important;
    color: #48bfe3 !important;
}

/* Forest Theme */
.profile-theme-forest #mostActiveServer {
    background: rgba(10, 26, 10, 0.6) !important;
    border: 1px solid rgba(139, 195, 74, 0.3) !important;
    color: #8bc34a !important;
}

.profile-theme-forest #mostActiveServer:focus {
    border-color: #8bc34a !important;
    box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.2), 0 0 15px rgba(139, 195, 74, 0.3) !important;
}

.profile-theme-forest #mostActiveServer option {
    background: #0a1a0a !important;
    color: #8bc34a !important;
}

/* Neon Glow Theme */
.profile-theme-neon-glow #mostActiveServer {
    background: rgba(5, 5, 5, 0.8) !important;
    border: 1px solid rgba(57, 255, 20, 0.3) !important;
    color: #39ff14 !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.2) !important;
}

.profile-theme-neon-glow #mostActiveServer:focus {
    border-color: #39ff14 !important;
    box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.2), 0 0 20px rgba(57, 255, 20, 0.5) !important;
}

.profile-theme-neon-glow #mostActiveServer option {
    background: #050505 !important;
    color: #39ff14 !important;
}

/* Minimal Light Theme */
.profile-theme-minimal-light #mostActiveServer {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1a1a !important;
}

.profile-theme-minimal-light #mostActiveServer:focus {
    border-color: #7d19ff !important;
    box-shadow: 0 0 0 3px rgba(125, 25, 255, 0.1) !important;
}

.profile-theme-minimal-light #mostActiveServer option {
    background: #fff !important;
    color: #1a1a1a !important;
}

/* Sakura Theme */
.profile-theme-sakura #mostActiveServer {
    background: rgba(26, 15, 26, 0.6) !important;
    border: 1px solid rgba(255, 105, 180, 0.3) !important;
    color: #ffb6c1 !important;
}

.profile-theme-sakura #mostActiveServer:focus {
    border-color: #ff69b4 !important;
    box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.2), 0 0 15px rgba(255, 105, 180, 0.3) !important;
}

.profile-theme-sakura #mostActiveServer option {
    background: #1a0f1a !important;
    color: #ffb6c1 !important;
}

/* Golden Hour Theme */
.profile-theme-golden-hour #mostActiveServer {
    background: rgba(26, 21, 16, 0.6) !important;
    border: 1px solid rgba(255, 165, 0, 0.3) !important;
    color: #c9a66b !important;
}

.profile-theme-golden-hour #mostActiveServer:focus {
    border-color: #ffa500 !important;
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.2), 0 0 15px rgba(255, 165, 0, 0.3) !important;
}

.profile-theme-golden-hour #mostActiveServer option {
    background: #1a1510 !important;
    color: #c9a66b !important;
}

/* Matrix Theme */
.profile-theme-matrix #mostActiveServer {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(0, 255, 0, 0.3) !important;
    color: #00ff00 !important;
    font-family: monospace !important;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2) !important;
}

.profile-theme-matrix #mostActiveServer:focus {
    border-color: #00ff00 !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.2), 0 0 20px rgba(0, 255, 0, 0.5) !important;
}

.profile-theme-matrix #mostActiveServer option {
    background: #000 !important;
    color: #00ff00 !important;
    font-family: monospace !important;
}

/* Customized Profile (User Custom Colors) */
.profile-customized #mostActiveServer {
    background: var(--profile-bg-secondary, #16213e) !important;
    border-color: var(--profile-border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--profile-text-color, #fff) !important;
}

.profile-customized #mostActiveServer:focus {
    border-color: var(--profile-accent, #7d19ff) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--profile-accent, #7d19ff) 25%, transparent) !important;
}

.profile-customized #mostActiveServer option {
    background: var(--profile-bg-secondary, #16213e) !important;
    color: var(--profile-text-color, #fff) !important;
}

/* Label styling for Most Active Discord */
.profile-field-group label[for="mostActiveServer"],
.profile-field-group .form-label:has(+ select#mostActiveServer) {
    display: block;
    margin-bottom: 0.5rem;
}

/* Ensure the small helper text is visible */
.profile-field-group small.text-muted {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Ensure Most Active Discord section is always visible */
#mostActiveDiscordSection {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#mostActiveDiscordSection .form-label {
    display: block !important;
    visibility: visible !important;
    margin-bottom: 0.5rem !important;
}

#mostActiveDiscordSection select#mostActiveServer {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    min-height: 38px !important;
}