/* Source: css/course-engine-v233-question-core.css */
/* =========================================================
   1SAFETY Course Engine V2.3.3 — Question Core
   QUESTION_SINGLE / QUESTION_MULTI / TRUE_FALSE
   Visual-only layer. Business logic remains in course_answer.php.
   Palette: white / black / gray / 1SAFETY yellow; red only error.
   ========================================================= */

/* ---------- shared question surface ---------- */
#ca-form .ca-card--question{
    --q-yellow:#FFC400;
    --q-yellow-border:#D9A700;
    --q-yellow-soft:#FFF8D8;
    --q-text:#111315;
    --q-muted:#747C86;
    --q-line:#DDE2E7;
    --q-line-strong:#BFC6CE;
    --q-soft:#F5F6F7;
    --q-red:#D94B4B;
    --q-red-soft:#FFF1F1;
}

#ca-form .ca-card--question .ca-card__inner{
    padding:28px 34px 24px!important;
}
#ca-form .ca-card--question .ca-question{
    max-width:760px!important;
    margin:4px auto 18px!important;
    color:var(--q-text)!important;
    font-size:27px!important;
    line-height:1.22!important;
    font-weight:820!important;
    letter-spacing:-.025em!important;
}
#ca-form .ca-card--question .ca-options-label{
    max-width:760px!important;
    margin:0 auto 10px!important;
    color:var(--q-muted)!important;
    font-size:13px!important;
    line-height:1.35!important;
    font-weight:650!important;
    text-transform:none!important;
    letter-spacing:0!important;
}
#ca-form .ca-card--question .ca-options{
    max-width:760px!important;
    width:100%!important;
    margin:0 auto!important;
    gap:10px!important;
    padding:1px!important;
}
#ca-form .ca-card--question .ca-option{
    min-height:62px!important;
    height:auto!important;
    padding:13px 15px!important;
    gap:13px!important;
    align-items:center!important;
    border:1.5px solid var(--q-line)!important;
    border-radius:15px!important;
    background:#fff!important;
    color:var(--q-text)!important;
    box-shadow:none!important;
    font-size:16px!important;
    line-height:1.35!important;
    font-weight:650!important;
    cursor:pointer!important;
    transition:border-color .14s ease,background-color .14s ease,transform .10s ease!important;
}
@media(hover:hover){
    #ca-form .ca-card--question .ca-option:not(.is-disabled):hover{
        border-color:var(--q-line-strong)!important;
        background:#FCFCFD!important;
        transform:none!important;
    }
}
#ca-form .ca-card--question .ca-option:active:not(.is-disabled){
    transform:scale(.992)!important;
}
#ca-form .ca-card--question .ca-option > span:not(.ca-option__letter):not(.ca-option__state){
    flex:1 1 auto!important;
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
}

/* Selected is always yellow — no extra blue/green brand states. */
#ca-form .ca-card--question .ca-option.is-selected{
    border-color:var(--q-yellow-border)!important;
    background:var(--q-yellow-soft)!important;
    box-shadow:inset 0 0 0 1px rgba(255,196,0,.18)!important;
    transform:none!important;
}
#ca-form .ca-card--question .ca-option.is-disabled{
    cursor:default!important;
}
#ca-form .ca-card--question .ca-option.is-disabled:not(.is-correct):not(.is-wrong){
    opacity:.52!important;
}

/* Correct is 1SAFETY yellow. */
#ca-form .ca-card--question .ca-option.is-correct,
#ca-form .ca-card--question .ca-option.is-disabled.is-correct{
    opacity:1!important;
    pointer-events:none!important;
    border-color:var(--q-yellow-border)!important;
    background:var(--q-yellow-soft)!important;
    box-shadow:inset 0 0 0 1px rgba(255,196,0,.20)!important;
}
#ca-form .ca-card--question .ca-option.is-correct .ca-option__state{
    opacity:1!important;
    transform:scale(1)!important;
    background:var(--q-yellow)!important;
    color:#111!important;
}
#ca-form .ca-card--question .ca-option.is-correct .ca-option__state::before{
    content:'✓'!important;
    width:auto!important;
    height:auto!important;
    border:0!important;
    transform:none!important;
    font-size:15px!important;
    font-weight:900!important;
    color:#111!important;
}

/* Error is the only red semantic state. */
#ca-form .ca-card--question .ca-option.is-wrong,
#ca-form .ca-card--question .ca-option.is-disabled.is-wrong{
    opacity:1!important;
    pointer-events:none!important;
    border-color:#E29494!important;
    background:var(--q-red-soft)!important;
    box-shadow:none!important;
}
#ca-form .ca-card--question .ca-option.is-wrong .ca-option__state{
    opacity:1!important;
    transform:scale(1)!important;
    background:var(--q-red)!important;
    color:#fff!important;
}
#ca-form .ca-card--question .ca-option.is-wrong .ca-option__state::before{
    content:'×'!important;
    font-size:20px!important;
    line-height:1!important;
    color:#fff!important;
}

#ca-form .ca-card--question .ca-option__state{
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
    margin:0!important;
    border-radius:50%!important;
}

/* ---------- QUESTION_SINGLE ---------- */
#ca-form .ca-card--question.is-q-single .ca-option__letter{
    flex:0 0 34px!important;
    width:34px!important;
    height:34px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border:1.5px solid var(--q-line)!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#727B85!important;
    font-size:12px!important;
    font-weight:850!important;
}
#ca-form .ca-card--question.is-q-single .ca-option.is-selected .ca-option__letter,
#ca-form .ca-card--question.is-q-single .ca-option.is-correct .ca-option__letter{
    border-color:var(--q-yellow-border)!important;
    background:var(--q-yellow)!important;
    color:#111!important;
}
#ca-form .ca-card--question.is-q-single .ca-option.is-wrong .ca-option__letter{
    border-color:var(--q-red)!important;
    background:#fff!important;
    color:var(--q-red)!important;
}

/* ---------- QUESTION_MULTI ---------- */
#ca-form .ca-card--question.is-q-multi .ca-option__letter{
    position:relative!important;
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
    margin:0!important;
    border:1.5px solid #C8CED5!important;
    border-radius:9px!important;
    background:#fff!important;
    color:transparent!important;
    font-size:0!important;
}
#ca-form .ca-card--question.is-q-multi .ca-option__letter::after{
    content:'';
    position:absolute;
    left:8px;
    top:6px;
    width:10px;
    height:6px;
    border-left:3px solid transparent;
    border-bottom:3px solid transparent;
    transform:rotate(-45deg);
}
#ca-form .ca-card--question.is-q-multi .ca-option.is-selected .ca-option__letter,
#ca-form .ca-card--question.is-q-multi .ca-option.is-correct .ca-option__letter{
    border-color:var(--q-yellow-border)!important;
    background:var(--q-yellow)!important;
}
#ca-form .ca-card--question.is-q-multi .ca-option.is-selected .ca-option__letter::after,
#ca-form .ca-card--question.is-q-multi .ca-option.is-correct .ca-option__letter::after{
    border-left-color:#111!important;
    border-bottom-color:#111!important;
}
#ca-form .ca-card--question.is-q-multi .ca-option.is-wrong .ca-option__letter{
    border-color:var(--q-red)!important;
    background:#fff!important;
}
#ca-form .ca-card--question.is-q-multi .ca-option.is-wrong .ca-option__letter::after{
    content:'×';
    left:0;
    top:0;
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    border:0!important;
    transform:none!important;
    color:var(--q-red);
    font-size:19px;
    line-height:1;
}

/* ---------- TRUE_FALSE ---------- */
#ca-form .ca-card--question.is-q-truefalse .ca-options-label{
    text-align:center!important;
}
#ca-form .ca-card--question.is-q-truefalse .ca-options{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    overflow:visible!important;
}
#ca-form .ca-card--question.is-q-truefalse .ca-option{
    min-height:88px!important;
    justify-content:center!important;
    text-align:center!important;
    padding:18px 16px!important;
    font-size:18px!important;
    font-weight:800!important;
}
#ca-form .ca-card--question.is-q-truefalse .ca-option__letter{
    display:none!important;
}
#ca-form .ca-card--question.is-q-truefalse .ca-option > span:not(.ca-option__state){
    flex:0 1 auto!important;
}
#ca-form .ca-card--question.is-q-truefalse .ca-option__state{
    position:absolute!important;
    right:12px!important;
    top:12px!important;
}

/* ---------- feedback ---------- */
#ca-form .ca-card--question .ca-feedback.is-visible{
    max-width:760px!important;
    width:calc(100% - 68px)!important;
    margin:12px auto 0!important;
    padding:13px 14px!important;
    border-radius:14px!important;
    box-shadow:none!important;
}
#ca-form .ca-card--question .ca-feedback--correct{
    background:var(--q-yellow-soft)!important;
    border:1px solid #E5C45A!important;
}
#ca-form .ca-card--question .ca-feedback--correct .ca-feedback__icon{
    background:var(--q-yellow)!important;
}
#ca-form .ca-card--question .ca-feedback--correct .ca-feedback__icon svg{
    stroke:#111!important;
}
#ca-form .ca-card--question .ca-feedback--correct .ca-feedback__title{
    color:#111!important;
}
#ca-form .ca-card--question .ca-feedback--wrong{
    background:var(--q-red-soft)!important;
    border:1px solid #EDB0B0!important;
}
#ca-form .ca-card--question .ca-feedback--wrong .ca-feedback__icon{
    background:var(--q-red)!important;
}
#ca-form .ca-card--question .ca-feedback--wrong .ca-feedback__title{
    color:#A72F2F!important;
}
#ca-form .ca-card--question .ca-feedback__icon{
    flex:0 0 36px!important;
    width:36px!important;
    height:36px!important;
}
#ca-form .ca-card--question .ca-feedback__title{
    font-size:15px!important;
    font-weight:850!important;
}
#ca-form .ca-card--question .ca-feedback__sub{
    margin-top:2px!important;
    font-size:13px!important;
    line-height:1.42!important;
    color:#5F6873!important;
}

/* ---------- actions ---------- */
#ca-form .ca-card--question .ca-toolbar{
    padding:12px 34px 18px!important;
    border-top:1px solid #ECEFF2!important;
    background:#fff!important;
}
#ca-form .ca-card--question .ca-toolbar__inner{
    max-width:760px!important;
    gap:9px!important;
}
#ca-form .ca-card--question .ca-btn{
    min-height:50px!important;
    border-radius:12px!important;
    box-shadow:none!important;
}
#ca-form .ca-card--question .ca-btn--answer,
#ca-form .ca-card--question .ca-btn--continue{
    background:var(--q-yellow)!important;
    border:1px solid var(--q-yellow-border)!important;
    color:#111!important;
}
#ca-form .ca-card--question .ca-btn--answer:disabled,
#ca-form .ca-card--question .ca-btn--continue:disabled{
    background:#ECEFF2!important;
    border-color:#E1E5E9!important;
    color:#9AA1AA!important;
}
#ca-form .ca-card--question .ca-btn--prev{
    background:#fff!important;
    border:1px solid #D6DCE2!important;
    color:#111!important;
}
#ca-form .ca-card--question .ca-btn--skip{
    background:transparent!important;
    border:0!important;
    color:#707985!important;
}

/* ---------- phone ---------- */
@media(max-width:700px){
    #ca-form .ca-card--question .ca-card__inner{
        padding:22px 16px 16px!important;
    }
    #ca-form .ca-card--question .ca-question{
        max-width:none!important;
        margin:0 0 16px!important;
        font-size:23px!important;
        line-height:1.23!important;
        letter-spacing:-.02em!important;
    }
    #ca-form .ca-card--question .ca-options-label{
        max-width:none!important;
        margin:0 0 10px!important;
        font-size:13px!important;
    }
    #ca-form .ca-card--question .ca-options{
        max-width:none!important;
        gap:9px!important;
    }
    #ca-form .ca-card--question .ca-option{
        min-height:62px!important;
        padding:13px 13px!important;
        gap:12px!important;
        border-radius:14px!important;
        font-size:16px!important;
        line-height:1.32!important;
    }
    #ca-form .ca-card--question .ca-feedback.is-visible{
        width:auto!important;
        max-width:none!important;
        margin:8px 16px 0!important;
    }
    #ca-form .ca-card--question .ca-toolbar{
        position:sticky!important;
        bottom:0!important;
        z-index:120!important;
        padding:9px 12px calc(10px + env(safe-area-inset-bottom))!important;
        background:rgba(255,255,255,.98)!important;
        backdrop-filter:blur(10px)!important;
        -webkit-backdrop-filter:blur(10px)!important;
    }
    #ca-form .ca-card--question .ca-toolbar__inner{
        max-width:none!important;
        width:100%!important;
        gap:8px!important;
    }
    #ca-form .ca-card--question .ca-btn{
        min-height:52px!important;
        font-size:14px!important;
    }
    #ca-form .ca-card--question .ca-btn--answer{
        flex:1 1 auto!important;
        max-width:none!important;
    }
    #ca-form .ca-card--question .ca-btn--continue{
        flex:1 1 auto!important;
        max-width:none!important;
    }
    #ca-form .ca-card--question .ca-btn--prev{
        flex:0 0 auto!important;
        min-width:110px!important;
        margin-right:0!important;
    }

    #ca-form .ca-card--question.is-q-truefalse .ca-options{
        grid-template-columns:1fr 1fr!important;
        gap:9px!important;
    }
    #ca-form .ca-card--question.is-q-truefalse .ca-option{
        min-height:86px!important;
        padding:16px 10px!important;
        font-size:17px!important;
    }
}

@media(max-width:380px){
    #ca-form .ca-card--question.is-q-truefalse .ca-options{
        grid-template-columns:1fr!important;
    }
    #ca-form .ca-card--question.is-q-truefalse .ca-option{
        min-height:62px!important;
    }
}


/* Extracted from views/education/course/course_answer.php style#1 */
/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

#header { display: none !important; }

html {
    height: 100%;
    height: -webkit-fill-available;
}
:root {
    --ca-yellow: #FFE600;
    --ca-yellow-deep: #c8b800;
    --ca-green: #58cc02;
    --ca-green-soft: #f3ffea;
    --ca-red: #ff4b4b;
    --ca-red-soft: #fff1f1;
    --ca-blue: #1cb0f6;
}
body {
    height: 100%;
    height: -webkit-fill-available;
    background: #f7f8fa;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1a1a2e;
    overflow: hidden;
}

/* =========================================================
   SHELL — весь экран, flex-колонка
   ========================================================= */
.ca-shell {
    display: flex;
    flex-direction: column;
    /* Используем dvh там где поддерживается, иначе 100vh */
    height: 100vh;
    height: 100dvh;
    /* overflow hidden только здесь — не на html/body */
    overflow: hidden;
    position: relative;
}
.ca-shell::before {
    content: '';
    position: absolute;
    inset: auto -10% 12% -10%;
    height: 260px;
    background:
        radial-gradient(circle at center, rgba(255,230,0,0.16) 0%, rgba(255,230,0,0.06) 28%, rgba(255,230,0,0) 68%),
        radial-gradient(circle at 75% 40%, rgba(28,176,246,0.12) 0%, rgba(28,176,246,0) 56%);
    pointer-events: none;
    filter: blur(12px);
}

/* =========================================================
   HEADER
   ========================================================= */
.ca-header {
    flex-shrink: 0;
    height: 54px;
    background: #fff;
    border-bottom: 2px solid #e8ecf0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 10px;
    z-index: 10;
}

.ca-header__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.ca-header__logo img {
    height: 28px;
    width: auto;
    display: block;
}

.ca-header__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f2f5;
    border: none;
    cursor: pointer;
    transition: background .15s;
}
.ca-header__close:hover { background: #e4e7ec; }
.ca-header__close svg { width: 15px; height: 15px; stroke: #6b7280; }

.ca-header__bar-wrap {
    flex: 1;
    min-width: 40px;
    height: 12px;
    background: #e8ecf0;
    border-radius: 100px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}
.ca-header__bar-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 48%, rgba(255,255,255,0) 100%);
    transform: translateX(-130%);
    animation: caTrackSweep 3.1s linear infinite;
    pointer-events: none;
}
.ca-header__bar-wrap.is-flowing::before {
    animation-duration: 1s;
    opacity: .95;
}
.ca-header__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd400 0%, #FFE600 55%, #fff9b0 100%);
    border-radius: 100px;
    transition: box-shadow .35s ease, filter .35s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 rgba(255,230,0,0);
    background-size: 180% 100%;
    animation: caBarLiquid 2.2s linear infinite;
}
.ca-header__bar-fill::after {
    content: '';
    position: absolute;
    top: 2px; left: 4px; right: 4px; height: 3px;
    background: rgba(255,255,255,.4);
    border-radius: 100px;
}
.ca-header__bar-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(255,255,255,0) 18%, rgba(255,255,255,0.15) 35%, rgba(255,255,255,0.88) 50%, rgba(255,255,255,0.15) 65%, rgba(255,255,255,0) 82%);
    transform: translateX(-140%);
    animation: caBarSweep 2.4s ease-in-out infinite;
    pointer-events: none;
}
.ca-header__bar-wrap.is-energized .ca-header__bar-fill {
    box-shadow: 0 0 0 4px rgba(255,230,0,0.16), 0 0 26px rgba(255,230,0,0.26);
}
.ca-header__bar-fill.is-progressing {
    animation: caBarPulse .72s ease;
    box-shadow: 0 0 0 4px rgba(255,230,0,0.14), 0 0 24px rgba(255,230,0,0.22);
}
@keyframes caTrackSweep {
    0% { transform: translateX(-130%); }
    100% { transform: translateX(130%); }
}
@keyframes caBarSweep {
    0%, 20% { transform: translateX(-140%); }
    55% { transform: translateX(140%); }
    100% { transform: translateX(140%); }
}
@keyframes caBarPulse {
    0% { transform: scaleY(1); filter: brightness(1); }
    35% { transform: scaleY(1.16); filter: brightness(1.05); }
    100% { transform: scaleY(1); filter: brightness(1); }
}
@keyframes caBarLiquid {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.ca-header__shield {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #b8a000;
    white-space: nowrap;
}
.ca-header__shield svg { width: 20px; height: 20px; }

.ca-header__score-pill {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fffde0;
    border: 2px solid #FFE600;
    border-radius: 100px;
    padding: 2px 8px 2px 5px;
    font-size: 13px;
    font-weight: 800;
    color: #b8a000;
    white-space: nowrap;
}
.ca-header__score-pill svg { width: 15px; height: 15px; }

/* =========================================================
   TOPIC BAR
   ========================================================= */
.ca-topic-bar {
    flex-shrink: 0;
    background: #fffde6;
    border-bottom: 1px solid #fff176;
    padding: 3px 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #7a7000;
    font-weight: 600;
    overflow: hidden;
}
.ca-topic-bar__badge {
    flex-shrink: 0;
    background: #FFE600;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 100px;
    letter-spacing: .03em;
}
.ca-topic-bar__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   SCROLLABLE CONTENT AREA
   (header + topic-bar + toolbar = фиксированы, это скроллится)
   ========================================================= */
.ca-scroll {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    /* padding-bottom will be set dynamically via JS to account for toolbar */
}

/* =========================================================
   MAIN INNER
   ========================================================= */
.ca-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 0 14px;
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    /* min-height makes card stretch to fill available space */
    min-height: 100%;
    transition: transform .24s cubic-bezier(.22,1,.36,1), opacity .24s ease;
}

