:root {
            --bg-main: #fff9f2;
            --bg-card: #ffffff;
            --bg-card-alt: #fff3e0;
            --accent: #ffb347;
            --accent-soft: #ffe2b8;
            --accent-secondary: #ffc857;
            --accent-strong: #ff7a00;
            --text-main: #4a4036;
            --text-muted: #8c8175;
            --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.08);
            --radius-lg: 20px;
            --radius-pill: 999px;
        }

        body {
            margin:0;
            font-family: 'Nunito', 'Baloo 2', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            background: radial-gradient(circle at top left, #ffe1b3 0, #fff7ec 40%, #fffdfa 100%);
            color: var(--text-main);
        }

        .content {
            max-width:1200px;
            margin:24px auto 40px;
            padding:0 16px;
        }

        .card {
            background: var(--bg-card);
            padding:20px 20px 22px;
            margin-bottom:18px;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-soft);
            border: 2px solid rgba(0,0,0,0.03);
        }

        .card.lesson-body {
            background: var(--bg-card-alt);
        }

        .lesson-body {
            line-height:1.7;
            font-size:1.02rem;
        }

        .lesson-intro {
            display:flex;
            gap:20px;
            align-items:stretch;
        }

        .lesson-intro-text {
            flex:0 0 70%;
            display:flex;
            flex-direction:column;
            justify-content:center;
            text-align:center;
        }

        .lesson-intro-thumb {
            flex:0 0 30%;
            display:flex;
            align-items:center;
            justify-content:center;
        }

        .lesson-intro-thumb-inner {
            width:100%;
            max-width:260px;
            height:180px;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-soft);
            padding:10px;
            background:#ffffff;
            display:flex;
            align-items:center;
            justify-content:center;
        }

        .lesson-intro-thumb-inner img {
            max-width:100%;
            max-height:100%;
            object-fit:contain;
            display:block;
            border-radius:12px;
        }

        .lesson-layout {
            display:flex;
            gap:20px;
            align-items:flex-start;
        }

        .lesson-main {
            flex: 4 1 0;
            min-width:0;
        }

        .lesson-nav {
            flex: 1 1 220px;
            max-width:240px;
            position:sticky;
            top:20px;
        }

        .lesson-nav-inner {
            background:#fff;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-soft);
            border:2px solid rgba(0,0,0,0.03);
            padding:14px 14px 10px;
        }

        .lesson-nav-title {
            font-size:0.95rem;
            font-weight:700;
            margin-bottom:8px;
            display:flex;
            align-items:center;
            gap:6px;
            color:var(--text-main);
        }

        .lesson-nav-title::before {
            content:"▶";
            background: var(--accent-strong);
            color:#000;
            border-radius:50%;
            width:22px;
            height:22px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:0.9rem;
        }

        .lesson-nav-list {
            list-style:none;
            margin:0;
            padding:0;
        }

        .lesson-nav-list li + li {
            margin-top:4px;
        }

        .lesson-nav-list > li > a {
            text-decoration:none;
            display:flex;
            align-items:center;
            gap:8px;
            padding:6px 8px;
            border-radius: var(--radius-pill);
            font-size:0.85rem;
            color:var(--text-main);
            background:rgba(255,255,255,0.7);
            transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
        }

        .lesson-nav-list > li > a:hover {
            background: var(--accent-soft);
            transform: translateY(-1px);
        }

        .lesson-nav-list > li > a.active-root {
            background: var(--accent-soft);
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(0,0,0,0.15);
        }

        .lesson-nav-step-number {
            background: var(--accent);
            color:#fff;
            width:22px;
            height:22px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:0.8rem;
        }

        .lesson-nav-step-text {
            flex:1;
        }

        .lesson-nav-list a.completed .lesson-nav-step-number {
            background:#2ecc71;
        }

        .lesson-nav-list a.completed .lesson-nav-step-text::after {
            content:"✓";
            margin-left:4px;
            font-size:0.75rem;
        }

        .lesson-nav-sublist {
            list-style:none;
            margin:4px 0 0 26px;
            padding:0;
            display:none;
        }

        .lesson-nav-list li.expanded > .lesson-nav-sublist {
            display:block;
        }

        .lesson-nav-sublist a {
            text-decoration:none;
            display:block;
            padding:4px 8px;
            border-radius: var(--radius-pill);
            font-size:0.8rem;
            color:var(--text-main);
            background:rgba(255,255,255,0.6);
            margin-bottom:3px;
            transition: background 0.15s ease, transform 0.1s ease;
        }

        .lesson-nav-sublist a:hover {
            background: var(--accent-soft);
            transform: translateY(-1px);
        }

        .lesson-nav-sublist a.active-sub {
            background: var(--accent);
            color:#000;
        }

        .lesson-block {
            margin-bottom:18px;
            padding:14px 14px 10px;
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,0.9);
            transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
        }

        .lesson-block.completed {
            border:2px solid rgba(46, 204, 113, 0.6);
            box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.2);
            background: rgba(230, 255, 240, 0.95);
        }

        .lesson-block:last-child {
            margin-bottom:0;
        }

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

        .lesson-block-header-main {
            display:flex;
            align-items:center;
            gap:8px;
        }

        .lesson-step-badge {
            background: var(--accent-secondary);
            color:#000;
            padding:4px 10px;
            border-radius: var(--radius-pill);
            font-size:0.75rem;
            text-transform:uppercase;
            letter-spacing:0.03em;
        }

        .lesson-step-label {
            font-weight:600;
            font-size:0.95rem;
            color:var(--text-main);
        }

        .lesson-step-completed {
            display:inline-flex;
            align-items:center;
            gap:6px;
            font-size:0.8rem;
            color:var(--text-muted);
            cursor:pointer;
            white-space:nowrap;
        }

        .lesson-step-completed input {
            accent-color: var(--accent-strong);
        }

        .lesson-step-guest-note {
            font-size:0.5em;
            color:var(--text-muted);
            font-weight:600;
        }

        .lesson-step-guest-note a {
            color: var(--accent-strong);
            text-decoration: none;
        }

        .lesson-step-guest-note a:hover {
            text-decoration: underline;
        }

        .lesson-sub-block {
            margin-top:10px;
            padding:10px 12px;
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,0.9);
            box-shadow: 0 4px 10px rgba(0,0,0,0.04);
        }

        .lesson-sub-block-header {
            font-size:0.9rem;
            font-weight:600;
            margin-bottom:6px;
        }

        .back-link {
            display:inline-flex;
            align-items:center;
            gap:6px;
            margin-bottom:12px;
            text-decoration:none;
            font-size:0.9rem;
            color:var(--text-muted);
            padding:4px 10px;
            border-radius: var(--radius-pill);
            background: rgba(255,255,255,0.7);
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }

        .back-link::before {
            content: "⬅️";
        }

        .back-link:hover {
            color:var(--text-main);
            transform: translateY(-1px);
        }

