:root {
            --blue: #263f9e;
            --blue-dark: #172a72;
            --cream: #fff7df;
            --card: rgba(255,255,255,.94);
            --line: #dbe6ff;
            --gold: #f59e0b;
            --green: #16a34a;
            --red: #dc2626;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background:
                radial-gradient(circle at 12% 10%, rgba(255,255,255,.95) 0 60px, transparent 64px),
                radial-gradient(circle at 88% 14%, rgba(255,230,180,.75) 0 86px, transparent 90px),
                linear-gradient(135deg, #eaf3ff 0%, #fff7df 48%, #f0fff4 100%);
            color: #172a72;
        }

        .page {
            width: min(1540px, 97vw);
            margin: 0 auto;
            padding: 14px 0 34px;
        }

        .topbar {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            margin-bottom: 12px;
        }

        .back {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            padding: 0 15px;
            border-radius: 999px;
            background: linear-gradient(180deg, #3456d4, #263f9e);
            color: #fff;
            font-weight: 900;
            text-decoration: none;
            box-shadow: 0 5px 0 #172a72, 0 10px 18px rgba(38,63,158,.14);
        }

        .hero {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 18px;
            align-items: center;
            padding: 17px 22px;
            margin-bottom: 12px;
            border-radius: 26px;
            background: var(--card);
            border: 2px solid rgba(255,255,255,.82);
            box-shadow: 0 18px 40px rgba(31,58,147,.10);
        }

        .hero h1 {
            margin: 0;
            font-size: clamp(28px, 3.5vw, 44px);
            line-height: 1;
            letter-spacing: -.045em;
        }

        .hero p {
            margin: 7px 0 0;
            color: #425fa4;
            font-size: 17px;
            font-weight: 750;
        }

        .level-badge {
            display: grid;
            place-items: center;
            width: 96px;
            height: 96px;
            border-radius: 28px;
            background: linear-gradient(145deg, #fff7cc, #dff2ff);
            font-size: 42px;
            box-shadow: inset 0 -12px 22px rgba(34,48,74,.08);
        }

        .layout {
            display: grid;
            grid-template-columns: 230px minmax(620px, 1fr) 330px;
            gap: 14px;
            align-items: start;
        }

        .card {
            background: var(--card);
            border: 2px solid rgba(255,255,255,.85);
            border-radius: 26px;
            box-shadow: 0 14px 34px rgba(31,58,147,.09);
        }

        .episode-panel {
            padding: 16px;
        }

        .episode-title {
            margin: 0 0 10px;
            font-size: 21px;
            letter-spacing: -.02em;
        }

        .mini-map {
            display: grid;
            gap: 10px;
        }

        .category-step {
            display: block;
            width: 100%;
            text-align: left;
            padding: 13px 13px;
            border-radius: 18px;
            background: #eef4ff;
            border: 2px solid #dbe6ff;
            font-weight: 1000;
            color: #263f9e;
            cursor: pointer;
            text-decoration: none;
            font-size: 15px;
            line-height: 1.18;
        }

        .category-step small {
            display: block;
            margin-top: 4px;
            color: #6076b8;
            font-size: 12px;
            font-weight: 850;
        }

        .category-step.active {
            background: linear-gradient(180deg, #3456d4, #263f9e);
            color: #fff;
            border-color: #263f9e;
        }

        .category-step.active small {
            color: rgba(255,255,255,.82);
        }

        .lesson-list-panel {
            padding: 0;
            background: transparent;
            border: 0;
            box-shadow: none;
        }

        .lesson-list-head {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        .lesson-list-head h2 {
            margin: 0;
            font-size: 20px;
            letter-spacing: -.02em;
            color: #172a72;
        }

        .lesson-list-head p {
            margin: 3px 0 0;
            color: #425fa4;
            font-size: 13px;
            font-weight: 850;
        }

        .lesson-count-badge {
            flex: 0 0 auto;
            border-radius: 999px;
            padding: 6px 10px;
            background: #eef4ff;
            color: #263f9e;
            font-size: 12px;
            font-weight: 1000;
        }

        .lesson-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .lesson-pill {
            min-height: 40px;
            padding: 8px 10px;
            border-radius: 15px;
            border: 2px solid #dbe6ff;
            background: #f8fbff;
            color: #172a72;
            text-align: left;
            font-size: 13px;
            line-height: 1.22;
            font-weight: 950;
            cursor: pointer;
        }

        .lesson-pill.active {
            background: linear-gradient(180deg, #3456d4, #263f9e);
            color: #ffffff;
            border-color: #263f9e;
        }

        .lesson-pill .lesson-no {
            display: inline-flex;
            min-width: 24px;
            justify-content: center;
            margin-right: 5px;
            padding: 1px 5px;
            border-radius: 999px;
            background: rgba(38,63,158,.10);
            color: #263f9e;
            font-size: 12px;
            font-weight: 1000;
        }

        .lesson-pill.active .lesson-no {
            background: rgba(255,255,255,.18);
            color: #ffffff;
        }

        .map-group-title {
            margin: 12px 0 6px;
            font-size: 13px;
            font-weight: 1000;
            color: #425fa4;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .map-step {
            display: block;
            width: 100%;
            text-align: left;
            padding: 11px 12px;
            border-radius: 18px;
            background: #eef4ff;
            border: 2px solid #dbe6ff;
            font-weight: 900;
            color: #263f9e;
            cursor: pointer;
            text-decoration: none;
            font-size: 15px;
        }

        .map-step.active {
            background: linear-gradient(180deg, #3456d4, #263f9e);
            color: #fff;
            border-color: #263f9e;
        }

        .reader {
            position: relative;
            padding: 14px;
        }

        .episode-panel,
        .lesson-sidebar {
            position: sticky;
            top: 12px;
            max-height: calc(100vh - 24px);
            overflow: auto;
        }

        .lesson-sidebar {
            padding: 12px;
        }

        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 14px;
        }

        button {
            font: inherit;
        }

        .btn {
            border: 0;
            min-height: 44px;
            padding: 0 15px;
            border-radius: 999px;
            background: linear-gradient(180deg, #3456d4, #263f9e);
            color: #fff;
            font-weight: 950;
            cursor: pointer;
            box-shadow: 0 6px 0 #172a72, 0 12px 22px rgba(38,63,158,.16);
        }

        .btn.green {
            background: linear-gradient(180deg, #22c55e, #159447);
            box-shadow: 0 6px 0 #0b6b39, 0 12px 22px rgba(22,163,74,.16);
        }

        .btn.light {
            background: #fff;
            color: #263f9e;
            border: 2px solid #dbe6ff;
            box-shadow: 0 6px 16px rgba(38,63,158,.08);
        }

        .scene {
            display: grid;
            gap: 7px;
        }

        .line {
            display: grid;
            grid-template-columns: 86px 1fr;
            gap: 8px;
            align-items: start;
            padding: 8px 10px;
            border-radius: 16px;
            border: 2px solid #e4ecff;
            background: #fff;
            transition: transform .18s ease, background .18s ease, border-color .18s ease;
        }

        .line.active {
            background: #fff7cc;
            border-color: rgba(245,158,11,.48);
            transform: scale(1.006);
            box-shadow: 0 8px 18px rgba(245,158,11,.10);
        }

        .speaker {
            display: grid;
            place-items: center;
            min-height: 38px;
            border-radius: 14px;
            background: #eef4ff;
            color: #172a72;
            font-weight: 1000;
            text-align: center;
            font-size: 14px;
        }

        .speaker.ana {
            background: #ffe4f0;
            color: #9d174d;
        }

        .speaker.carlos {
            background: #dff2ff;
            color: #075985;
        }

        .speaker.narrador {
            background: #fff7cc;
            color: #92400e;
        }

        .speaker.camarero,
        .speaker.pedro,
        .speaker.luis,
        .speaker.marta {
            background: #e7fbe8;
            color: #166534;
        }

        .line-content {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            min-width: 0;
            flex-wrap: wrap;
        }

        .line-speak-btn,
        .line-translate-btn {
            flex: 0 0 auto;
            width: 36px;
            height: 36px;
            border-radius: 14px;
            border: 2px solid #dbe6ff;
            background: #ffffff;
            color: #263f9e;
            cursor: pointer;
            font-size: 16px;
            font-weight: 1000;
            box-shadow: 0 5px 12px rgba(38,63,158,.08);
        }

        .line-translate-btn {
            width: 44px;
            font-size: 13px;
        }

        .line-speak-btn:hover,
        .line-translate-btn:hover {
            background: #eef4ff;
            transform: translateY(-1px);
        }

        .line-translation {
            display: none;
            flex: 1 0 100%;
            margin: 4px 0 0 44px;
            padding: 8px 10px;
            border-radius: 14px;
            background: #f0fdf4;
            border: 2px solid #bbf7d0;
            color: #166534;
            font-size: 15px;
            line-height: 1.35;
            font-weight: 850;
        }

        .line-translation.show {
            display: block;
        }

        .text {
            flex: 1 1 auto;
            min-width: 0;
            font-size: clamp(17px, 1.45vw, 21px);
            line-height: 1.28;
            font-weight: 820;
            color: #172a72;
        }

        .word {
            display: inline-block;
            padding: 1px 3px;
            border-radius: 8px;
            cursor: pointer;
        }

        .word:hover {
            background: #dbeafe;
        }

        .line.active .word {
            color: #111827;
        }

        .line.active .word.current {
            background: #263f9e;
            color: #fff;
        }

        .glossary-box {
            position: fixed;
            left: 50%;
            top: 50%;
            width: min(340px, 88vw);
            min-height: 76px;
            padding: 12px 14px;
            border-radius: 20px;
            background: #ffffff;
            border: 3px solid #dbe6ff;
            display: none;
            gap: 3px;
            z-index: 9999;
            box-shadow: 0 18px 42px rgba(15,23,42,.20);
        }

        .glossary-box.show {
            display: grid;
        }

        .glossary-box::before {
            content: "";
            position: absolute;
            left: -10px;
            top: 22px;
            width: 18px;
            height: 18px;
            background: #ffffff;
            border-left: 3px solid #dbe6ff;
            border-bottom: 3px solid #dbe6ff;
            transform: rotate(45deg);
        }

        .glossary-word {
            font-size: 22px;
            font-weight: 1000;
            color: #172a72;
        }

        .glossary-ro {
            font-size: 18px;
            font-weight: 850;
            color: #425fa4;
        }

        .glossary-actions {
            margin-top: 6px;
        }

        .exercise {
            margin-top: 14px;
            padding: 16px;
            border-radius: 24px;
            background: #fff;
            border: 2px solid #e4ecff;
            box-shadow: inset 0 0 0 1px rgba(219,230,255,.45);
        }

        .exercise h2 {
            margin: 0 0 10px;
            font-size: 25px;
        }

        .quiz-actions {
            display: flex;
            flex-wrap: nowrap;
            gap: 9px;
            margin: 0 0 12px;
            align-items: center;
        }

        .quiz-actions .btn,
        .quiz-actions .answer-mode-btn {
            min-height: 42px;
            white-space: nowrap;
        }

        .quiz-progress {
            margin: 0 0 8px;
            font-size: 15px;
            font-weight: 950;
            color: #425fa4;
        }

        .answer-mode-toggle {
            display: contents;
        }

        .answer-mode-btn {
            border: 2px solid #dbe6ff;
            background: #ffffff;
            color: #263f9e;
            border-radius: 999px;
            min-height: 42px;
            padding: 0 14px;
            font-weight: 950;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(38,63,158,.08);
        }

        .answer-mode-btn.active {
            background: linear-gradient(180deg, #3456d4, #263f9e);
            color: #fff;
            border-color: #263f9e;
        }

        .answer-mode-btn:disabled {
            opacity: .45;
            cursor: not-allowed;
            box-shadow: none;
        }

        .speak-answer-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 8px 0 12px;
        }

        .speak-answer-btn {
            border: 0;
            border-radius: 999px;
            min-height: 46px;
            padding: 0 18px;
            background: linear-gradient(180deg, #ff7a59, #e94b35);
            color: #fff;
            font-size: 17px;
            font-weight: 1000;
            cursor: pointer;
            box-shadow: 0 6px 0 #ad2f22, 0 12px 22px rgba(233,75,53,.16);
        }

        .speak-answer-btn.listening {
            background: linear-gradient(180deg, #21b573, #12864f);
            box-shadow: 0 6px 0 #0b5b36, 0 12px 22px rgba(18,134,79,.16);
        }

        .speech-status {
            min-height: 24px;
            font-weight: 850;
            color: #435174;
        }

        .question-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 12px;
        }

        .question {
            flex: 1 1 auto;
            min-width: 0;
            font-size: 21px;
            font-weight: 900;
            color: #172a72;
            margin-bottom: 0;
        }

        .question-listen-btn {
            flex: 0 0 auto;
            width: 44px;
            height: 44px;
            border-radius: 16px;
            border: 2px solid #dbe6ff;
            background: #ffffff;
            color: #263f9e;
            cursor: pointer;
            font-size: 20px;
            font-weight: 1000;
            box-shadow: 0 5px 12px rgba(38,63,158,.08);
        }

        .question-listen-btn:hover {
            background: #eef4ff;
            transform: translateY(-1px);
        }

        .options {
            display: none;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        .options.show {
            display: grid;
        }

        .option {
            min-height: 82px;
            border-radius: 22px;
            border: 3px solid #dbe6ff;
            background: #fff;
            font-size: 19px;
            line-height: 1.16;
            font-weight: 1000;
            color: #172a72;
            cursor: pointer;
            padding: 8px;
        }

        .option.correct {
            background: #dcfce7;
            border-color: #16a34a;
        }

        .option.wrong {
            background: #fee2e2;
            border-color: #dc2626;
        }

        .option.spoken-good {
            background: #d9fbe8 !important;
            border-color: #20a35b !important;
            color: #07522b !important;
        }

        .option.spoken-wrong-answer {
            background: #fff4c2 !important;
            border-color: #f3b51b !important;
            color: #6d4a00 !important;
        }

        .option.spoken-unclear {
            background: #ffe0e0 !important;
            border-color: #e54545 !important;
            color: #7c1616 !important;
        }

        .feedback {
            margin-top: 10px;
            min-height: 44px;
            padding: 10px 12px;
            border-radius: 18px;
            background: #eef4ff;
            font-weight: 950;
            color: #263f9e;
        }

        .conversation-practice {
            display: none;
            margin-bottom: 14px;
            padding: 14px;
            border-radius: 24px;
            background: #ffffff;
            border: 2px solid #e4ecff;
            box-shadow: 0 10px 24px rgba(31,58,147,.08);
        }

        .conversation-practice.show {
            display: block;
        }

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

        .practice-head h2 {
            margin: 0;
            font-size: 24px;
            color: #172a72;
        }

        .practice-note {
            margin: 4px 0 0;
            color: #425fa4;
            font-size: 14px;
            font-weight: 800;
        }

        .practice-rule {
            padding: 10px 12px;
            border-radius: 16px;
            background: #fff7cc;
            border: 2px solid rgba(245,158,11,.32);
            color: #92400e;
            font-size: 14px;
            font-weight: 900;
            margin-bottom: 12px;
        }

        .practice-list {
            display: grid;
            gap: 9px;
        }

        .practice-row {
            display: grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto auto;
            gap: 8px;
            align-items: center;
            padding: 10px;
            border-radius: 18px;
            background: #f8fbff;
            border: 2px solid #e4ecff;
        }

        .practice-question {
            font-size: 16px;
            line-height: 1.25;
            font-weight: 950;
            color: #172a72;
        }

        .practice-answer {
            font-size: 16px;
            line-height: 1.25;
            font-weight: 900;
            color: #166534;
            background: #f0fdf4;
            border: 2px solid #bbf7d0;
            border-radius: 14px;
            padding: 8px 10px;
        }

        .practice-mini-btn {
            min-height: 38px;
            padding: 0 12px;
            border: 0;
            border-radius: 999px;
            background: #ffffff;
            color: #263f9e;
            border: 2px solid #dbe6ff;
            font-size: 13px;
            font-weight: 950;
            cursor: pointer;
            box-shadow: 0 5px 12px rgba(38,63,158,.08);
            white-space: nowrap;
        }

        .practice-mini-btn.mic {
            background: linear-gradient(180deg, #ff7a59, #e94b35);
            color: #fff;
            border-color: #e94b35;
        }

        .practice-feedback {
            grid-column: 1 / -1;
            display: none;
            padding: 8px 10px;
            border-radius: 14px;
            font-size: 14px;
            font-weight: 900;
        }

        .practice-feedback.good {
            display: block;
            background: #dcfce7;
            color: #166534;
        }

        .practice-feedback.bad {
            display: block;
            background: #fee2e2;
            color: #991b1b;
        }

        .practice-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }

        .practice-tab {
            border: 2px solid #dbe6ff;
            background: #ffffff;
            color: #263f9e;
            border-radius: 999px;
            min-height: 38px;
            padding: 0 12px;
            font-size: 13px;
            font-weight: 950;
            cursor: pointer;
        }

        .practice-tab.active {
            background: linear-gradient(180deg, #3456d4, #263f9e);
            color: #ffffff;
            border-color: #263f9e;
        }

        .practice-model,
        .practice-current {
            border-radius: 18px;
            border: 2px solid #e4ecff;
            background: #ffffff;
            padding: 12px;
            margin-bottom: 10px;
        }

        .practice-model {
            background: #fff7cc;
            border-color: rgba(245,158,11,.40);
        }

        .practice-label {
            display: inline-flex;
            margin-bottom: 7px;
            padding: 5px 9px;
            border-radius: 999px;
            background: #eef4ff;
            color: #263f9e;
            font-size: 12px;
            font-weight: 1000;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .practice-q {
            font-size: 18px;
            font-weight: 950;
            color: #172a72;
            line-height: 1.3;
            margin-bottom: 8px;
        }

        .practice-a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            border-radius: 15px;
            background: #f0fdf4;
            border: 2px solid #bbf7d0;
            padding: 9px 11px;
            color: #166534;
            font-size: 17px;
            font-weight: 950;
            line-height: 1.3;
        }

        .practice-a.blank {
            color: #94a3b8;
            background: #f8fafc;
            border-color: #dbe6ff;
            letter-spacing: .08em;
        }

        .practice-current-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .practice-step {
            color: #425fa4;
            font-size: 14px;
            font-weight: 900;
            margin-bottom: 8px;
        }

        .practice-complete {
            border-radius: 18px;
            background: #dcfce7;
            border: 2px solid #86efac;
            color: #166534;
            padding: 12px;
            font-weight: 950;
        }

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

            .layout {
                grid-template-columns: 1fr;
            }

            .episode-panel,
            .lesson-sidebar {
                position: static;
                max-height: none;
                overflow: visible;
            }

            .options {
                grid-template-columns: 1fr;
            }

            .lesson-grid {
                grid-template-columns: 1fr;
            }

            .glossary-box {
                left: 4vw !important;
                right: 4vw !important;
                bottom: 12px !important;
                top: auto !important;
                width: auto;
            }

            .glossary-box::before {
                display: none;
            }
        }

/* === SPANIOLA_UI_COMPACT_GLOBAL_START === */

/* Patch global compact:
   - sidebar stânga mai îngust
   - RO lângă difuzor
   - fonturi mai mici în lecție
   - fără modificări JS / logică
*/

:root {
    --pn-left-col: 205px;
    --pn-right-col: 285px;
    --pn-font-lesson: 14px;
    --pn-font-lesson-lg: 15px;
    --pn-font-chip: 12px;
    --pn-font-small: 11px;
    --pn-radius-card: 16px;
    --pn-radius-chip: 12px;
}

/* coloana stânga mai îngustă */
.sidebar-left,
.categories-sidebar,
.categories-panel,
.left-panel {
    width: var(--pn-left-col) !important;
    min-width: var(--pn-left-col) !important;
    max-width: var(--pn-left-col) !important;
    flex: 0 0 var(--pn-left-col) !important;
}

/* coloana dreapta ușor controlată */
.sidebar-right,
.right-panel,
.lesson-list-panel {
    width: var(--pn-right-col) !important;
    min-width: 260px !important;
    max-width: var(--pn-right-col) !important;
    flex: 0 0 var(--pn-right-col) !important;
}

/* carduri categorii / listă mai compacte */
.category-step,
.map-step,
.lesson-step,
.lesson-list button,
.category-list button {
    font-size: 13px !important;
    line-height: 1.18 !important;
    padding: 9px 11px !important;
    min-height: 38px !important;
    border-radius: 14px !important;
}

.category-step small,
.map-step small,
.lesson-step small {
    font-size: 11px !important;
    line-height: 1.05 !important;
}

/* fonturi lecție mai mici */
.scene-card,
.story-card,
.dialog-card,
.line-card,
.lesson-line-card,
.lesson-line,
.line-text,
.dialog-line,
.scene-text,
.speaker-line {
    font-size: var(--pn-font-lesson) !important;
    line-height: 1.38 !important;
    border-radius: var(--pn-radius-card) !important;
}

/* text principal din replici puțin mai mic decât înainte */
.scene-text,
.line-text,
.dialog-line,
.speaker-line {
    font-size: var(--pn-font-lesson-lg) !important;
    line-height: 1.42 !important;
    letter-spacing: 0.01em !important;
}

/* chip nume vorbitor mai discret */
.speaker,
.speaker-name,
.line-speaker,
.role-badge {
    font-size: var(--pn-font-chip) !important;
    line-height: 1.05 !important;
    padding: 6px 10px !important;
    border-radius: var(--pn-radius-chip) !important;
}

/* butoane mici */
button,
.audio-btn,
.listen-btn,
.practice-mini-btn,
.speaker-btn,
.translate-btn,
.translation-btn,
.ro-btn,
.lang-btn {
    font-size: 12px !important;
    line-height: 1.1 !important;
    border-radius: 999px !important;
}

/* -------------------------------------------------
   REPLICI: RO lângă difuzor
   ------------------------------------------------- */

/* containerul replicii devine flexibil și compact */
.scene-card,
.story-card,
.dialog-card,
.line-card,
.lesson-line-card {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px 8px !important;
    padding: 12px 14px !important;
}

/* ordinea elementelor în header */
.scene-card .speaker,
.story-card .speaker,
.dialog-card .speaker,
.line-card .speaker,
.lesson-line-card .speaker,
.scene-card .speaker-name,
.story-card .speaker-name,
.dialog-card .speaker-name,
.line-card .speaker-name,
.lesson-line-card .speaker-name,
.scene-card .line-speaker,
.story-card .line-speaker,
.dialog-card .line-speaker,
.line-card .line-speaker,
.lesson-line-card .line-speaker,
.scene-card .role-badge,
.story-card .role-badge,
.dialog-card .role-badge,
.line-card .role-badge,
.lesson-line-card .role-badge {
    order: 1 !important;
    flex: 0 0 auto !important;
}

.scene-card .audio-btn,
.story-card .audio-btn,
.dialog-card .audio-btn,
.line-card .audio-btn,
.lesson-line-card .audio-btn,
.scene-card .listen-btn,
.story-card .listen-btn,
.dialog-card .listen-btn,
.line-card .listen-btn,
.lesson-line-card .listen-btn,
.scene-card .speaker-btn,
.story-card .speaker-btn,
.dialog-card .speaker-btn,
.line-card .speaker-btn,
.lesson-line-card .speaker-btn {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
}

.scene-card .translate-btn,
.story-card .translate-btn,
.dialog-card .translate-btn,
.line-card .translate-btn,
.lesson-line-card .translate-btn,
.scene-card .translation-btn,
.story-card .translation-btn,
.dialog-card .translation-btn,
.line-card .translation-btn,
.lesson-line-card .translation-btn,
.scene-card .ro-btn,
.story-card .ro-btn,
.dialog-card .ro-btn,
.line-card .ro-btn,
.lesson-line-card .ro-btn,
.scene-card .lang-btn,
.story-card .lang-btn,
.dialog-card .lang-btn,
.line-card .lang-btn,
.lesson-line-card .lang-btn {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    align-self: center !important;
}

/* textul trece dedesubt și ocupă toată lățimea utilă */
.scene-card .scene-text,
.story-card .scene-text,
.dialog-card .scene-text,
.line-card .scene-text,
.lesson-line-card .scene-text,
.scene-card .line-text,
.story-card .line-text,
.dialog-card .line-text,
.line-card .line-text,
.lesson-line-card .line-text,
.scene-card .dialog-line,
.story-card .dialog-line,
.dialog-card .dialog-line,
.line-card .dialog-line,
.lesson-line-card .dialog-line,
.scene-card .speaker-line,
.story-card .speaker-line,
.dialog-card .speaker-line,
.line-card .speaker-line,
.lesson-line-card .speaker-line,
.scene-card .lesson-line,
.story-card .lesson-line,
.dialog-card .lesson-line,
.line-card .lesson-line,
.lesson-line-card .lesson-line {
    order: 4 !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
}

/* dacă există buton RO izolat pe rând separat, îl compactăm */
.translate-btn,
.translation-btn,
.ro-btn,
.lang-btn {
    padding: 6px 10px !important;
    min-height: 30px !important;
}

/* blocuri practică puțin mai compacte */
.practice-tab {
    font-size: 12px !important;
    line-height: 1.18 !important;
    padding: 7px 11px !important;
    min-height: 32px !important;
}

.practice-q {
    font-size: 15px !important;
    line-height: 1.32 !important;
}

.practice-a {
    font-size: 14px !important;
    line-height: 1.32 !important;
    padding: 8px 10px !important;
}

.grammar-box,
.practice-rule,
.grammar-note {
    font-size: 12px !important;
    line-height: 1.3 !important;
    padding: 9px 11px !important;
}

/* responsive */
@media (max-width: 1200px) {
    .sidebar-left,
    .categories-sidebar,
    .categories-panel,
    .left-panel {
        width: 185px !important;
        min-width: 185px !important;
        max-width: 185px !important;
        flex-basis: 185px !important;
    }

    .sidebar-right,
    .right-panel,
    .lesson-list-panel {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
        flex-basis: 250px !important;
    }
}

/* === SPANIOLA_UI_COMPACT_GLOBAL_END === */

/* === SPANIOLA_LINE_REAL_LAYOUT_START === */
/* Corecție pe structura reală:
   .line -> .speaker + .line-content -> .line-speak-btn + .text + .line-translate-btn + .line-translation
   Obiectiv: RO lângă difuzor, text mai mic, carduri mai compacte. */

.line {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    padding: 9px 12px !important;
    margin: 7px 0 !important;
    border-radius: 14px !important;
    min-height: 0 !important;
}

.line .speaker,
.line > .speaker {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    border-radius: 10px !important;
    align-self: start !important;
}

/* Reordonare reală: difuzor + RO + text pe același rând */
.line-content {
    display: grid !important;
    grid-template-columns: 34px 34px minmax(0, 1fr) !important;
    grid-template-areas:
        "audio ro text"
        "translation translation translation" !important;
    align-items: start !important;
    column-gap: 7px !important;
    row-gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.line-speak-btn {
    grid-area: audio !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
}

.line-translate-btn {
    grid-area: ro !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
}

.line-content .text,
.line .text {
    grid-area: text !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 2px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.34 !important;
    letter-spacing: 0 !important;
}

/* Cuvintele clickabile moștenesc fontul mai mic. */
.line .text span,
.line-content .text span,
.line .word,
.line-content .word {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Traducerea apare sub text/butoane, compactă. */
.line-translation {
    grid-area: translation !important;
    width: 100% !important;
    margin: 3px 0 0 !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
    border-radius: 11px !important;
}

/* Cardurile mari de replică nu mai cresc exagerat la replici mai lungi. */
.line.active {
    box-shadow: 0 6px 16px rgba(30, 48, 150, 0.12) !important;
}

/* Blocul de înțelegere poveste compactat. */
.story-quiz,
.questions-card,
.understanding-card,
#questionsArea,
#questionBox {
    padding: 12px 14px !important;
    border-radius: 15px !important;
}

.story-quiz h2,
.questions-card h2,
.understanding-card h2 {
    font-size: 18px !important;
    line-height: 1.2 !important;
}

/* Ajustare pe ecrane mai înguste. */
@media (max-width: 1100px) {
    .line {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        padding: 8px 10px !important;
    }

    .line .speaker,
    .line > .speaker {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        font-size: 10.5px !important;
    }

    .line-content {
        grid-template-columns: 30px 30px minmax(0, 1fr) !important;
        column-gap: 6px !important;
    }

    .line-speak-btn,
    .line-translate-btn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }

    .line-content .text,
    .line .text {
        font-size: 13.5px !important;
    }
}

/* === SPANIOLA_LINE_REAL_LAYOUT_END === */

/* === SPANIOLA_DENSITY_TUNING_START === */
/* Micro-tuning vizual:
   - sidebar stânga mai îngust
   - carduri categorie mai înguste/joase
   - replici mai apropiate vertical
   - carduri .line mai joase
   - fără modificări JS */

:root {
    --pn-left-col: 170px;
    --pn-right-col: 275px;
}

/* 1. Coloana stângă mai îngustă */
.sidebar-left,
.categories-sidebar,
.categories-panel,
.left-panel {
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
    flex: 0 0 170px !important;
}

/* Containerul alb al categoriilor să nu rămână lat din CSS vechi */
.sidebar-left > *,
.categories-sidebar > *,
.categories-panel > *,
.left-panel > * {
    max-width: 170px !important;
}

/* Titlul "Categorii" mai compact */
.sidebar-left h2,
.categories-sidebar h2,
.categories-panel h2,
.left-panel h2 {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
}

/* Carduri categorie mai înguste și mai joase */
.category-step,
.category-list button {
    width: 100% !important;
    max-width: 150px !important;
    min-height: 34px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
    border-radius: 12px !important;
    margin-bottom: 7px !important;
}

.category-step small,
.category-list button small {
    font-size: 10px !important;
    line-height: 1.05 !important;
}

/* 2. Replici mai apropiate vertical */
.line {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 3px !important;
    padding: 6px 10px !important;
    margin: 4px 0 !important;
    border-radius: 12px !important;
    min-height: 42px !important;
}

/* Personaj mai mic */
.line .speaker,
.line > .speaker {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding: 5px 7px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    border-radius: 9px !important;
}

/* 3. Conținut replică: butoane mici + text jos compact */
.line-content {
    grid-template-columns: 28px 28px minmax(0, 1fr) !important;
    column-gap: 6px !important;
    row-gap: 3px !important;
    align-items: center !important;
}

.line-speak-btn,
.line-translate-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.line-speak-btn {
    font-size: 12px !important;
}

.line-translate-btn {
    font-size: 10px !important;
    font-weight: 800 !important;
}

/* Text replică mai mic și fără spațiu vertical inutil */
.line-content .text,
.line .text {
    font-size: 13px !important;
    line-height: 1.24 !important;
    padding: 0 !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}

/* Cuvinte clickabile identice cu textul */
.line .text span,
.line-content .text span,
.line .word,
.line-content .word {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Traducerea mai compactă când este deschisă */
.line-translation {
    margin: 2px 0 0 !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    border-radius: 9px !important;
}

/* Micșorăm spațiile mari între secțiuni de lecție */
.lesson-content,
.lesson-shell,
.main-content,
.center-panel {
    row-gap: 8px !important;
    gap: 8px !important;
}

/* Cardul "Înțeleg povestea" mai compact */
.story-quiz,
.questions-card,
.understanding-card,
#questionsArea,
#questionBox {
    padding: 10px 12px !important;
    margin-top: 10px !important;
    border-radius: 14px !important;
}

.story-quiz h2,
.questions-card h2,
.understanding-card h2 {
    font-size: 17px !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
}

/* Butoanele din zona "Înțeleg povestea" mai mici */
.story-quiz button,
.questions-card button,
.understanding-card button,
#questionsArea button,
#questionBox button {
    font-size: 12px !important;
    padding: 8px 12px !important;
    min-height: 34px !important;
}

/* Right panel rămâne compact */
.sidebar-right,
.right-panel,
.lesson-list-panel {
    width: 275px !important;
    min-width: 260px !important;
    max-width: 275px !important;
    flex: 0 0 275px !important;
}

/* Pe ecrane mai mici, strângem și mai mult stânga */
@media (max-width: 1200px) {
    .sidebar-left,
    .categories-sidebar,
    .categories-panel,
    .left-panel {
        width: 155px !important;
        min-width: 155px !important;
        max-width: 155px !important;
        flex-basis: 155px !important;
    }

    .sidebar-left > *,
    .categories-sidebar > *,
    .categories-panel > *,
    .left-panel > * {
        max-width: 155px !important;
    }

    .category-step,
    .category-list button {
        max-width: 137px !important;
        font-size: 11.5px !important;
        padding: 7px 9px !important;
    }

    .line {
        grid-template-columns: 76px minmax(0, 1fr) !important;
        padding: 5px 9px !important;
        margin: 3px 0 !important;
    }

    .line .speaker,
    .line > .speaker {
        width: 66px !important;
        min-width: 66px !important;
        max-width: 66px !important;
        font-size: 10px !important;
    }

    .line-content .text,
    .line .text {
        font-size: 12.5px !important;
        line-height: 1.22 !important;
    }
}

/* === SPANIOLA_DENSITY_TUNING_END === */

/* === SPANIOLA_STORY_QUESTION_2_CARDS_START === */
/* Zona „Înțeleg povestea” în două carduri:
   stânga = control, dreapta = status/întrebare/explicații.
   Nu schimbă logica întrebărilor. */

.story-question-layout {
    display: grid !important;
    grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1.15fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 10px !important;
    border-radius: 16px !important;
}

.story-question-controls-card,
.story-question-status-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(120, 150, 240, 0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(20, 35, 90, 0.06) !important;
    padding: 12px !important;
    min-width: 0 !important;
}

.story-question-controls-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}

.story-question-status-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    justify-content: flex-start !important;
}

.story-question-controls-card h2,
.story-question-controls-card h3 {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 0 0 4px !important;
}

.story-question-controls-card .quiz-actions,
.story-question-controls-card .answer-mode-toggle,
.story-question-controls-card .speak-answer-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
}

.story-question-controls-card .btn,
.story-question-controls-card .answer-mode-btn,
.story-question-controls-card .speak-answer-btn {
    font-size: 12px !important;
    line-height: 1.1 !important;
    padding: 8px 11px !important;
    min-height: 34px !important;
    border-radius: 999px !important;
}

.story-question-controls-card .speak-answer-row {
    align-items: center !important;
}

.story-question-controls-card .speak-answer-row span,
.story-question-controls-card .speech-status,
.story-question-controls-card #speechStatus {
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.story-question-status-card .quiz-progress {
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    margin: 0 !important;
}

.story-question-status-card .question-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
}

.story-question-status-card .question {
    font-size: 15px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.story-question-status-card .question-listen-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border-radius: 999px !important;
}

.story-question-status-card .quiz-feedback,
.story-question-status-card .question-feedback {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.story-question-status-card .option {
    font-size: 12px !important;
    line-height: 1.2 !important;
    padding: 8px 10px !important;
    min-height: 32px !important;
    border-radius: 12px !important;
}

.story-question-status-card .question-options,
.story-question-status-card .options {
    gap: 7px !important;
    margin-top: 4px !important;
}

/* Fallback pentru elementele vechi, dacă browserul păstrează clasele inițiale. */
.story-quiz,
.questions-card,
.understanding-card,
#questionsArea,
#questionBox {
    padding: 8px !important;
}

@media (max-width: 900px) {
    .story-question-layout {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* === SPANIOLA_STORY_QUESTION_2_CARDS_END === */

/* === SPANIOLA_CONTROLS_AND_LINE_DENSITY_START === */
/* Micro-patch:
   1. Înțeleg povestea: 3 butoane principale pe primul rând.
   2. Spun răspunsul pe rândul al doilea.
   3. Replici mult mai compacte.
   4. Fără modificări JS. */

/* --------------------------------------------------
   A. ÎNȚELEG POVESTEA — CONTROALE PE RÂNDURI CLARE
   -------------------------------------------------- */

.story-question-controls-card {
    gap: 7px !important;
    padding: 9px 10px !important;
}

/* Titlul rămâne sus, compact */
.story-question-controls-card h2,
.story-question-controls-card h3 {
    font-size: 17px !important;
    line-height: 1.1 !important;
    margin: 0 0 4px !important;
}

/* Cele 3 controale principale pe același rând:
   .quiz-actions = Încep întrebările
   .answer-mode-toggle = Fără/Cu răspuns scris */
.story-question-controls-card {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
        "title title"
        "start modes"
        "speak speak" !important;
    align-items: start !important;
    column-gap: 8px !important;
    row-gap: 7px !important;
}

.story-question-controls-card h2,
.story-question-controls-card h3 {
    grid-area: title !important;
}

.story-question-controls-card .quiz-actions {
    grid-area: start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 !important;
}

.story-question-controls-card .answer-mode-toggle {
    grid-area: modes !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 !important;
    min-width: 0 !important;
}

/* Spun răspunsul + explicație pe al doilea rând */
.story-question-controls-card .speak-answer-row {
    grid-area: speak !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 0 !important;
}

/* Butoanele din zona control — mai mici, dar lizibile */
.story-question-controls-card .btn,
.story-question-controls-card .answer-mode-btn,
.story-question-controls-card .speak-answer-btn {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    padding: 7px 10px !important;
    min-height: 31px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

/* Butonul verde start poate rămâne puțin mai puternic */
.story-question-controls-card .quiz-actions .btn {
    padding-left: 11px !important;
    padding-right: 11px !important;
}

/* Textul explicativ de lângă microfon */
.story-question-controls-card .speech-status,
.story-question-controls-card #speechStatus,
.story-question-controls-card .speak-answer-row span {
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* Cardul din dreapta mai compact */
.story-question-status-card {
    padding: 9px 10px !important;
    gap: 6px !important;
}

.story-question-status-card .quiz-progress {
    font-size: 12px !important;
    line-height: 1.15 !important;
}

.story-question-status-card .question {
    font-size: 14px !important;
    line-height: 1.25 !important;
}

.story-question-status-card .quiz-feedback,
.story-question-status-card .question-feedback {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
}

/* Zona externă nu mai consumă padding mare */
.story-question-layout {
    gap: 9px !important;
    padding: 7px !important;
}

/* --------------------------------------------------
   B. REPLICI — ELIMINARE SPAȚIU VERTICAL EXCESIV
   -------------------------------------------------- */

/* Rândul replicii: foarte compact */
.line {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    padding: 4px 8px !important;
    margin: 2px 0 !important;
    border-radius: 10px !important;
    min-height: 34px !important;
}

/* Chip personaj foarte compact */
.line .speaker,
.line > .speaker {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    padding: 4px 5px !important;
    font-size: 9.8px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
}

/* Conținut replică: butoane + text foarte dense */
.line-content {
    grid-template-columns: 25px 25px minmax(0, 1fr) !important;
    column-gap: 5px !important;
    row-gap: 0 !important;
    align-items: center !important;
    min-height: 0 !important;
}

/* Butoane difuzor și RO mai mici */
.line-speak-btn,
.line-translate-btn {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.line-speak-btn {
    font-size: 11px !important;
}

.line-translate-btn {
    font-size: 9.5px !important;
    font-weight: 800 !important;
}

/* Textul replicii mai compact */
.line-content .text,
.line .text {
    font-size: 12.2px !important;
    line-height: 1.18 !important;
    padding: 0 !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}

/* Cuvinte clickabile fără font separat */
.line .text span,
.line-content .text span,
.line .word,
.line-content .word {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Traducerea deschisă să nu umfle excesiv cardul */
.line-translation {
    margin: 2px 0 0 !important;
    padding: 5px 7px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
}

/* Micșorăm spațiile din containerul scenei, dacă există */
#scene,
.scene,
.lesson-scene {
    gap: 2px !important;
}

/* Reducere suplimentară pentru orice container central care aplică gap mare */
.lesson-content,
.lesson-shell,
.center-panel,
.main-content {
    gap: 6px !important;
    row-gap: 6px !important;
}

/* --------------------------------------------------
   C. RESPONSIVE
   -------------------------------------------------- */
@media (max-width: 1100px) {
    .story-question-controls-card {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "title"
            "start"
            "modes"
            "speak" !important;
    }

    .story-question-controls-card .quiz-actions,
    .story-question-controls-card .answer-mode-toggle {
        flex-wrap: wrap !important;
    }

    .line {
        grid-template-columns: 66px minmax(0, 1fr) !important;
        padding: 4px 7px !important;
        margin: 2px 0 !important;
    }

    .line .speaker,
    .line > .speaker {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        font-size: 9.5px !important;
    }

    .line-content .text,
    .line .text {
        font-size: 12px !important;
        line-height: 1.16 !important;
    }
}

/* === SPANIOLA_CONTROLS_AND_LINE_DENSITY_END === */

/* === SPANIOLA_STORY_QUESTION_LAYOUT_FIX_START === */
/* Reparare zona „Înțeleg povestea”:
   - card stânga lat pentru controale
   - card dreapta îngust pentru status/explicații
   - eliminare aspect de carduri imbricate exagerat
   - CSS only */

.story-question-layout {
    display: grid !important;
    grid-template-columns: minmax(430px, 1.75fr) minmax(230px, 0.75fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding: 6px !important;
    margin-top: 8px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

/* Cardul stâng: zona principală de acțiune */
.story-question-controls-card {
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(130,150,230,0.22) !important;

    display: grid !important;
    grid-template-columns: auto auto auto !important;
    grid-template-areas:
        "title title title"
        "start free hint"
        "speak speak speak" !important;
    column-gap: 7px !important;
    row-gap: 8px !important;
    align-items: center !important;
}

/* Cardul drept: doar explicații/status, îngust */
.story-question-status-card {
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(130,150,230,0.22) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

/* Titlul */
.story-question-controls-card h2,
.story-question-controls-card h3 {
    grid-area: title !important;
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
}

/* Containerul butonului Încep întrebările */
.story-question-controls-card .quiz-actions {
    grid-area: start !important;
    display: contents !important;
}

/* Containerul modurilor de răspuns */
.story-question-controls-card .answer-mode-toggle {
    display: contents !important;
}

/* Butoanele: mapare pe coloane */
.story-question-controls-card .quiz-actions .btn,
.story-question-controls-card .quiz-actions button {
    grid-area: start !important;
}

.story-question-controls-card .answer-mode-toggle button:nth-child(1),
.story-question-controls-card .answer-mode-toggle .answer-mode-btn:nth-child(1) {
    grid-area: free !important;
}

.story-question-controls-card .answer-mode-toggle button:nth-child(2),
.story-question-controls-card .answer-mode-toggle .answer-mode-btn:nth-child(2) {
    grid-area: hint !important;
}

/* Toate cele 3 butoane de sus egale și pe un singur rând */
.story-question-controls-card .btn,
.story-question-controls-card .answer-mode-btn {
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    padding: 8px 10px !important;
    min-height: 33px !important;
    border-radius: 999px !important;
    text-align: center !important;
}

/* Rândul Spun răspunsul */
.story-question-controls-card .speak-answer-row {
    grid-area: speak !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
}

.story-question-controls-card .speak-answer-btn {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    padding: 8px 12px !important;
    min-height: 33px !important;
    border-radius: 999px !important;
}

.story-question-controls-card .speech-status,
.story-question-controls-card #speechStatus,
.story-question-controls-card .speak-answer-row span {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

/* Dreapta: status / întrebare / explicații compacte */
.story-question-status-card .quiz-progress {
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    margin: 0 !important;
}

.story-question-status-card .question-row {
    margin: 0 !important;
    display: flex !important;
    gap: 6px !important;
    align-items: flex-start !important;
}

.story-question-status-card .question {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

.story-question-status-card .question-listen-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
}

.story-question-status-card .quiz-feedback,
.story-question-status-card .question-feedback {
    font-size: 12px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

/* Eliminăm efectul vizual de multe rame concentrice */
.story-question-layout .story-question-controls-card *,
.story-question-layout .story-question-status-card * {
    box-shadow: none;
}

/* Pe ecrane mai mici, trecem vertical, dar fără deformări */
@media (max-width: 950px) {
    .story-question-layout {
        grid-template-columns: 1fr !important;
    }

    .story-question-controls-card {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "title"
            "start"
            "free"
            "hint"
            "speak" !important;
    }
}

/* === SPANIOLA_STORY_QUESTION_LAYOUT_FIX_END === */

/* === SPANIOLA_PADDING_MINIM_START === */
/* Padding minim pentru zona deja validată vizual.
   CSS only. Nu schimbă JS/logica/audio. */

/* Zona externă Înțeleg povestea */
.story-question-layout {
    padding: 2px !important;
    gap: 5px !important;
    margin-top: 5px !important;
}

/* Cele două carduri interne */
.story-question-controls-card,
.story-question-status-card {
    padding: 6px 7px !important;
    border-radius: 10px !important;
}

/* Titlul și rândurile din cardul stâng */
.story-question-controls-card h2,
.story-question-controls-card h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
}

.story-question-controls-card {
    row-gap: 5px !important;
    column-gap: 5px !important;
}

/* Butoane control cât mai compacte */
.story-question-controls-card .btn,
.story-question-controls-card .answer-mode-btn,
.story-question-controls-card .speak-answer-btn {
    padding: 6px 9px !important;
    min-height: 29px !important;
    font-size: 11px !important;
}

/* Rând microfon */
.story-question-controls-card .speak-answer-row {
    gap: 5px !important;
    margin: 0 !important;
}

.story-question-controls-card .speech-status,
.story-question-controls-card #speechStatus,
.story-question-controls-card .speak-answer-row span {
    font-size: 11px !important;
    line-height: 1.15 !important;
}

/* Card dreapta: status/explicații cât mai compact */
.story-question-status-card {
    gap: 4px !important;
}

.story-question-status-card .quiz-progress,
.story-question-status-card .question,
.story-question-status-card .quiz-feedback,
.story-question-status-card .question-feedback {
    margin: 0 !important;
    padding: 0 !important;
}

.story-question-status-card .question {
    font-size: 12.5px !important;
    line-height: 1.18 !important;
}

.story-question-status-card .quiz-feedback,
.story-question-status-card .question-feedback {
    font-size: 11.5px !important;
    line-height: 1.18 !important;
}

.story-question-status-card .question-row {
    gap: 4px !important;
    margin: 0 !important;
}

/* Replici: padding aproape zero */
.line {
    padding: 2px 6px !important;
    margin: 1px 0 !important;
    min-height: 28px !important;
    border-radius: 8px !important;
    column-gap: 5px !important;
}

.line .speaker,
.line > .speaker {
    padding: 3px 4px !important;
    font-size: 9.2px !important;
    border-radius: 7px !important;
}

.line-content {
    column-gap: 4px !important;
    row-gap: 0 !important;
}

.line-speak-btn,
.line-translate-btn {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
}

.line-content .text,
.line .text {
    font-size: 11.8px !important;
    line-height: 1.14 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.line-translation {
    padding: 4px 6px !important;
    margin-top: 1px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
}

/* Container scene: aproape fără distanță între replici */
#scene,
.scene,
.lesson-scene {
    gap: 0 !important;
}

/* === SPANIOLA_PADDING_MINIM_END === */

/* === SPANIOLA_PADDING_FONT_TUNE_START === */
/* Micro-patch final:
   - padding mai mic
   - fonturi puțin mai mari
   - fără schimbări JS / logică
*/

/* 1. Fonturi generale în lecție */
:root {
    --pn-font-lesson: 15px;
    --pn-font-lesson-lg: 16px;
    --pn-font-small: 12px;
}

/* 2. Carduri replici / rânduri lecție - mai dense */
.line,
.story-line,
.dialogue-line,
.episode-line,
.lesson-line,
.conversation-line,
[data-role="line"] {
    padding: 3px 8px !important;
    margin: 2px 0 !important;
    min-height: auto !important;
    border-radius: 12px !important;
}

/* 3. Conținutul textului din replici - puțin mai mare */
.line-text,
.story-line-text,
.dialogue-line-text,
.episode-line-text,
.lesson-line-text,
.conversation-line-text,
.line-content,
.story-content,
.dialogue-content,
[data-role="line-text"] {
    font-size: 15px !important;
    line-height: 1.28 !important;
}

/* 4. Badge personaj / difuzor / traducere - compacte */
.line-speaker,
.story-speaker,
.dialogue-speaker,
.episode-speaker,
.speaker-badge,
.character-badge,
[data-role="speaker"] {
    padding: 2px 8px !important;
    min-height: auto !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    border-radius: 10px !important;
}

.line-audio-btn,
.story-audio-btn,
.dialogue-audio-btn,
.episode-audio-btn,
.audio-btn,
[data-role="audio-btn"] {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
}

.line-translate-btn,
.story-translate-btn,
.dialogue-translate-btn,
.episode-translate-btn,
.translate-btn,
[data-role="translate-btn"] {
    min-width: 30px !important;
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
}

/* 5. Cardurile mari de poveste - padding minim */
.story-card,
.story-panel,
.lesson-card,
.dialog-card,
.conversation-card,
[data-role="story-card"] {
    padding: 6px 8px !important;
}

/* 6. Zona "Înțeleg povestea" - puțin mai aerisită, dar strânsă */
.story-question-layout {
    gap: 8px !important;
    margin-top: 6px !important;
}

.story-question-controls-card {
    padding: 6px 8px !important;
    border-radius: 14px !important;
}

.story-question-status-card {
    padding: 6px 8px !important;
    border-radius: 14px !important;
}

.story-question-controls-card h3,
.story-question-controls-card h2,
.story-question-status-card h3,
.story-question-status-card h2 {
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin: 0 0 4px 0 !important;
}

.story-question-controls-card p,
.story-question-status-card p,
.story-question-status-card .questionProgress,
.story-question-status-card .question-feedback {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin: 2px 0 !important;
}

/* 7. Butoane - puțin mai lizibile */
.story-question-controls-card button,
.story-question-status-card button,
.practice-controls button,
.story-controls button {
    font-size: 13px !important;
    line-height: 1.1 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* 8. Micșorăm spațiile interne în blocul de butoane */
.story-question-controls-card .button-row,
.story-question-controls-card .controls-row,
.story-question-controls-card .quiz-actions,
.story-question-controls-card .answer-mode-toggle,
.story-question-controls-card .speak-answer-row {
    gap: 6px !important;
    margin: 4px 0 !important;
}

/* 9. Sidebar stânga - lăsăm compact, fără alte schimbări mari */
:root {
    --pn-left-col: 185px;
}

/* === SPANIOLA_PADDING_FONT_TUNE_END === */

/* === SPANIOLA_CATEGORIES_PRACTICE_COMPACT_START === */
/* CSS only:
   1. Cardul mare al meniului Categorii se strânge pe conținut.
   2. Primul card .practice-model este ascuns.
   3. .practice-current este comprimat vizual în 2 rânduri. */

/* --------------------------------------------------
   1. MENIU CATEGORII — CARD ALB MAI ÎNGUST
   -------------------------------------------------- */

.sidebar-left,
.categories-sidebar,
.categories-panel,
.left-panel {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    flex: 0 0 160px !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important;
}

.sidebar-left > *,
.categories-sidebar > *,
.categories-panel > *,
.left-panel > * {
    max-width: 140px !important;
    box-sizing: border-box !important;
}

.sidebar-left h2,
.categories-sidebar h2,
.categories-panel h2,
.left-panel h2 {
    font-size: 17px !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
}

.category-step,
.category-list button {
    max-width: 140px !important;
    width: 140px !important;
    min-height: 32px !important;
    padding: 7px 9px !important;
    margin-bottom: 7px !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
    border-radius: 12px !important;
}

.category-step small,
.category-list button small {
    font-size: 9.8px !important;
    line-height: 1 !important;
}

/* --------------------------------------------------
   2. EXERSEAZĂ CONVERSAȚIA — ASCUNDEM MODELUL INUTIL
   -------------------------------------------------- */

/* Cardul de model este redundant: structura reală se exersează în practice-current. */
.practice-model {
    display: none !important;
}

/* Regula rămâne vizibilă, dar compactă. */
.practice-rule {
    font-size: 12px !important;
    line-height: 1.22 !important;
    padding: 7px 9px !important;
    margin: 6px 0 !important;
    border-radius: 10px !important;
}

/* --------------------------------------------------
   3. EXERCIȚIUL CURENT — 2 RÂNDURI VIZUALE
   -------------------------------------------------- */

.practice-current {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    grid-template-areas:
        "label step question"
        "answer answer actions"
        "feedback feedback feedback" !important;
    align-items: center !important;
    gap: 6px 8px !important;
    padding: 8px 10px !important;
    margin-top: 7px !important;
    border-radius: 13px !important;
    min-height: 0 !important;
}

/* Rândul 1: etichetă + progres + întrebare */
.practice-current > .practice-label {
    grid-area: label !important;
    margin: 0 !important;
    padding: 5px 7px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

.practice-current > .practice-step {
    grid-area: step !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

.practice-current > .practice-q {
    grid-area: question !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
}

/* Rândul 2: răspuns + acțiuni */
.practice-current > .practice-a {
    grid-area: answer !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    min-height: 30px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    border-radius: 10px !important;
}

.practice-current > .practice-current-actions {
    grid-area: actions !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.practice-current .practice-mini-btn {
    padding: 7px 9px !important;
    min-height: 30px !important;
    font-size: 11.2px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
}

/* Feedback rămâne sub cele 2 rânduri doar când apare. */
.practice-current > .practice-feedback,
.practice-current > #practiceFeedbackCurrent {
    grid-area: feedback !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

/* Dacă feedback-ul e gol, nu ocupă spațiu. */
.practice-current > .practice-feedback:empty,
.practice-current > #practiceFeedbackCurrent:empty {
    display: none !important;
}

/* Pe ecrane mai înguste, nu stricăm layoutul. */
@media (max-width: 1050px) {
    .practice-current {
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-areas:
            "label step"
            "question question"
            "answer answer"
            "actions actions"
            "feedback feedback" !important;
    }

    .practice-current > .practice-current-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
}

/* === SPANIOLA_CATEGORIES_PRACTICE_COMPACT_END === */

/* === SPANIOLA_FIX_PRACTICE_MODEL_RULE_START === */
/* Corecție:
   - ascundem primul card inutil: .practice-rule
   - reafișăm al doilea card: .practice-model
   - .practice-model devine compact, în 2 rânduri vizuale
   - nu modificăm JS/logica */

/* 1. Primul card/regulă este inutil vizual */
.practice-rule {
    display: none !important;
}

/* 2. Al doilea card de model trebuie să rămână vizibil */
.practice-model {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
        "label question"
        "label answer" !important;
    align-items: center !important;
    gap: 6px 8px !important;
    padding: 7px 9px !important;
    margin: 6px 0 7px !important;
    border-radius: 12px !important;
    min-height: 0 !important;
}

/* Eticheta MODEL în stânga, comună pentru cele 2 rânduri */
.practice-model > .practice-label {
    grid-area: label !important;
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 8px !important;
    margin: 0 !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

/* Rândul 1: întrebarea model */
.practice-model > .practice-q {
    grid-area: question !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
}

/* Rândul 2: răspunsul model + butonul audio */
.practice-model > .practice-a {
    grid-area: answer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    min-height: 30px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    border-radius: 10px !important;
}

.practice-model > .practice-a span {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.practice-model #listenModelAnswerBtn,
.practice-model .practice-mini-btn {
    flex: 0 0 auto !important;
    padding: 6px 9px !important;
    min-height: 28px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
}

/* 3. Exercițiul curent rămâne vizibil. Nu îl ascundem. */
.practice-current {
    display: grid !important;
}

/* === SPANIOLA_FIX_PRACTICE_MODEL_RULE_END === */

/* === SPANIOLA_RIGHT_MENU_MIN_SCROLL_START === */
/* Meniu dreapta optimizat pentru minimum scroll.
   Clase reale: .lesson-list-panel, .lesson-list-head, .lesson-count-badge, .lesson-grid, .lesson-pill, .lesson-no.
   CSS only. */

/* Panoul din dreapta: suficient de îngust, dar nu sufocă textul */
.lesson-list-panel {
    width: 255px !important;
    min-width: 245px !important;
    max-width: 255px !important;
    flex: 0 0 255px !important;
    padding: 10px 9px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
}

/* Header-ul panoului ocupă cât mai puțin vertical */
.lesson-list-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 6px !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
}

.lesson-list-head h2 {
    font-size: 16px !important;
    line-height: 1.08 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lesson-list-head p {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
}

/* Badge-ul cu numărul de lecții compact */
.lesson-count-badge {
    font-size: 10px !important;
    line-height: 1 !important;
    padding: 5px 7px !important;
    min-height: 0 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

/* Grila/lista de lecții: fără spații verticale inutile */
.lesson-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fiecare lecție cât mai joasă */
.lesson-pill {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;

    width: 100% !important;
    min-height: 28px !important;
    padding: 5px 7px !important;
    margin: 0 !important;
    border-radius: 10px !important;

    font-size: 11.5px !important;
    line-height: 1.12 !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* Numărul lecției mai mic, constant */
.lesson-no {
    width: 24px !important;
    min-width: 24px !important;
    height: 22px !important;
    min-height: 22px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 10.5px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Lecția activă rămâne vizibilă, dar fără înălțime exagerată */
.lesson-pill.active {
    min-height: 30px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    box-shadow: 0 4px 10px rgba(30, 48, 150, 0.10) !important;
}

/* Textul lung se poate rupe, dar fără spațiu vertical mare */
.lesson-pill,
.lesson-pill * {
    overflow-wrap: anywhere !important;
}

/* La lățimi mai mici, strângem și mai mult */
@media (max-width: 1200px) {
    .lesson-list-panel {
        width: 235px !important;
        min-width: 225px !important;
        max-width: 235px !important;
        flex-basis: 235px !important;
        padding: 8px 7px !important;
    }

    .lesson-pill {
        grid-template-columns: 25px minmax(0, 1fr) !important;
        gap: 5px !important;
        min-height: 26px !important;
        padding: 4px 6px !important;
        font-size: 11px !important;
    }

    .lesson-no {
        width: 22px !important;
        min-width: 22px !important;
        height: 20px !important;
        min-height: 20px !important;
        font-size: 10px !important;
    }

    .lesson-list-head h2 {
        font-size: 15px !important;
    }

    .lesson-list-head p {
        font-size: 10px !important;
    }
}

/* === SPANIOLA_RIGHT_MENU_MIN_SCROLL_END === */

/* === SPANIOLA_SCROLLBAR_LAT_START === */
/* Scrollbar mai lat și mai ușor de prins.
   CSS only. Nu modifică JS/logica/lecțiile. */

/* Firefox */
* {
    scrollbar-width: auto !important;
    scrollbar-color: rgba(88, 99, 210, 0.75) rgba(230, 233, 255, 0.95) !important;
}

/* Chrome / Edge / Safari */
*::-webkit-scrollbar {
    width: 18px !important;
    height: 18px !important;
}

*::-webkit-scrollbar-track {
    background: rgba(230, 233, 255, 0.95) !important;
    border-radius: 999px !important;
}

*::-webkit-scrollbar-thumb {
    background: rgba(88, 99, 210, 0.78) !important;
    border-radius: 999px !important;
    border: 4px solid rgba(230, 233, 255, 0.95) !important;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(62, 74, 185, 0.95) !important;
}

/* Pentru panourile principale, scrollbar și mai confortabil */
.lesson-list-panel,
.sidebar-left,
.categories-sidebar,
.categories-panel,
.left-panel,
.conversation-practice,
.practice-list,
.lesson-content,
.main-content,
.center-panel {
    scrollbar-width: auto !important;
    scrollbar-color: rgba(88, 99, 210, 0.85) rgba(230, 233, 255, 0.95) !important;
}

.lesson-list-panel::-webkit-scrollbar,
.sidebar-left::-webkit-scrollbar,
.categories-sidebar::-webkit-scrollbar,
.categories-panel::-webkit-scrollbar,
.left-panel::-webkit-scrollbar,
.conversation-practice::-webkit-scrollbar,
.practice-list::-webkit-scrollbar,
.lesson-content::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.center-panel::-webkit-scrollbar {
    width: 20px !important;
    height: 20px !important;
}

.lesson-list-panel::-webkit-scrollbar-thumb,
.sidebar-left::-webkit-scrollbar-thumb,
.categories-sidebar::-webkit-scrollbar-thumb,
.categories-panel::-webkit-scrollbar-thumb,
.left-panel::-webkit-scrollbar-thumb,
.conversation-practice::-webkit-scrollbar-thumb,
.practice-list::-webkit-scrollbar-thumb,
.lesson-content::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
.center-panel::-webkit-scrollbar-thumb {
    background: rgba(88, 99, 210, 0.88) !important;
    border-radius: 999px !important;
    border: 4px solid rgba(230, 233, 255, 0.95) !important;
}

.lesson-list-panel::-webkit-scrollbar-thumb:hover,
.sidebar-left::-webkit-scrollbar-thumb:hover,
.categories-sidebar::-webkit-scrollbar-thumb:hover,
.categories-panel::-webkit-scrollbar-thumb:hover,
.left-panel::-webkit-scrollbar-thumb:hover,
.conversation-practice::-webkit-scrollbar-thumb:hover,
.practice-list::-webkit-scrollbar-thumb:hover,
.lesson-content::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover,
.center-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(48, 60, 170, 1) !important;
}

/* === SPANIOLA_SCROLLBAR_LAT_END === */

/* === SPANIOLA_SCROLLBAR_LECTII_FOARTE_LAT_START === */
/* Scrollbar foarte lat pentru meniul cu lecții.
   CSS only. */

/* Panoul care conține lista de lecții */
.lesson-list-panel {
    overflow-y: auto !important;
    scrollbar-width: auto !important;
    scrollbar-gutter: stable !important;
    scrollbar-color: rgba(55, 68, 185, 0.95) rgba(226, 230, 255, 1) !important;
}

/* Chrome / Edge / Safari — scrollbar vertical foarte lat */
.lesson-list-panel::-webkit-scrollbar {
    width: 28px !important;
    height: 28px !important;
}

.lesson-list-panel::-webkit-scrollbar-track {
    background: rgba(226, 230, 255, 1) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(150, 160, 230, 0.55) !important;
}

.lesson-list-panel::-webkit-scrollbar-thumb {
    background: rgba(55, 68, 185, 0.95) !important;
    border-radius: 999px !important;
    border: 5px solid rgba(226, 230, 255, 1) !important;
    min-height: 60px !important;
}

.lesson-list-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(35, 47, 155, 1) !important;
}

/* Colțul de scrollbar, dacă apare */
.lesson-list-panel::-webkit-scrollbar-corner {
    background: rgba(226, 230, 255, 1) !important;
}

/* Lăsăm puțin spațiu intern ca bara lată să nu sufoce titlurile */
.lesson-list-panel {
    padding-right: 12px !important;
}

/* === SPANIOLA_SCROLLBAR_LECTII_FOARTE_LAT_END === */

/* === SPANIOLA_SCROLLBAR_REAL_LESSON_SIDEBAR_START === */
/* Scrollbar real pentru meniul lecțiilor.
   Audit: scrollul este pe aside.card.lesson-sidebar, nu pe .lesson-list-panel.
   CSS only. */

/* Containerul real care face scroll */
.lesson-sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: auto !important;
    scrollbar-gutter: stable both-edges !important;
    scrollbar-color: rgba(45, 57, 175, 1) rgba(226, 230, 255, 1) !important;
}

/* Chrome / Edge / Safari */
.lesson-sidebar::-webkit-scrollbar {
    width: 30px !important;
    height: 30px !important;
}

.lesson-sidebar::-webkit-scrollbar-track {
    background: rgba(226, 230, 255, 1) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(145, 155, 225, 0.65) !important;
}

.lesson-sidebar::-webkit-scrollbar-thumb {
    background: rgba(45, 57, 175, 1) !important;
    border-radius: 999px !important;
    border: 5px solid rgba(226, 230, 255, 1) !important;
    min-height: 70px !important;
}

.lesson-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(25, 38, 145, 1) !important;
}

.lesson-sidebar::-webkit-scrollbar-corner {
    background: rgba(226, 230, 255, 1) !important;
}

/* Lăsăm un pic de spațiu intern pentru bara lată */
.lesson-sidebar {
    padding-right: 14px !important;
}

/* Păstrăm și scrollbar-ul de pe .lesson-list-panel, dacă browserul îl folosește accidental */
.lesson-list-panel::-webkit-scrollbar {
    width: 30px !important;
    height: 30px !important;
}

/* === SPANIOLA_SCROLLBAR_REAL_LESSON_SIDEBAR_END === */

/* === SPANIOLA_HEADER_SCROLL_GLOBAL_FIX_START === */
/* Corecție reală:
   - scrollbarul vizibil este scrollbarul paginii, nu al .lesson-list-panel
   - compactăm partea de sus
   - lățim scrollbarul global
   - CSS only */

/* --------------------------------------------------
   1. PAGINA — mai puțin spațiu sus și jos
   -------------------------------------------------- */

html,
body {
    scrollbar-width: auto !important;
    scrollbar-color: rgba(58, 70, 195, 1) rgba(224, 229, 255, 1) !important;
}

body {
    overflow-x: auto !important;
}

/* Chrome / Edge / Safari: scrollbar real al paginii */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 30px !important;
    height: 22px !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: rgba(224, 229, 255, 1) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(150, 160, 230, 0.7) !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: rgba(58, 70, 195, 1) !important;
    border-radius: 999px !important;
    border: 5px solid rgba(224, 229, 255, 1) !important;
    min-height: 70px !important;
    min-width: 70px !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: rgba(35, 48, 165, 1) !important;
}

/* --------------------------------------------------
   2. TOPBAR — butoanele de sus mai compacte
   -------------------------------------------------- */

.page {
    width: min(1500px, 98vw) !important;
    padding-top: 6px !important;
    padding-bottom: 18px !important;
}

.topbar {
    gap: 8px !important;
    margin-bottom: 6px !important;
    align-items: center !important;
}

.topbar .back,
.back {
    min-height: 31px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    box-shadow: 0 3px 0 #172a72, 0 7px 12px rgba(38,63,158,.12) !important;
}

/* --------------------------------------------------
   3. HERO — partea de sus mai joasă și mai curată
   -------------------------------------------------- */

.hero {
    padding: 9px 14px !important;
    margin-bottom: 8px !important;
    border-radius: 18px !important;
    gap: 10px !important;
    min-height: 0 !important;
    box-shadow: 0 8px 18px rgba(31,58,147,.07) !important;
}

.hero h1 {
    font-size: clamp(25px, 2.5vw, 34px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
    margin: 0 !important;
}

.hero p {
    font-size: 13.5px !important;
    line-height: 1.15 !important;
    margin: 3px 0 0 !important;
}

.level-badge {
    width: 60px !important;
    height: 60px !important;
    border-radius: 18px !important;
    font-size: 25px !important;
    box-shadow: inset 0 -6px 12px rgba(34,48,74,.06) !important;
}

/* --------------------------------------------------
   4. LAYOUT — reducere spații mari între coloane
   -------------------------------------------------- */

.layout {
    gap: 10px !important;
}

.card {
    border-radius: 18px !important;
    box-shadow: 0 8px 18px rgba(31,58,147,.06) !important;
}

.reader {
    padding: 10px !important;
}

.episode-panel,
.lesson-sidebar {
    top: 8px !important;
    max-height: calc(100vh - 16px) !important;
}

/* --------------------------------------------------
   5. Păstrăm scrollbar lat și pe panourile interne dacă devin scrollabile
   -------------------------------------------------- */

.episode-panel,
.lesson-sidebar,
.lesson-list-panel,
.reader,
.conversation-practice {
    scrollbar-width: auto !important;
    scrollbar-color: rgba(58, 70, 195, 1) rgba(224, 229, 255, 1) !important;
}

.episode-panel::-webkit-scrollbar,
.lesson-sidebar::-webkit-scrollbar,
.lesson-list-panel::-webkit-scrollbar,
.reader::-webkit-scrollbar,
.conversation-practice::-webkit-scrollbar {
    width: 30px !important;
    height: 22px !important;
}

.episode-panel::-webkit-scrollbar-thumb,
.lesson-sidebar::-webkit-scrollbar-thumb,
.lesson-list-panel::-webkit-scrollbar-thumb,
.reader::-webkit-scrollbar-thumb,
.conversation-practice::-webkit-scrollbar-thumb {
    background: rgba(58, 70, 195, 1) !important;
    border-radius: 999px !important;
    border: 5px solid rgba(224, 229, 255, 1) !important;
    min-height: 70px !important;
}

/* === SPANIOLA_HEADER_SCROLL_GLOBAL_FIX_END === */

/* === SPANIOLA_TOPBAR_TITLU_MODERN_START === */
/* Topbar modern:
   - Pagina principală în stânga
   - Înapoi la Bonusuri în dreapta
   - titlu central, modern, compact
   - CSS only */

/* --------------------------------------------------
   1. BUTOANE SUS: STÂNGA / DREAPTA
   -------------------------------------------------- */

.topbar {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 7px !important;
    padding: 0 2px !important;
}

.topbar .back {
    min-height: 34px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 3px 0 #172a72, 0 8px 14px rgba(38,63,158,.13) !important;
}

.topbar .back:first-child {
    justify-self: start !important;
    grid-column: 1 !important;
}

.topbar .back:last-child {
    justify-self: end !important;
    grid-column: 3 !important;
}

/* --------------------------------------------------
   2. HERO: TITLU CENTRAL MODERN
   -------------------------------------------------- */

.hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) 70px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    margin-bottom: 9px !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 50% -40%, rgba(82, 109, 255, 0.12), transparent 45%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,248,255,.95)) !important;
    border: 1px solid rgba(200, 210, 255, .75) !important;
    box-shadow: 0 8px 22px rgba(31,58,147,.07) !important;
}

/* primul copil din hero este blocul cu h1 + p */
.hero > div:first-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: center !important;
    min-width: 0 !important;
}

.hero h1 {
    margin: 0 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: clamp(27px, 2.6vw, 38px) !important;
    line-height: 1.03 !important;
    font-weight: 1000 !important;
    letter-spacing: -0.055em !important;

    color: #1d2f8f !important;
    background: linear-gradient(90deg, #172a72 0%, #3151d3 42%, #6d3fe8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-wrap: balance !important;
}

.hero p {
    margin: 4px auto 0 !important;
    max-width: 760px !important;
    font-size: 14px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    color: #405ca8 !important;
    letter-spacing: -0.01em !important;
    text-align: center !important;
}

/* Badge ES în dreapta, compact și modern */
.level-badge {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
    font-size: 24px !important;
    font-weight: 1000 !important;
    color: #172a72 !important;
    background:
        linear-gradient(145deg, rgba(255,250,220,.96), rgba(221,241,255,.96)) !important;
    box-shadow:
        inset 0 -6px 12px rgba(34,48,74,.05),
        0 6px 16px rgba(31,58,147,.07) !important;
}

/* Responsive: pe îngust nu forțăm layout artificial */
@media (max-width: 760px) {
    .topbar {
        grid-template-columns: 1fr !important;
    }

    .topbar .back:first-child,
    .topbar .back:last-child {
        grid-column: 1 !important;
        justify-self: stretch !important;
        text-align: center !important;
    }

    .hero {
        grid-template-columns: 1fr !important;
    }

    .hero > div:first-child,
    .level-badge {
        grid-column: 1 !important;
        justify-self: center !important;
    }
}

/* === SPANIOLA_TOPBAR_TITLU_MODERN_END === */

/* === SPANIOLA_TOPBAR_FINAL_TIGHT_START === */
/* Reglaj final:
   - butoanele sus obligatoriu pe același rând
   - distanță mai mică față de titlu
   - CSS only */

/* Topbar pe un singur rând, stânga/dreapta */
.topbar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 3px 0 !important;
    padding: 0 2px !important;
    width: 100% !important;
}

.topbar .back:first-child {
    margin-right: auto !important;
}

.topbar .back:last-child {
    margin-left: auto !important;
}

/* Butoanele rămân compacte și egale ca stil */
.topbar .back,
.back {
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Micșorăm distanța dintre topbar și titlu */
.hero {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-top: 9px !important;
}

/* Pagina nu mai lasă spațiu inutil sus */
.page {
    padding-top: 4px !important;
}

/* Pe ecran foarte îngust permitem împachetare, dar pe desktop rămâne un rând */
@media (max-width: 520px) {
    .topbar {
        flex-wrap: wrap !important;
    }

    .topbar .back {
        flex: 1 1 auto !important;
        text-align: center !important;
    }
}

/* === SPANIOLA_TOPBAR_FINAL_TIGHT_END === */

/* === SPANIOLA_TOPBAR_REAL_2_BUTTONS_START === */
/* Corecție reală:
   HTML are acum două linkuri .back în același .topbar.
   Le forțăm pe același rând: primul stânga, al doilea dreapta.
   Distanța față de hero/titlu este minimă. */

.topbar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 2px 0 !important;
    padding: 0 2px !important;
}

.topbar .back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.topbar .back:first-child {
    margin-right: auto !important;
    align-self: center !important;
}

.topbar .back:last-child {
    margin-left: auto !important;
    align-self: center !important;
}

.page {
    padding-top: 3px !important;
}

.hero {
    margin-top: 0 !important;
}

/* === SPANIOLA_TOPBAR_REAL_2_BUTTONS_END === */

/* === SPANIOLA_TOPBAR_DUPLICATE_FIX_START === */
/* Fix real topbar:
   exact două butoane în același rând:
   - stânga: Pagina principală
   - dreapta: Înapoi la Bonusuri */

.topbar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 0 0 2px 0 !important;
    padding: 0 2px !important;
}

.topbar .back {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.topbar .back-home {
    margin-right: auto !important;
}

.topbar .back-bonusuri {
    margin-left: auto !important;
}

.page {
    padding-top: 3px !important;
}

.hero {
    margin-top: 0 !important;
}

/* === SPANIOLA_TOPBAR_DUPLICATE_FIX_END === */

/* === SPANIOLA_TOPBAR_MODULE_ONLY_BONUS_RIGHT_START === */
/* Corecție finală:
   - Pagina principală NU se pune în modul; vine din layoutul global.
   - Modulul păstrează doar Înapoi la Bonusuri.
   - Înapoi la Bonusuri este aliniat la dreapta, pe același nivel vizual cu butonul global din stânga. */

.topbar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 0 2px 0 !important;
    padding: 0 2px !important;
}

.topbar .back,
.topbar .back-bonusuri {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.page {
    padding-top: 3px !important;
}

.hero {
    margin-top: 0 !important;
}

/* === SPANIOLA_TOPBAR_MODULE_ONLY_BONUS_RIGHT_END === */

/* === SPANIOLA_BACK_BONUSURI_FIXED_RIGHT_START === */
/* Butonul Pagina principală vine din layoutul global.
   Butonul Înapoi la Bonusuri vine din modul.
   Cum sunt în containere diferite, îl poziționăm vizual în dreapta sus,
   pe același rând cu butonul global. CSS only. */

.topbar {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    position: static !important;
    overflow: visible !important;
}

.topbar .back-bonusuri {
    position: fixed !important;
    top: 104px !important;
    right: 46px !important;
    z-index: 9999 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 32px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;

    background: linear-gradient(180deg, #3456d4, #263f9e) !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 3px 0 #172a72, 0 8px 14px rgba(38,63,158,.13) !important;
}

/* Titlul urcă, pentru că topbar-ul modulului nu mai ocupă spațiu. */
.hero {
    margin-top: 0 !important;
}

/* Pe ecrane înguste revenim în flux normal ca să nu acopere conținutul. */
@media (max-width: 760px) {
    .topbar {
        height: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin: 0 0 4px 0 !important;
    }

    .topbar .back-bonusuri {
        position: static !important;
        right: auto !important;
        top: auto !important;
    }
}

/* === SPANIOLA_BACK_BONUSURI_FIXED_RIGHT_END === */

/* === SPANIOLA_HERO_NAV_CARD_AUDIT_BASED_START === */
/* Card unic sus, bazat pe audit:
   - butonul global vechi a.back[href="/index.php"] este ascuns;
   - modulul controlează un singur card:
     stânga = Pagina principală,
     centru = titlu + subtitlu,
     dreapta = Înapoi la Bonusuri. */

/* Ascundem butonul global vechi din layoutul părinte. */
body > a.back[href="/index.php"],
a.back[href="/index.php"][data-hidden-by-spaniola="1"] {
    display: none !important;
}

/* Topbar-ul vechi al modulului nu mai ocupă spațiu. */
.topbar-hidden,
.topbar.topbar-hidden {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Card unic sus */
.hero.hero-nav-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;

    padding: 9px 16px !important;
    margin: 0 0 9px 0 !important;
    min-height: 66px !important;

    border-radius: 20px !important;
    border: 1px solid rgba(190, 202, 255, .82) !important;
    background:
        radial-gradient(circle at 50% -60%, rgba(80, 110, 255, .15), transparent 46%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,248,255,.96)) !important;
    box-shadow: 0 8px 22px rgba(31,58,147,.075) !important;
}

/* Butoanele din card */
.hero-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 32px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;

    background: linear-gradient(180deg, #3456d4, #263f9e) !important;
    color: #fff !important;
    text-decoration: none !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;

    box-shadow: 0 3px 0 #172a72, 0 8px 14px rgba(38,63,158,.13) !important;
}

.hero-nav-home {
    justify-self: start !important;
}

.hero-nav-bonusuri {
    justify-self: end !important;
}

/* Titlu central */
.hero-title-block {
    min-width: 0 !important;
    text-align: center !important;
}

.hero.hero-nav-card h1 {
    margin: 0 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: clamp(27px, 2.55vw, 38px) !important;
    line-height: 1.02 !important;
    font-weight: 1000 !important;
    letter-spacing: -0.055em !important;

    background: linear-gradient(90deg, #172a72 0%, #3151d3 44%, #6d3fe8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #263f9e !important;
    text-wrap: balance !important;
}

.hero.hero-nav-card p {
    margin: 4px auto 0 !important;
    max-width: 760px !important;
    font-size: 13.5px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    color: #405ca8 !important;
    text-align: center !important;
}

/* Vechiul ES nu mai trebuie afișat dacă apare din cache. */
.hero.hero-nav-card .level-badge {
    display: none !important;
}

.page {
    padding-top: 4px !important;
}

@media (max-width: 900px) {
    .hero.hero-nav-card {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .hero-title-block {
        order: -1 !important;
    }

    .hero-nav-home,
    .hero-nav-bonusuri {
        justify-self: stretch !important;
    }
}

/* === SPANIOLA_HERO_NAV_CARD_AUDIT_BASED_END === */


/* === SPANIOLA_LESSON_PANEL_SELECTOR_V2_START === */
.lesson-mode-btn.active {
    background: #dce8ff !important;
    border-color: #6f8eea !important;
    color: #172a72 !important;
    box-shadow: 0 4px 12px rgba(47, 83, 180, .16) !important;
}

#understandStoryPanel[hidden] {
    display: none !important;
}
/* === SPANIOLA_LESSON_PANEL_SELECTOR_V2_END === */


/* === SPANIOLA_MANUAL_NAVIGATION_START === */
.manual-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 2px;
}

.manual-navigation .practice-mini-btn:disabled,
.practice-current-actions .practice-mini-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
}
/* === SPANIOLA_MANUAL_NAVIGATION_END === */


/* === SPANIOLA_PREMIUM_SINGLE_PANEL_START === */
/* Panou unic, aerisit, fără carduri interioare tehnice. */

#understandStoryPanel {
    margin: 12px 0 16px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    background:
        linear-gradient(135deg, rgba(246,249,255,.98), rgba(255,255,255,.98)) !important;
    border: 1px solid rgba(104,137,235,.30) !important;
    box-shadow: 0 12px 30px rgba(42, 67, 156, .10) !important;
}

#understandStoryPanel > h2 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(117,145,230,.22) !important;
    color: #1f3f9e !important;
    font-size: 21px !important;
    line-height: 1.15 !important;
}

#understandStoryPanel .quiz-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
}

#understandStoryPanel .answer-mode-toggle {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

#understandStoryPanel .btn,
#understandStoryPanel .answer-mode-btn,
#understandStoryPanel .speak-answer-btn {
    min-height: 38px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

#understandStoryPanel .quiz-progress {
    display: inline-flex !important;
    width: fit-content !important;
    margin: 8px 0 10px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: #eaf0ff !important;
    color: #29449e !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

#understandStoryPanel .question-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(117,145,230,.23) !important;
}

#understandStoryPanel .question {
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    color: #172a72 !important;
}

#understandStoryPanel .question-listen-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 999px !important;
}

#understandStoryPanel .options {
    margin-top: 10px !important;
    gap: 10px !important;
}

#understandStoryPanel .feedback {
    margin-top: 12px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
}

#understandStoryPanel .speak-answer-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 10px 0 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid rgba(117,145,230,.18) !important;
}

/* Regulile vechi pentru layout în două carduri nu mai afectează panoul. */
#understandStoryPanel.story-question-layout,
#understandStoryPanel .story-question-controls-card,
#understandStoryPanel .story-question-status-card {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    #understandStoryPanel {
        padding: 13px !important;
        border-radius: 18px !important;
    }

    #understandStoryPanel > h2 {
        font-size: 18px !important;
    }

    #understandStoryPanel .question {
        font-size: 16px !important;
    }

    #understandStoryPanel .quiz-actions,
    #understandStoryPanel .answer-mode-toggle {
        width: 100% !important;
    }

    #understandStoryPanel .btn,
    #understandStoryPanel .answer-mode-btn,
    #understandStoryPanel .speak-answer-btn {
        flex: 1 1 auto !important;
    }
}
/* === SPANIOLA_PREMIUM_SINGLE_PANEL_END === */