/* =========================================================
   TYPE ROW
   ========================================================= */
.ca-type-row {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 5px;
    animation: caScreenIn .42s cubic-bezier(.22,1,.36,1) both;
}

.ca-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 100px;
    border: 2px solid;
}
.ca-type-badge--material { color: #1cb0f6; border-color: #1cb0f6; background: #e8f7fe; }
.ca-type-badge--video    { color: #ff4b4b; border-color: #ff4b4b; background: #fff0f0; }
.ca-type-badge--test     { color: #ce82ff; border-color: #ce82ff; background: #f8f0ff; }

.ca-step-counter { font-size: 12px; font-weight: 600; color: #9ca3af; }
.ca-step-counter strong { color: #374151; }

/* =========================================================
   CARD
   ========================================================= */
.ca-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    border: 2px solid #e8ecf0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    margin-bottom: 4px;
    animation: caScreenIn .5s cubic-bezier(.22,1,.36,1) both;
    animation-delay: .04s;
    transform-origin: 50% 100%;
}
@media (hover: hover) {
    .ca-card:hover {
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
    }
}
@keyframes caScreenIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ca-card__inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 14px;
    gap: 0;
}

.ca-card--media {}

.ca-card__inner--media {}

/* =========================================================
   QUESTION TITLE
   ========================================================= */
.ca-question {
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
    color: #1a1a2e;
    margin-bottom: 12px;
}

/* =========================================================
   IMAGE MATERIAL
   ========================================================= */
.ca-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 960px;
    align-self: center;
    border-radius: 10px;
    background: #f7f8fa;
    overflow: hidden;
    margin: 0 auto;
}
.ca-img-wrap img {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    cursor: zoom-in;
    display: block;
}

/* =========================================================
   TEXT MATERIAL
   ========================================================= */
.ca-text-wrap {
    font-size: 15px;
    line-height: 1.65;
    color: #374151;
}
.ca-text-expand-hint {
    text-align: center;
    padding: 6px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #ccbb00;
    cursor: pointer;
    display: none;
}
.ca-text-expand-hint.visible { display: block; }

/* =========================================================
   MEDIA DESCRIPTION (текст под изображением/видео)
   ========================================================= */
.ca-media-desc {
    flex-shrink: 0;
    width: 100%;
    max-width: 960px;
    align-self: center;
    margin: 0 auto 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fffef5 0%, #f8fafc 100%);
    border: 1px solid #e8ecf0;
    border-left: 4px solid #FFE600;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
}

/* =========================================================
   VIDEO
   ========================================================= */
.ca-video-wrap {
    width: 100%;
    max-width: 960px;
    align-self: center;
    border-radius: 10px;
    background: #000;
    overflow: hidden;
}
.ca-video-wrap video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* =========================================================
   QUESTION IMAGE — inline
   ========================================================= */
.ca-qimg {
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.ca-qimg img {
    max-width: 100%;
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    border-radius: 10px;
    cursor: zoom-in;
    display: block;
}
.ca-qimg--top  { margin-bottom: 12px; }
.ca-qimg--bottom { margin-top: 12px; }

/* =========================================================
   ANSWER OPTIONS
   ========================================================= */
.ca-options-label {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 8px;
    margin-top: 4px;
}

.ca-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
    flex: 1 1 0;
    min-height: 0;
}
.ca-options::-webkit-scrollbar { width: 4px; }
.ca-options::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

.ca-option {
    all: unset;
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 13px;
    border: 2.5px solid #e2e8f0 !important;
    background: #fff !important;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #374151 !important;
    transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
    line-height: 1.35;
    box-sizing: border-box;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    transform: translateZ(0);
}
.ca-option::before, .ca-option::after { display: none !important; content: none !important; }
.ca-option input { display: none !important; }
.ca-option:active,
.ca-option.is-pressed {
    transform: scale(.985);
}

.ca-option__letter {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 2px solid #e2e8f0;
    font-size: 12px;
    font-weight: 800;
    color: #9ca3af;
    transition: all .15s;
}
.ca-option__state {
    margin-left: auto;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.78);
    transition: opacity .18s ease, transform .18s ease, background .18s ease, color .18s ease;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
}

/* hover только на не-touch устройствах */
@media (hover: hover) {
    .ca-option:hover {
        border-color: #1cb0f6 !important;
        background: #f0fbff !important;
        box-shadow: 0 3px 10px rgba(28,176,246,.14);
    }
    .ca-option:hover .ca-option__letter {
        border-color: #1cb0f6;
        color: #1cb0f6;
    }
}

/* ВЫБРАННЫЙ — синий */
.ca-option.is-selected {
    border-color: #1cb0f6 !important;
    background: #e8f7fe !important;
    box-shadow: 0 0 0 3px rgba(28,176,246,.18), 0 10px 20px rgba(28,176,246,.08);
    transform: translateY(-1px);
}
.ca-option.is-selected .ca-option__letter {
    background: #1cb0f6;
    border-color: #1cb0f6;
    color: #fff;
}

/* ВЕРНО — жёлтый */
.ca-option.is-correct {
    border-color: #58cc02 !important;
    background: #f3ffea !important;
    pointer-events: none;
    box-shadow: 0 0 0 3px rgba(88,204,2,.14), 0 12px 28px rgba(88,204,2,.10);
}
.ca-option.is-correct .ca-option__letter {
    background: #58cc02; border-color: #58cc02; color: #fff;
}
.ca-option.is-correct .ca-option__state {
    opacity: 1;
    transform: scale(1);
    background: #58cc02;
    color: #fff;
}

/* НЕВЕРНО — красный */
.ca-option.is-wrong {
    border-color: #ff4b4b !important;
    background: #fff1f1 !important;
    pointer-events: none;
    box-shadow: 0 0 0 3px rgba(255,75,75,.12);
    animation: caWrongAnswer .42s ease;
}
.ca-option.is-wrong .ca-option__letter {
    background: #ff4b4b; border-color: #ff4b4b; color: #fff;
}
.ca-option.is-wrong .ca-option__state {
    opacity: 1;
    transform: scale(1);
    background: #ff4b4b;
    color: #fff;
}
.ca-option.is-correct .ca-option__state::before {
    content: 'OK';
}
.ca-option.is-wrong .ca-option__state::before {
    content: 'X';
}
.ca-option.is-disabled { pointer-events: none; opacity: .65; }
@keyframes caWrongAnswer {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* =========================================================
   FEEDBACK BAR (внутри карточки, снизу)
   ========================================================= */
.ca-feedback {
    flex-shrink: 0;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 14px 18px 0;
    border: 1px solid transparent;
    border-radius: 18px;
    animation: feedbackIn .25s ease;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
@keyframes feedbackIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ca-feedback.is-visible { display: flex; }

/* ВЕРНО — зелёный */
.ca-feedback--correct {
    background: #f0fce4;
    border-color: #89e219;
}
.ca-feedback--correct .ca-feedback__icon { background: #58cc02; }
.ca-feedback--correct .ca-feedback__title { color: #2d7a00; }

/* НЕВЕРНО — красный */
.ca-feedback--wrong {
    background: #fff0f0;
    border-color: #ff8080;
}
.ca-feedback--wrong .ca-feedback__icon { background: #ff4b4b; }
.ca-feedback--wrong .ca-feedback__title { color: #cc0000; }

.ca-feedback__icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.ca-feedback__icon svg { width: 20px; height: 20px; stroke: #fff; }
.ca-feedback__body { flex: 1; }
.ca-feedback__title { font-size: 14px; font-weight: 800; margin-bottom: 2px; }
.ca-feedback__sub { font-size: 12px; font-weight: 500; color: #6b7280; }

.ca-explanation {
    display: none;
    padding: 12px 18px 16px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(20px);
    transition: max-height .52s cubic-bezier(.22,1,.36,1), opacity .34s ease, transform .34s ease;
}
.ca-explanation.is-visible {
    display: block;
    opacity: 1;
    max-height: 360px;
    transform: translateY(0);
}
.ca-explanation__card {
    border-radius: 22px;
    padding: 18px 18px 16px;
    border: 1px solid #e8ecf0;
    border-left-width: 0;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
    position: relative;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 250px;
    padding-bottom: 30px;
    scrollbar-width: thin;
    scrollbar-color: #9ca3af transparent;
}
.ca-explanation__card::-webkit-scrollbar { width: 7px; }
.ca-explanation__card::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 999px; }
.ca-explanation.is-visible + * {}
.ca-explanation--correct .ca-explanation__card {
    background: linear-gradient(180deg, #fbfff5 0%, #ffffff 100%);
    border-color: rgba(88,204,2,.18);
}
.ca-explanation--wrong .ca-explanation__card {
    background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
    border-color: rgba(255,75,75,.16);
}
.ca-explanation__card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #FFE600;
}
.ca-explanation--correct .ca-explanation__card::before {
    background: linear-gradient(180deg, #7ce12b 0%, #58cc02 100%);
}
.ca-explanation--wrong .ca-explanation__card::before {
    background: linear-gradient(180deg, #ff8c8c 0%, #ff4b4b 100%);
}
.ca-explanation__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.ca-explanation__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 12px 20px rgba(15, 23, 42, 0.10);
}
.ca-explanation--correct .ca-explanation__icon {
    background: linear-gradient(180deg, #7ce12b 0%, #58cc02 100%);
}
.ca-explanation--wrong .ca-explanation__icon {
    background: linear-gradient(180deg, #ff8c8c 0%, #ff4b4b 100%);
}
.ca-explanation__icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}
.ca-explanation__eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #7c8aa0;
    margin-bottom: 4px;
}
.ca-explanation__title {
    font-size: 20px;
    font-weight: 900;
    color: #1a1a2e;
    line-height: 1.15;
}
.ca-explanation__lead {
    font-size: 14px;
    line-height: 1.65;
    color: #475569;
    margin-bottom: 12px;
}
.ca-explanation__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.ca-explanation__list:empty {
    display: none;
}
.ca-explanation__list li {
    position: relative;
    padding-left: 28px;
    font-size: 14px;
    line-height: 1.55;
    color: #334155;
}
.ca-explanation__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff3a8;
    box-shadow: inset 0 -2px 0 rgba(200,184,0,.34);
}
.ca-explanation__list li::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9f8500;
}
.ca-explanation__footer {
    margin-top: 14px;
    margin-bottom: 4px;
    padding-top: 12px;
    border-top: 1px solid #eef2f6;
    font-size: 13px;
    font-weight: 700;
    color: #7c8798;
}

.ca-reward-toast {
    position: fixed;
    top: 118px;
    right: 16px;
    z-index: 120;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-12px) scale(.94);
    transition: opacity .22s ease, transform .22s ease;
}
.ca-reward-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.ca-reward-toast__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16);
}
.ca-reward-toast--positive .ca-reward-toast__pill {
    background: #fffde0;
    color: #7d6f00;
    border: 2px solid #FFE600;
}
.ca-reward-toast--warning .ca-reward-toast__pill {
    background: #fff1f1;
    color: #b42318;
    border: 2px solid #ffb4b4;
}

.ca-streak-banner {
    position: fixed;
    top: 92px;
    left: 50%;
    right: auto;
    z-index: 119;
    transform: translateX(-50%) translateY(-18px) scale(.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease, transform .24s ease;
}
.ca-streak-banner.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.ca-streak-banner__card {
    min-width: 214px;
    max-width: calc(100vw - 40px);
    padding: 14px 18px 14px 14px;
    border-radius: 26px;
    background: linear-gradient(180deg, #fff7d8 0%, #fffef6 100%);
    border: 2px solid rgba(255,230,0,.54);
    box-shadow: 0 22px 44px rgba(255,196,0,.18), 0 12px 22px rgba(15, 23, 42,.10);
    display: flex;
    align-items: center;
    gap: 12px;
}
.ca-streak-banner__badge {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffb300 0%, #ff7a00 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 900;
    box-shadow: inset 0 -4px 0 rgba(181,85,0,.55), 0 10px 20px rgba(255,122,0,.28);
}
.ca-streak-banner__body {
    min-width: 0;
}
.ca-streak-banner__title {
    font-size: 18px;
    font-weight: 900;
    color: #7b4f00;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-transform: none;
}
.ca-streak-banner__sub {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    color: #9c7300;
    line-height: 1.25;
}
.ca-header__bar-wrap.is-streaking .ca-header__bar-fill {
    box-shadow: 0 0 0 5px rgba(255,230,0,0.18), 0 0 32px rgba(255,230,0,0.34);
}

/* =========================================================
   TOOLBAR — прилипает к низу .ca-shell
   ========================================================= */
.ca-toolbar {
    flex-shrink: 0;
    z-index: 10;
    background: transparent;
    padding: 6px 14px;
    /* safe-area для iPhone с чёлкой, fallback для Android */
    padding-bottom: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    /* Гарантируем что тулбар всегда видим */
    min-height: 68px;
}
.ca-toolbar__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.ca-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    padding: 0 20px;
    border-radius: 14px;
    border: none;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: .02em;
    transition: transform .1s, box-shadow .15s, filter .15s, opacity .15s;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
}
.ca-btn:active { transform: scale(.96); }
.ca-btn svg { width: 16px; height: 16px; }

.ca-btn--skip {
    background: #f0f2f5;
    color: #6b7280;
    border: 2px solid #e2e8f0;
    min-width: 110px;
}
.ca-btn--skip:hover { background: #e4e7ec; }

.ca-btn--answer {
    flex: 0 1 auto;
    min-width: 140px;
    max-width: 240px;
    background: #FFE600;
    color: #5a5000;
    box-shadow: 0 4px 0 #c8b800;
}
.ca-btn--answer:hover { filter: brightness(1.06); }
.ca-btn--answer:active { box-shadow: none; transform: translateY(3px) scale(.98); }
.ca-btn--answer:disabled {
    background: #d1d5db; color: #9ca3af;
    box-shadow: 0 4px 0 #b0b7c0; cursor: not-allowed;
}

.ca-btn--continue {
    flex: 1;
    min-width: 100px;
    max-width: 160px;
    background: #FFE600;
    color: #5a5000;
    box-shadow: 0 4px 0 #c8b800;
    display: none;
    font-size: 14px;
}
.ca-btn--continue:hover { filter: brightness(1.06); }
.ca-btn--continue:active { box-shadow: none; transform: translateY(3px) scale(.98); }
.ca-btn--continue:disabled {
    background: #d1d5db; color: #9ca3af;
    box-shadow: 0 4px 0 #b0b7c0; cursor: not-allowed;
}

.ca-btn--next {
    flex: 1;
    background: #FFE600;
    color: #5a5000;
    box-shadow: 0 4px 0 #c8b800;
    display: none;
}
.ca-btn--next:hover { filter: brightness(1.05); }
.ca-btn--next:active { box-shadow: none; transform: translateY(3px) scale(.98); }

.ca-btn--end {
    flex: 1;
    background: #ce82ff;
    color: #fff;
    box-shadow: 0 4px 0 #a855f7;
}
.ca-btn--end:hover { filter: brightness(1.05); }
.ca-btn--end:active { box-shadow: none; transform: translateY(3px) scale(.98); }

.ca-btn--explain {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: #374151;
    border: 2px solid #e2e8f0;
    padding: 0;
    min-width: unset;
    font-size: 0;
    display: none;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}
.ca-btn--explain:hover { background: #e4e7ec; }
.ca-btn--explain svg {
    width: 20px;
    height: 20px;
    transition: transform .2s ease;
}
.ca-btn--explain.is-active svg {
    transform: rotate(180deg);
}
@media (hover: hover) {
    .ca-btn:hover {
        transform: translateY(-1px);
    }
}

/* ОБЪЯСНЕНИЕ — модальное окно */
.ca-explain-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,.72);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ca-explain-modal.is-open { display: flex; }
.ca-explain-modal__box {
    background: #fff;
    border-radius: 18px;
    max-width: min(560px, 95vw);
    width: 100%;
    padding: 28px 22px 22px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
    animation: modalPop .2s cubic-bezier(.34,1.56,.64,1);
}
.ca-explain-modal__close {
    position: absolute; top: 10px; right: 12px;
    background: #f0f2f5; border: none; cursor: pointer;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.ca-explain-modal__close svg { width: 14px; height: 14px; stroke: #374151; }
.ca-explain-modal__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.ca-explain-modal__icon {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ca-explain-modal__icon--correct { background: #58cc02; }
.ca-explain-modal__icon--wrong   { background: #ff4b4b; }
.ca-explain-modal__icon svg { width: 20px; height: 20px; stroke: #fff; }
.ca-explain-modal__title {
    font-size: 17px; font-weight: 800; color: #1a1a2e;
}
.ca-explain-modal__body {
    font-size: 15px; line-height: 1.7; color: #374151;
    background: #f7f8fa;
    border-radius: 10px;
    padding: 14px 16px;
    border-left: 4px solid #FFE600;
}

@keyframes shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.shake { animation: shake .4s ease; }

/* =========================================================
   MODAL
   ========================================================= */
.ca-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,.72);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ca-modal.is-open { display: flex; }
.ca-modal__box {
    background: #fff;
    border-radius: 18px;
    max-width: min(680px, 95vw);
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px 22px 22px;
    position: relative;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
    animation: modalPop .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalPop {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}
.ca-modal__close {
    position: absolute; top: 10px; right: 12px;
    background: #f0f2f5; border: none; cursor: pointer;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.ca-modal__close svg { width: 14px; height: 14px; stroke: #374151; }
.ca-modal__img { max-width: 100%; max-height: 75vh; object-fit: contain; border-radius: 10px; display: block; margin: 0 auto; }
.ca-modal__text { font-size: 15px; line-height: 1.7; color: #1a1a2e; }
.ca-modal__question { font-size: 19px; font-weight: 800; line-height: 1.45; color: #1a1a2e; }

/* =========================================================
   LOTTIE АНИМАЦИЯ — персонаж (Duolingo-стиль)
   ========================================================= */

/* Общая обёртка всей карточки с lottie */
.ca-card--lottie {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ca-card__inner--lottie {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 16px;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* ---- LEFT / RIGHT: персонаж сбоку, текст рядом ---- */
.ca-lottie-wrap {
    display: flex;
    width: 100%;
    gap: 16px;
    align-items: center;
    flex: 1;
    min-height: 0;
}

/* Персонаж справа */
.ca-lottie-wrap--right { flex-direction: row; }
/* Персонаж слева */
.ca-lottie-wrap--left  { flex-direction: row-reverse; }
/* Персонаж сверху */
.ca-lottie-wrap--top {
    flex-direction: column;
    align-items: center;
}
/* Персонаж снизу */
.ca-lottie-wrap--bottom {
    flex-direction: column-reverse;
    align-items: center;
}

/* ---- Контейнер анимации ---- */
.ca-lottie-player {
    flex-shrink: 0;
    overflow: visible;
    border-radius: 14px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    --ca-lottie-max-height: min(48vh, 420px);
    --ca-lottie-max-height: min(48dvh, 420px);
}

/* Для left/right: ширина ~40% карточки,
   сохраняем аспект анимации через padding-bottom hack */
.ca-lottie-wrap--right .ca-lottie-player,
.ca-lottie-wrap--left  .ca-lottie-player {
    width: clamp(180px, 38%, 340px);
    height: var(--ca-lottie-max-height);
    max-height: calc(100vh - 250px);
    max-height: calc(100dvh - 250px);
}

/* Для top/bottom: ширина 100%, ограничение по высоте */
.ca-lottie-wrap--top .ca-lottie-player,
.ca-lottie-wrap--bottom .ca-lottie-player {
    width: min(100%, 420px);
    height: var(--ca-lottie-max-height);
    max-height: calc(100vh - 250px);
    max-height: calc(100dvh - 250px);
}

.ca-lottie-player lottie-player {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.ca-lottie-player.is-portrait {
    width: min(100%, 340px);
    --ca-lottie-max-height: min(52vh, 440px);
    --ca-lottie-max-height: min(52dvh, 440px);
}

.ca-lottie-wrap--right .ca-lottie-player.is-portrait,
.ca-lottie-wrap--left  .ca-lottie-player.is-portrait {
    width: clamp(170px, 34%, 300px);
}

.ca-lottie-player.is-landscape {
    width: min(100%, 460px);
    --ca-lottie-max-height: min(42vh, 320px);
    --ca-lottie-max-height: min(42dvh, 320px);
}

.ca-lottie-wrap--right .ca-lottie-player.is-landscape,
.ca-lottie-wrap--left  .ca-lottie-player.is-landscape {
    width: clamp(220px, 42%, 380px);
}

/* ---- Текстовая часть ---- */
.ca-lottie-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

/* Для top/bottom — текст по центру */
.ca-lottie-wrap--top .ca-lottie-text,
.ca-lottie-wrap--bottom .ca-lottie-text {
    width: 100%;
    text-align: center;
}

/* ---- Текст вопроса внутри lottie-блока ---- */
.ca-lottie-question {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    color: #1a1a2e;
}

/* =========================================================
   МОБАЙЛЬНАЯ АДАПТАЦИЯ
   ========================================================= */
@media (max-width: 520px) {
    /* Left/Right — на узких экранах переходим на column */
    .ca-lottie-wrap--right,
    .ca-lottie-wrap--left {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .ca-lottie-wrap--right .ca-lottie-player,
    .ca-lottie-wrap--left  .ca-lottie-player {
        width: 75%;
        max-width: 280px;
        max-height: none;
    }
    .ca-lottie-text {
        width: 100%;
        text-align: center;
    }
    .ca-lottie-question {
        font-size: 16px;
    }
}

/* =========================================================
   PAGE TRANSITION
   ========================================================= */
body.leaving { opacity: 0; transition: opacity .15s ease; }

/* Только контент fade, не хидер и не тулбар */
#ca-scroll {
    transition: opacity .18s ease;
}

@media (max-width: 640px) {
    .ca-scroll--media {
        overflow: hidden;
    }
    .ca-main--media {
        min-height: 0;
    }
    .ca-card--media {
        max-height: calc(100dvh - 54px - 24px - 28px - 76px - 20px);
        max-height: calc(100vh - 54px - 24px - 28px - 76px - 20px);
    }
    .ca-card__inner--media {
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
    }
    .ca-img-wrap,
    .ca-video-wrap {
        flex: 0 0 auto;
        min-height: auto;
    }
    .ca-img-wrap img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
}
/* Находим и заменяем эти блоки: */

/* 1. Запрещаем всему телу документа исчезать */
body.leaving { 
    opacity: 1 !important; 
}

/* 2. Настраиваем эффект только для контейнера с контентом */
#ca-scroll {
    transition: opacity .2s ease, filter .2s ease;
    will-change: opacity, filter;
    position: relative;
}
#ca-scroll.is-loading .ca-main {
    opacity: .18;
    transform: translateX(-58px) translateY(12px) scale(.955) rotate(-.55deg);
}
#ca-scroll.is-loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50px;
    width: min(780px, calc(100% - 28px));
    height: min(420px, calc(100% - 82px));
    border-radius: 24px;
    border: 2px solid rgba(255,230,0,.42);
    background:
        linear-gradient(105deg, transparent 8%, rgba(255,255,255,.68) 42%, transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,253,231,.92));
    background-size: 220% 100%, 100% 100%;
    box-shadow: 0 24px 54px rgba(15,23,42,.12);
    transform: translateX(-50%) translateX(46px) scale(.965);
    animation: caNextCardGhost .72s cubic-bezier(.16,1,.3,1) both, caGhostShimmer 1.1s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes caNextCardGhost {
    from { opacity: 0; transform: translateX(-50%) translateX(76px) translateY(18px) scale(.94) rotate(.35deg); }
    70% { opacity: .92; transform: translateX(-50%) translateX(-3px) translateY(0) scale(1.006) rotate(-.06deg); }
    to { opacity: .86; transform: translateX(-50%) translateX(0) translateY(0) scale(1) rotate(0); }
}
@keyframes caGhostShimmer {
    0%, 35% { background-position: -160% 0, 0 0; }
    100% { background-position: 160% 0, 0 0; }
}
#ca-scroll.is-entering .ca-main {
    animation: caStepSwapIn .62s cubic-bezier(.16,1,.3,1) both;
}
@keyframes caStepSwapIn {
    from {
        opacity: 0;
        transform: translateX(52px) translateY(14px) scale(.96) rotate(.4deg);
        filter: saturate(.92);
    }
    58% {
        opacity: 1;
        transform: translateX(-4px) translateY(0) scale(1.006) rotate(-.08deg);
        filter: saturate(1.04);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: saturate(1);
    }
}
#ca-scroll.is-entering .ca-card {
    position: relative;
    overflow: hidden;
}
#ca-scroll.is-entering .ca-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 8%, rgba(255,230,0,.16) 38%, rgba(255,255,255,.55) 50%, transparent 68%);
    transform: translateX(-120%);
    animation: caCardArrivalShine .72s ease-out both;
    pointer-events: none;
}
@keyframes caCardArrivalShine {
    0% { transform: translateX(-120%); opacity: 0; }
    28% { opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}

/* 3. Добавляем новый класс для состояния загрузки */
#ca-scroll.is-loading {
    opacity: 0.4;
    filter: blur(4px); /* Тот самый блюр, но теперь только здесь */
    pointer-events: none; /* Чтобы нельзя было кликать пока грузится */
}

/* 4. Убеждаемся, что хидер и футер выше по слоям (z-index) */
.ca-header { z-index: 100; position: relative; }
.ca-toolbar { z-index: 100; position: relative; }
/* =========================================================
   DESKTOP: ограничиваем высоту карточки, убираем скролл
   На десктопе хватает места — делаем no-scroll layout
   ========================================================= */
@media (min-width: 641px) {
    body { overflow: hidden; }
    .ca-shell { overflow: hidden; }
    .ca-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
    }
    .ca-main { min-height: 0; }
    .ca-card {
        /* Ограничиваем рост карточки */
        max-height: calc(100dvh - 54px - 24px - 28px - 68px - 24px);
        max-height: calc(100vh - 54px - 24px - 28px - 68px - 24px);
    }
    .ca-card--media {
        min-height: 0;
    }
    .ca-card__inner--media {
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #d1d5db transparent;
    }
    .ca-card__inner--media::-webkit-scrollbar { width: 6px; }
    .ca-card__inner--media::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
    .ca-img-wrap {
        flex: 0 0 auto;
        min-height: auto;
    }
    .ca-img-wrap img {
        height: auto;
        width: 100%;
        max-width: 100%;
    }
    .ca-video-wrap {
        flex: 0 0 auto;
        min-height: auto;
        display: flex;
        align-items: center;
    }
    .ca-media-desc {
        margin-bottom: 12px;
        padding: 12px 13px;
        font-size: 13px;
        line-height: 1.55;
        border-radius: 12px;
    }
    .ca-text-wrap {
        flex: 1 1 0;
        min-height: 0;
        overflow: visible;
        position: relative;
    }
    .ca-text-wrap.has-overflow::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0; height: 50px;
        background: linear-gradient(transparent, #fff);
        pointer-events: none;
    }
    .ca-options {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #d1d5db transparent;
    }
    .ca-options::-webkit-scrollbar { width: 4px; }
    .ca-options::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
}
@media (max-width: 640px) {
    .ca-reward-toast {
        top: 112px;
        right: 12px;
        left: 12px;
    }
    .ca-reward-toast__pill {
        width: 100%;
        justify-content: center;
    }
    .ca-streak-banner {
        top: 88px;
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(-12px) scale(.94);
    }
    .ca-streak-banner.is-visible {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    .ca-streak-banner__card {
        min-width: 0;
        max-width: calc(100vw - 30px);
        width: auto;
        padding: 12px 14px 12px 12px;
    }
    .ca-streak-banner__badge {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
    .ca-streak-banner__title {
        font-size: 16px;
    }
    .ca-streak-banner__sub {
        font-size: 12px;
    }
    .ca-explanation__card {
        padding: 16px 15px 15px;
    }
    .ca-explanation__title {
        font-size: 18px;
    }
}

#ca-scroll.is-loading .ca-main {
    opacity: .18 !important;
    transform: translateX(-58px) translateY(12px) scale(.955) rotate(-.55deg) !important;
}
#ca-scroll.is-loading {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
}
.ca-feedback.is-visible {
    margin: 0 18px 10px;
}
.ca-explanation {
    padding: 0 18px 18px;
}
.ca-explanation.is-visible {
    max-height: 360px;
}
.ca-explanation__card {
    max-height: clamp(160px, calc(100dvh - 390px), 280px);
    padding: 14px 16px 14px;
    border-radius: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 32px;
    scrollbar-width: thin;
    scrollbar-color: #cfd6de transparent;
}
.ca-explanation__card::-webkit-scrollbar {
    width: 7px;
}
.ca-explanation__card::-webkit-scrollbar-thumb {
    background: #cfd6de;
    border-radius: 999px;
}
.ca-streak-banner__card {
    min-width: 0;
    padding: 8px 12px 8px 8px;
    border-radius: 999px;
    gap: 8px;
}
.ca-streak-banner__badge {
    width: 38px;
    height: 38px;
    font-size: 22px;
}
.ca-streak-banner__title {
    font-size: 16px;
}
.ca-streak-banner__sub {
    margin-top: 0;
    font-size: 10px;
    letter-spacing: .08em;
}
@media (min-width: 641px) {
    .ca-card.is-explained {
        overflow: visible;
    }
}

/* Final course-answer overrides: keep the explanation independent from the card height. */
#ca-scroll.is-loading::after {
    display: none !important;
}
#ca-scroll.is-loading .ca-main {
    opacity: .84 !important;
    transform: translateX(-12px) scale(.992) !important;
    transition: opacity .26s ease, transform .26s ease !important;
}
#ca-scroll.is-entering .ca-main {
    animation: caStepSoftIn .42s cubic-bezier(.2,.85,.25,1) both !important;
}
@keyframes caStepSoftIn {
    from {
        opacity: 0;
        transform: translateX(20px) scale(.992);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
.ca-explanation.is-visible {
    position: fixed !important;
    left: 50% !important;
    bottom: 86px !important;
    width: min(760px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 170px) !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 90 !important;
    overflow: visible !important;
    animation: caExplainFloatIn .32s cubic-bezier(.2,.85,.25,1) both !important;
}
.ca-card.is-explained {
    overflow: visible !important;
}
.ca-explanation__card {
    max-height: calc(100dvh - 170px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 20px 36px !important;
    border-radius: 20px !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .20) !important;
}
@keyframes caExplainFloatIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(18px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}
@media (max-width: 640px) {
    .ca-explanation.is-visible {
        bottom: 82px !important;
        width: calc(100vw - 22px) !important;
        max-height: calc(100dvh - 148px) !important;
    }
    .ca-explanation__card {
        max-height: calc(100dvh - 148px) !important;
        padding: 16px 16px 34px !important;
    }
}

/* =========================================================
   CUSTOMER DESIGN PATCH 2026-07-14
   Desktop course screens: wider workspace, no separate type pills,
   content-sized cards, compact feedback and toolbar close to the card.
   ========================================================= */
.ca-topic-bar {
    min-height: 36px;
    padding: 0 28px;
    background: #fff;
    border-top: 1px solid #eef2f6;
    border-bottom: 1px solid #e7ebf0;
    color: #364152;
    gap: 10px;
}
.ca-topic-bar__badge {
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #b8a000;
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ca-topic-bar__badge::before {
    content: '';
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.5A2.5 2.5 0 016.5 3H20v16H7.5A3.5 3.5 0 004 22V5.5z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8 7h8M8 11h7' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.5A2.5 2.5 0 016.5 3H20v16H7.5A3.5 3.5 0 004 22V5.5z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8 7h8M8 11h7' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ca-topic-bar__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 650;
}
.ca-topic-bar__step {
    margin-left: auto;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
.ca-type-row {
    display: none !important;
}
.ca-reward-toast {
    display: none !important;
}
.ca-main,
.ca-toolbar__inner {
    max-width: 1120px;
}
.ca-scroll {
    flex: 0 1 auto;
}
.ca-main {
    min-height: 0;
    padding: 0 20px;
}
.ca-card {
    flex: 0 1 auto;
    width: 100%;
    max-height: none;
    margin: 16px auto 0;
    border-radius: 16px;
}
.ca-card__inner {
    padding: 20px 48px 18px;
}
.ca-card__inner--media,
.ca-card__inner--lottie {
    padding: 20px 48px 18px;
}
.ca-question {
    max-width: 860px;
    font-size: 20px;
    line-height: 1.34;
    margin: 12px auto 18px;
    width: 100%;
}
.ca-options-label {
    max-width: 860px;
    width: 100%;
    margin: 0 auto 8px;
}
.ca-options {
    flex: 0 1 auto;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    overflow: visible;
    gap: 10px;
}
.ca-option {
    min-height: 54px;
    padding: 13px 18px;
    border-radius: 12px;
    border-width: 2px !important;
    font-size: 15px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
.ca-option__letter {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}
.ca-option__state::before {
    font-size: 0;
}
.ca-option.is-correct .ca-option__state::before {
    content: '';
    width: 12px;
    height: 7px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}
.ca-option.is-wrong .ca-option__state::before {
    content: '×';
    font-size: 22px;
    line-height: 1;
}
.ca-feedback {
    max-width: 860px;
    width: calc(100% - 96px);
    margin: 12px auto 14px;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: none;
}
.ca-feedback__icon {
    width: 42px;
    height: 42px;
}
.ca-feedback__title {
    font-size: 16px;
}
.ca-feedback__sub {
    font-size: 13px;
}
.ca-img-wrap,
.ca-video-wrap,
.ca-media-desc {
    max-width: 960px;
}
.ca-img-wrap {
    margin-top: 0;
    min-height: 0;
}
.ca-img-wrap img {
    max-height: calc(100dvh - 260px);
    object-fit: contain;
}
.ca-media-desc {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 16px;
}
.ca-text-wrap {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}
.ca-toolbar {
    min-height: 0;
    padding: 10px 20px 14px;
}
.ca-toolbar__inner {
    padding: 0;
}
.ca-btn--next,
.ca-btn--end {
    max-width: 500px;
    min-width: 240px;
    flex: 0 1 500px;
}
.ca-btn--answer {
    min-width: 176px;
    max-width: 260px;
}
.ca-btn--continue {
    min-width: 132px;
    max-width: 180px;
    flex: 0 0 auto;
}
.ca-btn--skip {
    min-width: 144px;
}

@media (min-width: 641px) {
    .ca-scroll {
        flex: 0 1 auto !important;
    }
    .ca-main {
        max-width: 1120px !important;
        min-height: 0 !important;
    }
    .ca-card {
        max-height: none !important;
    }
    .ca-card__inner--media,
    .ca-card__inner--lottie {
        overflow-y: visible !important;
    }
    .ca-options {
        overflow: visible !important;
    }
}

@media (max-width: 900px) {
    .ca-main,
    .ca-toolbar__inner {
        max-width: 100%;
    }
    .ca-card__inner,
    .ca-card__inner--media,
    .ca-card__inner--lottie {
        padding: 18px 22px 16px;
    }
    .ca-feedback {
        width: calc(100% - 44px);
    }
}

@media (max-width: 640px) {
    .ca-topic-bar {
        padding: 0 12px;
        min-height: 32px;
    }
    .ca-topic-bar__name {
        font-size: 12px;
    }
    .ca-topic-bar__step {
        font-size: 12px;
    }
    .ca-main {
        padding: 0 12px;
    }
    .ca-card {
        margin-top: 10px;
    }
    .ca-card__inner,
    .ca-card__inner--media,
    .ca-card__inner--lottie {
        padding: 14px 14px 12px;
    }
    .ca-question {
        font-size: 17px;
    }
    .ca-option {
        min-height: 50px;
        padding: 12px 13px;
    }
    .ca-feedback {
        width: calc(100% - 28px);
        margin: 10px auto 12px;
    }
    .ca-toolbar {
        padding: 8px 12px 12px;
    }
    .ca-btn--next,
    .ca-btn--end {
        min-width: 0;
        flex: 1;
    }
}

/* Card-composed flow: feedback and actions stay inside the white card. */
#ca-form {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}
#ca-form .ca-scroll {
    flex: 1 1 auto !important;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 18px;
}
#ca-form .ca-main {
    width: 100%;
}
#ca-form .ca-card {
    overflow: visible !important;
    max-height: none !important;
}
#ca-form .ca-card__inner {
    flex: 0 0 auto;
    overflow: visible !important;
    max-height: none !important;
}
#ca-form .ca-options {
    flex: 0 0 auto;
    max-height: none !important;
    overflow: visible !important;
}
#ca-form .ca-options-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 600;
    color: #9aa3af;
    margin-bottom: 8px;
}
#ca-form .ca-feedback {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    max-width: 860px;
    width: calc(100% - 96px);
    margin: 12px auto 12px !important;
}
#ca-form .ca-explanation {
    flex: 0 0 auto;
}
#ca-form .ca-explanation.is-visible {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 2 !important;
    width: calc(100% - 96px) !important;
    max-width: 860px !important;
    max-height: none !important;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
    animation: feedbackIn .25s ease both !important;
}
#ca-form .ca-explanation__card {
    max-height: min(28dvh, 260px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: none !important;
}
#ca-form .ca-toolbar {
    position: static !important;
    z-index: 1 !important;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 10px 48px 20px !important;
    border-top: 1px solid #eef2f6;
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: none;
}
#ca-form .ca-toolbar__inner {
    width: 100%;
    max-width: 860px !important;
    margin: 0 auto;
    padding: 0;
}
#ca-form .ca-btn--continue,
#ca-form .ca-btn--next,
#ca-form .ca-btn--end {
    height: 46px;
    border-radius: 10px;
}
@media (min-width: 641px) {
    #ca-form .ca-btn--continue {
        min-width: 132px;
        max-width: 170px;
    }
    #ca-form .ca-btn--next,
    #ca-form .ca-btn--end {
        margin-left: auto;
        max-width: 500px;
    }
}
@media (max-width: 900px) {
    #ca-form .ca-feedback {
        width: calc(100% - 44px);
    }
    #ca-form .ca-explanation.is-visible {
        width: calc(100% - 44px) !important;
    }
    #ca-form .ca-toolbar {
        padding: 10px 22px 18px !important;
    }
}
@media (max-width: 640px) {
    #ca-form .ca-feedback {
        width: calc(100% - 28px);
    }
    #ca-form .ca-explanation.is-visible {
        width: calc(100% - 28px) !important;
    }
    #ca-form .ca-toolbar {
        padding: 8px 14px 14px !important;
    }
}

