:root {
    --bg: #02070f;
    --bg-soft: #06121f;
    --panel: #071524;
    --panel-2: #0a1b2e;
    --line: rgba(89, 122, 153, 0.36);
    --line-strong: rgba(27, 223, 235, 0.38);
    --text: #e6edf5;
    --muted: #95a8bc;
    --cyan: #13d7df;
    --cyan-2: #06b8c0;
    --green: #38d26d;
    --amber: #e59c3a;
    --danger: #f85f63;
    --shadow: 0 24px 80px rgba(2, 9, 16, 0.8);
    --bg-radial-a: rgba(19, 215, 223, 0.18);
    --bg-radial-b: rgba(93, 60, 209, 0.12);
    --bg-grad-start: #030a13;
    --bg-grad-end: #02070f;
    --header-bg: rgba(3, 10, 19, 0.8);
    --header-border: rgba(127, 146, 168, 0.18);
    --ghost-btn-bg: rgba(10, 24, 40, 0.72);
    --ghost-btn-text: #b6c9dd;
    --ghost-btn-hover-text: #d6ebf6;
    --on-solid: #07202e;
    --progress-a: #16d8e0;
    --progress-b: #38d26d;
}

html[data-theme="light"] {
    --bg: #eef4ff;
    --bg-soft: #f6f9ff;
    --panel: #ffffff;
    --panel-2: #f2f7ff;
    --line: rgba(83, 114, 161, 0.3);
    --line-strong: rgba(111, 93, 246, 0.42);
    --text: #112d4b;
    --muted: #567292;
    --cyan: #2f77f5;
    --cyan-2: #6f5df6;
    --green: #2f8f63;
    --amber: #d63d8f;
    --danger: #d84f64;
    --shadow: 0 16px 40px rgba(20, 46, 84, 0.12);
    --bg-radial-a: rgba(47, 119, 245, 0.14);
    --bg-radial-b: rgba(214, 61, 143, 0.12);
    --bg-grad-start: #f9fbff;
    --bg-grad-end: #edf4ff;
    --header-bg: rgba(247, 250, 255, 0.92);
    --header-border: rgba(82, 113, 153, 0.22);
    --ghost-btn-bg: #ffffff;
    --ghost-btn-text: #2d4d71;
    --ghost-btn-hover-text: #1c3c63;
    --on-solid: #ffffff;
    --progress-a: #2f77f5;
    --progress-b: #d63d8f;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: "Manrope", sans-serif;
    color: var(--text);
    background:
        radial-gradient(850px 500px at 10% -6%, var(--bg-radial-a), transparent 60%),
        radial-gradient(900px 460px at 100% 5%, var(--bg-radial-b), transparent 65%),
        linear-gradient(180deg, var(--bg-grad-start) 0%, var(--bg-grad-end) 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

.quiz-header {
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(16px);
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
}

.quiz-header-inner {
    max-width: 1260px;
    margin: 0 auto;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.quiz-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quiz-brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.44));
}

.quiz-brand-title {
    font-family: "Rajdhani", sans-serif;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #90f2f8;
}

.quiz-brand-sub {
    color: var(--muted);
    font-size: 0.9rem;
}

.quiz-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quiz-link-btn,
.btn-solid,
.btn-outline {
    border-radius: 12px;
    border: 1px solid var(--line);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger {
    border-color: rgba(247, 92, 110, 0.55) !important;
    color: #ffc9d2 !important;
    background: rgba(72, 20, 30, 0.78) !important;
}

.btn-danger:hover {
    border-color: rgba(247, 92, 110, 0.76) !important;
    background: rgba(94, 28, 41, 0.86) !important;
    color: #ffe0e5 !important;
}

.quiz-link-btn,
.btn-outline {
    color: var(--ghost-btn-text);
    background: var(--ghost-btn-bg);
}

.quiz-link-btn:hover,
.btn-outline:hover {
    border-color: rgba(19, 215, 223, 0.45);
    color: var(--ghost-btn-hover-text);
    transform: translateY(-1px);
}

.btn-solid {
    color: var(--on-solid);
    border-color: transparent;
    background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
}

.btn-solid:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.btn-solid:disabled,
.btn-outline:disabled,
.quiz-link-btn:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    filter: none;
    transform: none !important;
}

.quiz-main {
    max-width: 1260px;
    margin: 0 auto;
    padding: 28px 22px 80px;
}

.quiz-hero {
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 28px;
    background: linear-gradient(180deg, rgba(8, 23, 38, 0.84), rgba(6, 16, 28, 0.9));
    box-shadow: var(--shadow);
}

.quiz-tag {
    display: inline-block;
    font-family: "Rajdhani", sans-serif;
    letter-spacing: 3px;
    color: #95f5fa;
    font-size: 0.78rem;
}

.quiz-hero h1 {
    margin: 12px 0 8px;
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
}

.quiz-hero p {
    margin: 0;
    color: var(--muted);
}

.quiz-radar-dashboard {
    margin-top: 20px;
    display: grid;
    gap: 14px;
}

.quiz-radar-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
    gap: 12px;
}

.quiz-radar-core-panel,
.quiz-radar-trend-panel,
.quiz-stage-dashboard-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(170deg, rgba(8, 25, 41, 0.94), rgba(4, 13, 23, 0.95));
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(155, 209, 235, 0.06);
}

.quiz-radar-core-panel::before,
.quiz-radar-trend-panel::before,
.quiz-stage-dashboard-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(19, 215, 223, 0.08), transparent 48%);
    pointer-events: none;
}

.quiz-radar-core-panel {
    padding: 14px;
}

.quiz-radar-core-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.quiz-radar-core-tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(19, 215, 223, 0.35);
    border-radius: 999px;
    padding: 4px 10px;
    color: #95f5fa;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.quiz-radar-core-meta {
    color: #86a3bd;
    font-size: 0.78rem;
}

.quiz-radar-core-body {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.quiz-radar-ring {
    --radar-pct: 0;
    width: 186px;
    height: 186px;
    border-radius: 50%;
    background:
        conic-gradient(from -90deg, #17d8e1 calc(var(--radar-pct) * 1%), rgba(9, 27, 45, 0.92) 0),
        radial-gradient(circle at 30% 20%, rgba(131, 248, 255, 0.15), transparent 56%);
    border: 1px solid rgba(89, 126, 156, 0.35);
    position: relative;
    margin: 0 auto;
    display: grid;
    place-items: center;
    box-shadow:
        inset 0 0 0 14px rgba(4, 15, 25, 0.96),
        0 16px 34px rgba(0, 0, 0, 0.28);
}

.quiz-radar-ring::before {
    content: "";
    position: absolute;
    inset: 25px;
    border-radius: 50%;
    border: 1px solid rgba(130, 163, 190, 0.36);
    background: radial-gradient(circle at center, rgba(19, 215, 223, 0.12), transparent 62%);
}

.quiz-radar-ring::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1px dashed rgba(129, 161, 189, 0.34);
    animation: radarSweep 14s linear infinite;
}

.quiz-radar-ring-center {
    position: relative;
    z-index: 1;
    text-align: center;
}

.quiz-radar-ring-center strong {
    display: block;
    font-family: "Rajdhani", sans-serif;
    font-size: 1.8rem;
    color: #e6f9ff;
    line-height: 1;
}

.quiz-radar-ring-center span {
    display: block;
    margin-top: 5px;
    color: #89a7c0;
    font-size: 0.74rem;
    letter-spacing: 0.5px;
}

.quiz-radar-pulse {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    border: 1px solid rgba(19, 215, 223, 0.26);
    animation: radarPulse 2.5s ease-in-out infinite;
}

.quiz-radar-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.quiz-radar-kpi {
    border: 1px solid rgba(93, 122, 149, 0.36);
    border-radius: 12px;
    background: rgba(6, 19, 31, 0.72);
    padding: 10px;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: dashboardIn 0.55s ease both;
}

.quiz-radar-kpi span {
    color: #8ca7bd;
    font-size: 0.77rem;
}

.quiz-radar-kpi strong {
    margin-top: 4px;
    color: #dff5ff;
    font-family: "Rajdhani", sans-serif;
    font-size: 1.03rem;
    line-height: 1.15;
    word-break: break-word;
}

.quiz-radar-trend-panel,
.quiz-stage-dashboard-card {
    padding: 14px;
}

.quiz-radar-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.quiz-radar-chart-head strong {
    color: #dcf6ff;
    font-size: 0.98rem;
}

.quiz-radar-chart-head span {
    border-radius: 999px;
    border: 1px solid rgba(92, 122, 146, 0.42);
    background: rgba(10, 30, 46, 0.65);
    color: #93b0c8;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 9px;
    white-space: nowrap;
}

.quiz-trend-bars {
    margin-top: 12px;
    min-height: 176px;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: end;
    gap: 7px;
}

.quiz-trend-empty {
    border: 1px dashed rgba(94, 127, 157, 0.5);
    border-radius: 12px;
    min-height: 132px;
    display: grid;
    place-items: center;
    color: #88a6be;
    font-size: 0.84rem;
}

.quiz-trend-bar {
    --score: 0;
    --delay: 0ms;
    position: relative;
    border: 1px solid rgba(90, 120, 146, 0.38);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(8, 22, 36, 0.9), rgba(6, 15, 25, 0.94));
    min-height: 132px;
    padding: 6px 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
}

.quiz-trend-bar::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 22px;
    height: calc(var(--score) * 0.9%);
    max-height: calc(100% - 30px);
    border-radius: 7px 7px 4px 4px;
    background: linear-gradient(180deg, rgba(22, 216, 224, 0.95), rgba(56, 210, 109, 0.85));
    transform-origin: bottom;
    transform: scaleY(0);
    animation: barGrow 0.85s cubic-bezier(.22, .82, .23, .99) both;
    animation-delay: var(--delay);
}

.quiz-trend-bar strong,
.quiz-trend-bar span {
    position: relative;
    z-index: 1;
}

.quiz-trend-bar strong {
    font-family: "Rajdhani", sans-serif;
    font-size: 0.74rem;
    color: #dff7ff;
    line-height: 1;
}

.quiz-trend-bar span {
    font-size: 0.62rem;
    color: #84a4bd;
}

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

.quiz-stage-column {
    --pct: 0;
    --delay: 0ms;
    border: 1px solid rgba(93, 124, 149, 0.4);
    border-radius: 13px;
    background: rgba(7, 21, 35, 0.82);
    padding: 10px;
    display: grid;
    gap: 8px;
}

.quiz-stage-column .name {
    font-weight: 700;
    color: #d8f0ff;
    font-size: 0.84rem;
}

.quiz-stage-column .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8ba9bf;
    font-size: 0.75rem;
}

.quiz-stage-column .track {
    border: 1px solid rgba(97, 128, 153, 0.38);
    border-radius: 10px;
    background: rgba(3, 12, 21, 0.86);
    height: 112px;
    padding: 5px;
    display: flex;
    align-items: flex-end;
}

.quiz-stage-column .fill {
    width: 100%;
    border-radius: 7px;
    height: calc(var(--pct) * 1%);
    background: linear-gradient(180deg, rgba(22, 216, 224, 0.92), rgba(56, 210, 109, 0.78));
    transform-origin: bottom;
    transform: scaleY(0);
    animation: barGrow 0.85s cubic-bezier(.22, .82, .23, .99) both;
    animation-delay: var(--delay);
}

.quiz-stage-column.done .fill {
    background: linear-gradient(180deg, rgba(54, 211, 146, 0.96), rgba(34, 158, 105, 0.86));
}

.quiz-stage-column.locked .fill {
    background: linear-gradient(180deg, rgba(109, 139, 164, 0.78), rgba(86, 113, 136, 0.76));
}

.quiz-cockpit-strip-card {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(170deg, rgba(8, 25, 41, 0.94), rgba(4, 13, 23, 0.95));
}

.quiz-stage-capsules {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quiz-stage-capsule {
    border: 1px solid rgba(96, 127, 153, 0.42);
    border-radius: 999px;
    background: rgba(9, 28, 44, 0.76);
    color: #a9c3da;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.quiz-stage-capsule strong {
    color: #d7efff;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.86rem;
}

.quiz-stage-capsule.done {
    border-color: rgba(56, 210, 109, 0.54);
    color: #8ef0b0;
    background: rgba(20, 54, 34, 0.55);
}

.quiz-stage-capsule.active {
    border-color: rgba(19, 215, 223, 0.54);
    color: #90f4f9;
    background: rgba(8, 38, 50, 0.65);
}

.quiz-pack-led-strip {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15px, 1fr));
    gap: 6px;
}

.quiz-pack-led {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid rgba(103, 134, 159, 0.42);
    background: rgba(8, 24, 39, 0.86);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(3, 11, 20, 0.76);
}

.quiz-pack-led::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: rgba(120, 144, 166, 0.34);
}

.quiz-pack-led.passed {
    border-color: rgba(56, 210, 109, 0.68);
    box-shadow: 0 0 7px rgba(56, 210, 109, 0.45);
}

.quiz-pack-led.passed::after {
    background: rgba(56, 210, 109, 0.92);
}

.quiz-pack-led.attempted::after {
    background: rgba(19, 215, 223, 0.92);
}

.quiz-pack-led.locked::after {
    background: rgba(126, 145, 162, 0.42);
}

.quiz-pack-led.checkpoint {
    border-color: rgba(255, 196, 102, 0.72);
    box-shadow: 0 0 8px rgba(255, 196, 102, 0.44);
    animation: checkpointBlink 1.05s ease-in-out infinite;
}

.quiz-pack-led.checkpoint::after {
    background: rgba(255, 196, 102, 0.95);
}

.quiz-howitworks-card {
    border: 1px solid rgba(89, 123, 151, 0.4);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(8, 24, 40, 0.9), rgba(6, 16, 28, 0.95));
    padding: 10px 12px;
}

.quiz-howitworks-card summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #9dd9ed;
    font-weight: 800;
    font-size: 0.88rem;
}

.quiz-howitworks-card summary::-webkit-details-marker {
    display: none;
}

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

.quiz-howitworks-step {
    border: 1px solid rgba(97, 128, 153, 0.36);
    border-radius: 11px;
    background: rgba(7, 21, 35, 0.82);
    padding: 10px;
}

.quiz-howitworks-step strong {
    color: #d9f3ff;
    font-size: 0.82rem;
}

.quiz-howitworks-step p {
    margin: 6px 0 0;
    color: #8faac2;
    font-size: 0.78rem;
    line-height: 1.55;
}

@keyframes checkpointBlink {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.84);
        opacity: 0.6;
    }
}

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

.quiz-overview-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    background: linear-gradient(180deg, rgba(8, 24, 39, 0.92), rgba(6, 17, 29, 0.94));
    position: relative;
    overflow: hidden;
    animation: dashboardIn 0.52s ease both;
}

.quiz-overview-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(19, 215, 223, 0.08), transparent 52%);
    pointer-events: none;
}

.quiz-overview-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.quiz-overview-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(19, 215, 223, 0.36);
    background: rgba(8, 34, 46, 0.8);
    display: inline-grid;
    place-items: center;
    color: #91f4f9;
    font-size: 0.78rem;
}

.quiz-overview-label {
    color: #8ea3b7;
    font-size: 0.8rem;
}

.quiz-overview-value {
    font-family: "Rajdhani", sans-serif;
    margin-top: 6px;
    color: #dbf6ff;
    font-size: 1.12rem;
}

.quiz-overview-sub {
    margin-top: 4px;
    color: #84a0b7;
    font-size: 0.8rem;
}

.quiz-overview-meter {
    margin-top: 10px;
    height: 7px;
    border-radius: 999px;
    border: 1px solid rgba(98, 126, 151, 0.42);
    background: rgba(4, 14, 24, 0.86);
    overflow: hidden;
}

.quiz-overview-meter span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--progress-a), var(--progress-b));
    transition: width 0.62s cubic-bezier(.22, .82, .23, .99);
}

@keyframes radarPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.35;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.88;
    }
}

