/* =========================================
   header.css - Finalized with Compact Mobile & Desktop Fixes
   ========================================= */

:root {
    --mobile-nav-height: 65px;
    --mobile-nav-safe-padding: 80px;
    --student-search-bar-height: 45px;
    --text-dark: #1f2937;
    --text-muted: #6c757d;
    --card-bg-default: #ffffff;
    --card-border: #e0e0e0;
    --page-bg: #f8f9fa;
    --primary-color: #007bff;
    --theme-bg: #f8f9fa;
}

/* --- 1. GENERAL HEADER LAYOUT (Light Themes) --- */
.main-header {
    background-color: rgba(255, 255, 255, 0.875) !important; /* Brighter white for crisp glass effect */
    backdrop-filter: blur(1px) saturate(180%) !important; /* Higher saturation to pop the colors underneath */
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important; /* Subtle dark border for definition */
    border-top: none !important;
    width: 100%;
    max-width: 1200px !important;
    height: 95px;
    position: fixed;
    top: 0; left: 0; right: 0;
    margin: 0 auto !important;
    z-index: 1000;
    display: block;
    border-radius: 0 0 16px 16px;
}

.header-container {
    max-width: 1200px !important;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

/* --- 2. LOGO & NAV --- */
.logo-icon {
    display: inline-flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}
.logo-icon img {
    height: 80px;
    width: auto;
    object-fit: contain;
    transition: height 0.2s ease;
}

.main-nav { display: flex; align-items: center; gap: 15px; transition: gap 0.2s ease; }
.main-nav a, .main-nav .dropdown-toggle {
    color: var(--text-dark, #1f2937);
    text-decoration: none;
    font-weight: 500;
}
.main-nav a:hover, .main-nav .dropdown-toggle:hover {
    color: var(--primary-color, #007bff);
}

/* --- DESKTOP ICON LINKS (Outline & Pastel Variants) --- */
.main-nav .nav-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px !important;     
    height: 68px !important;    
    font-size: 45px !important; /* Lighter, cleaner outline size */
    padding: 0 !important;      
    border-radius: 16px;        /* Modern squircle shape */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
}

.main-nav .nav-icon-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* --- UNIFORM HEADER NAV ICONS --- */
.main-nav .nav-icon-link {
    background-color: transparent !important;
    border: 2px solid var(--card-border, #e0e0e0) !important;
    color: var(--text-dark, #1f2937) !important;
    box-shadow: none !important;
}

.main-nav .nav-icon-link i {
    color: var(--text-dark, #1f2937) !important;
}

.main-nav .nav-icon-link:hover {
    border-color: var(--primary-color, #007bff) !important;
    color: var(--primary-color, #007bff) !important;
}

.main-nav .nav-icon-link:hover i {
    color: var(--primary-color, #007bff) !important;
}

/* --- NEW AI MAGIC BUTTON --- */
.ai-magic-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
    color: white !important;
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.ai-magic-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
    color: white !important;
}
.ai-magic-btn i { font-size: 1.1rem; }

/* --- DESKTOP CREATE FAB (Green in Light Themes, Gold in Dark Themes) --- */
.desktop-create-btn {
    width: 75px;
    height: 75px; 
    border-radius: 22px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: none;
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.35) !important; 
    font-size: 36px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 0 8px;
}

/* Gold Plus Button for Dark Themes & Assistant Mode */
.theme-midnight .desktop-create-btn,
.theme-cyberpunk .desktop-create-btn,
body.assistant-mode-page .desktop-create-btn {
    background: linear-gradient(135deg, #D9AE3F 0%, #B8912E 100%) !important;
    box-shadow: 0 6px 14px rgba(217, 174, 63, 0.35) !important;
    color: #140F0A !important;
}
.desktop-create-btn:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.45); 
}
.desktop-create-dropdown.show .desktop-create-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); 
    transform: rotate(135deg) scale(1.05); 
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.35);
}

/* Make Desktop Avatar Menu Wider for rich content */
.dropdown-menu-right { min-width: max-content; padding: 10px; }

/* --- 3. AVATAR FIX --- */
.nav-avatar, .initials-placeholder { 
    width: 86px !important; 
    height: 86px !important; 
    min-width: 46px;
    border-radius: 50%; 
    object-fit: cover; 
    vertical-align: middle; 
    border: 3px solid gold; 
    transition: border-color 0.2s; 
    box-sizing: border-box;
}

.initials-placeholder {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
}

.nav-avatar:hover, .initials-placeholder:hover { border-color: #ddd; }

/* --- 4. DROPDOWNS --- */
.nav-item-dropdown { position: relative; display: inline-block; }
.dropdown-toggle {
    background: none; border: none;
    color: var(--text-dark, #1f2937);
    font: inherit; cursor: pointer;
    padding: 10px; font-weight: 500;
}
.dropdown-menu { 
    display: none; 
    position: absolute; 
    top: 100%; right: 0;
    background-color: var(--card-bg-default, white); 
    box-shadow: 0 8px 16px rgba(0,0,0,0.15); 
    z-index: 1001; 
    border-radius: 8px; 
    min-width: 160px; 
    border: 1px solid var(--card-border, #eee); 
}
.nav-item-dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a { 
    color: var(--text-dark, #333); 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
}
.dropdown-menu a:hover { background-color: var(--page-bg, #f1f1f1); }

/* --- 4b. AVATAR MENU ICONS & LINKS --- */
.mobile-menu-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text-dark, #333);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 12px;
    transition: background-color 0.1s;
    margin-bottom: 2px;
    width: 100%;
    box-sizing: border-box;
}
.mobile-menu-link:active { background-color: var(--page-bg, #f5f5f7); transform: scale(0.98); }

.icon-box {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.05);
}

.mobile-menu-link span {
    text-align: left;
    flex-grow: 1;
    line-height: 1.2;
}

/* Colorful Icons (Forced to contrast against theme dropdowns) */
.theme-icon     { background: var(--card-bg-default, #eef2ff) !important; color: #6366f1 !important; border-color: #c7d2fe !important;} 
.finance-icon   { background: var(--card-bg-default, #ecfdf5) !important; color: #10b981 !important; border-color: #a7f3d0 !important;} 
.settings-icon  { background: var(--card-bg-default, #f3f4f6) !important; color: #6b7280 !important; border-color: #d1d5db !important;} 
.profile-icon   { background: var(--card-bg-default, #eff6ff) !important; color: #3b82f6 !important; border-color: #bfdbfe !important;} 
.sub-icon       { background: var(--card-bg-default, #fff7ed) !important; color: #f97316 !important; border-color: #fed7aa !important;} 
.lib-icon       { background: var(--card-bg-default, #fdf2f8) !important; color: #ec4899 !important; border-color: #fbcfe8 !important;} 
.logout-icon    { background: var(--card-bg-default, #fef2f2) !important; color: #ef4444 !important; border-color: #fecaca !important;} 
.community-icon { background: var(--card-bg-default, #ecfeff) !important; color: #06b6d4 !important; border-color: #a5f3fc !important;}
.history-icon   { background: var(--card-bg-default, #f3e8ff) !important; color: #a855f7 !important; border-color: #e9d5ff !important;}
.cv-icon        { background: var(--card-bg-default, #eef2ff) !important; color: #4f46e5 !important; border-color: #c7d2fe !important;}

.menu-spacer { height: 5px; }
.menu-divider { height: 1px; background: var(--card-border, #f0f0f0); margin: 8px 0; }

/* .admin-icon-row/.admin-icon-btn (teacher_id 8's admin shortcuts row) had no dedicated styling
   at all — same "Colorful Icons" pastel-badge treatment as the rest of the dropdown. */
.admin-icon-row { display: flex; gap: 8px; margin-bottom: 10px; }
.admin-icon-btn {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    background: var(--card-bg-default, #f3e8ff) !important; color: #a855f7 !important;
    border: 1px solid #e9d5ff !important;
}
.admin-icon-btn:hover { filter: brightness(0.96); }
.logout-link span { color: #dc2626; }

/* --- 5. THEME MODAL STYLING --- */
#theme-options-modal {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center; 
    justify-content: center; 
    padding: 1rem;
}
#theme-options-modal.is-open { display: flex; }

#theme-options-modal .modal-content {
    background-color: var(--card-bg-default); 
    color: var(--text-dark);
    max-width: 350px;
    width: 90%; 
    border-radius: 12px;
    display: flex; 
    flex-direction: column; 
    max-height: 80vh;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden;
}

#theme-options-modal .modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 15px;
    border-bottom: 1px solid var(--card-border);
    background-color: var(--card-bg-default);
}
#theme-options-modal .modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
}

#theme-options-modal .close-modal { display: none !important; }

#theme-options-modal .modal-body {
    padding: 0; 
    overflow-y: auto;
}

#theme-options-modal .theme-option-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

#theme-options-modal .theme-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 14px 15px; 
    cursor: pointer;
    border-bottom: 1px solid var(--card-border);
    font-weight: 500; 
    color: var(--text-dark); 
    border-left: 4px solid transparent;
    transition: background-color 0.2s;
}
#theme-options-modal .theme-item:hover { background-color: var(--theme-bg, #f1f1f1); }
#theme-options-modal .theme-item.active {
    font-weight: 700;
    background-color: var(--theme-bg, #eef);
    border-left-color: var(--theme-color, blue);
}

.theme-label-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.theme-color-indicator {
    display: block !important;
    width: 16px; 
    height: 16px; 
    min-width: 16px;
    border-radius: 50%;
    border: 2px solid var(--card-border); 
    margin-right: 12px; 
    flex-shrink: 0;
    background-color: var(--theme-color, #ccc);
}

#theme-options-modal .modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--card-border);
    display: flex;
    justify-content: flex-end;
    background-color: var(--card-bg-default);
}

#theme-options-modal .modal-footer .btn {
    font-size: 0.85rem;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    background-color: #6c757d; 
    color: white;
    border: none;
    transition: background-color 0.2s;
    margin: 0;
}

/* --- 6. AI CHAT MODAL --- */
#ai-chat-modal {
    display: none; position: fixed; z-index: 2001; inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
#ai-chat-modal.active, #ai-chat-modal.show { display: flex !important; }

/* --- 7. COST BADGES --- */
.menu-cost-badge {
    display: flex; align-items: center; gap: 8px;
    background-color: var(--page-bg, #fafafa); color: var(--text-dark);
    padding: 12px 16px; border-bottom: 1px solid var(--card-border);
    font-size: 0.8rem; font-weight: 600;
    white-space: nowrap; width: auto; min-width: 100%;
    cursor: pointer; user-select: none; transition: background-color 0.2s;
}
.menu-cost-badge i { color: #f59e0b; }

.teacher-stats-row {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--card-border);
    background-color: var(--card-bg-default, #ffffff);
}
.teacher-stat-compact {
    padding: 10px 16px; flex: 1; text-align: center; position: relative; cursor: pointer;
}
.teacher-stat-compact:first-child { border-right: 1px solid var(--card-border); }
.stat-value-compact { font-weight: 700; color: var(--primary-color); display: block; font-size: 1.1rem; }
.stat-label-compact { font-size: 0.75rem; color: var(--text-muted); display: block; }

.desktop-cost-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; margin-right: 15px;
    background-color: var(--page-bg, #f8f9fa);
    border: 1px solid var(--card-border, #e0e0e0);
    border-radius: 20px; font-size: 0.9rem; font-weight: 600; color: var(--text-dark);
    cursor: pointer; transition: all 0.2s ease; user-select: none;
    white-space: nowrap !important; flex-shrink: 1 !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
}
.desktop-cost-badge:hover {
    background-color: #e9ecef; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.desktop-cost-badge i { color: #f59e0b; flex-shrink: 0; }

/* --- 8. NOTIFICATION DOT & ANIMATION (Refined) --- */
.notification-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top; 
    margin-left: 4px;    
    margin-top: -2px;    
    min-width: 16px;     
    height: 26px;        
    width: 26px;
    padding: 0 4px;      
    background-color: #28a745; 
    color: white;
    font-size: 9px;      
    font-weight: 700;
    border-radius: 5rem; 
    border: 1px solid #fff; 
    opacity: 0;          
    transform: scale(0); 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    z-index: 100;
}

.notification-dot.active {
    opacity: 1;
    transform: scale(1); 
    display: inline-flex; 
}

.notification-dot.pulsating {
    background-color: #22c55e; 
    animation: gentle-pulse 2s infinite;
}

@keyframes gentle-pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 5px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.mobile-nav-item .notification-dot {
    position: absolute;
    top: 5px;
    right: 25%;
    margin: 0; 
    min-width: 14px;
    height: 14px;
    font-size: 8px;
    border: 1px solid white;
}

#global-chat-btn-desktop {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0px; 
}

/* --- 9. MOBILE BOTTOM NAV & QUERIES --- */
.mobile-bottom-nav { display: none; }

@media (min-width: 769px) and (max-width: 1100px) {
    .header-container.container { padding-left: 10px; padding-right: 10px; max-width: 100%; }
    .main-nav a, .main-nav .dropdown-toggle { font-size: 0.85rem; padding: 10px 8px; }
    .desktop-cost-badge i { display: none !important; }
    .desktop-cost-badge span { display: inline-block !important; font-size: 0.8rem; }
    .desktop-cost-badge { margin-right: 5px; padding: 6px 10px; gap: 0; }
    
    /* FIX: Utrzymanie dużego logo EduHero (70px) na tabletach i małych laptopach, 
       szczególnie istotne na wysokim na 96px pasku asystenta */
    .logo-icon img { height: 70px; width: auto; }
    .logo-icon img:last-child { height: 70px; width: auto; }
}
@media (max-width: 768px) {
    .desktop-cost-badge { display: none; }
    .main-header { display: none; }
    
    .main-header.guest-nav-active {
        display: block !important;
        position: fixed;
        top: 0;
        z-index: 1002;
    }
    
    .main-header.guest-nav-active .header-container { padding: 0 10px; }
    .guest-link { font-size: 0.8rem !important; margin-right: 8px !important; padding: 6px 12px !important; }
    
    body.teacher-mobile-view, body.student-mobile-view { padding-bottom: var(--mobile-nav-safe-padding) !important; }
    /* style.css has two conflicting @media(max-width:768px) rules for .student-dashboard-wrapper:
       one zeroes margin-top (no !important), a later one re-adds margin-top:1.5rem!important,
       which wins and undoes the first -- can't fix it there (never touch style.css), so winning
       the tie back here instead, later in the cascade with equal !important specificity. This
       replaces the old body{margin-top:-1rem} hack, which was compensating for the wrong box. */
    .student-dashboard-wrapper, .teacher-dashboard-wrapper, .wrapper, .container {
        margin-top: 0 !important;
    }
    body.student-dashboard-page.student-mobile-view, body.teacher-dashboard-page.teacher-mobile-view {
        padding-bottom: calc(var(--mobile-nav-safe-padding) + var(--student-search-bar-height)) !important;
    }
    
    .sticky-search-bar {
        position: sticky; bottom: var(--mobile-nav-height); 
        z-index: 999; background-color: var(--card-bg-default, #ffffff); 
        box-shadow: 0 -2px 8px rgba(0,0,0,0.07);
    }
    
    .mobile-bottom-nav { 
        display: block;
        position: fixed !important; 
        bottom: 0 !important; 
        left: 0 !important; 
        right: 0 !important; 
        width: 100% !important; 
        height: var(--mobile-nav-height); 
        background-color: var(--card-bg-default, #ffffff); 
        border-top: 1px solid var(--card-border, #e0e0e0); 
        z-index: 1000; 
    }
    
    .mobile-nav-content { display: flex; justify-content: space-around; align-items: center; height: 100%; }
    
    .mobile-nav-item { 
        display: flex; flex-direction: column; align-items: center; justify-content: center; 
        color: var(--text-muted); text-decoration: none; font-size: 10px; flex: 1;
    }
    .mobile-nav-item svg { width: 44px; height: 44px; margin-bottom: 2px; }

    .mobile-nav-item .nav-avatar, 
    .mobile-nav-item .initials-placeholder { 
        width: 48px !important; 
        height: 48px !important; 
        min-width: 38px !important;
        max-width: 48px !important;
        font-size: 0.85em !important; 
        border: 2px solid gold;
    }

    .mobile-nav-item-placeholder { width: 70px; flex-shrink: 0; display: block; }
    
    body.teacher-mobile-view .mobile-bottom-nav.teacher-nav { display: block; }
    body.student-mobile-view .mobile-bottom-nav.student-mobile-nav { display: block; }
    body.teacher-mobile-view .teacher-header-apk-icon { display: none; }

    /* --- MOBILE CREATE MENU (GRID FAB) --- */
    .mobile-create-menu { 
        position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%); 
        width: 60px; height: 60px; z-index: 1001; 
    }
    
    .mobile-create-menu.active::before {
        content: ''; position: fixed; top: -100vh; left: -100vw; right: -100vw; bottom: -100vh; 
        background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 99; 
    }

    .mobile-nav-item-create { 
        width: 60px; height: 60px; border-radius: 50%; background-color: #10b981; color: white; 
        display: flex; align-items: center; justify-content: center; 
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); border: 3px solid white; 
        position: relative; z-index: 100; transition: transform 0.3s ease, background-color 0.3s; cursor: pointer;
    }
    .mobile-nav-item-create svg { width: 32px; height: 32px; }
    .mobile-create-menu.active .mobile-nav-item-create { background-color: #ef4444; transform: rotate(135deg); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); }

    .fab-items-wrapper {
        position: absolute; bottom: 80px; left: 50%;
        transform: translateX(-50%) scale(0.9);
        transform-origin: bottom center;
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px;
        width: 320px; max-width: 90vw; padding: 20px;
        background: var(--card-bg-default, #ffffff); border: 1px solid var(--card-border, #e0e0e0);
        border-radius: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.25);
        opacity: 0; visibility: hidden; pointer-events: none; z-index: 101;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    .mobile-create-menu.active .fab-items-wrapper {
        opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) scale(1);
    }

    /* A trailing item left alone in the last row spans both columns instead of leaving an empty slot */
    .fab-items-wrapper .fab-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
    
    .fab-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
        text-decoration: none !important; padding: 12px 8px; border-radius: 16px;
        background: var(--page-bg, #f8f9fa); transition: all 0.2s;
    }
    .fab-item:active { transform: scale(0.95); background: #e2e8f0; }

    .fab-item i {
        width: 46px; height: 46px; border-radius: 50%; color: white;
        display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15); flex-shrink: 0;
    }

    .fab-item:nth-child(1) i { background-color: #10b981; }
    .fab-item:nth-child(2) i { background-color: #f59e0b; } 
    .fab-item:nth-child(3) i { background-color: #3b82f6; } 
    .fab-item:nth-child(4) i { background-color: #ec4899; } 
    .fab-item:nth-child(5) i { background-color: #a855f7; } 
    .fab-item:nth-child(6) i { background-color: #14b8a6; } 

    .fab-label {
        color: var(--text-dark, #1f2937); font-size: 0.85rem; font-weight: 700;
        text-align: center; line-height: 1.2; background: transparent;
        padding: 0; box-shadow: none; white-space: nowrap;
    }

    .mobile-dropdown { position: relative; }
    .mobile-dropdown .dropdown-menu { 
        display: none; position: absolute; bottom: calc(100% + 10px); right: 0;
        top: auto; transform: none; left: auto; min-width: 280px;
        background-color: var(--card-bg-default, white); 
        box-shadow: 0 -4px 16px rgba(0,0,0,0.15); 
        z-index: 1001; border-radius: 8px; border: 1px solid var(--card-border, #eee);
        padding-bottom: 5px;
    }
    .dropdown-menu a { font-size: 1.15rem; padding: 12px 16px; }
    .mobile-dropdown.active .dropdown-menu { display: block; }
}

/* --- 10. MISC --- */
#mobile-tooltip {
    position: fixed; background: rgba(0,0,0,0.9); color: white;
    padding: 8px 12px; border-radius: 6px; font-size: 0.85rem;
    z-index: 10000; pointer-events: none; max-width: 200px;
    text-align: center; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.close-modal { color: var(--text-muted, #aaa); position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; cursor: pointer; display: none; }

#apk-modal .modal-content h2 { margin-top: 0; }
.modal-download-btn { 
    display: block; width: 100%; background-color: #28a745; color: white; 
    padding: 12px 20px; border: none; border-radius: 8px; cursor: pointer; 
    font-size: 16px; font-weight: 500; text-align: center; text-decoration: none; margin-top: 20px; 
}

/* --- 11. SUPER COMPACT MOBILE HEADER --- */
@media (max-width: 480px) {
    .main-header.guest-nav-active .header-container { padding: 0 5px !important; }
    .logo-icon img { height: 32px !important; width: auto; }
    .main-nav { gap: 4px !important; }
    .guest-link { font-size: 11px !important; padding: 5px 8px !important; margin-right: 2px !important; }
    a[href*="register"].guest-link { margin-right: 0 !important; }
}

/* --- NOTIFICATION BELL & DRAWER --- */
.notification-bell-wrapper {
    position: relative; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; 
}
.notification-bell-wrapper i { 
    transition: transform 0.2s; 
}
.notification-bell-wrapper:hover i { 
    transform: rotate(15deg); 
}

.bell-unread-badge {
    position: absolute; top: 0px; right: 0px; background: #dc3545; color: white;
    font-size: 10px; font-weight: bold; min-width: 16px; height: 16px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--card-bg-default, white); transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bell-unread-badge.active { transform: scale(1); }

.notification-drawer {
    position: fixed; top: 0; right: -350px; width: 320px; height: 100vh;
    background: var(--card-bg-default, #ffffff); 
    box-shadow: -5px 0 25px rgba(0,0,0,0.15); z-index: 2000;
    transition: right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); display: flex; flex-direction: column;
}
.notification-drawer.open { right: 0; }

.drawer-header { 
    padding: 20px; 
    border-bottom: 1px solid var(--card-border, #eee); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background: var(--page-bg, #f8f9fa); 
    color: var(--text-dark); 
}
.drawer-header h3 { margin: 0; font-size: 1.1rem; }
.drawer-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted, #666); }
.drawer-content { flex: 1; overflow-y: auto; padding: 0; }

.notif-item { 
    display: flex; gap: 12px; padding: 15px; 
    border-bottom: 1px solid var(--card-border, #f0f0f0); 
    text-decoration: none; color: var(--text-dark, inherit); 
    transition: background 0.2s; position: relative; 
}
.notif-item:hover { background: var(--tile-bg-hover, #f9faff); }

/* The fix for the unread/undead state */
.notif-item.unread { 
    background: var(--modal-tile-bg, #eef2ff); /* Fallback */
    background: color-mix(in srgb, var(--primary-color) 12%, transparent); 
}
.notif-item.unread::before { 
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; 
    background: var(--primary-color, #007bff); 
}

.notif-icon img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 3px; display: block; color: var(--text-dark); }
.notif-msg { font-size: 0.85rem; color: var(--text-muted, #666); display: block; line-height: 1.3; }
.notif-time { font-size: 0.75rem; color: var(--text-muted, #999); margin-top: 5px; display: block; opacity: 0.8; }
.notif-image-preview { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; margin-left: 10px; }

@media (max-width: 768px) {
    .notification-drawer { width: 100%; right: -100%; }
    .mobile-bell-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; }
}

/* --- MOBILE MENU & BADGE FIXES --- */
.dropdown-toggle-mobile { overflow: visible !important; position: relative; }

#mobile-avatar-badge {
    position: absolute; top: -5px !important; right: -5px !important;
    border: 2px solid #ffffff; width: 18px; height: 18px; display: flex;
    align-items: center; justify-content: center; font-size: 10px; z-index: 20;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.menu-bell-wrapper i { font-size: 28px !important; color: var(--text-dark, #333); }
.menu-bell-wrapper { position: relative; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.menu-bell-wrapper:active { transform: scale(0.9); }

.menu-bell-wrapper .bell-unread-badge {
    top: 2px;
    right: 2px;
}
.menu-title { display: none !important; }

.menu-cost-badge-inline {
    display: flex; align-items: center; gap: 8px; background-color: var(--modal-tile-bg, #f0fdf4);
    color: var(--primary-color, #15803d); padding: 6px 12px; border-radius: 20px;
    font-weight: 600; font-size: 0.9rem; border: 1px solid rgba(0,0,0,0.05);
}

.floating-bell-wrapper {
    position: fixed; top: 0px; right: 0px; width: 32px; height: 32px;
    background: var(--card-bg-default, white); border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
    cursor: pointer; transition: transform 0.2s; display: none;
}
.floating-bell-wrapper i { font-size: 16px; color: var(--text-dark, #333); }
.floating-bell-wrapper:active { transform: scale(0.95); }
.floating-bell-wrapper .notification-dot {
    position: absolute; top: -2px; right: -2px; width: 14px; height: 14px;
    background-color: #dc3545; color: white; border-radius: 50%; font-size: 8px;
    display: flex; align-items: center; justify-content: center; border: 1px solid white; font-weight: bold;
}

@media (min-width: 992px) { #mobile-floating-bell { display: none !important; } }
@media (max-width: 991px) { #mobile-floating-bell { display: flex; } }
@media (min-width: 768px) and (max-width: 1024px) { .header-left-group { flex-shrink: 0; } }

/* --- DARK MODE LOGO FIX (Single Image Glow Removed) --- */
.theme-midnight .logo-icon img,
.theme-cyberpunk .logo-icon img {
    filter: none;
    opacity: 1;
}

/* =========================================
   DESKTOP CREATE MENU (GRID DROPDOWN)
   ========================================= */
@media (min-width: 769px) {
    .desktop-create-dropdown { position: relative; height: 100%; display: flex; align-items: center; }

    .desktop-create-dropdown .dropdown-menu {
        top: 75px; right: auto; left: 50%; transform: translateX(-50%) scale(0.95); 
        width: 320px; background-color: rgba(255, 255, 255, 0.95); 
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 10px 40px rgba(0,0,0,0.15);
        border-radius: 24px; padding: 20px; display: none; visibility: hidden; opacity: 0; 
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transform-origin: top center;
    }
    
    .theme-midnight .desktop-create-dropdown .dropdown-menu,
    .theme-cyberpunk .desktop-create-dropdown .dropdown-menu {
        background-color: rgba(30, 41, 59, 0.95);
        border-color: rgba(255,255,255,0.1);
    }

    .desktop-create-dropdown .dropdown-menu::before {
        content: ''; position: absolute; top: -60px; left: -30px; right: -30px; height: 60px; background: transparent; z-index: -1;
    }

    .desktop-create-dropdown.show .dropdown-menu {
        display: grid !important; visibility: visible; opacity: 1; transform: translateX(-50%) scale(1);
    }

    /* A trailing item left alone in the last row spans both columns instead of leaving an empty slot */
    .desktop-create-dropdown .dropdown-menu .desktop-fab-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

    .desktop-fab-item {
        display: flex !important; flex-direction: column !important; align-items: center; justify-content: center;
        gap: 8px; text-decoration: none !important; width: 100%; padding: 16px 8px !important;
        background: var(--page-bg, #f8f9fa) !important; border: 1px solid var(--card-border, #e0e0e0) !important;
        border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.02);
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-sizing: border-box;
    }
    
    .desktop-create-dropdown .dropdown-menu a.desktop-fab-item:hover {
        transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.08); border-color: var(--primary-color) !important;
    }

    .desktop-fab-item i {
        width: 46px; height: 46px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center;
        font-size: 1.4rem; box-shadow: 0 4px 10px rgba(0,0,0,0.15); flex-shrink: 0; transition: transform 0.2s ease;
    }

    .desktop-create-dropdown .dropdown-menu a.desktop-fab-item:hover i { transform: scale(1.1) rotate(5deg); }

    .desktop-fab-item:nth-child(1) i { background-color: #10b981; }
    .desktop-fab-item:nth-child(2) i { background-color: #f59e0b; }
    .desktop-fab-item:nth-child(3) i { background-color: #3b82f6; }
    .desktop-fab-item:nth-child(4) i { background-color: #ec4899; }
    .desktop-fab-item:nth-child(5) i { background-color: #a855f7; }
    .desktop-fab-item:nth-child(6) i { background-color: #14b8a6; }

    .desktop-fab-label {
        background: transparent; color: var(--text-dark, #1f2937); padding: 0; border-radius: 0;
        font-size: 0.85rem; font-weight: 700; box-shadow: none; white-space: nowrap; text-align: center; transition: color 0.2s;
    }
    
    .desktop-fab-item:hover .desktop-fab-label { color: var(--primary-color); }
    .mobile-menu-link span { text-align: left; flex-grow: 1; line-height: 1.2; white-space: nowrap; }
}

/* --- NUKE THE TUTORIAL CLOSE BUTTON --- */
.driver-popover-close-btn {
    display: none !important;
}

/* --- ANIMATION DELAYS FOR GRID MENU --- */
.mobile-create-menu.active .fab-item:nth-child(1), .desktop-create-dropdown.show .desktop-fab-item:nth-child(1) { transition-delay: 0s; animation-delay: 0s; }
.mobile-create-menu.active .fab-item:nth-child(2), .desktop-create-dropdown.show .desktop-fab-item:nth-child(2) { transition-delay: 0.05s; animation-delay: 0.05s; }
.mobile-create-menu.active .fab-item:nth-child(3), .desktop-create-dropdown.show .desktop-fab-item:nth-child(3) { transition-delay: 0.1s; animation-delay: 0.1s; }
.mobile-create-menu.active .fab-item:nth-child(4), .desktop-create-dropdown.show .desktop-fab-item:nth-child(4) { transition-delay: 0.15s; animation-delay: 0.15s; }
.mobile-create-menu.active .fab-item:nth-child(5), .desktop-create-dropdown.show .desktop-fab-item:nth-child(5) { transition-delay: 0.2s; animation-delay: 0.2s; }
.mobile-create-menu.active .fab-item:nth-child(6), .desktop-create-dropdown.show .desktop-fab-item:nth-child(6) { transition-delay: 0.25s; animation-delay: 0.25s; }

/* =========================================
   EASTER EGG TOGGLE IN THEME MENU
   ========================================= */
.easter-egg-menu-item {
    border-top: 1px solid var(--card-border, #e0e0e0);
    margin-top: 10px;
    padding: 12px 15px;
    background-color: var(--page-bg, #f8f9fa); /* Lekko wyróżnione tło */
    border-radius: 0 0 8px 8px; /* Dopasuj do border-radius Twojego dropdownu */
}

.easter-egg-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark, #1f2937);
    margin-bottom: 4px;
}

.easter-egg-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color, #007bff);
}

/* --- ASSISTANT MINIMAL HEADER (Theme-Aware) --- */
.main-header.minimal-header {
    /* Default: Light themes */
    background-color: var(--card-bg-default, #ffffff) !important;
    border-bottom-color: var(--card-border, #e0e0e0) !important;
    max-width: 1200px;
    margin: 0 auto;
    left: 0; right: 0;
    height: 96px !important;
}

.minimal-header .header-container { max-width: 1200px; }

/* Hide unnecessary badges in minimal mode */
.minimal-header .desktop-cost-badge,
.minimal-header .icon-pastel-search,
.minimal-header a[href="/marketing_panel.php"],
.minimal-header .desktop-tutorial-btn {
    display: none !important;
}

/* 1. Desktop Icons: Outline Style (Light Theme Defaults) */
.minimal-header .main-nav .nav-icon-link {
    width: 70px !important; height: 70px !important; 
    font-size: 34px !important; 
    background-color: transparent !important; 
    border: 2px solid var(--card-border, #e0e0e0) !important; 
    border-radius: 18px !important; 
    color: var(--text-muted, #6c757d) !important; 
    box-shadow: none !important;
    display: flex; align-items: center; justify-content: center;
}
.minimal-header .main-nav .nav-icon-link:hover {
    border-color: var(--text-muted, #6c757d) !important;
    color: var(--text-dark, #1f2937) !important; 
}
.minimal-header .main-nav .nav-icon-link i { color: inherit !important; }

/* 2. Avatar & Toggles (Light Theme Defaults) */
.minimal-header .nav-avatar,
.minimal-header .initials-placeholder {
    border: 2px solid var(--card-border, #e0e0e0) !important;
}
.minimal-header .main-nav .dropdown-toggle,
.minimal-header .main-nav .dropdown-toggle i {
    color: var(--text-muted, #6c757d) !important;
}
.minimal-header .main-nav .dropdown-toggle:hover,
.minimal-header .main-nav .dropdown-toggle:hover i {
    color: var(--text-dark, #1f2937) !important;
}

/* 3. Golden Create Button (Constant across themes) */
.minimal-header .desktop-create-btn { 
    width: 78px; height: 78px; 
    background: linear-gradient(135deg, #D9AE3F 0%, #B8912E 100%) !important;
    box-shadow: 0 6px 14px rgba(217, 174, 63, 0.35) !important;
    color: #ffffff !important;
}
.theme-midnight .minimal-header .desktop-create-btn,
.theme-cyberpunk .minimal-header .desktop-create-btn,
body.assistant-mode-page .minimal-header .desktop-create-btn {
    color: #140F0A !important; /* Dark text on dark themes */
}

/* 4. Mobile Bottom Nav (Light Theme Defaults) */
.mobile-bottom-nav.minimal-header {
    background-color: var(--card-bg-default, #ffffff) !important;
    border-top-color: var(--card-border, #e0e0e0) !important;
}
.mobile-bottom-nav.minimal-header .mobile-nav-icon-wrapper {
    background-color: transparent !important;
    border: 1px solid var(--card-border, #e0e0e0) !important;
    color: var(--text-muted, #6c757d) !important;
    box-shadow: none !important;
}
.mobile-bottom-nav.minimal-header .mobile-nav-item:active .mobile-nav-icon-wrapper, 
.mobile-bottom-nav.minimal-header .mobile-nav-item:hover .mobile-nav-icon-wrapper {
    color: var(--text-dark, #1f2937) !important;
    border-color: var(--text-muted, #6c757d) !important;
}
.mobile-bottom-nav.minimal-header .mobile-nav-item-create {
    background-color: transparent !important;
    border: 1px solid #D9AE3F !important;
    color: #D9AE3F !important;
    box-shadow: none !important;
}
.mobile-bottom-nav.minimal-header .mobile-create-menu.active .mobile-nav-item-create {
    background-color: transparent !important;
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

/* =====================================================================
   DARK THEME & ASSISTANT PAGE OVERRIDES (The Brownish/#140F0A Look)
   ===================================================================== */
.theme-midnight .main-header,
.theme-cyberpunk .main-header,
body.assistant-mode-page .main-header {
    background-color: rgba(20, 15, 10, 0.45) !important;
    border: 1px solid rgba(232, 223, 200, 0.15) !important;
    border-top: none !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}

.theme-midnight .mobile-bottom-nav.minimal-header,
.theme-cyberpunk .mobile-bottom-nav.minimal-header,
body.assistant-mode-page .mobile-bottom-nav.minimal-header {
    background-color: #140F0A !important;
    border-top-color: #2a2118 !important;
}

/* Dark Theme Icons & Avatar */
.theme-midnight .minimal-header .main-nav .nav-icon-link,
.theme-cyberpunk .minimal-header .main-nav .nav-icon-link,
body.assistant-mode-page .minimal-header .main-nav .nav-icon-link,
.theme-midnight .mobile-bottom-nav.minimal-header .mobile-nav-icon-wrapper,
.theme-cyberpunk .mobile-bottom-nav.minimal-header .mobile-nav-icon-wrapper,
body.assistant-mode-page .mobile-bottom-nav.minimal-header .mobile-nav-icon-wrapper {
    border-color: #3a3020 !important;
    color: #8F8672 !important;
}

.theme-midnight .minimal-header .main-nav .nav-icon-link:hover,
.theme-cyberpunk .minimal-header .main-nav .nav-icon-link:hover,
body.assistant-mode-page .minimal-header .main-nav .nav-icon-link:hover,
.theme-midnight .mobile-bottom-nav.minimal-header .mobile-nav-item:active .mobile-nav-icon-wrapper,
.theme-cyberpunk .mobile-bottom-nav.minimal-header .mobile-nav-item:active .mobile-nav-icon-wrapper,
body.assistant-mode-page .mobile-bottom-nav.minimal-header .mobile-nav-item:hover .mobile-nav-icon-wrapper,
.theme-midnight .minimal-header .main-nav .dropdown-toggle:hover,
.theme-cyberpunk .minimal-header .main-nav .dropdown-toggle:hover,
body.assistant-mode-page .minimal-header .main-nav .dropdown-toggle:hover {
    border-color: #5a4b36 !important;
    color: #E8DFC8 !important;
}

.theme-midnight .minimal-header .nav-avatar,
.theme-cyberpunk .minimal-header .nav-avatar,
body.assistant-mode-page .minimal-header .nav-avatar,
.theme-midnight .minimal-header .initials-placeholder,
.theme-cyberpunk .minimal-header .initials-placeholder,
body.assistant-mode-page .minimal-header .initials-placeholder {
    border-color: #3a3020 !important;
}

.theme-midnight .minimal-header .main-nav .dropdown-toggle,
.theme-cyberpunk .minimal-header .main-nav .dropdown-toggle,
body.assistant-mode-page .minimal-header .main-nav .dropdown-toggle {
    color: #8F8672 !important;
}

/* Dark Theme Dropdown Menu Overrides */
.theme-midnight .avatar-dropdown-wrapper .dropdown-menu,
.theme-cyberpunk .avatar-dropdown-wrapper .dropdown-menu,
body.assistant-mode-page .avatar-dropdown-wrapper .dropdown-menu {
    background: var(--card-bg-default, #1C160E) !important;
    border: 1px solid var(--card-border, #2a2118) !important;
}
.theme-midnight .dropdown-menu .mobile-menu-link,
.theme-cyberpunk .dropdown-menu .mobile-menu-link,
body.assistant-mode-page .dropdown-menu .mobile-menu-link {
    color: var(--text-dark, #E8DFC8) !important;
}
.theme-midnight .dropdown-menu .mobile-menu-link:hover,
.theme-midnight .dropdown-menu .mobile-menu-link:active,
.theme-cyberpunk .dropdown-menu .mobile-menu-link:hover,
.theme-cyberpunk .dropdown-menu .mobile-menu-link:active,
body.assistant-mode-page .dropdown-menu .mobile-menu-link:hover,
body.assistant-mode-page .dropdown-menu .mobile-menu-link:active {
    background-color: var(--tile-bg-hover, #2a2118) !important;
}
/* Make avatar menu icons dark in dark themes */
.theme-midnight .dropdown-menu .icon-box,
.theme-midnight .dropdown-menu .admin-icon-btn,
.theme-cyberpunk .dropdown-menu .icon-box,
.theme-cyberpunk .dropdown-menu .admin-icon-btn,
body.assistant-mode-page .dropdown-menu .icon-box,
body.assistant-mode-page .dropdown-menu .admin-icon-btn {
    background: var(--light-gray, #2a2118) !important; 
    border-color: var(--border-color, #3a3020) !important; 
    color: var(--text-color, #E8DFC8) !important;
}
.theme-midnight .dropdown-menu .icon-box i,
.theme-cyberpunk .dropdown-menu .icon-box i,
body.assistant-mode-page .dropdown-menu .icon-box i {
    color: var(--text-color, #E8DFC8) !important;
}
.theme-midnight .dropdown-menu .logout-icon,
.theme-cyberpunk .dropdown-menu .logout-icon,
body.assistant-mode-page .dropdown-menu .logout-icon {
    background: rgba(239, 68, 68, 0.15) !important; 
    border-color: rgba(239, 68, 68, 0.3) !important;
}
.theme-midnight .dropdown-menu .logout-icon i,
.theme-midnight .dropdown-menu .logout-link span,
.theme-cyberpunk .dropdown-menu .logout-icon i,
.theme-cyberpunk .dropdown-menu .logout-link span,
body.assistant-mode-page .dropdown-menu .logout-icon i,
body.assistant-mode-page .dropdown-menu .logout-link span {
    color: #ef4444 !important;
}
.theme-midnight .dropdown-menu .menu-divider,
.theme-cyberpunk .dropdown-menu .menu-divider,
body.assistant-mode-page .dropdown-menu .menu-divider {
    background: var(--border-color, #2a2118) !important;
}

/* 1. Unify standard icons (Library, Students, Chat) to a muted outline style */
.mobile-bottom-nav.minimal-header .mobile-nav-icon-wrapper {
    background-color: transparent !important;
    border: 1px solid #3a3020 !important;
    color: #8F8672 !important;
    box-shadow: none !important;
}

/* Hover/Active state for standard icons */
.mobile-bottom-nav.minimal-header .mobile-nav-item:active .mobile-nav-icon-wrapper, 
.mobile-bottom-nav.minimal-header .mobile-nav-item:hover .mobile-nav-icon-wrapper {
    color: #E8DFC8 !important;
    border-color: #5a4b36 !important;
}

/* 2. Make the Create (+) icon a golden outline */
.mobile-bottom-nav.minimal-header .mobile-nav-item-create {
    background-color: transparent !important;
    border: 1px solid #D9AE3F !important;
    color: #D9AE3F !important;
    box-shadow: none !important;
}

/* Active state for Create button (when the menu expands) */
.mobile-bottom-nav.minimal-header .mobile-create-menu.active .mobile-nav-item-create {
    background-color: transparent !important;
    border-color: #E0685A !important;
    color: #E0685A !important;
}

/* 3. Change Avatar border to dark brownish instead of bright solid gold */
.mobile-bottom-nav.minimal-header .nav-avatar,
.mobile-bottom-nav.minimal-header .initials-placeholder {
    border: 2px solid #3a3020 !important;
}

.easter-egg-desc {
    font-size: 0.75rem;
    color: var(--text-muted, #6c757d);
    line-height: 1.3;
}
/* The desktop header is now 95px tall site-wide. 
   Adjust sticky elements and add an extra 5px top clearance for the main content. */
@media (min-width: 769px) {
    .sticky-search-bar {
        top: 95px !important;
    }
    .main-content {
        padding-top: 40px !important; /* 95px header + 5px extra gap */
    }
}

/* Clean dark-mode icon colors for Assistant, Midnight, and Cyberpunk */
.theme-midnight .main-header .nav-icon-link,
.theme-cyberpunk .main-header .nav-icon-link,
body.assistant-mode-page .main-header .nav-icon-link {
    border-color: rgba(232, 223, 200, 0.2) !important;
    color: #E8DFC8 !important;
}

.theme-midnight .main-header .nav-icon-link i,
.theme-cyberpunk .main-header .nav-icon-link i,
body.assistant-mode-page .main-header .nav-icon-link i,
.theme-midnight .main-header .desktop-help-btn,
.theme-cyberpunk .main-header .desktop-help-btn,
body.assistant-mode-page .main-header .desktop-help-btn {
    color: #E8DFC8 !important;
    border-color: rgba(232, 223, 200, 0.2) !important;
}

.theme-midnight .main-header .nav-icon-link:hover,
.theme-cyberpunk .main-header .nav-icon-link:hover,
body.assistant-mode-page .main-header .nav-icon-link:hover {
    border-color: #D9AE3F !important;
    color: #D9AE3F !important;
}

.theme-midnight .main-header .nav-icon-link:hover i,
.theme-cyberpunk .main-header .nav-icon-link:hover i,
body.assistant-mode-page .main-header .nav-icon-link:hover i {
    color: #D9AE3F !important;
}
/* --- GUEST HEADER LINKS READABILITY (DARK THEMES & INDEX.PHP) --- */
body.assistant-mode-page .main-header .guest-link,
.theme-midnight .main-header .guest-link,
.theme-cyberpunk .main-header .guest-link {
    color: hsl(43, 41%, 85%) !important;
}

body.assistant-mode-page .main-header .guest-link:hover,
.theme-midnight .main-header .guest-link:hover,
.theme-cyberpunk .main-header .guest-link:hover {
    color: #c9b205 !important;
}

/* "Dołącz" button gold highlight for dark mode */
body.assistant-mode-page .main-header a[href*="register"].guest-link,
.theme-midnight .main-header a[href*="register"].guest-link,
.theme-cyberpunk .main-header a[href*="register"].guest-link {
    background-color: #D9AE3F !important;
    color: #140F0A !important;
    font-weight: 700 !important;
}
/* Force all guest header links to gold text with no background */
.main-header .guest-link,
.main-header a.guest-link,
.main-header a[href*="register"].guest-link {
    background: transparent !important;
    background-color: transparent !important;
    color: #D9AE3F !important;
    font-weight: 600 !important;
}

.main-header .guest-link:hover,
.main-header a.guest-link:hover {
    color: #E8DFC8 !important;
    opacity: 0.8;
}
/* =====================================================================
   GLOBAL LIGHT THEME BACKGROUNDS (Desktop & Mobile)
   ===================================================================== */
body:not(.theme-midnight):not(.theme-cyberpunk):not(.assistant-mode-page) {
    /* Explicitly transparent, not just omitted -- style.css's base `body` rule sets
       a solid #f8f9fa, which without this override wins the cascade once this rule
       stops declaring background-color at all. The noise texture + photo below are
       meant to be the entire page background, with no flat color flashing in first.
       --page-bg itself is left alone since it's shared with unrelated UI (dropdowns,
       tiles, modals). */
    background-color: transparent !important;
    /* style.css never gives body a min-height, so on short pages body's own box ends
       before the viewport does -- background paints only within that box (even with
       size:100% 100%, which is relative to the viewport but still clipped to the
       element), leaving raw (black) html background exposed below. Force body to
       always span at least the full viewport so the art has nothing to fall short of. */
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/></svg>"),
        url("/assets/img/assistant_bck_light.webp?v=update2") !important; /* <-- Cache buster added here */
    background-blend-mode: overlay, normal !important;
    /* `100% 100%` (non-uniform stretch) instead of `cover`: the art is a decorative
       frame whose only content that matters is the glow running along the left/right
       edges, so those edges must always land exactly on the viewport edges. `cover`
       crops one axis to avoid distortion, which is exactly backwards here -- letting
       the frame stretch is fine, letting the edge glow get cropped off-screen isn't. */
    background-size: 120px 120px, 100% 100% !important;
    background-position: 0 0, center !important;
    background-repeat: repeat, no-repeat !important;
    background-attachment: scroll, fixed !important;
}

@media (max-width: 768px), (orientation: portrait) {
    body:not(.theme-midnight):not(.theme-cyberpunk):not(.assistant-mode-page) {
        background-image:
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/></svg>"),
            url("/assets/img/assistant_bck_portrait_light.webp?v=fix1") !important; /* <-- Cache buster: portrait light asset was actually the landscape image (1719x980, no portrait crop), stretching to a garbled sliver on tall narrow viewports; replaced with a real 800x1920 crop */
        /* iOS resizes the viewport as the URL bar hides/shows; `fixed` recomputes
           against that shifting height. `scroll` anchors to the document instead. */
        background-attachment: scroll, scroll !important;
    }
}
/* =====================================================================
   GLOBAL DARK THEME BACKGROUNDS (Desktop & Mobile)
   ===================================================================== */
body.theme-midnight:not(.assistant-mode-page),
body.theme-cyberpunk:not(.assistant-mode-page) {
    background-color: #140F0A !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>"),
        url("/assets/img/assistant_bck.webp?v=update2") !important;
    background-blend-mode: overlay, normal !important;
    background-size: 120px 120px, 100% 100% !important;
    background-position: 0 0, center !important;
    background-repeat: repeat, no-repeat !important;
    background-attachment: scroll, fixed !important;
}

@media (max-width: 768px), (orientation: portrait) {
    body.theme-midnight:not(.assistant-mode-page),
    body.theme-cyberpunk:not(.assistant-mode-page) {
        background-image:
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>"),
            url("/assets/img/assistant_bck_portrait.webp?v=update2") !important;
        background-attachment: scroll, scroll !important;
    }
}