/* טעינת פונט Rubik */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=swap');

/* --- עיצוב כללי ומשתנים --- */
:root {
    --theory-blue: #0056b3;
    --theory-light-blue: #e6f0ff;
    --theory-hover-blue: #004494;
    --theory-text: #333;
    --theory-border: #ddd;
    --theory-success: #28a745;
    --theory-fail: #f8d7da;
    --theory-fail-text: #721c24;
}

.theory-app-wrap {
    font-family: 'Rubik', sans-serif !important;
    max-width: 1400px; /* הרחבתי ל-1400 כדי שיהיה מקום לתמונה הגדולה */
    margin: 0 auto;
    background: #fff;
    min-height: 600px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 30px;
    box-sizing: border-box;
    direction: rtl;
    position: relative;
    color: var(--theory-text);
    overflow: visible;
}

.hidden { display: none !important; }

/* --- 1. לובי (מסך בחירה) --- */

.lobby-back-btn {
    display: none; 
    background: none;
    border: none;
    color: var(--theory-blue) !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    padding: 0;
    transition: transform 0.2s;
    outline: none !important;
}
.lobby-back-btn:hover {
    transform: translateX(3px);
    color: var(--theory-hover-blue) !important;
}
.lobby-back-btn:active, 
.lobby-back-btn:focus {
    color: var(--theory-blue) !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
.lobby-back-btn .dashicons {
    font-size: 20px; width: 20px; height: 20px; line-height: 1;
}

.lobby-title {
    text-align: center;
    font-size: 32px;
    color: var(--theory-blue) !important;
    margin-bottom: 10px;
    font-weight: 800;
    transition: all 0.3s;
}

.lobby-subtitle {
    text-align: center;
    font-size: 18px;
    color: #666;
    margin-bottom: 40px;
    transition: all 0.3s;
}

.lobby-views-wrapper {
    position: relative;
    min-height: auto; 
    overflow: visible;
}

.lobby-view {
    width: 100%;
    position: relative;
    opacity: 1;
    transform: none;
    transition: none;
}

.view-hidden { display: none; }

/* גריד רישיונות */
.licenses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.license-card {
    border: 1px solid var(--theory-border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    min-height: 120px;
}

.license-card:hover, .license-card.active {
    border-color: var(--theory-blue);
    background: var(--theory-blue);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.license-card:hover .license-name, 
.license-card.active .license-name {
    color: #fff;
}

.license-card:hover img, 
.license-card.active img {
    filter: brightness(0) invert(1);
}

.license-icon {
    max-height: 50px;
    width: auto;
    margin-bottom: 5px;
    transition: filter 0.2s ease;
}

.license-name {
    font-weight: 700;
    font-size: 18px;
    color: var(--theory-blue);
    transition: color 0.2s ease;
}

/* כותרת מפרידה */
.separator-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 30px 0;
    gap: 15px;
}
.separator-title::before, .separator-title::after {
    content: ""; flex: 1; border-bottom: 1px solid #ddd;
}
.separator-title span {
    color: #555;
    font-size: 16px;
    font-weight: 500;
    max-width: 80%;
    line-height: 1.5;
}

/* אזור נושאים ותתי נושאים */
.topics-container {
    text-align: center;
    margin-top: 20px;
}

/* גריד נושאים */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    width: 100%;
}

/* --- מעטפת לכפתורי נושא (עבור טולטיפ) --- */
.topic-item-wrapper {
    position: relative;
    display: flex; 
}

.topic-btn {
    background: #fff; 
    border: 1px solid #ccc; 
    padding: 10px 15px; 
    border-radius: 20px; 
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Rubik', sans-serif;
    color: var(--theory-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: auto;            
    min-height: 60px;        
    white-space: normal;     
    line-height: 1.2;       
    text-align: center;      
    width: 100%;        
    box-sizing: border-box;
}

/* מצב פעיל רגיל */
.topic-btn.topic-filter-btn:hover, .topic-btn.topic-filter-btn.active {
    background: var(--theory-blue); 
    color: #fff !important; 
    border-color: var(--theory-blue);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.topic-btn.topic-filter-btn:hover img, .topic-btn.topic-filter-btn.active img {
    filter: brightness(0) invert(1);
}

/* מצב נעול */
.topic-btn.is-locked {
    background: #f9f9f9;
    color: #999;
    border-color: #ddd;
    cursor: pointer;
}
.topic-btn.is-locked img {
    opacity: 0.5;
    filter: grayscale(100%);
}

.topic-btn img, .topic-icon {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0; 
}

/* גריד תתי נושאים */
.subtopics-list,
.subtopics-grid {
    margin-top: 0;
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    width: 100%;
}

.subtopic-item-wrapper {
    position: relative;
    display: flex;
}

.subtopic-btn {
    background: #fff; 
    border: 1px solid #ccc; 
    padding: 12px 15px; 
    border-radius: 20px; 
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Rubik', sans-serif;
    color: var(--theory-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 55px;
    white-space: normal !important;
    word-break: break-word; 
    line-height: 1.3;
    text-align: center;
    box-sizing: border-box;
}

.subtopic-btn.start-topic-test:hover, .subtopic-btn.start-topic-test.active {
    background: var(--theory-blue); 
    color: #fff !important; 
    border-color: var(--theory-blue);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.subtopic-btn.start-topic-test:hover img {
    filter: brightness(0) invert(1);
}

.subtopic-btn.is-locked {
    background: #f9f9f9;
    color: #999;
    border-color: #ddd;
    cursor: pointer;
}
.subtopic-btn.is-locked img {
    opacity: 0.5;
    filter: grayscale(100%);
}

.subtopic-icon { 
    width: 18px; height: 18px; object-fit: contain; flex-shrink: 0;
}

/* --- טולטיפ לנעילה (Locked Tooltip) --- */
.locked-tooltip {
    display: none;
    position: absolute;
    bottom: 110%; 
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 13px;
    width: 220px;
    text-align: center;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    line-height: 1.4;
}

.locked-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.locked-tooltip a {
    color: #4faaff;
    text-decoration: underline;
    font-weight: bold;
}

@media (min-width: 769px) {
    .topic-item-wrapper:hover .locked-tooltip,
    .subtopic-item-wrapper:hover .locked-tooltip {
        display: block;
        animation: fadeIn 0.2s;
    }
}

.tooltip-open .locked-tooltip {
    display: block;
    animation: fadeIn 0.2s;
}

/* --- 2. מסך המבחן (כאן התיקונים העיקריים) --- */
#screen-test {
    display: grid;
    /* תיקון: הגדלת אזור השאלה והקטנת הסרגל - שימוש באחוזים במקום פיקסלים קבועים */
    grid-template-columns: 1fr 18%; /* במקום 1fr 250px */
    grid-template-rows: auto 1fr auto;
    gap: 30px;
    align-items: start;
    min-height: 500px;
}

.test-header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

.test-title { font-size: 24px; font-weight: 800; color: #333; }
.timer-display { font-size: 20px; font-weight: bold; color: var(--theory-blue); }

.test-sidebar { 
    grid-column: 2; 
    grid-row: 2; 
    align-self: start; 
    /* ווידוא שהסרגל לא גדל מדי */
    max-width: 250px;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.nav-item {
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    width: 100%; /* התאמה לגודל הגריד */
    color: #333;
}

.nav-item.current { background: var(--theory-blue); color: #fff; border-color: var(--theory-blue); }
.nav-item.answered { background: #e2e6ea; color: #666; }

.test-main-area { grid-column: 1; grid-row: 2; }

/* סידור השאלה והתמונה */
.test-content-flex {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* צד השאלה והתשובות */
.qa-side { 
    flex: 1; /* לוקח את המקום שנשאר */
    display: flex; 
    flex-direction: column; 
    order: 1; 
    min-width: 300px; /* שלא יימחץ מדי */
}

/* צד התמונה - כאן התיקון: הוקטן מ-60% ל-40% */
.image-side {
    flex: 0 0 45%;  /* <-- שים לב לשינוי כאן */
    display: flex;
    justify-content: center;
    order: 2;
    max-width: 900px;
}

.question-image-area {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.question-image-area img {
    width: 100%;       /* ממלא את כל רוחב ה-container שלו */
    height: auto;      /* שומר על יחס גובה-רוחב */
    border-radius: 8px;
    border: 2px solid #eee;
    object-fit: contain; /* מוודא שהתמונה כולה נראית */
    max-height: 600px; /* הגבלה לגובה כדי שלא תתפוס את כל הדף */
}

.question-image-area.empty-image {
    background-color: #f8f9fa;
    height: 200px;
    border-radius: 8px;
    border: 1px dashed #ddd;
    font-size: 0;
}

.question-text {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.4;
    color: #333;
}

.answers-list { display: flex; flex-direction: column; gap: 15px; }

.answer-option {
    background: #fcfcfc;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.2s ease;
    color: #333;
}

.answer-option:hover {
    border-color: var(--theory-blue);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    color: var(--theory-blue);
}

.answer-option.selected {
    background: var(--theory-light-blue);
    border-color: var(--theory-blue);
    color: var(--theory-blue);
    font-weight: 600;
}

.answer-radio { accent-color: var(--theory-blue); width: 20px; height: 20px; }

.hint-wrapper { margin-top: 20px; position: relative; }
.hint-toggle { color: var(--theory-blue); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 14px; }
.hint-popup { display: none; position: absolute; bottom: 100%; right: 0; width: 280px; background: var(--theory-blue); color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 100; margin-bottom: 12px; font-size: 14px; line-height: 1.5; }
.hint-popup::after { content: ''; position: absolute; top: 100%; right: 20px; border: 8px solid transparent; border-top-color: var(--theory-blue); }
.hint-wrapper.open .hint-popup { display: block; animation: fadeIn 0.2s; }
.upsell-msg { background: rgba(255,255,255,0.1); padding: 10px; border-radius: 4px; text-align: center; margin-top: 5px; font-size: 12px; }
.upsell-msg a { color: #fff !important; text-decoration: underline; }

.test-footer {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.nav-buttons { display: flex; gap: 10px; }

.btn-nav, .btn-finish {
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    border: none;
    font-family: 'Rubik', sans-serif;
}

.btn-nav { background: #fff; border: 1px solid var(--theory-blue); color: var(--theory-blue); }
.btn-nav:hover, .btn-nav:active, .btn-nav:focus { background: var(--theory-blue); color: #fff; outline: none; border-color: var(--theory-blue); }

.btn-finish { background: var(--theory-blue); color: #fff; }
.btn-finish:hover { background: var(--theory-hover-blue); }

/* --- הסתרת ניווט מובייל בדסקטופ --- */
.mobile-nav-wrapper { display: none !important; }
.mobile-nav-label, .mobile-nav-select { display: none !important; }

/* --- 3. תוצאות --- */
#screen-results { text-align: center; }
.result-banner { padding: 30px; border-radius: 8px; margin-bottom: 30px; color: #fff; }
.result-banner.pass { background: var(--theory-success); }
.result-banner.fail { background: #fbeaea; color: #721c24; border: 1px solid #f5c6cb; }
.result-title { font-size: 30px; font-weight: 800; margin-bottom: 10px; }
.result-score { font-size: 18px; }

.weak-topics-area { 
    background: #fff; border: 1px solid #ddd; padding: 20px; border-radius: 8px; margin-bottom: 30px; text-align: right;
}
.weak-topic-item { border-bottom: 1px solid #eee; padding: 10px 0; display: flex; justify-content: space-between; }
.actions-row { margin: 30px 0; display: flex; justify-content: center; gap: 15px; }

.btn-restart {
    background: #fff; border: 1px solid var(--theory-blue); color: var(--theory-blue); padding: 10px 30px; border-radius: 25px; font-weight: 600; font-size: 16px; cursor: pointer; transition: all 0.2s;
}
.btn-restart:hover { background: var(--theory-blue); color: #fff; }

.admin-tags-debug {
    background: #f0f0f1; padding: 10px; margin-bottom: 15px; border: 1px dashed #ccc; display: flex; align-items: center; justify-content: space-between; border-radius: 6px;
}
.admin-actions { display: flex; flex-direction: column; gap: 5px; }
.admin-action-btn {
    display: flex; align-items: center; justify-content: center; width: 120px; height: 32px;
    padding: 0; font-size: 12px; font-weight: bold; color: white !important; text-decoration: none;
    border-radius: 4px; border: none; cursor: pointer; box-sizing: border-box; line-height: 1;
}
.admin-action-btn:hover { opacity: 0.9; color: white !important; }
.admin-action-btn.edit-btn { background: #2271b1; }
.admin-action-btn.reload-btn { background: #f39c12; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- 4. התאמות מובייל (Media Queries) --- */
@media (max-width: 768px) {
    .theory-app-wrap { padding: 15px 10px; }

    .lobby-views-wrapper {
        min-height: 400px;
        overflow: hidden;
    }
    
    .lobby-view {
        position: absolute;
        top: 0; right: 0;
        opacity: 0;
        transform: translateX(50px);
        pointer-events: none;
        transition: all 0.4s ease-in-out;
    }
    
    .lobby-view.active-view {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
        position: relative; 
    }
    
    .lobby-back-btn { display: inline-flex; }
    .lobby-subtitle { margin-bottom: 5px; }

    .licenses-grid, 
    .topics-grid, 
    .subtopics-grid, 
    .subtopics-list { 
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    .license-card { padding: 15px 10px; min-height: 100px; }
    .license-name { font-size: 16px; }
    .license-icon { max-height: 40px; }

    .topic-btn, .subtopic-btn {
        width: 100%;
        min-height: 50px;
        font-size: 14px;
        padding: 8px;
        justify-content: center;
        text-align: center;
        white-space: normal !important;
        word-break: break-word;
    }

    /* מסך מבחן - מובייל */
    #screen-test { grid-template-columns: 1fr; gap: 5px; } 
    .test-sidebar { display: none; } 
    .test-content-flex { flex-direction: column; gap: 5px; } 
    .qa-side { display: contents; }
    .question-text { order: 1; font-size: 18px; text-align: center; margin-bottom: 15px; }
    
    .image-side { 
        order: 2; 
        width: 100%; 
        flex: auto; 
        margin-bottom: 15px; 
    }
    /* תיקון גודל תמונה במובייל - מאפשר גמישות */
    .question-image-area img { max-height: 300px; width: auto; max-width: 100%; margin: 0 auto; display: block; }
    .question-image-area.empty-image { display: none; }

    .answers-list { order: 3; width: 100%; }
    .hint-wrapper { order: 4; width: 100%; text-align: center; }
    .admin-tags-debug { order: 0; margin-bottom: 10px; }

    .answer-option { padding: 12px; font-size: 16px; width: 100%; box-sizing: border-box; }

    .test-header { flex-direction: column; gap: 5px; text-align: center; margin-bottom: 15px; }
    .test-title { font-size: 20px; }

    .test-footer { flex-direction: column; gap: 15px; margin-top: 20px; }
    
    .nav-buttons { width: 100%; justify-content: space-between; order: 1; }
    .btn-nav { flex: 1; font-size: 14px; padding: 10px; }
    
    /* הצגת ניווט במובייל */
    .mobile-nav-wrapper { display: block !important; order: 2; width: 100%; }
    .mobile-nav-label { display: block !important; font-size: 12px; color: #666; margin-bottom: 5px; text-align: center; }
    .mobile-nav-select { display: block !important; width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
    
    .btn-finish { order: 3; width: 100%; padding: 12px; }

    .weak-topics-area > div {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .weak-topic-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 10px;
    }
}

.theory-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.theory-modal-box {
    background: #fff;
    width: 90%;
    max-width: 400px;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: slideUp 0.3s ease;
}

.theory-modal-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.theory-modal-text {
    font-size: 16px;
    color: #555;
    margin-bottom: 25px;
    line-height: 1.5;
}

.theory-modal-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-modal {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-modal-confirm {
    background: #28a745; 
    color: white;
}
.btn-modal-confirm:hover { background: #218838; }

.btn-modal-cancel {
    background: #dc3545; 
    color: white;
}
.btn-modal-cancel:hover { background: #c82333; }

.hint-popup {
    padding-left: 30px; 
}

.close-hint {
    position: absolute;
    top: 5px;
    left: 8px; 
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    transition: color 0.2s;
    z-index: 10;
}

.close-hint:hover {
    color: #000; 
}

.weak-topic-item.clickable-topic {
    background: #fff;
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid #ddd;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.weak-topic-item.clickable-topic:hover {
    background: #f0f7ff; 
    border-color: #0056b3;
    transform: translateY(-2px); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.error-badge {
    background: #fbeaea;
    color: #721c24;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 12px;
}

.topic-arrow {
    font-size: 16px;
    color: #0056b3;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.weak-topic-item.clickable-topic:hover .topic-arrow {
    opacity: 1;
}

.weak-topic-item.locked-topic {
    background: #f5f5f5;
    color: #888;
    border-color: #eee;
    cursor: pointer; 
}

.weak-topic-item.locked-topic:hover {
    background: #f0f0f0;
    transform: none; 
    box-shadow: none;
}

.weak-topic-item.locked-topic .error-badge {
    background: #e0e0e0;
    color: #888;
}

.weak-topic-item.locked-topic .dashicons-lock {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: #888;
}

.hint-wrapper {
    margin-top: 30px; 
    position: relative;
    display: inline-block; 
}

.hint-toggle.student-style {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.2s;
}

.hint-toggle.student-style:hover {
    transform: scale(1.02); 
}

.hint-student-img {
    height: 110px; 
    width: auto;
    display: block;
}

.locked-filter {
    filter: grayscale(100%) opacity(0.7);
}

.hint-text-bubble {
    position: absolute;
    bottom: 85px; 
    right: 85px; 
    background: transparent;
    color: var(--theory-blue);
    font-weight: 700;
    font-size: 16px;
    text-decoration: underline;
    z-index: 2;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8); 
}

.locked-overlay-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 24px;
    color: #555;
}

.hint-popup {
    bottom: 50%; 
    right: 80px;
}

.hint-wrapper .hint-student-img.locked-filter {
    filter: none !important;
    opacity: 1 !important;
}

.hint-wrapper .locked-overlay-icon {
    display: none !important;
}

.hint-wrapper .hint-popup,
.hint-wrapper .upsell-msg {
    background: var(--theory-blue) !important;
    color: #fff !important;
    opacity: 1 !important; 
    border: none !important;
}

.hint-wrapper .hint-popup::after {
    border-top-color: var(--theory-blue) !important;
}

@media (max-width: 768px) {
    
    .hint-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start; 
        position: relative;
        width: 100%;
        margin-top: 50px; 
        margin-bottom: 10px;
    }

    .hint-wrapper .hint-student-img {
        height: 110px;
        width: auto;
        display: block;
        filter: none !important;
    }

    .hint-wrapper .hint-popup {
        position: absolute;
        bottom: 100%; 
        right: 0;       
        left: auto;     
        margin-bottom: 5px; 
        width: 240px;
        max-width: 85vw; 
    }

    .hint-wrapper .hint-popup::after {
        top: 100%;
        right: 40px; 
    }

    .hint-wrapper .hint-text-bubble {
        right: 60px;
        bottom: 60px;
        background: rgba(255,255,255,0.7);
        border-radius: 4px;
        padding: 0 5px;
    }
}

.locked-explanation-icon {
    font-size: 20px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(255,255,255,0.5);
    padding: 5px;
    border-radius: 50%;
}

.locked-explanation-icon:hover {
    color: var(--theory-blue);
    background: #fff;
    transform: scale(1.1);
}

.weak-topic-wrapper {
    position: relative;
    display: inline-block;
}

.explanation-lock-wrapper {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.explanation-lock-btn {
    font-size: 20px;
    color: #666;
    background: rgba(0,0,0,0.05);
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
}

.explanation-lock-wrapper:hover .explanation-lock-btn,
.explanation-lock-wrapper.tooltip-open .explanation-lock-btn {
    color: var(--theory-blue);
    background: rgba(0,0,0,0.1);
}

.explanation-lock-wrapper .locked-tooltip {
    bottom: 100%;
    right: 50%;
    transform: translateX(50%); 
    margin-bottom: 10px;
    width: 200px;
    white-space: normal;
    text-align: center;
    z-index: 1000; 
}

.explanation-lock-wrapper .locked-tooltip::after {
    left: 50%;
    margin-left: -6px;
    right: auto;
}

.results-table td {
    overflow: visible !important;
    position: relative; 
}

.results-actions-container {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-top: 25px;
    width: 100%;
}

.results-action-col {
    flex: 1; 
    display: flex;
    flex-direction: column;
}

.btn-upgrade-premium {
    background: #f39c12 !important; 
    color: #fff !important;
    border: none !important;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(243, 156, 18, 0.3);
}

.btn-upgrade-premium:hover {
    background: #e67e22 !important;
    transform: translateY(-2px);
}

.upgrade-subtext {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
    line-height: 1.4;
    text-align: center;
    padding: 0 5px;
}

@media (max-width: 600px) {
    .results-actions-container {
        flex-direction: column;
        gap: 20px;
    }
    .results-action-col {
        width: 100%;
    }
}

.cool-loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: #f0f2f5; 
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.shiny-loading-text {
    font-size: 24px;
    font-weight: 800;
    margin-top: 30px;
    background: linear-gradient(to right, #4a4a4a 0%, #9fa3a7 20%, #fff 50%, #9fa3a7 80%, #4a4a4a 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    animation: textShine 3s linear infinite reverse;
}

@keyframes textShine {
    to { background-position: 200% center; }
}

.vehicle-stage {
    position: relative;
    width: 200px;
    height: 120px;
    border-bottom: 3px dashed #bdc3c7;
    transform: scaleX(-1);
}

.vehicle-body-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    animation: suspension 0.6s ease-in-out infinite alternate;
}

@keyframes suspension {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}

.vehicle-wheel {
    position: absolute;
    background: #333;
    border: 3px solid #555;
    border-radius: 50%;
    animation: wheelSpin 0.8s linear infinite;
}

.vehicle-wheel::after {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0; height: 2px; background: #555;
}
.vehicle-wheel::before {
    content: '';
    position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #555;
}

@keyframes wheelSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.type-car .vehicle-shape {
    width: 100%; height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233498db' d='M499.99 196.66l-54.5-113.53c-6.12-12.75-18.96-20.88-33.1-20.99l-200.54.15c-16.09-.1-30.93 8.29-39.12 22.09L115.44 186H32c-17.67 0-32 14.33-32 32v144c0 17.67 14.33 32 32 32h27.33c8.21-25.3 32.04-43.38 60.18-43.38 28.13 0 51.97 18.08 60.18 43.38h184.63c8.2-25.3 32.04-43.38 60.18-43.38 28.13 0 51.97 18.08 60.18 43.38H512V228c0-17.67-14.33-32-32-32h-12.01l32-31.34zM180.01 392.62c-22.09 0-40-17.91-40-40s17.91-40 40-40 40 17.91 40 40-17.91 40-40 40zm272 0c-22.09 0-40-17.91-40-40s17.91-40 40-40 40 17.91 40 40-17.91 40-40 40zM430.5 211.33h-201l36-85.33h142.5l22.5 85.33z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center bottom; background-size: contain;
    position: absolute; bottom: 25px;
}
.type-car .wheel-front { width: 36px; height: 36px; bottom: 5px; left: 35px; }
.type-car .wheel-back { width: 36px; height: 36px; bottom: 5px; right: 40px; }

.type-motorcycle .vehicle-shape {
    width: 100%; height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23e74c3c' d='M512.6 192H406.8l-31.8-59.3c-6-11.1-17.6-18.1-30.3-18.1h-73.1c-12.7 0-24.3 7-30.3 18.1L198.4 216h-51l27-85.5c2.3-7.3 1.7-15.2-2-22.2L154.5 62C150.2 49 137.8 40 124 40H64C46.3 40 32 54.3 32 72v32c0 17.7 14.3 32 32 32h36.5l-24.5 77.7C71 228 64 244 64 256c0 58.1 34.4 108 84.4 132.4-2.6-8.1-4.4-16.6-4.4-25.4 0-44.2 35.8-80 80-80s80 35.8 80 80c0 8.8-1.8 17.3-4.4 25.4C349.6 364 384 314 384 256c0-13.3-3.3-25.8-8.7-37.2L432 192h64c17.7 0 32-14.3 32-32v-32c0-17.7-14.3-32-32-32zM224 432c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm352-232c-58.1 0-108 34.4-132.4 84.4 2.6 8.1 4.4 16.6 4.4 25.4 0 44.2 35.8 80 80 80s80-35.8 80-80c0-8.8-1.8-17.3-4.4-25.4C580 234.4 530.1 200 476 200zm0 160c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center bottom; background-size: contain;
    position: absolute; bottom: 25px;
}
.type-motorcycle .wheel-front { width: 40px; height: 40px; bottom: 5px; left: 10px; }
.type-motorcycle .wheel-back { width: 40px; height: 40px; bottom: 5px; right: 30px; }

.type-tractor .vehicle-shape {
    width: 100%; height: 90px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%232ecc71' d='M624 368h-16V240c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v80h-32v-32c0-35.3-28.7-64-64-64H192V110c0-11-9-20-20-20H64c-11 0-20 9-20 20v210H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h12.5c8.9 26.7 34.3 46 64.5 46s55.6-19.3 64.5-46h233c8.9 26.7 34.3 46 64.5 46s55.6-19.3 64.5-46H624c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM93 432c-14.9 0-27-12.1-27-27s12.1-27 27-27 27 12.1 27 27-12.1 27-27 27zm448-64H464V240h96v128h-19zm32 64c-14.9 0-27-12.1-27-27s12.1-27 27-27 27 12.1 27 27-12.1 27-27 27z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center bottom; background-size: contain;
    position: absolute; bottom: 35px; left: 10px;
}
.type-tractor .wheel-front { width: 30px; height: 30px; bottom: 5px; left: 5px; }
.type-tractor .wheel-back { width: 55px; height: 55px; bottom: 5px; right: 25px; border-width: 4px; }

.type-truck .vehicle-shape {
    width: 100%; height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%239b59b6' d='M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48v48H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h56v104H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h56v128c0 26.5 21.5 48 48 48h6.5c8.9 26.7 34.3 46 64.5 46s55.6-19.3 64.5-46h191c8.9 26.7 34.3 46 64.5 46s55.6-19.3 64.5-46H624c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM176 432c-14.9 0-27-12.1-27-27s12.1-27 27-27 27 12.1 27 27-12.1 27-27 27zm384 0c-14.9 0-27-12.1-27-27s12.1-27 27-27 27 12.1 27 27-12.1 27-27 27zM416 256h176v64H416v-64zm0-128h48.1l54.5 54.5c4.5 4.5 7 10.6 7 17V224H416v-96z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center bottom; background-size: contain;
    position: absolute; bottom: 25px;
}
.type-truck .wheel-front { width: 36px; height: 36px; bottom: 5px; left: 85px; }
.type-truck .wheel-back { width: 36px; height: 36px; bottom: 5px; right: 45px; }

.type-bus .vehicle-shape {
    width: 100%; height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f1c40f' d='M488 128h-8V80c0-26.5-21.5-48-48-48H80C53.5 32 32 53.5 32 80v48h-8c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24v48c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48v-8h176v8c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48v-48c13.3 0 24-10.7 24-24V152c0-13.3-10.7-24-24-24zM96 368c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32 32 32zm320 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32 32 32zM432 208H80v-80h352v80z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center bottom; background-size: contain;
    position: absolute; bottom: 25px;
}
.type-bus .wheel-front { width: 34px; height: 34px; bottom: 5px; left: 60px; }
.type-bus .wheel-back { width: 34px; height: 34px; bottom: 5px; right: 60px; }

.type-bicycle .vehicle-shape {
    width: 100%; height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%231abc9c' d='M400 96a48 48 0 1 0 -48 48 48 48 0 0 0 48-48zM146.3 341.6c-19.7-13.7-25.2-40.4-12.3-60.5C151.1 254.6 207.8 192 207.8 192l-39.1-41c-11-11.5-7.9-30 5.8-37.6 31.6-17.4 76.4-41.2 122.9-66.3-4.3-10.5-6.6-21.7-6.6-33.1A88 88 0 0 1 378.6 31.8l.3-.2 1.1-.6C394 23.5 412.8 16 432 16a96 96 0 1 1 -96 96c0-8.8 1.3-17.3 3.6-25.6-19.4 10.4-38.7 20.8-58 31.3-4.1 2.2-7.7 5.1-10.7 8.5l-48.8 55.6c24.9 24.5 47.4 53.3 65.2 86.6 31.2-17.4 60.7-33.8 88-48.9 22.1-12.3 49.5-8 66.3 10.3L593.1 307c17.2 18.7 46.5 19.5 64.8 1.8 18.3-17.7 19.1-47.2 1.3-65.6l-50.3-52.1c-25.6-26.5-65.8-35-100.2-21.2-30.9 12.4-64.1 30.4-99.3 49.8-25.7-50.9-62.9-94.3-106.1-125.3l42.9 45c8.4 8.8 6.8 23.1-3.4 30l-54.6 36.8a48 48 0 1 0 -48.1 64.5c32.6 0 62.1-14 83.1-36.4zM96 448a64 64 0 1 1 64-64 64 64 0 0 1 -64 64zm384 0a64 64 0 1 1 64-64 64 64 0 0 1 -64 64z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center bottom; background-size: contain;
    position: absolute; bottom: 25px;
}
.type-bicycle .wheel-front { width: 50px; height: 50px; bottom: 5px; left: 30px; border-width: 2px; background: transparent; }
.type-bicycle .wheel-back { width: 50px; height: 50px; bottom: 5px; right: 40px; border-width: 2px; background: transparent; }

/* ============================================================
   עיצוב תוצאות אולטרה-מודרני (Floating Cards Table)
   ============================================================ */

/* --- 1. תיקון "הוורוד" (Anti-Pink Fix) --- */
button:focus, 
button:active,
button:focus-visible,
.topic-btn:focus,
.toggle-view-btn:focus,
.btn-nav:focus,
.btn-finish:focus,
.btn-restart:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important; 
}

/* שומר על הצבע הכחול שלנו גם בפוקוס */
.btn-finish:focus, 
.btn-restart:focus,
.toggle-view-btn:focus {
    background-color: var(--theory-blue) !important;
    color: #fff !important;
    border-color: var(--theory-blue) !important;
}

/* --- 2. מעטפת וכרטיס עליון --- */

.results-card-container {
    background: transparent !important; /* רקע שקוף כדי שהשורות יצופו */
    border: none !important;
    box-shadow: none !important;
    margin-top: 30px;
}

/* ההדר (Header) - הטאבים */
.results-card-header {
    background: #f8f9fa; /* אפור בהיר מאוד ונקי */
    padding: 15px 30px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    gap: 30px; 
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
    border: 1px solid #fff; /* מסגרת לבנה עדינה */
    position: relative;
    z-index: 2;
    margin: 0 auto 20px auto; /* מירכוז */
    width: fit-content;
    min-width: 60%;
}

/* קו מחבר קטן בין הטאבים לטבלה */
.results-card-header::after {
    content: '';
    position: absolute;
    bottom: -25px; 
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 25px;
    background: linear-gradient(to bottom, #ddd, transparent);
    z-index: -1;
}

.results-status-label {
    font-size: 20px;
    font-weight: 800;
    color: var(--theory-blue);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.2;
}

/* כפתור המעבר */
.toggle-view-btn {
    position: relative;
    background: var(--theory-blue);
    color: #fff;
    border: none;
    padding: 8px 22px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.2);
    overflow: hidden;
    transition: transform 0.2s;
    white-space: nowrap;
}

.toggle-view-btn:hover {
    transform: translateY(-2px);
    background: var(--theory-hover-blue);
}

.toggle-view-btn::after {
    content: '';
    position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: shinyBtn 4s infinite;
}
@keyframes shinyBtn { 0% { left: -150%; } 20% { left: 150%; } 100% { left: 150%; } }

/* כפתור "פתח הכל" - מוסתר בדסקטופ כברירת מחדל */
.mobile-expand-all-btn { display: none; }

/* 3. עיצוב שורות ותאים (דסקטופ) */
table#floating-results-table {
    border-collapse: separate !important; 
    border-spacing: 0 15px !important;    
    background: transparent !important;
    border: none !important;
    margin-top: 20px !important;
    width: 100% !important;
    display: table !important; 
}
table#floating-results-table th, table#floating-results-table td { border: none !important; }

table#floating-results-table thead th {
    background-color: #eef4fb !important; color: var(--theory-blue) !important;
    font-size: 15px !important; font-weight: 800 !important; padding: 20px !important;
    text-transform: uppercase; letter-spacing: 0.5px;
}
table#floating-results-table thead th:first-child { border-top-right-radius: 12px !important; border-bottom-right-radius: 12px !important; }
table#floating-results-table thead th:last-child { border-top-left-radius: 12px !important; border-bottom-left-radius: 12px !important; }

table#floating-results-table tbody tr { background: transparent !important; transition: transform 0.2s; }
table#floating-results-table tbody tr:hover { transform: translateY(-3px); }

table#floating-results-table tbody td {
    background-color: #f8fbff !important; padding: 20px !important; color: #2d3748 !important;
    font-size: 15px !important; vertical-align: middle !important;
    border-top: 1px solid #e2e8f0 !important; border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02) !important;
}
table#floating-results-table tbody td:first-child { border-top-right-radius: 12px !important; border-bottom-right-radius: 12px !important; border-right: 1px solid #e2e8f0 !important; }
table#floating-results-table tbody td:last-child { border-top-left-radius: 12px !important; border-bottom-left-radius: 12px !important; border-left: 1px solid #e2e8f0 !important; }

/* אינדיקטורים */
table#floating-results-table tr.row-wrong td:first-child { border-right: 5px solid #fc8181 !important; }
table#floating-results-table tr.row-wrong td { background-color: #fff5f5 !important; border-bottom: 2px solid #fc8181 !important; border-top: 1px solid #fecaca !important; }

table#floating-results-table tr.row-correct td:first-child { border-right: 5px solid #68d391 !important; }
table#floating-results-table tr.row-correct td { background-color: #f0fff4 !important; border-bottom: 2px solid #68d391 !important; border-top: 1px solid #c6f6d5 !important; }

/* הסתרת נכונות במצב מקוצר */
table#floating-results-table.condensed-mode tr.row-correct { display: none !important; }

.q-number-badge {
    background: #edf2f7 !important; color: #718096 !important; width: 35px; height: 35px;
    line-height: 35px; text-align: center; border-radius: 50%; display: inline-block;
    font-weight: 800; font-family: 'Rubik', sans-serif;
}
.row-wrong .q-number-badge { background: #fed7d7 !important; color: #c53030 !important; }
.row-correct .q-number-badge { background: #c6f6d5 !important; color: #2f855a !important; }

/* הודעה כשאין טעויות */
.no-errors-msg {
    display: none; text-align: center; padding: 20px; background: #fff;
    border-radius: 12px; margin-top: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    color: var(--theory-success); font-weight: bold; border: 1px solid #c6f6d5;
}

/* --- תוספות חדשות לתמונת שאלה --- */
.result-question-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* השינוי: ממרכז את האלמנטים (טקסט ותמונה) אופקית */
    gap: 10px;
    text-align: center; /* מוודא שגם שורות הטקסט עצמן ממורכזות */
}

.result-question-img {
    max-height: 100px; 
    width: auto;        
    max-width: 100%;    
    border-radius: 4px;
    border: 1px solid #ddd;
    display: block;
}

.result-question-text {
    width: 100%;
    font-size: 15px; 
}

/* ============================================================
   התאמות מובייל חכמות (Final Mobile Fixes: Hidden Dashes & Tooltips)
   ============================================================ */
@media (max-width: 768px) {
    
    /* 1. הדר מובייל */
    .results-card-header {
        width: auto; max-width: none; flex-direction: column; gap: 5px;
        text-align: center; padding: 15px 10px; border-radius: 16px;
    }
    
    /* כותרת מובייל */
    .results-status-label {
        font-size: 22px !important; 
        color: var(--theory-blue) !important;
        justify-content: center;
        margin-bottom: 2px;
        width: 100%;
        text-align: center;
    }
    
    /* כפתור טוגל מוקטן */
    .toggle-view-btn { 
        width: auto !important; 
        display: inline-flex;
        padding: 6px 14px !important;
        font-size: 13px !important;
        opacity: 0.95;
        transform: scale(0.95);
        margin-bottom: 5px;
    }

    /* 2. כפתור "פתח הכל" */
    .mobile-expand-all-btn { 
        display: block !important; 
        width: 100%; 
        margin-top: 0;
        padding: 10px; 
        background: #fff !important; 
        border: 1px solid #e2e8f0 !important; 
        color: #718096 !important; 
        border-radius: 8px; 
        font-weight: 600; 
        cursor: pointer; 
        font-size: 14px;
        transition: background 0.2s;
    }
    
    .mobile-expand-all-btn.all-open {
        background: #edf2f7 !important;
        color: #2d3748 !important;
        border-color: #cbd5e0 !important;
    }

    /* 3. תיקון בועת פרימיום (שלא תיחתך בצד) */
    .explanation-lock-wrapper .locked-tooltip {
        right: -10px !important; /* הצמדה לימין */
        left: auto !important;   /* ביטול מירכוז */
        transform: none !important;
        width: 240px !important;
        max-width: 80vw !important;
        text-align: right !important;
    }
    .explanation-lock-wrapper .locked-tooltip::after {
        right: 15px !important; /* הזזת החץ לימין */
        left: auto !important;
        margin-left: 0 !important;
    }

    /* 4. מבנה הטבלה */
    table#floating-results-table { border-spacing: 0 !important; display: block !important; }
    table#floating-results-table thead { display: none !important; }
    table#floating-results-table tbody { display: block !important; }

    /* כרטיס שאלה */
    table#floating-results-table tbody tr {
        display: flex !important; flex-direction: column !important; margin-bottom: 15px !important;
        background: #fff !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
        border: 1px solid #edf2f7 !important; overflow: hidden !important; position: relative; cursor: pointer;
    }

    /* מס' שאלה - מימין */
    table#floating-results-table tbody td:nth-of-type(1) {
        position: absolute !important; top: 12px !important; right: 12px !important;
        width: auto !important; padding: 0 !important; background: transparent !important; border: none !important; z-index: 5;
    }
    table#floating-results-table tbody td:nth-of-type(1)::after { content: none !important; }

    /* חץ - משמאל */
    table#floating-results-table tbody tr::after {
        content: '\f347'; font-family: 'dashicons'; position: absolute; top: 15px; left: 15px;
        font-size: 24px; color: var(--theory-blue); transition: transform 0.3s ease; pointer-events: none; z-index: 5;
    }
    table#floating-results-table tbody tr.mobile-open::after { transform: rotate(180deg); }

    /* השאלה - התאמת תמונה למובייל */
    table#floating-results-table tbody td:nth-of-type(2) {
        width: 100% !important; display: block !important;
        font-size: 16px !important; font-weight: 700; color: #2d3748; line-height: 1.4;
        padding: 18px 60px 18px 60px !important; 
        border-bottom: none !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }
    
    /* שינוי פריסת השאלה (תמונה מעל טקסט) במובייל */
    .result-question-wrapper {
        flex-direction: column; /* תמונה מעל הטקסט */
        align-items: center;    /* מירכוז */
        gap: 10px;
    }
    .result-question-img {
        max-height: none !important; /* ביטול הגבלת גובה */
        max-width: 100% !important;  /* רוחב מלא */
        width: 100% !important;
        height: auto !important;
        margin-bottom: 5px;
    }

    /* תוכן נפתח (מוסתר כברירת מחדל) */
    table#floating-results-table tbody td:nth-of-type(3),
    table#floating-results-table tbody td:nth-of-type(4),
    table#floating-results-table tbody td:nth-of-type(5) {
        display: none !important; 
        background-color: #fcfcfc !important;
        padding: 10px 15px !important;
        border-top: 1px solid #f0f0f0 !important;
        text-align: right !important;
        font-size: 14px !important;
    }

    /* הצגת תוכן בפתיחה */
    table#floating-results-table tbody tr.mobile-open td:nth-of-type(3),
    table#floating-results-table tbody tr.mobile-open td:nth-of-type(4),
    table#floating-results-table tbody tr.mobile-open td:nth-of-type(5) {
        display: block !important;
    }
    
    /* --- התיקון הקריטי: הסתרה חזקה של שורות ריקות --- */
    table#floating-results-table tbody tr.mobile-open td.content-dash,
    table#floating-results-table tbody td.content-dash { 
        display: none !important; 
    }

    /* תוויות Inline */
    table#floating-results-table tbody td:nth-of-type(3)::before { content: "תשובתך:"; display: inline-block !important; font-weight: 700; color: #718096; margin-left: 5px; }
    table#floating-results-table tbody td:nth-of-type(4)::before { content: "תשובה נכונה:"; display: inline-block !important; font-weight: 700; color: #718096; margin-left: 5px; }
    table#floating-results-table tbody td:nth-of-type(5)::before { content: "הסבר:"; display: inline-block !important; font-weight: 700; color: #718096; margin-left: 5px; }

    /* פסים צבעוניים */
    table#floating-results-table tr.row-wrong { border-top: 4px solid #fc8181 !important; border-left: 1px solid #edf2f7 !important; border-right: 1px solid #edf2f7 !important;}
    table#floating-results-table tr.row-correct { border-top: 4px solid #68d391 !important; border-left: 1px solid #edf2f7 !important; border-right: 1px solid #edf2f7 !important;}
    
    table#floating-results-table tr.row-wrong td:first-child,
    table#floating-results-table tr.row-correct td:first-child {
        border-right: none !important; border-top: none !important;
    }
}