@keyframes radarSweep {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes dashboardIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes barGrow {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

.quiz-level-progress-card {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(8, 24, 40, 0.92), rgba(7, 18, 31, 0.92));
    padding: 14px;
}

.quiz-level-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.quiz-level-progress-row strong {
    color: #d5f7ff;
    font-size: 1.06rem;
}

.quiz-level-progress-row p {
    margin: 5px 0 0;
    color: #9fb6cb;
    font-size: 0.9rem;
}

.quiz-level-progress-pill {
    border: 1px solid rgba(19, 215, 223, 0.45);
    border-radius: 999px;
    background: rgba(8, 42, 56, 0.72);
    color: #99f4f8;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 10px;
    white-space: nowrap;
}

.quiz-level-progress-track {
    margin-top: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(7, 16, 27, 0.92);
    overflow: hidden;
}

.quiz-level-progress-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--progress-a), var(--progress-b));
    transition: width 0.3s ease;
}

.quiz-level-progress-help {
    margin-top: 8px;
    color: #8ea8bf;
    font-size: 0.86rem;
}

.quiz-achievement-board {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(8, 24, 40, 0.92), rgba(7, 18, 31, 0.92));
    padding: 14px;
}

.quiz-achievement-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.quiz-achievement-head-main {
    display: grid;
    gap: 3px;
}

.quiz-achievement-head strong {
    color: #d5f7ff;
    font-size: 1.02rem;
}

.quiz-achievement-head-sub {
    color: #8daac1;
    font-size: 0.8rem;
}

.quiz-achievement-pill {
    border-radius: 999px;
    border: 1px solid rgba(143, 165, 186, 0.44);
    background: rgba(12, 28, 44, 0.8);
    color: #b8ccdf;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 6px 11px;
}

.quiz-achievement-pill.earned {
    border-color: rgba(56, 210, 109, 0.55);
    color: #8ef0b0;
    background: rgba(20, 54, 34, 0.55);
}

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

.quiz-achievement-compact-item {
    border: 1px solid rgba(96, 126, 151, 0.38);
    border-radius: 12px;
    background: rgba(7, 20, 33, 0.85);
    padding: 10px;
}

.quiz-achievement-meter {
    margin-top: 8px;
    height: 7px;
    border: 1px solid rgba(94, 126, 153, 0.4);
    border-radius: 999px;
    background: rgba(5, 14, 23, 0.86);
    overflow: hidden;
}

.quiz-achievement-meter span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #17d8e1, #39cf73);
    transition: width 0.62s cubic-bezier(.22, .82, .23, .99);
}

.quiz-achievement-detail {
    margin-top: 10px;
    border-top: 1px solid rgba(90, 122, 147, 0.34);
    padding-top: 9px;
}

.quiz-achievement-detail summary {
    list-style: none;
    cursor: pointer;
    color: #9cd5e8;
    font-size: 0.82rem;
    font-weight: 700;
}

.quiz-achievement-detail summary::-webkit-details-marker {
    display: none;
}

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

.quiz-achievement-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(6, 18, 31, 0.78);
    padding: 12px;
}

.quiz-achievement-label {
    color: #8ea8bd;
    font-size: 0.84rem;
}

.quiz-achievement-value {
    margin-top: 4px;
    color: #d7efff;
    font-family: "Rajdhani", sans-serif;
    font-size: 1.03rem;
}

.quiz-achievement-sub {
    margin-top: 6px;
    color: #87a4be;
    font-size: 0.82rem;
}

.quiz-level-badge-list {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.quiz-level-badge-item {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(5, 17, 28, 0.76);
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.quiz-level-badge-item .title {
    color: #d3e9fb;
    font-weight: 700;
}

.quiz-level-badge-item .meta {
    color: #8ca7bd;
    font-size: 0.84rem;
}

.quiz-level-badge-item .state {
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid rgba(140, 165, 186, 0.36);
    color: #b5cce1;
    background: rgba(10, 30, 46, 0.72);
}

.quiz-level-badge-item .state.earned {
    border-color: rgba(56, 210, 109, 0.5);
    color: #8ef0b0;
    background: rgba(24, 70, 46, 0.58);
}

.quiz-personal-summary {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(7, 20, 34, 0.95), rgba(5, 15, 27, 0.95));
}

.quiz-personal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.quiz-personal-head h3 {
    margin: 0;
    font-size: 1rem;
    color: #c6e9f7;
}

.quiz-personal-pill {
    border: 1px solid rgba(101, 125, 147, 0.5);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.78rem;
    color: #95adc3;
    display: none;
}

.quiz-personal-summary p {
    margin: 10px 0 0;
    color: #adc2d6;
    line-height: 1.65;
}

.quiz-profile-line {
    margin: 10px 0 0;
    color: #95adc3;
    font-size: 0.9rem;
}

.quiz-personal-metrics {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quiz-personal-metric {
    border: 1px solid rgba(101, 125, 147, 0.45);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.8rem;
    color: #b0c5d8;
    background: rgba(9, 26, 40, 0.75);
}

.quiz-reco-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.quiz-reco-chip {
    border: 1px solid rgba(229, 156, 58, 0.44);
    border-radius: 999px;
    background: rgba(81, 49, 14, 0.26);
    color: #f3bf7d;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 7px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.quiz-reco-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(229, 156, 58, 0.62);
    color: #ffd59b;
}

.quiz-reco-chip .meta {
    font-size: 0.72rem;
    opacity: 0.9;
}

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

.quiz-personal-actions .btn-solid,
.quiz-personal-actions .btn-outline {
    width: 100%;
    justify-content: center;
}

.quiz-certificate-banner {
    margin-top: 18px;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(7, 34, 44, 0.9), rgba(8, 22, 36, 0.9));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.quiz-certificate-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quiz-certificate-text strong {
    color: #85f4fa;
}

.quiz-certificate-text span {
    color: #b5cadb;
    font-size: 0.9rem;
}

.quiz-certificate-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quiz-auth {
    margin-top: 20px;
}

.quiz-auth-card {
    max-width: 560px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
    background: var(--panel);
}

.quiz-auth-card h2 {
    margin: 0 0 8px;
    font-size: 1.35rem;
}

.quiz-auth-card p {
    margin: 0;
    color: var(--muted);
}

.quiz-auth-tabs {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

.quiz-auth-tab {
    border: 1px solid var(--line);
    background: rgba(9, 22, 36, 0.75);
    color: #b8cbdd;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
}

.quiz-auth-tab.active {
    background: linear-gradient(135deg, rgba(19, 215, 223, 0.2), rgba(3, 43, 57, 0.5));
    border-color: rgba(19, 215, 223, 0.5);
    color: #d8fcff;
}

.quiz-auth-form {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.quiz-auth-form label {
    font-size: 0.86rem;
    color: #b5c8d9;
}

.quiz-auth-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(5, 15, 26, 0.95);
    color: #e6edf5;
    padding: 11px 12px;
}

.quiz-auth-form input:focus {
    outline: none;
    border-color: rgba(19, 215, 223, 0.55);
}

.quiz-auth-error {
    margin-top: 12px;
    min-height: 20px;
    color: #ff8383;
    font-weight: 600;
}

.quiz-auth-divider {
    margin-top: 14px;
    text-align: center;
    position: relative;
}

.quiz-auth-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid rgba(89, 122, 153, 0.3);
}

.quiz-auth-divider span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 9px;
    background: var(--panel);
    color: #8fa6bb;
    font-size: 0.82rem;
}

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

.quiz-provider-btn {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(9, 24, 39, 0.8);
    color: #c5d8ea;
    padding: 10px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.quiz-provider-btn:hover {
    border-color: rgba(19, 215, 223, 0.5);
    color: #e3f8ff;
}

.quiz-provider-btn.is-disabled {
    opacity: 0.46;
    cursor: not-allowed;
    pointer-events: none;
}

.quiz-pack-section {
    margin-top: 22px;
}

.quiz-pack-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.quiz-category-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quiz-category-tab {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px;
    background: rgba(9, 24, 40, 0.72);
    color: #b2c7dc;
    font-weight: 700;
    cursor: pointer;
}

.quiz-category-tab.active {
    border-color: rgba(19, 215, 223, 0.6);
    color: #d5fbff;
    background: rgba(10, 38, 52, 0.8);
}

.quiz-user-chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 12px;
    color: #cae9ff;
    font-size: 0.86rem;
    background: rgba(8, 24, 38, 0.8);
}

.quiz-pack-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.quiz-pack-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(7, 20, 34, 0.92), rgba(5, 13, 23, 0.92));
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.quiz-pack-card.locked {
    border-color: rgba(120, 140, 160, 0.28);
    background: linear-gradient(180deg, rgba(7, 16, 28, 0.9), rgba(5, 12, 21, 0.9));
    opacity: 0.88;
}

.quiz-pack-card.locked h3,
.quiz-pack-card.locked p {
    color: #8da4ba;
}

.quiz-pack-lock-note {
    margin-top: 10px;
    border: 1px solid rgba(152, 111, 119, 0.4);
    border-radius: 10px;
    background: rgba(61, 26, 32, 0.45);
    color: #f1b7c0;
    padding: 8px 10px;
    font-size: 0.82rem;
    line-height: 1.45;
}

.quiz-pack-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.quiz-pack-reward-row {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quiz-pack-reward-pill {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.79rem;
    font-weight: 700;
    border: 1px solid rgba(143, 165, 186, 0.4);
    color: #b7cde0;
    background: rgba(9, 27, 43, 0.7);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.quiz-pack-reward-pill.earned {
    border-color: rgba(56, 210, 109, 0.58);
    color: #8ef0b0;
    background: rgba(24, 67, 46, 0.58);
}

.quiz-pack-reward-pill.locked {
    border-color: rgba(143, 165, 186, 0.38);
    color: #afc4d7;
    background: rgba(9, 23, 36, 0.7);
}

.quiz-difficulty-badge {
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.quiz-difficulty-badge.beginner {
    color: #78f3a3;
    background: rgba(56, 210, 109, 0.12);
    border-color: rgba(56, 210, 109, 0.45);
}

.quiz-difficulty-badge.intermediate {
    color: #5ce1f7;
    background: rgba(19, 215, 223, 0.12);
    border-color: rgba(19, 215, 223, 0.45);
}

.quiz-difficulty-badge.advanced {
    color: #ffca8b;
    background: rgba(229, 156, 58, 0.12);
    border-color: rgba(229, 156, 58, 0.45);
}

.quiz-pack-check {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid rgba(56, 210, 109, 0.8);
    color: var(--green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.quiz-pack-card h3 {
    margin: 14px 0 8px;
    font-size: 1.65rem;
    font-family: "Rajdhani", sans-serif;
}

.quiz-pack-card p {
    margin: 0;
    color: #9db1c5;
    line-height: 1.6;
    flex: 1;
}

.quiz-pack-meta {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    color: #9db0c2;
    font-size: 1.05rem;
}

.quiz-pack-result {
    margin-top: 10px;
    color: #c8dff4;
    font-size: 0.92rem;
    min-height: 18px;
}

.quiz-pack-result strong {
    color: #91f7fa;
}

.quiz-pack-card button {
    margin-top: 12px;
    width: 100%;
}

.quiz-pack-card button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.btn-solid.is-auto {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    min-height: 48px;
    padding: 8px 14px;
}

.btn-solid.is-auto::after {
    display: none;
}

.quiz-auto-ring {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: conic-gradient(#ffffff var(--auto-progress, 0%), rgba(255, 255, 255, 0.24) 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
}

.quiz-auto-ring > span {
    width: 24px;
    height: 24px;
    border-radius: inherit;
    background: rgba(9, 26, 40, 0.85);
    color: #f4fbff;
    font-size: 0.76rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quiz-auto-copy {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.quiz-auto-copy strong {
    font-size: 0.94rem;
    font-weight: 800;
    color: #f7ffff;
}

.quiz-auto-copy small {
    font-size: 0.73rem;
    color: rgba(225, 247, 255, 0.92);
}

.quiz-flow-section,
.quiz-result-section {
    margin-top: 28px;
}

.quiz-flow-section:focus {
    outline: none;
}

body.flow-active .quiz-main {
    max-width: 1180px;
    padding-top: 14px;
}

body.flow-active .quiz-header {
    display: block;
}

body.flow-active .quiz-hero {
    display: none;
}

body.flow-active .quiz-flow-section {
    margin-top: 10px;
}

body.flow-active .quiz-emotion-panel {
    display: block;
}

.quiz-flow-top {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10px;
}

.quiz-flow-global-progress {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(7, 21, 35, 0.84);
    padding: 10px 12px;
}

.quiz-flow-global-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.86rem;
    color: #9db8cf;
}

.quiz-flow-global-head strong {
    color: #e9f6ff;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.quiz-flow-global-track {
    margin-top: 8px;
    border-radius: 999px;
    height: 8px;
    border: 1px solid rgba(109, 136, 160, 0.38);
    background: rgba(9, 24, 40, 0.86);
    overflow: hidden;
}

.quiz-flow-global-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2ec7f6, #38d06f);
    transition: width 0.26s ease;
}

.quiz-pack-title {
    font-family: "Rajdhani", sans-serif;
    font-size: 1.25rem;
}

.quiz-pack-score {
    color: #b8ccde;
    font-size: 1.06rem;
}

.quiz-pack-score strong {
    color: #93f7fb;
}

.quiz-progress-track {
    margin-top: 16px;
    border-radius: 999px;
    height: 10px;
    background: rgba(9, 21, 35, 0.86);
    border: 1px solid var(--line);
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--progress-a), var(--progress-b));
    transition: width 0.25s ease;
}

.quiz-progress-text {
    margin-top: 9px;
    color: #9fb4c8;
    font-size: 1.02rem;
    font-weight: 700;
}

.quiz-cockpit-cluster {
    margin-top: 12px;
    border: 1px solid rgba(95, 127, 153, 0.42);
    border-radius: 16px;
    background: linear-gradient(170deg, rgba(8, 24, 39, 0.94), rgba(4, 13, 23, 0.95));
    padding: 12px;
    position: relative;
    overflow: hidden;
}

.quiz-cockpit-cluster::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(19, 215, 223, 0.1), transparent 50%);
    pointer-events: none;
}

.quiz-cockpit-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.quiz-cockpit-dial {
    border: 1px solid rgba(96, 128, 153, 0.44);
    border-radius: 14px;
    background: rgba(5, 15, 26, 0.92);
    padding: 10px;
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 1px rgba(89, 120, 147, 0.16);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.quiz-cockpit-dial[data-zone="mid"] {
    border-color: rgba(46, 211, 223, 0.54);
    box-shadow: inset 0 0 0 1px rgba(46, 211, 223, 0.2);
}

.quiz-cockpit-dial[data-zone="high"],
.quiz-cockpit-dial[data-zone="red"] {
    border-color: rgba(248, 102, 99, 0.56);
    box-shadow: inset 0 0 0 1px rgba(248, 102, 99, 0.2);
}

.quiz-cockpit-dial-face {
    width: min(148px, 100%);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid rgba(122, 152, 177, 0.42);
    background:
        radial-gradient(circle at 32% 28%, rgba(24, 44, 62, 0.42) 0 22%, transparent 44%),
        radial-gradient(circle at 50% 50%, rgba(8, 19, 31, 0.95) 35%, rgba(5, 12, 21, 0.98) 69%);
    position: relative;
    overflow: hidden;
}

.quiz-cockpit-dial-face::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: inherit;
    background:
        conic-gradient(from -120deg,
            rgba(219, 238, 251, 0.9) 0deg 1.3deg,
            transparent 1.3deg 7deg,
            rgba(219, 238, 251, 0.7) 7deg 8deg,
            transparent 8deg 14deg,
            rgba(219, 238, 251, 0.9) 14deg 15.3deg,
            transparent 15.3deg 360deg);
    mask: radial-gradient(circle, transparent 64%, #000 64.8% 70%, transparent 70.2%);
    opacity: 0.45;
}

.quiz-cockpit-dial-face::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: inherit;
    background: radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.14), transparent 52%);
    pointer-events: none;
}