/* Viewport-locked course player: the page itself never scrolls. */
html,
body {
    height: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
}
.ca-shell {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}
#ca-form {
    overflow: hidden !important;
}
#ca-form .ca-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}
#ca-form .ca-main {
    height: 100%;
    min-height: 0 !important;
    overflow: hidden !important;
    justify-content: flex-start;
}
#ca-form .ca-card {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}
#ca-form .ca-card__inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}
#ca-form .ca-card__inner::-webkit-scrollbar,
#ca-form .ca-options::-webkit-scrollbar {
    width: 6px;
}
#ca-form .ca-card__inner::-webkit-scrollbar-thumb,
#ca-form .ca-options::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
}
#ca-form .ca-options {
    max-height: clamp(150px, 30dvh, 320px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
#ca-form .ca-img-wrap img,
#ca-form .ca-qimg img {
    max-height: min(46dvh, 430px) !important;
    object-fit: contain !important;
}
#ca-form .ca-video-wrap video {
    max-height: min(46dvh, 430px) !important;
}
#ca-form .ca-btn--next,
#ca-form .ca-btn--end {
    max-width: 420px;
    flex-basis: 420px;
}

@media (max-width: 640px) {
    .ca-header {
        min-height: 60px;
        padding: 10px 14px;
        gap: 10px;
    }
    .ca-topic-bar {
        min-height: 58px;
        padding: 8px 22px;
        align-items: center;
    }
    #ca-form .ca-main {
        padding: 0 20px;
    }
    #ca-form .ca-card {
        margin-top: 12px;
        border-radius: 14px;
    }
    #ca-form .ca-card__inner,
    #ca-form .ca-card__inner--media,
    #ca-form .ca-card__inner--lottie {
        padding: 16px 14px 12px;
    }
    #ca-form .ca-question {
        font-size: 20px;
        line-height: 1.28;
        margin: 12px auto 14px;
    }
    #ca-form .ca-options {
        max-height: clamp(150px, 32dvh, 280px) !important;
        gap: 10px;
    }
    #ca-form .ca-option {
        min-height: 74px;
        padding: 14px 16px;
        font-size: 17px;
    }
    #ca-form .ca-feedback {
        width: calc(100% - 28px);
        padding: 16px;
        align-items: flex-start;
    }
    #ca-form .ca-feedback__icon {
        width: 48px;
        height: 48px;
    }
    #ca-form .ca-toolbar {
        padding: 10px 14px 14px !important;
    }
    #ca-form .ca-toolbar__inner {
        gap: 8px;
    }
    #ca-form .ca-btn {
        min-width: 0 !important;
        height: 54px;
        padding: 0 14px;
        font-size: 15px;
    }
    #ca-form .ca-btn--skip {
        flex: 1 1 0;
    }
    #ca-form .ca-btn--answer {
        flex: 1.25 1 0;
        max-width: none;
    }
    #ca-form .ca-btn--continue,
    #ca-form .ca-btn--next,
    #ca-form .ca-btn--end {
        flex: 1 1 auto;
        max-width: none;
    }
    #ca-form .ca-img-wrap img,
    #ca-form .ca-qimg img,
    #ca-form .ca-video-wrap video {
        max-height: min(34dvh, 320px) !important;
    }
}