/* === SPANIOLA_PREMIUM_QUIZ_VISUAL_V2_START === */
/*
   Reorganizare strict vizuală pentru „Înțeleg povestea”.
   Nu modifică JavaScript, audio, randomizare, glosar sau navigare.
*/

#understandStoryPanel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "title progress"
        "question question"
        "navigation navigation"
        "modes modes"
        "answers answers"
        "feedback feedback"
        "speech speech" !important;
    gap: 12px !important;
    padding: 18px !important;
    margin: 14px 0 18px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at top right, rgba(136, 163, 255, .18), transparent 32%),
        linear-gradient(135deg, #f8faff 0%, #ffffff 55%, #f4f7ff 100%) !important;
    border: 1px solid rgba(104, 137, 235, .30) !important;
    box-shadow: 0 14px 32px rgba(42, 67, 156, .11) !important;
}

#understandStoryPanel > h2 {
    grid-area: title !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #172a72 !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
}

#understandStoryPanel #questionProgress {
    grid-area: progress !important;
    align-self: center !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: #eaf0ff !important;
    border: 1px solid rgba(92, 124, 230, .25) !important;
    color: #29449e !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

#understandStoryPanel .question-row {
    grid-area: question !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 17px 18px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid rgba(104, 137, 235, .28) !important;
    box-shadow: 0 7px 18px rgba(31, 58, 147, .07) !important;
}