.quiz-cockpit-arc {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.62;
    mask: radial-gradient(circle, transparent 62%, #000 63% 69%, transparent 70%);
}

.quiz-cockpit-arc.score {
    background: conic-gradient(
        from -120deg,
        rgba(62, 211, 108, 0.95) 0deg 76deg,
        rgba(51, 203, 223, 0.9) 76deg 154deg,
        rgba(248, 109, 95, 0.86) 154deg 240deg,
        transparent 240deg 360deg
    );
}

.quiz-cockpit-arc.rpm {
    background: conic-gradient(
        from -120deg,
        rgba(63, 211, 116, 0.95) 0deg 124deg,
        rgba(42, 183, 246, 0.9) 124deg 186deg,
        rgba(255, 112, 93, 0.9) 186deg 240deg,
        transparent 240deg 360deg
    );
}

.quiz-cockpit-scale {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.quiz-cockpit-scale span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(var(--a)) translateY(-57px) rotate(calc(-1 * var(--a)));
    transform-origin: center;
    color: rgba(175, 198, 219, 0.84);
    font-family: "Rajdhani", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.quiz-cockpit-needle {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 4px;
    height: 45%;
    border-radius: 6px;
    background: linear-gradient(180deg, #f94f61, #e59c3a);
    transform-origin: bottom center;
    transform: translate(-50%, 0) rotate(-120deg);
    transition: transform 0.35s cubic-bezier(.22, .82, .23, .99);
    box-shadow: 0 0 10px rgba(249, 79, 97, 0.45);
    z-index: 2;
}

.quiz-cockpit-needle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(191, 217, 236, 0.5);
    background: radial-gradient(circle at 35% 30%, #ffffff, #6784a0 70%);
    transform: translateX(-50%);
}

.quiz-cockpit-dial.rpm .quiz-cockpit-needle {
    background: linear-gradient(180deg, #2ed9df, #39cf73);
    box-shadow: 0 0 8px rgba(46, 217, 223, 0.4);
}

.quiz-cockpit-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    z-index: 1;
    align-content: center;
    gap: 1px;
}

.quiz-cockpit-center strong {
    display: block;
    font-family: "Rajdhani", sans-serif;
    font-size: 1.32rem;
    color: #e4f8ff;
    line-height: 1;
}

.quiz-cockpit-center span {
    margin-top: 4px;
    color: #89a8c1;
    font-size: 0.74rem;
}

.quiz-cockpit-center small {
    margin-top: 2px;
    color: #7da0bd;
    font-size: 0.67rem;
    letter-spacing: 0.03em;
}

.quiz-cockpit-hud {
    border: 1px solid rgba(96, 128, 153, 0.44);
    border-radius: 14px;
    background: rgba(6, 17, 29, 0.9);
    padding: 10px;
    display: grid;
    gap: 8px;
    align-content: center;
}

.quiz-cockpit-hud-row {
    border: 1px solid rgba(96, 128, 153, 0.34);
    border-radius: 10px;
    background: rgba(8, 25, 40, 0.7);
    padding: 7px 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.quiz-cockpit-hud-row span {
    color: #90adc6;
    font-size: 0.9rem;
}

.quiz-cockpit-hud-row strong {
    color: #d8f4ff;
    font-family: "Rajdhani", sans-serif;
    font-size: 1.08rem;
}

.quiz-cockpit-lights {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quiz-cockpit-light {
    border: 1px solid rgba(106, 136, 162, 0.4);
    border-radius: 999px;
    background: rgba(9, 24, 39, 0.8);
    color: #7794ad;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 5px 10px;
    transition: all 0.2s ease;
}

.quiz-cockpit-light.on {
    color: #ffffff;
    border-color: rgba(244, 109, 124, 0.66);
    background: rgba(120, 28, 43, 0.8);
    box-shadow: 0 0 10px rgba(248, 95, 99, 0.48);
}

.quiz-cockpit-light.on.safe {
    border-color: rgba(56, 210, 109, 0.66);
    background: rgba(20, 64, 39, 0.8);
    box-shadow: 0 0 10px rgba(56, 210, 109, 0.45);
}

.quiz-cockpit-light.on.hot {
    border-color: rgba(255, 112, 86, 0.74);
    background: rgba(117, 31, 22, 0.84);
    box-shadow: 0 0 12px rgba(255, 112, 86, 0.55);
}

.quiz-cockpit-light.blink {
    animation: cockpitLightBlink 0.9s steps(1, end) infinite;
}

.quiz-cockpit-light-meaning {
    position: relative;
    z-index: 1;
    margin-top: 9px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quiz-cockpit-light-meaning:empty {
    display: none;
}

.quiz-cockpit-legend-pill {
    border: 1px solid rgba(101, 131, 157, 0.45);
    border-radius: 999px;
    background: rgba(8, 22, 36, 0.76);
    color: #8eb0cb;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.quiz-cockpit-legend-pill strong {
    font-family: "Rajdhani", sans-serif;
    font-size: 0.82rem;
    color: #d5efff;
    letter-spacing: 0.2px;
}

.quiz-cockpit-legend-pill.on {
    color: #f4d4d8;
    border-color: rgba(244, 109, 124, 0.6);
    background: rgba(85, 21, 33, 0.7);
}

.quiz-cockpit-legend-pill.on strong {
    color: #ffffff;
}

.quiz-cockpit-legend-pill.safe {
    color: #b7f5cc;
    border-color: rgba(56, 210, 109, 0.58);
    background: rgba(18, 69, 42, 0.68);
}

.quiz-cockpit-legend-pill.warn {
    color: #ffd4d8;
    border-color: rgba(244, 109, 124, 0.62);
    background: rgba(86, 23, 35, 0.72);
}

.quiz-cockpit-legend-pill.hot {
    color: #ffe6d0;
    border-color: rgba(255, 126, 84, 0.64);
    background: rgba(97, 30, 18, 0.72);
}

.quiz-cockpit-alert {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    border: 1px solid rgba(96, 129, 154, 0.42);
    border-radius: 11px;
    background: rgba(8, 24, 39, 0.78);
    color: #a8c8de;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 9px 12px;
}

.quiz-cockpit-alert.good {
    border-color: rgba(56, 210, 109, 0.52);
    color: #9ff3bd;
    background: rgba(18, 58, 36, 0.6);
}

.quiz-cockpit-alert.warn {
    border-color: rgba(248, 95, 99, 0.56);
    color: #ffd4d8;
    background: rgba(83, 25, 33, 0.6);
}

.quiz-cockpit-alert.hot {
    border-color: rgba(255, 126, 84, 0.62);
    color: #ffe3c9;
    background: rgba(92, 35, 20, 0.68);
}

.quiz-cockpit-alert.slow {
    border-color: rgba(229, 156, 58, 0.54);
    color: #ffdca8;
    background: rgba(84, 53, 18, 0.64);
}

@keyframes cockpitLightBlink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.42;
    }
}

.quiz-emotion-panel {
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(8, 26, 42, 0.9), rgba(7, 18, 32, 0.9));
}

.quiz-flow-metrics-table {
    padding: 10px;
}

.quiz-flow-table-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.quiz-flow-table-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.quiz-flow-table-title strong {
    display: block;
    font-size: 1.06rem;
    color: #dff2ff;
    line-height: 1.2;
}

.quiz-flow-table-title p {
    margin: 3px 0 0;
    color: #95b2cb;
    line-height: 1.42;
}

.quiz-flow-table-chips {
    margin-top: 0;
    justify-content: flex-end;
}

.quiz-flow-compact-lines {
    margin-top: 2px;
    border: 1px solid rgba(95, 128, 154, 0.34);
    border-radius: 10px;
    background: rgba(7, 19, 31, 0.62);
    padding: 8px 10px;
    display: grid;
    gap: 5px;
}

.quiz-flow-compact-line {
    margin: 0;
    font-size: 0.91rem;
    line-height: 1.35;
    color: #d5e9f8;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.quiz-flow-compact-line.subtle {
    color: #a6bfd4;
    font-weight: 600;
}

.quiz-flow-table-wrap {
    margin-top: 8px;
}

.quiz-flow-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border: 1px solid rgba(99, 130, 154, 0.38);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(5, 18, 30, 0.58);
}

.quiz-flow-table th,
.quiz-flow-table td {
    border-top: 1px solid rgba(88, 119, 143, 0.28);
    padding: 8px 9px;
    vertical-align: middle;
}

.quiz-flow-table tr:first-child th,
.quiz-flow-table tr:first-child td {
    border-top: 0;
}

.quiz-flow-table th {
    color: #88a6c0;
    font-size: 0.76rem;
    font-weight: 700;
    text-align: left;
    background: rgba(8, 26, 40, 0.72);
    white-space: nowrap;
}

.quiz-flow-table td {
    color: #d4ebfb;
    font-size: 0.86rem;
    font-weight: 700;
}

.quiz-flow-table td#flowBadgeTargetChip {
    color: #b9d2e8;
    font-size: 0.8rem;
    background: rgba(8, 26, 42, 0.66);
}

.quiz-mini-zone {
    display: inline-grid;
    align-items: center;
    gap: 2px;
    min-width: 66px;
    position: relative;
    border: 1px solid rgba(93, 124, 151, 0.4);
    border-radius: 9px;
    padding: 4px 8px 5px;
    background: rgba(7, 22, 36, 0.88);
}

.quiz-mini-zone strong {
    font-family: "Rajdhani", sans-serif;
    font-size: 1rem;
    line-height: 1;
    color: #ebf8ff;
}

.quiz-mini-zone small {
    font-size: 0.66rem;
    color: #89abc4;
    line-height: 1;
}

.quiz-mini-zone[data-zone="mid"] {
    border-color: rgba(46, 211, 223, 0.52);
}

.quiz-mini-zone[data-zone="high"],
.quiz-mini-zone[data-zone="red"] {
    border-color: rgba(248, 109, 95, 0.55);
}

.quiz-mini-needle {
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 2px;
    height: 8px;
    border-radius: 99px;
    background: linear-gradient(180deg, #f96061, #ffa861);
    transform-origin: bottom center;
    opacity: 0.65;
}

.quiz-table-lights {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quiz-flow-table .quiz-cockpit-light {
    font-size: 0.66rem;
    padding: 3px 8px;
}

.quiz-flow-table .quiz-cockpit-light-meaning {
    margin-top: 0;
    margin-bottom: 6px;
}

.quiz-flow-table .quiz-cockpit-alert {
    margin-top: 0;
    font-size: 0.83rem;
    padding: 7px 10px;
}

.quiz-mini-meter .quiz-segment-track {
    margin-top: 0;
}

.quiz-mini-meter-meta {
    margin-top: 6px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}

.quiz-mini-meter-meta span {
    color: #98b5cb;
    font-size: 0.77rem;
    line-height: 1.35;
}

.quiz-mini-meter-meta strong {
    font-family: "Rajdhani", sans-serif;
    font-size: 0.9rem;
}

.quiz-mini-meter-pct {
    color: #e9f8ff;
    font-size: 1rem !important;
}

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

.quiz-mini-xp-donut {
    width: 88px;
    height: 88px;
    position: relative;
    display: grid;
    place-items: center;
}

.quiz-mini-xp-donut .quiz-xp-donut {
    width: 88px;
    height: 88px;
}

.quiz-mini-xp-donut .quiz-xp-donut-track,
.quiz-mini-xp-donut .quiz-xp-donut-fill {
    stroke-width: 12;
}

.quiz-mini-xp-donut .quiz-xp-donut-core strong {
    font-size: 1.06rem;
}

.quiz-mini-xp-donut .quiz-xp-donut-core span {
    font-size: 0.68rem;
}

.quiz-mini-xp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.quiz-mini-xp-head strong {
    color: #d8ecfb;
    font-size: 0.87rem;
    font-weight: 800;
}

.quiz-mini-xp-head span {
    border-radius: 999px;
    border: 1px solid rgba(244, 210, 92, 0.46);
    background: rgba(116, 82, 14, 0.3);
    color: #fff4c2;
    padding: 2px 8px;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.84rem;
}

.quiz-mini-xp-main #flowXPLevelMeta {
    margin-top: 4px;
}

.quiz-mini-xp-main #flowXPRemainHint {
    margin-top: 5px;
}

.quiz-emotion-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.quiz-emotion-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(168, 194, 219, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 30, 46, 0.76);
    font-size: 1.05rem;
    flex: 0 0 34px;
}

.quiz-emotion-head strong {
    display: block;
    font-size: 1rem;
    color: #d8ecfb;
}

.quiz-emotion-head p {
    margin: 4px 0 0;
    color: #96b0c8;
    line-height: 1.55;
}

.quiz-emotion-chips {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quiz-emotion-chip {
    border-radius: 999px;
    border: 1px solid rgba(104, 134, 162, 0.46);
    background: rgba(9, 28, 44, 0.78);
    color: #b6d0e7;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 5px 10px;
}

.quiz-emotion-chip.hot {
    border-color: rgba(255, 175, 88, 0.62);
    background: rgba(88, 46, 18, 0.66);
    color: #ffd8a8;
}

.quiz-emotion-chip.hot i {
    color: #ffb04f;
}

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

.quiz-emotion-meter label {
    display: block;
    color: #95b0c8;
    font-size: 0.82rem;
    margin-bottom: 6px;
    font-weight: 700;
}

.quiz-emotion-meters.meter-mode .quiz-emotion-meter {
    border: 1px solid rgba(104, 134, 162, 0.4);
    border-radius: 12px;
    background: rgba(8, 24, 38, 0.74);
    padding: 10px;
}

.quiz-emotion-meter-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.quiz-emotion-meter-top strong {
    color: #f2fbff;
    font-family: "Rajdhani", sans-serif;
    font-size: 1.3rem;
    line-height: 1;
}

.quiz-segment-track {
    margin-top: 8px;
    position: relative;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(103, 133, 160, 0.38);
    background:
        repeating-linear-gradient(
            90deg,
            rgba(160, 188, 210, 0.2) 0,
            rgba(160, 188, 210, 0.2) 1px,
            transparent 1px,
            transparent 20%
        ),
        rgba(6, 18, 31, 0.9);
    overflow: hidden;
}

.quiz-segment-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    transition: width 0.28s ease;
}

