:root {
    --navy: #103d73;
    --blue: #176fa4;

    --teal: #158f82;
    --teal-dark: #0d746a;
    --teal-soft: #eaf8f5;

    --gold: #dca824;
    --gold-soft: #fff7dd;

    --red: #d8494e;
    --red-soft: #fff0f1;

    --green: #23845c;
    --green-soft: #eaf7f0;

    --text: #385a73;
    --muted: #758b9e;

    --line: #cadde9;
    --soft: #f6fafc;

    --white: #ffffff;

    --shadow:
        0 16px 38px
        rgba(25, 61, 95, .10);
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    color: var(--text);

    background:
        linear-gradient(
            180deg,
            #edf8fd,
            #f7fbfd
        );
}


button,
a {
    font: inherit;
}


button {
    cursor: pointer;
}


.hidden {
    display: none !important;
}


/* =========================================================
   SHELL
========================================================= */

.rescue-shell {
    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;

    padding:
        10px clamp(16px, 2vw, 32px) 12px;

    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.rescue-header {
    flex: 0 0 auto;

    width: 100%;
    max-width: 1500px;

    min-height: 52px;

    margin:
        0 auto 8px;

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 14px;
}


.brand {
    display: flex;

    align-items: center;

    gap: 11px;
}


.brand-icon {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color: white;

    background:
        linear-gradient(
            145deg,
            var(--teal),
            var(--blue)
        );

    font-size: 21px;
    font-weight: 900;

    box-shadow:
        0 7px 18px
        rgba(25, 90, 121, .17);
}


.brand h1 {
    margin: 0;

    color: var(--navy);

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        clamp(21px, 1.9vw, 29px);

    line-height: 1.05;
}


.brand p {
    margin: 2px 0 0;

    color: var(--muted);

    font-size: 11px;
}


.header-actions {
    display: flex;

    align-items: center;

    gap: 9px;
}


.back-btn {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 39px;

    padding:
        5px 11px;

    border:
        1px solid #bfd6e5;

    border-radius: 11px;

    color: var(--navy);

    background: white;

    text-decoration: none;
}


.back-arrow {
    color: var(--blue);

    font-size: 17px;
}


.back-btn strong,
.back-btn small,
.activity-badge strong,
.activity-badge span {
    display: block;
}


.back-btn strong,
.activity-badge strong {
    font-size: 9px;
}


.back-btn small,
.activity-badge span {
    margin-top: 2px;

    color: var(--muted);

    font-size: 7px;
}


.activity-badge {
    min-width: 105px;

    padding:
        6px 10px;

    border:
        1px solid #c7dce8;

    border-radius: 11px;

    background: white;

    text-align: center;
}


/* =========================================================
   SCREEN
========================================================= */

.screen {
    display: none;

    flex:
        1 1 auto;

    width: 100%;
    max-width: 1500px;

    min-height: 0;

    margin: auto;

    overflow: hidden;
}


.screen.active {
    display: block;
}


/* =========================================================
   INTRO
========================================================= */

.intro-grid {
    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        minmax(430px, .88fr)
        minmax(520px, 1.12fr);

    gap: 17px;
}


.intro-card,
.intro-visual {
    height: 100%;

    border:
        1px solid var(--line);

    border-radius: 23px;

    background: white;

    box-shadow: var(--shadow);
}


.intro-card {
    padding:
        clamp(22px, 2.7vw, 38px);
}


.eyebrow {
    display: inline-block;

    margin-bottom: 7px;

    color: var(--teal);

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 1px;
}


.intro-card h2,
.final-card h2 {
    margin:
        0 0 3px;

    color: var(--navy);

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        clamp(28px, 3vw, 42px);

    line-height: 1.04;
}


.intro-en,
.final-en {
    margin:
        0 0 16px;

    color: var(--muted);

    font-size: 12px;
}


.intro-main {
    margin:
        8px 0;

    font-size: 14px;
    line-height: 1.48;
}


.intro-secondary {
    margin:
        7px 0;

    color: #647d91;

    font-size: 11px;

    line-height: 1.4;
}


.mission-preview {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

    margin:
        18px 0;
}


.mission-preview div {
    padding:
        10px 7px;

    border:
        1px solid #d2e2ea;

    border-radius: 12px;

    background: #f8fbfc;

    text-align: center;
}


.mission-preview strong,
.mission-preview span,
.mission-preview small {
    display: block;
}


.mission-preview strong {
    color: var(--teal);

    font-size: 15px;
}


.mission-preview span {
    margin-top: 2px;

    color: var(--navy);

    font-size: 9px;
    font-weight: 700;
}


.mission-preview small {
    margin-top: 1px;

    color: var(--muted);

    font-size: 7px;
}


/* =========================================================
   INTRO VISUAL
========================================================= */

.intro-visual {
    position: relative;

    display: grid;

    place-items: center;

    overflow: hidden;

    padding: 34px;

    background:
        linear-gradient(
            145deg,
            #eaf8f7,
            #eef6fb
        );
}


.sheet-window {
    position: relative;

    width: min(92%, 700px);

    border:
        1px solid #bcd5df;

    border-radius: 17px;

    overflow: hidden;

    background: white;

    box-shadow:
        0 17px 35px
        rgba(35, 77, 101, .13);
}


.sheet-toolbar {
    height: 34px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 0 11px;

    background: #edf4f6;
}


.sheet-toolbar span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #9fb4bf;
}


.sheet-grid {
    padding: 14px;
}


.sheet-row {
    display: grid;

    grid-template-columns:
        1.2fr .65fr 1fr 1fr;
}


.sheet-row > * {
    min-width: 0;

    padding:
        10px;

    border:
        1px solid #d3e0e5;

    font-size: 11px;
}


.header-row > * {
    color: var(--navy);

    background: #eef6f8;
}


.problem-cell {
    color: #a0363a;

    background: var(--red-soft);
}


.good-cell {
    color: #176644;

    background: var(--green-soft);
}


