* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
        }
        body:not(.high-contrast) {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .header {
            /* header keeps vertical spacing / positioning for logo but has transparent background
               so the visible box is controlled by .header-inner and will align with the cards */
            background: transparent;
            padding: 18px 0; /* vertical padding only; inner .header-inner will provide visible box */
            /* reduce top/bottom margin so the visible header is closer to the cards */
            margin: 12px auto;
            max-width: 100%;
            position: relative;
        }

        /* inner wrapper aligns header content with page container and holds the visible box */
          .header-inner {
                /* Keep box-sizing but expand the header to full viewport width so the white
                    header box reaches the screen edges. We break out of any centered container
                    using the left/negative-margin trick and set width to 100vw. */
                box-sizing: border-box;
                position: relative;
                left: 50%;
                right: 50%;
                /* inset the white header 8px from each screen edge (narrower by 16px total) */
                margin-left: calc(-50vw + 8px);
                margin-right: calc(-50vw + 8px);
                     width: calc(100vw - 16px);
                     /* milder lift so the header sits closer to the cards without overlapping */
                     transform: translateY(-6px); /* raise the header box ~6px */
                max-width: none;
                     /* הגדל את הגובה של ה-header בעוד 10px נוספים (הוספה של 5px למעלה ו-5px למטה)
                        הערך הנוכחי כבר היה מוגדל; עכשיו סה"כ +25px מהמצב המקורי. */
                     padding: 24.5px 0; /* small vertical padding, no horizontal padding so the box touches edges */
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 6px; /* smaller gap between rows/elements */
            background: rgba(255, 255, 255, 0.98);
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
        }

        .header h1 {
            color: #333;
            font-size: 1.5em;
            transition: all 0.3s ease;
        }

        .header h1:hover {
            color: #667eea;
            transform: scale(1.05);
        }

        .header-buttons {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .personal-area-btn,
        .leaderboard-btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 10px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            font-size: 0.95em;
            text-decoration: none;
            transition: all 0.3s ease;
            white-space: normal;
            word-break: break-word;
            line-height: 1.2;
            text-align: center;
        }

        .leaderboard-btn {
            background: linear-gradient(45deg, #ffd700, #ffa500);
            color: #333;
        }

        .personal-area-btn:hover,
        .leaderboard-btn:hover {
            background: linear-gradient(45deg, #5a6fd8, #6a4190);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .container {
            max-width: 1200px;
            /* reduce vertical gap between header and cards to visually match design */
            margin: 28px auto;
            padding: 0 20px;
        }

        .welcome-section {
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            text-align: center;
            margin-bottom: 40px;
        }

        .welcome-section h2 {
            color: #333;
            margin-bottom: 15px;
            font-size: 2em;
        }

        .welcome-section p {
            color: #666;
            font-size: 1.2em;
            line-height: 1.6;
        }

        .welcome-section .search-section {
            margin: 20px 0;
        }

        .topics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
            /* slightly less top gap so the cards visually sit closer to the header */
            margin-top: 20px;
        }

        .topic-card {
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }

        /* תגית בבנייה */
        .topic-card .ribbon {
            position: absolute;
            top: 52px;
            left: 20px;
            width: 92px;
            background: linear-gradient(45deg, #dc3545, #a71d2a);
            color: #fff;
            padding: 5px 0;
            transform-origin: left top;
            transform: rotate(-45deg) translate(8px, 12px);
            font-weight: 700;
            box-shadow: 0 2px 6px rgba(0,0,0,0.12);
            border-radius: 3px;
            z-index: 1;
            font-size: 0.86em;
            text-align: center;
            white-space: nowrap;
            pointer-events: none;
        }

        .topic-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
            border-color: #667eea;
        }

        .topic-icon {
            font-size: 3em;
            margin-bottom: 15px;
            text-align: center;
        }

        .topic-card h3 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.5em;
            text-align: center;
        }

        .topic-card p {
            color: #666;
            line-height: 1.6;
            text-align: center;
            margin-bottom: 20px;
            /* הגבלה לחמש שורות */
            display: -webkit-box;
            -webkit-line-clamp: 5;
            line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 8em; /* גובה של 5 שורות בערך */
        }

        .topic-stats {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 1.5em;
            font-weight: bold;
            color: #667eea;
        }

        .stat-label {
            font-size: 0.9em;
            color: #666;
            margin-top: 5px;
        }

        /* סגנונות ציון ממוצע */
        .score-display {
            font-size: 1.5em;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .topic-stats .stat-item:has(.score-display) {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 8px;
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .topic-stats .stat-item:has(.score-display):hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.05);
        }

        /* תגי הישגים */
        /* תגים יופיעו על נושאים שהושלמו לפי ממוצע הציון:
           זהב: 90-100, כסף: 75-90, השתתפות: פחות מ-75 */
        .achievement-badge {
            display: inline-block;
            margin-right: 8px;
            font-size: 1.1em;
            vertical-align: middle;
        }

        /* מדליות מטבלת השיאנים */
        .medal-badge {
            display: inline-block;
            margin-left: 8px;
            font-size: 1.4em;
            vertical-align: middle;
            animation: medalGlow 2s ease-in-out infinite alternate;
        }

        .medal-badge.gold {
            filter: drop-shadow(0 0 8px #ffd700);
        }

        .medal-badge.silver {
            filter: drop-shadow(0 0 8px #c0c0c0);
        }

        .medal-badge.bronze {
            filter: drop-shadow(0 0 8px #cd7f32);
        }

        @keyframes medalGlow {
            0% { transform: scale(1); }
            100% { transform: scale(1.1); }
        }

        /* כוכבי ציון */
        .stars-display {
            display: block;
            margin: 1px 0 8px 0;
            font-size: 1.2em;
            text-align: center;
            line-height: 1.1;
        }

        .stars-display::before {
            content: '';
            display: block;
            font-size: 0.8em;
            color: #666;
            margin-bottom: 1px;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: white;
            font-size: 1.2em;
        }

        .spinner {
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top: 3px solid white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .error-message {
            background: rgba(248, 215, 218, 0.95);
            color: #721c24;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            text-align: center;
            border: 1px solid #f5c6cb;
        }

        /* סגנונות חיפוש */
        .search-section {
            margin: 30px 0;
            text-align: center;
        }

        .search-container {
            position: relative;
            display: inline-block;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
        }

        .search-input {
            width: 100%;
            padding: 15px 50px 15px 20px;
            font-size: 16px;
            border: 2px solid #e0e0e0;
            border-radius: 25px;
            outline: none;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.95);
            direction: rtl;
            text-align: right;
        }

        .search-input:focus {
            border-color: #667eea;
            box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
            background: white;
        }

        .search-input::placeholder {
            color: #999;
            font-style: italic;
        }

        .clear-search-btn {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            font-size: 18px;
            color: #999;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
            transition: all 0.3s ease;
            display: none;
        }

        .clear-search-btn:hover {
            background: #f0f0f0;
            color: #667eea;
        }

        .search-results-info {
            margin-top: 15px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            font-weight: bold;
            color: #667eea;
        }

        /* אפקט הדגשה לתוצאות חיפוש */
        .search-highlight {
            background: linear-gradient(45deg, #fff3cd, #ffeaa7);
            padding: 2px 4px;
            border-radius: 3px;
            font-weight: bold;
        }

        /* אנימציה לכרטיסים שמוצגים/נסתרים */
        .topic-card.hidden {
            display: none;
        }

        .topic-card.fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        /* סגנונות מיוחדים לתוצאות חיפוש */
        .subtopic-result {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.05), rgba(255, 255, 255, 0.95)) !important;
        }

        .lesson-result {
            background: linear-gradient(135deg, rgba(40, 167, 69, 0.05), rgba(255, 255, 255, 0.95)) !important;
        }

        .subtopic-result:hover,
        .lesson-result:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
        }

        /* clamp descriptions to 3 lines visually */
        .clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            /* cross-browser fallback: use max-height based on line-height so Firefox works */
            line-height: 1.45em;
            max-height: calc(1.45em * 3);
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 1024px) {
            .topics-grid {
                grid-template-columns: 1fr;
            }

            .header {
                padding: 12px;
                flex-direction: column;
                gap: 10px;
                text-align: center;
                margin: 12px auto;
                max-width: calc(100% - 16px);
            }

            /* הצגת המבורגר והסתרת כפתורים במובייל */
            .hamburger {
                display: inline-flex !important;
            }

            .header-buttons {
                display: none !important;
            }

            /* פריסת header במובייל: זכוכית מגדלת מימין, לוגו במרכז, המבורגר משמאל */
            .header-inner {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: space-between !important;
                position: relative !important;
                padding: 15px 12px !important;
                min-height: 100px !important;
            }

            /* זכוכית מגדלת - מימין */
            .search-wrapper {
                position: static !important;
                order: 1 !important;
                flex-shrink: 0 !important;
            }

            /* לוגו - במרכז */
            .logo-group {
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                transform: translate(-50%, -50%) !important;
                order: 2 !important;
                z-index: 10 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .logo-group a {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .site-logo {
                height: 110px !important;
                width: auto !important;
                display: block !important;
            }

            /* המבורגר - משמאל */
            .hamburger {
                position: static !important;
                order: 3 !important;
                flex-shrink: 0 !important;
            }

            .container {
                margin: 14px auto;
                padding: 0 12px;
            }

            .welcome-section {
                padding: 15px;
                margin-top: 25px;
                margin-bottom: 15px;
            }

            .topic-card {
                padding: 15px;
            }

            .header h1 {
                font-size: 1.25em;
                margin-bottom: 0;
            }

            .header-buttons {
                justify-content: center;
                gap: 8px;
                width: 100%;
            }

            .personal-area-btn,
            .leaderboard-btn {
                padding: 10px 16px;
                font-size: 0.9em;
            }

            .search-input {
                font-size: 14px;
                padding: 12px 45px 12px 15px;
            }

            .search-input::placeholder {
                font-size: 13px;
            }

            /* Make the visible header box match the container padding on tablet/mobile */
            .header-inner {
                             /* container uses padding: 0 12px on this breakpoint, match it so edges align
                                 slightly larger header for visual parity with topic cards */
                             padding-left: 4px;
                             padding-right: 4px;
                                      /* הגדל עוד 10px כולו על ידי הוספת ~2.5px על כל צד
                                          (כעת סה"כ +15px מהמצב המקורי) */
                                      /* הוספת 5px למעלה ולמטה נוספים */
                                      padding-top: 14px;
                                      padding-bottom: 14px;
                border-radius: 12px;
            }
        }

        @media (max-width: 600px) and (min-width: 481px) {
            .header-buttons {
                flex-direction: row;
                gap: 8px;
            }

            .personal-area-btn,
            .leaderboard-btn {
                flex: 1;
                max-width: 140px;
                font-size: 0.85em;
                padding: 10px 12px;
            }
        }

        @media (max-width: 480px) {
            .header {
                padding: 10px;
                margin: 8px auto;
                max-width: calc(100% - 12px);
            }

            .container {
                margin: 10px auto;
                padding: 0 8px;
            }

            .welcome-section {
                padding: 10px;
                margin-bottom: 10px;
            }

            .topic-card {
                padding: 12px;
            }

            .header h1 {
                font-size: 1.1em;
            }

            /* Make the header buttons inline on small screens (side-by-side) */
            .header-buttons {
                flex-direction: row;
                gap: 8px;
                width: 100%;
                justify-content: center;
                align-items: center;
            }

            .personal-area-btn,
            .leaderboard-btn {
                /* allow buttons to share available space and remain compact */
                flex: 1 1 auto;
                min-width: 0;
                max-width: none;
                padding: 10px 12px;
                font-size: 0.9em;
            }

            .search-container {
                max-width: 100%;
            }

            .search-input {
                font-size: 13px;
                padding: 10px 40px 10px 12px;
            }

            .search-input::placeholder {
                font-size: 12px;
            }

            /* On the smallest screens the page container uses 8px horizontal padding; match that
               but reduce it slightly to make the header more compact */
            .header-inner {
                /* smallest screens: minimal padding to maximize visible width */
                padding-left: 2px;
                padding-right: 2px;
                     /* הגדל עוד 10px כולו על ידי הוספת ~2.5px על כל צד
                         (כעת סה"כ +15px מהמצב המקורי) */
                     /* הוספת 5px למעלה ולמטה נוספים */
                     padding-top: 14px;
                     padding-bottom: 14px;
                border-radius: 12px;
            }
        }

        /* Mobile adjustments: keep the logo visually attached to the header box
           and let the magnifier/search remain in-flow. Also try to keep the
           three header buttons on one row by letting them flex. */
        @media (max-width: 480px) {
            .site-logo {
                height: 95px !important;
            }

            .magnifier-svg {
                width: 46px !important;
                height: 46px !important;
            }

            .hamburger {
                width: 45px !important;
                height: 45px !important;
            }

            .header-inner {
                min-height: 85px !important;
                padding: 12px 8px !important;
            }
        }

        /* Desktop: ensure logo+magnifier stay at the right and buttons on the left */
        @media (min-width: 1025px) {
            /* Reset any mobile absolute positioning and enforce desktop flex layout */
            .header {
                display: block !important;
            }

            /* הסתרת המבורגר בדסקטופ */
            .hamburger {
                display: none !important;
            }

            /* ensure the inner wrapper controls the flex layout on desktop */
            .header-inner {
                display: flex !important;
                flex-direction: row-reverse !important; /* show buttons on the left, logo on the right */
                justify-content: space-between !important;
                align-items: center !important;
                /* On desktop constrain the visible header box to the same width as .container
                   so it aligns with the topic cards. Keep the border-radius/box-shadow intact. */
                left: auto !important;
                right: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
                width: 100% !important;
                /* revert half of the previous shrink: set to 1150px for a milder reduction */
                max-width: 1150px !important;
                /* Remove the full-bleed negative-margin trick on desktop */
                transform: none !important; /* undo the small translate used for visual lift */
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            
            /* nudge the buttons a bit to the right (desktop-only) to visually center them
               relative to the reduced header width */
            .header-buttons {
                transform: translateX(12px) !important;
                order: 0 !important;
                margin-inline-start: 0 !important; /* keep buttons on the left side in RTL layout */
                justify-content: flex-start !important;
                display: flex !important;
            }
            
            /* לוגו וזכוכית מגדלת בצד ימין - החלפת מיקומים */
            .logo-group {
                position: static !important;
                transform: none !important;
                order: 2 !important;
                z-index: auto !important;
                display: flex !important;
                align-items: center !important;
                gap: 12px !important;
            }

            .search-wrapper {
                position: static !important;
                order: 1 !important;
                display: flex !important;
                align-items: center !important;
                gap: 8px !important;
            }

            .magnifier-svg {
                position: static !important;
                transform: none !important;
                width: 46px !important;
                height: 46px !important;
                left: auto !important;
                top: auto !important;
            }

            /* הסתרת כפתור שיאנים בדסקטופ */
            .desktop-hide-leaderboard {
                display: none !important;
            }
        }

        body.dyslexic-font, body.dyslexic-font * {
            font-family: 'OpenDyslexic', Arial, sans-serif !important;
            font-size: 1.1em !important;
        }

        /* --- Magnifier & header search styles (ensure they live in <head>) --- */
        .search-toggle-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s ease, filter 0.15s ease;
        }
        .search-toggle-btn:active { transform: scale(0.98); }
        .search-toggle-btn:focus { outline: 3px solid rgba(102,126,234,0.25); border-radius: 8px; }

    .magnifier-svg { width: 46px; height: 46px; display: block; }
    /* עיגול רקע למגדלת (לא ריבוע) — נותן ניגוד על הרקע הלבן */
    .magnifier-backdrop { fill: rgba(102,126,234,0.12); stroke: rgba(102,126,234,0.28); stroke-width: 1.4; }
    .magnifier-glass { fill: url(#glassGradient); stroke: rgba(34,41,122,0.92); stroke-width: 1.0; }
    .magnifier-handle { stroke: rgba(34,41,122,0.96); stroke-width: 3; stroke-linecap: round; }
    .magnifier-svg { filter: drop-shadow(0 6px 14px rgba(0,0,0,0.12)); }

        /* Search bar collapsed/expanded states
           Use transform (scaleX) + opacity instead of changing width to avoid layout reflow
           which caused a brief visual jump on mobile. Reserve the final width so the
           element doesn't push other content when it becomes visible. */
        .search-bar-collapsed {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 220px; /* reserve space to avoid reflow */
            transform: scaleX(0);
            transform-origin: left center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            overflow: hidden;
            transition: transform 0.18s ease, opacity 0.18s ease;
        }

        .search-bar-expanded {
            display: flex !important;
            align-items: center;
            gap: 6px;
            width: 220px; /* fixed visual width when opened */
            transform: scaleX(1) !important;
            transform-origin: left center;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            transition: transform 0.18s ease, opacity 0.18s ease;
            position: relative;
            z-index: 40;
        }

        /* הקטנת גובה שורת החיפוש כדי להתאים לגובה טקסט רגיל - רק עבור ה-header search */
        #searchBar .search-input {
            height: 36px !important;
            padding: 8px 34px 8px 12px !important; /* שמאל RTL */
            border-radius: 18px !important;
            font-size: 15px !important;
            width: 220px; /* רוחב התיבה כשהיא נפתחת, ניתן לכוונן */
        }

        /* ה-wrap של הלוגו והחיפוש קרוב יותר */
        .logo-group {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .search-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Size the site logo explicitly so it's consistent on mobile */
        .site-logo {
            display: block;
            height: 72px; /* explicit height to make the logo visible */
            width: auto;
            transform: none;
            max-height: 120px; /* הגדלת הגבול המקסימלי */
        }

        /* Increase magnifier size by ~50% (was 46px) */
        .magnifier-svg {
            width: 69px;
            height: 69px;
            filter: drop-shadow(0 8px 18px rgba(0,0,0,0.14));
        }

        /* כפתור המבורגר */
        .hamburger {
            display: none; /* מוסתר כברירת מחדל, יוצג רק במובייל */
            flex-direction: column;
            justify-content: space-around;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 12px;
            cursor: pointer;
            padding: 12px 10px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        .hamburger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
        }

        .hamburger span {
            display: block;
            width: 100%;
            height: 3px;
            background: white;
            border-radius: 3px;
            transition: all 0.3s ease;
        }

        /* תפריט צדי */
        .hamburger-menu {
            position: fixed;
            top: 0;
            right: -300px;
            width: 280px;
            height: 100vh;
            background: white;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
            transition: right 0.3s ease;
            z-index: 1001;
            overflow-y: auto;
            padding: 20px;
        }

        .hamburger-menu.open {
            right: 0;
        }

        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .close-menu {
            position: absolute;
            top: 15px;
            left: 15px;
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: #333;
            padding: 5px;
            line-height: 1;
        }

        .menu-item {
            display: block;
            padding: 15px 20px;
            margin: 8px 0;
            color: #333;
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-size: 16px;
            font-weight: 500;
        }

        .menu-item:hover {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: translateX(-5px);
        }

        .menu-divider {
            height: 1px;
            background: #e0e0e0;
            margin: 15px 0;
        }

        /* התאמת מיקום כפתור הניקוי בתוך שורת החיפוש */
        #searchBar { position: relative; }
        #searchBar .clear-search-btn {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            font-size: 15px;
            cursor: pointer;
            display: none;
        }

        /* סילוק 'ריבוע' רקע שמפעיל דפדפן סביב הכפתור */
        .search-toggle-btn { background: transparent !important; border: none !important; padding: 6px !important; border-radius: 50% !important; }
        .search-toggle-btn::-moz-focus-inner { border: 0; }

        /* התאמת מיקום כפתור הניקוי בתוך שורת החיפוש */
        .clear-search-btn {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            font-size: 16px;
            cursor: pointer;
            display: none; /* יופיע בעזרת JS כאשר יש טקסט */
        }

        /* Ensure clear button hidden by default */
        #clearSearchBtn { display: none; }

        /* --- Layout tuning: unify vertical gap between header and topic cards --- */
        :root {
            /* single source of truth for header -> grid gap (used across breakpoints) */
            --header-grid-gap: 24px;
        }

        /* Apply the unified gap to the topics grid. Use !important so this override
           wins over earlier per-breakpoint tweaks while still being easy to revert. */
        .topics-grid {
            margin-top: var(--header-grid-gap) !important;
        }


/* Teacher modal styles */
    .teacher-modal-overlay{position:fixed;inset:0;background:linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.55));display:none;align-items:center;justify-content:center;z-index:9999;padding:24px}
    .teacher-modal-overlay.open{display:flex}
    .teacher-modal{background:linear-gradient(180deg,#ffffff 0%, #fbfbff 100%);color:#111;border-radius:14px;max-width:720px;width:100%;padding:0;overflow:hidden;direction:rtl;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial}
    .teacher-modal .modal-header{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;background:linear-gradient(90deg,#6c63ff 0%,#4cafef 100%);color:#fff}
    .teacher-modal .modal-header .icon{width:48px;height:48px;flex:0 0 48px;border-radius:10px;background:rgba(255,255,255,0.12);display:grid;place-items:center}
    .teacher-modal .modal-header h2{margin:0;font-size:18px;font-weight:700}
    .teacher-modal .modal-body{padding:18px 20px 12px;color:#222}
    .teacher-modal .modal-body p{margin:0 0 12px 0;line-height:1.5}
    .teacher-modal .modal-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 18px;border-top:1px solid rgba(0,0,0,0.05);background:transparent}
    .teacher-modal .actions{display:flex;gap:10px;align-items:center}
    .teacher-btn{background:#2b6cb0;color:#fff;border:none;padding:9px 14px;border-radius:8px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
    .teacher-btn.secondary{background:#e6eefc;color:#0b3b66}
    .teacher-modal .close-x{background:transparent;border:none;color:rgba(255,255,255,0.95);font-size:18px;cursor:pointer;margin-left:auto}
    .teacher-modal .optout{display:flex;align-items:center;gap:10px;color:#666;font-size:14px}
    .teacher-modal input[type="checkbox"]{width:18px;height:18px}
    .teacher-modal .note{font-size:13px;color:#666}
    .teacher-modal{transform:translateY(10px) scale(.99);opacity:0;transition:all .28s cubic-bezier(.2,.9,.3,1)}
    .teacher-modal-overlay.open .teacher-modal{transform:translateY(0) scale(1);opacity:1}
    @media (max-width:560px){.teacher-modal .modal-header h2{font-size:16px}.teacher-modal .modal-header{padding:14px}.teacher-modal .modal-body{padding:12px}}