.quiz-segment-fill.ritim {
    background: linear-gradient(90deg, #3edda6, #24b8e4);
}

.quiz-segment-fill.learning {
    background: linear-gradient(90deg, #2f97ff, #3de5ee);
}

.quiz-segment-pointer {
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(7, 17, 28, 0.9);
    transition: left 0.28s ease;
}

.quiz-segment-pointer.ritim {
    background: #7bf0c0;
}

.quiz-segment-pointer.learning {
    background: #6ec2ff;
}

.quiz-segment-labels {
    margin-top: 7px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #8ca9c2;
    font-size: 0.72rem;
    font-weight: 700;
}

.quiz-emotion-meter-foot {
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.quiz-emotion-meter-foot span {
    color: #9db8cd;
    font-size: 0.8rem;
    line-height: 1.35;
}

.quiz-emotion-meter-foot strong {
    min-width: 66px;
    text-align: right;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.92rem;
    line-height: 1;
    letter-spacing: 0.01em;
}

.quiz-emotion-meter-foot strong.up {
    color: #88f1bc;
}

.quiz-emotion-meter-foot strong.down {
    color: #ffb7be;
}

.quiz-emotion-meter-foot strong.neutral {
    color: #9ebad0;
}

.quiz-emotion-xp-progress {
    margin-top: 12px;
    border: 1px solid rgba(108, 135, 160, 0.4);
    border-radius: 12px;
    background: rgba(8, 22, 36, 0.76);
    padding: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
}

.quiz-emotion-xp-donut-wrap {
    width: 110px;
    height: 110px;
    position: relative;
    display: grid;
    place-items: center;
}

.quiz-xp-donut {
    width: 110px;
    height: 110px;
    transform: rotate(-90deg);
}

.quiz-xp-donut-track,
.quiz-xp-donut-fill {
    fill: none;
    stroke-width: 11;
}

.quiz-xp-donut-track {
    stroke: rgba(107, 136, 161, 0.35);
}

.quiz-xp-donut-fill {
    stroke: url(#sparkXpDonutGradient);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease;
}

.quiz-xp-donut-core {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
}

.quiz-xp-donut-core strong {
    color: #ecf8ff;
    font-family: "Rajdhani", sans-serif;
    font-size: 1.22rem;
    line-height: 1;
}

.quiz-xp-donut-core span {
    margin-top: 2px;
    color: #96b3ca;
    font-size: 0.72rem;
}

.quiz-emotion-xp-info {
    min-width: 0;
}

.quiz-emotion-xp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: #a8bfd4;
    font-size: 0.8rem;
}

.quiz-emotion-xp-head strong {
    color: #e8f6ff;
    font-size: 0.88rem;
    font-weight: 800;
}

.quiz-emotion-xp-progress small {
    display: block;
    margin-top: 8px;
    color: #b4cae0;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

.quiz-emotion-xp-goal {
    margin-top: 10px;
    border: 1px solid rgba(105, 134, 160, 0.36);
    border-radius: 10px;
    background: rgba(6, 19, 31, 0.78);
    padding: 9px;
}

.quiz-emotion-xp-goal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.quiz-emotion-xp-goal-head span {
    color: #8eabc3;
    font-size: 0.76rem;
    font-weight: 700;
}

.quiz-emotion-xp-goal-head strong {
    color: #fff4c2;
    border: 1px solid rgba(244, 210, 92, 0.46);
    background: rgba(116, 82, 14, 0.3);
    border-radius: 999px;
    padding: 3px 8px;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}

.quiz-emotion-xp-goal-track {
    margin-top: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(94, 122, 148, 0.36);
    background: rgba(7, 18, 30, 0.92);
    overflow: hidden;
}

.quiz-emotion-xp-goal-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2cc4ff, #ffd75c);
    transition: width 0.3s ease;
}

.quiz-emotion-xp-goal-meta {
    margin-top: 7px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #9bb8ce;
    font-family: "Rajdhani", sans-serif;
    font-size: 0.9rem;
}

.quiz-emotion-xp-goal #flowXPRemainHint {
    margin-top: 5px;
    color: #88a6c0;
}

.quiz-emotion-panel.mastery {
    border-color: rgba(56, 210, 109, 0.56);
    box-shadow: 0 0 0 1px rgba(56, 210, 109, 0.18) inset;
}

.quiz-emotion-panel.momentum {
    border-color: rgba(19, 215, 223, 0.6);
    box-shadow: 0 0 0 1px rgba(19, 215, 223, 0.2) inset;
}

.quiz-emotion-panel.recovery {
    border-color: rgba(95, 181, 255, 0.56);
    box-shadow: 0 0 0 1px rgba(95, 181, 255, 0.18) inset;
}

.quiz-emotion-panel.alert {
    border-color: rgba(248, 95, 99, 0.56);
    box-shadow: 0 0 0 1px rgba(248, 95, 99, 0.16) inset;
}

.quiz-emotion-panel.learn {
    border-color: rgba(229, 156, 58, 0.5);
    box-shadow: 0 0 0 1px rgba(229, 156, 58, 0.16) inset;
}

.quiz-gesture-hint {
    margin: 10px 0 0 auto;
    width: fit-content;
    max-width: min(92%, 540px);
    border-radius: 999px;
    border: 1px solid rgba(111, 143, 170, 0.45);
    background: rgba(7, 24, 39, 0.94);
    color: #c2e2f7;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 9px 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
    transform: translateY(-6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.quiz-gesture-hint.visible {
    opacity: 1;
    transform: translateY(0);
}

.quiz-question-card {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    background: var(--panel);
}

.quiz-question-card h3 {
    margin: 0;
    font-size: clamp(1.9rem, 3.1vw, 2.4rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.1px;
}

.quiz-options {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.quiz-option {
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(7, 18, 30, 0.95);
    color: #d7e9f8;
    padding: 14px 15px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.quiz-option:hover {
    border-color: rgba(19, 215, 223, 0.52);
}

.quiz-option:disabled {
    cursor: not-allowed;
}

.quiz-option .opt-letter {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(19, 215, 223, 0.18);
    color: #8ef6fb;
    font-weight: 700;
    font-size: 1.02rem;
    flex: 0 0 34px;
}

.quiz-option span:last-child {
    font-size: 1.18rem;
    line-height: 1.42;
    font-weight: 600;
}

.quiz-option.selected {
    border-color: rgba(19, 215, 223, 0.65);
    background: rgba(9, 36, 48, 0.82);
}

.quiz-option.dimmed {
    opacity: 0.46;
    filter: saturate(0.7);
}

.quiz-option.correct {
    border-color: rgba(56, 210, 109, 0.65);
    background: rgba(20, 56, 38, 0.65);
}

.quiz-option.wrong {
    border-color: rgba(248, 95, 99, 0.6);
    background: rgba(62, 20, 24, 0.65);
}

.quiz-flow-actions {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.quiz-flow-actions .btn-solid {
    font-size: 1rem;
    padding: 12px 20px;
    min-height: 48px;
    border-radius: 12px;
}

.quiz-flow-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.quiz-feedback {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    background: rgba(9, 23, 38, 0.85);
}

.quiz-feedback.good {
    border-color: rgba(56, 210, 109, 0.56);
    background: linear-gradient(180deg, rgba(23, 69, 49, 0.9), rgba(12, 44, 32, 0.9));
}

.quiz-feedback.bad {
    border-color: rgba(248, 95, 99, 0.56);
}

.quiz-feedback.mood-momentum {
    border-color: rgba(19, 215, 223, 0.58);
}

.quiz-feedback.mood-mastery {
    border-color: rgba(56, 210, 109, 0.58);
}

.quiz-feedback.mood-alert {
    border-color: rgba(248, 95, 99, 0.62);
}

.quiz-feedback.mood-recovery {
    border-color: rgba(96, 173, 255, 0.58);
}

.quiz-feedback h4 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.quiz-feedback h4.good {
    color: #f4fff8;
}

.quiz-feedback h4.bad {
    color: #ff8c90;
}

.quiz-feedback h4 i {
    font-size: 1rem;
}

.quiz-feedback p {
    margin: 0;
    color: #bbd0e3;
    line-height: 1.7;
}

.quiz-feedback.good p,
.quiz-feedback.good strong,
.quiz-feedback.good .quiz-feedback-coach {
    color: #e8f7ef !important;
}

.quiz-feedback.good .quiz-feedback-coach {
    background: rgba(10, 42, 31, 0.72);
    border-color: rgba(126, 224, 163, 0.38);
}

.quiz-feedback-deepdive {
    margin-top: 10px;
    border: 1px solid rgba(232, 131, 121, 0.38);
    border-radius: 12px;
    background: rgba(56, 24, 26, 0.46);
    padding: 10px;
}

.quiz-feedback-deepdive-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #ffd8c9;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

.quiz-feedback-deepdive-item {
    border: 1px solid rgba(230, 150, 141, 0.34);
    border-radius: 9px;
    background: rgba(30, 14, 18, 0.56);
    padding: 7px 8px;
}

.quiz-feedback-deepdive-item span {
    display: block;
    color: #f2baa8;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quiz-feedback-deepdive-item strong {
    display: block;
    margin-top: 3px;
    color: #ffe9df;
    font-size: 0.9rem;
    line-height: 1.35;
}

.quiz-feedback-deepdive-note {
    margin-top: 7px !important;
    color: #ffd7ca !important;
    font-size: 0.88rem;
    line-height: 1.5;
}

.quiz-feedback-deepdive-note strong {
    color: #fff1eb;
}

@media (max-width: 700px) {
    .quiz-feedback-deepdive-grid {
        grid-template-columns: 1fr;
    }
}

.quiz-feedback-coach {
    margin-top: 8px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid rgba(114, 140, 164, 0.46);
    background: rgba(10, 28, 42, 0.76);
    color: #c6ddf1 !important;
    padding: 5px 10px;
    font-size: 0.86rem;
    font-weight: 700;
}

.quiz-feedback.combo {
    animation: feedbackPulse 0.45s ease;
}

.quiz-feedback.caution {
    animation: feedbackShake 0.36s ease;
}

@keyframes feedbackPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.01); }
    100% { transform: scale(1); }
}

@keyframes feedbackShake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.quiz-mini-card {
    margin-top: 12px;
    border: 1px solid rgba(97, 118, 138, 0.4);
    border-radius: 12px;
    padding: 12px;
    background: rgba(6, 17, 28, 0.8);
}

.quiz-mini-card h5 {
    margin: 0;
    font-size: 0.96rem;
    color: #d4edf9;
}

.quiz-mini-card p {
    margin-top: 6px;
    color: #9fb6cb;
    font-size: 0.9rem;
}

.quiz-mini-hint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
    border-radius: 999px;
    border: 1px solid rgba(109, 137, 163, 0.45);
    background: rgba(8, 28, 42, 0.72);
    color: #b5d0e4;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 10px;
    line-height: 1.4;
    width: fit-content;
    max-width: 100%;
}

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

.quiz-mini-actions button {
    border: 1px solid var(--line);
    border-radius: 12px;
    min-height: 48px;
    padding: 10px 14px;
    background: rgba(10, 25, 40, 0.85);
    color: #b8cee1;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.quiz-mini-actions button:hover {
    transform: translateY(-1px);
}

.quiz-mini-actions button[data-card-action="wa"] {
    border-color: rgba(37, 211, 102, 0.6);
    background: rgba(16, 67, 43, 0.62);
    color: #b7f6d3;
}

.quiz-mini-actions button[data-card-action="x"] {
    border-color: rgba(130, 160, 196, 0.55);
    background: rgba(17, 27, 38, 0.78);
    color: #d2e3f5;
}

.quiz-result-compact {
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(8, 19, 33, 0.95), rgba(6, 15, 26, 0.95)),
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.03) 0 6px,
            rgba(0, 0, 0, 0.03) 6px 12px
        );
    padding: 14px;
    margin-top: 18px;
}

.quiz-result-compact-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
}

.quiz-result-badge {
    width: 116px;
    max-width: 28vw;
    filter: drop-shadow(0 0 18px rgba(21, 215, 223, 0.2));
}

.quiz-result-titles {
    min-width: 0;
}

.quiz-result-pack {
    font-size: 0.86rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #93afca;
    margin-bottom: 4px;
}

.quiz-result-titles h2 {
    margin: 0;
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(1.55rem, 3.5vw, 2rem);
    color: #f5c85d;
    line-height: 1.1;
}

.quiz-result-titles p {
    margin: 6px 0 0;
    color: #abc2d7;
    font-size: 0.96rem;
    line-height: 1.45;
}

.quiz-result-score-stack {
    text-align: right;
}

.quiz-score-main {
    font-size: clamp(2.8rem, 7vw, 4rem);
    line-height: 0.95;
    font-family: "Rajdhani", sans-serif;
    color: var(--cyan);
    text-shadow: 0 0 18px rgba(19, 215, 223, 0.22);
}

.quiz-score-sub {
    margin-top: 4px;
    color: #8ca6be;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
}

.quiz-result-kpis {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.quiz-result-kpi {
    border: 1px solid rgba(123, 149, 173, 0.35);
    border-radius: 10px;
    background: rgba(8, 24, 40, 0.62);
    padding: 8px 10px;
    min-width: 0;
}

.quiz-result-kpi span {
    display: block;
    color: #8faac4;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quiz-result-kpi strong {
    display: block;
    margin-top: 3px;
    color: #e7f4ff;
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quiz-result-threshold {
    margin-top: 12px;
}

.quiz-result-threshold-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: #a3bdd4;
    font-size: 0.86rem;
}

.quiz-result-threshold-head strong {
    color: #d2e5f6;
    font-size: 0.9rem;
}

.quiz-result-threshold-track {
    margin-top: 6px;
    height: 9px;
    border-radius: 999px;
    border: 1px solid rgba(99, 123, 146, 0.5);
    background: rgba(4, 15, 25, 0.85);
    overflow: hidden;
}

.quiz-result-threshold-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff7645, #ffc857);
    transition: width 0.28s ease;
}