/* Layout stability: keep the page locked, but let long answers grow and scroll correctly. */
#ca-form .ca-scroll {
    overflow: hidden !important;
}
#ca-form .ca-main {
    justify-content: flex-start !important;
}
#ca-form .ca-card {
    flex: 1 1 auto !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
#ca-form .ca-card__inner {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
#ca-form .ca-card__inner--media,
#ca-form .ca-card__inner--lottie {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
#ca-form .ca-text-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}
#ca-form .ca-options {
    flex: 1 1 auto !important;
    min-height: 120px !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 2px 3px 4px;
}
#ca-form .ca-option {
    align-items: flex-start !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}
#ca-form .ca-option > span:not(.ca-option__letter):not(.ca-option__state) {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}
#ca-form .ca-option__letter,
#ca-form .ca-option__state {
    margin-top: 2px;
}
#ca-form .ca-option__state {
    align-self: center;
}
#ca-form .ca-toolbar {
    flex: 0 0 auto !important;
}
#ca-form .ca-toolbar__inner {
    min-width: 0;
}
#ca-form .ca-btn {
    min-height: 46px;
    height: auto !important;
    min-width: 0 !important;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
}

@media (max-width: 640px) {
    #ca-form .ca-main {
        padding: 0 14px !important;
    }
    #ca-form .ca-card {
        margin-top: 10px !important;
    }
    #ca-form .ca-card__inner {
        padding: 20px 20px 12px !important;
    }
    #ca-form .ca-question {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin: 10px 0 16px !important;
    }
    #ca-form .ca-options-label {
        font-size: 15px !important;
        line-height: 1.25 !important;
    }
    #ca-form .ca-options {
        min-height: 170px !important;
        gap: 10px !important;
        padding-right: 2px;
    }
    #ca-form .ca-option {
        padding: 14px 18px !important;
        font-size: 18px !important;
        line-height: 1.28 !important;
        gap: 14px !important;
    }
    #ca-form .ca-option__letter,
    #ca-form .ca-option__state {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }
    #ca-form .ca-toolbar {
        padding: 10px 20px 16px !important;
    }
    #ca-form .ca-toolbar__inner {
        gap: 10px !important;
    }
    #ca-form .ca-btn {
        min-height: 58px !important;
        padding: 10px 14px !important;
        font-size: 16px !important;
    }
    #ca-form .ca-btn--skip {
        flex: 1 1 42% !important;
    }
    #ca-form .ca-btn--answer,
    #ca-form .ca-btn--continue {
        flex: 1 1 52% !important;
    }
}


/* Extracted from views/education/course/course_answer.php style#2 */
/* =========================================================
   1SAFETY REDESIGN V9.2 — COURSE PLAYER POLISH
   Scope: /test/courseAnswer only.
   Keeps all course/test business logic intact; fixes layout collision
   with the redesign shell and removes the stretched empty card area.
   ========================================================= */

/* The course player is its own focused screen. The global portal header
   must not be rendered visually on top of the internal player header. */
body.rs-site .rs-header,
body.rs-site .rs-mobile-backdrop,
body.rs-site .rs-mobile-drawer,
body.rs-site .rs-bottom-nav,
body.rs-site .rs-footer {
    display: none !important;
}
body.rs-site {
    padding-bottom: 0 !important;
    background: #f7f8fa !important;
}
body.rs-site .rs-main {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}
body.rs-site .rs-main > * {
    max-width: none !important;
}

/* One compact player header. */
.ca-header {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 16px !important;
    gap: 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}
.ca-header__logo img {
    height: 27px !important;
}
.ca-header__bar-wrap {
    height: 9px !important;
    background: #e9edf1 !important;
}
.ca-header__shield,
.ca-header__score-pill {
    font-size: 12px !important;
    white-space: nowrap !important;
}
.ca-header__close {
    width: 34px !important;
    height: 34px !important;
}

/* Topic line: readable, compact, no technical-looking overflow. */
.ca-topic-bar {
    min-height: 40px !important;
    padding: 0 18px !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.ca-topic-bar__badge {
    background: #fff7c7 !important;
    color: #6f5900 !important;
    border: 1px solid #ead36b !important;
    padding: 4px 8px !important;
}
.ca-topic-bar__name {
    color: #27313d !important;
}

/* Let the actual lesson content determine card height. The previous
   viewport-lock rules forced media cards to fill the screen, creating
   a large empty white area below an image. */
#ca-form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
#ca-form .ca-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 0 22px !important;
    -webkit-overflow-scrolling: touch;
}
#ca-form .ca-main {
    width: 100% !important;
    max-width: 960px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 16px 18px 0 !important;
    overflow: visible !important;
    display: block !important;
}
#ca-form .ca-card {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.05) !important;
}
#ca-form .ca-card__inner,
#ca-form .ca-card__inner--media,
#ca-form .ca-card__inner--lottie {
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 20px 24px 18px !important;
}

/* Media should be shown at its natural proportion, not followed by a
   stretched flex remainder. */
#ca-form .ca-img-wrap,
#ca-form .ca-video-wrap {
    width: 100% !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    min-height: 0 !important;
    background: #f6f7f8 !important;
}
#ca-form .ca-img-wrap img,
#ca-form .ca-qimg img,
#ca-form .ca-video-wrap video {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(56dvh, 520px) !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Text/questions and answer choices remain readable and are allowed to grow. */
#ca-form .ca-question,
#ca-form .ca-options-label,
#ca-form .ca-options,
#ca-form .ca-text-wrap,
#ca-form .ca-media-desc {
    max-width: 820px !important;
    width: 100% !important;
}
#ca-form .ca-question,
#ca-form .ca-options-label,
#ca-form .ca-options,
#ca-form .ca-text-wrap,
#ca-form .ca-media-desc {
    margin-left: auto !important;
    margin-right: auto !important;
}
#ca-form .ca-options,
#ca-form .ca-text-wrap {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Toolbar sits directly under the current content instead of at the
   bottom of an artificial empty card. */
#ca-form .ca-toolbar {
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 14px 24px 18px !important;
    background: #fff !important;
    border-top: 1px solid #edf0f3 !important;
    box-shadow: none !important;
}
#ca-form .ca-toolbar__inner {
    max-width: 820px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Avoid the decorative old glow on the learning player. */
.ca-shell::before {
    display: none !important;
}

@media (max-width: 640px) {
    .ca-header {
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 10px !important;
        gap: 8px !important;
    }
    .ca-header__logo img {
        height: 24px !important;
    }
    .ca-header__shield {
        display: none !important;
    }
    .ca-header__score-pill {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
    .ca-topic-bar {
        min-height: 42px !important;
        padding: 6px 12px !important;
        gap: 8px !important;
    }
    .ca-topic-bar__badge {
        display: none !important;
    }
    .ca-topic-bar__name {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
    #ca-form .ca-main {
        padding: 12px 10px 0 !important;
    }
    #ca-form .ca-card {
        border-radius: 14px !important;
    }
    #ca-form .ca-card__inner,
    #ca-form .ca-card__inner--media,
    #ca-form .ca-card__inner--lottie {
        padding: 14px 12px 12px !important;
    }
    #ca-form .ca-question {
        font-size: 19px !important;
        line-height: 1.28 !important;
        margin: 4px auto 14px !important;
    }
    #ca-form .ca-img-wrap img,
    #ca-form .ca-qimg img,
    #ca-form .ca-video-wrap video {
        max-height: 48dvh !important;
    }
    #ca-form .ca-option {
        min-height: 0 !important;
        padding: 13px 14px !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
    }
    #ca-form .ca-toolbar {
        padding: 10px 12px 12px !important;
    }
    #ca-form .ca-toolbar__inner {
        gap: 8px !important;
    }
    #ca-form .ca-btn {
        min-height: 50px !important;
        font-size: 15px !important;
    }

    /* V9.2: on informational/media steps the single Continue button must
       use the full mobile toolbar width instead of being pushed into the
       right half by the desktop spacer. Answer steps keep their two-button
       layout unchanged. */
    #ca-form .ca-toolbar__inner > div[style*="flex:1"] {
        display: none !important;
    }
    #ca-form .ca-btn--next,
    #ca-form .ca-btn--end,
    #ca-form #ca-btn-video-next {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        justify-content: center !important;
    }
}


/* Extracted from views/education/course/course_answer.php style#3 */
/* =========================================================
   1SAFETY REDESIGN V9.3 — UNIFIED COURSE PLAYER
   Question, text, image, video and Lottie steps share one shell.
   Existing course logic stays intact.
   ========================================================= */

#ca-form .ca-card { background:#fff !important; }
#ca-form .ca-question {
    color:#111827 !important; font-weight:750 !important; letter-spacing:-.015em !important;
    overflow:visible !important; max-height:none !important; display:block !important; -webkit-line-clamp:unset !important;
}
#ca-form .ca-options-label {
    color:#8a94a3 !important; font-weight:650 !important; letter-spacing:0 !important; text-transform:none !important;
}

/* Entire answer card is clickable; selected state uses the 1SAFETY yellow. */
#ca-form .ca-option {
    border:1.5px solid #dce3eb !important; border-radius:14px !important; background:#fff !important;
    box-shadow:none !important; color:#27313d !important;
    transition:border-color .16s ease,background-color .16s ease,transform .12s ease,box-shadow .16s ease !important;
}
#ca-form .ca-option__letter {
    border:1.5px solid #dce3eb !important; background:#fff !important; color:#8a94a3 !important;
    box-shadow:none !important; font-weight:800 !important;
}
#ca-form .ca-option.is-selected {
    border-color:#e2c900 !important; background:#fffbea !important; box-shadow:inset 0 0 0 1px #ffe600 !important;
}
#ca-form .ca-option.is-selected .ca-option__letter {
    border-color:#e2c900 !important; background:#ffe600 !important; color:#111 !important;
}
#ca-form .ca-option.is-correct,
#ca-form .ca-option.is-disabled.is-correct {
    opacity:1 !important; border-color:#58a929 !important; background:#f2fbea !important;
    box-shadow:inset 0 0 0 1px rgba(88,169,41,.12) !important;
}
#ca-form .ca-option.is-correct .ca-option__letter { border-color:#58a929 !important; background:#58a929 !important; color:#fff !important; }
#ca-form .ca-option.is-wrong,
#ca-form .ca-option.is-disabled.is-wrong {
    opacity:1 !important; border-color:#e05b61 !important; background:#fff3f3 !important;
    box-shadow:inset 0 0 0 1px rgba(224,91,97,.10) !important;
}
#ca-form .ca-option.is-wrong .ca-option__letter { border-color:#e05b61 !important; background:#e05b61 !important; color:#fff !important; }
#ca-form .ca-option.is-disabled:not(.is-correct):not(.is-wrong) { opacity:.58 !important; }

/* Inline answer feedback. */
#ca-form .ca-feedback.is-visible {
    margin:0 24px 14px !important; padding:13px 14px !important; border-radius:13px !important;
    border:1px solid transparent !important; box-shadow:none !important;
}
#ca-form .ca-feedback--correct { background:#f2fbea !important; border-color:#cfe9bd !important; }
#ca-form .ca-feedback--wrong { background:#fff3f3 !important; border-color:#f0c7ca !important; }
#ca-form .ca-feedback__title { font-size:15px !important; font-weight:800 !important; }
#ca-form .ca-feedback__sub { font-size:13px !important; line-height:1.45 !important; color:#596474 !important; }

/* Primary / secondary actions. */
#ca-form .ca-btn--skip { background:#f3f5f7 !important; border:1px solid #dce3eb !important; color:#27313d !important; box-shadow:none !important; }
#ca-form .ca-btn--answer,
#ca-form .ca-btn--continue,
#ca-form .ca-btn--next,
#ca-form .ca-btn--end,
#ca-form #ca-btn-video-next { background:#ffe000 !important; border-color:#e1c600 !important; color:#111 !important; }
#ca-form .ca-btn--answer:disabled {
    background:#eef1f4 !important; border-color:#e1e5ea !important; color:#9aa3ad !important;
    box-shadow:none !important; cursor:default !important; filter:none !important;
}
#ca-form .ca-btn--explain { background:#fff !important; border:1px solid #dce3eb !important; color:#27313d !important; box-shadow:none !important; }

