/* Skillpo Preview Quiz V12 — clean premium responsive interface. */
.sp-smart-hero.has-preview-quizzes,
.sp-smart-hero.has-preview-quizzes .sp-smart-hero__slider,
.sp-smart-hero.has-preview-quizzes .sp-smart-slide {
    min-height: var(--sp-preview-hero-height, 820px) !important;
    transition: min-height .25s ease;
}

.sp-smart-hero.has-preview-quizzes .sp-smart-slide__container {
    gap: clamp(36px, 4vw, 72px);
    grid-template-columns: minmax(400px, .88fr) minmax(620px, 1.12fr);
    height: auto;
    min-height: 0 !important;
    padding-bottom: 82px;
    padding-top: 138px;
}

.sp-smart-slide__visual--quiz {
    max-width: 700px;
    width: 100%;
}

.sp-preview-quiz {
    --quiz-ink: #151a3c;
    --quiz-muted: #6f7690;
    --quiz-line: #e2e6ef;
    --quiz-purple: #6d28d9;
    --quiz-green: #0aa477;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 24px;
    box-shadow: 0 28px 70px rgba(8, 14, 51, .28);
    color: var(--quiz-ink);
    overflow: visible;
    padding: 20px;
    position: relative;
}

.sp-preview-quiz button { font-family: inherit; }
.sp-preview-quiz button:focus-visible,
.sp-preview-quiz a:focus-visible { outline: 3px solid rgba(109, 40, 217, .25); outline-offset: 2px; }

