/* ================================================
   1. RESET בסיסי
   ================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    direction: rtl;
    font-family: 'Rubik', sans-serif;
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden; /* מונע גלילה לרוחב / "מסך גדול" */
}

/* ================================================
   2. THEME ENGINE – Dark (default) + Light
   ================================================ */

:root {
    /* צבעים – מצב DARK */
    --bg: #020617;
    --surface: #0b1223;
    --surface-light: #1e293b;
    --text: #f8fafc;
    --text-muted: #94a3b8;
    --primary: #3b82f6;
    --accent: #6366f1;
    --success: #22c55e;
    --danger: #ef4444;
    --border: rgba(255,255,255,0.08);
    --transition-fast: 0.25s ease;
}

/* LIGHT MODE */
html.light {
    --bg: #f1f5f9;
    --surface: #ffffff;
    --surface-light: #e2e8f0;
    --text: #0f172a;
    --text-muted: #475569;
    --primary: #2563eb;
    --accent: #7c3aed;
    --success: #16a34a;
    --danger: #dc2626;
    --border: rgba(0,0,0,0.12);
}

/* רקע כללי */
body {
    background: var(--bg);
    color: var(--text);
    transition: background var(--transition-fast), color var(--transition-fast);
}

/* ================================================
   3. THEME TOGGLE (T1 – iOS Switch with Sun/Moon)
   ================================================ */

.theme-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    margin-left: 1rem;
    cursor: pointer;
}

    .theme-toggle input {
        display: none;
    }

    .theme-toggle .slider {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: var(--surface-light);
        border-radius: 999px;
        transition: background var(--transition-fast);
    }

        .theme-toggle .slider::before {
            content: "";
            position: absolute;
            width: 22px;
            height: 22px;
            left: 3px;
            top: 3px;
            background: var(--primary);
            border-radius: 50%;
            transition: transform var(--transition-fast);
        }

    /* Icons */
    .theme-toggle .icon {
        position: absolute;
        font-size: 13px;
        top: 6px;
        pointer-events: none;
    }

        .theme-toggle .icon.sun {
            right: 7px;
        }

        .theme-toggle .icon.moon {
            left: 7px;
        }

/* מצב LIGHT */
html.light .theme-toggle .slider::before {
    transform: translateX(24px);
}

/* ================================================
   4. HEADER
   ================================================ */

.main-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 2rem;
    position: sticky;
    top: 0;
    z-index: 999;
    transition: background var(--transition-fast);
}

html.light .main-header {
    background: rgba(255,255,255,0.65);
}

/* ==== לוגו ==== */

.logo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.logo-icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.logo-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
}

/* ================================================
   5. AUTH BAR
   ================================================ */

.auth-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(6px);
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.9rem;
}

html.light .auth-bar {
    background: rgba(255,255,255,0.8);
}

.auth-greeting {
    font-weight: 500;
    color: var(--text);
}

.auth-link {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    transition: opacity .2s;
}

    .auth-link:hover {
        opacity: .8;
    }

/* ================================================
   6. NAVIGATION
   ================================================ */

.main-nav {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

    .main-nav a {
        color: var(--text);
        text-decoration: none;
        font-size: 0.97rem;
        font-weight: 400;
        transition: color var(--transition-fast), opacity var(--transition-fast);
        position: relative;
    }

        .main-nav a:hover {
            color: var(--primary);
        }

        .main-nav a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -3px;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: width .25s ease;
        }

        .main-nav a:hover::after {
            width: 100%;
        }

/* ================================================
   7. LAYOUT CONTAINERS
   ================================================ */

.page-section {
    padding: 2.5rem 0;
}

/* 11.3.1 – Global Container */
.container,
.page-container {
    max-width: 1200px; /* אפשר בעתיד לשנות ל־1280/1400 אם תרצה */
    margin: 0 auto;
    padding-inline: 1.5rem; /* במקום 0 1.5rem – אותו דבר אבל גלובלי */
}


.page-title {
    font-size: 2rem;
    color: var(--text);
    margin-bottom: 0.45rem;
    font-weight: 700;
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
}

/* Cards */
.card {
    background: var(--surface);
    border-radius: 18px;
    padding: 1.6rem 2rem;
    border: 1px solid var(--border);
    box-shadow: 0 12px 25px rgba(0,0,0,0.32);
    transition: background var(--transition-fast), color var(--transition-fast), border var(--transition-fast);
}

/* ================================================
   11.2.2 – CARD SYSTEM
   שימוש כללי ב: .card, .card-header, .card-body, .card-footer
   ================================================ */

.card-header {
    margin-bottom: 0.9rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

    .card-header h1,
    .card-header h2,
    .card-header h3 {
        margin: 0;
    }

.card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.card-footer {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
}


html.light .card {
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Spacing Util */
.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

/* ================================================
   7.1 HERO SECTION (Home Page)
   ================================================ */

.hero {
    padding: 3rem 0 4rem;
}

.hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}

.hero-content {
    max-width: 520px;
}

.hero-actions {
    margin-top: 1.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.hero-visual {
    flex: 1;
    min-height: 260px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: radial-gradient(circle at top left, rgba(59,130,246,0.35), transparent 55%), radial-gradient(circle at bottom right, rgba(99,102,241,0.4), transparent 55%), var(--surface);
    box-shadow: 0 18px 45px rgba(15,23,42,0.7);
}

/* ================================================
   8. BUTTONS
   ================================================ */

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff !important;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    border: none;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, opacity .25s;
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(59,130,246,0.4);
    }

.btn-secondary {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary) !important;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, background .2s, opacity .2s;
}

    .btn-secondary:hover {
        transform: translateY(-2px);
        background: rgba(148,163,184,0.1);
    }

/* Ghost */
.btn-ghost {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

    .btn-ghost:hover {
        background: rgba(255,255,255,0.12);
    }

/* Pulse */
.btn-pulse:hover {
    box-shadow: 0 0 25px rgba(37,99,235,0.5);
}


/* ================================
   14.1.2 – כפתורי טעינה כבדים (AI)
   ================================ */

.btn-primary.is-loading,
.btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* אלמנט ה-spinner שבתוך הכפתור – מוסתר כברירת מחדל */
.btn-primary .btn-spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: rgba(255, 255, 255, 1);
    margin-inline-start: 0.4rem; /* עובד טוב גם ב-RTL */
    animation: btn-spin 0.6s linear infinite;
}

/* כשיש is-loading – מציגים את ה-spinner */
.btn-primary.is-loading .btn-spinner {
    display: inline-block;
}

/* דואג שהטקסט וה-spinner יהיו בשורה יפה */
.btn-primary .btn-label {
    display: inline-flex;
    align-items: center;
}

/* אנימציה של הסיבוב */
@keyframes btn-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ================================================
   9. FORMS
   ================================================ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-label {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
}

.form-input {
    padding: 0.55rem 0.85rem;
    background: var(--surface-light);
    border-radius: 12px;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.95rem;
    transition: border .2s, box-shadow .2s;
}

    .form-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
    }

.form-error {
    font-size: 0.8rem;
    color: var(--danger);
}

/* ================================================
   9.1 AUTH PAGES (Login / Register)
   ================================================ */

.auth-page {
    min-height: calc(100vh - 140px); /* קצת מרווח ביחס ל-header/footer */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.auth-card {
    background: var(--surface);
    border-radius: 20px;
    padding: 2rem 2.4rem;
    border: 1px solid var(--border);
    box-shadow: 0 18px 45px rgba(0,0,0,0.6);
    max-width: 460px;
    width: 100%;
}

.auth-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 1.6rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.auth-label {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
}

.auth-input {
    background: var(--surface-light);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 0.6rem 0.9rem;
    color: var(--text);
    font-size: 0.95rem;
    transition: border .2s, box-shadow .2s;
}

    .auth-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
    }

.auth-validation-summary {
    margin-bottom: 0.3rem;
}

.auth-validation {
    font-size: 0.8rem;
}

.auth-remember-row {
    margin-top: 0.4rem;
    margin-bottom: 0.6rem;
}

.auth-remember-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.auth-btn-primary {
    margin-top: 0.5rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.auth-footer-text {
    margin-top: 1.1rem;
    font-size: 0.9rem;
    text-align: center;
    color: var(--text-muted);
}

    .auth-footer-text .auth-link {
        font-weight: 600;
    }

/* בחירת תפקיד */
.auth-role-options {
    display: flex;
    gap: 1rem;
    margin-top: 0.4rem;
}

.auth-role-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(15,23,42,0.6);
    cursor: pointer;
    font-size: 0.9rem;
}

    .auth-role-option input {
        margin-left: 0.15rem;
    }

    .auth-role-option span {
        color: var(--text);
    }

/* ================================================
   10. DASHBOARD – בסיס לכל הדשבורדים
   ================================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-stat-card {
    background: var(--surface);
    padding: 1.4rem 1.6rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: 0 14px 35px rgba(0,0,0,0.35);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.stat-value {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--accent);
}

/* ================================================
   11. STUDENT DASHBOARD
   ================================================ */

.student-dashboard {
    padding: 2.5rem 1.5rem;
}

.student-dashboard-title h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
}

.student-dashboard-title p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* סטטיסטיקות */
.student-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.3rem;
    margin-bottom: 2rem;
}

.student-stat-card {
    background: var(--surface);
    border-radius: 18px;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--border);
    box-shadow: 0 16px 38px rgba(0,0,0,0.4);
}

    .student-stat-card .stat-label {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .student-stat-card .stat-value {
        font-size: 1.8rem;
        color: var(--accent);
    }

/* כרטיסים */
.student-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.student-card {
    background: var(--surface-light);
    border-radius: 18px;
    padding: 1.4rem;
    border: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    color: var(--text);
}

    .student-card h2 {
        margin-bottom: 0.5rem;
        color: var(--text);
        font-size: 1.2rem;
    }

    .student-card p {
        color: var(--text-muted);
        font-size: 0.92rem;
    }

/* ================================================
   12. TEACHER DASHBOARD
   ================================================ */

.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.dashboard-help-card {
    background: var(--surface);
    border-radius: 18px;
    padding: 1.4rem;
    border: 1px solid var(--border);
}

.dashboard-help-title {
    color: var(--text);
    font-size: 1.1rem;
}

.dashboard-help-list {
    list-style: none;
    padding-right: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--text-muted);
}

.recent-tests-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.recent-test-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.6rem;
}

.recent-test-title {
    font-size: 0.9rem;
    color: var(--text);
}

.recent-test-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ================================================
   13. ADMIN DASHBOARD
   ================================================ */

.admin-section-card {
    background: var(--surface);
    border-radius: 18px;
    padding: 1.6rem;
    border: 1px solid var(--border);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

    .admin-table thead {
        background: rgba(255,255,255,0.04);
    }

    .admin-table th,
    .admin-table td {
        padding: 0.85rem 0.7rem;
        border-bottom: 1px solid var(--border);
        color: var(--text);
    }

.admin-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.admin-badge-active {
    background: rgba(22,163,74,0.18);
    color: #4ade80;
}

.admin-badge-banned {
    background: rgba(220,38,38,0.18);
    color: #f87171;
}

.admin-btn {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    border: none;
    cursor: pointer;
    color: #fff;
    transition: opacity .25s;
}

.admin-btn-ban {
    background: #dc2626;
}

.admin-btn-unban {
    background: #16a34a;
}

.admin-btn-remove {
    background: #475569;
}

.admin-btn:hover {
    opacity: .85;
}

/* =====================================================
   14. PRACTICE – Create Practice Test
   ===================================================== */

.practice-box {
    background: var(--surface);
    padding: 1.8rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);
    margin-top: 1.5rem;
}

.practice-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
}

.practice-header p {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 1.2rem;
}

/* =====================================================
   15. PRACTICE QUESTIONS
   ===================================================== */

.question-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.question-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 1.2rem;
}

.answers-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.answer-option {
    background: var(--surface-light);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
    text-align: right;
    transition: background .25s, border .25s;
}

    .answer-option:hover {
        background: rgba(59,130,246,0.12);
        border-color: var(--primary);
    }

    .answer-option.selected {
        background: rgba(59,130,246,0.22);
        border-color: var(--primary);
    }

/* OPEN ANSWER */
#openAnswer {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    color: var(--text);
    transition: border .25s;
}

    #openAnswer:focus {
        border-color: var(--primary);
        outline: none;
    }

/* =====================================================
   16. RESULTS PAGE
   ===================================================== */

.results-card {
    background: var(--surface);
    padding: 2rem;
    border-radius: 18px;
    border: 1px solid var(--border);
}

.results-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
}