#understandStoryPanel .question {
    color: #172a72 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
}

#understandStoryPanel .question-listen-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #eef3ff !important;
    border: 1px solid rgba(92, 124, 230, .28) !important;
}

#understandStoryPanel .manual-navigation {
    grid-area: navigation !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin: 0 !important;
}

#understandStoryPanel .manual-navigation .practice-mini-btn {
    min-width: 160px !important;
    min-height: 36px !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(92, 124, 230, .25) !important;
    color: #29449e !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

#understandStoryPanel .quiz-actions {
    grid-area: modes !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
}

#understandStoryPanel .quiz-actions > .btn.green {
    order: 3 !important;
    min-height: 38px !important;
    padding: 8px 16px !important;
}

#understandStoryPanel .answer-mode-toggle {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

#understandStoryPanel .answer-mode-btn {
    min-height: 36px !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

#understandStoryPanel #questionOptions {
    grid-area: answers !important;
    display: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
}

#understandStoryPanel #questionOptions.show {
    display: grid !important;
}

#understandStoryPanel #questionOptions .option {
    min-height: 74px !important;
    padding: 14px 12px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(104, 137, 235, .28) !important;
    color: #172a72 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    box-shadow: 0 5px 12px rgba(31, 58, 147, .05) !important;
}

#understandStoryPanel #questionFeedback {
    grid-area: feedback !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 12px 15px !important;
    border-radius: 16px !important;
    background: #edf3ff !important;
    color: #263f9e !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
}

