body.lesson-scroll-locked{
        overflow:hidden;
        overscroll-behavior:none;
    }
    body.lesson-scroll-locked .page-shell--lesson{
        min-height:100dvh;
        padding-bottom:0 !important;
        overflow:hidden;
    }
    body.lesson-scroll-locked .container--lesson{
        padding-top:0 !important;
        padding-bottom:0 !important;
    }
    .lesson-mobile-page{
        display:grid;
        gap:3px;
        height:var(--lesson-page-height, calc(100dvh - var(--lesson-bottom-reserve, 0px) - 6px));
        min-height:0;
        padding-bottom:0;
        overflow:hidden;
        margin-top:0;
        isolation:isolate;
    }
    .lesson-layout{
        display:grid;
        gap:3px;
        min-height:0;
        height:var(--lesson-page-height, calc(100dvh - var(--lesson-bottom-reserve, 0px) - 6px));
        grid-template-rows:auto minmax(0,1fr);
        overflow:hidden;
    }
    .lesson-stage-top,
    .lesson-stage-bottom{
        min-width:0;
        min-height:0;
    }
    .lesson-stage-top{
        position:relative;
        z-index:60;
        display:grid;
        grid-template-rows:auto auto auto;
        gap:0;
        min-height:0;
        overflow:visible;
        align-content:start;
    }
    .lesson-progress-strip{
        position:sticky;
        top:calc(var(--lesson-topbar-offset, 0px) + env(safe-area-inset-top, 0px));
        z-index:24;
        align-self:start;
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:4px;
        padding:3px;
        margin:0;
        border-radius:14px;
        background:rgba(255,255,255,.92);
        backdrop-filter:blur(14px);
        border:1px solid rgba(227,234,242,.96);
        box-shadow:0 12px 26px rgba(15,23,42,.08);
    }
    .lesson-progress-strip.is-three{grid-template-columns:repeat(3,minmax(0,1fr));}
    .lesson-progress-pill{
        min-width:0;
        min-height:30px;
        display:grid;
        align-content:center;
        justify-items:center;
        text-align:center;
        gap:1px;
        padding:4px 6px;
        border-radius:11px;
        background:#fff;
        text-decoration:none;
        color:var(--text);
        font:inherit;
        cursor:pointer;
        appearance:none;
        -webkit-appearance:none;
        margin:0;
        border:1px solid rgba(227,234,242,.95);
        opacity:.92;
        transform:scale(.96);
        transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
    }
    .lesson-progress-pill.is-current{
        opacity:1;
        transform:translateY(-1px) scale(1.045);
        color:#fff;
        background:linear-gradient(135deg,var(--primary-strong) 0%, var(--primary) 100%);
        border-color:transparent;
        box-shadow:0 12px 22px rgba(15,143,116,.18);
    }
    .lesson-progress-pill.is-complete{
        opacity:1;
        color:var(--secondary);
        background:linear-gradient(135deg, var(--secondary-soft) 0%, #ffffff 100%);
        border-color:rgba(53,92,154,.12);
        box-shadow:0 8px 16px rgba(36,59,107,.07);
    }
    .lesson-progress-pill.is-callout{
        opacity:1;
        transform:translateY(-1px) scale(1.055);
        color:#51320f;
        background:linear-gradient(135deg,var(--accent-warm-soft) 0%, #efd5b3 100%);
        border-color:transparent;
        box-shadow:0 12px 24px rgba(154,98,36,.15);
    }
    .lesson-progress-label{
        font-size:.50rem;
        font-weight:900;
        opacity:.82;
        line-height:1.15;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:100%;
    }
    .lesson-progress-value{
        font-size:.66rem;
        font-weight:950;
        line-height:1.08;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:100%;
    }
    .lesson-progress-pill.is-current .lesson-progress-label,
    .lesson-progress-pill.is-current .lesson-progress-value,
    .lesson-progress-pill.is-callout .lesson-progress-label,
    .lesson-progress-pill.is-callout .lesson-progress-value{opacity:1;}

    .lesson-media-block{
        display:grid;
        gap:3px;
        min-width:0;
    }
    .lesson-media-actions{display:none;}
    .lesson-media-toggle{white-space:nowrap;}
    .lesson-media-toggle.is-collapsed{
        color:#fff;
        background:linear-gradient(135deg,var(--primary-strong) 0%,var(--primary) 100%);
        border-color:transparent;
    }
    .lesson-media-toggle-icon{font-size:.78rem;line-height:1;}
    .lesson-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
    .lesson-layout.is-media-collapsed .lesson-media-block{gap:0;}
    .lesson-layout.is-media-collapsed .lesson-player-shell{display:none;}

    .lesson-player-shell{
        position:relative;
        z-index:65;
        min-height:0;
        overflow:visible;
        margin-top:0;
        width:100%;
        aspect-ratio:16/9;
        max-height:28dvh;
        border-radius:22px;
        background:#0f172a;
        box-shadow:0 16px 30px rgba(15,23,42,.14);
    }
    .lesson-player-shell video,
    .lesson-player-shell audio{
        width:100%;
        height:100%;
        min-height:0;
        display:block;
        background:#0f172a;
        border-radius:inherit;
    }
    .lesson-player-shell video{
        object-fit:contain;
    }
    .lesson-player-shell audio{
        min-height:0;
        padding:10px;
        background:linear-gradient(135deg,#16305e 0%,#0f172a 100%);
    }
    .lesson-layout.is-portrait-media .lesson-player-shell{
        aspect-ratio:9/13;
        max-height:36dvh;
        background:radial-gradient(circle at top,#24406e 0%,#0f172a 72%);
    }
    .lesson-layout.is-portrait-media .lesson-player-shell video{
        object-fit:contain;
    }
    .lesson-layout.is-landscape-media .lesson-player-shell{
        aspect-ratio:16/9;
        max-height:30dvh;
    }
    .lesson-player-shell--audio{
        aspect-ratio:auto;
        height:98px;
        max-height:98px;
        padding:34px 7px 7px;
        box-sizing:border-box;
        background:linear-gradient(135deg,#16305e 0%,#0f172a 100%);
    }
    .lesson-player-shell--audio audio{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        width:100%;
        height:54px;
        min-height:54px;
        padding:0;
        border-radius:14px;
        background:transparent;
    }
    .playback-speed-control{
        position:absolute;
        left:7px;
        right:auto;
        top:6px;
        z-index:90;
        direction:ltr;
    }
    .lesson-media-support-link{
        position:absolute;
        right:7px;
        left:auto;
        top:6px;
        z-index:90;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:3px;
        min-height:24px;
        padding:0 7px;
        border-radius:999px;
        background:rgba(15,23,42,.64);
        border:1px solid rgba(255,255,255,.18);
        color:#fff;
        text-decoration:none;
        font-size:.58rem;
        font-weight:900;
        backdrop-filter:blur(8px);
        box-shadow:0 6px 14px rgba(15,23,42,.14);
    }
    .playback-speed-toggle{
        min-width:46px;
        min-height:24px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:3px;
        padding:0 6px;
        border:1px solid rgba(255,255,255,.26);
        border-radius:999px;
        background:rgba(15,23,42,.64);
        color:#fff;
        font-size:.61rem;
        font-weight:950;
        cursor:pointer;
        box-shadow:0 8px 18px rgba(15,23,42,.18);
        backdrop-filter:blur(12px);
        -webkit-tap-highlight-color:transparent;
    }
    .playback-speed-toggle:focus-visible{outline:3px solid rgba(255,255,255,.28);outline-offset:2px;}
    .playback-speed-menu{
        position:absolute;
        top:calc(100% + 5px);
        inset-inline-start:0;
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:3px;
        min-width:182px;
        max-width:calc(100vw - 24px);
        padding:5px;
        border-radius:14px;
        z-index:999;
        border:1px solid rgba(227,234,242,.92);
        background:rgba(255,255,255,.96);
        box-shadow:0 14px 28px rgba(15,23,42,.18);
        backdrop-filter:blur(14px);
    }
    .playback-speed-menu[hidden]{display:none !important;}
    .playback-speed-option{
        min-height:25px;
        border:0;
        border-radius:10px;
        background:transparent;
        color:var(--text);
        font-size:.68rem;
        font-weight:900;
        cursor:pointer;
    }
    .playback-speed-option:hover,
    .playback-speed-option:focus-visible{
        outline:0;
        background:var(--primary-soft);
        color:var(--primary-strong);
    }
    .playback-speed-option.is-active{
        background:linear-gradient(135deg,var(--primary-strong) 0%,var(--primary) 100%);
        color:#fff;
    }

    .lesson-tabs{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:4px;
        padding:3px;
        margin:0;
        border-radius:14px;
        background:linear-gradient(135deg,rgba(255,255,255,.96) 0%,rgba(244,248,252,.94) 100%);
        border:1px solid rgba(227,234,242,.92);
        box-shadow:0 10px 24px rgba(15,23,42,.07);
        flex:0 0 auto;
    }
    .lesson-tab{
        --tab-color:#0f8f74;
        --tab-soft:rgba(23,179,159,.11);
        --tab-border:rgba(23,179,159,.24);
        min-height:28px;
        border:1px solid var(--tab-border);
        border-radius:12px;
        background:linear-gradient(180deg,#fff 0%,var(--tab-soft) 100%);
        color:var(--tab-color);
        font-weight:950;
        font-size:.72rem;
        cursor:pointer;
        transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:4px;
        position:relative;
        overflow:hidden;
        isolation:isolate;
        -webkit-tap-highlight-color:transparent;
    }
    .lesson-tab[data-lesson-tab="text"]{
        --tab-color:#2563eb;
        --tab-soft:rgba(37,99,235,.11);
        --tab-border:rgba(37,99,235,.22);
    }
    .lesson-tab[data-lesson-tab="vocab"]{
        --tab-color:#d97706;
        --tab-soft:rgba(245,158,11,.16);
        --tab-border:rgba(245,158,11,.28);
    }
    .lesson-tab[data-lesson-tab="grammar"]{
        --tab-color:#7c3aed;
        --tab-soft:rgba(124,58,237,.12);
        --tab-border:rgba(124,58,237,.24);
    }
    .lesson-tab:hover,
    .lesson-tab:focus-visible{
        transform:translateY(-1px);
        box-shadow:0 10px 18px rgba(15,23,42,.09);
        outline:0;
    }
    .lesson-tab.is-active{
        color:#fff;
        border-color:transparent;
        transform:translateY(-1px);
        box-shadow:0 12px 22px rgba(15,23,42,.14);
    }
    .lesson-tab.is-active[data-lesson-tab="text"]{background:linear-gradient(135deg,#1d4ed8 0%,#60a5fa 100%);}
    .lesson-tab.is-active[data-lesson-tab="vocab"]{background:linear-gradient(135deg,#d97706 0%,#fbbf24 100%);}
    .lesson-tab.is-active[data-lesson-tab="grammar"]{background:linear-gradient(135deg,#6d28d9 0%,#a78bfa 100%);}


    .lesson-stage-bottom{
        position:relative;
        z-index:1;
        min-height:0;
        height:100%;
        border-radius:18px;
        background:#fff;
        border:1px solid var(--border);
        box-shadow:var(--shadow-sm);
        overflow:hidden;
        contain:layout paint;
    }
    .lesson-panel{
        height:100%;
        min-height:0;
        overflow:hidden;
        display:grid;
        grid-template-rows:auto minmax(0,1fr) auto;
        gap:5px;
        padding:6px 6px 6px;
    }
    .lesson-panel[hidden]{display:none !important;}
    .lesson-panel--text{grid-template-rows:auto minmax(0,1fr) auto;}

    .transcript-toolbar,
    .vocab-toolbar{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:5px;
    }
    .panel-title{
        margin:0;
        font-size:.74rem;
        color:var(--text-soft);
        font-weight:950;
    }
    .dialog-mode-toggle{
        display:flex;
        gap:4px;
        flex-wrap:nowrap;
        min-width:0;
    }
    .mode-btn{
        min-height:25px;
        padding:0 8px;
        border-radius:999px;
        border:1px solid var(--border);
        background:#fff;
        color:var(--text-soft);
        font-size:.64rem;
        font-weight:900;
        cursor:pointer;
    }
    .mode-btn.is-active{
        color:#fff;
        background:linear-gradient(135deg,var(--primary-strong) 0%, var(--primary) 100%);
        border-color:transparent;
    }
    .mode-btn--auto{
        min-width:62px;
    }
    .mode-btn--media{
        min-width:50px;
        padding-inline:9px;
        font-size:.62rem;
    }
    .lesson-media-toggle{
        white-space:nowrap;
    }
    .lesson-support-mini{
        min-height:25px;
        min-width:28px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:0 8px;
        border-radius:999px;
        border:1px solid rgba(23,179,159,.20);
        background:rgba(240,253,250,.92);
        color:var(--primary-strong);
        text-decoration:none;
        font-size:.66rem;
        font-weight:950;
        white-space:nowrap;
    }
    .lesson-support-mini:active{transform:translateY(1px)}
    .lesson-speaking-support-link{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        align-self:center;
        margin-top:4px;
        color:var(--text-soft);
        text-decoration:none;
        font-size:.72rem;
        font-weight:850;
    }
    .lesson-media-toggle.is-collapsed{
        color:#fff;
        background:linear-gradient(135deg,var(--primary-strong) 0%,var(--primary) 100%);
        border-color:transparent;
    }
    .transcript-toolbar{flex-wrap:wrap;}
    .transcript-toolbar-actions{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;justify-content:space-between;width:100%;}
    .lesson-panel .panel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
    .transcript-player-controls{
        display:flex;
        align-items:center;
        gap:3px;
        flex:0 0 auto;
        padding:2px 3px;
        border-radius:999px;
        border:1px solid rgba(23,179,159,.12);
        background:linear-gradient(135deg,rgba(244,252,250,.96) 0%,rgba(255,255,255,.96) 100%);
    }
    .mini-player-btn{
        width:25px;
        height:25px;
        min-width:25px;
        border-radius:999px;
        border:1px solid rgba(154,98,36,.22);
        background:linear-gradient(135deg,var(--accent-warm-soft) 0%,#fff 100%);
        color:var(--accent-warm-strong);
        display:grid;
        place-items:center;
        font-size:.68rem;
        font-weight:950;
        cursor:pointer;
        box-shadow:none;
        transition:transform .16s ease, background .16s ease, border-color .16s ease;
        -webkit-tap-highlight-color:transparent;
    }
    .mini-player-btn[data-media-play-toggle]{
        width:29px;
        height:29px;
        min-width:29px;
        border-color:transparent;
        background:linear-gradient(135deg,var(--primary-strong) 0%,var(--primary) 100%);
        color:#fff;
        font-size:.76rem;
        box-shadow:0 5px 11px rgba(15,143,116,.16);
    }
    .mini-player-btn:active{transform:scale(.95);}
    .mini-player-btn:focus-visible{outline:3px solid rgba(23,179,159,.20);outline-offset:2px;}
    .mini-player-btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none;}
    .panel-back-to-text{
        min-height:26px;
        padding:0 10px;
        border-radius:999px;
        border:1px solid rgba(23,179,159,.18);
        background:var(--primary-soft);
        color:var(--primary-strong);
        font-size:.70rem;
        font-weight:950;
        cursor:pointer;
    }
    .vocab-toolbar{justify-content:flex-end;}

    .transcript-empty,.vocab-empty{padding:18px 10px;color:var(--text-soft);text-align:center;font-size:.82rem;}

    .lesson-practice-cta-wrap{
        padding-top:2px;
    }
    .lesson-practice-cta{
        min-height:40px;
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        padding:0 16px;
        border-radius:14px;
        text-decoration:none;
        font-size:.84rem;
        font-weight:950;
        letter-spacing:-.01em;
        color:#fff;
        background:linear-gradient(135deg,var(--secondary) 0%, var(--info) 42%, var(--primary) 100%);
        box-shadow:0 14px 24px rgba(36,59,107,.16);
        transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
    }
    .lesson-practice-cta:active{transform:translateY(1px);}
    .lesson-practice-cta .cta-kicker{
        font-size:.74rem;
        font-weight:900;
        opacity:.84;
    }
    .lesson-practice-cta .cta-title{
        display:flex;
        align-items:center;
        gap:6px;
    }
    .lesson-practice-cta.is-ready{
        background:linear-gradient(135deg,var(--primary-strong) 0%, var(--primary) 100%);
        box-shadow:0 16px 28px rgba(15,143,116,.20);
    }
    .lesson-practice-cta.is-subtle{
        opacity:.94;
        filter:saturate(.96);
    }

    .lesson-panel--vocab,
    .lesson-panel--grammar{
        grid-template-rows:auto minmax(0,1fr);
        overflow:hidden;
    }
    .vocab-shell{
        min-height:0;
        height:100%;
        overflow:hidden;
    }
    .vocab-list{
        min-height:0;
        height:100%;
        overflow-y:auto;
        overflow-x:hidden;
        padding:4px 4px 16px;
        display:flex;
        flex-direction:column;
        gap:12px;
        scrollbar-width:thin;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }
    .vocab-card{
        flex:0 0 auto;
        border:1px solid var(--border);
        border-radius:18px;
        background:#fff;
        overflow:hidden;
        box-shadow:0 10px 18px rgba(15,23,42,.05);
        transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .vocab-card.is-active{
        border-color:rgba(23,179,159,.26);
        box-shadow:0 16px 30px rgba(15,143,116,.10);
    }
    .vocab-summary-row{
        display:grid;
        grid-template-columns:48px minmax(0,1fr) 40px;
        align-items:center;
        gap:10px;
        padding:12px;
        user-select:none;
    }
    .vocab-speak{
        width:48px;
        height:48px;
        min-width:48px;
        border-radius:14px;
        border:1px solid rgba(23,179,159,.14);
        background:linear-gradient(135deg,var(--primary-soft) 0%, #ffffff 100%);
        color:var(--primary-strong);
        display:grid;
        place-items:center;
        cursor:pointer;
        font-size:1.2rem;
        font-weight:900;
        box-shadow:0 8px 18px rgba(15,143,116,.10);
        transition:transform .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
    }
    .vocab-speak.is-speaking{
        transform:scale(.94);
        background:linear-gradient(135deg,var(--primary-strong) 0%, var(--primary) 100%);
        color:#fff;
    }
    .vocab-speak.is-unavailable{
        opacity:.54;
        cursor:not-allowed;
    }
    .vocab-summary-main{
        min-width:0;
        width:100%;
        display:grid;
        gap:4px;
        background:none;
        border:0;
        padding:0;
        text-align:initial;
        font:inherit;
        cursor:pointer;
    }
    .vocab-word{
        direction:ltr;
        text-align:left;
        color:var(--text);
        font-size:1rem;
        line-height:1.2;
        font-weight:950;
        overflow-wrap:anywhere;
    }
    .vocab-meaning-short{
        color:var(--text-soft);
        font-size:.86rem;
        line-height:1.55;
        overflow-wrap:anywhere;
    }
    .vocab-row-actions{
        display:flex;
        align-items:center;
        justify-content:flex-end;
    }
    .vocab-open{
        width:40px;
        min-width:40px;
        height:40px;
        padding:0;
        border-radius:12px;
        border:1px solid var(--border);
        background:var(--surface-soft);
        color:var(--text-soft);
        display:grid;
        place-items:center;
        cursor:pointer;
        font-size:1rem;
        transition:transform .18s ease, background .18s ease, color .18s ease;
    }
    .vocab-card.is-active .vocab-open{
        background:var(--primary-soft);
        color:var(--primary-strong);
        transform:rotate(-90deg);
    }
    .vocab-detail{
        display:block;
        padding:0 12px 12px;
        border-top:1px solid #eef1f7;
        background:linear-gradient(180deg,#fbfefd 0%,#ffffff 100%);
    }
    .vocab-detail[hidden]{display:none !important;}
    .vocab-detail-inner{
        display:grid;
        gap:10px;
        padding-top:12px;
    }
    .vocab-detail-section{display:grid;gap:4px;}
    .vocab-detail-label{font-size:.64rem;font-weight:900;color:var(--text-soft);}
    .vocab-detail-meaning{color:var(--text-soft);font-size:.82rem;line-height:1.75;}
    .vocab-detail-example-en{direction:ltr;text-align:left;color:var(--text);font-size:.86rem;line-height:1.7;overflow-wrap:anywhere;}
    .vocab-detail-example-fa{direction:rtl;text-align:right;color:var(--text-soft);font-size:.78rem;line-height:1.78;overflow-wrap:anywhere;}
    .vocab-detail-empty{color:var(--text-faint);font-size:.74rem;line-height:1.7;}
    .vocab-detail-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:4px;align-items:stretch;}
    .vocab-detail-actions .btn,
    .vocab-detail-actions .vocab-action-form .btn{width:100%;min-height:38px;border-radius:11px;padding:6px 6px;font-size:.60rem;font-weight:900;line-height:1.25;white-space:normal;justify-content:center;text-align:center;}
    .vocab-detail-actions .btn.is-in-leitner,
    .vocab-detail-actions .vocab-action-form .btn.is-in-leitner{
        background:var(--primary-soft);
        color:var(--primary-strong);
        border-color:rgba(23,179,159,.18);
        box-shadow:none;
    }
    .vocab-detail-actions .btn.is-in-leitner[disabled],
    .vocab-detail-actions .vocab-action-form .btn.is-in-leitner[disabled]{
        opacity:1;
        cursor:default;
    }
    .vocab-action-form{margin:0;}
    .vocab-toast{
        position:absolute;
        inset-inline:12px;
        bottom:12px;
        display:flex;
        justify-content:center;
        pointer-events:none;
        opacity:0;
        transform:translateY(8px);
        transition:opacity .22s ease, transform .22s ease;
        z-index:8;
    }
    .vocab-toast.is-visible{opacity:1;transform:translateY(0);}
    .vocab-toast-bubble{
        max-width:88%;
        padding:10px 14px;
        border-radius:999px;
        background:rgba(15,23,42,.78);
        color:#fff;
        font-size:.66rem;
        font-weight:800;
        line-height:1.35;
        box-shadow:0 10px 24px rgba(15,23,42,.16);
        backdrop-filter:blur(10px);
    }
    .transcript-list{
        min-height:0;
        height:100%;
        overflow-y:auto;
        overflow-x:hidden;
        padding:3px 2px 12px;
        display:grid;
        gap:6px;
        align-content:start;
        scrollbar-width:thin;
        overscroll-behavior:contain;
        scroll-padding-top:var(--lesson-transcript-safe-top, 18px);
        scroll-padding-bottom:var(--lesson-transcript-safe-bottom, 24px);
        -webkit-overflow-scrolling:touch;
    }
    .transcript-row,
    .transcript-segment{
        display:grid;
        gap:3px;
        padding:9px 10px 9px;
        border-radius:14px;
        border:1px solid var(--border);
        background:#fff;
        box-shadow:0 8px 18px rgba(15,23,42,.04);
        transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
    }
    .transcript-segment[data-clickable="true"]{cursor:pointer;}
    .transcript-segment.is-active{
        border-color:rgba(15,143,116,.44);
        background:linear-gradient(135deg,#e8f8f3 0%,#f4fbf9 58%,#ffffff 100%);
        box-shadow:
            0 12px 24px rgba(15,143,116,.13),
            inset 0 0 0 1px rgba(23,179,159,.10);
    }
    .transcript-speaker{
        direction:ltr;
        text-align:left;
        color:var(--text-soft);
        font-size:.66rem;
        line-height:1.35;
        font-weight:800;
        letter-spacing:.01em;
    }
    .transcript-en{
        direction:ltr;
        text-align:left;
        color:var(--text);
        font-size:.95rem;
        line-height:1.62;
        font-weight:800;
    }
    .transcript-fa{
        direction:rtl;
        text-align:right;
        color:var(--text-soft);
        font-size:.82rem;
        line-height:1.72;
        font-weight:700;
    }
    .transcript-segment.is-active .transcript-en{
        color:var(--secondary);
        font-weight:950;
    }
    .transcript-segment.is-active .transcript-fa{
        color:var(--primary-strong);
    }
    [data-transcript-host][data-mode="english"] .transcript-fa{display:none;}

    @media (max-width:360px){
        .lesson-progress-strip{gap:2px;padding:2px;}
        .lesson-progress-pill{min-height:29px;padding:3px 2px;}
        .lesson-progress-label{font-size:.47rem;}
        .lesson-progress-value{font-size:.60rem;}
    }

    @media (max-width:720px){
        .lesson-mobile-page{margin-top:0;}
        .lesson-media-actions{display:none;}
        .lesson-progress-strip{position:relative;top:auto;z-index:2;}
        .lesson-layout{
            height:var(--lesson-page-height, calc(100dvh - var(--lesson-bottom-reserve, 0px) - 6px));
            grid-template-rows:auto minmax(0,1fr);
        }
        .lesson-player-shell{
            aspect-ratio:16/9;
            max-height:min(26dvh, 210px);
        }
        .lesson-layout.is-portrait-media .lesson-player-shell{
            aspect-ratio:9/13;
            max-height:min(34dvh, 330px);
        }
        .lesson-layout.is-landscape-media .lesson-player-shell{
            aspect-ratio:16/9;
            max-height:min(28dvh, 230px);
        }
        .lesson-player-shell--audio{height:98px;max-height:98px;}
        .lesson-stage-bottom{
            min-height:0;
        }
        .panel-title{font-size:.72rem;}
        .transcript-en{font-size:.93rem; line-height:1.72;}
        .transcript-fa{font-size:.79rem; line-height:1.8;}
    }

    .grammar-shell{
        min-height:0;
        height:100%;
        overflow-y:auto;
        overflow-x:hidden;
        padding:4px 4px 16px;
        scrollbar-width:thin;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }
    .lesson-grammar-card{
        position:relative;
        display:grid;
        gap:14px;
        padding:16px;
        border-radius:18px;
        background:
            radial-gradient(circle at top left, rgba(23,179,159,.16) 0%, rgba(23,179,159,0) 34%),
            linear-gradient(135deg,#F3FBF8 0%,#FFFFFF 58%,#F3F6FC 100%);
        border:1px solid rgba(23,179,159,.16);
        box-shadow:0 14px 30px rgba(15,143,116,.08);
        overflow:hidden;
    }
    .lesson-grammar-card::before{
        content:"";
        position:absolute;
        inset-inline-start:0;
        top:0;
        bottom:0;
        width:4px;
        background:linear-gradient(180deg,var(--primary-strong) 0%, var(--primary) 55%, var(--secondary) 100%);
        opacity:.9;
    }
    .lesson-grammar-top{
        position:relative;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        flex-wrap:wrap;
    }
    .lesson-grammar-kicker{
        display:inline-flex;
        align-items:center;
        gap:6px;
        min-height:28px;
        padding:5px 10px;
        border-radius:999px;
        background:rgba(23,179,159,.11);
        color:var(--primary-strong);
        font-size:.64rem;
        font-weight:950;
        letter-spacing:-.01em;
    }
    .lesson-grammar-icon{
        width:34px;
        height:34px;
        border-radius:13px;
        display:grid;
        place-items:center;
        background:#fff;
        color:var(--primary-strong);
        border:1px solid rgba(23,179,159,.14);
        box-shadow:0 10px 18px rgba(15,143,116,.08);
    }
    .lesson-grammar-title{
        position:relative;
        margin:0;
        color:var(--text);
        font-size:1.02rem;
        font-weight:950;
        line-height:1.65;
        letter-spacing:-.02em;
    }
    .lesson-grammar-body-card{
        position:relative;
        display:grid;
        gap:8px;
        padding:12px;
        border-radius:17px;
        background:rgba(255,255,255,.78);
        border:1px solid rgba(227,234,242,.86);
    }
    .lesson-grammar-section-label{
        margin:0;
        color:var(--text-soft);
        font-size:.66rem;
        font-weight:950;
    }
    .lesson-grammar-body{
        direction:rtl;
        text-align:right;
        color:var(--text-soft);
        font-size:.86rem;
        line-height:2.05;
        font-weight:720;
        overflow-wrap:anywhere;
    }
    .lesson-grammar-examples-list{
        position:relative;
        display:grid;
        gap:10px;
    }
    .lesson-grammar-example{
        display:grid;
        gap:7px;
        padding:12px;
        border-radius:17px;
        background:#fff;
        border:1px solid rgba(227,234,242,.92);
        box-shadow:0 8px 16px rgba(15,23,42,.045);
    }
    .lesson-grammar-example-en{
        direction:ltr;
        text-align:left;
        color:var(--secondary);
        font-size:.94rem;
        line-height:1.75;
        font-weight:950;
        overflow-wrap:anywhere;
        unicode-bidi:plaintext;
    }
    .lesson-grammar-example-fa{
        direction:rtl;
        text-align:right;
        color:var(--text-soft);
        font-size:.72rem;
        line-height:1.72;
        font-weight:750;
        overflow-wrap:anywhere;
    }
    .grammar-empty{
        height:100%;
        min-height:180px;
        display:grid;
        place-items:center;
        padding:24px 14px;
        color:var(--text-soft);
        text-align:center;
        font-size:.84rem;
        line-height:1.72;
    }
    @media (max-width:720px){
        .lesson-tab{font-size:.68rem;min-height:28px;}
        .lesson-grammar-card{padding:14px;border-radius:20px;gap:12px;}
        .lesson-grammar-title{font-size:.96rem;line-height:1.75;}
        .lesson-grammar-body{font-size:.82rem;line-height:2;}
        .lesson-grammar-example-en{font-size:.90rem;}
        .lesson-grammar-example-fa{font-size:.78rem;}
    }