.results-summary {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

    .results-summary strong {
        color: var(--accent);
    }

.answer-result.correct {
    color: #22c55e !important;
    font-weight: 700;
}

.answer-result.wrong {
    color: #ef4444 !important;
    font-weight: 700;
}

.questions-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.question-card {
    background: var(--surface-light);
    border-radius: 14px;
    padding: 1.4rem;
    border: 1px solid var(--border);
}

    .question-card .question-text {
        font-size: 1.1rem;
        color: var(--text);
    }

.answer-pill {
    background: transparent;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    margin-top: 0.4rem;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.answer-pill--correct {
    background: rgba(34,197,94,0.15);
    border-color: #22c55e;
    color: #22c55e;
}

/* =====================================================
   17. CHART (Progress)
   ===================================================== */

.chart-container {
    position: relative;
    max-width: 900px;
    height: 430px;
    margin: 25px auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 12px 25px rgba(0,0,0,0.3);
}

    .chart-container canvas {
        width: 100% !important;
        height: 100% !important;
    }

/* =====================================================
   18. RESPONSIVE – 11.3.3 BREAKPOINTS
   ===================================================== */

/* 1) עד 1200px – מסכים בינוניים / לפטופים */
@media (max-width: 1200px) {
    .hero {
        padding: 2.8rem 0 3.5rem;
    }

    .hero-inner {
        gap: 2.2rem;
    }

    .page-header-row {
        gap: 0.8rem;
    }
}

/* 2) עד 900px – טאבלטים ולפטופים קטנים */
@media (max-width: 900px) {

    /* ריווח כללי */
    .container,
    .page-container {
        padding-inline: 1rem;
    }

    /* Home – שהטקסט יישב יפה מעל האיור */
    .hero-inner {
        flex-direction: column;
        text-align: center;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-visual {
        width: 100%;
    }

    /* Teacher Dashboard – כותרת וכפתור אחד מעל השני */
    .page-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Student Dashboard – ריווח נוח יותר */
    .student-dashboard {
        padding: 2.2rem 1rem;
    }

    .student-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .student-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .student-dashboard-header {
        margin-bottom: 1.8rem;
    }

    .student-dashboard-actions {
        margin-top: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
    }
}

/* 3) עד 600px – מובייל */
@media (max-width: 600px) {
    .main-header {
        padding: 0.7rem 1rem;
    }

    .main-nav {
        gap: 1rem;
    }

    .page-title {
        font-size: 1.6rem;
    }

    .heading-xl {
        font-size: 1.8rem;
    }

    .student-dashboard {
        padding: 2rem 0.75rem;
    }

    .student-card,
    .dashboard-stat-card,
    .results-card {
        padding: 1.4rem 1.2rem;
    }

    .chart-container {
        height: 330px;
    }

    .auth-card {
        padding: 1.6rem 1.3rem;
    }
}




/* =========================================
   11.1.2 – Global Text Hierarchy
   ========================================= */

/* כותרות גלובליות */
.heading-xl {
    font-size: 2.1rem;
    line-height: 1.2;
    font-weight: 700;
}

.heading-lg {
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 600;
}

.heading-md {
    font-size: 1.3rem;
    line-height: 1.4;
    font-weight: 600;
}

/* טקסט רגיל ווריאנטים */
.text-normal {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text, #e5e7eb);
}

.text-small {
    font-size: 0.9rem;
    line-height: 1.5;
}

.text-muted {
    color: var(--color-text-muted, #9ca3af);
}

/* Utility קטן – במקום inline style="display:inline;" */
.inline-form {
    display: inline;
}

/* כדי להחליף את margin-top:1rem על הסטטיסטיקה בדשבורד מורה */
.dashboard-stat-card .stat-label + .stat-label {
    margin-top: 1rem;
}


/* ================================================
   11.2.1 – BUTTON SYSTEM (Safe Names, לא מפריע לעיצוב קיים)
   ================================================ */

/* בסיס לכל כפתור חדש */
.mt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: var(--transition-fast);
}

/* כפתור ראשי חדש */
.mt-btn-primary {
    background: var(--primary);
    color: #fff;
}

    .mt-btn-primary:hover {
        background: #1d4ed8;
    }

    .mt-btn-primary:active {
        background: #1e40af;
    }

    .mt-btn-primary:disabled {
        background: #475569;
        cursor: not-allowed;
    }

/* כפתור משני חדש */
.mt-btn-secondary {
    background: var(--accent);
    color: #fff;
}

    .mt-btn-secondary:hover {
        background: #4f46e5;
    }

    .mt-btn-secondary:active {
        background: #4338ca;
    }

    .mt-btn-secondary:disabled {
        background: #475569;
        cursor: not-allowed;
    }

/* כפתור outline חדש */
.mt-btn-outline {
    background: transparent;
    border: 2px solid var(--text);
    color: var(--text);
}

    .mt-btn-outline:hover {
        background: var(--text);
        color: var(--bg);
    }

    .mt-btn-outline:active {
        opacity: 0.85;
    }

    .mt-btn-outline:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* כפתור סכנה חדש */
.mt-btn-danger {
    background: var(--danger);
    color: #fff;
}

    .mt-btn-danger:hover {
        background: #dc2626;
    }

    .mt-btn-danger:active {
        background: #b91c1c;
    }

    .mt-btn-danger:disabled {
        background: #7f1d1d;
        cursor: not-allowed;
    }

/* ================================================
   FIX – ניגודיות טובה יותר לכרטיסי הדשבורד ב-Dark
   ================================================ */

/* כותרות של כרטיסים – שיהיו לבנות וברורות */
.dashboard-help-card .dashboard-help-title,
.dashboard-recent-card .dashboard-section-title,
.admin-section-card .dashboard-section-title {
    color: var(--text);
}

/* טקסט מצב ריק שיהיה קריא גם ב-Dark */
.dashboard-recent-card .empty-state {
    color: var(--text-muted);
}

/* קווי ההפרדה בכרטיסים – קצת חזקים יותר */
.card-header,
.card-footer {
    border-color: rgba(148, 163, 184, 0.35); /* יותר חזק מ-var(--border) ב-Dark, עדין בלייט */
}


/* ================================================
   FIX נוסף – טקסט ריק ב"מבחנים אחרונים" ב-Dark
   ================================================ */

/* ברירת מחדל – קריא גם בלייט */
.dashboard-recent-card .empty-state {
    color: var(--text-muted);
    opacity: 1;
}

/* במצב Dark (כש-html *לא* ב-light) – להבהיר יותר */
html:not(.light) .dashboard-recent-card .empty-state {
    color: #e2e8f0; /* טקסט בהיר */
}

/* החלק המודגש בתוך הטקסט */
.dashboard-recent-card .empty-state strong {
    color: var(--accent);
    font-weight: 600;
}


/* ================================================
   FINAL FIX – טקסט ריק ב"מבחנים אחרונים"
   ================================================ */

html:not(.light) .dashboard-recent-card .empty-state,
html:not(.light) .dashboard-recent-card .empty-state.text-normal,
html:not(.light) .dashboard-recent-card .empty-state.text-muted {
    color: #e5e7eb !important; /* כמעט לבן */
    opacity: 1 !important;
}

    /* הטקסט המודגש בשורה הזו */
    html:not(.light) .dashboard-recent-card .empty-state strong {
        color: var(--accent) !important;
    }


/* ================================================
   DARK MODE – טקסט קריא בכל הכרטיסים
   ================================================ */

/* כל הטקסטים בתוך כרטיסים ב-Dark יהיו בהירים וברורים */
html:not(.light) .card p,
html:not(.light) .card li,
html:not(.light) .card .stat-caption,
html:not(.light) .card .admin-section-subtitle {
    color: #e5e7eb !important; /* טקסט בהיר */
    opacity: 0.95 !important;
}

/* טקסט "מוחלש" בתוך כרטיסים – עדיין קריא */
html:not(.light) .card .text-muted {
    color: #cbd5f5 !important; /* קצת יותר בהיר */
    opacity: 0.9 !important;
}


/* ================================================
   GLOBAL TITLES – כותרות לבנות ב-Dark Mode
   ================================================ */

html:not(.light) h1,
html:not(.light) h2,
html:not(.light) h3,
html:not(.light) .heading-xl,
html:not(.light) .heading-lg,
html:not(.light) .heading-md {
    color: #ffffff !important;
}


html:not(.light) .card-header,
html:not(.light) .card-footer {
    border-color: rgba(255,255,255,0.18) !important;
}


/* ================================================
   11.2.3 – FORM SYSTEM – form-select
   ================================================ */

/* select סטנדרטי – אותו סטייל כמו form-input */
.form-select {
    padding: 0.55rem 0.85rem;
    background: var(--surface-light);
    border-radius: 12px;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.95rem;
    transition: border .2s, box-shadow .2s;
}

    .form-select:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
    }


/* ================================================
   11.2.3 – FORM SYSTEM – form-select
   ================================================ */

/* select סטנדרטי – אותו סטייל כמו form-input */
.form-select {
    padding: 0.55rem 0.85rem;
    background: var(--surface-light);
    border-radius: 12px;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.95rem;
    transition: border .2s, box-shadow .2s;
}

    .form-select:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
    }


/* מרווח לתחתית כרטיס הגרף כדי שהצל לא ייחתך */
.student-progress-page .student-card {
    margin-bottom: 3rem; /* אפשר להגדיל ל-3rem אם תרצה יותר מקום */
}

.student-progress-page .student-dashboard-actions {
    margin-bottom: 1.2rem; /* מרווח מושלם */
}


/* ================================================
   12.3.2 – PLAN CARDS & FEATURES
   ================================================ */

/* כרטיסי חבילות משתמשים ב-.card הקיים, כאן רק שיפורים קטנים */
.plan-card {
    position: relative;
}

.plan-card-highlight {
    border-color: var(--accent);
    box-shadow: 0 16px 40px rgba(88, 28, 135, 0.45);
}

/* תג "מומלץ" / "למורים" קטן בפינה */
.plan-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(59,130,246,0.18);
    color: #bfdbfe;
}

.plan-badge-teacher {
    background: rgba(147, 51, 234, 0.2);
    color: #e9d5ff;
}

/* רשימת Features בתוך כל חבילה */
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0.3rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

    .plan-features li {
        display: flex;
        align-items: flex-start;
        gap: 0.45rem;
        font-size: 0.92rem;
        color: var(--text-muted);
    }

/* אייקון עגול עם ✓ */
.plan-feature-icon {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(34, 197, 94, 0.8);
    color: #bbf7d0;
    margin-top: 2px;
}

/* טקסט מודגש בתוך feature */
.plan-features strong {
    color: var(--accent);
}


/* =====================================================
   14.1.1 – Skeleton Loading System
   ===================================================== */

/* מה מוצג כברירת מחדל */
.when-loading {
    display: none;
}

.when-loaded {
    display: block;
}

/* כשיש מצב טעינה גלובלי על ה-body */
body.is-loading .when-loading {
    display: block;
}

body.is-loading .when-loaded {
    display: none;
}

/* בסיס לסקלטון */
.skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.10);
}

/* קווים (שורות טקסט) */
.skeleton-line {
    position: relative;
    overflow: hidden;
    display: block;
    height: 12px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

/* כרטיס סקלטון – לשימוש על cardים */
.skeleton-card {
    position: relative;
    overflow: hidden;
}

.skeleton-card-body {
    padding: 1.2rem 1.4rem;
}

/* אפקט Shimmer */
.skeleton-line::before,
.skeleton-card::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient( 90deg, transparent, rgba(148, 163, 184, 0.4), transparent );
    animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}


/* ================================
   EMPTY STATE – עיצוב עדין ופרימיום
   ================================ */

.empty-state {
    background: linear-gradient(145deg, var(--surface), var(--surface-light));
    border: 1px dashed var(--border);
    border-radius: 18px;
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: var(--transition-fast);
}

    .empty-state:hover {
        transform: translateY(-2px);
    }

.empty-state-icon {
    font-size: 42px;
    margin-bottom: 16px;
    opacity: 0.85;
}

.empty-state-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.empty-state-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.empty-state .btn-primary {
    padding: 10px 22px;
    font-size: 14px;
}


/* ================================================
   15.3 – ACCESSIBILITY & KEYBOARD NAVIGATION
   ================================================ */

/* 1. Skip Link – נגיש רק בפוקוס מקלדת */
.skip-link {
    position: absolute;
    top: -40px;
    right: 16px;
    background: var(--primary);
    color: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    z-index: 9999;
    transition: top 0.2s ease;
}

    .skip-link:focus {
        top: 16px;
        outline: none;
    }

/* 2. Focus Visible – טבעת פוקוס ברורה לכל האתר */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* 3. ביטול Focus מכוער בעכבר – רק מקלדת */
:focus:not(:focus-visible) {
    outline: none;
}

/* 4. נגישות לכפתורי Toggle ו-Checkbox */
input[type="checkbox"]:focus-visible,
.toggle-checkbox:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* 5. נגישות לכפתורים וקישורים */
button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* 6. נגישות לשדות טופס */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* 7. ניגודיות משופרת לטקסט Placeholder */
::placeholder {
    color: var(--text-muted);
    opacity: 0.9;
}

/* 8. אנימציות – כיבוי למשתמשים עם motion sensitivity */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}



/* ===============================
   Language Toggle – Premium UI
   =============================== */

.language-toggle {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-inline-start: 12px;
}

.lang-btn {
    background: transparent;
    border: 1px solid var(--surface-light);
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .lang-btn:hover {
        background: var(--surface-light);
        color: var(--text);
    }

    .lang-btn.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }


/* ===============================
   RTL / LTR Auto Support
   =============================== */

html[dir="ltr"] {
    direction: ltr;
}

html[dir="rtl"] {
    direction: rtl;
}


    /* ===============================
   Global RTL / LTR Alignment Fix
   =============================== */

    /* ברירת מחדל – עברית */
    html[dir="rtl"] body {
        text-align: right;
    }

/* אנגלית – הכל מתיישר שמאלה */
html[dir="ltr"] body {
    text-align: left;
}

/* תיקון כותרות */
html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3,
html[dir="ltr"] h4,
html[dir="ltr"] h5,
html[dir="ltr"] h6 {
    text-align: left;
}

/* תיקון פסקאות */
html[dir="ltr"] p {
    text-align: left;
}

/* תיקון כרטיסים */
html[dir="ltr"] .card,
html[dir="ltr"] .card-header,
html[dir="ltr"] .card-body {
    text-align: left;
}


/* ===============================
   Fix punctuation in English
   =============================== */

html[dir="ltr"] {
    unicode-bidi: plaintext;
    direction: ltr;
}

    html[dir="ltr"] .heading-xl,
    html[dir="ltr"] .heading-lg,
    html[dir="ltr"] .heading-md {
        direction: ltr;
        unicode-bidi: plaintext;
    }


    html[dir="ltr"] .dashboard-grid {
        direction: ltr;
    }


.header-right {
    display: flex;
    align-items: center;
    gap: 8px; /* מרחק קטן בין שפה ל-theme */
}

/* כבר יש לך את זה, אבל רק לוודא */
.language-toggle {
    display: flex;
    gap: 8px;
    align-items: center;
}


/* ================================
   GLOBAL RTL / LTR FIX
   ================================ */

/* ברירת מחדל – עברית */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* אנגלית */
html[dir="ltr"] body {
    direction: ltr;
    text-align: left;
}

/* ================================
   HEADER FIX
   ================================ */

html[dir="ltr"] .main-header {
    flex-direction: row;
}

html[dir="rtl"] .main-header {
    flex-direction: row-reverse;
}

html[dir="ltr"] .main-nav {
    flex-direction: row;
}

html[dir="rtl"] .main-nav {
    flex-direction: row-reverse;
}

/* ================================
   PAGE HEADERS (Titles + subtitles)
   ================================ */

html[dir="ltr"] .page-header-row,
html[dir="ltr"] .student-dashboard-header {
    text-align: left;
    align-items: flex-start;
}

html[dir="rtl"] .page-header-row,
html[dir="rtl"] .student-dashboard-header {
    text-align: right;
    align-items: flex-end;
}

/* ================================
   DASHBOARD CARDS ALIGNMENT
   ================================ */

html[dir="ltr"] .dashboard-grid,
html[dir="ltr"] .student-dashboard-grid,
html[dir="ltr"] .student-dashboard-stats {
    direction: ltr;
}

html[dir="rtl"] .dashboard-grid,
html[dir="rtl"] .student-dashboard-grid,
html[dir="rtl"] .student-dashboard-stats {
    direction: rtl;
}

/* ================================
   CARD TEXT
   ================================ */

html[dir="ltr"] .card,
html[dir="ltr"] .card * {
    text-align: left;
}

html[dir="rtl"] .card,
html[dir="rtl"] .card * {
    text-align: right;
}

/* ================================
   BUTTON GROUPS
   ================================ */

html[dir="ltr"] .student-dashboard-actions,
html[dir="ltr"] .dashboard-help-actions {
    justify-content: flex-start;
}

html[dir="rtl"] .student-dashboard-actions,
html[dir="rtl"] .dashboard-help-actions {
    justify-content: flex-end;
}

/* ================================
   EMPTY STATE CENTER FIX
   ================================ */

.empty-state {
    text-align: center !important;
}


/* כותרת מרוכזת – עובד גם ל-Teacher וגם ל-Student */
.page-header-row.page-header-centered {
    justify-content: center;
    text-align: center;
}


.teacher-dashboard-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* כבר יש לך לוגיקה של RTL/LTR ל-page-header-row, אז זה יתיישב יפה */


/* =====================================================
   18.1 – CENTRAL AI CHAT PAGE
   ===================================================== */

.chat-page {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.chat-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 1.5fr);
    gap: 1.5rem;
    align-items: flex-start;
}

@media (max-width: 900px) {
    .chat-layout {
        grid-template-columns: 1fr;
        margin-top: 1.5rem;
    }
}

.chat-main-card {
    background: var(--surface);
    border-radius: 18px;
    padding: 1.6rem 1.8rem;
    border: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.chat-role-label strong {
    color: var(--accent);
}

.chat-hint {
    max-width: 260px;
}

/* חלון הודעות */
.chat-window {
    flex: 1;
    background: var(--surface-light);
    border-radius: 14px;
    padding: 1rem;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    max-height: 520px;
}

.chat-empty {
    text-align: center;
    margin-bottom: 0.8rem;
}

    .chat-empty .empty-state-icon {
        font-size: 30px;
        margin-bottom: 6px;
    }

/* בועות צ'אט */
.chat-message {
    max-width: 80%;
    padding: 0.6rem 0.9rem;
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.5;
}

html[dir="rtl"] .chat-message.user,
html[dir="ltr"] .chat-message.user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
}

html[dir="rtl"] .chat-message.ai,
html[dir="ltr"] .chat-message.ai {
    align-self: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
}