.duplicate-cell {
    color: #8c6812;

    background: var(--gold-soft);
}


.rescue-stamp {
    position: absolute;

    right: 20px;
    bottom: 19px;

    padding:
        7px 12px;

    border:
        2px solid var(--red);

    border-radius: 8px;

    color: var(--red);

    background:
        rgba(255,255,255,.92);

    font-size: 10px;
    font-weight: 900;

    transform:
        rotate(-4deg);
}


.visual-caption {
    position: absolute;

    left: 50%;
    bottom: 22px;

    transform:
        translateX(-50%);

    text-align: center;
}


.visual-caption strong,
.visual-caption span {
    display: block;
}


.visual-caption strong {
    color: var(--navy);

    font-size: 12px;
}


.visual-caption span {
    margin-top: 2px;

    color: var(--muted);

    font-size: 9px;
}


/* =========================================================
   BUTTONS
========================================================= */

.primary-btn {
    min-width: 190px;

    padding:
        9px 17px;

    border: 0;

    border-radius: 12px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            #12517d
        );

    box-shadow:
        0 7px 16px
        rgba(21, 84, 126, .16);
}


.primary-btn strong,
.primary-btn span,
.secondary-btn strong,
.secondary-btn span {
    display: block;
}


.primary-btn strong {
    font-size: 11px;
}


.primary-btn span {
    margin-top: 2px;

    font-size: 8px;

    opacity: .86;
}


.primary-btn.compact {
    min-width: 150px;
}


.secondary-btn {
    min-width: 105px;

    padding:
        7px 12px;

    border:
        1px solid #c7dbe6;

    border-radius: 11px;

    color: var(--navy);

    background: white;
}


.secondary-btn strong {
    font-size: 10px;
}


.secondary-btn span {
    margin-top: 1px;

    color: var(--muted);

    font-size: 7px;
}


/* =========================================================
   GAME
========================================================= */

.game-layout {
    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        minmax(260px, .46fr)
        minmax(600px, 1.54fr);

    gap: 14px;
}


.progress-panel,
.challenge-panel {
    height: 100%;

    min-height: 0;

    border:
        1px solid var(--line);

    border-radius: 20px;

    background: white;

    box-shadow:
        0 11px 28px
        rgba(25, 61, 95, .08);
}


.progress-panel {
    padding: 14px;

    display: flex;
    flex-direction: column;
}


.mission-heading span,
.mission-heading small,
.mission-heading strong,
.mission-heading em {
    display: block;
}


.mission-heading span {
    color: var(--muted);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .7px;
}


.mission-heading small {
    color: #9aabba;

    font-size: 7px;
}


.mission-heading strong {
    margin-top: 5px;

    color: var(--navy);

    font-size: 16px;
}


.mission-heading em {
    margin-top: 1px;

    color: var(--muted);

    font-size: 9px;

    font-style: normal;
}


/* =========================================================
   MISSION PATH
========================================================= */

.mission-path {
    flex: 1;

    min-height: 0;

    margin:
        12px 0;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.mission-node {
    position: relative;

    display: grid;

    grid-template-columns:
        31px 1fr;

    gap: 8px;

    align-items: center;

    padding:
        7px 8px;

    border:
        1px solid #d4e2e9;

    border-radius: 11px;

    background: #f9fbfc;
}


.mission-node::after {
    content: "";

    position: absolute;

    left: 22px;
    top: 100%;

    width: 2px;
    height: 8px;

    background: #d4e2e9;
}


.mission-node:last-child::after {
    display: none;
}


.mission-number {
    width: 28px;
    height: 28px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: var(--muted);

    background: white;

    border:
        2px solid #c8d9e2;

    font-size: 9px;
    font-weight: 800;
}


.mission-copy strong,
.mission-copy span {
    display: block;
}


.mission-copy strong {
    color: var(--navy);

    font-size: 9px;
}


.mission-copy span {
    color: var(--muted);

    font-size: 7px;
}


.mission-node.active {
    border-color: #8dcfc5;

    background: var(--teal-soft);
}


.mission-node.active .mission-number {
    color: white;

    border-color: var(--teal);

    background: var(--teal);
}


.mission-node.completed {
    border-color: #9ed1b5;

    background: var(--green-soft);
}


.mission-node.completed .mission-number {
    color: white;

    border-color: var(--green);

    background: var(--green);
}


/* =========================================================
   STATS
========================================================= */

.lab-stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 6px;
}


.lab-stats div {
    padding: 7px 5px;

    border:
        1px solid #d6e3ea;

    border-radius: 10px;

    text-align: center;
}


.lab-stats span,
.lab-stats small,
.lab-stats strong {
    display: block;
}


.lab-stats span {
    color: var(--navy);

    font-size: 7px;
}


.lab-stats small {
    color: var(--muted);

    font-size: 6px;
}


.lab-stats strong {
    margin-top: 3px;

    color: var(--teal-dark);

    font-size: 14px;
}


.quality-meter {
    margin-top: 7px;

    padding:
        8px 9px;

    border:
        1px solid #d5e3e9;

    border-radius: 10px;

    background: #f8fbfc;
}


.quality-title {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    gap: 5px;

    align-items: baseline;
}


.quality-title span {
    color: var(--navy);

    font-size: 8px;
    font-weight: 700;
}


.quality-title small {
    color: var(--muted);

    font-size: 6px;
}


.quality-title strong {
    color: var(--teal);

    font-size: 9px;
}


.quality-track {
    height: 5px;

    margin-top: 6px;

    overflow: hidden;

    border-radius: 10px;

    background: #dce8eb;
}


.quality-fill {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            var(--teal)
        );

    transition:
        width .45s ease;
}


/* =========================================================
   PRACTICE
========================================================= */

.practice-btn {
    margin-top: 7px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        7px 9px;

    border:
        1px solid #bfe0d9;

    border-radius: 10px;

    color: var(--teal-dark);

    background: var(--teal-soft);

    text-decoration: none;
}


