/* Source: q/Index.cshtml */
:root {
            --quiz-bg: #eef5fb;
            --quiz-card: #ffffff;
            --quiz-copy: #13334c;
            --quiz-muted: #627b90;
            --quiz-blue: #0d8ec3;
            --quiz-blue-dark: #0a6a92;
            --quiz-green: #3ba55c;
            --quiz-red: #d34f4f;
            --quiz-gray: #dfe7ee;
            --quiz-border: #d7e3ef;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background:
                radial-gradient(circle at top right, rgba(13, 142, 195, 0.16), transparent 32%),
                linear-gradient(180deg, #edf4fb 0%, #f8fbfe 100%);
            color: var(--quiz-copy);
            font-family: "Segoe UI", Arial, sans-serif;
        }

        .quiz-shell {
            max-width: 1160px;
            margin: 0 auto;
            padding: 22px 14px 32px;
        }

        .quiz-card {
            background: var(--quiz-card);
            border: 1px solid var(--quiz-border);
            border-radius: 28px;
            box-shadow: 0 28px 72px rgba(15, 23, 42, 0.11);
            overflow: hidden;
        }

        .quiz-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 18px 22px;
            background: linear-gradient(135deg, #104061 0%, #0d8ec3 100%);
            color: #ffffff;
        }

        .quiz-header h1 {
            margin: 0;
            font-size: 24px;
            line-height: 1.2;
        }

        .quiz-header p {
            margin: 4px 0 0;
            color: rgba(255, 255, 255, 0.82);
            font-size: 14px;
        }

        .quiz-title-group {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
        }

        .quiz-home-logo {
            align-items: center;
            background: rgba(255, 255, 255, 0.96);
            border-radius: 10px;
            box-shadow: 0 10px 24px rgba(4, 30, 48, 0.16);
            display: inline-flex;
            flex: 0 0 auto;
            padding: 5px 7px;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        .quiz-home-logo:hover,
        .quiz-home-logo:focus {
            box-shadow: 0 12px 28px rgba(4, 30, 48, 0.24);
            transform: translateY(-1px);
        }

        .quiz-home-logo img {
            display: block;
            height: auto;
            width: 74px;
        }

        .quiz-clock,
        .quiz-summary {
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.16);
            font-size: 16px;
            font-weight: 800;
            padding: 10px 18px;
            text-align: center;
            white-space: nowrap;
        }

        .quiz-body {
            padding: 24px;
        }

        .quiz-start,
        .quiz-result,
        .quiz-panel,
        .quiz-hint {
            border: 1px solid var(--quiz-border);
            border-radius: 24px;
            background: #ffffff;
        }

        .quiz-start,
        .quiz-result {
            padding: 28px;
        }

        .quiz-start {
            text-align: center;
        }

        .quiz-start p,
        .quiz-result p {
            color: var(--quiz-muted);
            line-height: 1.8;
        }

        .quiz-message {
            margin-top: 16px;
            border-radius: 18px;
            padding: 14px 16px;
            background: #fff4f4;
            color: #a62f2f;
            font-weight: 700;
        }

        .quiz-btn {
            appearance: none;
            border: none;
            border-radius: 999px;
            background: var(--quiz-blue);
            color: #ffffff;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 800;
            min-height: 48px;
            min-width: 140px;
            padding: 0 24px;
            text-decoration: none;
            transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
        }

        .quiz-btn:hover {
            transform: translateY(-1px);
            background: var(--quiz-blue-dark);
        }

        .quiz-btn.green {
            background: var(--quiz-green);
        }

        .quiz-btn.green:hover {
            background: #2e8649;
        }

        .quiz-btn.red {
            background: var(--quiz-red);
        }

        .quiz-btn.red:hover {
            background: #b53d3d;
        }

        .quiz-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 280px;
            gap: 20px;
            align-items: start;
        }

        .quiz-panel {
            padding: 24px;
        }

        .quiz-hint {
            margin-bottom: 18px;
            background: #f2fbff;
            border-style: dashed;
            padding: 18px;
        }

        .quiz-question {
            font-size: 19px;
            line-height: 1.9;
        }

        .quiz-question p:first-child,
        .quiz-hint p:first-child {
            margin-top: 0;
        }

        .quiz-question img,
        .quiz-hint img,
        .quiz-answer-copy img,
        .quiz-result-table img {
            max-width: 100%;
            height: auto;
        }

        .quiz-answer-list {
            display: grid;
            gap: 14px;
            margin-top: 20px;
        }

        .quiz-answer {
            border: 1px solid #d8e4ef;
            border-radius: 20px;
            background: #fbfdff;
            cursor: pointer;
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 18px;
            position: relative;
            transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
        }

        .quiz-answer:hover {
            background: #f1f9ff;
            border-color: #9fcae5;
            transform: translateY(-1px);
        }

        .quiz-answer.is-selected {
            background: linear-gradient(135deg, #e8f7ff 0%, #f4fbff 100%);
            border-color: var(--quiz-blue);
            box-shadow: 0 14px 32px rgba(13, 142, 195, 0.16);
        }

        .quiz-answer:focus-within {
            outline: 3px solid rgba(13, 142, 195, 0.22);
            outline-offset: 3px;
        }

        .quiz-answer-choice {
            display: flex;
            align-items: center;
            flex: 0 0 auto;
            min-width: 38px;
            padding-top: 2px;
        }

        .quiz-answer input {
            height: 1px;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
            position: absolute;
            width: 1px;
            margin: 0;
        }

        .quiz-answer-tag {
            flex: 0 0 34px;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: #e7f3fb;
            color: #0d8ec3;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            pointer-events: none;
            transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
        }

        .quiz-answer.is-selected .quiz-answer-tag {
            background: var(--quiz-blue);
            color: #ffffff;
            box-shadow: 0 8px 18px rgba(13, 142, 195, 0.24);
        }

        .quiz-answer-copy {
            flex: 1 1 auto;
            min-width: 0;
        }

        .quiz-answer-copy p:first-child {
            margin-top: 0;
        }

        .quiz-answer-copy p:last-child {
            margin-bottom: 0;
        }

        .quiz-text-answer {
            margin-top: 20px;
        }

        .quiz-text-answer input {
            border: 2px solid #c7d7e6;
            border-radius: 16px;
            font-size: 20px;
            padding: 14px 16px;
            width: 100%;
        }

        .quiz-actions {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 24px;
        }

        .quiz-sidebar {
            display: grid;
            gap: 16px;
        }

        .quiz-stats,
        .quiz-jump {
            border: 1px solid var(--quiz-border);
            border-radius: 22px;
            background: #ffffff;
            padding: 20px;
        }

        .quiz-stats h3,
        .quiz-jump h3,
        .quiz-result h2 {
            margin-top: 0;
        }

        .quiz-stats dl {
            margin: 0;
            display: grid;
            gap: 10px;
        }

        .quiz-stats div {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            font-weight: 700;
        }

        .quiz-jump-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 8px;
        }

        .quiz-jump-btn {
            appearance: none;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-weight: 800;
            min-height: 42px;
            padding: 0;
        }

        .btnNot {
            background: #e8edf2;
            color: #12334c;
        }

        .btnTrue {
            background: #3ba55c;
            color: #ffffff;
        }

        .btnFalse {
            background: #d34f4f;
            color: #ffffff;
        }

        .quiz-jump-btn.current {
            outline: 3px solid #0d8ec3;
            outline-offset: 2px;
        }

        .quiz-result-score {
            font-size: 42px;
            font-weight: 900;
            text-align: center;
            margin: 0 0 10px;
        }

        .quiz-result-summary {
            text-align: center;
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 22px;
        }

        .quiz-result-table {
            width: 100%;
            border-collapse: collapse;
        }

        .quiz-result-table-wrap {
            margin-top: 18px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .quiz-result-table td,
        .quiz-result-table th {
            border: 1px solid #d7e3ef;
            padding: 12px;
            vertical-align: top;
        }

        .quiz-result-table th {
            background: #eff6fb;
            text-align: left;
        }

        .quiz-result-table tr.correct td:first-child {
            background: #daf4df;
        }

        .quiz-result-table tr.wrong td:first-child {
            background: #fde3e3;
        }

        .quiz-result-table td:first-child {
            font-weight: 900;
            width: 64px;
            text-align: center;
        }

        @media (max-width: 980px) {
            .quiz-layout {
                grid-template-columns: 1fr;
            }

            .quiz-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .quiz-title-group {
                width: 100%;
            }
        }

        @media (max-width: 720px) {
            .quiz-shell {
                padding: 10px 6px 24px;
            }

            .quiz-card {
                border-radius: 16px;
            }

            .quiz-body {
                padding: 14px;
            }

            .quiz-title-group {
                align-items: flex-start;
                gap: 10px;
            }

            .quiz-home-logo {
                padding: 5px 6px;
            }

            .quiz-home-logo img {
                width: 62px;
            }

            .quiz-header h1 {
                font-size: 20px;
            }

            .quiz-result {
                padding: 16px;
            }

            .quiz-result h2 {
                font-size: 22px;
                line-height: 1.25;
            }

            .quiz-result-score {
                font-size: 34px;
            }

            .quiz-result-summary {
                display: grid;
                gap: 8px;
                font-size: 15px;
                line-height: 1.5;
                text-align: left;
            }

            .quiz-result-table-wrap {
                overflow: visible;
            }

            .quiz-result-table,
            .quiz-result-table thead,
            .quiz-result-table tbody,
            .quiz-result-table tr,
            .quiz-result-table td {
                display: block;
                width: 100%;
            }

            .quiz-result-table thead {
                height: 1px;
                margin: -1px;
                overflow: hidden;
                position: absolute;
                width: 1px;
                clip: rect(0 0 0 0);
            }

            .quiz-result-table tr {
                background: #ffffff;
                border: 1px solid #d7e3ef;
                border-radius: 16px;
                box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
                margin: 0 0 16px;
                overflow: hidden;
            }

            .quiz-result-table tr.correct {
                border-left: 5px solid var(--quiz-green);
            }

            .quiz-result-table tr.wrong {
                border-left: 5px solid var(--quiz-red);
            }

            .quiz-result-table td {
                border: 0;
                border-bottom: 1px solid #e5edf5;
                padding: 12px 14px;
                text-align: left;
            }

            .quiz-result-table td:last-child {
                border-bottom: 0;
            }

            .quiz-result-table td:first-child {
                align-items: center;
                display: flex;
                gap: 8px;
                justify-content: flex-start;
                width: 100%;
            }

            .quiz-result-table td::before {
                color: #6b8195;
                content: attr(data-label);
                display: block;
                font-size: 11px;
                font-weight: 900;
                letter-spacing: .08em;
                margin-bottom: 5px;
                text-transform: uppercase;
            }

            .quiz-result-table td:first-child::before {
                margin-bottom: 0;
            }
        }

/* Modern start screen and result analysis */
.quiz-intro-hero {
    background: linear-gradient(135deg, #146b28 0%, #268c43 100%);
    border-radius: 18px;
    color: #fff;
    margin-bottom: 18px;
    padding: 34px 28px;
    text-align: center;
}

.quiz-intro-hero h2 {
    color: #fff;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    margin: 12px auto;
    max-width: 920px;
}

.quiz-intro-hero p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.65;
    margin: 0 auto;
    max-width: 840px;
}

.quiz-intro-pill,
.quiz-result-pill {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .03em;
    padding: 9px 18px;
    text-transform: uppercase;
}

.quiz-start-modern {
    text-align: left;
}

.quiz-start-modern h2 {
    color: #075c16;
    margin: 0 0 16px;
}

.quiz-start-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quiz-start-list li {
    align-items: center;
    border-bottom: 1px solid #dce8f2;
    display: flex;
    gap: 14px;
    padding: 16px 0;
}

.quiz-start-list li:last-child {
    border-bottom: 0;
}

.quiz-start-icon {
    align-items: center;
    background: #e7f5ea;
    border: 2px solid #2a8b43;
    border-radius: 12px;
    color: #146b28;
    display: inline-flex;
    flex: 0 0 34px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.quiz-start-description {
    background: #f7fbf8;
    border: 1px solid #d9eadf;
    border-radius: 16px;
    color: #27445a;
    margin-top: 16px;
    padding: 16px;
}

.quiz-start-action {
    margin-top: 24px;
    text-align: center;
}

.quiz-begin-btn {
    background: #146b28;
    border-radius: 12px;
    min-width: 180px;
}

.quiz-begin-btn:hover {
    background: #0d531d;
}

.quiz-results-modern {
    background: transparent;
    border: 0;
    padding: 0;
}

.quiz-score-card,
.quiz-analysis-card,
.quiz-review-card {
    background: #fff;
    border: 1px solid var(--quiz-border);
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
    padding: 24px;
}

.quiz-analysis-card,
.quiz-review-card {
    margin-top: 18px;
}

.quiz-score-card {
    text-align: center;
}

.quiz-score-card .quiz-result-pill {
    background: #0f6d24;
    color: #fff;
    margin-bottom: 10px;
}

.quiz-result-score {
    color: #0f6d24;
    line-height: 1;
}

.quiz-result-score span {
    font-size: .42em;
    margin-left: 4px;
}

.quiz-result-score.is-below-basic {
    color: #b00020;
}

.quiz-result-score.is-basic {
    color: #b66a00;
}

.quiz-result-score.is-proficient {
    color: #0a7a34;
}

.quiz-result-score.is-advanced {
    color: #075dad;
}

.quiz-result-band {
    color: #075c16;
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 8px;
}

.quiz-score-meter {
    margin: 28px auto 14px;
    max-width: 760px;
    position: relative;
}

.quiz-score-track {
    background: linear-gradient(90deg, #efb3b3 0%, #f4d49a 55%, #b7e4c7 70%, #9bd8f2 100%);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.quiz-score-fill {
    background: rgba(19, 51, 76, 0.26);
    display: block;
    height: 100%;
}

.quiz-score-marker {
    color: #075dad;
    font-size: 12px;
    font-weight: 900;
    position: absolute;
    top: -20px;
    transform: translateX(-50%);
    white-space: nowrap;
}

.quiz-score-marker::after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #075dad;
    content: "";
    left: 50%;
    position: absolute;
    top: 15px;
    transform: translateX(-50%);
}

.quiz-score-ticks {
    height: 38px;
    position: relative;
}

.quiz-score-ticks span {
    color: #6a7d8d;
    font-size: 11px;
    line-height: 1.2;
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
}

.quiz-score-ticks span::before {
    background: #526779;
    content: "";
    display: block;
    height: 16px;
    margin: -18px auto 3px;
    width: 2px;
}

.quiz-analysis-card h2,
.quiz-review-card h2 {
    color: #075c16;
    margin: 0 0 12px;
}

.quiz-analysis-card h3 {
    color: #075c16;
    margin: 22px 0 10px;
}

.quiz-analysis-card p {
    color: #18364f;
    line-height: 1.65;
}

.quiz-band-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.quiz-band-card {
    border: 1px solid #d9e5ef;
    border-radius: 12px;
    padding: 14px;
}

.quiz-band-card.is-current {
    background: #effbef;
    border-color: #2a8b43;
}

.quiz-band-card strong,
.quiz-band-card span {
    display: block;
}

.quiz-band-card span {
    color: #486070;
    font-size: 13px;
    font-weight: 800;
    margin: 4px 0;
}

.quiz-band-card p {
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}

.quiz-topic-list {
    display: grid;
    gap: 10px;
}

.quiz-topic-row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.quiz-topic-row span {
    background: #fde7ed;
    border-radius: 999px;
    color: #bb1747;
    font-size: 11px;
    font-weight: 900;
    margin-left: 8px;
    padding: 3px 7px;
}

.quiz-topic-track {
    background: #eef3f7;
    border-radius: 999px;
    grid-column: 1 / -1;
    height: 8px;
    overflow: hidden;
}

.quiz-topic-track i {
    background: #0f6d24;
    display: block;
    height: 100%;
}

.quiz-topic-row.needs-focus .quiz-topic-track i {
    background: #d71920;
}

.quiz-focus-list {
    margin: 0;
    padding-left: 22px;
}

.quiz-focus-list li {
    line-height: 1.6;
    margin-bottom: 8px;
}

.quiz-review-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.quiz-review-filters span {
    border: 1px solid #d9e5ef;
    border-radius: 10px;
    color: #234357;
    font-size: 13px;
    font-weight: 900;
    padding: 9px 13px;
}

.quiz-review-filters .active {
    background: #0f6d24;
    border-color: #0f6d24;
    color: #fff;
}

.quiz-review-item {
    border: 1px solid #d9e5ef;
    border-left: 5px solid #0f6d24;
    border-radius: 14px;
    margin-top: 14px;
    padding: 16px;
}

.quiz-review-item.is-wrong {
    border-left-color: #d71920;
}

.quiz-review-item header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.quiz-review-item header span {
    color: #0f6d24;
    font-weight: 900;
    margin-left: 5px;
}

.quiz-review-item.is-wrong header span {
    color: #d71920;
}

.quiz-review-item header em {
    color: #597084;
    font-size: 12px;
    font-style: normal;
    text-align: right;
}

.quiz-review-question {
    color: #0f2e45;
    line-height: 1.7;
}

.quiz-review-question img {
    height: auto;
    max-width: 100%;
}

.quiz-answer-review-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
}

.quiz-answer-review-grid p {
    background: #f7fafc;
    border-radius: 10px;
    color: #18364f;
    margin: 0;
    padding: 10px 12px;
}

.quiz-solution {
    background: #f1f5f9;
    border-radius: 10px;
    color: #18364f;
    line-height: 1.6;
    margin-top: 12px;
    padding: 12px;
}

@media (max-width: 720px) {
    .quiz-intro-hero {
        border-radius: 14px;
        padding: 26px 16px;
    }

    .quiz-intro-hero p {
        font-size: 16px;
    }

    .quiz-start,
    .quiz-score-card,
    .quiz-analysis-card,
    .quiz-review-card {
        border-radius: 14px;
        padding: 16px;
    }

    .quiz-start-list li {
        align-items: flex-start;
    }

    .quiz-band-grid,
    .quiz-answer-review-grid {
        grid-template-columns: 1fr;
    }

    .quiz-review-item header {
        display: block;
    }

    .quiz-review-item header em {
        display: block;
        margin-top: 4px;
        text-align: left;
    }
}