.quiz-result-threshold-fill.passed {
    background: linear-gradient(90deg, #2dcf78, #52f3a1);
}

.quiz-pack-badge-state {
    margin-top: 12px;
    border: 1px solid rgba(143, 165, 186, 0.36);
    border-radius: 10px;
    padding: 9px 10px;
    color: #c1d6e9;
    background: rgba(10, 24, 38, 0.74);
}

.quiz-pack-badge-state strong {
    display: block;
    font-size: 0.93rem;
    color: #e9f6ff;
    letter-spacing: 0.02em;
}

.quiz-pack-badge-state span {
    display: block;
    margin-top: 4px;
    color: #a3bfd6;
    font-size: 0.84rem;
    line-height: 1.4;
}

.quiz-pack-badge-state.earned {
    border-color: rgba(56, 210, 109, 0.56);
    background: rgba(24, 70, 46, 0.44);
}

.quiz-pack-badge-state.locked {
    border-color: rgba(143, 165, 186, 0.36);
    background: rgba(10, 24, 38, 0.74);
}

.quiz-result-share-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quiz-result-share-actions > button {
    flex: 1 1 220px;
    min-height: 48px;
    border-radius: 12px;
}

.quiz-flow-actions > button,
.quiz-mini-actions > button,
.quiz-result-share-actions > button {
    font-size: 0.98rem;
}

.quiz-hidden-action {
    display: none !important;
}

.quiz-share-preview.result-preview-buffer,
.quiz-levels-card.result-levels-buffer {
    display: none !important;
}

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

.quiz-result-actions > button {
    min-height: 48px;
    border-radius: 12px;
}

@media (max-width: 1100px) {
    .quiz-result-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .quiz-result-compact-head {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .quiz-result-badge {
        margin: 0 auto;
    }

    .quiz-result-score-stack {
        text-align: center;
    }
}

@media (max-width: 680px) {
    .quiz-result-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-result-actions {
        grid-template-columns: 1fr;
    }
}

body.result-active #quizGuidanceText,
body.result-active #quizStageProgress,
body.result-active #quizRecoList,
body.result-active .quiz-personal-actions {
    display: none !important;
}

.quiz-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(16px);
    opacity: 0;
    transition: all 0.25s ease;
    background: rgba(9, 23, 38, 0.96);
    color: #d8edf9;
    border: 1px solid rgba(19, 215, 223, 0.45);
    padding: 10px 14px;
    border-radius: 10px;
    z-index: 60;
    pointer-events: none;
}

.quiz-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.quiz-message-stack {
    position: fixed;
    right: 18px;
    top: 82px;
    z-index: 70;
    width: min(380px, calc(100vw - 24px));
    display: grid;
    gap: 10px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    pointer-events: none;
}

body.flow-active .quiz-message-stack {
    top: 12px;
}

.quiz-message-card {
    border: 1px solid rgba(97, 129, 154, 0.48);
    border-radius: 12px;
    background: rgba(6, 17, 28, 0.94);
    box-shadow: 0 14px 28px rgba(2, 10, 18, 0.52);
    padding: 10px 12px;
    animation: messageIn 0.26s ease both;
    pointer-events: auto;
}

.quiz-message-card.leave {
    animation: messageOut 0.2s ease both;
}

.quiz-message-card strong {
    display: block;
    color: #dcf6ff;
    font-size: 0.95rem;
}

.quiz-message-card p {
    margin: 6px 0 0;
    color: #9ebad1;
    font-size: 0.86rem;
    line-height: 1.45;
}

.quiz-message-card.is-success {
    border-color: rgba(56, 210, 109, 0.55);
}

.quiz-message-card.is-info {
    border-color: rgba(19, 215, 223, 0.55);
}

.quiz-message-actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.quiz-message-actions button {
    border-radius: 999px;
    border: 1px solid rgba(97, 129, 154, 0.46);
    background: rgba(9, 28, 44, 0.78);
    color: #c8deef;
    font-size: 0.79rem;
    font-weight: 700;
    padding: 5px 10px;
    cursor: pointer;
}

.quiz-message-actions button:hover {
    border-color: rgba(19, 215, 223, 0.56);
}

.quiz-message-actions button.dismiss {
    color: #9cb5cb;
}

@keyframes messageIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes messageOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.quiz-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(3, 10, 20, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.quiz-modal-backdrop[style*="display:none"] {
    pointer-events: none;
}

.quiz-modal-card {
    width: min(640px, 100%);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(8, 22, 36, 0.98), rgba(6, 15, 27, 0.98));
    padding: 18px;
    box-shadow: var(--shadow);
}

.quiz-modal-card h3 {
    margin: 0;
    font-size: 1.35rem;
    font-family: "Rajdhani", sans-serif;
}

.quiz-modal-card p {
    margin: 10px 0 0;
    color: #a8bfd3;
    line-height: 1.6;
}

.quiz-modal-card label {
    display: block;
    margin-top: 14px;
    color: #c8dff2;
    font-size: 0.88rem;
    font-weight: 700;
}

.quiz-modal-card input {
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(4, 14, 25, 0.95);
    color: #e5eef8;
    padding: 10px 12px;
    font-size: 0.95rem;
}

.quiz-modal-card input:focus {
    outline: none;
    border-color: rgba(19, 215, 223, 0.52);
}

.quiz-modal-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.quiz-learn-modal-card {
    width: min(760px, 100%);
}

.quiz-learn-list {
    margin-top: 14px;
    max-height: 46vh;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    background: rgba(7, 18, 30, 0.7);
}

.quiz-learn-item {
    border: 1px solid rgba(98, 125, 148, 0.34);
    border-radius: 10px;
    padding: 9px 10px;
    margin-bottom: 8px;
    background: rgba(8, 23, 38, 0.76);
}

.quiz-learn-item:last-child {
    margin-bottom: 0;
}

.quiz-learn-item strong {
    display: block;
    color: #daf0ff;
    font-size: 0.92rem;
    margin-bottom: 4px;
}

.quiz-learn-item p {
    margin: 0;
    color: #9cb6cc;
    font-size: 0.86rem;
    line-height: 1.55;
}

html[data-theme="light"] .quiz-brand-title { color: #2f77f5; }
html[data-theme="light"] .quiz-brand-sub { color: #577396; }
html[data-theme="light"] .quiz-overview-card,
html[data-theme="light"] .quiz-level-progress-card,
html[data-theme="light"] .quiz-personal-summary,
html[data-theme="light"] .quiz-certificate-banner,
html[data-theme="light"] .quiz-auth-card,
html[data-theme="light"] .quiz-pack-card,
html[data-theme="light"] .quiz-question-card,
html[data-theme="light"] .quiz-feedback,
html[data-theme="light"] .quiz-mini-card,
html[data-theme="light"] .quiz-score-card,
html[data-theme="light"] .quiz-levels-card,
html[data-theme="light"] .quiz-share-card {
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 12px 28px rgba(27, 57, 99, 0.09);
}

html[data-theme="light"] .quiz-overview-label,
html[data-theme="light"] .quiz-overview-sub,
html[data-theme="light"] .quiz-pack-card p,
html[data-theme="light"] .quiz-pack-meta,
html[data-theme="light"] .quiz-pack-result,
html[data-theme="light"] .quiz-auth-card p,
html[data-theme="light"] .quiz-progress-text,
html[data-theme="light"] .quiz-feedback p,
html[data-theme="light"] .quiz-mini-card p,
html[data-theme="light"] .quiz-level-desc,
html[data-theme="light"] .quiz-score-sub,
html[data-theme="light"] .quiz-result-head p,
html[data-theme="light"] .quiz-score-stats span,
html[data-theme="light"] .quiz-share-title,
html[data-theme="light"] .quiz-certificate-text span,
html[data-theme="light"] .quiz-profile-line,
html[data-theme="light"] .quiz-personal-summary p {
    color: #587494;
}

html[data-theme="light"] .quiz-overview-value,
html[data-theme="light"] .quiz-level-progress-row strong,
html[data-theme="light"] .quiz-pack-score strong,
html[data-theme="light"] .quiz-score-stats strong,
html[data-theme="light"] .quiz-level-title,
html[data-theme="light"] .quiz-question-card h3 {
    color: #143454;
}

html[data-theme="light"] .quiz-tag { color: #2f77f5; }
html[data-theme="light"] .quiz-level-progress-pill {
    background: rgba(47, 119, 245, 0.1);
    color: #2f5da7;
}
html[data-theme="light"] .quiz-level-progress-track,
html[data-theme="light"] .quiz-progress-track {
    background: #eaf1ff;
}

html[data-theme="light"] .quiz-auth-tab,
html[data-theme="light"] .quiz-provider-btn,
html[data-theme="light"] .quiz-category-tab,
html[data-theme="light"] .quiz-user-chip,
html[data-theme="light"] .quiz-option,
html[data-theme="light"] .quiz-mini-actions button,
html[data-theme="light"] .quiz-share-preview {
    background: #f5f9ff;
    color: #2d4f72;
}

html[data-theme="light"] .quiz-option.selected {
    background: rgba(47, 119, 245, 0.14);
}
html[data-theme="light"] .quiz-option.correct {
    background: rgba(47, 143, 99, 0.18);
}
html[data-theme="light"] .quiz-option.wrong {
    background: rgba(216, 79, 100, 0.16);
}

html[data-theme="light"] .quiz-result-head h2 {
    color: #d63d8f;
}

html[data-theme="light"] .quiz-toast {
    background: #ffffff;
    color: #2d4f6b;
}

html[data-theme="light"] .quiz-personal-metric {
    color: #3f5f86;
    background: #f1f6ff;
    border-color: rgba(83, 114, 161, 0.34);
}

html[data-theme="light"] .quiz-reco-chip {
    color: #a2387a;
    background: rgba(214, 61, 143, 0.09);
    border-color: rgba(214, 61, 143, 0.28);
}

html[data-theme="light"] .quiz-difficulty-badge.beginner {
    color: #2f6dca;
    background: rgba(47, 119, 245, 0.1);
    border-color: rgba(47, 119, 245, 0.35);
}

html[data-theme="light"] .quiz-difficulty-badge.intermediate {
    color: #6a4dd6;
    background: rgba(111, 93, 246, 0.12);
    border-color: rgba(111, 93, 246, 0.35);
}

html[data-theme="light"] .quiz-difficulty-badge.advanced {
    color: #b6387a;
    background: rgba(214, 61, 143, 0.12);
    border-color: rgba(214, 61, 143, 0.35);
}

html[data-theme="light"] .quiz-level-active-pill {
    border-color: rgba(47, 119, 245, 0.35);
    background: rgba(47, 119, 245, 0.1);
    color: #315f9f;
}

/* Light Mode Readability Fixes */
html[data-theme="light"] .quiz-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    border-color: rgba(83, 114, 161, 0.34);
}

html[data-theme="light"] .quiz-hero h1 {
    color: #12385e;
}

html[data-theme="light"] .quiz-hero p {
    color: #4c6c8f;
}

html[data-theme="light"] .quiz-overview-card {
    background: #ffffff;
    border-color: rgba(83, 114, 161, 0.3);
}

html[data-theme="light"] .quiz-overview-value {
    color: #153d65;
}

html[data-theme="light"] .quiz-personal-head h3 {
    color: #1d4a77;
}

html[data-theme="light"] .quiz-pack-title,
html[data-theme="light"] .quiz-pack-score strong {
    color: #163b61;
}

html[data-theme="light"] .quiz-pack-score,
html[data-theme="light"] .quiz-progress-text {
    color: #4c6d8f;
}

html[data-theme="light"] .quiz-question-card h3 {
    color: #143a60;
}

html[data-theme="light"] .quiz-option {
    background: #ffffff;
    color: #1b426a;
    border-color: rgba(83, 114, 161, 0.34);
}

html[data-theme="light"] .quiz-option:hover {
    border-color: rgba(47, 119, 245, 0.52);
    background: #f6f9ff;
}

html[data-theme="light"] .quiz-option .opt-letter {
    background: rgba(47, 119, 245, 0.14);
    color: #2f6fcf;
}

html[data-theme="light"] .quiz-option.selected {
    background: rgba(47, 119, 245, 0.12);
    border-color: rgba(47, 119, 245, 0.54);
    color: #123b63;
}

html[data-theme="light"] .quiz-option.correct {
    background: rgba(47, 143, 99, 0.18);
    border-color: rgba(47, 143, 99, 0.5);
    color: #1f5d45;
}

html[data-theme="light"] .quiz-option.wrong {
    background: rgba(216, 79, 100, 0.16);
    border-color: rgba(216, 79, 100, 0.48);
    color: #7b2739;
}

/* Light Mode High Contrast Patch (v2) */
html[data-theme="light"] body {
    background:
        radial-gradient(860px 500px at 10% -6%, rgba(47, 111, 243, 0.08), transparent 62%),
        radial-gradient(920px 500px at 100% 4%, rgba(0, 169, 201, 0.08), transparent 66%),
        linear-gradient(180deg, #f6f9ff 0%, #edf3fb 100%);
    color: #132c4a;
}

html[data-theme="light"] .quiz-header {
    background: rgba(247, 251, 255, 0.95);
    border-bottom-color: rgba(57, 89, 132, 0.2);
}

html[data-theme="light"] .quiz-brand-title {
    color: #2d67d8;
}

html[data-theme="light"] .quiz-brand-sub {
    color: #3e5f86;
}

html[data-theme="light"] .quiz-link-btn,
html[data-theme="light"] .btn-outline {
    background: #ffffff;
    color: #1d3f6b;
    border-color: rgba(73, 108, 154, 0.3);
}

html[data-theme="light"] .quiz-link-btn:hover,
html[data-theme="light"] .btn-outline:hover {
    background: #f3f7ff;
    color: #15365c;
    border-color: rgba(47, 111, 243, 0.45);
}

html[data-theme="light"] .btn-solid {
    background: linear-gradient(135deg, #2f6ff3, #0f9ec7);
    color: #ffffff;
}

html[data-theme="light"] .quiz-auto-ring {
    background: conic-gradient(#ffffff var(--auto-progress, 0%), rgba(255, 255, 255, 0.44) 0);
}

html[data-theme="light"] .quiz-auto-ring > span {
    background: rgba(17, 77, 163, 0.86);
    color: #f4fbff;
}

html[data-theme="light"] .quiz-main .quiz-hero {
    background: linear-gradient(180deg, #fdfefe 0%, #f2f7ff 100%) !important;
    border-color: rgba(79, 112, 153, 0.32) !important;
    box-shadow: 0 14px 36px rgba(20, 46, 84, 0.12);
}

html[data-theme="light"] .quiz-main .quiz-hero h1 {
    color: #102b4a;
}

html[data-theme="light"] .quiz-main .quiz-hero p {
    color: #3f6289;
}

html[data-theme="light"] .quiz-main .quiz-tag {
    color: #2b6ff3;
}

html[data-theme="light"] .quiz-overview-card {
    background: #ffffff;
    border-color: rgba(79, 112, 153, 0.28);
}

html[data-theme="light"] .quiz-overview-label {
    color: #47658d;
}

html[data-theme="light"] .quiz-overview-value {
    color: #102f52;
}

html[data-theme="light"] .quiz-overview-sub {
    color: #57759a;
}

html[data-theme="light"] .quiz-level-progress-card,
html[data-theme="light"] .quiz-personal-summary,
html[data-theme="light"] .quiz-certificate-banner {
    border-color: rgba(79, 112, 153, 0.3);
}

html[data-theme="light"] .quiz-level-progress-row strong,
html[data-theme="light"] .quiz-personal-head h3,
html[data-theme="light"] .quiz-pack-title,
html[data-theme="light"] .quiz-question-card h3 {
    color: #102f52;
}

html[data-theme="light"] .quiz-level-progress-row p,
html[data-theme="light"] .quiz-level-progress-help,
html[data-theme="light"] .quiz-profile-line,
html[data-theme="light"] .quiz-personal-summary p,
html[data-theme="light"] .quiz-progress-text,
html[data-theme="light"] .quiz-pack-score,
html[data-theme="light"] .quiz-pack-meta,
html[data-theme="light"] .quiz-pack-result {
    color: #49698f;
}

html[data-theme="light"] .quiz-level-progress-pill,
html[data-theme="light"] .quiz-personal-metric {
    background: #edf4ff;
    border-color: rgba(79, 112, 153, 0.34);
    color: #2b568d;
}

html[data-theme="light"] .quiz-achievement-board,
html[data-theme="light"] .quiz-achievement-compact-item,
html[data-theme="light"] .quiz-achievement-card,
html[data-theme="light"] .quiz-level-badge-item {
    border-color: rgba(79, 112, 153, 0.3);
    background: #f8fbff;
}

html[data-theme="light"] .quiz-achievement-head strong,
html[data-theme="light"] .quiz-achievement-value,
html[data-theme="light"] .quiz-level-badge-item .title {
    color: #13385d;
}

html[data-theme="light"] .quiz-achievement-head-sub,
html[data-theme="light"] .quiz-achievement-detail summary {
    color: #56789d;
}

html[data-theme="light"] .quiz-achievement-label,
html[data-theme="light"] .quiz-achievement-sub,
html[data-theme="light"] .quiz-level-badge-item .meta {
    color: #4d6e92;
}

html[data-theme="light"] .quiz-achievement-pill {
    border-color: rgba(79, 112, 153, 0.34);
    background: #eef5ff;
    color: #3f6087;
}

html[data-theme="light"] .quiz-achievement-pill.earned {
    border-color: rgba(47, 143, 99, 0.45);
    background: #e8f8ee;
    color: #276246;
}

html[data-theme="light"] .quiz-level-badge-item .state {
    border-color: rgba(79, 112, 153, 0.3);
    background: #edf5ff;
    color: #486a93;
}

html[data-theme="light"] .quiz-level-badge-item .state.earned {
    border-color: rgba(47, 143, 99, 0.43);
    background: #e8f8ee;
    color: #276246;
}

html[data-theme="light"] .quiz-achievement-detail {
    border-top-color: rgba(79, 112, 153, 0.26);
}

html[data-theme="light"] .quiz-reco-chip {
    color: #5a3ca8;
    background: rgba(107, 86, 210, 0.12);
    border-color: rgba(107, 86, 210, 0.32);
}

html[data-theme="light"] .quiz-auth-card,
html[data-theme="light"] .quiz-pack-card,
html[data-theme="light"] .quiz-question-card,
html[data-theme="light"] .quiz-feedback,
html[data-theme="light"] .quiz-mini-card,
html[data-theme="light"] .quiz-score-card,
html[data-theme="light"] .quiz-levels-card,
html[data-theme="light"] .quiz-share-card {
    border-color: rgba(79, 112, 153, 0.26);
}

html[data-theme="light"] .quiz-auth-tab,
html[data-theme="light"] .quiz-provider-btn,
html[data-theme="light"] .quiz-category-tab,
html[data-theme="light"] .quiz-user-chip,
html[data-theme="light"] .quiz-mini-actions button {
    background: #f5f9ff;
    color: #23466f;
    border-color: rgba(79, 112, 153, 0.3);
}

html[data-theme="light"] .quiz-pack-reward-pill {
    border-color: rgba(79, 112, 153, 0.32);
    background: #eef5ff;
    color: #48698f;
}

html[data-theme="light"] .quiz-pack-reward-pill.earned {
    border-color: rgba(47, 143, 99, 0.45);
    background: #e8f8ee;
    color: #286548;
}

html[data-theme="light"] .quiz-pack-badge-state {
    border-color: rgba(79, 112, 153, 0.3);
    background: #f0f6ff;
    color: #406185;
}

html[data-theme="light"] .quiz-pack-badge-state.earned {
    border-color: rgba(47, 143, 99, 0.45);
    background: #e8f8ee;
    color: #286548;
}

html[data-theme="light"] .quiz-mini-hint {
    background: #edf4ff;
    border-color: rgba(79, 112, 153, 0.36);
    color: #355983;
}

html[data-theme="light"] .quiz-mini-actions button[data-card-action="wa"] {
    background: #e9f9ef;
    border-color: rgba(37, 211, 102, 0.4);
    color: #1f7a49;
}

html[data-theme="light"] .quiz-mini-actions button[data-card-action="x"] {
    background: #eef2f8;
    border-color: rgba(92, 119, 152, 0.42);
    color: #264766;
}

html[data-theme="light"] .quiz-auth-tab.active,
html[data-theme="light"] .quiz-category-tab.active {
    background: rgba(47, 111, 243, 0.14);
    color: #1e4f8c;
    border-color: rgba(47, 111, 243, 0.45);
}

html[data-theme="light"] .quiz-auth-form label {
    color: #3f6088;
}

html[data-theme="light"] .quiz-auth-form input {
    background: #ffffff;
    color: #113152;
    border-color: rgba(79, 112, 153, 0.32);
}

html[data-theme="light"] .quiz-auth-form input:focus {
    border-color: rgba(47, 111, 243, 0.56);
}

html[data-theme="light"] .quiz-option {
    background: #f9fbff;
    color: #123658;
    border-color: rgba(79, 112, 153, 0.32);
}

html[data-theme="light"] .quiz-option:hover {
    background: #f2f7ff;
    border-color: rgba(47, 111, 243, 0.5);
}

html[data-theme="light"] .quiz-option .opt-letter {
    background: #dde9ff;
    color: #2454b5;
}

html[data-theme="light"] .quiz-option.selected {
    background: #e6efff;
    border-color: rgba(47, 111, 243, 0.55);
    color: #103457;
}

html[data-theme="light"] .quiz-option.correct {
    background: #e7f7ee;
    border-color: rgba(47, 143, 99, 0.54);
    color: #1f5c43;
}

html[data-theme="light"] .quiz-option.wrong {
    background: #fdeef1;
    border-color: rgba(216, 79, 100, 0.5);
    color: #7a2638;
}

html[data-theme="light"] .quiz-emotion-panel {
    background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
    border-color: rgba(79, 112, 153, 0.3);
}

html[data-theme="light"] .quiz-emotion-head strong {
    color: #14375c;
}

html[data-theme="light"] .quiz-emotion-head p,
html[data-theme="light"] .quiz-emotion-meter label {
    color: #4a6a8f;
}

html[data-theme="light"] .quiz-emotion-icon {
    background: #eaf3ff;
    border-color: rgba(79, 112, 153, 0.35);
}

html[data-theme="light"] .quiz-emotion-chip {
    background: #edf4ff;
    color: #2f5688;
    border-color: rgba(79, 112, 153, 0.34);
}

html[data-theme="light"] .quiz-flow-table {
    border-color: rgba(79, 112, 153, 0.3);
    background: #f7faff;
}

html[data-theme="light"] .quiz-flow-table th {
    background: #edf4ff;
    color: #4d7098;
}

html[data-theme="light"] .quiz-flow-table td {
    color: #1e466f;
}

html[data-theme="light"] .quiz-flow-table th,
html[data-theme="light"] .quiz-flow-table td {
    border-top-color: rgba(79, 112, 153, 0.24);
}

html[data-theme="light"] .quiz-flow-table td#flowBadgeTargetChip {
    background: #edf4ff;
    color: #44698f;
}

html[data-theme="light"] .quiz-mini-zone {
    border-color: rgba(79, 112, 153, 0.32);
    background: #edf4ff;
}

html[data-theme="light"] .quiz-mini-zone strong {
    color: #123c66;
}

html[data-theme="light"] .quiz-mini-zone small {
    color: #54789f;
}

html[data-theme="light"] .quiz-flow-table .quiz-cockpit-alert {
    background: #edf4ff;
    border-color: rgba(79, 112, 153, 0.34);
    color: #345a85;
}

html[data-theme="light"] .quiz-flow-compact-lines {
    border-color: rgba(138, 171, 203, 0.72);
    background: rgba(233, 244, 255, 0.92);
}

html[data-theme="light"] .quiz-flow-compact-line {
    color: #1f4468;
}

html[data-theme="light"] .quiz-flow-compact-line.subtle {
    color: #4b6d90;
}

html[data-theme="light"] .quiz-mini-meter-meta span {
    color: #56799f;
}

html[data-theme="light"] .quiz-mini-meter-pct {
    color: #1b466f;
}

html[data-theme="light"] .quiz-mini-xp-head strong {
    color: #173f69;
}

html[data-theme="light"] .quiz-mini-xp-head span {
    color: #7f5d0d;
    border-color: rgba(225, 180, 42, 0.46);
    background: #fff4d9;
}

html[data-theme="light"] .quiz-emotion-panel.mastery {
    border-color: rgba(47, 143, 99, 0.46);
    box-shadow: 0 0 0 1px rgba(47, 143, 99, 0.15) inset;
}

html[data-theme="light"] .quiz-emotion-panel.momentum {
    border-color: rgba(47, 111, 243, 0.44);
    box-shadow: 0 0 0 1px rgba(47, 111, 243, 0.16) inset;
}

html[data-theme="light"] .quiz-emotion-panel.recovery {
    border-color: rgba(76, 140, 231, 0.44);
    box-shadow: 0 0 0 1px rgba(76, 140, 231, 0.15) inset;
}

html[data-theme="light"] .quiz-emotion-panel.alert {
    border-color: rgba(216, 79, 100, 0.44);
    box-shadow: 0 0 0 1px rgba(216, 79, 100, 0.14) inset;
}

html[data-theme="light"] .quiz-emotion-panel.learn {
    border-color: rgba(214, 61, 143, 0.42);
    box-shadow: 0 0 0 1px rgba(214, 61, 143, 0.13) inset;
}

html[data-theme="light"] .quiz-gesture-hint {
    background: #edf4ff;
    border-color: rgba(79, 112, 153, 0.36);
    color: #355c88;
}

html[data-theme="light"] .quiz-flow-global-progress {
    background: #f6faff;
    border-color: rgba(79, 112, 153, 0.32);
}

html[data-theme="light"] .quiz-flow-global-head {
    color: #4a6c92;
}

html[data-theme="light"] .quiz-flow-global-head strong {
    color: #143a62;
}

html[data-theme="light"] .quiz-flow-global-track {
    background: #edf4ff;
    border-color: rgba(79, 112, 153, 0.28);
}

html[data-theme="light"] .quiz-option.dimmed {
    opacity: 0.52;
}

html[data-theme="light"] .quiz-emotion-chip.hot {
    border-color: rgba(239, 142, 28, 0.48);
    background: #fff3e3;
    color: #9b5b10;
}

html[data-theme="light"] .quiz-emotion-xp-progress {
    background: #f5f9ff;
    border-color: rgba(79, 112, 153, 0.3);
}

html[data-theme="light"] .quiz-emotion-meters.meter-mode .quiz-emotion-meter {
    background: #f7faff;
    border-color: rgba(79, 112, 153, 0.3);
}

html[data-theme="light"] .quiz-segment-track {
    border-color: rgba(79, 112, 153, 0.32);
    background:
        repeating-linear-gradient(
            90deg,
            rgba(79, 112, 153, 0.22) 0,
            rgba(79, 112, 153, 0.22) 1px,
            transparent 1px,
            transparent 20%
        ),
        #edf4ff;
}

html[data-theme="light"] .quiz-segment-pointer {
    border-color: #ffffff;
    box-shadow: 0 0 0 3px #edf4ff;
}

html[data-theme="light"] .quiz-emotion-meter-top strong {
    color: #153c64;
}

html[data-theme="light"] .quiz-emotion-meter-foot span,
html[data-theme="light"] .quiz-segment-labels {
    color: #55789f;
}

html[data-theme="light"] .quiz-xp-donut-track {
    stroke: rgba(79, 112, 153, 0.3);
}

html[data-theme="light"] .quiz-xp-donut-core strong {
    color: #18416b;
}

html[data-theme="light"] .quiz-xp-donut-core span {
    color: #5a7ea5;
}

html[data-theme="light"] .quiz-emotion-xp-head {
    color: #4a6d95;
}

html[data-theme="light"] .quiz-emotion-xp-head strong {
    color: #1a426f;
}

html[data-theme="light"] .quiz-emotion-xp-progress small {
    color: #52759d;
}

html[data-theme="light"] .quiz-emotion-xp-goal {
    border-color: rgba(79, 112, 153, 0.3);
    background: #edf4ff;
}

html[data-theme="light"] .quiz-emotion-xp-goal-head span {
    color: #4c6f95;
}

html[data-theme="light"] .quiz-emotion-xp-goal-head strong {
    color: #7f5d0d;
    border-color: rgba(225, 180, 42, 0.46);
    background: #fff4d9;
}

html[data-theme="light"] .quiz-emotion-xp-goal-track {
    border-color: rgba(79, 112, 153, 0.26);
    background: #e5eefc;
}

html[data-theme="light"] .quiz-emotion-xp-goal-meta,
html[data-theme="light"] .quiz-emotion-xp-goal #flowXPRemainHint {
    color: #54779e;
}

html[data-theme="light"] .quiz-feedback-coach {
    background: #edf4ff;
    border-color: rgba(79, 112, 153, 0.34);
    color: #345a85 !important;
}

html[data-theme="light"] .quiz-feedback-deepdive {
    border-color: rgba(220, 122, 110, 0.36);
    background: rgba(255, 239, 236, 0.72);
}

html[data-theme="light"] .quiz-feedback-deepdive-title {
    color: #ad3f33;
}

html[data-theme="light"] .quiz-feedback-deepdive-item {
    border-color: rgba(220, 122, 110, 0.3);
    background: rgba(255, 255, 255, 0.86);
}

html[data-theme="light"] .quiz-feedback-deepdive-item span {
    color: #b36659;
}

html[data-theme="light"] .quiz-feedback-deepdive-item strong,
html[data-theme="light"] .quiz-feedback-deepdive-note,
html[data-theme="light"] .quiz-feedback-deepdive-note strong {
    color: #6a3b34 !important;
}

html[data-theme="light"] .quiz-feedback.mood-momentum {
    border-color: rgba(47, 111, 243, 0.5);
}

html[data-theme="light"] .quiz-feedback.mood-mastery {
    border-color: rgba(47, 143, 99, 0.52);
}

html[data-theme="light"] .quiz-feedback.mood-alert {
    border-color: rgba(216, 79, 100, 0.5);
}

html[data-theme="light"] .quiz-feedback.mood-recovery {
    border-color: rgba(76, 140, 231, 0.5);
}

html[data-theme="light"] .quiz-feedback.good {
    background: linear-gradient(180deg, #e8f8ef 0%, #def5e8 100%);
}

html[data-theme="light"] .quiz-feedback.good h4.good,
html[data-theme="light"] .quiz-feedback.good p,
html[data-theme="light"] .quiz-feedback.good strong {
    color: #1f5f42 !important;
}

html[data-theme="light"] .quiz-feedback.good .quiz-feedback-coach {
    background: #ebf9f1;
    border-color: rgba(47, 143, 99, 0.36);
    color: #276447 !important;
}

html[data-theme="light"] .quiz-pack-badge-extra {
    border-top-color: rgba(79, 112, 153, 0.3);
    color: #3f638d;
}

html[data-theme="light"] .quiz-score-main {
    color: #1e63d7;
}

html[data-theme="light"] .quiz-score-sub,
html[data-theme="light"] .quiz-score-stats span,
html[data-theme="light"] .quiz-level-desc,
html[data-theme="light"] .quiz-result-head p,
html[data-theme="light"] .quiz-share-title {
    color: #49688e;
}

html[data-theme="light"] .quiz-score-stats strong,
html[data-theme="light"] .quiz-level-title,
html[data-theme="light"] .quiz-pack-score strong {
    color: #103254;
}

html[data-theme="light"] .quiz-level-item {
    border-color: rgba(79, 112, 153, 0.28);
}

html[data-theme="light"] .quiz-level-item.active {
    background: rgba(47, 111, 243, 0.09);
    border-color: rgba(47, 111, 243, 0.42);
}

html[data-theme="light"] .quiz-level-range {
    border-color: rgba(79, 112, 153, 0.32);
    color: #3f6088;
}

html[data-theme="light"] .quiz-level-active-pill {
    background: rgba(47, 111, 243, 0.12);
    border-color: rgba(47, 111, 243, 0.38);
    color: #255290;
}

html[data-theme="light"] .quiz-share-preview {
    background: #f5f8ff;
    border-color: rgba(79, 112, 153, 0.32);
}

html[data-theme="light"] .quiz-toast {
    background: #ffffff;
    border-color: rgba(47, 111, 243, 0.4);
    color: #1e416b;
}

.quiz-pack-empty {
    color: #8ea3b7;
}

.quiz-category-tab.locked {
    opacity: 0.62;
    cursor: not-allowed;
    border-style: dashed;
}

.quiz-category-tab.locked i {
    font-size: 0.74rem;
}

.quiz-stage-progress {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.quiz-stage-item {
    border: 1px solid rgba(99, 123, 145, 0.36);
    border-radius: 10px;
    background: rgba(8, 25, 40, 0.66);
    padding: 8px 10px;
}

.quiz-stage-item.done {
    border-color: rgba(56, 210, 109, 0.52);
    background: rgba(21, 62, 40, 0.48);
}

.quiz-stage-item.active {
    border-color: rgba(19, 215, 223, 0.52);
}

.quiz-stage-item.locked {
    border-color: rgba(129, 145, 163, 0.32);
    opacity: 0.84;
}

.quiz-stage-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.quiz-stage-top strong {
    color: #d2e9fb;
    font-size: 0.88rem;
}

.quiz-stage-top span {
    color: #96aec4;
    font-size: 0.8rem;
    font-weight: 700;
}

.quiz-stage-track {
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(96, 121, 144, 0.35);
    background: rgba(8, 20, 33, 0.9);
    overflow: hidden;
}

.quiz-stage-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--progress-a), var(--progress-b));
    transition: width 0.3s ease;
}

button.quiz-reco-chip {
    appearance: none;
    -webkit-appearance: none;
}

.quiz-reco-chip.is-locked {
    opacity: 0.72;
    border-style: dashed;
}

.quiz-feedback-stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 76px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(124, 145, 167, 0.46);
    background: rgba(10, 28, 44, 0.8);
    color: #cde4f7;
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 8px;
    animation: stampPop 0.28s ease;
}

.quiz-feedback-stamp i {
    font-size: 0.92rem;
}

.quiz-feedback-stamp.good {
    border-color: rgba(56, 210, 109, 0.55);
    background: rgba(24, 70, 46, 0.55);
    color: #97f2b6;
}

.quiz-feedback-stamp.bad {
    border-color: rgba(248, 95, 99, 0.56);
    background: rgba(70, 22, 30, 0.55);
    color: #ffb8be;
}

@keyframes stampPop {
    0% { transform: scale(0.86); opacity: 0; }
    70% { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

html[data-theme="light"] .btn-outline.btn-danger {
    background: #fff2f4 !important;
    border-color: rgba(216, 79, 100, 0.42) !important;
    color: #a63d52 !important;
}

html[data-theme="light"] .btn-outline.btn-danger:hover {
    background: #ffe8ee !important;
    border-color: rgba(216, 79, 100, 0.56) !important;
    color: #923247 !important;
}

html[data-theme="light"] .quiz-pack-empty {
    color: #547393;
}

html[data-theme="light"] .quiz-category-tab.locked {
    background: #f4f7fc;
    color: #8199b1;
    border-color: rgba(102, 126, 153, 0.34);
}

html[data-theme="light"] .quiz-pack-card.locked {
    background: linear-gradient(180deg, #f8faff 0%, #f1f5fb 100%);
    border-color: rgba(102, 126, 153, 0.24);
    opacity: 1;
}

html[data-theme="light"] .quiz-pack-card.locked h3,
html[data-theme="light"] .quiz-pack-card.locked p {
    color: #5f7895;
}

html[data-theme="light"] .quiz-pack-lock-note {
    background: #fff1f4;
    border-color: rgba(216, 79, 100, 0.34);
    color: #8d3b4d;
}

html[data-theme="light"] .quiz-stage-item {
    background: #f6faff;
    border-color: rgba(79, 112, 153, 0.3);
}

html[data-theme="light"] .quiz-stage-item.done {
    background: #e9f8ef;
    border-color: rgba(47, 143, 99, 0.42);
}

html[data-theme="light"] .quiz-stage-item.active {
    border-color: rgba(47, 111, 243, 0.4);
}

html[data-theme="light"] .quiz-stage-item.locked {
    border-color: rgba(102, 126, 153, 0.28);
    opacity: 0.92;
}

html[data-theme="light"] .quiz-stage-top strong {
    color: #15395f;
}

html[data-theme="light"] .quiz-stage-top span {
    color: #4d6f95;
}

html[data-theme="light"] .quiz-stage-track {
    background: #eaf2ff;
    border-color: rgba(79, 112, 153, 0.3);
}

html[data-theme="light"] .quiz-reco-chip.is-locked {
    color: #7e679f;
    background: rgba(111, 93, 246, 0.08);
    border-color: rgba(111, 93, 246, 0.24);
}

html[data-theme="light"] .quiz-feedback-stamp {
    background: #eff5ff;
    border-color: rgba(79, 112, 153, 0.34);
    color: #325680;
}

html[data-theme="light"] .quiz-feedback-stamp.good {
    background: #e7f7ee;
    border-color: rgba(47, 143, 99, 0.45);
    color: #256145;
}

html[data-theme="light"] .quiz-feedback-stamp.bad {
    background: #fdeef2;
    border-color: rgba(216, 79, 100, 0.44);
    color: #8d3145;
}

html[data-theme="light"] .quiz-modal-backdrop {
    background: rgba(21, 40, 64, 0.34);
}

html[data-theme="light"] .quiz-modal-card {
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    border-color: rgba(79, 112, 153, 0.34);
}

html[data-theme="light"] .quiz-modal-card h3 {
    color: #12365a;
}

html[data-theme="light"] .quiz-modal-card p {
    color: #45678d;
}

html[data-theme="light"] .quiz-modal-card label {
    color: #345a84;
}

html[data-theme="light"] .quiz-modal-card input {
    background: #ffffff;
    border-color: rgba(79, 112, 153, 0.34);
    color: #12365b;
}

html[data-theme="light"] .quiz-modal-card input:focus {
    border-color: rgba(47, 111, 243, 0.56);
}

html[data-theme="light"] .quiz-learn-list {
    background: #f4f8ff;
    border-color: rgba(79, 112, 153, 0.3);
}

html[data-theme="light"] .quiz-learn-item {
    background: #ffffff;
    border-color: rgba(79, 112, 153, 0.3);
}

html[data-theme="light"] .quiz-learn-item strong {
    color: #15395f;
}

html[data-theme="light"] .quiz-learn-item p {
    color: #4a6b90;
}

html[data-theme="light"] .quiz-radar-core-panel,
html[data-theme="light"] .quiz-radar-trend-panel,
html[data-theme="light"] .quiz-stage-dashboard-card,
html[data-theme="light"] .quiz-cockpit-strip-card,
html[data-theme="light"] .quiz-howitworks-card,
html[data-theme="light"] .quiz-cockpit-cluster {
    border-color: rgba(79, 112, 153, 0.3);
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

html[data-theme="light"] .quiz-radar-core-panel::before,
html[data-theme="light"] .quiz-radar-trend-panel::before,
html[data-theme="light"] .quiz-stage-dashboard-card::before,
html[data-theme="light"] .quiz-overview-card::after,
html[data-theme="light"] .quiz-cockpit-cluster::before {
    background: linear-gradient(150deg, rgba(47, 119, 245, 0.1), transparent 55%);
}

html[data-theme="light"] .quiz-radar-core-tag {
    border-color: rgba(47, 119, 245, 0.35);
    color: #2b6fe9;
    background: rgba(47, 119, 245, 0.08);
}

html[data-theme="light"] .quiz-radar-core-meta,
html[data-theme="light"] .quiz-radar-kpi span,
html[data-theme="light"] .quiz-radar-chart-head span,
html[data-theme="light"] .quiz-trend-empty,
html[data-theme="light"] .quiz-trend-bar span,
html[data-theme="light"] .quiz-stage-column .meta,
html[data-theme="light"] .quiz-howitworks-step p,
html[data-theme="light"] .quiz-stage-capsule,
html[data-theme="light"] .quiz-cockpit-center span,
html[data-theme="light"] .quiz-cockpit-hud-row span,
html[data-theme="light"] .quiz-cockpit-light {
    color: #547395;
}

html[data-theme="light"] .quiz-radar-kpi,
html[data-theme="light"] .quiz-trend-bar,
html[data-theme="light"] .quiz-stage-column,
html[data-theme="light"] .quiz-overview-card,
html[data-theme="light"] .quiz-howitworks-step,
html[data-theme="light"] .quiz-cockpit-dial,
html[data-theme="light"] .quiz-cockpit-hud,
html[data-theme="light"] .quiz-cockpit-hud-row,
html[data-theme="light"] .quiz-stage-capsule {
    border-color: rgba(79, 112, 153, 0.28);
    background: #ffffff;
}

html[data-theme="light"] .quiz-radar-chart-head strong,
html[data-theme="light"] .quiz-radar-kpi strong,
html[data-theme="light"] .quiz-stage-column .name,
html[data-theme="light"] .quiz-trend-bar strong,
html[data-theme="light"] .quiz-overview-value,
html[data-theme="light"] .quiz-howitworks-step strong,
html[data-theme="light"] .quiz-cockpit-center strong,
html[data-theme="light"] .quiz-cockpit-hud-row strong,
html[data-theme="light"] .quiz-stage-capsule strong {
    color: #12375d;
}

html[data-theme="light"] .quiz-radar-ring {
    background:
        conic-gradient(from -90deg, #2f77f5 calc(var(--radar-pct) * 1%), rgba(225, 236, 251, 0.96) 0),
        radial-gradient(circle at 30% 20%, rgba(47, 119, 245, 0.18), transparent 58%);
    border-color: rgba(79, 112, 153, 0.32);
    box-shadow:
        inset 0 0 0 14px rgba(244, 249, 255, 0.98),
        0 12px 24px rgba(24, 52, 89, 0.12);
}

html[data-theme="light"] .quiz-radar-ring::before {
    border-color: rgba(79, 112, 153, 0.35);
    background: radial-gradient(circle at center, rgba(47, 119, 245, 0.15), transparent 64%);
}

html[data-theme="light"] .quiz-radar-ring::after,
html[data-theme="light"] .quiz-radar-pulse {
    border-color: rgba(79, 112, 153, 0.32);
}

html[data-theme="light"] .quiz-radar-ring-center strong {
    color: #123a63;
}

html[data-theme="light"] .quiz-radar-ring-center span,
html[data-theme="light"] .quiz-overview-label,
html[data-theme="light"] .quiz-overview-sub {
    color: #557597;
}

html[data-theme="light"] .quiz-radar-chart-head span {
    background: #edf4ff;
    border-color: rgba(79, 112, 153, 0.33);
}

html[data-theme="light"] .quiz-trend-empty {
    border-color: rgba(79, 112, 153, 0.35);
    background: #f4f8ff;
}

html[data-theme="light"] .quiz-overview-icon {
    border-color: rgba(47, 119, 245, 0.34);
    background: rgba(47, 119, 245, 0.1);
    color: #2f72e4;
}

html[data-theme="light"] .quiz-overview-meter,
html[data-theme="light"] .quiz-stage-column .track,
html[data-theme="light"] .quiz-achievement-meter,
html[data-theme="light"] .quiz-pack-led {
    border-color: rgba(79, 112, 153, 0.3);
    background: #edf4ff;
}

html[data-theme="light"] .quiz-pack-led::after {
    background: rgba(124, 146, 168, 0.42);
}

html[data-theme="light"] .quiz-pack-led.passed::after {
    background: rgba(47, 143, 99, 0.92);
}

html[data-theme="light"] .quiz-pack-led.attempted::after {
    background: rgba(47, 119, 245, 0.9);
}

html[data-theme="light"] .quiz-pack-led.locked::after {
    background: rgba(132, 149, 165, 0.46);
}

html[data-theme="light"] .quiz-cockpit-dial-face {
    border-color: rgba(79, 112, 153, 0.36);
    background:
        radial-gradient(circle at 32% 28%, rgba(47, 119, 245, 0.12) 0 22%, transparent 44%),
        radial-gradient(circle at 50% 50%, rgba(247, 251, 255, 0.98) 36%, rgba(236, 244, 255, 0.98) 70%);
}

html[data-theme="light"] .quiz-cockpit-dial-face::before {
    opacity: 0.5;
}

html[data-theme="light"] .quiz-cockpit-scale span {
    color: rgba(57, 92, 132, 0.82);
}

html[data-theme="light"] .quiz-cockpit-center small {
    color: #5b7da3;
}

html[data-theme="light"] .quiz-cockpit-dial[data-zone="mid"] {
    border-color: rgba(47, 111, 243, 0.42);
}

html[data-theme="light"] .quiz-cockpit-dial[data-zone="high"],
html[data-theme="light"] .quiz-cockpit-dial[data-zone="red"] {
    border-color: rgba(216, 79, 100, 0.44);
}

html[data-theme="light"] .quiz-cockpit-light {
    border-color: rgba(79, 112, 153, 0.34);
    background: #edf4ff;
}

html[data-theme="light"] .quiz-cockpit-light.on {
    border-color: rgba(216, 79, 100, 0.5);
    background: #fbeef2;
    color: #8d3145;
    box-shadow: 0 0 8px rgba(216, 79, 100, 0.32);
}

html[data-theme="light"] .quiz-cockpit-light.on.safe {
    border-color: rgba(47, 143, 99, 0.5);
    background: #e8f8ee;
    color: #276246;
    box-shadow: 0 0 8px rgba(47, 143, 99, 0.3);
}

html[data-theme="light"] .quiz-cockpit-light.on.hot {
    border-color: rgba(216, 116, 74, 0.5);
    background: #fff0e7;
    color: #8a472f;
    box-shadow: 0 0 8px rgba(216, 116, 74, 0.3);
}

html[data-theme="light"] .quiz-cockpit-legend-pill {
    border-color: rgba(79, 112, 153, 0.34);
    background: #edf4ff;
    color: #4f7398;
}

html[data-theme="light"] .quiz-cockpit-legend-pill strong {
    color: #153a60;
}

html[data-theme="light"] .quiz-cockpit-legend-pill.on {
    border-color: rgba(216, 79, 100, 0.5);
    background: #fbeef2;
    color: #8d3145;
}

html[data-theme="light"] .quiz-cockpit-legend-pill.safe {
    border-color: rgba(47, 143, 99, 0.52);
    background: #e8f8ee;
    color: #29644a;
}

html[data-theme="light"] .quiz-cockpit-legend-pill.warn {
    border-color: rgba(216, 79, 100, 0.56);
    background: #fdeef2;
    color: #8d3145;
}

html[data-theme="light"] .quiz-cockpit-legend-pill.hot {
    border-color: rgba(216, 116, 74, 0.56);
    background: #fff0e7;
    color: #8a472f;
}

html[data-theme="light"] .quiz-cockpit-alert {
    border-color: rgba(79, 112, 153, 0.33);
    background: #edf4ff;
    color: #45698f;
}

html[data-theme="light"] .quiz-cockpit-alert.good {
    border-color: rgba(47, 143, 99, 0.45);
    background: #e8f8ee;
    color: #29644a;
}

html[data-theme="light"] .quiz-cockpit-alert.warn {
    border-color: rgba(216, 79, 100, 0.44);
    background: #fdeef2;
    color: #8d3145;
}

html[data-theme="light"] .quiz-cockpit-alert.hot {
    border-color: rgba(216, 116, 74, 0.45);
    background: #fff0e7;
    color: #8a472f;
}

html[data-theme="light"] .quiz-cockpit-alert.slow {
    border-color: rgba(214, 146, 64, 0.44);
    background: #fff7e8;
    color: #7e5a23;
}

html[data-theme="light"] .quiz-message-card {
    border-color: rgba(79, 112, 153, 0.34);
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(20, 46, 84, 0.12);
}

html[data-theme="light"] .quiz-message-card strong {
    color: #15395f;
}

html[data-theme="light"] .quiz-message-card p {
    color: #4f6f94;
}

html[data-theme="light"] .quiz-message-actions button {
    border-color: rgba(79, 112, 153, 0.34);
    background: #edf4ff;
    color: #355d8f;
}

@media (max-width: 1100px) {
    .quiz-radar-top-grid {
        grid-template-columns: 1fr;
    }

    .quiz-radar-core-body {
        grid-template-columns: 1fr;
    }

    .quiz-radar-ring {
        width: 174px;
        height: 174px;
    }

    .quiz-cockpit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-cockpit-hud {
        grid-column: span 2;
    }

    .quiz-pack-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-result-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-score-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .quiz-main {
        padding: 18px 14px 54px;
    }

    body.flow-active .quiz-main {
        padding: 12px 10px 40px;
    }

    .quiz-header-inner {
        padding: 10px 12px;
    }

    .quiz-header-actions [data-theme-label] {
        display: none;
    }

    .quiz-brand-title {
        font-size: 0.66rem;
    }

    .quiz-brand-sub {
        font-size: 0.78rem;
    }

    .quiz-overview-grid {
        grid-template-columns: 1fr;
    }

    .quiz-radar-kpi-grid {
        grid-template-columns: 1fr;
    }

    .quiz-howitworks-grid {
        grid-template-columns: 1fr;
    }

    .quiz-stage-columns {
        grid-template-columns: 1fr;
    }

    .quiz-cockpit-grid {
        grid-template-columns: 1fr;
    }

    .quiz-cockpit-hud {
        grid-column: span 1;
    }

    .quiz-cockpit-dial-face {
        width: 138px;
    }

    .quiz-flow-global-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .quiz-question-card h3 {
        font-size: 1.6rem;
        line-height: 1.38;
    }

    .quiz-option span:last-child {
        font-size: 1.03rem;
    }

    .quiz-trend-bars {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 54px;
        grid-template-columns: none;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .quiz-pack-grid {
        grid-template-columns: 1fr;
    }

    .quiz-score-stats {
        grid-template-columns: 1fr;
    }

    .quiz-achievement-grid {
        grid-template-columns: 1fr;
    }

    .quiz-achievement-compact-grid {
        grid-template-columns: 1fr;
    }

    .quiz-provider-grid {
        grid-template-columns: 1fr;
    }

    .quiz-flow-actions {
        flex-direction: column;
    }

    .quiz-flow-actions button {
        width: 100%;
    }

    .quiz-result-actions {
        grid-template-columns: 1fr;
    }

    .quiz-emotion-meters {
        grid-template-columns: 1fr;
    }

    .quiz-flow-table-top {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .quiz-flow-table-chips {
        justify-content: flex-start;
    }

    .quiz-flow-table {
        border: 0;
        background: transparent;
    }

    .quiz-flow-table,
    .quiz-flow-table tbody {
        display: block;
    }

    .quiz-flow-table tr {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 6px 10px;
        border-top: 1px solid rgba(88, 119, 143, 0.28);
        padding: 8px 0;
    }

    .quiz-flow-table tr:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .quiz-flow-table th,
    .quiz-flow-table td {
        display: block;
        border: 0;
        padding: 0;
        background: transparent;
    }

    .quiz-flow-table td[colspan="5"] {
        grid-column: 1 / -1;
    }

    .quiz-mini-meter-meta {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .quiz-mini-meter-meta .quiz-mini-meter-pct {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .quiz-mini-xp {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 8px;
    }

    .quiz-mini-xp-donut,
    .quiz-mini-xp-donut .quiz-xp-donut {
        width: 72px;
        height: 72px;
    }

    .quiz-emotion-xp-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .quiz-emotion-xp-progress {
        grid-template-columns: 1fr;
    }

    .quiz-emotion-xp-donut-wrap {
        margin: 0 auto;
    }

    .quiz-personal-actions {
        grid-template-columns: 1fr;
    }

    .quiz-mini-actions {
        grid-template-columns: 1fr;
    }

    .quiz-message-stack {
        left: 12px;
        right: 12px;
        width: auto;
        top: 10px;
        max-height: calc(100vh - 20px);
    }

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

    .quiz-certificate-actions {
        width: 100%;
    }

.quiz-certificate-actions button {
        width: 100%;
        justify-content: center;
    }
}

/* Cockpit-first dashboard */
.quiz-radar-dashboard > .quiz-overview-cockpit,
.quiz-radar-dashboard > .quiz-radar-top-grid,
.quiz-radar-dashboard > .quiz-overview-grid,
.quiz-radar-dashboard > .quiz-stage-dashboard-card,
.quiz-radar-dashboard > .quiz-cockpit-strip-card,
.quiz-radar-dashboard > .quiz-howitworks-card {
    display: none !important;
}

#quizLevelProgress,
#quizAchievementBoard,
#quizCertificateBanner {
    display: none !important;
}

.quiz-radar-dashboard {
    margin-top: 18px;
    gap: 0;
}

.quiz-overview-cockpit {
    position: relative;
    border: 2px solid #6f7b8b;
    background:
        linear-gradient(180deg, rgba(23, 30, 40, 0.97), rgba(7, 12, 19, 0.98)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 6px);
    box-shadow:
        0 28px 50px rgba(0, 0, 0, 0.56),
        inset 0 0 0 2px rgba(255, 255, 255, 0.04),
        inset 0 10px 16px rgba(255, 255, 255, 0.07),
        inset 0 -14px 22px rgba(0, 0, 0, 0.48);
    clip-path: polygon(2.5% 0, 97.5% 0, 100% 9%, 100% 91%, 97.5% 100%, 2.5% 100%, 0 91%, 0 9%);
    padding: 12px 12px 10px;
    overflow: hidden;
}

.quiz-overview-cockpit::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(130deg, rgba(255, 255, 255, 0.08), transparent 30%),
        radial-gradient(950px 260px at 50% -14%, rgba(90, 140, 194, 0.16), transparent 58%);
    pointer-events: none;
}

.quiz-overview-screw {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #8d99aa;
    background: radial-gradient(circle at 35% 35%, #d8dee9, #4b5564 70%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.35);
    z-index: 2;
}

.quiz-overview-screw::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 1px;
    background: #252d37;
    transform: translate(-50%, -50%) rotate(-25deg);
}

.quiz-overview-screw.tl { left: 10px; top: 8px; }
.quiz-overview-screw.tr { right: 10px; top: 8px; }
.quiz-overview-screw.bl { left: 10px; bottom: 8px; }
.quiz-overview-screw.br { right: 10px; bottom: 8px; }

.quiz-overview-cockpit-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
    padding: 0 4px;
}

.quiz-overview-cockpit-head strong {
    font-family: "Rajdhani", sans-serif;
    letter-spacing: 0.06em;
    color: #ebf3ff;
    font-size: 1.08rem;
}

.quiz-overview-cockpit-head span {
    color: #95adca;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

.quiz-overview-cluster-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.quiz-overview-dial-box {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
}

.quiz-overview-dial-title {
    text-transform: uppercase;
    font-size: 0.86rem;
    letter-spacing: 0.12em;
    color: #9eb3cc;
    font-family: "Rajdhani", sans-serif;
}

.quiz-overview-gauge-mount {
    width: min(365px, 100%);
    aspect-ratio: 1 / 1;
}

.overview-gauge-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.overview-gauge-bezel {
    fill: #1f2936;
    stroke: #6d7889;
    stroke-width: 2.2;
}

.overview-gauge-face {
    fill: #070d16;
    stroke: rgba(159, 181, 206, 0.26);
    stroke-width: 1.3;
}

.overview-gauge-face-fx {
    fill: url(#overviewGaugeInnerGradient);
}

.overview-gauge-arc-base,
.overview-gauge-zone,
.overview-gauge-live-band {
    fill: none;
    stroke-linecap: round;
}

.overview-gauge-arc-base {
    stroke: rgba(90, 107, 127, 0.92);
}

.overview-gauge-tick {
    stroke: rgba(147, 170, 197, 0.45);
    stroke-width: 1.8;
}

.overview-gauge-tick.major {
    stroke: rgba(193, 214, 235, 0.72);
    stroke-width: 2.25;
}

.overview-gauge-scale-label {
    fill: #b8cee7;
    font-family: "Rajdhani", sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.01em;
    paint-order: stroke;
    stroke: rgba(7, 15, 24, 0.92);
    stroke-width: 3px;
}

.overview-gauge-needle {
    transition: transform 0.34s cubic-bezier(.22, .82, .23, .99);
}

.overview-gauge-needle-line {
    stroke: #fff2f2;
    stroke-width: 3.4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(255, 102, 98, 0.42));
}

.overview-gauge.score .overview-gauge-needle-line {
    stroke: #ffd9d5;
}

.overview-gauge.rhythm .overview-gauge-needle-line {
    stroke: #d7ffff;
    filter: drop-shadow(0 0 6px rgba(68, 230, 220, 0.4));
}

.overview-gauge-needle-tip {
    fill: #ff776c;
}

.overview-gauge.rhythm .overview-gauge-needle-tip {
    fill: #2fe0d7;
}

.overview-gauge-center-cap {
    fill: #d4deeb;
    stroke: #2d3a4d;
    stroke-width: 2;
}

.overview-gauge-digital-frame {
    fill: #3f4b5d;
    stroke: #8f9fb4;
    stroke-width: 1.2;
}

.overview-gauge-digital-screen {
    fill: #0f243e;
    stroke: rgba(114, 186, 255, 0.35);
    stroke-width: 1;
}

.overview-gauge-digital-value {
    fill: #eef5ff;
    font-family: "Rajdhani", sans-serif;
    font-size: 58px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.overview-gauge.rhythm .overview-gauge-digital-value {
    fill: #e9fffd;
}

.overview-gauge-digital-sub {
    fill: #88a4c4;
    font-family: "Rajdhani", sans-serif;
    font-size: 17px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.overview-gauge-digital-window.pulse .overview-gauge-digital-value {
    animation: overviewDigitPulse 0.24s ease;
}

.overview-gauge-digital-window.pulse .overview-gauge-digital-screen {
    animation: overviewDigitScreenPulse 0.24s ease;
}

@keyframes overviewDigitPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@keyframes overviewDigitScreenPulse {
    0% { filter: brightness(1); }
    45% { filter: brightness(1.4); }
    100% { filter: brightness(1); }
}

.quiz-overview-console {
    border: 1px solid #5f6b7a;
    background:
        linear-gradient(180deg, rgba(18, 28, 20, 0.97), rgba(10, 16, 12, 0.98)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 6px);
    box-shadow: inset 0 0 0 1px rgba(126, 179, 132, 0.16), inset 0 8px 14px rgba(0, 0, 0, 0.42);
    min-height: 334px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 8px;
    padding: 8px;
}

.quiz-overview-level-block {
    border: 1px solid rgba(104, 138, 109, 0.58);
    background: rgba(6, 14, 7, 0.66);
    padding: 6px;
    display: grid;
    gap: 2px;
    font-family: "Courier New", monospace;
}

.quiz-overview-level-block span {
    color: #7aac86;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.quiz-overview-level-block strong {
    color: #b8f4c2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1rem;
    line-height: 1.1;
}

.quiz-overview-level-block em {
    color: #8fe39f;
    font-style: normal;
    font-size: 0.82rem;
}

.quiz-overview-console-grid {
    border: 1px solid rgba(103, 139, 108, 0.35);
    background: rgba(4, 10, 6, 0.58);
    padding: 4px;
    display: grid;
    gap: 2px;
}

.quiz-overview-console-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(118, 164, 125, 0.26);
    padding: 5px 4px;
    font-family: "Courier New", monospace;
}

.quiz-overview-console-row:last-child {
    border-bottom: none;
}

.quiz-overview-console-row span {
    color: #79b286;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.quiz-overview-console-row strong {
    color: #97f6a8;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
}

.quiz-overview-focus-row {
    border: 1px solid #788792;
    background: linear-gradient(180deg, rgba(23, 33, 48, 0.96), rgba(12, 19, 30, 0.96));
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    text-transform: uppercase;
}

.quiz-overview-focus-row span {
    color: #a7bdd6;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
}

.quiz-overview-focus-row strong {
    color: #ebf3ff;
    font-size: 1rem;
    font-family: "Rajdhani", sans-serif;
}

.quiz-overview-warning-rail {
    position: relative;
    z-index: 1;
    margin-top: 4px;
    border-top: 1px solid #5b6777;
    border-bottom: 1px solid #5b6777;
    background: linear-gradient(180deg, rgba(18, 26, 38, 0.95), rgba(9, 13, 20, 0.96));
    padding: 6px 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.quiz-overview-lamp {
    min-width: 76px;
    text-align: center;
    border-radius: 999px;
    padding: 4px 8px;
    border: 1px solid rgba(121, 141, 164, 0.45);
    background: rgba(19, 28, 40, 0.76);
    color: #8ea7c0;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.quiz-overview-lamp.on.abs,
.quiz-overview-lamp.on.engine {
    color: #fff1f1;
    border-color: rgba(255, 103, 103, 0.72);
    background: rgba(140, 31, 31, 0.85);
    box-shadow: 0 0 10px rgba(255, 88, 88, 0.55);
}

.quiz-overview-lamp.on.trc,
.quiz-overview-lamp.on.cp {
    color: #effff2;
    border-color: rgba(90, 236, 132, 0.7);
    background: rgba(19, 97, 47, 0.82);
    box-shadow: 0 0 10px rgba(83, 227, 124, 0.5);
}

.quiz-overview-lamp.on.redline {
    color: #fff2df;
    border-color: rgba(255, 174, 81, 0.78);
    background: rgba(155, 79, 16, 0.85);
    box-shadow: 0 0 10px rgba(255, 159, 63, 0.52);
}

.quiz-overview-lamp.blink {
    animation: cockpitLightBlink 0.9s steps(1, end) infinite;
}

.quiz-overview-lamp-help {
    position: relative;
    z-index: 1;
    margin-top: 7px;
    border: 1px solid rgba(94, 121, 147, 0.44);
    background: rgba(10, 18, 28, 0.76);
    color: #98b5ce;
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 0.86rem;
    font-weight: 700;
}

.quiz-overview-lamp-help.good {
    border-color: rgba(66, 205, 121, 0.55);
    color: #a7f7c3;
    background: rgba(15, 58, 34, 0.62);
}

.quiz-overview-lamp-help.warn {
    border-color: rgba(247, 110, 117, 0.62);
    color: #ffd4d8;
    background: rgba(84, 26, 34, 0.64);
}

.quiz-overview-lamp-help.hot {
    border-color: rgba(255, 126, 84, 0.64);
    color: #ffe3c9;
    background: rgba(92, 35, 20, 0.68);
}

.quiz-overview-led-panel {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    border: 1px solid rgba(97, 120, 142, 0.44);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(9, 17, 28, 0.94), rgba(6, 12, 20, 0.96));
    padding: 8px 8px 7px;
}

.quiz-overview-led-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.quiz-overview-led-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8ea7c0;
    font-size: 0.82rem;
    font-weight: 700;
}

.quiz-overview-led-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.quiz-overview-led-legend .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.34);
}

.quiz-overview-led-legend .dot.pass { background: #3ade74; }
.quiz-overview-led-legend .dot.fail { background: #f36464; }
.quiz-overview-led-legend .dot.idle { background: #8d9db2; }

.quiz-overview-led-meta {
    color: #93b4d6;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    font-weight: 700;
    text-transform: uppercase;
}

.quiz-pack-led-strip-cluster {
    margin-top: 8px;
    grid-template-columns: repeat(34, minmax(0, 1fr));
    gap: 7px;
}

.quiz-overview-cockpit .quiz-pack-led-strip-cluster .quiz-pack-led {
    border-color: rgba(99, 123, 146, 0.6);
    background: rgba(6, 15, 26, 0.94);
}

.quiz-overview-cockpit .quiz-pack-led-strip-cluster .quiz-pack-led::after {
    inset: 3px;
    background: rgba(123, 141, 163, 0.5);
}

.quiz-overview-cockpit .quiz-pack-led-strip-cluster .quiz-pack-led.passed::after {
    background: rgba(56, 225, 117, 0.95);
}

.quiz-overview-cockpit .quiz-pack-led-strip-cluster .quiz-pack-led.attempted::after {
    background: rgba(249, 99, 99, 0.92);
}

.quiz-overview-cockpit .quiz-pack-led-strip-cluster .quiz-pack-led.locked::after {
    background: rgba(131, 148, 167, 0.45);
}

.quiz-overview-cockpit .quiz-pack-led-strip-cluster .quiz-pack-led.checkpoint::after {
    background: rgba(255, 201, 90, 0.95);
}

.quiz-overview-how {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    border: 1px solid rgba(90, 118, 144, 0.45);
    border-radius: 10px;
    background: rgba(7, 15, 25, 0.76);
    padding: 8px;
}

.quiz-overview-how summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    color: #9dd9ed;
    font-weight: 800;
}

.quiz-overview-how summary::-webkit-details-marker {
    display: none;
}

.quiz-overview-how-grid {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.quiz-overview-how-grid article {
    border: 1px solid rgba(94, 124, 149, 0.4);
    border-radius: 9px;
    background: rgba(7, 20, 33, 0.8);
    padding: 8px;
}

.quiz-overview-how-grid article strong {
    color: #d9f3ff;
    font-size: 0.82rem;
}

.quiz-overview-how-grid article p {
    margin-top: 5px;
    color: #8faac2;
    font-size: 0.78rem;
    line-height: 1.45;
}

html[data-theme="light"] .quiz-overview-cockpit {
    border-color: #8a98ac;
    background: linear-gradient(180deg, rgba(242, 246, 251, 0.98), rgba(218, 228, 240, 0.98));
    box-shadow:
        0 20px 36px rgba(47, 78, 116, 0.22),
        inset 0 0 0 2px rgba(255, 255, 255, 0.42),
        inset 0 -12px 16px rgba(20, 46, 84, 0.18);
}

html[data-theme="light"] .quiz-overview-cockpit::before {
    background:
        linear-gradient(130deg, rgba(255, 255, 255, 0.45), transparent 30%),
        radial-gradient(900px 250px at 50% -20%, rgba(88, 139, 206, 0.22), transparent 55%);
}

html[data-theme="light"] .quiz-overview-cockpit-head strong {
    color: #16385d;
}

html[data-theme="light"] .quiz-overview-cockpit-head span,
html[data-theme="light"] .quiz-overview-dial-title,
html[data-theme="light"] .quiz-overview-led-meta,
html[data-theme="light"] .quiz-overview-led-legend {
    color: #49688d;
}

@media (max-width: 1220px) {
    .quiz-overview-cluster-grid {
        grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
        gap: 6px;
    }

    .quiz-overview-gauge-mount {
        width: min(320px, 100%);
    }
}

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

    .quiz-overview-console {
        min-height: auto;
    }

    .quiz-overview-gauge-mount {
        width: min(360px, 100%);
    }

    .quiz-pack-led-strip-cluster {
        grid-template-columns: repeat(auto-fill, minmax(16px, 1fr));
    }
}

@media (max-width: 760px) {
    .quiz-overview-cockpit {
        padding: 10px 8px;
    }

    .quiz-overview-screw {
        width: 13px;
        height: 13px;
    }

    .quiz-overview-cockpit-head {
        padding: 0 2px;
    }

    .quiz-overview-cockpit-head strong {
        font-size: 1rem;
    }

    .quiz-overview-how-grid {
        grid-template-columns: 1fr;
    }
}

body.quiz-flow-only .quiz-pack-section {
    display: none !important;
}

body.quiz-flow-only #btnBackToPacks {
    display: none !important;
}