.practice-icon {
    width: 23px;
    height: 23px;

    display: grid;

    place-items: center;

    flex: 0 0 23px;

    border-radius: 6px;

    color: white;

    background: var(--teal);

    font-size: 14px;
}


.practice-btn strong,
.practice-btn small {
    display: block;
}


.practice-btn strong {
    font-size: 8px;
}


.practice-btn small {
    margin-top: 1px;

    color: #668c85;

    font-size: 6px;
}


/* =========================================================
   CHALLENGE
========================================================= */

.challenge-panel {
    padding: 13px 15px;

    display: flex;
    flex-direction: column;
}


.challenge-meta {
    flex: 0 0 auto;

    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 7px;
}


.level-badge,
.skill-badge {
    display: inline-block;

    padding:
        4px 8px;

    border-radius: 20px;

    font-size: 8px;
    font-weight: 800;
}


.level-badge {
    color: #8a6514;

    background: var(--gold-soft);
}


.skill-badge {
    color: var(--teal-dark);

    background: var(--teal-soft);
}


.challenge-counter {
    display: flex;

    align-items: baseline;

    gap: 4px;
}


.challenge-counter span {
    color: var(--navy);

    font-size: 8px;
}


.challenge-counter small {
    color: var(--muted);

    font-size: 7px;
}


.challenge-counter strong {
    color: var(--navy);

    font-size: 11px;
}


.challenge-card {
    flex: 1;

    min-height: 0;

    padding:
        17px 20px;

    overflow: hidden;

    border:
        1px solid #ccdee8;

    border-radius: 17px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfdfe
        );
}


.scenario-ky {
    color: var(--teal-dark);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.25;
}


.scenario-en {
    margin-top: 2px;

    color: var(--muted);

    font-size: 9.5px;

    line-height: 1.25;
}


.challenge-card h2 {
    margin:
        10px 0 3px;

    color: var(--navy);

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        clamp(19px, 1.8vw, 26px);

    line-height: 1.18;
}


.question-en {
    margin:
        0 0 13px;

    color: var(--muted);

    font-size: 10.5px;

    line-height: 1.25;
}


/* =========================================================
   TABLE
========================================================= */

.table-wrap {
    max-height: 185px;

    overflow: auto;

    margin:
        10px 0;

    border:
        1px solid #d2e0e7;

    border-radius: 10px;
}


.challenge-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 10px;
}


.challenge-table th,
.challenge-table td {
    padding:
        6px 8px;

    border:
        1px solid #d8e3e8;

    text-align: left;
}


.challenge-table th {
    position: sticky;

    top: 0;

    color: var(--navy);

    background: #edf5f7;
}


/* =========================================================
   ANSWERS
========================================================= */

.answers {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;

    margin-top: 11px;
}


.answer-btn {
    padding:
        9px 11px;

    border:
        1px solid #c8dce7;

    border-radius: 10px;

    color: var(--text);

    background: white;

    text-align: left;

    font-size: 11px;

    transition:
        transform .12s ease,
        border-color .12s ease,
        background .12s ease;
}


.answer-btn:hover {
    transform:
        translateY(-1px);

    border-color: var(--blue);
}


.answer-btn.selected {
    border-color: var(--blue);

    color: var(--navy);

    background: #edf6fc;

    font-weight: 700;
}


.answer-btn.correct {
    border-color: #83c5a3;

    color: #176044;

    background: var(--green-soft);
}


.answer-btn.wrong {
    border-color: #e3a0a4;

    color: #94363a;

    background: var(--red-soft);
}


/* =========================================================
   FEEDBACK
========================================================= */

.feedback {
    min-height: 32px;

    margin-top: 10px;

    font-size: 10.5px;

    line-height: 1.28;
}


.feedback.success,
.feedback.error,
.feedback.info {
    padding:
        7px 10px;

    border-radius: 9px;
}


.feedback.success {
    color: #176043;

    background: var(--green-soft);
}


.feedback.error {
    color: #963a3d;

    background: var(--red-soft);
}


.feedback.info {
    color: #7c6117;

    background: var(--gold-soft);
}


.explanation {
    margin-top: 6px;

    padding:
        7px 10px;

    border:
        1px solid #d4e1e7;

    border-radius: 9px;

    color: #587287;

    background: #f8fbfc;

    font-size: 9.5px;

    line-height: 1.3;

    white-space: pre-line;
}


/* =========================================================
   ACTIONS
========================================================= */

.challenge-actions {
    flex: 0 0 auto;

    display: flex;

    justify-content: flex-end;

    gap: 7px;

    margin-top: 7px;
}


.practice-note {
    flex: 0 0 auto;

    margin-top: 6px;

    padding:
        5px 8px;

    border:
        1px solid #d3e8e3;

    border-radius: 8px;

    color: #426f67;

    background: #f1faf8;

    font-size: 7.5px;
}


.practice-note strong {
    color: var(--teal-dark);
}


.practice-note span {
    margin-left: 5px;

    color: var(--muted);
}


/* =========================================================
   FINAL
========================================================= */

.final-card {
    max-width: 760px;

    margin:
        35px auto;

    padding:
        37px;

    border:
        1px solid var(--line);

    border-radius: 24px;

    background: white;

    box-shadow: var(--shadow);

    text-align: center;
}


.final-check {
    width: 66px;
    height: 66px;

    margin:
        0 auto 14px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            145deg,
            var(--teal),
            var(--green)
        );

    font-size: 30px;
    font-weight: 900;
}


.final-card > p {
    max-width: 600px;

    margin:
        9px auto;

    line-height: 1.45;
}


.final-secondary {
    color: var(--muted);

    font-size: 11px;
}


.final-stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

    margin:
        20px 0;
}


.final-stats div {
    padding: 12px;

    border:
        1px solid #d4e2e8;

    border-radius: 12px;

    background: #f8fbfc;
}