#understandStoryPanel #speakAnswerRow {
    grid-area: speech !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(104, 137, 235, .18) !important;
}

#understandStoryPanel #speakAnswerBtn {
    min-height: 40px !important;
    padding: 8px 17px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

#understandStoryPanel #speechStatus {
    color: #425fa4 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

#understandStoryPanel .story-question-layout,
#understandStoryPanel .story-question-controls-card,
#understandStoryPanel .story-question-status-card {
    display: contents !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    #understandStoryPanel {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "title"
            "progress"
            "question"
            "navigation"
            "modes"
            "answers"
            "feedback"
            "speech" !important;
        padding: 14px !important;
        border-radius: 19px !important;
    }

    #understandStoryPanel #questionProgress {
        justify-self: start !important;
    }

    #understandStoryPanel .question {
        font-size: 17px !important;
    }

    #understandStoryPanel #questionOptions.show {
        grid-template-columns: 1fr !important;
    }

    #understandStoryPanel .manual-navigation .practice-mini-btn {
        flex: 1 1 calc(50% - 5px) !important;
        min-width: 0 !important;
    }
}
/* === SPANIOLA_PREMIUM_QUIZ_VISUAL_V2_END === */


/* === SPANIOLA_QUIZ_INLINE_NAVIGATION_V3_START === */