/* שורת input */
.chat-input-row {
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

    .chat-input-row textarea {
        flex: 1;
        min-height: 56px;
        max-height: 150px;
        resize: vertical;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--surface-light);
        padding: 0.7rem 0.9rem;
        font-size: 0.95rem;
        color: var(--text);
    }

        .chat-input-row textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
        }

    .chat-input-row .btn-primary {
        align-self: stretch;
        padding-inline: 1.4rem;
        white-space: nowrap;
    }

/* צד ימין – כרטיסים */
.chat-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-side-card {
    background: var(--surface);
    border-radius: 18px;
    padding: 1.3rem 1.5rem;
    border: 1px solid var(--border);
    box-shadow: 0 12px 25px rgba(0,0,0,0.28);
}

/* רדיו – סגנון תשובה */
.chat-answer-options {
    margin-top: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.9rem;
}

    .chat-radio-option input[type="radio"] {
        margin-top: 4px;
    }

.chat-radio-title {
    font-weight: 600;
    margin-bottom: 2px;
}

/* כפתורי דוגמאות */
.chat-examples-list {
    margin-top: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-example-btn {
    width: 100%;
    text-align: start;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    border: 1px dashed var(--border);
    background: var(--surface-light);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s;
}

    .chat-example-btn:hover {
        background: rgba(148,163,184,0.12);
        border-color: var(--primary);
        transform: translateY(-1px);
    }


/* ================================================
   18.3 – Chat Page (clean redesign)
   ================================================ */

/* מעטפת כללית לדף הצ'אט */
.chat-page .page-container {
    background: var(--surface);
    border-radius: 1.75rem;
    padding: 1.75rem 1.9rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

/* כותרת עליונה */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.chat-header-main .heading-xl,
.chat-header-main .page-subtitle {
    color: var(--text);
}

.chat-header-main .page-subtitle {
    margin-top: 0.25rem;
}

.chat-header-main .chat-desc {
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    max-width: 560px;
}

.chat-header-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.chat-role-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.chat-role-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--surface-light);
    color: var(--text);
    border: 1px solid rgba(148, 163, 184, 0.45);
    font-size: 0.85rem;
}

/* גריד ראשי – צ'אט + סיידבר */
.chat-main {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr);
    gap: 1.75rem;
}

/* פאנל צ'אט */
.chat-panel {
    background: var(--bg);
    border-radius: 1.25rem;
    padding: 1.3rem 1.3rem 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.chat-panel-header {
    margin-bottom: 0.3rem;
}

    .chat-panel-header .heading-s {
        color: var(--text);
    }

    .chat-panel-header .small {
        color: var(--text-muted);
    }

/* הודעות */
.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.chat-message {
    max-width: 80%;
}

    .chat-message.user {
        align-self: flex-end;
    }

    .chat-message.ai {
        align-self: flex-start;
    }

    .chat-message .bubble {
        padding: 0.7rem 1rem;
        border-radius: 1.25rem;
        font-size: 0.94rem;
    }

    /* בועה של המשתמש */
    /* בועה של המשתמש – עיצוב חדש */
    .chat-message.user .bubble {
        background: linear-gradient(135deg, #6366f1, #3b82f6);
        color: #ffffff;
        border-radius: 1.1rem 1.1rem 0.3rem 1.1rem;
        box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
        padding: 0.7rem 1.05rem;
        font-weight: 500;
        max-width: 100%;
    }




    /* בועה של ה-AI */
    .chat-message.ai .bubble {
        background: var(--surface-light);
        border: 1px solid rgba(148, 163, 184, 0.35);
        color: var(--text);
        border-radius: 1.1rem 1.1rem 1.1rem 0.3rem;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
        padding: 0.7rem 1.05rem;
        max-width: 100%;
    }



    .chat-message .meta {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 0.2rem;
    }

/* מצב ריק – שיחה לדוגמה */
.chat-empty {
    padding: 0.75rem 0;
    border-radius: 1rem;
}

/* טופס קלט */
.chat-input-form {
    margin-top: 0.3rem;
}

.chat-input-row {
    display: flex;
    gap: 0.8rem;
    align-items: flex-end;
}

.chat-textarea {
    flex: 1;
    resize: vertical;
}

.chat-send-button {
    border-radius: 999px;
    padding-inline: 1.6rem;
    min-width: 76px;
}

/* פאנל צד – Answer Style + Examples */
.chat-side {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.chat-side-panel {
    background: var(--bg);
    border-radius: 1.25rem;
    padding: 1.2rem 1.3rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
}

    .chat-side-panel .heading-s {
        color: var(--text);
    }

    .chat-side-panel .small {
        color: var(--text-muted);
        font-size: 0.85rem;
    }

/* Answer Style – כפתורים */
.answer-mode-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.7rem;
}

.answer-mode-option {
    width: 100%;
    text-align: right;
    padding: 0.65rem 0.85rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.55);
    background: var(--surface);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

    .answer-mode-option .title {
        font-weight: 500;
        font-size: 0.94rem;
        color: var(--text);
    }

    .answer-mode-option .description {
        font-size: 0.82rem;
        color: var(--text-muted);
        margin-top: 0.1rem;
    }

    .answer-mode-option.is-selected {
        border-color: var(--accent);
        background: rgba(99, 102, 241, 0.2);
        box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.55);
        transform: translateY(-1px);
    }

    .answer-mode-option:is(:hover):not(.is-selected) {
        border-color: var(--primary);
    }

/* דוגמאות */
.chat-examples-list {
    margin-top: 0.4rem;
    list-style: disc;
    padding-right: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .chat-examples-list li {
        cursor: pointer;
        font-size: 0.9rem;
        color: var(--text);
    }

        .chat-examples-list li:hover {
            text-decoration: underline;
        }

/* רספונסיב */
@media (max-width: 900px) {
    .chat-page .page-container {
        padding: 1.4rem 1.2rem;
        border-radius: 1.3rem;
    }

    .chat-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .chat-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .chat-panel,
    .chat-side-panel {
        padding: 1rem 1.05rem;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
    }

    .chat-message {
        max-width: 100%;
    }
}


.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 70%;
}

    .chat-message.user {
        align-self: flex-end;
        align-items: flex-end;
    }

    .chat-message.ai {
        align-self: flex-start;
        align-items: flex-start;
    }


.chat-message {
    background: none !important;
    padding: 0 !important;
    border: none !important;
}


/* ================================
   Chat bubble final alignment fix
   ================================ */

/* מרווח פנימי לאזור ההודעות */
.chat-messages {
    padding-left: 0.5rem;
    padding-right: 0.75rem;
}

/* ביטול רקע שורת הודעה */
.chat-message {
    background: none !important;
    padding: 0 !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    max-width: 70%;
}

    /* AI = שמאל */
    .chat-message.ai {
        align-self: flex-start;
        align-items: flex-start;
    }

    /* User = ימין חזק */
    .chat-message.user {
        align-self: flex-end;
        align-items: flex-end;
        margin-right: 0;
    }

        /* דחיפה סופית לימין */
        .chat-message.user .bubble {
            margin-left: auto;
        }

        /* בועת משתמש – עיצוב סופי */
        .chat-message.user .bubble {
            background: linear-gradient(135deg, #6366f1, #3b82f6);
            color: #ffffff;
            border-radius: 1.1rem 1.1rem 0.3rem 1.1rem;
            box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
            padding: 0.7rem 1.05rem;
            font-weight: 500;
            max-width: 100%;
        }

    /* בועת AI – עיצוב סופי */
    .chat-message.ai .bubble {
        background: var(--surface-light);
        border: 1px solid rgba(148, 163, 184, 0.35);
        color: var(--text);
        border-radius: 1.1rem 1.1rem 1.1rem 0.3rem;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
        padding: 0.7rem 1.05rem;
        max-width: 100%;
    }


/* תיקון יישור לדמו ההתחלתי בצ'אט */
.chat-empty {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}


/* ====== CHAT FIX: שמירת שורת השליחה בתחתית ====== */

.chat-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: 10px;
}

/* שורת השליחה מודבקת למטה */
.chat-input-form {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* שלא יימתח לגובה מיותר */
.chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* שדה ההקלדה */
.chat-textarea {
    flex: 1;
    resize: none;
    height: 70px; /* ניתן לשנות אם תרצה */
}

/* כפתור שליחה — לא מתארך מיותר */
.chat-send-button {
    white-space: nowrap;
    height: 70px;
    padding: 0 20px;
}


/* ========================================= */
/* 18.5 – Chat layout & scroll styling       */
/* ========================================= */

/* מוודא שהצד של הצ'אט והצד הימני נמתחים לגובה */
.chat-main {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: stretch;
}

/* גם הפאנל וגם הצד הימני יהיו טורים שגדלים לגובה */
.chat-panel,
.chat-side {
    display: flex;
    flex-direction: column;
    min-height: 480px;
}

/* אזור ההודעות – תופס את כל הגובה הפנוי בצד שמאל */
/* אזור ההודעות – תופס את כל הגובה בצד שמאל, אבל ההודעות נערמות מלמעלה */
.chat-messages {
    flex: 1;
    min-height: 320px;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: var(--surface-elevated, #020617);
    overflow-y: auto;
    /* Scrollbar מודרני */
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.7) transparent;
}

    /* Scrollbar ל-Chrome/Edge/WebKit */
    .chat-messages::-webkit-scrollbar {
        width: 8px;
    }

    .chat-messages::-webkit-scrollbar-track {
        background: transparent;
    }

    .chat-messages::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.6);
        border-radius: 999px;
    }

        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.9);
        }


    /* שיהיה פער קטן בין הבועות לבין הקצה התחתון */
    .chat-messages .chat-message:last-child {
        margin-bottom: 4px;
    }

    /* עיצוב Scrollbar ל-Chromium / Edge / WebKit */
    .chat-messages::-webkit-scrollbar {
        width: 8px;
    }

    .chat-messages::-webkit-scrollbar-track {
        background: transparent;
    }

    .chat-messages::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.6);
        border-radius: 999px;
    }

        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.9);
        }


/* ========================================= */
/* CHAT – תיקון גובה אזור ההודעות           */
/* ========================================= */

/* סידור הרשת של הצ'אט – עמודת צ'אט + עמודת צד */
.chat-page .chat-main {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: flex-start;
}

/* הפאנל השמאלי – כותרת, הודעות, טופס */
.chat-page .chat-panel {
    display: flex;
    flex-direction: column;
}

/* אזור ההודעות עצמו – גובה קבוע עם גלילה פנימית */
.chat-page .chat-messages {
    flex: 0 0 auto;
    height: 55vh; /* ~חצי מסך + קצת */
    max-height: calc(100vh - 260px); /* שלא יגלוש מתחת למסך */
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: var(--surface-elevated, #020617);
    overflow-y: auto;
    /* Scrollbar מודרני לדפדפנים שלא תומכים ב-webkit */
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.7) transparent;
}

    /* Scrollbar יפה ל-Chrome/Edge/WebKit */
    .chat-page .chat-messages::-webkit-scrollbar {
        width: 8px;
    }

    .chat-page .chat-messages::-webkit-scrollbar-track {
        background: transparent;
    }

    .chat-page .chat-messages::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.6);
        border-radius: 999px;
    }

        .chat-page .chat-messages::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.9);
        }


/* ========================================= */
/* CHAT – הקטנת הכרטיס כדי שלא יהיה scroll לעמוד */
/* ========================================= */

/* פחות padding אנכי לכרטיס של הצ'אט */
.page-section.chat-page {
    padding-top: 24px;
    padding-bottom: 24px;
}

/* הקטנת גובה אזור ההודעות בתוך הכרטיס */
.chat-page .chat-messages {
    height: 45vh; /* במקום ~55vh */
    max-height: calc(90vh - 340px); /* מרווח בטוח יותר מהקצה התחתון */
}


/* ========================================= */
/* CHAT – יישור סימטרי של המרווחים מעלה/מטה */
/* ========================================= */

/* הסקשן הראשי של הצ'אט – מרווח אחיד מלמעלה ולמטה */
.page-section.chat-page {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* גובה כרטיס הצ'אט (הפאנל השמאלי) */
.chat-page .chat-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* החלק שבו נמצאות ההודעות – גובה מתואם */
.chat-page .chat-messages {
    flex: 0 0 auto;
    height: calc(100vh - 360px); /* גובה מאוזן שיתאים ל־padding החדש */
    max-height: calc(100vh - 360px);
    padding: 16px;
    border-radius: 16px;
    background: var(--surface-elevated, #020617);
    overflow-y: auto;
    /* Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.7) transparent;
}

    .chat-page .chat-messages::-webkit-scrollbar {
        width: 8px;
    }

    .chat-page .chat-messages::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.6);
        border-radius: 999px;
    }

        .chat-page .chat-messages::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.9);
        }


/* ========================================= */
/* CHAT – תיקון סופי: בלי גלילה בעמוד, רווח סימטרי */
/* ========================================= */

/* רווח אחיד מעל ומתחת לכרטיס הצ'אט */
.page-section.chat-page {
    padding-top: 32px;
    padding-bottom: 32px;
}

/* הכרטיס כולו (התיבה האפורה הגדולה) לא יעלה על גובה המסך */
.chat-page .page-container {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 140px); /* 140px ~ תפריט עליון + מרווח חיצוני */
}

/* שני הצדדים (צ'אט + Answer Style) פרוסים בתוך הגובה הזה */
.chat-page .chat-main {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr);
    gap: 24px;
}

/* כל צד – טור שנמתח לגובה */
.chat-page .chat-panel,
.chat-page .chat-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* אזור ההודעות – ממלא את מה שנשאר, בלי vh */
.chat-page .chat-messages {
    flex: 1;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: var(--surface-elevated, #020617);
    overflow-y: auto;
    /* Scrollbar עדין ונחמד */
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.7) transparent;
}

    .chat-page .chat-messages::-webkit-scrollbar {
        width: 8px;
    }

    .chat-page .chat-messages::-webkit-scrollbar-track {
        background: transparent;
    }

    .chat-page .chat-messages::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.6);
        border-radius: 999px;
    }

        .chat-page .chat-messages::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.9);
        }



/* ========================================= */
/* CHAT – מרווח אחיד מלמעלה ולמטה           */
/* ========================================= */

/* הסקשן של הצ'אט עצמו — מרווח שווה מלמעלה ומלמטה */
.page-section.chat-page {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

/* מבטל כל הגבלת גובה קודמת על המכולה */
.chat-page .page-container {
    max-height: none !important;
    height: auto !important;
}

/* מבטל כל override על chat-messages */
.chat-page .chat-messages {
    height: auto !important;
    max-height: none !important;
    flex: 1 1 auto;
}

/* כדי למנוע שהכרטיס יתפוצץ, צד ימין ושמאל בסידור גמיש בלבד */
.chat-page .chat-main {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr);
    gap: 24px;
}



/* ========================================= */
/*  XP / LEVEL BADGE – STUDENT / TEACHER     */
/*  טבלה אחת לכולם: Free / Student / Teacher */
/* ========================================= */

.level-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    border: 1px solid var(--accent, #7c5cff);
    background: var(--surface-elevated, #111827);
    color: var(--text-primary, #ffffff);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}

.level-badge-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--accent, #7c5cff);
}

/* אופציונלי – ריווח קטן מתחת לכותרת בדשבורד תלמיד */
.student-level-row {
    margin-top: 0.4rem;
}



/* =========================== */
/* User Level Pill – Header    */
/* =========================== */

.user-level-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-inline-start: 0.75rem;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
}

.user-level-pill-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--accent, #4f46e5);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.25);
}

.user-level-pill-text {
    white-space: nowrap;
}

/* מצב בהיר */
html.light .user-level-pill {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.03);
    color: #0f172a;
}