.final-stats span,
.final-stats small,
.final-stats strong {
    display: block;
}


.final-stats span {
    color: var(--navy);

    font-size: 8px;
}


.final-stats small {
    color: var(--muted);

    font-size: 7px;
}


.final-stats strong {
    margin-top: 4px;

    color: var(--teal);

    font-size: 18px;
}


.final-actions {
    display: flex;

    justify-content: center;

    align-items: stretch;

    gap: 8px;
}


.final-practice {
    margin: 0;

    min-width: 190px;
}


/* =========================================================
   SHORT LAPTOP
========================================================= */

@media (max-height: 780px) {

    .rescue-shell {
        padding-top: 6px;
        padding-bottom: 7px;
    }

    .rescue-header {
        min-height: 45px;

        margin-bottom: 5px;
    }

    .brand-icon {
        width: 36px;
        height: 36px;

        font-size: 18px;
    }

    .brand h1 {
        font-size: 20px;
    }

    .brand p {
        display: none;
    }

    .intro-card {
        padding:
            17px 22px;
    }

    .intro-card h2 {
        font-size: 29px;
    }

    .intro-en {
        margin-bottom: 9px;
    }

    .mission-preview {
        margin:
            10px 0;

        gap: 6px;
    }

    .mission-preview div {
        padding:
            6px 5px;
    }

    .intro-visual {
        padding: 20px;
    }

    .challenge-card {
        padding:
            12px 16px;
    }

    .challenge-card h2 {
        font-size: 19px;
    }

    .answer-btn {
        padding:
            7px 9px;
    }

    .mission-node {
        padding:
            5px 6px;
    }

    .mission-number {
        width: 24px;
        height: 24px;
    }

    .table-wrap {
        max-height: 145px;
    }
}


/* =========================================================
   NARROW
========================================================= */

@media (max-width: 900px) {

    html,
    body {
        height: auto;

        overflow-y: auto;
    }

    .rescue-shell {
        height: auto;
        min-height: 100vh;

        overflow: visible;
    }

    .screen {
        overflow: visible;
    }

    .intro-grid,
    .game-layout {
        height: auto;

        grid-template-columns: 1fr;
    }

    .progress-panel,
    .challenge-panel {
        height: auto;
    }

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



/* =========================================================
   DATA_RESCUE_BILINGUAL_ANSWER_STYLE_V1
========================================================= */

.answer-btn {
    min-height: 50px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: flex-start;

    gap: 2px;

    padding:
        7px 14px;

    text-align: left;
}


.answer-ky {
    display: block;

    color: #123f72;

    font-size: 14px;
    font-weight: 650;

    line-height: 1.2;
}


.answer-en {
    display: block;

    color: #70839a;

    font-size: 11px;
    font-weight: 450;

    line-height: 1.15;
}


.answer-single {
    font-size: 14px;
}


/* Selected / correct states keep text readable */

.answer-btn.selected .answer-ky,
.answer-btn.correct .answer-ky {
    color: inherit;
}


.answer-btn.selected .answer-en,
.answer-btn.correct .answer-en {
    color: inherit;

    opacity: 0.78;
}


/* Compact layout for shorter laptop screens */

@media (max-height: 850px) {

    .answer-btn {
        min-height: 44px;

        padding:
            5px 12px;
    }

    .answer-ky {
        font-size: 13px;
    }

    .answer-en {
        font-size: 10px;
    }
}




/* DATA_RESCUE_COMPACT_GAME_V3_START */


/* ==========================================================
   DATA RESCUE LAB — COMPACT GAME REPAIR

   IMPORTANT:
   Do NOT stretch the question card.

   Right side now behaves naturally:

   META
   QUESTION
   ANSWERS
   FEEDBACK
   HINT / NEXT
   PRACTICE NOTE
========================================================== */


/* ----------------------------------------------------------
   GAME SCREEN
---------------------------------------------------------- */

#game-screen.screen.active {

    display:
        block !important;

    min-height:
        0 !important;

    overflow:
        hidden !important;
}


/* ----------------------------------------------------------
   MAIN TWO-COLUMN LAYOUT
---------------------------------------------------------- */

.game-layout {

    height:
        100% !important;

    min-height:
        0 !important;

    align-items:
        stretch !important;
}


/* ----------------------------------------------------------
   RIGHT CHALLENGE PANEL

   The key fix:
   use GRID with natural content rows rather than
   stretching challenge-card with flex:1.
---------------------------------------------------------- */

.challenge-panel {

    height:
        100% !important;

    min-height:
        0 !important;

    padding:
        12px 15px !important;

    display:
        grid !important;

    grid-template-rows:
        auto
        auto
        auto
        auto !important;

    align-content:
        start !important;

    gap:
        7px !important;

    overflow:
        hidden !important;
}


/* ----------------------------------------------------------
   META
---------------------------------------------------------- */

.challenge-meta {

    margin:
        0 !important;

    min-height:
        26px !important;
}


/* ----------------------------------------------------------
   QUESTION CARD

   CRITICAL:
   Natural content height — no full-screen stretching.
---------------------------------------------------------- */

.challenge-card {

    flex:
        none !important;

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        13px 18px !important;

    overflow:
        visible !important;
}


/* ----------------------------------------------------------
   SCENARIO
---------------------------------------------------------- */

.scenario-ky {

    font-size:
        10px !important;

    line-height:
        1.2 !important;
}


.scenario-en {

    margin-top:
        1px !important;

    font-size:
        8.5px !important;

    line-height:
        1.2 !important;
}


/* ----------------------------------------------------------
   QUESTION
---------------------------------------------------------- */

.challenge-card h2 {

    margin:
        8px 0 2px !important;

    font-size:
        clamp(
            18px,
            1.7vw,
            24px
        ) !important;

    line-height:
        1.12 !important;
}


.question-en {

    margin:
        0 0 8px !important;

    font-size:
        9.5px !important;

    line-height:
        1.2 !important;
}