/* Întrebare + difuzor + navigare pe același rând. */
#understandStoryPanel .question-row {
    display: grid !important;
    grid-template-columns: 40px minmax(180px, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
}

#understandStoryPanel #questionNavigationControls {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
}

#understandStoryPanel #questionNavigationControls .practice-mini-btn {
    min-width: auto !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

/* Mesajul generic inutil nu mai consumă spațiu.
   Feedbackul real apare automat după răspuns greșit/corect. */
#understandStoryPanel #questionFeedback:empty {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Reiau + microfon + indicație pe același rând de controale. */
#understandStoryPanel .quiz-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}

#understandStoryPanel #speakAnswerRow {
    display: flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

#understandStoryPanel #speakAnswerBtn {
    min-height: 34px !important;
    padding: 7px 13px !important;
}

#understandStoryPanel #speechStatus {
    font-size: 12px !important;
    white-space: nowrap !important;
}

@media (max-width: 980px) {
    #understandStoryPanel .question-row {
        grid-template-columns: 36px minmax(0, 1fr) !important;
    }

    #understandStoryPanel #questionNavigationControls {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }

    #understandStoryPanel #speechStatus {
        white-space: normal !important;
    }
}

/* === SPANIOLA_QUIZ_INLINE_NAVIGATION_V3_END === */