.sp-preview-quiz__mock-head {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.sp-preview-quiz__mock-head > div:first-child { min-width: 0; }
.sp-preview-quiz__mock-head > div:first-child > small { display: none; }
.sp-preview-quiz__badge {
    align-items: center;
    background: #e8f8f2;
    border-radius: 999px;
    color: #078d68;
    display: inline-flex;
    font-size: 10px;
    font-weight: 800;
    gap: 6px;
    padding: 7px 10px;
}

.sp-preview-quiz__mock-head h2 {
    color: var(--quiz-ink);
    font-size: 21px;
    line-height: 1.25;
    margin: 9px 0 0;
}

.sp-preview-quiz__mock-meta { display: flex; flex: 0 0 auto; gap: 6px; }
.sp-preview-quiz__mock-meta span {
    align-items: center;
    background: #171d41;
    border-radius: 10px;
    color: #fff;
    display: flex;
    font-size: 11px;
    font-weight: 850;
    height: 38px;
    justify-content: center;
    min-width: 46px;
    padding: 0 9px;
}
.sp-preview-quiz__mock-meta span[data-preview-timer] { background: #eeeaff; color: #6427cd; }

.sp-preview-quiz__toolbar {
    align-items: center;
    border-bottom: 1px solid var(--quiz-line);
    border-top: 1px solid var(--quiz-line);
    display: flex;
    gap: 9px;
    justify-content: space-between;
    margin-top: 13px;
    padding: 9px 0;
}

.sp-preview-quiz__review,
.sp-preview-quiz__bilingual-toggle,
.sp-preview-quiz__language-trigger {
    align-items: center;
    background: #fff;
    border: 1px solid #dce1eb;
    border-radius: 11px;
    color: #313651;
    display: flex;
    font-size: 11px;
    font-weight: 800;
    gap: 7px;
    min-height: 40px;
    padding: 7px 10px;
}

.sp-preview-quiz__review { background: #fffaf0; border-color: #ecc675; color: #956000; }
.sp-preview-quiz__review.is-active { background: #f6a817; border-color: #f6a817; color: #fff; }
.sp-preview-quiz__language-controls { align-items: center; display: flex; gap: 7px; min-width: 0; }

.sp-preview-quiz__toggle-track {
    background: #e4e7ef;
    border-radius: 999px;
    display: block;
    height: 25px;
    position: relative;
    transition: background .2s ease;
    width: 50px;
}
.sp-preview-quiz__toggle-track::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(20, 25, 60, .2);
    content: "";
    height: 19px;
    left: 3px;
    position: absolute;
    top: 3px;
    transition: transform .2s ease;
    width: 19px;
}
.sp-preview-quiz__toggle-track small { color: #6a7185; font-size: 7px; font-weight: 900; line-height: 25px; padding-left: 24px; }
.sp-preview-quiz__bilingual-toggle.is-on .sp-preview-quiz__toggle-track { background: linear-gradient(135deg, #0ca879, #6a2bd6); }
.sp-preview-quiz__bilingual-toggle.is-on .sp-preview-quiz__toggle-track::after { transform: translateX(25px); }
.sp-preview-quiz__bilingual-toggle.is-on .sp-preview-quiz__toggle-track small { color: #fff; padding-left: 6px; }

.sp-preview-quiz__language-picker { min-width: 0; position: relative; z-index: 30; }
.sp-preview-quiz__language-trigger { display: grid; grid-template-columns: auto minmax(70px, auto) auto auto; }
.sp-preview-quiz__language-trigger > i:first-child { color: var(--quiz-purple); }
.sp-preview-quiz__language-trigger > i:last-child { font-size: 9px; transition: transform .2s ease; }
.sp-preview-quiz__language-trigger[aria-expanded="true"] > i:last-child { transform: rotate(180deg); }
.sp-preview-quiz__language-trigger small { background: #f0ebff; border-radius: 6px; color: #6828ce; font-size: 7px; padding: 4px 5px; }
.sp-preview-quiz__language-menu {
    background: #fff;
    border: 1px solid #dde1eb;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(18, 22, 58, .2);
    max-height: 260px;
    min-width: 215px;
    overflow: auto;
    padding: 7px;
    position: absolute;
    right: 0;
    top: calc(100% + 7px);
}
.sp-preview-quiz__language-menu[hidden] { display: none; }
.sp-preview-quiz__language-menu button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: #252a48;
    display: grid;
    font-size: 11px;
    font-weight: 750;
    gap: 9px;
    grid-template-columns: 1fr auto 15px;
    padding: 9px;
    text-align: left;
    width: 100%;
}
.sp-preview-quiz__language-menu button:hover,
.sp-preview-quiz__language-menu button[aria-selected="true"] { background: #f0ebff; color: #6024c4; }
.sp-preview-quiz__language-menu button small { color: #798096; font-size: 8px; }
.sp-preview-quiz__language-menu button i { opacity: 0; }
.sp-preview-quiz__language-menu button[aria-selected="true"] i { opacity: 1; }

.sp-preview-quiz__progress { background: #e8ebf2; border-radius: 999px; height: 5px; margin: 9px 0 10px; overflow: hidden; }
.sp-preview-quiz__progress span { background: linear-gradient(90deg, #0ba77a, #7230dd); border-radius: inherit; display: block; height: 100%; transition: width .25s ease; }
.sp-preview-quiz__tags { display: none; }

.sp-preview-quiz__stems {
    background: #fff;
    border: 1px solid #dde2ec;
    border-radius: 16px;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}
.sp-preview-quiz__stems.is-single { grid-template-columns: 1fr; }
.sp-preview-quiz__stem {
    background: #fff;
    border: 0;
    min-height: 104px;
    padding: 14px 50px 13px 15px;
    position: relative;
}
.sp-preview-quiz__stem.is-translation { background: #faf8ff; border-left: 1px solid #dfd5f8; }
.sp-preview-quiz__stem-label { color: #68708a; font-size: 8px; font-weight: 900; letter-spacing: .08em; margin-bottom: 8px; text-transform: uppercase; }
.sp-preview-quiz__stem.is-translation .sp-preview-quiz__stem-label { color: #6927cb; }
.sp-preview-quiz__stem-text { color: var(--quiz-ink); font-size: 15px; font-weight: 800; line-height: 1.35; }
.sp-preview-quiz__stem.is-translation .sp-preview-quiz__stem-text { color: #44208e; }
.sp-preview-quiz__script-pronunciation { color: #6a2bc9; display: block; font-size: 11px; font-weight: 650; line-height: 1.3; margin-top: 4px; }
.sp-preview-quiz__audio {
    align-items: center;
    background: #e5f8f1;
    border: 0;
    border-radius: 50%;
    color: #078f69;
    display: flex;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
}
.sp-preview-quiz__missing { color: #956000; font-size: 11px; margin: 0; }

.sp-preview-quiz__answer-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin: 10px 1px 7px; }
.sp-preview-quiz__answer-heading strong { color: var(--quiz-ink); font-size: 14px; }
.sp-preview-quiz__answer-heading span { color: var(--quiz-muted); font-size: 9px; }
.sp-preview-quiz__options { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-preview-option {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe3ed;
    border-radius: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 74px;
    overflow: hidden;
    padding: 8px 9px;
    position: relative;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sp-preview-option:hover { border-color: #a77bed; box-shadow: 0 8px 22px rgba(90, 43, 177, .1); transform: translateY(-1px); }
.sp-preview-option.is-selected { background: #f3fff9; border-color: #12ad79; box-shadow: 0 0 0 2px rgba(18, 173, 121, .08); }
.sp-preview-option__choice {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: grid;
    gap: 8px;
    grid-template-columns: 17px 34px minmax(0, 1fr);
    min-width: 0;
    padding: 0;
    text-align: left;
}
.sp-preview-option__radio { background: #fff; border: 2px solid #a1a9ba; border-radius: 50%; height: 17px; width: 17px; }
.sp-preview-option.is-selected .sp-preview-option__radio { border: 5px solid #0ca879; box-shadow: 0 0 0 3px #dcf7ed; }
.sp-preview-option__letter { align-items: center; background: #eee8ff; border-radius: 9px; color: #682dce; display: flex; font-size: 12px; font-weight: 900; height: 34px; justify-content: center; width: 34px; }
.sp-preview-option.is-selected .sp-preview-option__letter { background: #0ca879; color: #fff; }
.sp-preview-option__text { min-width: 0; }
.sp-preview-option__text strong { color: var(--quiz-ink); display: block; font-size: 12px; font-weight: 850; line-height: 1.25; overflow-wrap: anywhere; }
.sp-preview-option__script { color: #682cce; display: inline; font-size: 10px; font-weight: 700; }
.sp-preview-option__meaning { border-top: 1px solid #e4e7ef; color: #555d76; display: block; font-size: 10px; font-weight: 650; line-height: 1.25; margin-top: 3px; overflow-wrap: anywhere; padding-top: 3px; }
.sp-preview-option__voices { align-items: center; display: flex; gap: 4px; justify-content: flex-end; margin-left: 7px; }
.sp-preview-option__voice { align-items: center; display: flex; flex-direction: column; gap: 2px; }
.sp-preview-option__voice button { align-items: center; background: #e7edff; border: 0; border-radius: 50%; color: #225fe1; display: flex; height: 27px; justify-content: center; width: 27px; }
.sp-preview-option__voice.is-meaning button { background: #def7ed; color: #078d68; }
.sp-preview-option__voice small { color: #344183; font-size: 6px; font-weight: 900; }
.sp-preview-option__voice.is-meaning small { color: #08785a; }
.sp-preview-option__selected { display: none; }
.sp-preview-quiz.is-single-language .sp-preview-option__meaning,
.sp-preview-quiz.is-single-language .sp-preview-option__script,
.sp-preview-quiz.is-single-language .sp-preview-option__voice.is-meaning { display: none; }

.sp-preview-quiz__validation { color: #d13c4c; font-size: 10px; margin: 6px 0 0; min-height: 0; }
.sp-preview-quiz__footer-row { align-items: end; border-top: 1px solid var(--quiz-line); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; margin-top: 9px; padding-top: 9px; }
.sp-preview-quiz__palette-wrap > strong { color: var(--quiz-ink); display: block; font-size: 9px; margin-bottom: 5px; }
.sp-preview-quiz__palette { display: grid; gap: 5px; grid-template-columns: repeat(10, minmax(25px, 1fr)); }
.sp-preview-quiz__palette button { background: #e2e6ed; border: 0; border-radius: 7px; color: #4e566d; font-size: 8px; height: 27px; }
.sp-preview-quiz__palette button.is-current { background: #2c6cf4; box-shadow: 0 0 0 3px #d4e0ff; color: #fff; }
.sp-preview-quiz__palette button.is-answered { background: #20aa70; color: #fff; }
.sp-preview-quiz__palette button.is-review { background: #f4a30c; color: #fff; }
.sp-preview-quiz__legend { display: flex; flex-wrap: wrap; gap: 5px 9px; margin-top: 5px; }
.sp-preview-quiz__legend span { align-items: center; color: #70778c; display: flex; font-size: 6px; gap: 3px; }
.sp-preview-quiz__legend i { background: #dfe3ea; border-radius: 2px; height: 6px; width: 6px; }
.sp-preview-quiz__legend i.is-answered { background: #20aa70; }
.sp-preview-quiz__legend i.is-current { background: #2c6cf4; }
.sp-preview-quiz__legend i.is-review { background: #f4a30c; }
.sp-preview-quiz__actions { display: flex; gap: 7px; justify-content: flex-end; }
.sp-preview-quiz__back,
.sp-preview-quiz__next,
.sp-preview-quiz__cta,
.sp-preview-quiz__retry { align-items: center; border-radius: 10px; display: inline-flex; font-size: 10px; font-weight: 800; gap: 6px; justify-content: center; min-height: 38px; padding: 8px 12px; }
.sp-preview-quiz__back { background: #fff; border: 1px solid #e0e4ec; color: #8790a3; }
.sp-preview-quiz__next,
.sp-preview-quiz__cta { background: linear-gradient(120deg, #0ca879, #6c2bd8); border: 0; color: #fff; }
.sp-preview-quiz__back:disabled { opacity: .45; }

.sp-preview-quiz__result { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 470px; padding: 25px; text-align: center; }
.sp-preview-quiz__result[hidden] { display: none; }
.sp-preview-quiz__score-ring { align-items: center; background: conic-gradient(#12a97a var(--score), #e8eaf1 0); border-radius: 50%; display: flex; flex-direction: column; height: 130px; justify-content: center; margin-bottom: 18px; position: relative; width: 130px; }
.sp-preview-quiz__score-ring::before { background: #fff; border-radius: 50%; content: ""; inset: 10px; position: absolute; }
.sp-preview-quiz__score-ring strong,
.sp-preview-quiz__score-ring span { position: relative; z-index: 1; }
.sp-preview-quiz__score-ring strong { color: var(--quiz-ink); font-size: 25px; }
.sp-preview-quiz__score-ring span { color: var(--quiz-muted); font-size: 9px; }
.sp-preview-quiz__result > small { color: #0a9b70; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sp-preview-quiz__result h2 { color: var(--quiz-ink); font-size: 23px; margin: 8px 0; }
.sp-preview-quiz__result > p { color: var(--quiz-muted); font-size: 12px; max-width: 430px; }
.sp-preview-quiz__explanations { max-height: 140px; overflow: auto; text-align: left; width: 100%; }
.sp-preview-quiz__explanations article { background: #f7f8fc; border-radius: 10px; margin-top: 7px; padding: 9px; }
.sp-preview-quiz__explanations article strong,
.sp-preview-quiz__explanations article span { display: block; font-size: 9px; }
.sp-preview-quiz__explanations article p { font-size: 10px; margin: 4px 0 0; }
.sp-preview-quiz__retry { background: #fff; border: 1px solid #dddfea; color: #5d2bc1; margin-top: 7px; }
.sp-preview-quiz.is-loading { opacity: .65; pointer-events: none; }

@media (min-width: 768px) and (max-width: 1199.98px) {
    .sp-smart-hero.has-preview-quizzes .sp-smart-slide__container {
        gap: 24px;
        grid-template-columns: minmax(270px, .72fr) minmax(500px, 1.28fr);
        padding-bottom: 72px;
        padding-top: 118px;
    }
    .sp-smart-slide__visual--quiz { max-width: 620px; }
    .sp-preview-quiz { border-radius: 20px; padding: 16px; }
    .sp-preview-quiz__toolbar { align-items: stretch; }
    .sp-preview-quiz__review { padding-inline: 7px; }
    .sp-preview-quiz__language-controls { flex: 1; justify-content: flex-end; }
    .sp-preview-quiz__language-trigger { grid-template-columns: auto minmax(50px, 1fr) auto auto; }
    .sp-preview-quiz__stem { min-height: 98px; }
    .sp-preview-option { min-height: 70px; padding-inline: 7px; }
    .sp-preview-option__choice { gap: 6px; grid-template-columns: 16px 30px minmax(0, 1fr); }
    .sp-preview-option__letter { height: 30px; width: 30px; }
    .sp-preview-option__voices { gap: 2px; margin-left: 4px; }
    .sp-preview-option__voice button { height: 24px; width: 24px; }
    .sp-preview-quiz__footer-row { grid-template-columns: 1fr; }
    .sp-preview-quiz__actions { grid-row: 1; }
    .sp-preview-quiz__palette { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 767.98px) {
    .sp-smart-hero.has-preview-quizzes,
    .sp-smart-hero.has-preview-quizzes .sp-smart-hero__slider,
    .sp-smart-hero.has-preview-quizzes .sp-smart-slide { min-height: var(--sp-preview-hero-height, 1080px) !important; }
    .sp-smart-hero.has-preview-quizzes .sp-smart-slide__container {
        align-content: initial;
        display: flex;
        gap: 18px;
        justify-content: flex-start;
        padding-bottom: 58px;
        padding-top: 96px;
    }
    .sp-smart-slide__visual--quiz { max-width: none; }
    .sp-preview-quiz { border-radius: 18px; padding: 12px; }
    .sp-preview-quiz__badge { font-size: 9px; padding: 6px 8px; }
    .sp-preview-quiz__mock-head h2 { font-size: 17px; margin-top: 7px; }
    .sp-preview-quiz__mock-meta { gap: 4px; }
    .sp-preview-quiz__mock-meta span { font-size: 9px; height: 33px; min-width: 39px; padding-inline: 6px; }
    .sp-preview-quiz__toolbar { align-items: stretch; display: grid; grid-template-columns: 92px minmax(0, 1fr); margin-top: 9px; padding: 7px 0; }
    .sp-preview-quiz__review { font-size: 0; justify-content: center; min-height: 38px; padding: 6px; }
    .sp-preview-quiz__review i { font-size: 15px; }
    .sp-preview-quiz__language-controls { gap: 5px; }
    .sp-preview-quiz__bilingual-toggle { font-size: 8px; gap: 4px; padding-inline: 6px; }
    .sp-preview-quiz__language-picker { flex: 1; }
    .sp-preview-quiz__language-trigger { font-size: 9px; grid-template-columns: auto minmax(38px, 1fr) auto auto; padding-inline: 7px; width: 100%; }
    .sp-preview-quiz__language-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sp-preview-quiz__language-menu { max-width: 82vw; width: 230px; }
    .sp-preview-quiz__progress { margin: 7px 0 8px; }
    .sp-preview-quiz__stems { grid-template-columns: 1fr; }
    .sp-preview-quiz__stem { min-height: 76px; padding: 11px 43px 10px 12px; }
    .sp-preview-quiz__stem.is-translation { border-left: 0; border-top: 1px solid #dfd5f8; }
    .sp-preview-quiz__stem-label { margin-bottom: 5px; }
    .sp-preview-quiz__stem-text { font-size: 14px; }
    .sp-preview-quiz__script-pronunciation { font-size: 10px; }
    .sp-preview-quiz__audio { height: 29px; right: 8px; width: 29px; }
    .sp-preview-quiz__answer-heading { display: block; margin: 8px 1px 6px; }
    .sp-preview-quiz__answer-heading strong { font-size: 14px; }
    .sp-preview-quiz__answer-heading span { display: none; }
    .sp-preview-quiz__options { gap: 7px; grid-template-columns: 1fr; }
    .sp-preview-option { min-height: 64px; padding: 7px 8px; }
    .sp-preview-option__choice { grid-template-columns: 17px 32px minmax(0, 1fr); }
    .sp-preview-option__letter { height: 32px; width: 32px; }
    .sp-preview-option__voices { flex-direction: row; margin-left: 5px; }
    .sp-preview-option__voice button { height: 25px; width: 25px; }
    .sp-preview-quiz__validation { margin-top: 4px; }
    .sp-preview-quiz__footer-row { gap: 8px; grid-template-columns: 1fr; margin-top: 7px; padding-top: 7px; }
    .sp-preview-quiz__actions { grid-row: 1; }
    .sp-preview-quiz__back,
    .sp-preview-quiz__next { flex: 1; min-height: 39px; }
    .sp-preview-quiz__palette { grid-template-columns: repeat(5, 1fr); }
    .sp-preview-quiz__legend { display: none; }
    .sp-preview-quiz__result { min-height: 430px; padding: 18px; }
}

@media (max-width: 390px) {
    .sp-preview-quiz { padding: 10px; }
    .sp-preview-quiz__toolbar { grid-template-columns: 42px minmax(0, 1fr); }
    .sp-preview-quiz__review { border-radius: 10px; }
    .sp-preview-quiz__bilingual-toggle > span:first-child { display: none; }
    .sp-preview-quiz__language-trigger { gap: 4px; }
    .sp-preview-option__text strong { font-size: 11px; }
    .sp-preview-option__script,
    .sp-preview-option__meaning { font-size: 9px; }
}