/* ----------------------------------------------------------
   ANSWERS

   Two rows of two answers, compact but readable.
---------------------------------------------------------- */

.answers {

    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        ) !important;

    gap:
        7px !important;

    margin-top:
        7px !important;
}


.answer-btn {

    min-height:
        44px !important;

    padding:
        6px 11px !important;
}


/* Keep bilingual text readable */

.answer-ky {

    font-size:
        13px !important;

    line-height:
        1.15 !important;
}


.answer-en {

    font-size:
        10px !important;

    line-height:
        1.12 !important;
}


/* ----------------------------------------------------------
   TABLE QUESTIONS

   Compact internal table only when a question needs one.
---------------------------------------------------------- */

.table-wrap {

    max-height:
        135px !important;

    overflow:
        auto !important;

    margin:
        7px 0 !important;
}


/* ----------------------------------------------------------
   FEEDBACK
---------------------------------------------------------- */

.feedback {

    min-height:
        0 !important;

    margin-top:
        6px !important;
}


.feedback.success,
.feedback.error,
.feedback.info {

    padding:
        6px 9px !important;
}


/* ----------------------------------------------------------
   EXPLANATION
---------------------------------------------------------- */

.explanation {

    margin-top:
        4px !important;

    padding:
        6px 9px !important;

    font-size:
        9px !important;

    line-height:
        1.2 !important;
}


/* ----------------------------------------------------------
   ACTIONS

   Immediately underneath question card.
   No absolute positioning.
   No bottom-of-screen positioning.
---------------------------------------------------------- */

.challenge-actions {

    width:
        100% !important;

    min-height:
        39px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    gap:
        8px !important;

    position:
        static !important;

    z-index:
        auto !important;

    background:
        transparent !important;
}


/* ----------------------------------------------------------
   HINT + NEXT
---------------------------------------------------------- */

.challenge-actions
.secondary-btn,
.challenge-actions
.primary-btn {

    width:
        auto !important;

    height:
        auto !important;

    min-height:
        37px !important;

    padding:
        6px 13px !important;
}


#hint-btn {

    min-width:
        105px !important;
}


#next-btn {

    min-width:
        150px !important;
}


/* ----------------------------------------------------------
   PRACTICE NOTE

   Small line directly beneath buttons.
---------------------------------------------------------- */

.practice-note {

    margin:
        0 !important;

    padding:
        5px 8px !important;

    min-height:
        0 !important;

    font-size:
        7px !important;

    line-height:
        1.15 !important;
}


/* ----------------------------------------------------------
   LEFT PANEL

   Keep current mission path balanced.
---------------------------------------------------------- */

.progress-panel {

    height:
        100% !important;

    min-height:
        0 !important;

    padding:
        12px !important;
}


.mission-path {

    margin:
        9px 0 !important;
}


/* ----------------------------------------------------------
   NORMAL LAPTOP AT 100% ZOOM
---------------------------------------------------------- */

@media (
    min-width: 1000px
) and (
    max-height: 950px
) {

    .rescue-shell {

        padding:
            6px clamp(
                14px,
                2vw,
                30px
            )
            8px !important;
    }


    .rescue-header {

        min-height:
            44px !important;

        margin-bottom:
            5px !important;
    }


    .brand-icon {

        width:
            36px !important;

        height:
            36px !important;
    }


    .brand h1 {

        font-size:
            21px !important;
    }


    .challenge-panel {

        padding:
            9px 12px !important;

        gap:
            5px !important;
    }


    .challenge-card {

        padding:
            11px 15px !important;
    }


    .challenge-card h2 {

        margin-top:
            6px !important;

        font-size:
            19px !important;
    }


    .answer-btn {

        min-height:
            40px !important;

        padding:
            5px 10px !important;
    }


    .challenge-actions {

        min-height:
            36px !important;
    }


    .challenge-actions
    .secondary-btn,
    .challenge-actions
    .primary-btn {

        min-height:
            34px !important;

        padding:
            5px 11px !important;
    }

}


/* ----------------------------------------------------------
   SHORT LAPTOP
---------------------------------------------------------- */

@media (
    min-width: 1000px
) and (
    max-height: 800px
) {

    .challenge-card {

        padding:
            9px 13px !important;
    }


    .scenario-ky {

        font-size:
            9px !important;
    }


    .scenario-en {

        font-size:
            8px !important;
    }


    .challenge-card h2 {

        font-size:
            17px !important;
    }


    .answer-btn {

        min-height:
            36px !important;
    }


    .practice-note {

        padding:
            3px 6px !important;
    }

}


/* DATA_RESCUE_COMPACT_GAME_V3_END */



/* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_START */


/* ==========================================================
   GLOBAL E-BOOK ACTIVITY TYPOGRAPHY

   Unified Kyrgyz-friendly font rendering.

   Supports Kyrgyz Cyrillic clearly:
       Ө ө
       Ү ү
       Ң ң

   Intentionally protects programming / keyboard typography.
========================================================== */


:root {

    --ebook-kyrgyz-font:
        "Segoe UI",
        "Noto Sans",
        "DejaVu Sans",
        Arial,
        sans-serif;
}


/* ----------------------------------------------------------
   BASE TEXT

   This becomes the normal inherited font for each activity.
---------------------------------------------------------- */

html,
body {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}


/* ----------------------------------------------------------
   MAIN EDUCATIONAL TEXT

   Override old Georgia / Times / decorative serif styles
   where they were being used for Kyrgyz text.
---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,

p,

button,
input,
textarea,
select,

label,

a,

li,

th,
td,

strong,
small,
em {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}


/* ----------------------------------------------------------
   COMMON ACTIVITY QUESTION / ANSWER ELEMENTS

   These selectors cover the different activity generations
   already used throughout the e-book.
---------------------------------------------------------- */

.question,
.question-text,
.question-title,
.question-heading,
.question-kicker,

.question-ky,
.question-kyrgyz,
.ky-question,