/* === SPANIOLA_QUIZ_COMPACT_INITIAL_STATE_V4_START === */

/* Înainte de pornirea întrebărilor nu afișăm card gol, placeholder,
   feedback inutil sau controale fără rol. */
#understandStoryPanel:not(.questions-active) #questionProgress,
#understandStoryPanel:not(.questions-active) .question-row,
#understandStoryPanel:not(.questions-active) #questionOptions,
#understandStoryPanel:not(.questions-active) #questionFeedback,
#understandStoryPanel:not(.questions-active) #questionNavigationControls,
#understandStoryPanel:not(.questions-active) #speakAnswerRow {
    display: none !important;
}

/* După pornire: difuzor | întrebare extensibilă | navigare fixă dreapta. */
#understandStoryPanel.questions-active .question-row {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
}

#understandStoryPanel.questions-active .question {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
    margin: 0 !important;
}

#understandStoryPanel.questions-active #questionNavigationControls {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
}

#understandStoryPanel.questions-active #questionNavigationControls .practice-mini-btn {
    min-width: auto !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    font-size: 11px !important;
}

/* În modul activ, Reiau + microfon + explicația lui sunt pe aceeași linie. */
#understandStoryPanel.questions-active .quiz-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

#understandStoryPanel.questions-active #restartQuestionsBtn {
    order: 10 !important;
}