/* Vocab card */
        .lesson-vocab-table {
            width:100%;
            border-collapse:collapse;
            font-size:0.9rem;
            background:#ffffff;
            border-radius:var(--radius-lg);
            overflow:hidden;
            box-shadow:var(--shadow-soft);
            margin-top:10px;
        }

        .lesson-vocab-table th,
        .lesson-vocab-table td {
            padding:8px 10px;
            border:1px solid rgba(0,0,0,0.05);
            text-align:left;
        }

        .lesson-vocab-table th {
            background:var(--accent);
            color:#000;
            font-weight:700;
        }

        .lesson-vocab-table tr:nth-child(even) {
            background:#fffaf3;
        }
.lesson-vocab-card {
    padding-top: 14px;
    padding-bottom: 14px;
}

.lesson-vocab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.lesson-vocab-title {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lesson-vocab-toggle-icon {
    font-size: 0.9rem;
    padding: 2px 6px;
}

        .vocab-added-pill {
            display:inline-flex;
            align-items:center;
            gap:4px;
            padding:4px 10px;
            border-radius:999px;
            background:#e3ffe9;
            color:#166534;
            font-size:0.8rem;
            font-weight:600;
        }

        .vocab-added-pill::before {
            content:"✓";
        }

        .btn {
            background: var(--accent-strong);
            color:#000;
            border:none;
            padding:8px 16px;
            margin-top:10px;
            cursor:pointer;
            border-radius: var(--radius-pill);
            margin-right:5px;
            font-size:0.9rem;
            font-weight:600;
            display:inline-flex;
            align-items:center;
            gap:6px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease;
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
        }

        .btn-secondary {
            background: var(--accent-secondary);
            color:#000;
        }

        .btn-danger {
            background:#ff5a36;
            color:#000;
        }

        .btn-small {
            padding:4px 10px;
            font-size:0.8rem;
        }

        .btn[disabled] {
            opacity:0.6;
            cursor:not-allowed;
            box-shadow:none;
            transform:none;
        }

        .gap {
            display:inline-block;
            border:none;
            border-bottom: 3px dashed rgba(0,0,0,0.25);
            min-width:80px;
            text-align:center;
            margin:0 2px 2px;
            padding:4px 2px;
            background: rgba(255,255,255,0.9);
            border-radius: 10px 10px 0 0;
            font-size:1rem;
            outline:none;
            transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
        }

        .gap:focus {
            background:#fff;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            transform: translateY(-1px);
        }

        .btn {
            background: var(--accent-strong);
            color:#000;
            border:none;
            padding:8px 16px;
            margin-top:10px;
            cursor:pointer;
            border-radius: var(--radius-pill);
            margin-right:5px;
            font-size:0.9rem;
            font-weight:600;
            display:inline-flex;
            align-items:center;
            gap:6px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease;
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
        }

        .btn-secondary {
            background: var(--accent-secondary);
            color:#000;
        }

        .btn-danger {
            background:#ff5a36;
            color:#000;
        }

        .image-block img {
            display:block;
            width:100%;
            height:auto;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-soft);
        }

        .svg-block {
            margin:12px 0;
            padding:12px;
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,0.9);
            box-shadow: var(--shadow-soft);
        }

        .svg-canvas {
            margin-bottom:12px;
        }

        .svg-object {
            width:100%;
            height:auto;
            border:none;
            display:block;
        }

        .svg-info-panel {
            background:#fffaf3;
            border-radius: var(--radius-lg);
            padding:12px;
            border:2px solid rgba(0,0,0,0.03);
        }

        .svg-info-text {
            font-size:0.95rem;
            color:var(--text-muted);
            margin-bottom:10px;
        }

        .svg-element-buttons {
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }

        .svg-element-button {
            background:#ffe2b8;
            border:none;
            color:#000;
            border-radius: var(--radius-pill);
            padding:6px 12px;
            cursor:pointer;
            font-weight:600;
            box-shadow: 0 3px 8px rgba(0,0,0,0.08);
        }

        .svg-element-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 12px rgba(0,0,0,0.12);
        }

        .mc-question {
            margin-top:12px;
            padding:12px 14px;
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,0.8);
        }

        .mc-question p strong {
            font-size:1.05rem;
        }

        .mc-option-label {
            display:flex;
            align-items:center;
            gap:10px;
            margin:6px 0;
            font-size:0.95rem;
            padding:8px 10px;
            border-radius: var(--radius-lg);
            background: #fffaf3;
            border: 2px solid transparent;
            cursor:pointer;
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
        }

        .mc-option-label:hover {
            background:#ffeecf;
            transform: translateY(-1px);
        }

        .mc-option-label input[type="radio"] {
            transform: scale(1.1);
        }

        .mc-option-label.correct-answer {
            border-color:#2ecc71;
        }

        .mc-option-label.incorrect-answer {
            border-color:#c0392b;
        }

        .mc-feedback {
            margin-top:8px;
            font-weight:600;
            font-size:0.9rem;
        }

        .dd-block {
            margin-top:10px;
            padding:14px;
            background:#fff7e6;
            border-radius: var(--radius-lg);
            border:2px dashed #f0c58b;
            box-shadow: var(--shadow-soft);
        }

        .dd-instructions {
            margin-bottom:10px;
            font-weight:600;
            font-size:0.95rem;
            display:flex;
            align-items:center;
            gap:6px;
        }

        .dd-instructions::before {
            content:"🧩";
        }

        .dd-layout {
            display:block;
        }

        .dd-images {
            display:grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap:16px;
        }

        .dd-image-slot {
            border-radius: var(--radius-lg);
            text-align:center;
            background:#fffaf3;
            padding:8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.04);
        }

        .dd-image-slot img {
            width:160px;
            height:160px;
            max-width:100%;
            border-radius: var(--radius-lg);
            display:block;
            margin:0 auto 6px;
            object-fit:contain;
        }

        .dd-dropzone {
            min-height:36px;
            padding:4px 6px;
            border-radius: var(--radius-lg);
            background:#fffaf3;
            border: 2px dashed rgba(0,0,0,0.08);
            transition: background 0.15s ease, border-color 0.15s ease;
        }

        .dd-dropzone.highlight {
            border-color: var(--accent);
            background:#ffe9cf;
        }

        .dd-label-pool {
            border:2px dashed #f0c58b;
            background:#fff;
            border-radius: var(--radius-lg);
            padding:8px;
            min-height:60px;
            margin-top:16px;
        }

        .dd-label-pool-title {
            font-size:0.9rem;
            font-weight:bold;
            margin-bottom:6px;
        }

        .dd-label {
            display:inline-block;
            background: var(--accent);
            color:#fff;
            padding:6px 10px;
            border-radius: var(--radius-pill);
            margin:4px;
            font-size:0.85rem;
            cursor:grab;
            user-select:none;
            box-shadow: 0 3px 8px rgba(0,0,0,0.15);
            transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease;
        }

        .dd-label:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 12px rgba(0,0,0,0.2);
        }

        .dd-label.dragging {
            opacity:0.7;
        }

        .dd-feedback {
            margin-top:8px;
            font-size:0.9rem;
            font-weight:600;
        }

        /* Inline choice (multi sentence) */
        .inline-choice-block {
            margin-top:12px;
            padding:12px 14px;
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,0.95);
            box-shadow: var(--shadow-soft);
            border: 2px solid rgba(0,0,0,0.03);
        }

        .inline-choice-sentence {
            font-size:1.02rem;
            line-height:1.8;
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:4px;
            margin-bottom:6px;
        }

        .inline-choice-options {
            display:inline-flex;
            flex-wrap:wrap;
            gap:6px;
            margin:0 4px;
        }

        .inline-choice-option {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:6px 10px;
            border-radius: var(--radius-pill);
            border:2px solid rgba(0,0,0,0.08);
            background:#ffffff;
            font-size:0.9rem;
            cursor:pointer;
            box-shadow: 0 3px 8px rgba(0,0,0,0.08);
            transition:
                border-color 0.15s ease,
                background 0.15s ease,
                box-shadow 0.1s ease,
                transform 0.1s ease;
        }

        .inline-choice-option:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 12px rgba(0,0,0,0.12);
            border-color: rgba(0,0,0,0.15);
        }

        .inline-choice-option.selected {
            border-color: var(--accent);
            background: var(--accent-soft);
        }

        .inline-choice-option.correct {
            border-color:#2ecc71;
            background:#e3ffe9;
        }

        .inline-choice-option.incorrect {
            border-color:#c0392b;
            background:#ffe3e3;
        }

        .inline-choice-feedback {
            margin-top:8px;
            font-size:0.9rem;
            font-weight:600;
        }

        /* TRUE / FALSE block */
        .tf-block {
            margin-top:12px;
            padding:12px 14px;
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,0.95);
            box-shadow: var(--shadow-soft);
            border: 2px solid rgba(0,0,0,0.03);
        }

        .tf-header-row {
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding-bottom:4px;
            margin-bottom:4px;
            border-bottom:1px dashed rgba(0,0,0,0.1);
            font-size:0.85rem;
            font-weight:700;
            color:var(--text-muted);
        }

        .tf-header-statement {
            flex:1;
            padding-right:12px;
        }

        .tf-header-controls {
            width:130px;
            text-align:center;
        }

        .tf-row {
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:8px;
            padding:6px 0;
            border-bottom:1px dashed rgba(0,0,0,0.04);
        }

        .tf-row:last-of-type {
            border-bottom:none;
        }

        .tf-statement {
            flex:1;
            padding-right:12px;
        }

        .tf-controls {
            width:130px;
            display:flex;
            align-items:center;
            justify-content:space-between;
        }

        .tf-option {
            display:inline-flex;
            align-items:center;
            gap:4px;
            font-size:0.85rem;
            cursor:pointer;
            padding:4px 6px;
            border-radius: var(--radius-pill);
            background:#fffaf3;
            border:1px solid transparent;
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
        }

        .tf-option:hover {
            background:#ffeecf;
            transform: translateY(-1px);
        }

        .tf-option input[type="radio"] {
            transform: scale(1.05);
        }

        .tf-row.correct .tf-statement {
            background:#e3ffe9;
            border-radius: var(--radius-lg);
            padding:6px 10px;
        }

        .tf-row.incorrect .tf-statement {
            background:#ffe3e3;
            border-radius: var(--radius-lg);
            padding:6px 10px;
        }

        .tf-feedback {
            margin-top:8px;
            font-size:0.9rem;
            font-weight:600;
        }

        .lesson-complete-card {
            margin-top:18px;
        }

        .lesson-complete-content {
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
        }

        .lesson-complete-text h3 {
            margin:0 0 4px;
            font-size:1.05rem;
        }

        .lesson-complete-text p {
            margin:0;
            font-size:0.9rem;
            color:var(--text-muted);
        }

        .lesson-progress {
            margin-top:8px;
        }

        .lesson-progress-bar {
            width:100%;
            max-width:260px;
            height:10px;
            border-radius:999px;
            background:rgba(0,0,0,0.06);
            overflow:hidden;
        }

        .lesson-progress-bar-inner {
            width:0%;
            height:100%;
            background:var(--accent-strong);
            transition: width 0.2s ease;
        }

        .lesson-progress-label {
            margin-top:4px;
            font-size:0.85rem;
            color:var(--text-muted);
        }

        .lesson-complete-message {
            margin-top:10px;
            font-size:0.9rem;
            font-weight:600;
            color:#2ecc71;
        }

        @media (max-width: 900px) {
            .lesson-layout {
                flex-direction:column;
            }
            .lesson-nav {
                position:static;
                max-width:none;
                width:100%;
            }
        }

        @media (max-width: 700px) {
            .lesson-intro {
                flex-direction:column-reverse;
            }
            .lesson-intro-text {
                text-align:left;
            }
            .lesson-intro-thumb {
                justify-content:flex-start;
            }
        }

        @media (max-width: 600px) {
            header {
                padding:10px 16px;
            }
            .logo {
                font-size:1.2rem;
            }
            .lesson-complete-content {
                align-items:flex-start;
            }
            .lesson-complete-card .btn {
                width:100%;
                justify-content:center;
            }

            .tf-header-controls,
            .tf-controls {
                width:120px;
            }

            .tf-row {
                align-items:flex-start;
            }
        }

        /* TABLES INSIDE LESSON CONTENT */
        .lesson-body table {
            margin: 18px auto;
            border-collapse: collapse;
            width: 100%;
            max-width: 640px;
            background: #ffffff;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            font-size: 0.95rem;
        }

        .lesson-block table {
            margin-top: 12px;
            margin-bottom: 12px;
        }

        .lesson-body th,
        .lesson-body td {
            border: 1px solid rgba(0, 0, 0, 0.05);
            padding: 8px 10px;
            text-align: center;
        }

        .lesson-body thead th,
        .lesson-body tr:first-child th {
            background: var(--accent);
            color: #000;
            font-weight: 700;
        }

        .lesson-body tbody tr:nth-child(even),
        .lesson-body tr:nth-child(even) td {
            background: #fffaf3;
        }

        .lesson-body tbody tr:first-child td {
            border-top-color: rgba(0, 0, 0, 0.08);
        }

        .lesson-body table {
            display: table;
        }

        @media (max-width: 600px) {
            .lesson-body table {
                display: block;
                width: 100%;
                overflow-x: auto;
            }
        }