/* Reading step. */
#ca-form .ca-card--text .ca-text-wrap { font-size:16px !important; line-height:1.7 !important; color:#27313d !important; }
#ca-form .ca-card--text .ca-text-wrap p { margin:0 0 1em !important; }
#ca-form .ca-card--text .ca-text-wrap p:last-child { margin-bottom:0 !important; }

#ca-form .ca-card--image .ca-card__inner,
#ca-form .ca-card--video .ca-card__inner,
#ca-form .ca-card--lottie .ca-card__inner { padding-bottom:12px !important; }

@media (min-width:641px) {
    #ca-form .ca-card--question .ca-card__inner { padding:24px 30px 20px !important; }
    #ca-form .ca-card--question .ca-question,
    #ca-form .ca-card--question .ca-options-label,
    #ca-form .ca-card--question .ca-options { max-width:760px !important; }
    #ca-form .ca-card--question .ca-options { gap:10px !important; }
    #ca-form .ca-card--question .ca-toolbar__inner { max-width:760px !important; }
}

@media (max-width:640px) {
    .ca-topic-bar { align-items:center !important; }
    .ca-topic-bar__name {
        min-width:0 !important; display:-webkit-box !important; -webkit-box-orient:vertical !important;
        -webkit-line-clamp:2 !important; overflow:hidden !important; font-weight:650 !important;
    }
    .ca-topic-bar__step { flex:0 0 auto !important; align-self:center !important; font-weight:800 !important; }

    #ca-form .ca-card--question .ca-card__inner { padding:16px 12px 12px !important; }
    #ca-form .ca-card--question .ca-question { margin:0 0 8px !important; font-size:20px !important; line-height:1.28 !important; }
    #ca-form .ca-card--question .ca-options-label { margin:0 0 10px !important; font-size:14px !important; line-height:1.35 !important; }
    #ca-form .ca-card--question .ca-options { gap:10px !important; }
    #ca-form .ca-card--question .ca-option {
        min-height:64px !important; padding:12px !important; gap:12px !important;
        font-size:16px !important; line-height:1.35 !important; font-weight:650 !important;
    }
    #ca-form .ca-card--question .ca-option__letter,
    #ca-form .ca-card--question .ca-option__state {
        width:34px !important; min-width:34px !important; height:34px !important; border-radius:9px !important;
    }
    #ca-form .ca-feedback.is-visible { margin:0 12px 10px !important; padding:12px !important; }

    /* Sticky only on question steps. Media/text steps stay content-sized. */
    #ca-form .ca-card--question .ca-toolbar {
        position:sticky !important; bottom:0 !important; z-index:15 !important;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
        background:rgba(255,255,255,.97) !important;
        backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important;
        box-shadow:0 -8px 18px rgba(15,23,42,.045) !important;
    }
    #ca-form .ca-card--question .ca-toolbar__inner { display:flex !important; align-items:stretch !important; gap:8px !important; }
    #ca-form .ca-card--question .ca-btn--skip { flex:0 1 42% !important; }
    #ca-form .ca-card--question .ca-btn--answer { flex:1 1 58% !important; }
    #ca-form .ca-card--question .ca-btn--continue { flex:1 1 100% !important; width:100% !important; }
    #ca-form .ca-card--question .ca-btn--explain { flex:0 1 38% !important; min-width:0 !important; }

    #ca-form .ca-card--text .ca-card__inner { padding:16px 14px 12px !important; }
    #ca-form .ca-card--text .ca-text-wrap { font-size:15px !important; line-height:1.62 !important; }
}


/* Extracted from views/education/course/course_answer.php style#4 */
/* Course player: clearer page title, calmer hierarchy, compact navigation */
.ca-topic-bar{
    min-height:54px!important;
    padding:7px 16px!important;
    gap:10px!important;
    background:#fff!important;
    border-bottom:1px solid #e5e7eb!important;
    color:#111827!important;
    overflow:visible!important;
}
.ca-topic-bar__badge{
    align-self:flex-start!important;
    margin-top:2px!important;
    background:#fff4bf!important;
    color:#6a5600!important;
    border:1px solid #f2d75b!important;
    font-size:10px!important;
    padding:3px 7px!important;
}
.ca-topic-bar__identity{
    min-width:0!important;
    flex:1 1 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:18px!important;
}
.ca-topic-bar__title{
    min-width:0!important;
    margin:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#111827!important;
    font-family:'SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
    font-size:15px!important;
    line-height:1.25!important;
    font-weight:750!important;
}
.ca-topic-bar__meta{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    color:#6b7280!important;
    font-size:11px!important;
    font-weight:650!important;
    white-space:nowrap!important;
}
.ca-main,.ca-toolbar__inner{max-width:980px!important}
.ca-card{max-width:980px!important;margin-left:auto!important;margin-right:auto!important}
.ca-card__inner,.ca-card__inner--media,.ca-card__inner--lottie{
    padding-left:36px!important;
    padding-right:36px!important;
}
.ca-text-wrap,.ca-media-desc,.ca-img-wrap,.ca-video-wrap{max-width:900px!important}
.ca-text-wrap{
    font-size:16px!important;
    line-height:1.58!important;
}
.ca-img-wrap img{
    max-height:500px!important;
    width:auto!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
}
.ca-toolbar__inner{
    justify-content:flex-end!important;
}
.ca-btn--next,.ca-btn--end,#ca-btn-video-next{
    width:auto!important;
    min-width:220px!important;
    max-width:320px!important;
}
@media(max-width:825px){
    .ca-topic-bar{
        min-height:58px!important;
        padding:7px 10px!important;
        align-items:flex-start!important;
    }
    .ca-topic-bar__badge{display:none!important}
    .ca-topic-bar__identity{
        display:block!important;
    }
    .ca-topic-bar__title{
        font-size:14px!important;
        white-space:normal!important;
        display:-webkit-box!important;
        -webkit-line-clamp:2!important;
        -webkit-box-orient:vertical!important;
    }
    .ca-topic-bar__meta{
        margin-top:3px!important;
        font-size:10px!important;
    }
    .ca-card__inner,.ca-card__inner--media,.ca-card__inner--lottie{
        padding-left:14px!important;
        padding-right:14px!important;
    }
    .ca-btn--next,.ca-btn--end,#ca-btn-video-next{
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
    }
}


/* Extracted from views/education/course/course_answer.php style#5 */
:root{--ca-yellow:#FFC400;--ca-yellow-deep:#A87900;}
body{background:#F7F8FA!important;color:#12151A!important;}
.ca-shell::before{display:none!important;}
.ca-header{height:62px!important;border-bottom:1px solid #E5E8EC!important;padding:0 18px!important;background:#fff!important;}
.ca-header__bar-wrap{height:8px!important;background:#E9ECF0!important;box-shadow:none!important;}
.ca-header__bar-fill{background:#FFC400!important;animation:none!important;box-shadow:none!important;}
.ca-header__bar-fill:before,.ca-header__bar-fill:after,.ca-header__bar-wrap:before{display:none!important;}
.ca-header__score-pill{background:#FFF8DE!important;border:1px solid #E8BF35!important;color:#9A6B00!important;}
.ca-header__close{border:1px solid #E1E5E9!important;background:#fff!important;border-radius:10px!important;}
.ca-topic-bar{background:#fff!important;border-bottom:1px solid #E8EBEF!important;box-shadow:none!important;}
.ca-topic-bar__badge{background:#FFF4C5!important;color:#443700!important;border-radius:8px!important;}
.ca-card{border:1px solid #E1E5E9!important;border-radius:18px!important;box-shadow:0 8px 28px rgba(18,25,38,.045)!important;background:#fff!important;}
.ca-type-badge{border-radius:8px!important;box-shadow:none!important;}
.ca-option{border-width:1px!important;border-color:#DCE1E6!important;border-radius:12px!important;box-shadow:none!important;}
.ca-option:hover{transform:none!important;border-color:#C7CDD4!important;}
.ca-option.is-selected{border-color:#E6B400!important;background:#FFF9E6!important;box-shadow:inset 0 0 0 1px rgba(255,196,0,.16)!important;}
.ca-btn--answer,.ca-btn--continue,.ca-btn--next,.ca-btn--end{background:#FFC400!important;border-color:#E1AF00!important;color:#111!important;box-shadow:none!important;border-radius:12px!important;}
.ca-btn--answer:active,.ca-btn--continue:active,.ca-btn--next:active,.ca-btn--end:active{background:#FFC400!important;transform:translateY(1px)!important;}
.ca-toolbar{background:rgba(247,248,250,.96)!important;border-top:1px solid #E5E8EC!important;box-shadow:none!important;}
@media(max-width:825px){
  .ca-header{height:58px!important;padding:0 12px!important;}
  .ca-header__logo img{height:25px!important;}
  .ca-topic-bar{padding:10px 12px!important;}
  .ca-main{padding-left:12px!important;padding-right:12px!important;}
  .ca-card{border-radius:16px!important;box-shadow:none!important;}
}


/* Extracted from views/education/course/course_answer.php style#6 */
/* =========================================================
   COURSE ENGINE V2.1.1 — MOBILE PLAYER POLISH
   White / black / gray / yellow. Semantic red only for error.
   ========================================================= */
:root{
    --ca-yellow:#FFC400!important;
    --ca-yellow-deep:#B98B00!important;
    --ca-green:#FFC400!important;
    --ca-green-soft:#FFF8D7!important;
    --ca-blue:#FFC400!important;
}
body,.ca-shell,.ca-scroll{background:#F7F8FA!important;color:#111!important}
.ca-shell::before{display:none!important}

/* Header: one quiet progress row */
.ca-header{
    height:54px!important;
    padding:0 14px!important;
    gap:12px!important;
    background:#fff!important;
    border-bottom:1px solid #E5E7EB!important;
}
.ca-header__bar-wrap{
    height:7px!important;
    border-radius:999px!important;
    background:#ECEFF2!important;
    box-shadow:none!important;
}
.ca-header__bar-fill{
    background:#FFC400!important;
    border-radius:999px!important;
    box-shadow:none!important;
}
.ca-header__bar-fill::before,
.ca-header__bar-fill::after,
.ca-header__bar-wrap::before{display:none!important}
.ca-header__shield,
.ca-header__score-pill{display:none!important}
.ca-header__close{
    width:38px!important;
    height:38px!important;
    border:1px solid #E1E5E9!important;
    border-radius:12px!important;
    background:#fff!important;
}
.ca-header__close svg{stroke:#111!important}

/* Lesson identity */
.ca-topic-bar{
    min-height:52px!important;
    padding:8px 16px!important;
    background:#fff!important;
    border-bottom:1px solid #ECEFF2!important;
}
.ca-topic-bar__badge{
    background:#FFF4C5!important;
    color:#4B3B00!important;
    border:0!important;
}
.ca-topic-bar__title{
    color:#111!important;
    font-size:15px!important;
    font-weight:780!important;
}
.ca-topic-bar__meta{
    color:#7A828D!important;
    font-size:11px!important;
}

/* Main layout */
.ca-main,.ca-toolbar__inner{max-width:900px!important}
.ca-card{
    max-width:900px!important;
    border:1px solid #E2E6EA!important;
    border-radius:18px!important;
    box-shadow:0 6px 22px rgba(18,25,38,.045)!important;
    background:#fff!important;
}
.ca-card__inner,
.ca-card__inner--media,
.ca-card__inner--lottie{
    padding:24px 28px 22px!important;
}
.ca-question{
    max-width:780px!important;
    color:#111!important;
    font-size:21px!important;
    line-height:1.28!important;
    margin:8px auto 18px!important;
}
.ca-options-label{
    max-width:780px!important;
    color:#737B86!important;
}
.ca-options{max-width:780px!important}
.ca-option{
    min-height:54px!important;
    padding:13px 15px!important;
    border:1px solid #DDE2E7!important;
    border-radius:14px!important;
    color:#16191D!important;
    background:#fff!important;
    box-shadow:none!important;
}
.ca-option:hover{border-color:#BCC4CC!important;transform:none!important}
.ca-option.is-selected{
    border-color:#D8A900!important;
    background:#FFF9E7!important;
}
.ca-option.is-selected .ca-option__letter{
    border-color:#D8A900!important;
    color:#6D5200!important;
    background:#FFF4BF!important;
}

/* Correct = yellow, not a second brand green */
.ca-option.is-correct{
    border-color:#D8A900!important;
    background:#FFF8D7!important;
    color:#111!important;
}
.ca-option.is-correct .ca-option__letter{
    border-color:#FFC400!important;
    background:#FFC400!important;
    color:#111!important;
}
.ca-option.is-correct .ca-option__state{
    background:#111!important;
    color:#fff!important;
}
.ca-option.is-wrong{
    border-color:#E3A4A4!important;
    background:#FFF4F4!important;
}
.ca-option.is-wrong .ca-option__letter{
    border-color:#D95C5C!important;
    background:#fff!important;
    color:#B93232!important;
}
.ca-option.is-wrong .ca-option__state{background:#B93232!important}

/* One calm feedback surface */
.ca-feedback{
    max-width:780px!important;
    width:calc(100% - 56px)!important;
    margin:12px auto 12px!important;
    padding:13px 15px!important;
    border-radius:14px!important;
    box-shadow:none!important;
}
.ca-feedback--correct{
    background:#FFF8D7!important;
    border:1px solid #E8C548!important;
}
.ca-feedback--correct .ca-feedback__icon{
    background:#FFC400!important;
    color:#111!important;
}
.ca-feedback--correct .ca-feedback__icon svg{stroke:#111!important}
.ca-feedback--correct .ca-feedback__title{color:#111!important}
.ca-feedback--wrong{
    background:#FFF4F4!important;
    border:1px solid #E6B1B1!important;
}
.ca-feedback__sub{color:#59616C!important}

/* Explanation = neutral white card with yellow marker */
.ca-explanation--correct .ca-explanation__card,
.ca-explanation--wrong .ca-explanation__card{
    background:#fff!important;
    border:1px solid #DDE2E7!important;
}
.ca-explanation__card::before{background:#FFC400!important}
.ca-explanation--correct .ca-explanation__icon{
    background:#FFC400!important;
    color:#111!important;
}
.ca-explanation--correct .ca-explanation__icon svg{stroke:#111!important}
.ca-explanation__eyebrow{color:#827000!important}
.ca-explanation__title{color:#111!important}
.ca-explanation__list li::before{background:#FFC400!important}
.ca-explanation__list li::after{background:#111!important}
.ca-streak-banner{display:none!important}

/* Toolbar */
#ca-form .ca-toolbar{
    background:rgba(247,248,250,.98)!important;
    border-top:1px solid #E5E8EC!important;
    box-shadow:none!important;
    padding:10px 18px 14px!important;
}
#ca-form .ca-toolbar__inner{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
}
.ca-btn{
    min-height:48px!important;
    border-radius:13px!important;
    font-size:14px!important;
    font-weight:760!important;
    box-shadow:none!important;
}
.ca-btn--prev{
    min-width:128px!important;
    padding:0 18px!important;
    background:#fff!important;
    color:#111!important;
    border:1px solid #D5DBE1!important;
    margin-right:auto!important;
}
.ca-btn--prev:hover{background:#F3F5F6!important}
.ca-btn--skip{
    background:transparent!important;
    border:0!important;
    color:#6B7280!important;
    min-width:auto!important;
    padding:0 10px!important;
}
.ca-btn--answer,.ca-btn--continue,.ca-btn--next,.ca-btn--end{
    background:#FFC400!important;
    border:1px solid #E0AE00!important;
    color:#111!important;
    box-shadow:none!important;
}
.ca-btn--answer:disabled,.ca-btn--continue:disabled{
    background:#ECEFF2!important;
    border-color:#ECEFF2!important;
    color:#9AA1AA!important;
}
.ca-btn--explain{
    background:#fff!important;
    border:1px solid #D7DDE3!important;
    color:#111!important;
}

/* V2 content blocks */
.cev2-step{gap:16px!important}
.cev2-title{
    font-size:30px!important;
    line-height:1.12!important;
    color:#111!important;
}
.cev2-eyebrow{
    background:#FFF4C5!important;
    border:0!important;
    color:#4B3B00!important;
    border-radius:8px!important;
}
.cev2-text{color:#202328!important}
.cev2-media{
    border-color:#E2E6EA!important;
    border-radius:16px!important;
}
.cev2-compare{gap:12px!important}
.cev2-compare__column{
    background:#FAFBFC!important;
    border-color:#E2E6EA!important;
}
.cev2-list__item{
    border-color:#E2E6EA!important;
    background:#fff!important;
}
.cev2-list__mark,.cev2-sequence__num{
    background:#FFC400!important;
    color:#111!important;
}
.cev2-sources a,.cev2-sources span{
    background:#F2F4F6!important;
    color:#343A40!important;
}

/* ---------- phone ---------- */
@media(max-width:700px){
    body,.ca-shell,.ca-scroll{background:#fff!important}
    .ca-header{
        height:50px!important;
        padding:0 10px!important;
        gap:10px!important;
    }
    .ca-header__logo{display:none!important}
    .ca-header__close{
        width:38px!important;
        height:38px!important;
        order:3!important;
    }
    .ca-header__bar-wrap{order:1!important;height:6px!important}
    .ca-topic-bar{
        min-height:49px!important;
        padding:7px 14px 8px!important;
    }
    .ca-topic-bar__badge{display:none!important}
    .ca-topic-bar__identity{display:flex!important;align-items:center!important;gap:10px!important}
    .ca-topic-bar__title{
        flex:1 1 auto!important;
        font-size:14px!important;
        line-height:1.25!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        display:block!important;
    }
    .ca-topic-bar__meta{
        flex:0 0 auto!important;
        margin:0!important;
        font-size:11px!important;
    }
    .ca-topic-bar__meta span:first-child,
    .ca-topic-bar__meta span:nth-child(2){display:none!important}

    .ca-main{
        padding:0!important;
        max-width:none!important;
    }
    .ca-card{
        margin:0!important;
        max-width:none!important;
        border:0!important;
        border-radius:0!important;
        box-shadow:none!important;
        min-height:0!important;
    }
    .ca-card__inner,
    .ca-card__inner--media,
    .ca-card__inner--lottie{
        padding:20px 16px 24px!important;
    }
    .ca-question{
        font-size:21px!important;
        line-height:1.28!important;
        margin:4px 0 15px!important;
    }
    .ca-options-label{
        margin:0 0 10px!important;
        font-size:12px!important;
    }
    .ca-options{
        width:100%!important;
        max-width:none!important;
        gap:9px!important;
    }
    .ca-option{
        min-height:56px!important;
        padding:13px 12px!important;
        font-size:15px!important;
        border-radius:14px!important;
    }
    .ca-option__letter{
        width:30px!important;
        height:30px!important;
    }
    .ca-feedback{
        width:auto!important;
        max-width:none!important;
        margin:2px 16px 12px!important;
    }

    /* Keep actions reachable with one hand */
    #ca-form .ca-toolbar{
        position:sticky!important;
        bottom:0!important;
        z-index:120!important;
        padding:9px 12px calc(9px + env(safe-area-inset-bottom))!important;
        background:rgba(255,255,255,.98)!important;
    }
    #ca-form .ca-toolbar__inner{
        width:100%!important;
        max-width:none!important;
        gap:8px!important;
    }
    .ca-btn{
        min-height:50px!important;
        font-size:14px!important;
    }
    .ca-btn--prev{
        flex:0 0 42%!important;
        min-width:0!important;
        width:auto!important;
        margin-right:0!important;
        padding:0 12px!important;
    }
    .ca-btn--answer,.ca-btn--continue,.ca-btn--next,.ca-btn--end,#ca-btn-video-next{
        flex:1 1 auto!important;
        min-width:0!important;
        max-width:none!important;
        width:auto!important;
    }
    .ca-btn--explain{
        flex:0 0 50px!important;
        min-width:50px!important;
        width:50px!important;
        padding:0!important;
        font-size:0!important;
    }
    .ca-btn--explain svg{margin:0!important}
    .ca-btn--skip{
        flex:0 0 auto!important;
        min-width:0!important;
        font-size:12px!important;
        padding:0 5px!important;
    }

    .cev2-step{gap:14px!important}
    .cev2-title{
        font-size:26px!important;
        line-height:1.12!important;
    }
    .cev2-text{
        font-size:16px!important;
        line-height:1.55!important;
    }
    .cev2-media{border-radius:14px!important}
    .cev2-media img{max-height:42dvh!important}
    .cev2-compare{
        grid-template-columns:1fr!important;
        gap:9px!important;
    }
    .cev2-compare__column{
        padding:13px!important;
        border-radius:13px!important;
    }
    .cev2-list__item{
        padding:12px!important;
        font-size:15px!important;
    }
    .cev2-sequence__item{
        grid-template-columns:34px 1fr!important;
    }

    .ca-explanation.is-visible{
        bottom:74px!important;
        width:calc(100vw - 20px)!important;
        max-height:calc(100dvh - 140px)!important;
    }
    .ca-explanation__card{
        max-height:calc(100dvh - 140px)!important;
        border-radius:18px!important;
        box-shadow:0 18px 45px rgba(17,24,39,.16)!important;
    }
}


/* Extracted from views/education/course/course_answer.php style#7 */
/* =========================================================
   COURSE ENGINE V2.1.2 — TRUE MOBILE VIEWPORT
   На телефоне учебный экран занимает весь остаток viewport,
   а зона действий живёт внизу вместо "карточки сверху + пустота".
   ========================================================= */
@media(max-width:700px){
    .ca-shell{
        height:100vh!important;
        height:100dvh!important;
        min-height:100dvh!important;
    }

    .ca-scroll{
        flex:1 1 0!important;
        min-height:0!important;
        height:auto!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        display:flex!important;
        flex-direction:column!important;
    }

    .ca-main{
        flex:1 0 auto!important;
        min-height:100%!important;
        width:100%!important;
        display:flex!important;
        flex-direction:column!important;
        padding:0!important;
    }

    .ca-card{
        flex:1 0 auto!important;
        min-height:100%!important;
        width:100%!important;
        margin:0!important;
        display:flex!important;
        flex-direction:column!important;
        overflow:visible!important;
        border:0!important;
        border-radius:0!important;
        box-shadow:none!important;
        background:#fff!important;
    }

    .ca-card__inner,
    .ca-card__inner--media,
    .ca-card__inner--lottie{
        flex:1 0 auto!important;
        min-height:0!important;
        width:100%!important;
        padding:20px 16px 24px!important;
    }

    /* Короткий материал не прилипает к верху — остаётся воздух,
       но кнопки всегда в нижней зоне экрана. */
    .ca-card__inner > .cev2-step{
        width:100%!important;
    }

    #ca-form .ca-toolbar{
        position:sticky!important;
        bottom:0!important;
        left:0!important;
        right:0!important;
        z-index:150!important;
        flex:0 0 auto!important;
        margin-top:auto!important;
        width:100%!important;
        padding:9px 12px calc(9px + env(safe-area-inset-bottom))!important;
        border-top:1px solid #E5E8EC!important;
        background:rgba(255,255,255,.98)!important;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
    }

    #ca-form .ca-toolbar__inner{
        width:100%!important;
        max-width:none!important;
        min-height:50px!important;
    }

    /* На первом шаге "Далее" занимает всю ширину.
       На остальных Назад/Далее остаются двумя удобными touch-кнопками. */
    .ca-btn--next:only-child,
    .ca-btn--end:only-child{
        width:100%!important;
        max-width:none!important;
        flex:1 1 100%!important;
    }

    /* Медиа не должно выталкивать управление далеко за экран. */
    .cev2-media img,
    .ca-img-wrap img{
        max-height:44dvh!important;
        object-fit:contain!important;
    }

    /* На очень коротких экранах ещё немного ужимаем вертикальный ритм. */
    @media(max-height:720px){
        .ca-card__inner,
        .ca-card__inner--media,
        .ca-card__inner--lottie{
            padding-top:14px!important;
            padding-bottom:16px!important;
        }
        .cev2-title{
            font-size:23px!important;
        }
        .cev2-step{
            gap:11px!important;
        }
    }
}


/* Extracted from views/education/course/course_answer.php style#8 */
/* =========================================================
   COURSE ENGINE V2.1.3 — MOBILE BOTTOM ACTIONS FINAL
   IMPORTANT: use #ca-form specificity to override legacy
   viewport/card rules already present earlier in this file.
   ========================================================= */
@media(max-width:700px){
    #ca-form{
        display:flex!important;
        flex:1 1 auto!important;
        min-height:0!important;
        overflow:hidden!important;
    }

    #ca-form .ca-scroll{
        display:flex!important;
        flex:1 1 0!important;
        min-height:0!important;
        height:auto!important;
        overflow:hidden!important;
        padding:0!important;
    }

    #ca-form .ca-main{
        display:flex!important;
        flex-direction:column!important;
        flex:1 1 0!important;
        min-height:0!important;
        height:100%!important;
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
    }

    /* The compact lesson header already contains the step counter. */
    #ca-form .ca-type-row{
        display:none!important;
    }

    /* Fill ALL remaining player height.
       This overrides the legacy `flex:0 1 auto !important`. */
    #ca-form .ca-card{
        display:flex!important;
        flex-direction:column!important;
        flex:1 1 0!important;
        min-height:0!important;
        height:100%!important;
        max-height:none!important;
        width:100%!important;
        margin:0!important;
        overflow:hidden!important;

        border:0!important;
        border-radius:0!important;
        box-shadow:none!important;
        background:#fff!important;
    }

    /* Content scrolls, actions do not. */
    #ca-form .ca-card__inner,
    #ca-form .ca-card__inner--media,
    #ca-form .ca-card__inner--lottie{
        display:block!important;
        flex:1 1 auto!important;
        min-height:0!important;
        max-height:none!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        padding:20px 16px 22px!important;
        -webkit-overflow-scrolling:touch;
    }

    #ca-form .ca-feedback{
        flex:0 0 auto!important;
    }

    #ca-form .ca-explanation{
        flex:0 0 auto!important;
    }

    /* Real bottom action zone inside the fixed-height card. */
    #ca-form .ca-toolbar{
        position:relative!important;
        inset:auto!important;
        flex:0 0 auto!important;
        margin-top:auto!important;
        width:100%!important;
        min-height:68px!important;
        padding:9px 12px calc(9px + env(safe-area-inset-bottom))!important;

        background:#fff!important;
        border-top:1px solid #E5E8EC!important;
        border-radius:0!important;
        box-shadow:0 -8px 24px rgba(17,24,39,.035)!important;
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
    }

    #ca-form .ca-toolbar__inner{
        width:100%!important;
        max-width:none!important;
        min-height:50px!important;
        margin:0!important;
        display:flex!important;
        align-items:center!important;
        gap:8px!important;
    }

    #ca-form .ca-btn--prev{
        flex:0 0 42%!important;
        width:auto!important;
        min-width:0!important;
        margin:0!important;
    }

    #ca-form .ca-btn--next,
    #ca-form .ca-btn--end,
    #ca-form .ca-btn--answer,
    #ca-form .ca-btn--continue{
        flex:1 1 auto!important;
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        margin:0!important;
    }

    /* First step: one large Next button. */
    #ca-form .ca-toolbar__inner > div[style*="flex:1"] + .ca-btn--next,
    #ca-form .ca-toolbar__inner > div[style*="flex:1"] + .ca-btn--end{
        flex:1 1 100%!important;
        width:100%!important;
    }

    /* Keep media usable without pushing actions out of view. */
    #ca-form .cev2-media img,
    #ca-form .ca-img-wrap img,
    #ca-form .ca-qimg img{
        max-height:42dvh!important;
        object-fit:contain!important;
    }

    /* Short content remains visually comfortable at the top. */
    #ca-form .cev2-step{
        width:100%!important;
        max-width:none!important;
    }
}


/* Extracted from views/education/course/course_answer.php style#9 */
/* =========================================================
   COURSE ENGINE V2.1.4 — FEEDBACK + IMAGE_TEXT POLISH
   ========================================================= */

/* Old course CSS has more specific green correct-answer selectors.
   Override them at the same/higher specificity. */
#ca-form .ca-option.is-correct,
#ca-form .ca-option.is-correct:hover{
    border-color:#D8A900!important;
    background:#FFF8D7!important;
    color:#111!important;
    box-shadow:none!important;
}

#ca-form .ca-option.is-correct .ca-option__letter{
    border-color:#FFC400!important;
    background:#FFC400!important;
    color:#111!important;
}

#ca-form .ca-option.is-correct .ca-option__state{
    background:#111!important;
    color:#fff!important;
    border-color:#111!important;
}

/* Wrong answer stays semantic red. */
#ca-form .ca-option.is-wrong,
#ca-form .ca-option.is-wrong:hover{
    border-color:#E59A9A!important;
    background:#FFF2F2!important;
    color:#111!important;
}
#ca-form .ca-option.is-wrong .ca-option__letter{
    background:#D94848!important;
    border-color:#D94848!important;
    color:#fff!important;
}
#ca-form .ca-option.is-wrong .ca-option__state{
    background:#C92F2F!important;
    color:#fff!important;
}

/* Correct feedback is yellow/neutral, not green. */
#ca-form .ca-feedback--correct{
    background:#FFF8D7!important;
    border:1px solid #E8C548!important;
    color:#111!important;
}
#ca-form .ca-feedback--correct .ca-feedback__icon{
    background:#FFC400!important;
    color:#111!important;
}
#ca-form .ca-feedback--correct .ca-feedback__title{
    color:#111!important;
}

/* Wrong feedback remains red as a semantic error state. */
#ca-form .ca-feedback--wrong{
    background:#FFF1F1!important;
    border:1px solid #E7B0B0!important;
}
#ca-form .ca-feedback--wrong .ca-feedback__title{
    color:#B92F2F!important;
}