html.light .user-level-pill-dot {
    background: var(--primary, #2563eb);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}


/* ============================
   19.4 Gamification UI
   ============================ */

/* Header pills */
.header-gamification {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-inline-end: .75rem;
}

.g-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .65rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    font-weight: 800;
    font-size: .86rem;
    line-height: 1;
    white-space: nowrap;
}

    .g-pill .g-ico {
        font-size: 1rem;
    }

    .g-pill .g-val {
        font-weight: 900;
    }

    .g-pill .g-label {
        opacity: .9;
        font-weight: 800;
    }

.g-pill-streak {
    color: #ff7a18;
}

.g-pill-xp {
    color: var(--primary);
}

/* Dashboard card */
.g-card {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 16px;
    padding: .9rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    max-width: 720px;
}

.g-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .7rem;
}

.g-card-title {
    font-weight: 900;
    font-size: 1.05rem;
}

.g-card-sub {
    margin-top: .15rem;
    opacity: .85;
    font-weight: 700;
}

.g-card-next {
    text-align: end;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.g-card-next-val {
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--primary);
}

.g-card-next-label {
    opacity: .85;
    font-weight: 800;
    font-size: .85rem;
}

/* Progress bar */
.g-progress {
    height: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--border);
    overflow: hidden;
}

.g-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
}

/* Badges */
.g-badges {
    margin-top: .8rem;
}

.g-badges-title {
    font-weight: 900;
    margin-bottom: .4rem;
}

.g-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.g-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-weight: 800;
    font-size: .85rem;
}

.g-muted {
    opacity: .75;
    font-weight: 700;
}


/* ================================
   HEADER GAMIFICATION (19.4)
   ================================ */

.header-right {
    display: flex;
    align-items: center;
    gap: .7rem;
}

/* הגיימיפיקציה בסוף הקבוצה (הכי רחוק מהניווט) */
.header-gamification {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-inline-start: .6rem;
    flex-shrink: 0;
}

.gamification-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    line-height: 1;
    white-space: nowrap;
}

    .gamification-pill .pill-label {
        font-size: .72rem;
        opacity: .75;
        letter-spacing: .2px;
    }

    .gamification-pill .pill-value {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }

    .gamification-pill .pill-number {
        font-weight: 700;
        font-size: .86rem;
    }

    .gamification-pill .pill-unit {
        font-size: .72rem;
        opacity: .85;
    }

    .gamification-pill .pill-sep {
        opacity: .35;
        font-size: .8rem;
        margin-inline: .1rem;
    }

/* 🔥 קטן יותר */
.streak-flame {
    font-size: .78em;
    line-height: 1;
}



/* ================================
   FORCE HEADER LAYOUT (19.4 FIX)
   ================================ */

.main-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.main-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    gap: 1.25rem;
}

.header-right {
    display: flex;
    align-items: center;
    gap: .7rem;
    /* ✅ זה הדחיפה לקצה השני בכל שפה (RTL/LTR) */
    margin-inline-start: auto;
}

/* ================================
   GAMIFICATION UI
   ================================ */

.header-gamification {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-shrink: 0;
}

.gamification-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .34rem .65rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    line-height: 1;
    white-space: nowrap;
}

    .gamification-pill .pill-label {
        font-size: .72rem;
        opacity: .75;
    }

    .gamification-pill .pill-value {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }

    .gamification-pill .pill-number {
        font-weight: 700;
        font-size: .86rem;
    }

/* 🔥 קטן יותר */
.streak-flame {
    font-size: .78em;
    line-height: 1;
}


/* ===== 19.4: Force gamification to the far edge ===== */

.header-right {
    display: flex;
    align-items: center;
    gap: .7rem;
}

/* ✅ מה שדוחף את הגיימיפיקציה לצד השני */
.header-gamification {
    margin-inline-start: auto; /* דוחף לקצה השני בתוך header-right */
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-shrink: 0;
}

.gamification-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .34rem .65rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    line-height: 1;
    white-space: nowrap;
}

    .gamification-pill .pill-label {
        font-size: .72rem;
        opacity: .75;
    }

    .gamification-pill .pill-value {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }

    .gamification-pill .pill-number {
        font-weight: 700;
        font-size: .86rem;
    }

/* 🔥 קטן יותר */
.streak-flame {
    font-size: .78em;
    line-height: 1;
}


/* ===============================
   19.4 – Gamification pills
   Light / Dark mode fix
   =============================== */

.header-gamification {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* בסיס */
.gamification-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    /* 🔥 קטן יותר */
    .gamification-pill .streak-flame {
        font-size: 0.85em;
    }

/* ===============================
   DARK MODE
   =============================== */
html.dark .gamification-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e6e8ee;
}

/* ===============================
   LIGHT MODE – כאן היה הבעיה
   =============================== */
html.light .gamification-pill {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: #1f2937;
}

    /* חידוד קל כדי שירגיש "קליקי" */
    html.light .gamification-pill:hover {
        backgroundhbackground: rgba(0, 0, 0, 0.08);
    }

/* הפרדה ויזואלית בין Streak ל-XP */
.gamification-pill.streak {
    gap: 0.35rem;
}

.gamification-pill.xp {
    font-weight: 600;
}


/* =========================================
   DASHBOARD GAMIFICATION CARD (19.4 polish)
   ========================================= */

.dashboard-gamification {
    margin: 1rem 0 1.6rem;
}

.gamification-card {
    padding: 1.25rem 1.4rem;
    border-radius: 18px;
    overflow: hidden;
}

.gamification-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.gamification-left .gamification-kicker {
    font-size: .78rem;
    opacity: .7;
}

.gamification-left .gamification-big {
    font-size: 1.35rem;
    font-weight: 800;
    margin-top: .2rem;
}

.gamification-left .gamification-sub {
    margin-top: .35rem;
    font-size: .9rem;
    opacity: .85;
}

.gamification-right {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}

.mini-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .65rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    line-height: 1;
    white-space: nowrap;
}

html.light .mini-pill {
    border-color: rgba(0,0,0,.14);
    background: rgba(0,0,0,.04);
}

.mini-pill .mini-label {
    font-size: .72rem;
    opacity: .75;
}

.mini-pill .mini-value {
    font-weight: 800;
    font-size: .9rem;
}

.streak-flame {
    font-size: .9em;
    line-height: 1;
    margin-inline-end: .1rem;
}

/* XP Progress */
.xp-progress {
    margin-top: 1rem;
}

.xp-progress-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    overflow: hidden;
}

html.light .xp-progress-track {
    background: rgba(0,0,0,.10);
}

.xp-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: rgba(120,170,255,.95);
}

.xp-progress-meta {
    margin-top: .45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    opacity: .75;
}

/* Badges empty state inside the card */
.badges-empty {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(255,255,255,.10);
}

html.light .badges-empty {
    border-top-color: rgba(0,0,0,.10);
}

.badges-title {
    font-size: .85rem;
    font-weight: 800;
    margin-bottom: .25rem;
}

.badges-text {
    font-size: .8rem;
    opacity: .65;
}

/* Responsive */
@media (max-width: 900px) {
    .gamification-top {
        flex-direction: column;
        align-items: stretch;
    }

    .gamification-right {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}


/* ===============================
   FIX: Gamification card in DARK
   (better contrast + readable text)
   =============================== */

html.dark .gamification-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
}

html.dark .gamification-left .gamification-kicker {
    opacity: 0.85;
    color: rgba(255,255,255,0.80);
}

html.dark .gamification-left .gamification-big {
    color: rgba(255,255,255,0.95);
}

html.dark .gamification-left .gamification-sub {
    opacity: 0.90;
    color: rgba(255,255,255,0.85);
}

html.dark .xp-progress-track {
    background: rgba(255,255,255,0.12);
}

html.dark .xp-progress-meta {
    opacity: 0.90;
    color: rgba(255,255,255,0.80);
}

html.dark .badges-empty {
    border-top-color: rgba(255,255,255,0.12);
}

html.dark .badges-title {
    color: rgba(255,255,255,0.92);
}

html.dark .badges-text {
    opacity: 0.85;
    color: rgba(255,255,255,0.75);
}

/* mini pills clarity */
html.dark .mini-pill {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.16);
}

    html.dark .mini-pill .mini-label {
        opacity: 0.85;
    }

    html.dark .mini-pill .mini-value {
        color: rgba(255,255,255,0.92);
    }


/* ===============================
   DARK MODE: Mini pills visibility FIX
   =============================== */

html.dark .gamification-right .mini-pill {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}

    html.dark .gamification-right .mini-pill .mini-label {
        color: rgba(255,255,255,0.78) !important;
        opacity: 1 !important;
    }

    html.dark .gamification-right .mini-pill .mini-value {
        color: rgba(255,255,255,0.95) !important;
    }

    /* 🔥 אייקון קצת יותר בולט */
    html.dark .gamification-right .mini-pill .streak-flame {
        filter: brightness(1.15);
    }


/* =========================
   19.5 – Badges Grid (Dashboard)
   ========================= */

.badges-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
}

html.light .badges-block {
    border-top: 1px solid rgba(0,0,0,.08);
}

.badges-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.badges-title {
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 13px;
    opacity: .95;
}

.badges-sub {
    font-size: 12px;
    opacity: .7;
}

.badges-empty {
    padding: 10px 0 2px;
}

.badges-text {
    opacity: .75;
    font-size: 13px;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1100px) {
    .badges-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .badges-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.badge-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

    .badge-card:hover {
        transform: translateY(-2px);
        border-color: rgba(255,255,255,.18);
        background: rgba(255,255,255,.05);
    }

html.light .badge-card {
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(0,0,0,.02);
}

    html.light .badge-card:hover {
        border-color: rgba(0,0,0,.16);
        background: rgba(0,0,0,.035);
    }

.badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    flex: 0 0 44px;
}

html.light .badge-icon {
    background: rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.10);
}

.badge-body {
    min-width: 0;
}

.badge-title {
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 4px;
}

.badge-desc {
    font-size: 12px;
    opacity: .78;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* =========================
   19.5 Badges Grid (Dashboards)
   ========================= */

.badges-section {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

.badges-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.badges-title {
    font-weight: 800;
    letter-spacing: .2px;
}

.badges-sub {
    opacity: .75;
    font-size: .92rem;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

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

.badge-card {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.badge-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.08);
    font-size: 20px;
    line-height: 1;
}

.badge-meta {
    min-width: 0;
}

.badge-title {
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.1;
}

.badge-desc {
    margin-top: 0.2rem;
    font-size: 0.92rem;
    opacity: .8;
    line-height: 1.2;
}

/* ✅ Dark mode – להרים קונטרסט ולמנוע "היעלמות" */
html.dark .badge-card {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

html.dark .badge-ico {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
}

html.dark .badge-desc {
    opacity: .88;
}


/* =========================
   Badges – Dark Mode Fix
   ========================= */

html.dark .badge-card {
    background: linear-gradient( 180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03) );
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

    html.dark .badge-card:hover {
        background: linear-gradient( 180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.05) );
        border-color: rgba(255,255,255,0.28);
    }

html.dark .badge-icon {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

html.dark .badge-title {
    color: #ffffff;
    font-weight: 800;
}

html.dark .badge-desc {
    color: rgba(255,255,255,0.78);
}

/* Empty state */
html.dark .badges-empty {
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.75);
}


/* ============================= */
/*  19.5 – Badges grid styling   */
/* ============================= */

.badges-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    margin-top: 1rem;
}

.badge-card {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .9rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    flex: 0 0 auto;
}

.badge-text {
    min-width: 0;
}

.badge-title {
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.15;
    margin: 0;
    color: var(--text);
}

.badge-desc {
    margin-top: .25rem;
    font-size: .9rem;
    line-height: 1.25;
    color: var(--muted);
}

/* ✅ Darkmode fix – להעלות קונטרסט */
html.dark .badge-card {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.10);
}

html.dark .badge-icon {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
}

html.dark .badge-title {
    color: rgba(255,255,255,.94);
}

html.dark .badge-desc {
    color: rgba(255,255,255,.75);
}

/* Responsive */
@media (max-width: 900px) {
    .badges-grid {
        grid-template-columns: 1fr;
    }
}



/* =========================================
   19.5 – Badges header subtitle visibility
   Fix darkmode contrast for "Your unlocked achievements"
   ========================================= */

.badges-header,
.badges-header-row,
.badges-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

    .badges-subtitle,
    .badges-header-subtitle,
    .badges-header .subtitle,
    .badges-section-subtitle {
        font-size: 0.95rem;
        line-height: 1.2;
        opacity: 0.95;
        white-space: nowrap;
    }

/* Dark mode – force readable subtitle */
html.dark .badges-subtitle,
html.dark .badges-header-subtitle,
html.dark .badges-header .subtitle,
html.dark .badges-section-subtitle,
.dark .badges-subtitle,
.dark .badges-header-subtitle,
.dark .badges-header .subtitle,
.dark .badges-section-subtitle {
    color: rgba(255, 255, 255, 0.78) !important;
    opacity: 1 !important;
}

/* Light mode – keep it subtle but readable */
html.light .badges-subtitle,
html.light .badges-header-subtitle,
html.light .badges-header .subtitle,
html.light .badges-section-subtitle,
.light .badges-subtitle,
.light .badges-header-subtitle,
.light .badges-header .subtitle,
.light .badges-section-subtitle {
    color: rgba(0, 0, 0, 0.60);
    opacity: 1;
}


/* ================================
   19.5 – Badges header text (dark mode fix)
   Makes "Your unlocked achievements" visible
================================== */

/* אם הטקסט יושב בתוך כותרת/סאב-כותרת עם צבע חלש או opacity נמוך */
html.dark .badges-header-right,
html.dark .badges-header .badges-subtitle,
html.dark .badges-header .badges-hint,
html.dark .badges-header .muted,
html.dark .badges-title-row .muted,
html.dark .dashboard-badges .muted,
html.dark .dashboard-badges .badges-subtitle,
html.dark .badges-wrap .muted,
html.dark .badges-wrap .badges-subtitle,
html.dark .badges-grid-header .muted,
html.dark .badges-grid-header .badges-subtitle,
html.dark .badges-section .muted,
html.dark .badges-section .badges-subtitle {
    color: var(--text-muted) !important;
    opacity: 1 !important;
    filter: none !important;
}

    /* לפעמים זה מגיע מ-inline opacity על span */
    html.dark .badges-header-right *,
    html.dark .badges-grid-header * {
        opacity: 1 !important;
    }

/* אם הבעיה היא שהטקסט “נדבק” לרקע בגלל blend/gradient */
html.dark .badges-header-right,
html.dark .badges-grid-header {
    text-shadow: 0 1px 0 rgba(0,0,0,0.35) !important;
}

/* ================================
   Badges subtitle color + darkmode
================================== */

.badges-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.badges-head-title {
    margin: 0;
}

.badges-head-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    opacity: 1;
}

/* DARK MODE: force readable */
html.dark .badges-head-subtitle,
html.dark .badges-head-subtitle * {
    color: rgba(255,255,255,0.72) !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}


/* Ensure badges subtitle is readable in dark mode */
.badges-head .badges-sub {
    color: var(--text-muted);
    opacity: 1;
}

html.dark .badges-head .badges-sub {
    color: rgba(255,255,255,0.72) !important;
    opacity: 1 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}


/* ===========================
   Export dropdown (details/summary)
   =========================== */

.test-details-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.test-title-block .test-title {
    margin: 0;
}

.test-details-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-pill {
    border-radius: 999px;
    padding: 10px 14px;
    line-height: 1;
}

.btn-danger-outline {
    border: 1px solid rgba(255, 92, 92, 0.55) !important;
    color: #ff8a8a !important;
    background: transparent !important;
}

    .btn-danger-outline:hover {
        background: rgba(255, 92, 92, 0.10) !important;
    }

