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

:root {
    --mobile-nav-height: 74px;
    --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 is deliberately NOT declared here. header.php loads this
       file immediately after style.css, so any value in this :root wins the
       cascade -- which is exactly how the header ended up still rendering the
       retired Deep Teal (#0B7268) after style.css had already moved the brand
       to blue (#1E6FC7), leaving the site visibly half-rebranded. style.css is
       the single source of truth for brand tokens; re-adding an override here
       silently reintroduces that split. If the header needs a different brand
       shade, change it in style.css or use a header-scoped token, never a
       second :root declaration of the same name. */
    --theme-bg: #f8f9fa;
}

/* --- 1. GENERAL HEADER LAYOUT --- */
/* Derived from the active theme's own --card-bg-default/--card-border (themes_config.json)
   instead of a hardcoded white, so the glass header tints itself per theme automatically —
   no per-theme-name special casing needed (see the removed .theme-midnight/.theme-cyberpunk
   override this used to require below). */
.main-header {
    background-color: color-mix(in srgb, var(--card-bg-default, #ffffff) 87.5%, transparent) !important;
    backdrop-filter: blur(16px) saturate(180%) !important; /* Higher saturation to pop the colors underneath */
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid color-mix(in srgb, var(--card-border, #000000) 45%, transparent) !important;
    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;
    /* Zgloszenie wprost (Flashcards/create_flashcards.php: "make the content
       of the page as wide as the header"). Przyczyna: box-sizing:content-box
       (domyslne) liczy max-width:1200px WYLACZNIE do wnetrza -- padding
       20px z kazdej strony dolicza sie NA WIERZCH, wiec ten kontener
       faktycznie renderowal sie na 1240px, o 40px szerzej niz jego wlasny
       rodzic .main-header (KTORY sam ma max-width:1200px, ale bez paddingu,
       wiec renderuje sie dokladnie na 1200px). Efekt: ikony w naglowku
       (justify-content:space-between, wiec przyklejone do krawedzi TEGO
       kontenera) wystawaly 40px w prawo poza wlasciwa 1200px-owa granice
       strony -- te sama granice, do ktorej dopasowana jest kazda tresc
       strony (patrz .flashcard-creator-container, Runda 12 tamze). Zmierzone
       w izolowanym harnasie (prawdziwy CSS z obu plikow, 1920px viewport):
       .header-container 1240px vs .main-header/.flashcard-creator-container
       ~1200px, lewe krawedzie zgodne, prawa rozjezdza sie o 40px. Po
       border-box: wszystkie trzy dokladnie 1200px, obie krawedzie zgodne
       co do piksela. box-sizing:border-box wlacza padding W max-width,
       zamiast dokladac go na wierzch -- ten sam mechanizm, ktorego juz
       uzywa .flashcard-creator-container. */
    box-sizing: border-box;
}

/* --- 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;
}
/* Guest-only wordmark next to the icon (see $is_guest check in header.php) --
   logged-in work areas keep the icon-only mark. "hero" uses the brand gradient
   via background-clip so it always matches --brand/--brand-hover, not a
   hardcoded color that could drift from the token spine. */
.logo-wordmark {
    font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
    font-weight: 100;
    font-size: 1.6rem;
    color: var(--text-dark, #1f2937);
    margin-left: 8px;
    white-space: nowrap;
}
.logo-wordmark strong {
    font-weight: 100;
    /* --guest-bg-teal is a platform-wide token (style.css :root), unlike --connect
       which only exists scoped inside index.php's own demo styles. */
    background: linear-gradient(90deg, var(--brand, #1E6FC7), var(--guest-bg-teal, #6DDCCC));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.logo-wordmark small {
    font-weight: 700;
    font-size: 0.55em;
    color: var(--brand, #1E6FC7);
    vertical-align: super;
}
@media (max-width: 480px) {
    .logo-wordmark { display: none; }
}

.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: none !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 --- Was a CSS-drawn brand-gradient circle behind a
   Phosphor <i class="ph-plus"> glyph; now icon_create_plus.webp (illustrated
   art, matches the dropdown's own icon_create_* set) IS the whole button --
   its own blue badge/shadow are baked into the art, so this is just a plain
   click target sized to it (background:none, no border/shadow of its own --
   drawing a second circle/gradient behind the art's own would double up).
   Rotation on open is the only motion this button still needs (see
   .desktop-create-dropdown.show below) -- everything else the old CSS did
   (brand-tracking fill, dark-theme text color, hover/open background swaps)
   doesn't apply to a fixed-color illustration. */
.desktop-create-btn {
    width: 75px;
    height: 75px;
    padding: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 0 8px;
}
.desktop-create-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.desktop-create-btn:hover {
    transform: scale(1.08) translateY(-2px);
}
/* Same rotate the old plus->X glyph did on open -- just the icon spinning
   now, no color swap (the art's fixed blue doesn't have a "red/cancel"
   variant the way a CSS gradient could be swapped for one). */
.desktop-create-dropdown.show .desktop-create-btn {
    transform: rotate(135deg) scale(1.05);
}

/* 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: 1px solid var(--card-border, #d1d5db);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
/* Certification rings, replacing the old unconditional gold border -- silver appears once
   header.php's teacher_cert_tier session flag (set from cert_notified_tasks containing
   FULL_CERT, see includes/certificate_engine.php) reads 'silver'. Ring, not a solid border,
   so it reads as a glow/halo rather than just swapping the border color. Gold has no data
   source yet (no higher tier exists) -- the class is wired for when it does. */
.nav-avatar.cert-silver, .initials-placeholder.cert-silver {
    border-color: transparent;
    box-shadow: 0 0 0 3px #C7CDD6, 0 0 10px 2px rgba(148,158,171,.55);
}
.nav-avatar.cert-gold, .initials-placeholder.cert-gold {
    border-color: transparent;
    box-shadow: 0 0 0 3px #E8B923, 0 0 10px 2px rgba(232,185,35,.55);
}

.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: color-mix(in srgb, var(--primary-color) 10%, transparent); }

/* --- 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;
}
/* Same tint used by .action-menu-item's popup (lesson_library.php's "..." actions menu) --
   one hover language across every menu item on the platform, not just the avatar sheet. */
.mobile-menu-link:hover { background-color: color-mix(in srgb, var(--primary-color) 10%, transparent); }
.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: var(--primary-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: var(--primary-color, #a855f7) !important; border-color: #e9d5ff !important;}
.cv-icon        { background: var(--card-bg-default, #eef2ff) !important; color: var(--primary-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: var(--primary-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; }
/* Same pattern as .mobile-bottom-nav above: hidden by default, only shown by
   the @media(max-width:768px) override further down. Without this, the div
   would render at its plain block default on desktop, where Regulamin is
   already a normal visible text link (.guest-link-legal) -- this and that
   link are meant to never both be visible at once. */
.guest-legal-dropdown { display: none; }
/* Picker jezyka w menu ".." -- dokladnie ta sama para co linia wyzej, tylko dla
   drugiej kontrolki: na desktopie widoczny jest wariant WIERSZOWY (.nav-lang-select),
   wiec ten musi byc schowany, inaczej to samo ustawienie stoi na ekranie dwa razy.
   Odwrotna polowe tej pary robi @media(max-width:768px) nizej.
   !important, bo ten wiersz nosi TAKZE klase .mobile-menu-link, a ta ma
   `display: flex !important` (linia ~307). Bez tego reguly nie da sie wygrac
   i picker pokazywalby sie na desktopie dwa razy. Przy rownym !important
   rozstrzyga kolejnosc, a ta regula stoi nizej. */
.mobile-menu-lang { display: none !important; }
/* Base (desktop) layout for the icon+label role links -- an <a> defaults to
   inline, which wouldn't lay the icon and label out side by side on its own.
   The @media(max-width:768px) override further down only changes SIZE/shape
   (round icon button), not this base flex row.
   box-sizing:border-box here (not the browser default content-box) so the
   round-button width/height set at 768px stays exactly 36x36 regardless of
   which padding value wins -- the pre-existing @media(max-width:480px)
   "SUPER COMPACT" block sets `.guest-link { padding: 5px 8px !important; }`,
   which sits textually AFTER my 768px override and is the same specificity
   (single class, !important), so it wins that tie and would otherwise
   inflate the box by 16x10px on top of the declared size under content-box. */
.guest-link-role { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box !important; }

/* EduHero Radio guest link (header.php, guests only). Rides on .guest-link-role
   so it inherits the same desktop-row / mobile-round-button behaviour; only the
   <img> glyph and the "Nowość!" chip are new here.
   The chip pins its OWN colour pair rather than using --primary-color: white on
   --primary-color measures 1.86:1 on arctic and under 3:1 on six more themes,
   because --on-primary is only defined by midnight. Same reasoning and the same
   two values as radio.php's --rp-play/--rp-on-play (#1D4E89 on white is ~9.2:1;
   the dark pair is inverted for the two dark themes). */
.guest-link-radio { position: relative; }
.guest-radio-icon, .guest-role-icon { width: 24px; height: 24px; object-fit: contain; display: block; flex: none; }
.main-header .guest-new-badge {
    --ghb-bg: #1D4E89;
    --ghb-fg: #ffffff;
    display: inline-block; flex: none;
    background: var(--ghb-bg); color: var(--ghb-fg);
    font-size: 0.65rem; font-weight: 700; line-height: 1; white-space: nowrap;
    padding: 3px 6px; border-radius: 999px;
}
/* Only midnight and cyberpunk are dark themes, so the light pair above stays the
   default for the other eleven and this is the entire blast radius. */
.theme-midnight .main-header .guest-new-badge,
.theme-cyberpunk .main-header .guest-new-badge {
    --ghb-bg: #8ab4f8;
    --ghb-fg: #0b1220;
}

@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; }
}

/* Role-link labels must never visibly overflow/mis-render on the DESKTOP bar
   (the <=768px block below swaps in a completely different compact bar --
   this is the gap above that, where the full-size bar is still showing but
   doesn't have room for it). The squeeze zone right above only shrinks
   font-size; it never removes a label, so it doesn't close the gap alone.
   Measured live on eduhero.pl 2026-08-22 with a forced white-space:nowrap
   probe: .header-container needs ~1263px of unwrapped width for the logo +
   full nav (it's bounded by the viewport, not just its 1200/1700px max-width
   ceiling -- see index.php's :has(.demo3-stage) widening), and overflow only
   reaches 0 at 1280px. 1300px below adds a 20px margin over that measured
   point for cross-browser font-metric variance. Below it, collapse
   .guest-link-role (EduHero Radio + the 3 role links -- guest-only markup,
   so this can never touch the logged-in header) to the same icon-only round
   button the <=768px bar already uses. */
@media (min-width: 769px) and (max-width: 1300px) {
    .guest-link-role .guest-link-text { display: none; }
    .guest-link-role {
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 60px !important; height: 60px !important; padding: 0 !important;
        border-radius: 50%; background-color: rgba(15,23,42,0.05);
        margin-right: 6px !important; font-size: 1.5rem !important;
    }
    /* Bumped from 48/32px (Darek, 2026-08-22, round 2): still read small next
       to the logged-in header's 56px .nav-icon-img icons -- and .guest-radio-icon
       was noticeably smaller than the (already-enlarged) .guest-role-icon,
       since only the latter had been bumped for its cropped art's lower ink
       fill. Both share one size again here: icon_sluchanki.webp's ink fill
       (~55-60%) is now close enough to the _nav-cropped badges' (~55-65%,
       see docs/tools/crop_nav_badge_icons.py) that a shared size reads evenly.
       46px in a 60px circle keeps the same generous proportion (~82% fill)
       as the logged-in bar's 56px icon in its 68px .nav-icon-link. */
    .guest-radio-icon, .guest-role-icon { width: 46px !important; height: 46px !important; }
    /* Same "dot instead of pill" swap the <=768px bar does for this badge --
       a text chip has no room inside a 48px circle. */
    .main-header .guest-new-badge {
        position: absolute; top: 0; right: 0;
        width: 12px; height: 12px; padding: 0;
        border-radius: 50%; font-size: 0; text-indent: -9999px; overflow: hidden;
        border: 2px solid var(--page-bg, #ffffff);
        box-sizing: border-box;
    }
}
/* ====== PASEK GOSCIA: co nie miesci sie w wierszu, schodzi do menu ".." ======

   991px, a NIE 768px -- to jest zmierzone, nie przyjete. Wiersz gosca przestaje sie
   miescic duzo wyzej, niz konczy sie "mobile": na login.php przycisk "Dolacz" (CTA
   rejestracji) wypadal CALY poza ekran rowniez przy 769-950px. Zaden pasek przewijania
   tego nie zdradzal, bo overflow jest `visible` i przycinal to viewport -- awaria byla
   calkowicie cicha, a znikal akurat przycisk, po ktory sie tu przychodzi.

   Zmierzone PRZED zmiana, przepelnienie "Dolacz" poza prawa krawedz:
     320px +93   398px +53   481px +81   540px +24   769px +154   860px +64

   Dwie NIEZALEZNE przyczyny, obie potwierdzone pomiarem:
    - PICKER JEZYKA na sciezce wejscia (EDUHERO_STRONY_WEJSCIOWE): <select> zajmuje
      86px + 15px marginesu w rzedzie, w ktorym ponizej 769px wszystko inne zeszlo do
      32px kolek -- i jako JEDYNY element tego paska nie mial ani jednej wlasnej reguly
      responsywnej (grep: zero trafien poza inline style w header.php). Z ukrytym
      selectem pasek miescil sie na kazdej szerokosci (-6px przy 320 i 398, -13px/481).
    - SAM WIERSZ przy 769-810px, juz BEZ pickera: +38.5px przy 769. To dotyczy KAZDEJ
      strony goscia, nie tylko wejsciowych, i istnialo wczesniej.

   Sciesnienie NIE bylo alternatywa i nie warto do niego wracac -- zmierzone przy logo
   44px, kolkach 40px, odstepach 2px i pickerze 38px: nadal +74px/320, +20px/398,
   +33px/481. Ponizej ~950px cos musialo z tego wiersza wyjsc.

   Wybor Darka 2026-09-07: wychodzi picker (a razem z nim, w tym pasmie, Regulamin --
   ten sam element, ktory ponizej 769px juz tam mieszkal), a NIE linki rolowe.
   Po zmianie: -6px/320, -6px/398, -13px/481, -28px/768, -11px/769, -11px/860, -11px/991.

   Cena jest jedno tapniecie i to, ze picker nie jest juz widoczny od razu na ekranie
   logowania -- czyli to, po co go tam wstawiono (includes/i18n.php). Kebab stoi jednak
   w przyklejonym naglowku, wiec nadal nie trzeba schodzic po niego do stopki. */
@media (max-width: 991px) {
    /* Regulamin: the plain text link is the one asked to go "under a hamburger"
       on mobile, so it's replaced by the kebab dropdown at this width -- the
       two are CSS-gated opposites, never both visible together. */
    .guest-link-legal { display: none !important; }
    .guest-legal-dropdown { display: inline-flex !important; margin-right: 6px; }
    .guest-kebab-btn {
        background: none; border: none; cursor: pointer; color: var(--ink, #1f2937);
        width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        font-size: 1.4rem; padding: 0;
    }
    .guest-kebab-btn:active { background-color: rgba(15,23,42,0.08); }

    /* Picker jezyka schodzi do tego samego menu ".." co Regulamin, i z tego samego
       powodu: w tym wierszu fizycznie nie ma juz miejsca. Zmierzone na login.php
       przed zmiana -- przycisk "Dolacz" (CTA rejestracji) wypadal CALY poza ekran:
       +93px przy 320px, +53px przy 398px, +81px przy 481px szerokosci. Zaden pasek
       przewijania tego nie zdradzal, bo overflow jest `visible` i to viewport go
       przycinal -- awaria byla wiec calkowicie cicha.

       Winowajca byl JEDEN element: <select> ma 86px + 15px marginesu w rzedzie,
       w ktorym wszystko inne zeszlo juz do 32px kolek, a jako jedyny nie mial ANI
       JEDNEJ reguly @media (grep: zero trafien poza inline style w header.php).
       Sprawdzone: z ukrytym selectem pasek miesci sie na KAZDEJ szerokosci
       (-6px przy 320 i 398, -13px przy 481).

       Samo sciesnienie NIE wystarcza i nie jest alternatywa -- zmierzone przy logo
       44px, kolkach 40px, odstepach 2px i pickerze 38px: nadal +74px/320, +20px/398,
       +33px/481. Ponizej 769px cos musialo z tego wiersza wyjsc.

       Wybor Darka 2026-09-07: wychodzi picker, nie linki rolowe. Cena jest jedno
       tapniecie i to, ze na ekranie logowania picker nie jest juz widoczny od razu
       -- czyli dokladnie to, po co go tam wstawiono (includes/i18n.php). Kebab stoi
       jednak w przyklejonym naglowku, wiec nadal nie trzeba go szukac w stopce. */
    .nav-lang-select { display: none !important; }
    .mobile-menu-lang { display: flex !important; }
    /* Wiersz ma zachowywac sie jak .mobile-menu-link obok niego, ale NIE jest
       linkiem -- select musi dostac cala pozostala szerokosc, tak jak `span`
       w tamtych. Bez tego natywna kontrolka kurczy sie do szerokosci tekstu
       i menu wyglada na zlamane. */
    .mobile-menu-lang .nav-lang-select-menu {
        flex-grow: 1; min-width: 0;
        font: inherit; font-size: 0.95rem; padding: 4px 6px;
        border-radius: 8px; border: 1px solid var(--card-border, #ccc);
        background: transparent; color: inherit; cursor: pointer;
    }
}

@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;
        /* 64px, not the platform's shared 95px. Scaling the CONTENTS up to
           fill 95px (the previous approach, see the logo note below) only
           ever closed part of the gap: measured at 412px wide, the tallest
           thing in the bar is the 44px logo and the nav row is 32px, so ~51px
           of a 95px bar was empty -- above the fold, on the smallest screens
           there are. Safe to change ONLY at this breakpoint because the rule
           two lines up is the whole reason a header exists here at all:
           .main-header is display:none below 769px for everyone else (logged-
           in users get the bottom nav), so this touches guest pages only.
           The clearance values that were computed from 95px and DO apply on
           mobile guest were updated with it -- index.php's .main-content
           padding, profile.css's sticky tabs, dokumenty.css's legal
           container, tutorials.php's wrapper and porownanie.css's
           --wys-naglowka. Everything else keying off 95px is gated at
           min-width 769px or 993px and is untouched. */
        height: 64px;
        z-index: 1002;
    }

    .main-header.guest-nav-active .header-container { padding: 0 10px; }
    .guest-link { font-size: 0.9rem !important; margin-right: 8px !important; padding: 6px 12px !important; }

    /* Logo down a step from the 80px desktop size -- it has to fit the 64px
       bar above with a little air, and 52px is what the 481-768px band was
       already using against the old 95px bar. */
    .logo-icon img { height: 52px !important; width: auto; }

    /* Role links (Dla ucznia/szkoły/nauczyciela) collapse to round icon-only
       buttons at this breakpoint -- hide the label, not the link, so it's
       still the exact same <a href> reachable at every width, just restyled. */
    .guest-link-role .guest-link-text { display: none; }
    .guest-link-role {
        /* Was 42px/1.2rem -- the glyph itself (not just the button) was the
           part that read as small: 1.2rem is ~19px inside a 42px circle,
           under half the circle's diameter. Both the circle and the glyph
           go up here, glyph relatively more, so it actually reads as a
           bigger icon rather than a bigger empty button. */
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 48px !important; height: 48px !important; padding: 0 !important;
        border-radius: 50%; background-color: rgba(15,23,42,0.05);
        margin-right: 6px !important; font-size: 1.5rem !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. */
    .teacher-dashboard-wrapper, .wrapper, .container {
        margin-top: 0 !important;
    }
    /* .student-dashboard-wrapper split out from the zeroing above (2026-08-21): with 0 the
       page content sat flush against the viewport/status-bar edge on mobile, since
       .main-header is display:none at this breakpoint and there's nothing else above it to
       provide clearance. Restores breathing room without touching the other three wrappers,
       which stay at 0 deliberately. */
    .student-dashboard-wrapper {
        margin-top: 1.5rem !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;
        /* #student-search-btn is a <button>, unlike its <a> siblings here — without this
           reset it picks up the UA button stylesheet (background, border, padding), which
           read as a stray rectangular chip behind the icon that none of the other nav items
           have. Harmless no-op on the <a> items. */
        background: none; border: none; padding: 0; margin: 0; font-family: inherit;
        appearance: none; -webkit-appearance: none; cursor: pointer;
    }
    .mobile-nav-item svg { width: 48px; height: 48px; 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: 1px solid var(--card-border, #d1d5db);
    }
    /* Cert rings need to be re-declared here too -- the ancestor-scoped selector above
       (0,2,0) otherwise beats the base .cert-silver/.cert-gold rule (0,1,0) and its plain
       border would win over the ring. */
    .mobile-nav-item .nav-avatar.cert-silver,
    .mobile-nav-item .initials-placeholder.cert-silver {
        border-color: transparent;
        box-shadow: 0 0 0 2px #C7CDD6, 0 0 8px 1px rgba(148,158,171,.55);
    }
    .mobile-nav-item .nav-avatar.cert-gold,
    .mobile-nav-item .initials-placeholder.cert-gold {
        border-color: transparent;
        box-shadow: 0 0 0 2px #E8B923, 0 0 8px 1px rgba(232,185,35,.55);
    }

    .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) --- */
    /* Darek (2026-08-06): the "elevated FAB straddling the bar's top edge" treatment read as
       wrong/misaligned, not intentional -- it should sit on the SAME vertical axis as the
       other 4 icons (center at 37px, half of --mobile-nav-height's 74px), just a bigger circle
       (64px vs. the icons' 52px). bottom: 5px = 37 - 64/2, i.e. flush within the bar. */
    .mobile-create-menu {
        position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%);
        width: 72px; height: 72px; 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; 
    }

    /* Illustrated art (icon_create_plus.webp), same parity fix the desktop create button
       already got — a flat filled circle + inline stroke SVG here was a second, near-miss
       treatment of the same "create" affordance. No background/border/shadow to re-force,
       same reasoning as .desktop-create-btn above: the art supplies its own visual weight. */
    .mobile-nav-item-create {
        width: 72px; height: 72px; padding: 0; background: none; border: none; box-shadow: none;
        display: flex; align-items: center; justify-content: center;
        position: relative; z-index: 100; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer;
    }
    .mobile-create-icon-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
    /* Same rotate the old plus->X glyph did on open — just the icon spinning now, no color
       swap (the art's fixed blue doesn't have a red/cancel variant a CSS fill could become). */
    .mobile-create-menu.active .mobile-nav-item-create { transform: rotate(135deg); }

    .fab-items-wrapper {
        position: absolute; bottom: 84px; 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; }

    /* Illustrated art (assets/img/brand/icon_create_*.webp) replacing the flat Phosphor glyph
       + flat per-position colour circle -- glyph-only, no backdrop, same floating-shadow
       treatment as the lesson/game/nav icons elsewhere this session. */
    .fab-item .fab-icon-img {
        width: 46px; height: 46px;
        display: block; object-fit: contain; flex-shrink: 0;
        filter: drop-shadow(0 2px 3px rgba(15,37,64,.2)) drop-shadow(0 8px 14px rgba(15,37,64,.3));
        transition: transform .25s cubic-bezier(.22,1,.36,1), filter .25s ease;
    }
    .fab-item:hover .fab-icon-img {
        transform: translateY(-3px) scale(1.1);
        filter: drop-shadow(0 2px 3px rgba(15,37,64,.22)) drop-shadow(0 12px 18px rgba(15,37,64,.36));
    }

    .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; }

    /* Override the generic rule just above: that one opens UPWARD
       (bottom: 100%+10px), correct for the bottom-anchored teacher/student
       nav dropdowns it was built for, but wrong here -- the guest kebab sits
       in the TOP header, so its menu has to open downward instead or it
       renders off the top of the viewport. Same specificity as the rule
       above (two classes each), so this has to stay textually AFTER it to
       win the cascade tie. */
    .guest-legal-dropdown .dropdown-menu {
        bottom: auto; top: calc(100% + 10px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        min-width: 200px;
    }
}

/* --- 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; }
    /* Was 32px -- a tiny logo lost in a thick bar. 44px still leaves
       comfortable room next to the role icons/kebab at their own 48px on the
       narrowest phones, and now fits the 64px bar (see the height override
       in the 768px block) with 10px of air either side. */
    .logo-icon img { height: 44px !important; width: auto; }
    .guest-nav-active .main-nav { gap: 4px !important; }
    /* Was 11px, the smallest text on the whole page by a wide margin. */
    .guest-link { font-size: 12.5px !important; padding: 5px 8px !important; margin-right: 2px !important; }
    a[href*="register"].guest-link { margin-right: 0 !important; }
    /* Reasserted here, NOT just at the 768px rule above: .guest-link-role
       shares the .guest-link class, so the 12.5px !important two lines up
       otherwise wins at this width -- same specificity (single class,
       !important), same source-order tie, and this block sits later in the
       file. Confirmed by measuring computed font-size in a fixture: without
       this, the role-link glyphs silently rendered at 12.5px instead of the
       intended 1.5rem, on every phone narrow enough to hit this block. */
    .guest-link-role { font-size: 1.5rem !important; }
}

/* --- 11b. ULTRA-NARROW GUEST HEADER (320-360px phones) ---
   Everything above tops out at 48px round buttons for the 3 role links + the
   Regulamin kebab -- that's 4 x 48px = 192px alone, which never fit inside a
   320px viewport (measured live: nav content needed ~340px, only ~270px was
   actually available after the logo and container padding). Nothing below
   480px was shrinking those buttons further, so this is the first rule that
   does. */
@media (max-width: 360px) {
    .logo-icon img { height: 36px !important; }
    .guest-link-role {
        width: 34px !important; height: 34px !important;
        font-size: 1.15rem !important; margin-right: 3px !important;
    }
    .guest-legal-dropdown { margin-right: 3px !important; }
    .guest-kebab-btn { width: 34px !important; height: 34px !important; font-size: 1.1rem !important; }
    .guest-link:not(.guest-link-role) { font-size: 11px !important; padding: 4px 6px !important; }
}

/* Radio link, mobile. Placed AFTER the 768/480/360 blocks above deliberately:
   .guest-link-radio shares .guest-link/.guest-link-role, so several of those
   rules are single-class+!important ties that only source order breaks.
   The "Nowość!" chip cannot stay a text pill inside a 34-48px circle, so at
   these widths it becomes a dot on the corner of the button and the wording
   lives in the link's title/aria label instead -- the alternative is a fifth
   full-width pill in a nav that already measured ~340px of content against
   ~270px of room at 320px. */
@media (max-width: 768px) {
    .main-header .guest-new-badge {
        position: absolute; top: 0; right: 0;
        width: 12px; height: 12px; padding: 0;
        border-radius: 50%; font-size: 0; text-indent: -9999px; overflow: hidden;
        border: 2px solid var(--page-bg, #ffffff);
        box-sizing: border-box;
    }
    .guest-radio-icon, .guest-role-icon { width: 30px; height: 30px; }
}
/* 481-768px. Section 11b's tuning stops at 360, so this band ran the full
   48px buttons next to a ~169px-wide logo lockup -- and it was ALREADY over
   before this link existed: measured in a 481px fixture, "Dolacz" ended at
   x=555 of 481, i.e. 74px off-screen. Compacting the round buttons bought it
   back, but only just: measured at 481px the logo's right edge and the nav's
   left edge were 1px apart, i.e. the row fit and nothing more.

   THE ACTUAL CAUSE IS THE LOGO, and it is fixed here. Between 481 and 768 the
   wordmark is still shown (it is display:none only below 481), so the lockup
   is 52px mark + 8px + a 1.6rem "eduhero.pl" -- 170px, the same width it has
   on a 1280px desktop. Nothing about that width was ever scaled for this band.
   The whole lockup is scaled down here -- mark 52->44, gutter 8->6, wordmark
   1.6->1.2rem -- so the mark's own proportions are untouched and the brand
   still reads, just smaller. Measured at 481px that takes the lockup 170->133
   and frees 37px. The surplus is deliberately NOT banked as slack: the round
   buttons go back up from the emergency 32px to 35px and the inter-item gaps
   from 1px to 2px, and what is left over (9px between the logo and the nav at
   481px, up from 1px) is the comfort margin. Scoped to .guest-nav-active
   because .logo-icon is shared markup -- below 769px .main-header only renders
   for guests anyway, but this makes that true by construction. */
@media (min-width: 481px) and (max-width: 768px) {
    .guest-nav-active .logo-icon img { height: 44px !important; width: auto; }
    .guest-nav-active .logo-wordmark { font-size: 1.2rem; margin-left: 6px; }
    .guest-nav-active .main-nav { gap: 2px !important; }
    .guest-link-role {
        width: 35px !important; height: 35px !important;
        margin-right: 2px !important; font-size: 1.2rem !important;
    }
    .guest-legal-dropdown { margin-right: 2px !important; }
    .guest-kebab-btn { width: 35px !important; height: 35px !important; }
    /* Shared size (Darek, 2026-08-22, round 2: radio was reading smaller than
       the role icons). This is the tier that's ACTUALLY reachable at these
       widths: the plain ≤768px block a few rules up also sets an icon size,
       but every width in 0-768px falls into this tier or one of the two
       narrower ones below, so that one never wins in practice -- don't "fix"
       icon size there instead, it won't do anything. */
    .guest-radio-icon, .guest-role-icon { width: 26px !important; height: 26px !important; }
    .guest-link:not(.guest-link-role) {
        margin-right: 2px !important; font-size: 0.8rem !important; padding: 5px 8px !important;
    }
}

/* 361-480px. Section 11b's 320px tuning stops at 360, so this band still ran
   the 48px buttons -- and measured in a 375px fixture it was ALREADY 7px over
   even before this link existed ("Dolacz" ended at x=382 of 375). A fifth
   48px button took that to 436. The row's content width is fixed (it starts
   at the logo, it is not right-anchored), so the binding case is the band's
   NARROWEST width, 361px: 34px buttons with 2px gaps give a row 330->314px
   NARROWEST width, 361px: 32px buttons with 2px gaps end the row at x=355
   there (6px of slack), and it only gets roomier up to 480px. */
@media (min-width: 361px) and (max-width: 480px) {
    .guest-nav-active .main-nav { gap: 2px !important; }
    .guest-link-role {
        width: 32px !important; height: 32px !important;
        margin-right: 2px !important; font-size: 1.1rem !important;
    }
    .guest-legal-dropdown { margin-right: 2px !important; }
    .guest-kebab-btn { width: 32px !important; height: 32px !important; }
    .guest-radio-icon, .guest-role-icon { width: 24px !important; height: 24px !important; }
    .guest-link:not(.guest-link-role) { margin-right: 2px !important; }
}

/* Ultra-narrow: the radio link is a FIFTH round button in a row that section
   11b above had already tuned to exactly fit 320px (it ended at x=314 of 320).
   Adding 34+7px pushed the "Dolacz" button to x=349, i.e. 29px off-screen.
   Measured in a 320px fixture: dropping every button 34->30px and the
   inter-item margins 3->1px buys back exactly those 35px, putting the row
   back at x=314 with the radio link included. Sizes only -- nothing here
   changes which links exist or where they go. */
@media (max-width: 360px) {
    .guest-radio-icon, .guest-role-icon { width: 22px; height: 22px; }
    .main-header .guest-new-badge { width: 10px; height: 10px; border-width: 2px; }
    .guest-nav-active .main-nav { gap: 2px !important; }
    .guest-link-role {
        width: 30px !important; height: 30px !important;
        margin-right: 1px !important; font-size: 1.05rem !important;
    }
    .guest-legal-dropdown { margin-right: 1px !important; }
    .guest-kebab-btn { width: 30px !important; height: 30px !important; }
    .guest-link:not(.guest-link-role) { padding: 4px 5px !important; margin-right: 1px !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 .nav-icon-img { width: 28px; height: 28px; }

/* Illustrated full-color badges (assets/img/brand/icon_nav_*_glyph.webp) replacing the flat
   Phosphor glyphs across the header nav -- glyph-only art, no baked-in backdrop. Mobile now
   matches desktop exactly: no circle at all, just the glyph floating with its own drop-shadow
   for depth (the pastel-circle removal for these specific icons lives in header.php, scoped
   with :has() so the still-icon-font mobile items keep their circle). No separate dark-theme
   image variant needed -- the glyph colours read fine straight on the page background. */
/* Two stacked drop-shadows (tight contact + soft ambient) is the same "floating above the
   surface" language as .lc-play's box-shadow pair elsewhere in this file -- a single shadow
   read as flat/pasted-on, two layered at different blur/offset reads as actually raised. */
/* --icon-hue-rotate/--icon-saturate (set per .theme-* in header.php, derived from that
   theme's --primary-color) live-shift this shaded blue artwork's hue to match the active
   theme -- a rotation of the existing pixels, not a flat recolor, so the shading/3D look
   survives. Falls back to 0deg/1 (no shift) if a theme class somehow isn't present. */
.nav-icon-img {
    display: block;
    object-fit: contain;
    filter: hue-rotate(var(--icon-hue-rotate, 0deg)) saturate(var(--icon-saturate, 1))
             drop-shadow(0 3px 4px rgba(15,37,64,.26)) drop-shadow(0 13px 20px rgba(15,37,64,.4));
    transition: transform .25s cubic-bezier(.22,1,.36,1), filter .25s ease;
}
.main-nav .nav-icon-link .nav-icon-img { width: 56px; height: 56px; }
.mobile-nav-icon-wrapper .nav-icon-img { width: 52px; height: 52px; }
/* icon_nav_search_glyph.webp's own artwork fills noticeably more of its box than the
   other bottom-nav glyphs at the same 52px, reading as visibly bigger next to them --
   scoped reduction just for this one icon rather than shrinking the shared rule. */
#student-search-btn .nav-icon-img { width: 36px; height: 36px; }

/* Hover/press lift -- same translateY+scale pattern as .lc-play's hover/active, just on the
   glyph itself since there's no button chrome around it anymore. Desktop hovers the link;
   mobile hovers/presses the wrapper (touch has no true hover, but :active still fires on tap). */
.main-nav .nav-icon-link:hover .nav-icon-img {
    transform: translateY(-3px) scale(1.14);
    filter: hue-rotate(var(--icon-hue-rotate, 0deg)) saturate(var(--icon-saturate, 1))
             drop-shadow(0 3px 4px rgba(15,37,64,.28)) drop-shadow(0 18px 26px rgba(15,37,64,.46));
}
.main-nav .nav-icon-link:active .nav-icon-img {
    transform: translateY(-1px) scale(.94);
}
/* Overrides the generic icon-font press feedback (scale(.95) + brightness on the wrapper
   itself, further up this file) for the glyph-icon case specifically -- that rule scaling the
   WRAPPER would shrink the glyph on hover/press, the opposite of the lift wanted here. */
.mobile-nav-item:hover .mobile-nav-icon-wrapper:has(.nav-icon-img),
.mobile-nav-item:active .mobile-nav-icon-wrapper:has(.nav-icon-img) {
    transform: none !important;
    filter: none !important;
}
.mobile-nav-item:hover .mobile-nav-icon-wrapper:has(.nav-icon-img) .nav-icon-img {
    transform: translateY(-2px) scale(1.14);
    filter: hue-rotate(var(--icon-hue-rotate, 0deg)) saturate(var(--icon-saturate, 1))
             drop-shadow(0 3px 4px rgba(15,37,64,.28)) drop-shadow(0 18px 26px rgba(15,37,64,.46));
}
.mobile-nav-item:active .mobile-nav-icon-wrapper:has(.nav-icon-img) .nav-icon-img {
    transform: scale(.92);
}

.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);
}

/* Fully transparent now, not a translucent white disc -- the icon speaks for itself,
   matching the other chrome-stripped nav buttons this session (search, mobile create).
   top:1px/right:1px put the wrapper flush in the literal viewport corner, so the
   .notification-dot badge below (which extends 2px past the wrapper's own edges) was
   guaranteed to clip off-screen; that white disc sitting right in the corner is also
   what read as a stray rounded corner cut into the top of the page. Nudged inward so
   the badge has real clearance. */
/* right/top are now positive: the 42px wrapper is 5px bigger than the 32px glyph on every
   side, so a badge pinned to the WRAPPER's corner floats ~7px off the bell and, with the
   wrapper hanging past the viewport, clipped. Wrapper sits fully on-screen and the badge
   is pinned to the GLYPH's corner instead (see .notification-dot below). */
.floating-bell-wrapper {
    position: fixed; top: 2px; right: 2px; width: 42px; height: 42px;
    background: transparent; border-radius: 50%; box-shadow: none;
    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 .nav-icon-img { width: 32px; height: 32px; }
.floating-bell-wrapper:active { transform: scale(0.95); }
/* Glyph is 32px centred in the 42px wrapper, i.e. inset 5px -- top/right: 2px lands the
   badge overlapping the bell's own top-right corner (touching the icon, the way a count
   badge should read) instead of hovering in the wrapper's empty padding. */
.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;
    }

    /* Illustrated art (assets/img/brand/icon_create_*.webp) replacing the flat Phosphor glyph
       + flat per-position colour circle -- glyph-only, no backdrop, same floating-shadow
       treatment as the lesson/game/nav icons elsewhere this session. */
    .desktop-fab-item .fab-icon-img {
        width: 46px; height: 46px;
        display: block; object-fit: contain; flex-shrink: 0;
        filter: drop-shadow(0 2px 3px rgba(15,37,64,.2)) drop-shadow(0 8px 14px rgba(15,37,64,.3));
        transition: transform .25s cubic-bezier(.22,1,.36,1), filter .25s ease;
    }

    .desktop-create-dropdown .dropdown-menu a.desktop-fab-item:hover .fab-icon-img {
        transform: translateY(-3px) scale(1.1) rotate(5deg);
        filter: drop-shadow(0 2px 3px rgba(15,37,64,.22)) drop-shadow(0 12px 18px rgba(15,37,64,.36));
    }

    .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. Create Button -- just the slightly-bigger click target minimal-header
   wants; icon_create_plus.webp's own art supplies the fill now (see the
   base .desktop-create-btn rule above), no background/shadow to re-force
   here anymore. */
.minimal-header .desktop-create-btn {
    width: 78px; height: 78px;
}

/* 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 #3269b4 !important;
    color: #3269b4 !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;
}

/* =====================================================================
   ASSISTANT PAGE OVERRIDE (The Brownish/#140F0A Look)
   Midnight/Cyberpunk no longer need a name-based override here — the
   generic .main-header rule above already derives a dark glass header
   from their own --card-bg-default/--card-border. This block is now
   purely for the assistant chat page mode, which forces the dark look
   regardless of the viewer's chosen site theme.
   ===================================================================== */
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 fixed-blue outline, matching the desktop create button's
   fixed #3269b4 fill rather than var(--brand) (which is what used to read as "green" here). */
.mobile-bottom-nav.minimal-header .mobile-nav-item-create {
    background-color: transparent !important;
    border: 1px solid #3269b4 !important;
    color: #3269b4 !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: var(--brand) !important;
    color: var(--brand) !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: var(--brand) !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: var(--brand) !important;
}

/* "Dołącz" button teal highlight for dark mode (CI rebrand, was gold) */
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: var(--brand) !important;
    color: var(--brand-deep) !important;
    font-weight: 700 !important;
}
/* Force all guest header links to teal text with no background (CI rebrand, was gold) */
.main-header .guest-link,
.main-header a.guest-link,
.main-header a[href*="register"].guest-link {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand-fixed) !important;
    font-weight: 600 !important;
}

/* "Dołącz" CTA as a real filled pill (2026-07-26 blue+teal pivot, pixel-sampled
   from the approved mockup) -- was plain teal text with no background, which
   undersold it as the primary conversion action. Scoped away from the dark
   themes' own teal-text treatment above via the extra body selector, so it wins
   on specificity regardless of source order rather than fighting on !important. */
body:not(.theme-midnight):not(.theme-cyberpunk) .main-header a[href*="register"].guest-link {
    background: var(--brand-gradient) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
}

.main-header .guest-link:hover,
.main-header a.guest-link:hover {
    color: #E8DFC8 !important;
    opacity: 0.8;
}
/* =====================================================================
   GLOBAL PLATFORM BACKGROUND (Desktop & Mobile)
   -- CI rebrand: the noise+photo composite formerly here now only belongs to
   assistant_test.php's own chalkboard identity (see its inline <style>).
   Every other page gets a plain, theme-driven solid fill -- soothing, not
   shouting -- via the same --page-bg each theme already defines above.
   -- 2026-07-27: .guest-bg is excluded because this rule's
   background-image:none !important is what silently swallowed the brand wash
   for three straight attempts -- the class was applied correctly, the wash CSS
   was correct, and this older rule erased it anyway. The wash now paints on
   ::before/::after (see style.css), so it no longer collides with the
   background-image wipe at all, but the exclusion stays: .guest-bg wants the
   white base underneath the wash, not the theme's --page-bg fill.
   ===================================================================== */
body:not(.assistant-mode-page):not(.guest-bg):not(.public_profile-page) {
    background-color: var(--page-bg, #f8f9fa) !important;
    background-image: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}
body.guest-bg,
body.public_profile-page {
    min-height: 100vh !important;
    min-height: 100dvh !important;
}
/* public_profile.php is excluded above: it renders its own per-profile
   background-image/background-color in an inline <style> block (see
   public_profile.php's $inline_css_variables), and this rule's
   background-image:none !important unconditionally erased it regardless
   of what the profile owner picked -- the same swallowing bug the
   .guest-bg exclusion above already documents, just for a different class. */