#understandStoryPanel.questions-active #speakAnswerRow {
    order: 11 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

#understandStoryPanel.questions-active #speechStatus {
    white-space: nowrap !important;
    font-size: 12px !important;
}

/* Feedbackul gol nu mai ocupă spațiu. */
#understandStoryPanel #questionFeedback:empty {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 980px) {
    #understandStoryPanel.questions-active .question-row {
        grid-template-columns: 36px minmax(0, 1fr) !important;
    }

    #understandStoryPanel.questions-active #questionNavigationControls {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }

    #understandStoryPanel.questions-active #speechStatus {
        white-space: normal !important;
    }
}
/* === SPANIOLA_QUIZ_COMPACT_INITIAL_STATE_V4_END === */


/* === SPANIOLA_QUESTION_SPLIT_LAYOUT_V1 START === */

/* Cardul întrebării: compartiment stânga = întrebare, dreapta = navigare */
#understandStoryPanel.questions-active .question-row {
    position: relative !important;
    display: block !important;
    min-height: 108px !important;
    padding: 16px 290px 16px 62px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
}

#understandStoryPanel.questions-active #questionListenBtn {
    position: absolute !important;
    left: 16px !important;
    top: 18px !important;
    margin: 0 !important;
    z-index: 2 !important;
}

#understandStoryPanel.questions-active #questionText {
    display: block !important;
    margin: 0 !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.34 !important;
}