.export-menu {
    position: relative;
}

.export-summary {
    list-style: none;
    cursor: pointer;
}

.export-menu summary::-webkit-details-marker {
    display: none;
}

.export-panel {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    min-width: 260px;
    z-index: 50;
    border-radius: 14px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(20, 26, 45, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

html.light .export-panel {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}

.export-group-title {
    font-size: 0.85rem;
    opacity: 0.85;
    margin: 6px 8px 6px;
}

.export-item {
    display: block;
    padding: 10px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: 0.15s ease;
}

    .export-item:hover {
        background: rgba(255,255,255,0.06);
    }

html.light .export-item:hover {
    background: rgba(0,0,0,0.06);
}

.export-sep {
    height: 1px;
    margin: 8px 4px;
    background: rgba(255,255,255,0.10);
}

html.light .export-sep {
    background: rgba(0,0,0,0.10);
}

/* MyTests card header alignment */
.test-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.test-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ViewTest question styling (light/dark safe) */
.test-card-wide {
    padding: 18px;
}

.question-block {
    padding: 12px 4px;
}

.question-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.q-index {
    font-weight: 700;
    opacity: 0.9;
    min-width: 28px;
}

.q-text {
    font-weight: 600;
}

.answers-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.answer-pill {
    border-radius: 999px;
    padding: 10px 14px;
    border: 1px solid rgba(120, 150, 255, 0.35);
    background: rgba(120, 150, 255, 0.06);
}

    .answer-pill.correct {
        border: 1px solid rgba(41, 204, 116, 0.55);
        background: rgba(41, 204, 116, 0.10);
    }

.q-image img {
    max-width: 100%;
    border-radius: 12px;
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,0.08);
}

html.light .q-image img {
    border: 1px solid rgba(0,0,0,0.10);
}

.q-sep {
    height: 1px;
    margin: 14px 0;
    background: rgba(255,255,255,0.10);
}

html.light .q-sep {
    background: rgba(0,0,0,0.10);
}

/* 🔥 FIX: ביטול גלילה ב-Export dropdown */
.mt-dd-panel,
.mt-dd-panel * {
    max-height: none !important;
    overflow: visible !important;
}

details > summary {
    list-style: none;
}

details[open] > summary::after {
    content: "";
}


/* ================================
   MT Export Dropdown (NO SCROLL / NO CLIP)
   ================================ */

/* חשוב: שלא ייחתך בתוך כרטיס */
.test-card,
.test-card-wide,
.page-container,
.card {
    overflow: visible !important;
}

/* wrapper של ה-details */
.mt-export {
    position: relative;
    display: inline-block;
}

    /* כפתור ה-summary */
    .mt-export > summary {
        list-style: none;
        cursor: pointer;
    }

        .mt-export > summary::-webkit-details-marker {
            display: none;
        }

    /* הפאנל עצמו */
    .mt-export .mt-export-panel {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        min-width: 240px;
        padding: 10px;
        border-radius: 14px;
        background: var(--surface);
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: 0 18px 45px rgba(0,0,0,0.35);
        z-index: 9999;
        /* אין גלילה */
        max-height: none !important;
        overflow: visible !important;
    }

    /* כותרות/פריטים */
    .mt-export .mt-export-title {
        font-size: 0.85rem;
        opacity: 0.75;
        margin: 4px 8px 6px;
    }

    .mt-export .mt-export-item {
        display: block;
        padding: 10px 12px;
        border-radius: 12px;
        text-decoration: none;
        color: var(--text);
        font-size: 0.95rem;
    }

        .mt-export .mt-export-item:hover {
            background: rgba(255,255,255,0.06);
        }

    .mt-export .mt-export-sep {
        height: 1px;
        background: rgba(255,255,255,0.10);
        margin: 8px 4px;
    }

/* Dark mode: כותרות במבחן שיראו */
.muted {
    color: rgba(255,255,255,0.75);
}

.light .muted {
    color: rgba(0,0,0,0.60);
}


/* ================================
   19.5 – Achievements Toast (dark/light)
   ================================ */

/* משתנה בסיס אם אין אצלך */
:root {
    --toast-bg: rgba(20,24,35,.98);
    --toast-border: rgba(255,255,255,.12);
    --toast-text: var(--text, #fff);
    --toast-muted: rgba(255,255,255,.75);
}

/* Light overrides */
html.light {
    --toast-bg: rgba(255,255,255,.96);
    --toast-border: rgba(20,26,40,.10);
    --toast-text: #121826;
    --toast-muted: rgba(18,24,38,.70);
}

/* תומך בכמה שמות קלאסים אפשריים כדי “לתפוס” אצלך בלי לשאול */
.achievement-toast,
.achievements-toast,
.mt-achievement-toast,
.unlocked-achievements-toast,
#achievementToast,
[data-achievement-toast] {
    position: fixed;
    inset-inline-end: 18px;
    bottom: 18px;
    z-index: 9999;
    min-width: 260px;
    max-width: min(420px, 92vw);
    background: var(--toast-bg);
    border: 1px solid var(--toast-border);
    color: var(--toast-text);
    border-radius: 16px;
    box-shadow: 0 22px 70px rgba(0,0,0,.35);
    padding: 12px 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

    /* כותרת/טקסט */
    .achievement-toast .title,
    .achievements-toast .title,
    .mt-achievement-toast .title,
    .unlocked-achievements-toast .title,
    #achievementToast .title,
    [data-achievement-toast] .title {
        font-weight: 900;
        letter-spacing: .2px;
        line-height: 1.2;
        color: var(--toast-text);
    }

    .achievement-toast .text,
    .achievements-toast .text,
    .mt-achievement-toast .text,
    .unlocked-achievements-toast .text,
    #achievementToast .text,
    [data-achievement-toast] .text {
        margin-top: 2px;
        font-size: .92rem;
        color: var(--toast-muted);
    }

    /* אייקון קטן */
    .achievement-toast .icon,
    .achievements-toast .icon,
    .mt-achievement-toast .icon,
    .unlocked-achievements-toast .icon,
    #achievementToast .icon,
    [data-achievement-toast] .icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        flex: 0 0 42px;
        display: grid;
        place-items: center;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.10);
    }

html.light .achievement-toast .icon,
html.light .achievements-toast .icon,
html.light .mt-achievement-toast .icon,
html.light .unlocked-achievements-toast .icon,
html.light #achievementToast .icon,
html.light [data-achievement-toast] .icon {
    background: rgba(18,24,38,.05);
    border-color: rgba(18,24,38,.10);
}


/* ================================
   19.5 – Badges: default = only unlocked
   ================================ */

/* אם badge שמוגדר כ-locked — מסתירים אותו */
.badge.locked,
.badge-card.locked,
.achievement-badge.locked,
.mt-badge.locked,
[data-badge].locked,
[data-badge-locked="true"] {
    display: none !important;
}

/* אם אתה מעדיף “להציג נעול אבל אפור” במקום להסתיר — בטל את הבלוק למעלה,
   והדבק במקום זה:

.badge.locked,
.badge-card.locked,
.achievement-badge.locked,
.mt-badge.locked,
[data-badge].locked,
[data-badge-locked="true"]{
  opacity: .35;
  filter: grayscale(1);
  pointer-events: none;
}
*/


/* ===========================
   Fix: remove tiny page scroll
   =========================== */

html, body {
    height: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
}

/* גובה “מסך אמיתי” + מניעת עודף בגלל header/auth-bar */
.page-wrapper {
    min-height: calc(100dvh - var(--mt-top-offset, 0px));
}

/* אם יש אצלך padding-top/bottom שעושים עודף – נוודא שהכל נכנס בחישוב */
.page, .page-section, .page-container {
    box-sizing: border-box;
}

/* למנוע overflow קטן של אלמנטים רחבים (מייצר scroll בלי להבין למה) */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

pre, code {
    max-width: 100%;
    overflow-x: auto;
}


/* ===========================================
   ViewTest – FIX spacing + Export dialog center
   (Overrides – put at END of site.css)
=========================================== */

/* 1) להרחיק את כפתורי Back/Export מה-Header (Nav) */
.test-details-page {
    padding-top: 22px !important;
}

.test-details-header {
    margin-top: 10px !important;
    margin-bottom: 16px !important;
}

/* אם אצלך ה-page-header עדיין "נדבק" למעלה,
   זה נותן עוד אוויר בלי לשבור עיצוב */
@media (max-width: 900px) {
    .test-details-page {
        padding-top: 18px !important;
    }
}


/* 2) Export <dialog> – למרכז באמצע המסך, לא "למעלה" */
#exportDialog.export-dialog {
    /* להפוך את הדיאלוג לעטיפה שממרכזת את המודל */
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* מעל הכל */
    z-index: 9999 !important;
}

    /* רק כשהוא פתוח */
    #exportDialog.export-dialog:not([open]) {
        display: none !important;
    }

    /* backdrop תקין */
    #exportDialog.export-dialog::backdrop {
        background: rgba(0,0,0,.60) !important;
    }

/* המודל עצמו יקבל את הרוחב, לא ה-dialog */
#exportDialog .export-modal {
    width: min(720px, 92vw) !important;
    max-height: min(78vh, 720px) !important;
    overflow: auto !important;
}

/* רווחים פנימיים נעימים יותר + לא להידבק לקצוות */
#exportDialog .export-grid {
    padding-bottom: 6px !important;
}

/* במובייל – שלא יהיה גבוה מדי */
@media (max-width: 720px) {
    #exportDialog .export-modal {
        width: min(560px, 92vw) !important;
        max-height: 80vh !important;
    }
}


/* ========================= */
/* Avatar Picker – Register  */
/* ========================= */

.avatar-picker {
    margin-top: 1.25rem;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.avatar-item {
    font-size: 1.6rem;
    background: var(--surface);
    border: 2px solid transparent;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .avatar-item:hover {
        transform: scale(1.08);
    }

    .avatar-item.selected {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
    }


/* ========================= */
/* Avatar (Auth Bar Header)  */
/* ========================= */
.mt-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    margin-inline-end: .55rem;
    vertical-align: middle;
}

.mt-avatar-name {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}


/* ========================= */
/* Profile Avatar Page       */
/* ========================= */

.profile-avatar-page .page-header-row {
    align-items: center;
}

.mt-alert-success {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
}

.profile-avatar-form {
    margin-top: 1.25rem;
}

.profile-avatar-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: .9rem;
}

    .profile-avatar-grid .avatar-item {
        font-size: 2rem;
    }

.profile-avatar-actions {
    margin-top: 1.25rem;
    display: flex;
    justify-content: flex-start;
    gap: .75rem;
}

.mt-avatar-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .mt-avatar-link:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 3px;
        border-radius: 999px;
    }

/* =========================================
   AVATAR-6 ROCKET (header + picker) - FINAL
   Paste at END of site.css (override all)
========================================= */

/* ---------- COMMON helper: theme bg for avatar-6 ---------- */
.light .mt-avatar-link[data-avatar="avatar-6"] .mt-avatar,
.light .avatar-item[data-key="avatar-6"] {
    background: #f2f4f7 !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.14) !important;
}

.dark .mt-avatar-link[data-avatar="avatar-6"] .mt-avatar,
.dark .avatar-item[data-key="avatar-6"] {
    background: #1e2530 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 4px 10px rgba(0,0,0,0.60) !important;
}

/* ---------- HEADER avatar (auth bar) ---------- */
.mt-avatar-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.mt-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Replace only avatar-6 in header */
.mt-avatar-link[data-avatar="avatar-6"] .mt-avatar::before {
    content: "" !important;
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    background-image: url("../images/avatars/avatar-rocket.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Hide emoji ONLY if image loads: we don't have CSS 'onload',
   so we keep emoji but push it behind the image */
.mt-avatar-link[data-avatar="avatar-6"] .mt-avatar {
    color: transparent !important;
    font-size: 0 !important;
}

/* ---------- AVATAR PICKER (Profile/Avatar) ---------- */
/* Make the buttons look like avatar circles (without breaking layout) */
.avatar-item[data-key] {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 999px !important;
}

/* Replace only avatar-6 in picker */
.avatar-item[data-key="avatar-6"]::before {
    content: "" !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    margin: auto !important;
    background-image: url("../images/avatars/avatar-rocket.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Hide emoji in picker for avatar-6 */
.avatar-item[data-key="avatar-6"] {
    color: transparent !important;
    font-size: 0 !important;
}

    /* optional hover */
    .mt-avatar-link[data-avatar="avatar-6"]:hover .mt-avatar,
    .avatar-item[data-key="avatar-6"]:hover {
        transform: translateY(-1px) !important;
    }


/* =========================================
   AVATAR PICKER SIZE TWEAK (avatar-6)
========================================= */



    /* Bigger rocket image inside */
.profile-avatar-grid .avatar-item[data-key="avatar-6"]::before {
    width: 60px !important;
    height: 60px !important;
    padding: 2px;
}


/* ===========================
   21.3 Activity Feed + 21.4 Last Chat
   =========================== */

.activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem;
    border-radius: 14px;
    background: var(--surface-2, rgba(255,255,255,0.03));
    border: 1px solid var(--border, rgba(255,255,255,0.06));
}

.activity-ico {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface-3, rgba(255,255,255,0.06));
    border: 1px solid var(--border, rgba(255,255,255,0.06));
    flex: 0 0 auto;
}

.activity-meta {
    min-width: 0;
}

.activity-text {
    font-weight: 600;
    line-height: 1.35;
}

.activity-time {
    margin-top: 0.15rem;
}

.lastchat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lastchat-main {
    min-width: 0;
}

.lastchat-title {
    font-weight: 700;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 520px;
}

@media (max-width: 900px) {
    .lastchat-row {
        flex-direction: column;
        align-items: stretch;
    }

    .lastchat-title {
        max-width: 100%;
        white-space: normal;
    }
}


/* ================================
   Chat Sidebar (ChatGPT-like)
   ================================ */

.chat-main {
    display: grid;
    grid-template-columns: 280px 1fr 360px;
    gap: 18px;
    align-items: start;
}

/* Sidebar */
.chat-history {
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    background: rgba(255,255,255,0.02);
    overflow: hidden;
    min-height: 640px;
    display: flex;
    flex-direction: column;
}

.light .chat-history {
    border-color: rgba(0,0,0,0.10);
    background: rgba(0,0,0,0.02);
}

.chat-history-header {
    padding: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.light .chat-history-header {
    border-bottom-color: rgba(0,0,0,0.08);
}

.chat-new-btn {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 10px 12px;
    text-decoration: none;
}

.chat-history-list {
    padding: 10px;
    overflow: auto;
    flex: 1;
}

.chat-history-empty {
    opacity: 0.7;
    font-size: 0.95rem;
    padding: 12px;
}

.chat-history-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 40px;
    align-items: center;
    gap: 8px;
    border-radius: 14px;
    padding: 10px 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}

.light .chat-history-item {
    border-color: rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.02);
}

.chat-history-item.is-active {
    border-color: rgba(120,120,255,0.45);
    background: rgba(120,120,255,0.10);
}

.chat-history-link {
    text-decoration: none;
    color: inherit;
    display: block;
    min-width: 0;
}

.chat-history-title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-history-meta {
    margin-top: 4px;
    font-size: 0.78rem;
    opacity: 0.75;
}

.chat-history-delete {
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 10px;
    width: 36px;
    height: 36px;
    opacity: 0.75;
}

    .chat-history-delete:hover {
        opacity: 1;
        background: rgba(255,255,255,0.06);
    }

.light .chat-history-delete:hover {
    background: rgba(0,0,0,0.06);
}

/* Responsive */
@media (max-width: 1100px) {
    .chat-main {
        grid-template-columns: 260px 1fr;
        grid-template-areas:
            "history side"
            "panel panel";
    }

    .chat-history {
        grid-area: history;
        min-height: 420px;
    }

    .chat-side {
        grid-area: side;
    }

    .chat-panel {
        grid-area: panel;
    }
}

@media (max-width: 900px) {
    .chat-main {
        grid-template-columns: 1fr;
    }

    .chat-history {
        min-height: auto;
    }
}


/* ================================
   Chat Layout – Sidebar like ChatGPT
   ================================ */

.chat-layout {
    display: flex;
    width: 100%;
}

/* Sidebar – צמוד לשמאל המסך */
.chat-history-fixed {
    position: fixed;
    top: var(--mt-top-offset); /* כבר יש לך את זה בלייאאוט */
    left: 0;
    width: 280px;
    height: calc(100vh - var(--mt-top-offset));
    z-index: 20;
    border-right: 1px solid rgba(255,255,255,0.10);
    background: linear-gradient( 180deg, rgba(10,15,30,0.95), rgba(5,10,20,0.95) );
    overflow-y: auto;
    padding: 14px;
}

.light .chat-history-fixed {
    background: #f7f8fa;
    border-right-color: rgba(0,0,0,0.1);
}

/* תוכן הצ'אט – נדחף ימינה */
.chat-content {
    margin-left: 280px;
    width: calc(100% - 280px);
}

/* מניעת גלילה כפולה */
.chat-page {
    min-height: calc(100vh - var(--mt-top-offset));
}

/* רספונסיב – מובייל */
@media (max-width: 900px) {
    .chat-history-fixed {
        position: relative;
        width: 100%;
        height: auto;
        border-right: none;
    }

    .chat-content {
        margin-left: 0;
        width: 100%;
    }
}

/* ================================
   Sidebar scrollbar (ChatGPT-like)
   ================================ */

/* Firefox */
.chat-history-fixed {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.28) rgba(255,255,255,0.06);
}