/* IMAGE_TEXT: media should support the lesson, not dominate it. */
@media(max-width:700px){
    #ca-form .cev2-media img,
    #ca-form .ca-img-wrap img,
    #ca-form .ca-qimg img{
        max-height:36dvh!important;
        width:100%!important;
        object-fit:contain!important;
    }

    #ca-form .cev2-media__caption,
    #ca-form .cev2-caption{
        font-size:11px!important;
        line-height:1.35!important;
        color:#7B838D!important;
    }

    #ca-form .cev2-media + .cev2-text,
    #ca-form .cev2-media + p{
        margin-top:14px!important;
    }
}


/* Extracted from views/education/course/course_answer.php style#10 */
/* V2 explanations show authored educational content without UI-invented filler. */
#ca-form .ca-explanation__lead{
    white-space:pre-line!important;
}
#ca-form .ca-explanation__list:empty,
#ca-form .ca-explanation__footer:empty{
    display:none!important;
}
#ca-form .ca-explanation__lead:empty{
    display:none!important;
}
@media(max-width:700px){
    #ca-form .ca-explanation__title{
        font-size:18px!important;
        line-height:1.2!important;
    }
    #ca-form .ca-explanation__lead{
        font-size:14px!important;
        line-height:1.55!important;
        color:#303740!important;
        margin:10px 0 0!important;
    }
}


/* Extracted from views/education/course/course_answer.php style#11 */
#cev22-interaction.ca-v236-correct,
.cev229-match.ca-v236-correct{animation:caV236Correct .48s cubic-bezier(.2,.9,.25,1)}
#cev22-interaction.ca-v236-wrong,
.cev229-match.ca-v236-wrong{animation:caV236Wrong .38s ease}
.cev229-match__card.is-solved.ca-v236-pair{animation:caV236Pair .42s cubic-bezier(.2,.9,.25,1)}
@keyframes caV236Correct{0%{transform:scale(1)}45%{transform:scale(1.008)}100%{transform:scale(1)}}
@keyframes caV236Wrong{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@keyframes caV236Pair{0%{transform:scale(.985)}55%{transform:scale(1.025)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
 #cev22-interaction.ca-v236-correct,#cev22-interaction.ca-v236-wrong,.cev229-match.ca-v236-correct,.cev229-match.ca-v236-wrong,.cev229-match__card.is-solved.ca-v236-pair{animation:none!important}
}


/* Extracted from views/education/course/course_answer.php style#12 */
#ca-form .ca-card--interaction .ca-card__inner{
    overflow-y:auto!important;
}
#ca-form .ca-card--interaction .ca-toolbar{
    background:#fff!important;
}

/* Structured toolbar: no overlap between Explanation and Next. */
#ca-form #cev22-check-btn{
    margin-left:auto!important;
}
#ca-form #cev22-explain-btn{
    flex:0 0 auto!important;
    min-width:128px!important;
    width:auto!important;
    margin-left:auto!important;
}
#ca-form #cev22-continue-btn{
    flex:0 0 auto!important;
    min-width:132px!important;
    width:auto!important;
    margin-left:0!important;
}

/* Inline style="display:none" must win until JS explicitly opens the action. */
#ca-form #cev22-explain-btn[style*="display:none"],
#ca-form #cev22-continue-btn[style*="display:none"]{
    display:none!important;
}

@media(max-width:700px){
    #ca-form .ca-card--interaction{
        flex:1 1 0!important;
        min-height:0!important;
        height:100%!important;
        border:0!important;
        border-radius:0!important;
        box-shadow:none!important;
    }
    #ca-form .ca-card--interaction .ca-card__inner{
        flex:1 1 auto!important;
        min-height:0!important;
        overflow-y:auto!important;
        padding:18px 14px 20px!important;
    }

    #ca-form #cev22-check-btn{
        flex:1 1 auto!important;
        min-width:0!important;
        margin-left:0!important;
    }
    #ca-form #cev22-explain-btn{
        flex:0 0 50px!important;
        min-width:50px!important;
        width:50px!important;
        margin-left:0!important;
        padding:0!important;
        font-size:0!important;
    }
    #ca-form #cev22-continue-btn{
        flex:1 1 auto!important;
        min-width:0!important;
        width:auto!important;
        margin-left:0!important;
    }
}


/* Extracted from views/education/course/course_answer.php style#13 */
#ca-form .ca-card--interaction{
    border-radius:22px!important;
}
#ca-form .ca-card--interaction .ca-card__inner{
    padding:22px 22px 18px!important;
}
#ca-form .ca-card--interaction .ca-toolbar{
    border-top:1px solid #eceff2!important;
    padding:10px 14px!important;
    gap:8px!important;
}
#ca-form .ca-card--interaction .ca-feedback{
    margin-top:12px!important;
    border-radius:15px!important;
}
#ca-form .ca-card--interaction .ca-explanation{
    margin-top:10px!important;
    border-radius:16px!important;
}
@media(max-width:700px){
    #ca-form .ca-card--interaction{
        border-radius:0!important;
    }
    #ca-form .ca-card--interaction .ca-card__inner{
        padding:16px 12px 18px!important;
    }
    #ca-form .ca-card--interaction .ca-toolbar{
        padding:9px 10px!important;
        gap:7px!important;
    }
    #ca-form #cev22-explain-btn{
        position:relative!important;
    }
    #ca-form #cev22-explain-btn::before{
        content:"?"!important;
        width:24px;
        height:24px;
        border-radius:50%;
        display:grid;
        place-items:center;
        border:1.5px solid currentColor;
        font-size:14px;
        font-weight:850;
    }
}


/* Extracted from views/education/course/course_answer.php style#14 */
#ca-form .ca-card--interaction{
    max-width:760px!important;
    border:1px solid #e8ebee!important;
    box-shadow:0 8px 24px rgba(17,24,39,.04)!important;
}
#ca-form .ca-card--interaction .ca-card__inner{
    padding:20px 20px 12px!important;
}
#ca-form .ca-card--interaction .ca-toolbar{
    padding:10px 14px!important;
    background:#fff!important;
}
@media(max-width:700px){
    #ca-form .ca-card--interaction{
        max-width:none!important;
        border:0!important;
        box-shadow:none!important;
    }
    #ca-form .ca-card--interaction .ca-card__inner{
        padding:16px 12px 12px!important;
    }
}


/* Extracted from views/education/course/course_answer.php style#15 */
@media(max-width:700px){
    /* While answering: one object per screen. After check: show the whole result. */
    #cev22-interaction.is-checked .cev224-mobile-stepper,
    #cev22-interaction.is-checked .cev224-mobile-nav{
        display:none!important;
    }
    #cev22-interaction.is-checked .cev22-field{
        display:block!important;
        padding:12px 0 13px!important;
        border-bottom:1px solid #eceff2!important;
        animation:none!important;
    }
    #cev22-interaction.is-checked .cev22-field:last-child{
        border-bottom:0!important;
    }

    #ca-form .ca-card--interaction.is-mobile-incomplete .ca-toolbar{
        justify-content:flex-start!important;
    }
    #ca-form .ca-card--interaction.is-mobile-incomplete .ca-btn--prev{
        flex:0 0 auto!important;
    }

    #ca-form .ca-card--interaction:not(.is-mobile-incomplete) #cev22-check-btn{
        display:inline-flex;
    }
}