.challenge-question,
.challenge-title,

.prompt,
.prompt-text,

.instruction,
.instructions,
.instruction-text,

.scenario,

.feedback,
.explanation,

.answer,
.answer-text,
.answer-option,

.option,
.option-btn,
.choice,
.choice-btn,

.quiz-question,
.quiz-option,

.task-title,
.task-question,

.result-title,
.result-message,

.card-title,
.card-text,

.game-title,
.game-question {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}


/* ----------------------------------------------------------
   KYRGYZ TYPOGRAPHY DETAILS

   Slightly softer weight and natural spacing improve
   Cyrillic letters such as ө, ү and ң.
---------------------------------------------------------- */

h1,
h2,
h3,
.question,
.question-text,
.question-title,
.question-ky,
.question-kyrgyz,
.ky-question,
.challenge-question,
.quiz-question,
.task-question {

    font-kerning:
        normal;

    font-variant-ligatures:
        common-ligatures;

    letter-spacing:
        .002em;

    word-spacing:
        .02em;

    text-rendering:
        optimizeLegibility;
}


/* ----------------------------------------------------------
   QUESTION HEADINGS
---------------------------------------------------------- */

.question-ky,
.question-kyrgyz,
.ky-question,
.question-text,
.challenge-question,
.quiz-question {

    font-weight:
        750;
}


/* ----------------------------------------------------------
   ANSWERS

   Keep Kyrgyz choices clean and readable rather than
   excessively heavy.
---------------------------------------------------------- */

.option-btn,
.option,
.answer-option,
.choice,
.choice-btn {

    font-weight:
        650;
}


/* ----------------------------------------------------------
   FEEDBACK / EXPLANATIONS
---------------------------------------------------------- */

.feedback,
.explanation {

    line-height:
        1.4;
}


/* ==========================================================
   DO NOT CHANGE PROGRAMMING / KEYBOARD / TECHNICAL FONTS
========================================================== */

code,
pre,
kbd,
samp,

.code,
.code-block,
.code-output,
.console,
.terminal,
.keyboard-key,
.key,
.shortcut-key {

    font-family:
        ui-monospace,
        "Cascadia Code",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace !important;

}


/* ==========================================================
   PROTECT COMMON ICON FONTS
========================================================== */

.material-icons,
.material-symbols-outlined,
.material-symbols-rounded,

.fa,
.fas,
.far,
.fal,
.fab,

[class^="fa-"],
[class*=" fa-"] {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}


/* ==========================================================
   EMOJI

   Browser will naturally fall back to the operating
   system emoji font where necessary.
========================================================== */


/* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_END */


/* FINAL_UNIFORM_ACTIVITY_FONT_V2_START */

/*
    FINAL UNIFORM E-BOOK ACTIVITY TYPOGRAPHY

    Standard typography:
        Arial, "Helvetica Neue", Helvetica, sans-serif

    Applies to normal Kyrgyz and English interface text,
    including Back to Chapter buttons.

    Font sizes, weights, colors, spacing and layouts
    are intentionally NOT changed.
*/


:root {
    --ebook-kyrgyz-font:
        Arial, "Helvetica Neue", Helvetica, sans-serif;

    --ebook-activity-font:
        Arial, "Helvetica Neue", Helvetica, sans-serif;
}