.light .chat-history-fixed {
    scrollbar-color: rgba(0,0,0,0.28) rgba(0,0,0,0.06);
}

/* Chrome / Edge / Safari */
.chat-history-fixed::-webkit-scrollbar {
    width: 10px;
}

.chat-history-fixed::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    margin: 10px 0;
}

.chat-history-fixed::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.22);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,0); /* נותן "padding" פנימי */
    background-clip: padding-box;
}

    .chat-history-fixed::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.34);
        border: 2px solid rgba(0,0,0,0);
        background-clip: padding-box;
    }

/* Light mode tweaks */
.light .chat-history-fixed::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.06);
}

.light .chat-history-fixed::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.22);
    border: 2px solid rgba(255,255,255,0);
    background-clip: padding-box;
}

    .light .chat-history-fixed::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,0.34);
    }


/* =========================================
   Premium Sidebar Scrollbar (ChatGPT-style)
   ========================================= */

/* בסיס */
.chat-history-fixed {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}

    /* ===== Chrome / Edge / Safari ===== */
    .chat-history-fixed::-webkit-scrollbar {
        width: 8px;
    }

    .chat-history-fixed::-webkit-scrollbar-track {
        background: transparent;
    }

    /* ה-thumb עצמו */
    .chat-history-fixed::-webkit-scrollbar-thumb {
        background: linear-gradient( 180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.35) );
        border-radius: 999px;
        opacity: 0;
        transition: opacity 0.25s ease, background 0.25s ease;
    }

    /* רק כשהעכבר על הסיידבר – רואים אותו */
    .chat-history-fixed:hover::-webkit-scrollbar-thumb {
        opacity: 1;
    }

    /* hover על ה-thumb */
    .chat-history-fixed::-webkit-scrollbar-thumb:hover {
        background: linear-gradient( 180deg, rgba(140,160,255,0.55), rgba(110,130,255,0.85) );
    }

/* ===== Light mode ===== */
.light .chat-history-fixed {
    scrollbar-color: rgba(0,0,0,0.22) transparent;
}

    .light .chat-history-fixed::-webkit-scrollbar-thumb {
        background: linear-gradient( 180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.35) );
        opacity: 0;
    }

    .light .chat-history-fixed:hover::-webkit-scrollbar-thumb {
        opacity: 1;
    }

    .light .chat-history-fixed::-webkit-scrollbar-thumb:hover {
        background: linear-gradient( 180deg, rgba(80,90,120,0.45), rgba(60,70,100,0.75) );
    }


/* ==================================================
   ULTRA Premium Sidebar Scrollbar – Glass / Floating
   ================================================== */

/* בסיס – Firefox */
.chat-history-fixed {
  scrollbar-width: thin;
  scrollbar-color: rgba(180,190,255,0.25) transparent;
}

/* ===============================
   Chrome / Edge / Safari
   =============================== */
.chat-history-fixed::-webkit-scrollbar {
  width: 8px;
}

/* Track – כמעט לא קיים */
.chat-history-fixed::-webkit-scrollbar-track {
  background: transparent;
}

/* Thumb – glass floating */
.chat-history-fixed::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      rgba(140,160,255,0.25),
      rgba(110,130,255,0.45)
    );
  border-radius: 999px;

  /* glass effect */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* glow רך */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 6px 16px rgba(80,100,255,0.25);

  opacity: 0;
  transition:
    opacity 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

/* מופיע רק כשנכנסים לסיידבר */
.chat-history-fixed:hover::-webkit-scrollbar-thumb {
  opacity: 1;
}

/* hover – glow חזק יותר */
.chat-history-fixed::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      rgba(170,185,255,0.65),
      rgba(120,140,255,0.95)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15),
    0 8px 24px rgba(90,110,255,0.45);
}

/* ===============================
   Light mode
   =============================== */
.light .chat-history-fixed {
  scrollbar-color: rgba(120,130,160,0.35) transparent;
}

.light .chat-history-fixed::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      rgba(120,130,160,0.25),
      rgba(90,100,140,0.45)
    );

  box-shadow:
    0 0 0 1px rgba(0,0,0,0.08),
    0 6px 16px rgba(0,0,0,0.15);

  opacity: 0;
}

.light .chat-history-fixed:hover::-webkit-scrollbar-thumb {
  opacity: 1;
}

.light .chat-history-fixed::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      rgba(140,150,180,0.55),
      rgba(90,100,140,0.85)
    );

  box-shadow:
    0 0 0 1px rgba(0,0,0,0.12),
    0 8px 24px rgba(0,0,0,0.25);
}

/* =========================
   Modal (Delete chat)
   ========================= */
.mt-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.mt-modal.is-open { display: flex; }

.mt-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mt-modal-card {
  position: relative;
  width: min(520px, 92vw);
  border-radius: 18px;
  padding: 16px 16px 14px;
  background: rgba(10,15,30,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

.light .mt-modal-card {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
}

.mt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mt-modal-text {
  margin: 0 0 14px 0;
  opacity: 0.9;
}

.mt-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* כפתור מחיקה אדום יפה */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,90,90,0.9), rgba(210,40,40,0.95));
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.btn-danger:hover {
  filter: brightness(1.05);
}

.btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================
   Modal (Delete chat)
   ========================= */
.mt-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

    .mt-modal.is-open {
        display: flex;
    }

.mt-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mt-modal-card {
    position: relative;
    width: min(520px, 92vw);
    border-radius: 18px;
    padding: 16px 16px 14px;
    background: rgba(10,15,30,0.92);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

.light .mt-modal-card {
    background: rgba(255,255,255,0.92);
    border-color: rgba(0,0,0,0.10);
    box-shadow: 0 18px 60px rgba(0,0,0,0.18);
}

.mt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.mt-modal-text {
    margin: 0 0 14px 0;
    opacity: 0.9;
}

.mt-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* כפתור מחיקה אדום יפה */
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: linear-gradient(180deg, rgba(255,90,90,0.9), rgba(210,40,40,0.95));
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

    .btn-danger:hover {
        filter: brightness(1.05);
    }

    .btn-danger:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* =========================
   Chat history: 3-dots menu
   ========================= */
.chat-history-menu {
    position: relative;
    display: flex;
    align-items: center;
    margin-inline-start: 10px;
    flex: 0 0 auto;
}

.chat-history-menu-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

    .chat-history-menu-btn .dots {
        font-size: 20px;
        line-height: 1;
        opacity: .9;
        transform: translateY(-1px);
    }

    .chat-history-menu-btn:hover {
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.16);
    }

    .chat-history-menu-btn:active {
        transform: scale(0.98);
    }

.light .chat-history-menu-btn {
    border-color: rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.04);
}

    .light .chat-history-menu-btn:hover {
        background: rgba(0,0,0,0.06);
        border-color: rgba(0,0,0,0.18);
    }

/* dropdown */
.chat-history-menu-dropdown {
    position: absolute;
    top: 40px;
    right: 0;
    min-width: 170px;
    border-radius: 14px;
    padding: 6px;
    background: rgba(12,16,28,0.96);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 18px 60px rgba(0,0,0,0.55);
    z-index: 30;
}

.light .chat-history-menu-dropdown {
    background: rgba(255,255,255,0.96);
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 18px 60px rgba(0,0,0,0.18);
}

.chat-menu-item {
    width: 100%;
    text-align: start;
    border: 0;
    background: transparent;
    padding: 10px 10px;
    border-radius: 12px;
    cursor: pointer;
    color: inherit;
    font-weight: 600;
    opacity: .95;
}

    .chat-menu-item:hover {
        background: rgba(255,255,255,0.06);
    }

.light .chat-menu-item:hover {
    background: rgba(0,0,0,0.06);
}

.chat-menu-item.danger {
    color: #ff6b6b;
}

    .chat-menu-item.danger:hover {
        background: rgba(255, 80, 80, 0.10);
    }

/* =========================
   ChatGPT-like inline rename
   ========================= */

.chat-history-item.is-editing .chat-history-link {
    cursor: default;
}

.chat-history-title-edit {
    width: 100%;
    font: inherit;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: inherit;
    outline: none;
}

html.light .chat-history-title-edit {
    border-color: rgba(0,0,0,0.14);
    background: rgba(0,0,0,0.04);
}

.chat-history-item.is-saving .chat-history-title-edit {
    opacity: 0.75;
    cursor: progress;
}

/* ============================
   Chat light-mode fix
   (ה"box" שנשאר כהה בלייטמוד)
   ============================ */

/* ברירת מחדל (dark) */
.chat-messages,
.chat-empty {
    background: linear-gradient(180deg, rgba(10, 15, 30, 0.96) 0%, rgba(6, 10, 20, 0.96) 100%);
    border: 1px solid rgba(255,255,255,0.08);
}

/* ✅ Light mode */
html.light .chat-messages,
html.light .chat-empty {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(245,248,255,0.98) 100%);
    border: 1px solid rgba(15, 23, 42, 0.12);
}

/* שהבועות גם ייראו טוב בלייט */
html.light .chat-message.ai .bubble {
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.10);
}

html.light .chat-message.user .bubble {
    color: #fff; /* נשאר צבע כפתור/primary אצלך */
}

/* הטקסט הקטן מתחת לבועה */
html.light .chat-message .meta {
    color: rgba(15, 23, 42, 0.55);
}

/* =====================================
   Remove chat messages container box
   (ChatGPT-style floating bubbles)
   ===================================== */

/* הקונטיינר של ההודעות – בלי רקע ובלי מסגרת */
.chat-messages,
.chat-empty {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* אם יש padding גדול שמרגיש כמו קופסה */
.chat-messages {
    padding: 1.5rem 1rem;
}

/* למקרה שיש wrapper נוסף */
.chat-panel,
.chat-panel-header {
    background: transparent !important;
    box-shadow: none !important;
}

/* Light mode – ליתר ביטחון */
html.light .chat-messages,
html.light .chat-empty {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* =========================
   Chat Sidebar: Search + Pin + Actions
   ========================= */

.chat-history-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-search {
    position: relative;
}

.chat-search-input {
    width: 100%;
    height: 38px;
    border-radius: 12px;
    padding: 0 36px 0 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: inherit;
    outline: none;
}

html.light .chat-search-input {
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(0,0,0,0.04);
}

.chat-search-input:focus {
    border-color: rgba(90,140,255,0.7);
    box-shadow: 0 0 0 3px rgba(90,140,255,0.18);
}

.chat-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 26px;
    width: 26px;
    border-radius: 8px;
    border: 0;
    background: rgba(255,255,255,0.10);
    color: inherit;
    cursor: pointer;
}

html.light .chat-search-clear {
    background: rgba(0,0,0,0.08);
}

.chat-history-item {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.chat-history-link {
    flex: 1;
    min-width: 0;
}

.chat-history-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 6px;
}

.chat-pin-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    height: 34px;
    width: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    opacity: 0.85;
}

    .chat-pin-btn:hover {
        background: rgba(255,255,255,0.08);
        opacity: 1;
    }

html.light .chat-pin-btn:hover {
    background: rgba(0,0,0,0.06);
}

.chat-pin-icon {
    font-size: 16px;
    line-height: 1;
    opacity: 0.35;
}

.chat-history-item.is-pinned .chat-pin-icon {
    opacity: 1;
}

.chat-history-item.is-pinned {
    box-shadow: 0 0 0 1px rgba(255,215,0,0.12) inset;
}

html.light .chat-history-item.is-pinned {
    box-shadow: 0 0 0 1px rgba(255,180,0,0.20) inset;
}

/* inline rename input */
.chat-history-title-edit {
    width: 100%;
    height: 28px;
    border-radius: 10px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: inherit;
    outline: none;
}

html.light .chat-history-title-edit {
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.04);
}

.chat-history-item.is-saving {
    opacity: 0.7;
    pointer-events: none;
}

/* =========================
   Chat Sidebar - Pin star visibility
   ========================= */

/* הכפתור עצמו */
.chat-pin-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* האייקון */
.chat-pin-icon {
    font-size: 14px;
    line-height: 1;
    opacity: .85;
    text-shadow: 0 0 6px rgba(0,0,0,.35); /* עוזר בדארק */
}

/* מצב רגיל בדארק */
html.dark .chat-pin-icon {
    color: rgba(255,255,255,.82);
}

/* מצב רגיל בלייט */
html.light .chat-pin-icon {
    color: rgba(0,0,0,.70);
    text-shadow: none;
}

/* כשהשיחה מוצמדת - מודגש יותר */
.chat-history-item.is-pinned .chat-pin-icon {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255,255,255,.18));
}

html.dark .chat-history-item.is-pinned .chat-pin-icon {
    color: #fff;
}

html.light .chat-history-item.is-pinned .chat-pin-icon {
    color: #111;
}

/* =========================================
   Chat Sidebar - Hover actions (ChatGPT feel)
========================================= */

/* ברירת מחדל: מסתירים את הפעולות */
.chat-history-actions {
    opacity: 0;
    transform: translateY(1px);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

/* מציגים בהובר / אקטיבי / פוקוס */
.chat-history-item:hover .chat-history-actions,
.chat-history-item.is-active .chat-history-actions,
.chat-history-item:focus-within .chat-history-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* קצת polish לכפתורים עצמם */
.chat-pin-btn,
.chat-history-menu-btn {
    border-radius: 10px;
}

/* =========================================
   Bulk actions row
========================================= */
.chat-bulk-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-top: .6rem;
}

.chat-bulk-btn {
    font-size: .85rem;
    padding: .38rem .6rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: transform .12s ease, opacity .12s ease;
    user-select: none;
}

    .chat-bulk-btn:hover {
        transform: translateY(-1px);
    }

    .chat-bulk-btn:active {
        transform: translateY(0);
        opacity: .9;
    }

    .chat-bulk-btn.danger {
        border-color: rgba(255, 0, 0, .25);
    }