/* Extracted from views/education/course/course_answer.php style#16 */
@media(max-width:700px){
    #ca-form .ca-card--interaction .ca-card__inner{
        padding-top:14px!important;
    }
    #ca-form .ca-card--interaction .ca-toolbar{
        padding:8px 10px!important;
        min-height:62px!important;
    }

    /* Let the learning task breathe vertically; bottom action stays anchored. */
    #ca-form .ca-card--interaction{
        background:#fff!important;
    }

    /* Explanation/result mode: no micro progress chrome. */
    #cev22-interaction.is-checked .cev224-mobile-stepper{
        display:none!important;
    }
}


/* Extracted from views/education/course/course_answer.php style#17 */
/* =========================================================
   Course Engine V2.3.0 — MATCH two-column tap-to-pair + replay
   Duolingo-like: tap one side, tap the other, correct pair fades out.
   ========================================================= */
#cev22-interaction.cev229-match{
    width:100%;
    max-width:780px;
    margin:0 auto;
}
#cev22-interaction.cev229-match .cev229-match__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:10px;
    align-items:start;
}
#cev22-interaction.cev229-match .cev229-match__column{
    display:grid;
    gap:10px;
    min-width:0;
}
#cev22-interaction.cev229-match .cev229-match__card{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-height:64px;
    padding:12px 14px;
    border:1.5px solid #DCE2E8;
    border-radius:14px;
    background:#fff;
    color:#171A1F;
    font:inherit;
    font-size:15px;
    font-weight:700;
    line-height:1.28;
    text-align:center;
    overflow-wrap:anywhere;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    transition:
        border-color .14s ease,
        background-color .14s ease,
        color .14s ease,
        opacity .14s ease,
        transform .10s ease;
}
#cev22-interaction.cev229-match .cev229-match__card:active:not(:disabled){
    transform:scale(.985);
}
#cev22-interaction.cev229-match .cev229-match__card.is-selected{
    border-color:#D8A900;
    background:#FFF7CF;
    color:#111;
}
#cev22-interaction.cev229-match .cev229-match__card.is-solved{
    border-color:#E8EBEE;
    background:#F1F3F5;
    color:#9AA1AA;
    opacity:.68;
    cursor:default;
}
#cev22-interaction.cev229-match .cev229-match__card.is-wrong{
    border-color:#D95C5C;
    background:#FFF1F1;
    color:#B93232;
    animation:cev229MatchWrong .28s ease;
}
#cev22-interaction.cev229-match .cev229-match__card:focus-visible{
    outline:3px solid rgba(255,196,0,.28);
    outline-offset:2px;
}
#cev22-interaction.cev229-match .cev229-match__status{
    min-height:22px;
    margin:10px 2px 0;
    text-align:center;
    color:#7B838D;
    font-size:12px;
    font-weight:650;
    line-height:1.35;
}
#cev22-interaction.cev229-match .cev229-match__status.is-error{
    color:#B93232;
}
#cev22-interaction.cev229-match .cev229-match__state{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
    pointer-events:none!important;
}
#cev22-interaction.cev229-match .cev224-mobile-stepper,
#cev22-interaction.cev229-match .cev224-mobile-nav{
    display:none!important;
}
#ca-form .ca-card--interaction:has(#cev22-interaction.cev229-match) #cev22-check-btn{
    display:none!important;
}
@keyframes cev229MatchWrong{
    0%,100%{transform:translateX(0)}
    35%{transform:translateX(-4px)}
    70%{transform:translateX(4px)}
}
@media(max-width:700px){
    #ca-form .ca-card--interaction:has(#cev22-interaction.cev229-match) .ca-card__inner{
        padding:18px 14px 16px!important;
        overflow-y:auto!important;
    }
    #cev22-interaction.cev229-match{
        max-width:none;
        margin:0;
    }
    #cev22-interaction.cev229-match .cev229-match__grid{
        gap:8px;
    }
    #cev22-interaction.cev229-match .cev229-match__column{
        gap:8px;
    }
    #cev22-interaction.cev229-match .cev229-match__card{
        min-height:62px;
        padding:11px 8px;
        border-radius:13px;
        font-size:14px;
        line-height:1.24;
    }
    #ca-form .ca-card--interaction:has(#cev22-interaction.cev229-match) .ca-toolbar{
        padding:9px 10px calc(9px + env(safe-area-inset-bottom))!important;
    }
    #ca-form .ca-card--interaction:has(#cev22-interaction.cev229-match) #cev22-continue-btn{
        flex:1 1 auto!important;
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
    }
}


/* Extracted from views/education/course/course_answer.php style#18 */
/* =========================================================
   Course Engine V2.3.5 — player stabilization
   - restore authored MATCH heading/instruction
   - readable Explanation actions
   - better vertical rhythm for short V2 information steps
   No backend / DB / auth changes.
   ========================================================= */

/* MATCH: keep the two-column mechanic, but restore the authored context above it. */
#cev22-interaction.cev229-match .cev229-match__title{
    margin:0 0 7px!important;
    color:#111!important;
    font-size:24px!important;
    line-height:1.16!important;
    letter-spacing:-.02em!important;
    font-weight:850!important;
}
#cev22-interaction.cev229-match .cev229-match__lead{
    margin:0 0 16px!important;
    color:#707985!important;
    font-size:14px!important;
    line-height:1.42!important;
    font-weight:500!important;
}

/* Explanation must read as an action, not as an unexplained arrow / icon. */
#ca-form .ca-btn--explain,
#ca-form #cev22-explain-btn{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:118px!important;
    padding:0 14px!important;
    gap:7px!important;
    font-size:13px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
}
#ca-form .ca-btn--explain svg,
#ca-form #cev22-explain-btn svg{
    width:18px!important;
    height:18px!important;
    flex:0 0 18px!important;
    margin:0!important;
}
#ca-form #cev22-explain-btn::before{
    display:none!important;
    content:none!important;
}

/* Short authored V2 information screens should not cling to the top edge.
   Rich media / compare / list / sequence steps keep their compact top spacing. */
@media(max-width:700px){
    #ca-form .ca-card--v2 .ca-card__inner{
        padding-top:clamp(34px,6.5dvh,60px)!important;
    }
    #ca-form .ca-card--v2 .ca-card__inner:has(.cev2-media),
    #ca-form .ca-card--v2 .ca-card__inner:has(.cev2-compare),
    #ca-form .ca-card--v2 .ca-card__inner:has(.cev2-list__item),
    #ca-form .ca-card--v2 .ca-card__inner:has(.cev2-sequence__item){
        padding-top:20px!important;
    }

    #cev22-interaction.cev229-match .cev229-match__title{
        font-size:21px!important;
        line-height:1.2!important;
        margin-bottom:6px!important;
    }
    #cev22-interaction.cev229-match .cev229-match__lead{
        font-size:13px!important;
        line-height:1.38!important;
        margin-bottom:14px!important;
    }

    #ca-form .ca-btn--explain,
    #ca-form #cev22-explain-btn{
        min-width:108px!important;
        min-height:50px!important;
        padding:0 11px!important;
        font-size:12px!important;
    }
}

@media(max-width:380px){
    #ca-form .ca-btn--explain,
    #ca-form #cev22-explain-btn{
        min-width:96px!important;
        padding:0 9px!important;
        font-size:11px!important;
    }
}


/* Extracted from views/education/course/course_answer.php style#19 */
/* =========================================================
   Course Engine V2.3.7 — answer motion
   Motion only. Existing sound / backend / course logic untouched.
   ========================================================= */
.ca-card.ca-motion-correct{
    animation:caMotionCardCorrect .62s cubic-bezier(.2,.9,.25,1);
}
.ca-card.ca-motion-wrong{
    animation:caMotionCardWrong .42s ease;
}
.ca-card.ca-motion-correct::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    box-shadow:inset 0 0 0 2px rgba(255,196,0,.48),0 0 0 0 rgba(255,196,0,0);
    animation:caMotionGlow .72s ease-out both;
    z-index:20;
}
.ca-card{position:relative}
.ca-motion-badge{
    position:fixed;
    left:50%;
    top:42%;
    z-index:9998;
    width:62px;
    height:62px;
    margin:-31px 0 0 -31px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FFC400;
    color:#111;
    box-shadow:0 18px 46px rgba(18,25,38,.18), inset 0 -3px 0 rgba(120,88,0,.20);
    pointer-events:none;
    opacity:0;
    transform:scale(.55) translateY(8px);
    animation:caMotionBadge .72s cubic-bezier(.16,1,.3,1) both;
}
.ca-motion-badge svg{width:30px;height:30px;stroke:currentColor;stroke-width:3.2;fill:none}
.ca-motion-burst{
    position:fixed;
    left:50%;
    top:42%;
    width:1px;
    height:1px;
    pointer-events:none;
    z-index:9997;
}
.ca-motion-burst i{
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#FFC400;
    opacity:0;
    transform:translate(-50%,-50%);
    animation:caMotionParticle .72s cubic-bezier(.2,.8,.25,1) both;
}
.ca-motion-burst i:nth-child(1){--x:0px;--y:-54px;animation-delay:.01s}
.ca-motion-burst i:nth-child(2){--x:44px;--y:-30px;animation-delay:.03s}
.ca-motion-burst i:nth-child(3){--x:50px;--y:20px;animation-delay:.05s}
.ca-motion-burst i:nth-child(4){--x:0px;--y:54px;animation-delay:.07s}
.ca-motion-burst i:nth-child(5){--x:-50px;--y:20px;animation-delay:.09s}
.ca-motion-burst i:nth-child(6){--x:-44px;--y:-30px;animation-delay:.11s}
.ca-option.is-correct.ca-motion-option,
[data-item-id].is-correct.ca-motion-option,
[data-sort-id].is-correct.ca-motion-option{
    animation:caMotionOptionCorrect .46s cubic-bezier(.2,.9,.25,1)!important;
}
.ca-option.is-wrong.ca-motion-option,
[data-item-id].is-wrong.ca-motion-option,
[data-sort-id].is-wrong.ca-motion-option{
    animation:caMotionOptionWrong .38s ease!important;
}
.cev229-match__card.ca-motion-pair-good{
    animation:caMotionPairGood .44s cubic-bezier(.2,.9,.25,1)!important;
}
.cev229-match__card.ca-motion-pair-bad{
    animation:caMotionPairBad .34s ease!important;
}
.ca-feedback.is-visible.ca-motion-feedback{
    animation:caMotionFeedback .38s cubic-bezier(.2,.9,.25,1)!important;
}
@keyframes caMotionCardCorrect{
    0%{transform:translateY(0) scale(1)}
    42%{transform:translateY(-3px) scale(1.008)}
    100%{transform:translateY(0) scale(1)}
}
@keyframes caMotionCardWrong{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-4px)}
    40%{transform:translateX(4px)}
    60%{transform:translateX(-2px)}
    80%{transform:translateX(2px)}
}
@keyframes caMotionGlow{
    0%{opacity:0;box-shadow:inset 0 0 0 2px rgba(255,196,0,0),0 0 0 0 rgba(255,196,0,0)}
    28%{opacity:1;box-shadow:inset 0 0 0 2px rgba(255,196,0,.52),0 0 0 7px rgba(255,196,0,.11)}
    100%{opacity:0;box-shadow:inset 0 0 0 2px rgba(255,196,0,0),0 0 0 13px rgba(255,196,0,0)}
}
@keyframes caMotionBadge{
    0%{opacity:0;transform:scale(.55) translateY(10px)}
    34%{opacity:1;transform:scale(1.08) translateY(0)}
    62%{opacity:1;transform:scale(1) translateY(0)}
    100%{opacity:0;transform:scale(.96) translateY(-8px)}
}
@keyframes caMotionParticle{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
    24%{opacity:.95}
    100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)}
}
@keyframes caMotionOptionCorrect{
    0%{transform:scale(.992)}
    54%{transform:scale(1.012)}
    100%{transform:scale(1)}
}
@keyframes caMotionOptionWrong{
    0%,100%{transform:translateX(0)}
    30%{transform:translateX(-3px)}
    60%{transform:translateX(3px)}
}
@keyframes caMotionPairGood{
    0%{transform:scale(.98)}
    55%{transform:scale(1.025)}
    100%{transform:scale(1)}
}
@keyframes caMotionPairBad{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-4px)}
    50%{transform:translateX(4px)}
    75%{transform:translateX(-2px)}
}
@keyframes caMotionFeedback{
    from{opacity:0;transform:translateY(8px) scale(.99)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:700px){
    .ca-motion-badge{top:39%;width:56px;height:56px;margin:-28px 0 0 -28px}
    .ca-motion-badge svg{width:27px;height:27px}
    .ca-motion-burst{top:39%}
}
@media(prefers-reduced-motion:reduce){
    .ca-card.ca-motion-correct,.ca-card.ca-motion-wrong,
    .ca-card.ca-motion-correct::after,.ca-motion-badge,.ca-motion-burst i,
    .ca-motion-option,.ca-motion-pair-good,.ca-motion-pair-bad,.ca-motion-feedback{
        animation:none!important;
    }
    .ca-motion-badge,.ca-motion-burst{display:none!important}
}


/* Extracted from views/education/course/course_answer.php style#20 */
/* =========================================================
   COURSE ENGINE V2.3.9 — STEP MOTION / SINGLE PAGE ENTRY
   Motion only. No answer logic / audio changes.
   ========================================================= */
/* Whole-step entrance is intentionally handled only by the existing AJAX page transition.
   Do not animate the card or all children again here: that caused the page to look as if it loaded twice. */

/* Choice / classify selection: short tactile settle. */
#cev22-interaction [data-choice-value].ca-step-choice-pop,
.cev229-match__card.ca-step-choice-pop{
    animation:caStepChoicePop .24s cubic-bezier(.2,.9,.25,1)!important;
}

/* SORT: actual row glides from its previous position after Up/Down. */
#cev22-interaction [data-sort-id]{
    will-change:transform;
}
#cev22-interaction [data-sort-id].ca-sort-moving{
    transition:transform .28s cubic-bezier(.2,.85,.25,1)!important;
    position:relative;
    z-index:3;
}

/* MATCH solved pair gets a small lock-in motion, separate from result burst. */
.cev229-match__card.is-solved.ca-step-lock-in{
    animation:caStepLockIn .34s cubic-bezier(.16,1,.3,1)!important;
}

/* Explanation opens as a continuation of the answer, not a new page. */
.ca-explanation.is-visible.ca-step-explain-in .ca-explanation__card{
    animation:caStepExplainIn .38s cubic-bezier(.16,1,.3,1) both!important;
}

/* Page-to-page motion stays in the existing #ca-scroll/.ca-main AJAX transition above. */

@keyframes caStepChoicePop{
    0%{transform:scale(1)}
    48%{transform:scale(.975)}
    100%{transform:scale(1)}
}
@keyframes caStepLockIn{
    0%{transform:scale(.985)}
    55%{transform:scale(1.018)}
    100%{transform:scale(1)}
}
@keyframes caStepExplainIn{
    from{opacity:0;transform:translateY(10px) scale(.992)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@media(prefers-reduced-motion:reduce){
    .ca-step-choice-pop,
    .ca-step-lock-in,
    .ca-explanation.is-visible.ca-step-explain-in .ca-explanation__card{
        animation:none!important;
        transition:none!important;
    }
}


/* Extracted from views/education/course/course_answer.php style#21 */
/* V2.4.0 — result state must stay geometrically stable after feedback. */
#cev22-interaction.ca-v236-correct,
#cev22-interaction.ca-v236-wrong,
.cev229-match.ca-v236-correct,
.cev229-match.ca-v236-wrong,
.ca-card.ca-motion-correct,
.ca-card.ca-motion-wrong,
.ca-card.ca-motion-correct::after{
    animation:none!important;
    transform:none!important;
}
/* Keep feedback local: no full-card/page re-entry after answer. */
.ca-card.ca-motion-correct::after{display:none!important;}


/* Extracted from views/education/course/course_answer.php style#22 */
/* =========================================================
   COURSE ENGINE V2.4.1 — LOCAL INTERACTION PHYSICS
   Local motion only. Never moves/restarts the whole card/page.
   ========================================================= */
#ca-form .ca-btn:not(:disabled){
    transition:
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        opacity .16s ease,
        filter .16s ease,
        transform .10s ease !important;
}
#ca-form .ca-btn:not(:disabled):active{
    transform:scale(.975) !important;
}

#cev22-interaction [data-choice-value]{
    transform-origin:center;
    transition:
        border-color .16s ease,
        background-color .16s ease,
        box-shadow .16s ease,
        transform .16s cubic-bezier(.2,.9,.25,1) !important;
}
#cev22-interaction [data-choice-value].is-selected{
    transform:translateY(-1px);
}
#cev22-interaction [data-item-id].ca-classify-bind{
    animation:caClassifyBind .34s cubic-bezier(.16,1,.3,1);
}

#cev22-interaction [data-sort-id].ca-sort-moving{
    box-shadow:0 10px 22px rgba(15,23,42,.10) !important;
    transform-origin:center;
}
#cev22-interaction [data-sort-id].ca-sort-settle{
    animation:caSortSettle .34s cubic-bezier(.16,1,.3,1);
}

#cev22-interaction.cev229-match .cev229-match__card{
    transition:
        border-color .16s ease,
        background-color .16s ease,
        box-shadow .16s ease,
        opacity .16s ease,
        transform .16s cubic-bezier(.2,.9,.25,1) !important;
}
#cev22-interaction.cev229-match .cev229-match__card.is-selected{
    transform:translateY(-1px);
    box-shadow:0 5px 14px rgba(15,23,42,.07);
}
#cev22-interaction.cev229-match .cev229-match__card.is-solved{
    transform:none !important;
}
#cev22-interaction.cev229-match .cev229-match__card.ca-match-settle{
    animation:caMatchSettle .32s cubic-bezier(.16,1,.3,1);
}

#ca-form .ca-feedback.is-visible.ca-local-feedback-in{
    animation:caLocalFeedbackIn .28s cubic-bezier(.16,1,.3,1) both !important;
}
#ca-form .ca-explanation.is-visible .ca-explanation__card{
    transform-origin:50% 100%;
}