/* Navigarea rămâne în dreapta, pe verticală */
#understandStoryPanel.questions-active #questionNavigationControls {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 250px !important;
    margin: 0 !important;
}

#understandStoryPanel.questions-active #questionNavigationControls .practice-mini-btn {
    width: 100% !important;
    min-height: 36px !important;
    padding: 7px 12px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
}

/* Feedback colorat clar pentru răspunsurile scrise */
#questionFeedback {
    display: block !important;
    margin-top: 12px !important;
    border-radius: 16px !important;
    padding: 10px 14px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
}

#questionFeedback:empty {
    display: none !important;
}

#questionFeedback.good {
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 2px solid #86efac !important;
}

#questionFeedback.bad {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 2px solid #fca5a5 !important;
}

/* Dacă există și clase pe butoanele variantelor scrise, le facem vizibile */
#questionOptions .good,
#questionOptions .correct {
    background: #dcfce7 !important;
    color: #166534 !important;
    border-color: #86efac !important;
}

#questionOptions .bad,
#questionOptions .wrong,
#questionOptions .incorrect {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
}

/* Responsive: pe ecrane mai mici, nav revine sub întrebare */
@media (max-width: 1100px) {
    #understandStoryPanel.questions-active .question-row {
        padding: 16px 16px 16px 62px !important;
        min-height: 0 !important;
    }

    #understandStoryPanel.questions-active #questionNavigationControls {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        margin-top: 12px !important;
    }
}

/* === SPANIOLA_QUESTION_SPLIT_LAYOUT_V1 END === */


/* === SPANIOLA_FEEDBACK_COLORS_PREMIUM_V1_START === */

/* Feedback clar, fără să afecteze layoutul validat. */
#understandStoryPanel #questionFeedback.feedback.good {
    display: block !important;
    background: linear-gradient(135deg, #e7f9eb, #d8f5df) !important;
    color: #17633b !important;
    border: 1px solid #77d798 !important;
    box-shadow: 0 5px 14px rgba(33, 126, 73, .10) !important;
}

#understandStoryPanel #questionFeedback.feedback.bad {
    display: block !important;
    background: linear-gradient(135deg, #fff0f0, #ffe2e2) !important;
    color: #a32828 !important;
    border: 1px solid #ef9d9d !important;
    box-shadow: 0 5px 14px rgba(170, 41, 41, .09) !important;
}

/* Variantele scrise devin foarte evidente la corect/greșit. */
#understandStoryPanel #questionOptions .option.correct {
    background: #e0f8e7 !important;
    color: #17633b !important;
    border-color: #66cb89 !important;
    box-shadow: 0 6px 16px rgba(33, 126, 73, .12) !important;
}

#understandStoryPanel #questionOptions .option.wrong {
    background: #ffe7e7 !important;
    color: #a32828 !important;
    border-color: #ef9696 !important;
    box-shadow: 0 6px 16px rgba(170, 41, 41, .10) !important;
}

#understandStoryPanel #questionOptions .option:hover:not(.correct):not(.wrong) {
    transform: translateY(-1px) !important;
    border-color: #7d9df0 !important;
    box-shadow: 0 7px 16px rgba(42, 67, 156, .11) !important;
}

#understandStoryPanel #questionOptions .option {
    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}

/* === SPANIOLA_FEEDBACK_COLORS_PREMIUM_V1_END === */


/* === SPANIOLA_CLOSE_UNDERSTAND_PANEL_V1 START === */

#understandStoryPanel .understand-panel-head {
    grid-area: title !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0 !important;
}

#understandStoryPanel .understand-panel-head h2 {
    margin: 0 !important;
    min-width: 0 !important;
}

#understandStoryPanel #closeUnderstandBtn {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
}

@media (max-width: 900px) {
    #understandStoryPanel .understand-panel-head {
        align-items: flex-start !important;
    }
}
/* === SPANIOLA_CLOSE_UNDERSTAND_PANEL_V1 END === */


/* === SPANIOLA_EQUAL_HEIGHT_THREE_PANELS_V1 START === */
/*
   Desktop:
   - Categorii, lecția și lista lecțiilor au aceeași înălțime.
   - Fiecare panou își gestionează propriul scroll intern.
   - Nu modifică logica JS, audio, glosar sau exerciții.
*/

@media (min-width: 1101px) {
    :root {
        --pn-three-panels-height: min(790px, calc(100vh - 205px));
    }

    .layout {
        align-items: stretch !important;
    }

    .episode-panel,
    .reader,
    .lesson-sidebar {
        height: var(--pn-three-panels-height) !important;
        min-height: 0 !important;
        max-height: var(--pn-three-panels-height) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable both-edges !important;
    }

    /* Nu mai este nevoie ca panourile laterale să urmărească pagina. */
    .episode-panel,
    .lesson-sidebar {
        position: relative !important;
        top: auto !important;
    }

    /* Centrul păstrează conținutul complet în scroll intern. */
    .reader {
        position: relative !important;
        padding-right: 16px !important;
    }

    /* Spațiu util înainte de capătul scrollului central. */
    .reader::after {
        content: "";
        display: block;
        height: 12px;
    }
}

/* Mobil/tabletă: fără înălțime forțată și fără scroll intern artificial. */
@media (max-width: 1100px) {
    .episode-panel,
    .reader,
    .lesson-sidebar {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        scrollbar-gutter: auto !important;
    }
}
/* === SPANIOLA_EQUAL_HEIGHT_THREE_PANELS_V1 END === */