/* מסתירים את ה-row כשאין חיפוש ואין pinned ואין מה למחוק */
.chat-bulk-actions[hidden] {
    display: none !important;
}

/* ===========================
   Chat sidebar - menu click fix
   (actions above the row link)
   =========================== */

.chat-history-item {
    position: relative;
}

.chat-history-link {
    position: relative;
    z-index: 1; /* link stays below actions */
}

/* actions always clickable above the link */
.chat-history-actions,
.chat-history-menu,
.chat-pin-btn,
.chat-history-menu-btn {
    position: relative;
    z-index: 10;
}

/* dropdown must be the top layer */
.chat-history-menu-dropdown {
    position: absolute;
    z-index: 50;
}

/* =========================
   Select Mode UI polish
   ========================= */

/* שורה נבחרת */
.chat-history-item.is-selected {
    outline: 2px solid rgba(90,160,255,.35);
    background: rgba(90,160,255,.08);
    border-radius: 14px;
}

/* מיקום checkbox ויישור */
.chat-history-item {
    position: relative;
}

.chat-select-checkbox {
    width: 18px;
    height: 18px;
    margin: 0 .55rem 0 .55rem;
    transform: translateY(2px);
    accent-color: var(--primary);
}

    /* כשה-checkbox מוצג - תן קצת מקום ללינק */
    .chat-select-checkbox:not([hidden]) + .chat-history-link {
        padding-left: .2rem;
    }

/* בר נבחרים - נראה כמו חלק מהמערכת */
.chat-selected-bar {
    gap: .6rem;
    padding: .55rem .6rem;
    border-radius: 14px;
}

.chat-selected-count {
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
    font-weight: 700;
}

/* כפתורים בבר הנבחרים קצת יותר "טייט" */
.chat-selected-actions .chat-bulk-btn {
    padding: .34rem .58rem;
    border-radius: 12px;
}

    /* שיפור קטן לכפתור danger */
    .chat-selected-actions .chat-bulk-btn.danger {
        border-color: rgba(255,0,0,.28);
        background: rgba(255,0,0,.06);
    }

/* במובייל: תן לבר לרדת שורה יפה */
@media (max-width: 900px) {
    .chat-selected-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .chat-selected-actions {
        justify-content: flex-start;
    }
}


/* =====================================================
   Chat – Selected Bar FIX (ONLY TRASH ICON)
   ✔ keeps stars as-is
   ✔ keeps count as-is (no circle-in-circle)
   ✔ replaces ugly trash emoji with clean icon
   ===================================================== */






    /* שומר על אדום ברור */
    #bulkDeleteSelectedBtn.chat-bulk-btn.danger {
        color: #e04646;
        border-color: rgba(224,70,70,.45);
    }

        #bulkDeleteSelectedBtn.chat-bulk-btn.danger:hover {
            background: rgba(224,70,70,.12);
        }


/* =========================
   Chat sidebar: stick to top + internal scroll
   ========================= */

.chat-layout {
    display: flex;
    min-height: 100vh;
}

.chat-history.chat-history-fixed {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh; /* נשאר בגובה המסך */
    overflow: hidden; /* שלא תהיה גלילה על כל הסיידבר */
}

/* שהרשימה עצמה תהיה הגוללת */
.chat-history .chat-history-list {
    overflow-y: auto;
    height: calc(100vh - 260px); /* 260px = בערך גובה ההדר (כפתורים/חיפוש וכו') */
}

/* מובייל: לא חייב sticky אם יש לך התנהגות אחרת */
@media (max-width: 900px) {
    .chat-history.chat-history-fixed {
        position: relative;
        height: auto;
    }

    .chat-history .chat-history-list {
        height: auto;
        overflow: visible;
    }
}

.chat-layout,
.chat-content {
    overflow: visible !important;
    transform: none !important;
}

.form-card {
    max-width: 760px;
    margin: 0 auto;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 26px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.form-grid {
    display: grid;
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-weight: 600;
}

.input, .textarea {
    width: 100%;
    padding: 14px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
    color: inherit;
    outline: none;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.muted {
    opacity: 0.75;
}

.small {
    font-size: 0.92rem;
}


/* =========================
   Fix readability in Dark Mode
   ========================= */

/* אם אצלך dark mode מופעל ע"י class על body כמו .dark / .dark-mode
   תחליף כאן את הסלקטור למה שיש אצלך בפועל */
body.dark-mode .mt-content,
body.dark .mt-content,
html.dark-mode .mt-content,
html.dark .mt-content {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.92);
}

    /* כל טקסט בפנים */
    body.dark-mode .mt-content p,
    body.dark-mode .mt-content li,
    body.dark-mode .mt-content span,
    body.dark-mode .mt-content div,
    body.dark-mode .mt-content strong,
    body.dark-mode .mt-content em,
    body.dark-mode .mt-content small,
    body.dark .mt-content p,
    body.dark .mt-content li,
    body.dark .mt-content span,
    body.dark .mt-content div,
    body.dark .mt-content strong,
    body.dark .mt-content em,
    body.dark .mt-content small {
        color: rgba(255, 255, 255, 0.92);
    }

    /* כותרות */
    body.dark-mode .mt-content h1,
    body.dark-mode .mt-content h2,
    body.dark-mode .mt-content h3,
    body.dark-mode .mt-content h4,
    body.dark-mode .mt-content h5,
    body.dark-mode .mt-content h6,
    body.dark .mt-content h1,
    body.dark .mt-content h2,
    body.dark .mt-content h3,
    body.dark .mt-content h4,
    body.dark .mt-content h5,
    body.dark .mt-content h6 {
        color: rgba(255, 255, 255, 0.96);
    }

    /* קישורים */
    body.dark-mode .mt-content a,
    body.dark .mt-content a {
        color: rgba(140, 190, 255, 0.95);
        text-decoration: underline;
    }

/* ================================================
   LESSON VIEW – FORCE THEME COLORS (SAFE)
   ================================================ */

.lesson-content {
    color: var(--text) !important;
}

    .lesson-content :is(h1,h2,h3,h4,h5,h6,p,li,span,div,strong,em,small) {
        color: var(--text) !important;
    }

    .lesson-content .lesson-text {
        white-space: pre-wrap;
        color: var(--text) !important;
    }

    .lesson-content hr {
        border: 0;
        border-top: 1px solid var(--border);
        margin: 16px 0;
    }

/* ========================================
   Lesson Key Points Card
   ======================================== */

.lesson-keypoints-card {
    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(99,102,241,0.12));
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    backdrop-filter: blur(6px);
}

.lesson-keypoints-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.lesson-keypoints-icon {
    font-size: 1.2rem;
}

.lesson-keypoints-list {
    margin: 0;
    padding-inline-start: 20px; /* RTL/LTR safe */
}

    .lesson-keypoints-list li {
        margin-bottom: 6px;
        line-height: 1.5;
    }

/* Dark mode polish (אם יש לך dark theme variables זה ישתלב יפה) */
body.dark .lesson-keypoints-card {
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(99,102,241,0.18));
    border-color: rgba(99,102,241,0.35);
}
/* 23.3.4 – Lesson Persona (Radio Cards) */

.persona-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

/* רספונסיבי למסכים קטנים */
@media (max-width: 1200px) {
    .persona-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .persona-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.persona-card {
    display: block;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    background: var(--card-bg, #fff);
    min-height: 95px; /* 👈 מקטין גובה */
}

    .persona-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    }

    .persona-card input[type="radio"] {
        margin-inline-end: 6px;
    }

.persona-title {
    font-weight: 700;
    font-size: 0.95rem; /* 👈 קטן יותר */
    margin-top: 4px;
}

.persona-desc {
    opacity: 0.85;
    font-size: 0.82rem; /* 👈 קטן יותר */
    margin-top: 3px;
    line-height: 1.25;
}

.persona-card:has(input[type="radio"]:checked) {
    border-color: rgba(13,110,253,0.7);
    box-shadow: 0 8px 24px rgba(13,110,253,0.12);
}

/* Locked Persona look */
.persona-card.locked {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.25);
}

    .persona-card.locked:hover {
        transform: none;
        box-shadow: none;
    }

    .persona-card.locked input[type="radio"] {
        pointer-events: none;
    }

.persona-lock {
    margin-inline-start: 6px;
    font-size: 0.95rem;
    opacity: 0.9;
}
/* 23.3.4 – Upgrade CTA inside locked persona cards */
.persona-upgrade-btn {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(13,110,253,0.55);
    background: transparent;
    color: rgba(13,110,253,0.95);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

    .persona-upgrade-btn:hover {
        border-color: rgba(13,110,253,0.9);
    }

/* Make modal fit dark theme nicely */
.mt-upgrade-modal {
    border-radius: 14px;
}

.dark .mt-upgrade-modal {
    background: #0f172a;
    color: #e5e7eb;
    border: 1px solid rgba(255,255,255,0.10);
}

    .dark .mt-upgrade-modal .modal-header {
        border-bottom: 1px solid rgba(255,255,255,0.10);
    }

    .dark .mt-upgrade-modal .modal-footer {
        border-top: 1px solid rgba(255,255,255,0.10);
    }
/* Keep Upgrade button aligned at bottom across persona cards */
.persona-card {
    display: flex;
    flex-direction: column;
}

    .persona-card .persona-desc {
        min-height: 56px; /* אפשר 40-56 לפי מה שנראה לך */
    }

    .persona-card .persona-upgrade-btn {
        margin-top: auto; /* דוחף לתחתית */
        align-self: flex-start; /* שלא יתמרכז */
    }
#plans {
    scroll-margin-top: 120px;
}
/* 23.8.2 – Text inside locked cards */
.persona-locked-text {
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.9;
    line-height: 1.2;
}

.persona-card.locked .persona-locked-text {
    color: rgba(13,110,253,0.95);
}

.dark .persona-card.locked .persona-locked-text {
    color: rgba(96,165,250,0.95);
}


/* =====================================
   HIDE LOW-CONTRAST TEXT IN DARK
   (Student Learn screen)
   ===================================== */

/* הטקסט הקטן שמתחת ל-Language */
html.dark .form-text {
    display: none !important;
}

/* תיאורים בכרטיסי persona כשהם locked */
html.dark .persona-card.locked .persona-desc {
    display: none !important;
}
/* =====================================
   Language radio labels — white in dark
   ===================================== */

html.dark .mb-3 input[type="radio"] + span,
html.dark .mb-3 label span {
    color: #e9eef7 !important;
}

/* =========================================
   MT – Activity scroll (dashboards + activity page)
   ========================================= */

/* Wrapper optional fade (אם אתה שם את זה מסביב) */
.mt-scrollfade {
    position: relative;
}

    .mt-scrollfade::after {
        content: "";
        pointer-events: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 34px;
        background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.28));
        border-radius: 16px;
    }

/* Main scrollbox */
.mt-scrollbox {
    max-height: 320px;
    overflow: auto;
    overflow-x: hidden;
    padding-inline-end: 10px;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06);
}

    /* WebKit scrollbar */
    .mt-scrollbox::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .mt-scrollbox::-webkit-scrollbar-track {
        background: rgba(255,255,255,.06);
        border-radius: 999px;
    }

    .mt-scrollbox::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(124,92,255,.55), rgba(0,194,255,.35));
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

        .mt-scrollbox::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(124,92,255,.75), rgba(0,194,255,.55));
            background-clip: padding-box;
        }

    /* Remove arrows explicitly */
    .mt-scrollbox::-webkit-scrollbar-button {
        width: 0;
        height: 0;
        display: none;
    }

@media (max-width: 900px) {
    .mt-scrollbox {
        max-height: 260px;
    }
}
/* ===== Locked plan UI ===== */

.plan-locked {
    position: relative;
    opacity: 0.65;
    pointer-events: auto; /* חשוב כדי שיהיה לחיץ לשדרוג */
    filter: grayscale(0.2);
}

    .plan-locked::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 16px;
        background: rgba(0, 0, 0, 0.35);
        pointer-events: none;
    }

/* badge למעלה */
.plan-badge {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 3;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6c63ff, #4f46e5);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

/* hover שיווקי */
.plan-locked:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

/* auth bar scrolls away (NOT sticky) */
.auth-bar {
    position: relative; /* או פשוט תמחק לגמרי את ה-position */
    top: auto;
    z-index: auto;
}
/* =========================================
   Tests Create - PRO UI (FULL BLOCK)
   ========================================= */

.test-create-pro {
    --bg: var(--bg, #0b1020);
    --text: var(--text, rgba(255,255,255,0.92));
    --muted: var(--muted, rgba(255,255,255,0.65));
    --border: var(--border, rgba(255,255,255,0.10));
    --card: var(--card, rgba(255,255,255,0.05));
    --input: var(--input-bg, rgba(255,255,255,0.06));
    --shadow: rgba(0,0,0,0.35);
    --primary: var(--primary, #5b8cff);
    --danger: rgba(255, 100, 100, 0.95);
    padding-bottom: 36px;
}

/* ================= TOP ================= */

.test-pro-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.test-pro-title h1 {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: .2px;
    color: var(--text);
}

.test-pro-sub {
    margin-top: 10px;
    color: var(--muted);
    font-size: 15px;
}

/* Upgrade button */

.test-pro-upgrade {
    border-radius: 14px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 70%, transparent);
    color: var(--text);
    box-shadow: 0 10px 26px var(--shadow);
    white-space: nowrap;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

    .test-pro-upgrade:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    }

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

.test-pro-card {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: radial-gradient(900px 260px at 20% 0%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 60%), radial-gradient(700px 220px at 85% 10%, rgba(255,255,255,0.06), transparent 55%), var(--card);
    box-shadow: 0 22px 70px var(--shadow);
    padding: 26px;
    min-height: 420px;
}

/* ================= GRID ================= */

.test-pro-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.test-pro-field {
    grid-column: span 4;
}

.test-pro-switch {
    grid-column: span 4;
}

/* Topic bigger on desktop */

@media (min-width: 1101px) {
    .test-pro-grid .test-pro-field:nth-child(2) {
        grid-column: span 8;
    }

    .test-pro-grid .test-pro-field:nth-child(1),
    .test-pro-grid .test-pro-field:nth-child(3) {
        grid-column: span 4;
    }
}

/* ================= LABEL ================= */

.test-pro-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--text);
    font-size: 14px;
    letter-spacing: .2px;
}

/* ================= INPUT ================= */

.test-pro-input {
    width: 100%;
    height: 52px;
    padding: 14px 14px;
    font-size: 15px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--input);
    color: var(--text);
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

    .test-pro-input::placeholder {
        color: var(--muted);
    }

    .test-pro-input:focus {
        border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
        background: color-mix(in srgb, var(--input) 85%, rgba(255,255,255,0.03));
    }

/* ================= TEXTAREA ================= */

.test-pro-textarea {
    height: auto !important;
    min-height: 160px;
    resize: vertical;
    line-height: 1.5;
    padding-top: 14px;
}

/* ================= HINT + ERROR ================= */

.test-pro-hint {
    margin-top: 8px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.35;
}

.test-pro-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--danger);
}

/* ================= SWITCH CARD ================= */

.test-pro-switch-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--card) 70%, transparent);
    padding: 16px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.test-pro-switch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.test-pro-switch-title {
    font-weight: 800;
    color: var(--text);
    font-size: 13px;
}

/* ================= PREMIUM SWITCH ================= */

.mt-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 30px;
}

    .mt-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.mt-switch-ui {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.10);
    transition: .18s ease;
}

    .mt-switch-ui::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 4px; /* RTL friendly */
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(255,255,255,0.86);
        box-shadow: 0 10px 22px rgba(0,0,0,0.30);
        transition: .18s ease;
    }