html,
body {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   TITLES AND NORMAL TEXT
---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
li,
a,
strong,
b,
em,
small,
th,
td {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   BUTTONS AND FORM ELEMENTS

   Includes every Back to Chapter button regardless of
   whether it is an <a> or <button>.
---------------------------------------------------------- */

button,
input,
textarea,
select,
option {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   COMMON BACK-TO-CHAPTER CLASSES
---------------------------------------------------------- */

.back-to-chapter,
.back-to-chapter *,
.back-btn,
.back-btn *,
.back-button,
.back-button *,
.chapter-back,
.chapter-back *,
.activity-back,
.activity-back *,
.activity2-bottom-back,
.activity2-bottom-back * {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   PRESERVE PROGRAMMING TYPOGRAPHY
---------------------------------------------------------- */

code,
pre,
kbd,
samp,
.code,
.code *,
.code-block,
.code-block *,
.code-editor,
.code-editor *,
.editor-code,
.editor-code *,
.python-code,
.python-code *,
.terminal,
.terminal *,
.console,
.console * {
    font-family:
        "Courier New",
        Courier,
        monospace !important;
}

/* FINAL_UNIFORM_ACTIVITY_FONT_V2_END */

/* DATA_RESCUE_FINAL_KYRGYZ_TYPOGRAPHY_V1_START */


/* ==========================================================
   DATA RESCUE LAB
   FINAL UNIFORM KYRGYZ TYPOGRAPHY

   Reference family:

       Arial,
       "Helvetica Neue",
       Helvetica,
       sans-serif

   Layout and component sizing are preserved.
========================================================== */


/* ==========================================================
   1. BASE ACTIVITY TYPOGRAPHY
========================================================== */

html,
body,
.rescue-shell {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    -webkit-font-smoothing:
        antialiased !important;

    -moz-osx-font-smoothing:
        grayscale !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ==========================================================
   2. ALL NORMAL INTERFACE TEXT
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6,

p,
span,
strong,
small,
b,
em,
label,
li,
a,

button,
textarea,
select,
option,

table,
th,
td {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;
}


/* ==========================================================
   3. HEADER
========================================================== */

.brand,
.brand h1,
.brand p,

.activity-badge,
.activity-badge strong,
.activity-badge span,

.header-actions {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;
}


/* ==========================================================
   4. INTRO SCREEN
========================================================== */

.intro-card,
.intro-card h2,

.eyebrow,

.intro-main,
.intro-secondary,
.intro-en,

.mission-preview,
.mission-preview strong,
.mission-preview span,
.mission-preview small,

.visual-caption,
.visual-caption strong,
.visual-caption span,

.rescue-stamp {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;
}


/* ==========================================================
   5. MAIN KYRGYZ HEADINGS

   Keep them strong but remove artificial extra-heavy
   rendering that makes Kyrgyz letters look like another font.
========================================================== */

.brand h1,
.intro-card h2,
.final-card h2,
.challenge-card h2 {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-style:
        normal !important;

    font-weight:
        700 !important;

    font-kerning:
        normal !important;

    font-variant-ligatures:
        common-ligatures !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   6. LEFT MISSION / PROGRESS PANEL
========================================================== */

.progress-panel,

.mission-heading,
.mission-heading span,
.mission-heading small,
.mission-heading strong,
.mission-heading em,

.mission-node,
.mission-number,

.mission-copy,
.mission-copy strong,
.mission-copy span,

.lab-stats,
.lab-stats span,
.lab-stats small,
.lab-stats strong,

.quality-title,
.quality-title span,
.quality-title small,
.quality-title strong,

.practice-btn,
.practice-btn strong,
.practice-btn small {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;
}


/* ==========================================================
   7. CHALLENGE META / BADGES
========================================================== */

.challenge-meta,

.level-badge,
.skill-badge,

.challenge-counter,
.challenge-counter span,
.challenge-counter small,
.challenge-counter strong {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;
}


.level-badge,
.skill-badge {

    font-weight:
        700 !important;

    font-style:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   8. KYRGYZ SCENARIO
========================================================== */

.scenario-ky {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-weight:
        700 !important;

    font-style:
        normal !important;

    font-kerning:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   9. ENGLISH SCENARIO / QUESTION
========================================================== */

.scenario-en,
.question-en {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-style:
        normal !important;

    font-weight:
        400 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;
}


/* ==========================================================
   10. MAIN KYRGYZ QUESTION
========================================================== */

.challenge-card h2 {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-weight:
        700 !important;

    font-style:
        normal !important;

    font-kerning:
        normal !important;

    font-variant-ligatures:
        common-ligatures !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   11. KYRGYZ ANSWERS
========================================================== */

.answer-btn,
.answer-ky,
.answer-single {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-style:
        normal !important;

    font-kerning:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


.answer-ky,
.answer-single {

    font-weight:
        650 !important;
}


/* English answer stays lighter */

.answer-en {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-weight:
        400 !important;

    font-style:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;
}


/* ==========================================================
   12. TABLE TEXT
========================================================== */

.challenge-table,
.challenge-table th,
.challenge-table td,

.sheet-grid,
.sheet-row,
.sheet-row > * {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;
}


/* ==========================================================
   13. FEEDBACK / EXPLANATION
========================================================== */

.feedback,
.explanation,
.practice-note,
.practice-note strong,
.practice-note span {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-style:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ==========================================================
   14. NORMAL ACTION BUTTONS
========================================================== */

.primary-btn,
.primary-btn *,

.secondary-btn,
.secondary-btn *,

.practice-btn,
.practice-btn *,

.challenge-actions button,
.challenge-actions button * {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;
}


/* ==========================================================
   15. FINAL SCREEN
========================================================== */

.final-card,
.final-card h2,
.final-card p,

.final-en,
.final-secondary,

.final-stats,
.final-stats span,
.final-stats small,
.final-stats strong,

.final-actions,
.final-actions * {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;
}


/* ==========================================================
   16. BACK TO CHAPTER

   Typography based directly on your requested
   chapter-back-text style.
========================================================== */

.back-btn {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-style:
        normal !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


/* ----------------------------------------------------------
   ARROW
---------------------------------------------------------- */

.back-btn .back-arrow,
.back-arrow {

    display:
        inline !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #3851d1 !important;

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    font-style:
        normal !important;

    line-height:
        1 !important;

    letter-spacing:
        0 !important;

    font-synthesis:
        none !important;
}


/* ----------------------------------------------------------
   BACK BUTTON KYRGYZ + ENGLISH COPY

   Existing HTML can stay as strong + small.
   We visually normalize both pieces.
---------------------------------------------------------- */

.back-btn strong,
.back-btn small {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;

    font-style:
        normal !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


/* Remove the old tiny English appearance */

.back-btn small {

    margin-top:
        0 !important;

    color:
        #063c78 !important;

    opacity:
        1 !important;
}


/* ==========================================================
   17. IF BACK BUTTON CONTAINS A .chapter-back-text CLASS
   USE YOUR EXACT REQUESTED STYLE
========================================================== */

.chapter-back-text {

    display:
        inline !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #063c78 !important;

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

    white-space:
        nowrap !important;

    font-style:
        normal !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   18. PROTECT TECHNICAL / CODE TYPOGRAPHY

   Spreadsheet formulas / code should remain monospace.
========================================================== */

code,
pre,
kbd,
samp,

.code,
.code *,
.code-block,
.code-block *,
.code-editor,
.code-editor *,
.editor-code,
.editor-code *,
.python-code,
.python-code *,
.terminal,
.terminal *,
.console,
.console * {

    font-family:
        "Courier New",
        Courier,
        monospace !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    font-synthesis:
        auto !important;
}


/* DATA_RESCUE_FINAL_KYRGYZ_TYPOGRAPHY_V1_END */

/* DATA_RESCUE_JENGISH_BACK_BUTTON_V2_START */


/* ==========================================================
   DATA RESCUE LAB
   BACK TO CHAPTER

   Match the Jengish Chokusu button:
   - warm orange
   - dark-blue text
   - blue arrow
   - one horizontal line
   - wider compact pill
========================================================== */


.back-btn {

    display:
        inline-flex !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        max-content !important;

    min-height:
        0 !important;

    height:
        auto !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex-direction:
        row !important;

    gap:
        6px !important;

    margin:
        0 !important;

    padding:
        10px 20px !important;

    border:
        0 !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            135deg,
            #f6ba63 0%,
            #eea64d 100%
        ) !important;

    color:
        #063c78 !important;

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        13px !important;

    font-style:
        normal !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;

    cursor:
        pointer !important;

    box-shadow:
        0 5px 12px
        rgba(126, 82, 22, .16) !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease !important;
}


/* ==========================================================
   ARROW
========================================================== */

.back-btn .back-arrow,
.back-arrow {

    display:
        inline !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #3851d1 !important;

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    font-style:
        normal !important;

    line-height:
        1 !important;

    flex:
        0 0 auto !important;
}


/* ==========================================================
   EXISTING BACK-COPY CONTAINER

   Data Rescue currently has strong + small.
   Make both appear on ONE line.
========================================================== */

.back-btn .back-copy {

    display:
        inline-flex !important;

    flex-direction:
        row !important;

    align-items:
        center !important;

    gap:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    white-space:
        nowrap !important;
}


/* ==========================================================
   KYRGYZ TEXT
========================================================== */

.back-btn strong {

    display:
        inline !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #063c78 !important;

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;

    font-style:
        normal !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

    white-space:
        nowrap !important;
}


/* ==========================================================
   ENGLISH TEXT

   Remove the old tiny second-line appearance.
========================================================== */

.back-btn small {

    display:
        inline !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #063c78 !important;

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;

    font-style:
        normal !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

    opacity:
        1 !important;

    white-space:
        nowrap !important;
}


/* Add slash between Kyrgyz and English */

.back-btn small::before {

    content:
        " / " !important;

    white-space:
        pre !important;
}


/* ==========================================================
   IF CURRENT HTML USES chapter-back-text
========================================================== */

.back-btn .chapter-back-text,
.chapter-back-text {

    display:
        inline !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #063c78 !important;

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

    white-space:
        nowrap !important;
}


/* ==========================================================
   HOVER
========================================================== */

.back-btn:hover {

    background:
        linear-gradient(
            135deg,
            #ffc974 0%,
            #f2ad53 100%
        ) !important;

    color:
        #063c78 !important;

    transform:
        translateY(-1px) !important;

    box-shadow:
        0 7px 15px
        rgba(126, 82, 22, .20) !important;
}


/* ==========================================================
   ACTIVE
========================================================== */

.back-btn:active {

    transform:
        translateY(0) !important;

    box-shadow:
        0 3px 8px
        rgba(126, 82, 22, .15) !important;
}


/* ==========================================================
   FOCUS
========================================================== */

.back-btn:focus-visible {

    outline:
        3px solid
        rgba(238, 166, 77, .40) !important;

    outline-offset:
        3px !important;
}


/* ==========================================================
   SHORT LAPTOP

   Prevent old compact rules from shrinking the button again.
========================================================== */

@media (max-height: 780px) {

    .back-btn {

        min-height:
            0 !important;

        padding:
            10px 20px !important;

        font-size:
            13px !important;
    }


    .back-btn strong,
    .back-btn small,
    .back-btn .chapter-back-text {

        font-size:
            13px !important;
    }
}


/* DATA_RESCUE_JENGISH_BACK_BUTTON_V2_END */

/* DATA_RESCUE_EXACT_JENGISH_BACK_V3_START */


/* ==========================================================
   DATA RESCUE LAB — BACK TO CHAPTER

   Match the Jengish Chokusu button:
   ✓ one horizontal line
   ✓ warm orange pill
   ✓ dark-blue Kyrgyz/English text
   ✓ blue arrow
   ✓ same Arial typography
========================================================== */


.rescue-header .back-btn {

    display:
        inline-flex !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        max-content !important;

    height:
        auto !important;

    min-height:
        0 !important;

    flex-direction:
        row !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px !important;

    margin:
        0 !important;

    padding:
        9px 20px !important;

    border:
        none !important;

    border-radius:
        18px !important;

    background:
        #f3ad55 !important;

    background-image:
        none !important;

    color:
        #063c78 !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;

    box-shadow:
        0 5px 12px
        rgba(126, 82, 22, .15) !important;

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        14px !important;

    font-style:
        normal !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    font-kerning:
        normal !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   BLUE ARROW
========================================================== */

.rescue-header .back-btn .back-arrow {

    display:
        inline-block !important;

    flex:
        0 0 auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #3851d1 !important;

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    font-style:
        normal !important;

    line-height:
        1 !important;

    letter-spacing:
        normal !important;
}


/* ==========================================================
   ONE-LINE TEXT

   This is now the same structure we used successfully
   on the other standardized activity buttons.
========================================================== */

.rescue-header .back-btn .chapter-back-text {

    display:
        inline-block !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #063c78 !important;

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        14px !important;

    font-style:
        normal !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    font-kerning:
        normal !important;

    white-space:
        nowrap !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   KILL THE OLD TWO-LINE TYPOGRAPHY

   These selectors must no longer influence this button.
========================================================== */

.rescue-header .back-btn strong,
.rescue-header .back-btn small,
.rescue-header .back-btn .back-copy {

    display:
        none !important;
}


/* ==========================================================
   HOVER
========================================================== */

.rescue-header .back-btn:hover {

    background:
        #f3ad55 !important;

    color:
        #063c78 !important;

    transform:
        translateY(-1px) !important;

    box-shadow:
        0 7px 15px
        rgba(126, 82, 22, .19) !important;
}


/* ==========================================================
   ACTIVE
========================================================== */

.rescue-header .back-btn:active {

    transform:
        translateY(0) !important;

    box-shadow:
        0 3px 8px
        rgba(126, 82, 22, .13) !important;
}


/* ==========================================================
   SHORT LAPTOP

   Prevent earlier compact rules from shrinking the button.
========================================================== */

@media (max-height: 780px) {

    .rescue-header .back-btn {

        min-height:
            0 !important;

        padding:
            9px 20px !important;

        font-size:
            14px !important;
    }


    .rescue-header
    .back-btn
    .chapter-back-text {

        font-size:
            14px !important;
    }
}


/* DATA_RESCUE_EXACT_JENGISH_BACK_V3_END */