#cev22-interaction .is-correct.ca-local-result-pop{
    animation:caLocalCorrect .34s cubic-bezier(.16,1,.3,1);
}
#cev22-interaction .is-wrong.ca-local-result-pop{
    animation:caLocalWrong .32s ease;
}

@keyframes caClassifyBind{
    0%{box-shadow:0 0 0 0 rgba(255,196,0,0)}
    48%{box-shadow:0 0 0 4px rgba(255,196,0,.15)}
    100%{box-shadow:0 0 0 0 rgba(255,196,0,0)}
}
@keyframes caSortSettle{
    0%{filter:brightness(1); box-shadow:0 0 0 rgba(15,23,42,0)}
    45%{filter:brightness(1.025); box-shadow:0 7px 18px rgba(15,23,42,.08)}
    100%{filter:brightness(1); box-shadow:0 0 0 rgba(15,23,42,0)}
}
@keyframes caMatchSettle{
    0%{box-shadow:0 0 0 0 rgba(255,196,0,0)}
    45%{box-shadow:0 0 0 4px rgba(255,196,0,.14)}
    100%{box-shadow:0 0 0 0 rgba(255,196,0,0)}
}
@keyframes caLocalFeedbackIn{
    from{opacity:0; transform:translateY(5px)}
    to{opacity:1; transform:translateY(0)}
}
@keyframes caLocalCorrect{
    0%{filter:brightness(1)}
    45%{filter:brightness(1.035)}
    100%{filter:brightness(1)}
}
@keyframes caLocalWrong{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-3px)}
    50%{transform:translateX(3px)}
    75%{transform:translateX(-1px)}
}

@media(prefers-reduced-motion:reduce){
    #cev22-interaction [data-item-id].ca-classify-bind,
    #cev22-interaction [data-sort-id].ca-sort-settle,
    #cev22-interaction.cev229-match .cev229-match__card.ca-match-settle,
    #ca-form .ca-feedback.is-visible.ca-local-feedback-in,
    #cev22-interaction .ca-local-result-pop{
        animation:none !important;
    }
    #cev22-interaction [data-choice-value],
    #cev22-interaction.cev229-match .cev229-match__card,
    #ca-form .ca-btn{
        transition:none !important;
    }
}


/* Extracted from views/education/course/course_answer.php style#23 */
/* =========================================================
   COURSE ENGINE V2.4.2 — SORT POINTER DRAG
   Real pointer/touch reordering without moving the page/card.
   Existing up/down controls remain available as fallback.
   ========================================================= */
#cev22-interaction[data-type="SORT"] [data-sort-id]{
    touch-action: pan-x;
    user-select:none;
    -webkit-user-select:none;
    cursor:grab;
}
#cev22-interaction[data-type="SORT"] [data-sort-id]:active{
    cursor:grabbing;
}
#cev22-interaction[data-type="SORT"] [data-sort-id].ca-sort-dragging{
    position:fixed !important;
    z-index:99999 !important;
    margin:0 !important;
    pointer-events:none !important;
    cursor:grabbing !important;
    box-sizing:border-box !important;
    box-shadow:0 18px 42px rgba(15,23,42,.18) !important;
    transform:scale(1.015);
    transition:none !important;
    opacity:.98;
}
#cev22-interaction[data-type="SORT"] .ca-sort-placeholder{
    border:1.5px dashed #D8A900;
    background:#FFF9E7;
    border-radius:14px;
    box-sizing:border-box;
    opacity:.72;
}
#cev22-interaction[data-type="SORT"].ca-sort-drag-active [data-sort-id]:not(.ca-sort-dragging){
    transition:transform .18s cubic-bezier(.2,.85,.25,1);
}
@media(prefers-reduced-motion:reduce){
    #cev22-interaction[data-type="SORT"].ca-sort-drag-active [data-sort-id]:not(.ca-sort-dragging){
        transition:none!important;
    }
}


/* Extracted from views/education/course/course_answer.php style#24 */
/* =========================================================
   COURSE ENGINE V2.4.3 — MATCH PAIR LINK
   Clear local relationship between solved cards.
   No page/card motion.
   ========================================================= */
#cev22-interaction.cev229-match .cev229-match__grid{
    position:relative;
}
#cev22-interaction.cev229-match .cev229-match__card{
    position:relative;
    overflow:visible;
}

/* Same small pair marker on both cards. */
#cev22-interaction.cev229-match .cev229-match__card[data-pair-no]::after{
    content:attr(data-pair-no);
    position:absolute;
    top:50%;
    width:24px;
    height:24px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(-50%) scale(.86);
    background:#FFC400;
    color:#111;
    border:2px solid #fff;
    box-shadow:0 2px 8px rgba(15,23,42,.12);
    font-size:11px;
    line-height:1;
    font-weight:900;
    opacity:0;
    animation:caMatchPairBadgeIn .30s cubic-bezier(.16,1,.3,1) forwards;
    z-index:4;
}
#cev22-interaction.cev229-match [data-match-left][data-pair-no]::after{
    right:-12px;
}
#cev22-interaction.cev229-match [data-match-right][data-pair-no]::after{
    left:-12px;
}

/* Short-lived connector SVG. */
#cev22-interaction.cev229-match .ca-match-link-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
    z-index:3;
}
#cev22-interaction.cev229-match .ca-match-link-line{
    fill:none;
    stroke:#FFC400;
    stroke-width:4;
    stroke-linecap:round;
    vector-effect:non-scaling-stroke;
    filter:drop-shadow(0 2px 4px rgba(168,121,0,.18));
    stroke-dasharray:1;
    stroke-dashoffset:1;
    animation:caMatchDrawLine .42s cubic-bezier(.16,1,.3,1) forwards,
              caMatchFadeLine .32s ease .72s forwards;
}

/* Solved pair gets one restrained lock pulse. */
#cev22-interaction.cev229-match .cev229-match__card.ca-match-linked{
    animation:caMatchLinkedCard .36s cubic-bezier(.16,1,.3,1);
}

@keyframes caMatchPairBadgeIn{
    from{opacity:0;transform:translateY(-50%) scale(.72)}
    to{opacity:1;transform:translateY(-50%) scale(1)}
}
@keyframes caMatchDrawLine{
    from{stroke-dashoffset:1;opacity:.35}
    to{stroke-dashoffset:0;opacity:1}
}
@keyframes caMatchFadeLine{
    to{opacity:0}
}
@keyframes caMatchLinkedCard{
    0%{box-shadow:0 0 0 0 rgba(255,196,0,0)}
    48%{box-shadow:0 0 0 4px rgba(255,196,0,.13)}
    100%{box-shadow:0 0 0 0 rgba(255,196,0,0)}
}

@media(max-width:640px){
    #cev22-interaction.cev229-match .cev229-match__card[data-pair-no]::after{
        width:22px;
        height:22px;
        font-size:10px;
    }
    #cev22-interaction.cev229-match [data-match-left][data-pair-no]::after{right:-11px}
    #cev22-interaction.cev229-match [data-match-right][data-pair-no]::after{left:-11px}
}
@media(prefers-reduced-motion:reduce){
    #cev22-interaction.cev229-match .ca-match-link-line,
    #cev22-interaction.cev229-match .cev229-match__card.ca-match-linked,
    #cev22-interaction.cev229-match .cev229-match__card[data-pair-no]::after{
        animation:none!important;
        opacity:1;
        transform:translateY(-50%) scale(1);
    }
}


/* Extracted from views/education/course/course_answer.php style#25 */
/* =========================================================
   COURSE ENGINE V2.4.4 — CLASSIFY BUCKET FEEDBACK
   Local "item placed into bucket" feedback.
   No page/card movement.
   ========================================================= */

#cev22-interaction[data-type="CLASSIFY"] [data-item-id]{
    position:relative;
}

#cev22-interaction[data-type="CLASSIFY"] [data-choice-value]{
    position:relative;
    overflow:visible;
}

/* Selected category reads as the current bucket. */
#cev22-interaction[data-type="CLASSIFY"] [data-choice-value].is-selected{
    box-shadow:
        inset 0 0 0 1px rgba(255,196,0,.34),
        0 0 0 3px rgba(255,196,0,.10) !important;
}

/* Small local acceptance pulse. */
#cev22-interaction[data-type="CLASSIFY"] [data-choice-value].ca-classify-accept{
    animation:caClassifyAccept .36s cubic-bezier(.16,1,.3,1);
}

/* Item itself settles without shifting layout. */
#cev22-interaction[data-type="CLASSIFY"] [data-item-id].ca-classify-item-settle{
    animation:caClassifyItemSettle .34s cubic-bezier(.16,1,.3,1);
}

/* Short-lived travelling dot from item centre toward selected category.
   Pure overlay, therefore does not affect geometry. */
.ca-classify-fly-dot{
    position:fixed;
    z-index:99999;
    width:12px;
    height:12px;
    margin:-6px 0 0 -6px;
    border-radius:999px;
    background:#FFC400;
    border:2px solid #fff;
    box-shadow:0 4px 12px rgba(15,23,42,.16);
    pointer-events:none;
    transform:translate3d(0,0,0) scale(.82);
    opacity:.96;
    transition:
        transform .30s cubic-bezier(.16,1,.3,1),
        opacity .30s ease;
}

/* Persistent miniature marker in the selected bucket. */
#cev22-interaction[data-type="CLASSIFY"] [data-choice-value].is-selected::after{
    content:'';
    position:absolute;
    right:10px;
    top:10px;
    width:8px;
    height:8px;
    border-radius:999px;
    background:#FFC400;
    box-shadow:0 0 0 3px rgba(255,196,0,.12);
    pointer-events:none;
}

@keyframes caClassifyAccept{
    0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,196,0,0)}
    48%{transform:scale(1.012);box-shadow:0 0 0 5px rgba(255,196,0,.13)}
    100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,196,0,0)}
}
@keyframes caClassifyItemSettle{
    0%{filter:brightness(1)}
    48%{filter:brightness(1.025)}
    100%{filter:brightness(1)}
}

@media(max-width:640px){
    #cev22-interaction[data-type="CLASSIFY"] [data-choice-value].is-selected::after{
        right:8px;
        top:8px;
        width:7px;
        height:7px;
    }
}

@media(prefers-reduced-motion:reduce){
    #cev22-interaction[data-type="CLASSIFY"] [data-choice-value].ca-classify-accept,
    #cev22-interaction[data-type="CLASSIFY"] [data-item-id].ca-classify-item-settle{
        animation:none!important;
    }
    .ca-classify-fly-dot{display:none!important}
}


/* Extracted from views/education/course/course_answer.php style#26 */
/* =========================================================
   COURSE ENGINE V2.4.5 — STRUCTURED STATE COORDINATOR
   Consistent review / replay / result lifecycle.
   ========================================================= */
#cev22-interaction.ca-structured-review{
    position:relative;
}
#cev22-interaction.ca-structured-review::before{
    content:'Задание уже выполнено';
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:4px 9px;
    margin:0 0 10px;
    border-radius:999px;
    background:#FFF8D7;
    border:1px solid #E8C548;
    color:#5D4A00;
    font-size:11px;
    line-height:1;
    font-weight:800;
}
#cev22-interaction.ca-structured-replay::before{
    display:none!important;
}
@media(max-width:640px){
    #cev22-interaction.ca-structured-review::before{
        font-size:10px;
        margin-bottom:8px;
    }
}


/* Extracted from views/education/course/course_answer.php style#27 */
/* =========================================================
   COURSE ENGINE V2.4.6 — MOBILE STABILITY PASS
   Long content, small screens, landscape, safe-area and touch targets.
   No business logic changes.
   ========================================================= */

:root{
    --ca-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ca-safe-top: env(safe-area-inset-top, 0px);
}

/* Never let structured content push the action row outside the viewport. */
#ca-form .ca-card__inner{
    min-height:0 !important;
}
#ca-form .ca-toolbar{
    flex:0 0 auto !important;
}
#ca-form .ca-toolbar__inner{
    min-width:0 !important;
}

/* Generic structured interaction container. */
#cev22-interaction{
    width:100%;
    max-width:100%;
    min-width:0;
}
#cev22-interaction *{
    min-width:0;
}

/* Long labels must wrap instead of widening the card. */
#cev22-interaction button,
#cev22-interaction [data-choice-value],
#cev22-interaction [data-sort-id],
#cev22-interaction .cev229-match__card{
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:normal;
}

/* Touch targets. */
#cev22-interaction [data-choice-value],
#cev22-interaction [data-sort-id],
#cev22-interaction .cev229-match__card,
#cev22-interaction [data-move]{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}

/* Sort controls remain tappable even with long text. */
#cev22-interaction [data-sort-id]{
    align-items:center;
}
#cev22-interaction [data-sort-id] [data-move]{
    flex:0 0 auto;
    min-width:42px;
    min-height:42px;
}

/* MATCH: columns stay usable and don't collapse text. */
#cev22-interaction.cev229-match .cev229-match__grid{
    width:100%;
    max-width:100%;
}
#cev22-interaction.cev229-match .cev229-match__column{
    min-width:0;
}
#cev22-interaction.cev229-match .cev229-match__card{
    min-height:48px;
}

/* CLASSIFY: choice chips/buttons wrap without creating horizontal scroll. */
#cev22-interaction[data-type="CLASSIFY"] [data-item-id]{
    max-width:100%;
}
#cev22-interaction[data-type="CLASSIFY"] [data-choice-value]{
    max-width:100%;
}

/* Keep content scrolling inside course area, not behind toolbar. */
@media(max-width:640px){
    html, body{
        overscroll-behavior-y:none;
    }

    #ca-form{
        min-height:0 !important;
    }

    #ca-form .ca-scroll{
        min-height:0 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch;
        padding-bottom:0 !important;
    }

    #ca-form .ca-main{
        min-height:0 !important;
        overflow:visible !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }

    #ca-form .ca-card{
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
    }

    #ca-form .ca-card__inner{
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
        padding:14px 12px 10px !important;
    }

    #ca-form .ca-question{
        font-size:18px !important;
        line-height:1.28 !important;
        margin:2px 0 12px !important;
    }

    /* Toolbar remains visible but never overlays content. */
    #ca-form .ca-toolbar{
        position:sticky !important;
        bottom:0 !important;
        z-index:40 !important;
        padding:9px 12px calc(10px + var(--ca-safe-bottom)) !important;
        background:rgba(247,248,250,.98) !important;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        border-top:1px solid #E5E8EC !important;
    }

    #ca-form .ca-toolbar__inner{
        gap:8px !important;
        flex-wrap:nowrap !important;
    }

    #ca-form .ca-btn{
        min-height:50px !important;
        height:auto !important;
        line-height:1.2 !important;
        padding:9px 12px !important;
        white-space:normal !important;
    }

    #ca-form .ca-btn--prev{
        min-width:0 !important;
        flex:0 1 34% !important;
        margin-right:0 !important;
    }

    #ca-form .ca-btn--answer,
    #ca-form .ca-btn--continue{
        min-width:0 !important;
        flex:1 1 auto !important;
        max-width:none !important;
    }

    /* Structured step scroll region. */
    #cev22-interaction{
        max-height:none !important;
        overflow:visible !important;
        padding-bottom:2px;
    }

    #cev22-interaction [data-choice-value],
    #cev22-interaction [data-sort-id],
    #cev22-interaction .cev229-match__card{
        min-height:52px !important;
        font-size:15px !important;
        line-height:1.3 !important;
    }

    #cev22-interaction [data-sort-id]{
        gap:8px !important;
    }

    #cev22-interaction [data-sort-id] [data-move]{
        min-width:44px !important;
        min-height:44px !important;
    }

    /* MATCH uses two readable columns when possible. */
    #cev22-interaction.cev229-match .cev229-match__grid{
        gap:10px !important;
    }

    #cev22-interaction.cev229-match .cev229-match__column{
        gap:8px !important;
    }

    #cev22-interaction.cev229-match .cev229-match__card{
        padding:11px 10px !important;
        font-size:14px !important;
    }

    /* Explanation remains readable and never exceeds viewport. */
    #ca-form .ca-explanation.is-visible{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto 10px !important;
    }

    #ca-form .ca-explanation__card{
        max-height:min(42dvh, 320px) !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;
        padding:14px 14px 24px !important;
    }

    #ca-form .ca-feedback.is-visible{
        width:100% !important;
        margin:0 auto 10px !important;
    }
}

/* Very narrow phones: stack MATCH columns vertically to preserve readability. */
@media(max-width:390px){
    #cev22-interaction.cev229-match .cev229-match__grid{
        grid-template-columns:1fr !important;
    }
    #cev22-interaction.cev229-match .cev229-match__column{
        width:100% !important;
    }
    #cev22-interaction.cev229-match [data-match-left][data-pair-no]::after,
    #cev22-interaction.cev229-match [data-match-right][data-pair-no]::after{
        right:8px !important;
        left:auto !important;
    }

    #ca-form .ca-toolbar__inner{
        gap:6px !important;
    }
    #ca-form .ca-btn{
        font-size:14px !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }
}

/* Landscape phones: reduce vertical chrome, keep interaction area dominant. */
@media(max-height:520px) and (orientation:landscape){
    .ca-header{
        height:46px !important;
        min-height:46px !important;
    }
    .ca-topic-bar{
        min-height:40px !important;
        padding-top:5px !important;
        padding-bottom:5px !important;
    }
    #ca-form .ca-main{
        padding-top:8px !important;
    }
    #ca-form .ca-card__inner{
        padding-top:10px !important;
        padding-bottom:8px !important;
    }
    #ca-form .ca-toolbar{
        padding-top:6px !important;
        padding-bottom:calc(6px + var(--ca-safe-bottom)) !important;
    }
    #ca-form .ca-btn{
        min-height:44px !important;
    }
    #ca-form .ca-explanation__card{
        max-height:48dvh !important;
    }
}

/* Desktop/tablet: prevent pathological long content from creating horizontal page scroll. */
@media(min-width:641px){
    #ca-form .ca-card,
    #ca-form .ca-card__inner,
    #cev22-interaction{
        overflow-x:hidden !important;
    }
    #cev22-interaction.cev229-match .cev229-match__grid{
        min-width:0;
    }
}

/* Keyboard focus remains visible after all motion/polish layers. */
#cev22-interaction button:focus-visible,
#cev22-interaction [data-choice-value]:focus-visible,
#ca-form .ca-btn:focus-visible{
    outline:3px solid rgba(255,196,0,.42) !important;
    outline-offset:2px !important;
}