.mt-switch input:checked + .mt-switch-ui {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    background: color-mix(in srgb, var(--primary) 35%, rgba(255,255,255,0.10));
}

    .mt-switch input:checked + .mt-switch-ui::after {
        right: 26px;
    }

/* ================= DIVIDER ================= */

.test-pro-divider {
    height: 1px;
    background: var(--border);
    margin: 18px 0 14px;
}

/* ================= ACTIONS ================= */

.test-pro-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.test-pro-cta {
    border: none;
    border-radius: 18px;
    padding: 14px 22px;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: .2px;
    color: white;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 85%, white 0%), color-mix(in srgb, var(--primary) 55%, rgba(0,0,0,0.18)) );
    box-shadow: 0 18px 40px color-mix(in srgb, var(--primary) 35%, rgba(0,0,0,0.55));
    transition: transform .15s ease, filter .15s ease;
}

    .test-pro-cta:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

.test-pro-note {
    color: var(--muted);
    font-size: 12px;
}

/* ================= ERRORS ================= */

.test-pro-errors {
    margin-top: 14px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 80, 80, 0.35);
    background: rgba(255, 80, 80, 0.08);
}

.test-pro-errors-title {
    font-weight: 900;
    margin-bottom: 8px;
    color: rgba(255,220,220,0.95);
}

.test-pro-error-item {
    color: rgba(255, 170, 170, 0.98);
    font-size: 13px;
    margin: 4px 0;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1100px) {
    .test-pro-field {
        grid-column: span 6;
    }

    .test-pro-switch {
        grid-column: span 6;
    }
}

@media (max-width: 900px) {
    .test-pro-title h1 {
        font-size: 28px;
    }

    .test-pro-top {
        flex-direction: column;
        align-items: stretch;
    }

    .test-pro-upgrade {
        width: fit-content;
    }

    .test-pro-field,
    .test-pro-switch {
        grid-column: span 12;
    }

    .test-pro-textarea {
        min-height: 140px;
    }
}
/* =========================================
   FIX VISIBILITY: Geometry Toggle + CTA Button
   Paste at VERY END of site.css
   ========================================= */

/* ----- CTA: "Create Test" button must pop ----- */
.test-create-pro .test-pro-cta {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}

    .test-create-pro .test-pro-cta:hover {
        transform: translateY(-1px);
    }

    .test-create-pro .test-pro-cta:focus {
        outline: none !important;
    }

/* ----- Toggle: make OFF state visible + ON state clearer ----- */
.test-create-pro .mt-switch-ui {
}

    /* knob */
    .test-create-pro .mt-switch-ui::after {
    }

/* checked track */
.test-create-pro .mt-switch input:checked + .mt-switch-ui {
    background: rgba(59,130,246,0.55) !important;
}



/* keyboard focus for accessibility */
.test-create-pro .mt-switch input:focus + .mt-switch-ui {
   
}
/* =========================
   Lesson - Professional View + Checkpoints
   ========================= */

.lesson-view-card {
    border-radius: 16px;
}

.lesson-summary {
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 14px;
    background: rgba(127,127,127,0.08);
}

.lesson-section {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(127,127,127,0.18);
}

.lesson-section-title {
    margin-bottom: 8px;
    font-weight: 800;
}

.lesson-text {
    line-height: 1.7;
    margin-bottom: 10px;
}

.checkpoint-card {
    margin: 12px 0;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(127,127,127,0.24);
    background: rgba(127,127,127,0.06);
}

.checkpoint-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.checkpoint-badge {
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.08);
}

.checkpoint-question {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.checkpoint-label {
    font-weight: 700;
    margin-bottom: 6px;
}

.checkpoint-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.checkpoint-hint {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.35);
    display: none;
}

    .checkpoint-hint.show {
        display: block;
    }

.checkpoint-result {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(127,127,127,0.25);
    background: rgba(127,127,127,0.08);
}

    .checkpoint-result.ok {
        border-color: rgba(25, 135, 84, 0.45);
        background: rgba(25, 135, 84, 0.10);
    }

    .checkpoint-result.bad {
        border-color: rgba(220, 53, 69, 0.45);
        background: rgba(220, 53, 69, 0.10);
    }

.checkpoint-mcq-hint {
    opacity: 0.85;
    margin-bottom: 8px;
}

.checkpoint-options {
    display: grid;
    gap: 8px;
    margin-top: 6px;
}

.checkpoint-option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(127,127,127,0.22);
    background: rgba(127,127,127,0.06);
    cursor: pointer;
}

    .checkpoint-option input {
        margin-top: 3px;
    }
/* ===== Global Loading Overlay ===== */
.mt-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
}

    .mt-loading.is-open {
        display: flex;
    }

.mt-loading-card {
    width: min(520px, 92vw);
    border-radius: 18px;
    padding: 22px 22px;
    text-align: center;
    box-shadow: 0 18px 60px rgba(0,0,0,.25);
    background: var(--mt-card-bg, #fff);
    color: var(--mt-text, #111);
    border: 1px solid rgba(0,0,0,.08);
}

.mt-spinner {
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 4px solid rgba(0,0,0,.15);
    border-top-color: rgba(0,0,0,.65);
    animation: mtspin .9s linear infinite;
}

.mt-loading-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.mt-loading-sub {
    font-size: .95rem;
    opacity: .85;
}

/* Dark mode (אם יש לך body.dark או data-theme, תתאים לפי הפרויקט שלך) */
body.dark .mt-loading-card,
[data-theme="dark"] .mt-loading-card {
    background: var(--mt-card-bg, #141821);
    color: var(--mt-text, #f3f6ff);
    border-color: rgba(255,255,255,.12);
}

body.dark .mt-spinner,
[data-theme="dark"] .mt-spinner {
    border-color: rgba(255,255,255,.18);
    border-top-color: rgba(255,255,255,.75);
}

@keyframes mtspin {
    to {
        transform: rotate(360deg);
    }
}
.mt-loading-progress {
    margin-top: 14px;
}

.mt-loading-progress-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.mt-loading-progress-label {
    font-size: .95rem;
    opacity: .9;
    font-weight: 600;
}

.mt-loading-progress-pct {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .2px;
}

.mt-loading-bar {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0,0,0,.10);
    border: 1px solid rgba(0,0,0,.08);
}

.mt-loading-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    transition: width 220ms ease;
}

body.dark .mt-loading-bar,
[data-theme="dark"] .mt-loading-bar {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.12);
}

body.dark .mt-loading-bar-fill,
[data-theme="dark"] .mt-loading-bar-fill {
    background: rgba(255,255,255,.75);
}

/* =========================================================
   Subjects (25.1)
   ========================================================= */

.mt-page-head {
    margin-bottom: 18px;
}

.mt-page-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.mt-page-sub {
    margin-top: 6px;
    opacity: .85;
}

.mt-breadcrumb {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    opacity: .9;
}

    .mt-breadcrumb a {
        text-decoration: none;
    }

.mt-empty {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--mt-border, rgba(255,255,255,.12));
}

.mt-empty-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.mt-empty-text {
    opacity: .85;
}

.mt-subjects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 1100px) {
    .mt-subjects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .mt-subjects-grid {
        grid-template-columns: 1fr;
    }
}

.mt-subject-card {
    display: block;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--mt-border, rgba(255,255,255,.12));
    background: var(--mt-card-bg, rgba(255,255,255,.04));
    text-decoration: none;
    transition: transform .12s ease, border-color .12s ease;
}

    .mt-subject-card:hover {
        transform: translateY(-2px);
        border-color: var(--mt-accent, rgba(120,120,255,.6));
    }

.mt-subject-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.mt-subject-title {
    font-size: 18px;
    font-weight: 800;
}

.mt-pill {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid var(--mt-border, rgba(255,255,255,.14));
    opacity: .9;
    white-space: nowrap;
}

.mt-subject-meta {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    font-size: 13px;
    opacity: .9;
}

.mt-muted {
    opacity: .75;
}

.mt-subject-open {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
}

.mt-arrow {
    opacity: .8;
    font-size: 18px;
}

/* Subject view grid */
.mt-subject-view-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 1000px) {
    .mt-subject-view-grid {
        grid-template-columns: 1fr;
    }
}

.mt-card {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--mt-border, rgba(255,255,255,.12));
    background: var(--mt-card-bg, rgba(255,255,255,.04));
}

.mt-card-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 12px;
}

/* topic rows */
.mt-topic-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mt-topic-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 70px 90px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--mt-border, rgba(255,255,255,.10));
}

@media (max-width: 700px) {
    .mt-topic-row {
        grid-template-columns: 1fr;
    }

    .mt-topic-pct, .mt-topic-tag {
        justify-self: start;
    }
}

.mt-topic-name {
    font-weight: 800;
}

.mt-topic-bar {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
}

.mt-topic-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--mt-accent, #7c6cff);
    border-radius: 999px;
}

.mt-topic-pct {
    font-weight: 800;
    text-align: end;
}

.mt-topic-tag {
    font-size: 12px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--mt-border, rgba(255,255,255,.14));
    justify-self: end;
}

/* weak/strong tint (subtle) */
.mt-topic-row.weak {
    background: rgba(255, 80, 80, .06);
}

.mt-topic-row.improve {
    background: rgba(255, 200, 80, .06);
}

.mt-topic-row.strong {
    background: rgba(80, 255, 160, .06);
}

/* mini list */
.mt-mini-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mt-mini-item {
    display: block;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--mt-border, rgba(255,255,255,.10));
    background: rgba(255,255,255,.02);
}

    .mt-mini-item:hover {
        border-color: var(--mt-accent, rgba(120,120,255,.6));
    }

.mt-mini-title {
    font-weight: 800;
}

.mt-mini-meta {
    margin-top: 4px;
    font-size: 12px;
    opacity: .85;
}
.mt-nav-subjects {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mt-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    background: var(--mt-accent, #6d5efc);
    color: #fff;
}

/* =========================
   Subjects card (25.4.2) v2
   Paste at END of site.css
   ========================= */

.mt-subject-card.mt-subject-card-v2 {
    display: block;
    text-decoration: none !important;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 18px;
    padding: 18px;
    background: var(--mt-card-bg, #fff);
    color: var(--mt-text, #111);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    .mt-subject-card.mt-subject-card-v2:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 40px rgba(0,0,0,.10);
        border-color: rgba(0,0,0,.14);
    }

.mt-subject-card-v2 .mt-subject-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.mt-subject-card-v2 .mt-subject-title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.mt-subject-card-v2 .mt-subject-rating {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    opacity: .75;
}

.mt-subject-card-v2 .mt-subject-pct {
    min-width: 92px;
    text-align: center;
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.06);
}

.mt-subject-card-v2 .mt-subject-pct-num {
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.mt-subject-card-v2 .mt-subject-pct-label {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    opacity: .7;
}

.mt-subject-card-v2 .mt-subject-foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mt-subject-card-v2 .mt-subject-date {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 13px;
}

.mt-subject-card-v2 .mt-subject-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.mt-subject-card-v2 .mt-subject-open {
    opacity: .9;
}

.mt-subject-card-v2 .mt-arrow {
    font-size: 18px;
    line-height: 1;
    opacity: .8;
}

/* Dark mode support – works with either data-theme="dark" OR .dark on body */
[data-theme="dark"] .mt-subject-card.mt-subject-card-v2,
body.dark .mt-subject-card.mt-subject-card-v2 {
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

[data-theme="dark"] .mt-subject-card-v2 .mt-subject-pct,
body.dark .mt-subject-card-v2 .mt-subject-pct {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
}

[data-theme="dark"] .mt-subject-card-v2 .mt-subject-foot,
body.dark .mt-subject-card-v2 .mt-subject-foot {
    border-top-color: rgba(255,255,255,.12);
}

/* Responsive */
@media (max-width: 700px) {
    .mt-subject-card-v2 .mt-subject-head {
        align-items: center;
    }

    .mt-subject-card-v2 .mt-subject-title {
        font-size: 20px;
    }

    .mt-subject-card-v2 .mt-subject-pct {
        min-width: 84px;
        padding: 9px 10px;
    }
}
/* 25.4.2 — FINAL: align "open" text and arrow perfectly (My/Index subject cards) */
.mt-subject-card-v2 .mt-subject-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1 !important;
    height: 28px !important; /* קובע גובה קבוע לשורת הפעולה */
}

.mt-subject-card-v2 .mt-subject-open {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mt-subject-card-v2 .mt-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    line-height: 1 !important;
    font-size: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    /* פיקס קטן בגלל פונט/RTL שמרים את החץ למעלה */
    position: relative !important;
    top: 1px !important;
}
/* ===========================
   Subject Details (25.6)
   =========================== */

.subject-details .subject-head {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.subject-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
}

.subject-sub {
    margin-top: 6px;
    opacity: .9;
    display: flex;
    gap: 10px;
    align-items: center;
}

.subject-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid var(--mt-border, rgba(255,255,255,.12));
    background: var(--mt-card, rgba(255,255,255,.06));
}

.subject-score {
    font-weight: 900;
    font-size: 20px;
}

.subject-ranges {
    min-width: 220px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--mt-border, rgba(255,255,255,.12));
    background: var(--mt-card, rgba(255,255,255,.06));
}

.ranges-title {
    font-weight: 800;
    margin-bottom: 8px;
}

.ranges-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .ranges-list li {
        display: flex;
        justify-content: space-between;
        opacity: .92;
    }

.subject-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.subject-card {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--mt-border, rgba(255,255,255,.12));
    background: var(--mt-card, rgba(255,255,255,.06));
}

.subject-card-label {
    font-size: 12px;
    opacity: .75;
    font-weight: 700;
}

.subject-card-value {
    margin-top: 6px;
    font-size: 20px;
    font-weight: 900;
}

.subject-topics .topics-title {
    font-weight: 900;
    margin-bottom: 10px;
}

.topics-empty {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--mt-border, rgba(255,255,255,.12));
    background: var(--mt-card, rgba(255,255,255,.06));
    opacity: .85;
}

.topics-table {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--mt-border, rgba(255,255,255,.12));
}

.topics-row {
    display: grid;
    grid-template-columns: 2.2fr .8fr .8fr .9fr .9fr 1.3fr;
    gap: 10px;
    padding: 12px 14px;
    background: var(--mt-card, rgba(255,255,255,.06));
    border-bottom: 1px solid var(--mt-border, rgba(255,255,255,.08));
}

.topics-head {
    font-weight: 900;
    opacity: .9;
}

.topics-topic {
    font-weight: 800;
}

@media (max-width: 1000px) {
    .subject-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topics-row {
        grid-template-columns: 1.8fr .8fr .8fr .9fr .9fr;
    }

        .topics-row > div:last-child {
            display: none;
        }
    /* hide Last on small screens */
}
.subjects-my .mt-subject-details-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}

.subjects-my .mt-subject-delete-form {
    margin: 0;
}

.subjects-my .mt-subject-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 13px;
    cursor: pointer;
    color: #fff;
    background: #dc3545;
    border: 1px solid #dc3545;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

    .subjects-my .mt-subject-delete-btn:hover {
        transform: translateY(-1px);
        background: #c82333;
        border-color: #c82333;
    }
/* Track select - dark mode fix */

.test-pro-input select,
select.test-pro-input,
.test-pro-field select {
    background: var(--mt-card-bg);
    color: var(--mt-text);
    border: 1px solid var(--mt-border);
}

    /* dropdown options */
    .test-pro-field select option {
        background: #0f172a;
        color: #ffffff;
    }
/* Track select only */
.test-pro-track-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid var(--mt-border) !important;
}

    .test-pro-track-select option {
        background: #0f172a !important;
        color: #ffffff !important;
    }
.math-content mjx-container {
    font-size: 125% !important;
}