@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700&family=Nunito:wght@500;700;800&display=swap");

.page-practice {
    --pq-bg-a: #fff9ed;
    --pq-bg-b: #edf7ff;
    --pq-ink: #1c2340;
    --pq-muted: #67749b;
    --pq-line: rgba(28, 35, 64, 0.12);
    --pq-card: rgba(255, 255, 255, 0.9);
    --pq-card-strong: #ffffff;
    --pq-shadow: 0 14px 32px rgba(19, 30, 64, 0.1);
    --pq-shadow-soft: 0 8px 18px rgba(19, 30, 64, 0.06);
    --pq-primary: #5b6bff;
    --pq-primary-2: #24b8ff;
    --pq-accent: #ff8a34;
    --pq-accent-2: #ffd04a;
    --pq-success: #1fbf75;
    --pq-danger: #ff5b7f;
    --pq-stage: #1a2144;
    --pq-stage-2: #121937;
    --pq-stage-line: rgba(160, 179, 255, 0.18);
    background:
        radial-gradient(28rem 22rem at 7% 0%, rgba(255, 169, 78, 0.16), transparent 70%),
        radial-gradient(36rem 26rem at 100% 0%, rgba(36, 184, 255, 0.16), transparent 72%),
        linear-gradient(180deg, var(--pq-bg-a) 0%, var(--pq-bg-b) 100%);
    color: var(--pq-ink);
    font-family: "Nunito", var(--font-sans);
}

.page-practice .page {
    background: transparent;
}

.page-practice .site-hero.practice-hero {
    position: relative;
    overflow: clip;
    background:
        radial-gradient(20rem 16rem at 10% 12%, rgba(255, 208, 74, 0.2), transparent 70%),
        radial-gradient(24rem 18rem at 88% 15%, rgba(36, 184, 255, 0.18), transparent 70%),
        linear-gradient(135deg, #111733 0%, #1f2450 55%, #241b4d 100%);
    border-bottom: 1px solid rgba(160, 179, 255, 0.14);
    padding: 28px 6vw 64px;
}

.page-practice .site-hero.practice-hero::before {
    content: "";
    position: absolute;
    inset: auto 5% 10% auto;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 138, 52, 0.14), transparent 68%);
    pointer-events: none;
}

.page-practice .hero-content {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr minmax(260px, 340px);
    gap: 18px;
    align-items: stretch;
}

.page-practice .practice-hero__copy,
.page-practice .hero-tip {
    position: relative;
    border-radius: 22px;
    border: 1px solid rgba(160, 179, 255, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.page-practice .practice-hero__copy {
    padding: 22px 24px;
}

.page-practice .practice-hero__copy::after {
    content: "";
    position: absolute;
    inset: auto auto -22px 28px;
    width: 220px;
    height: 10px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(36, 184, 255, 0.35) 0%, rgba(36, 184, 255, 0) 75%);
    filter: blur(4px);
    pointer-events: none;
}

.page-practice .eyebrow {
    color: #ffd66b;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    margin-bottom: 10px;
    font-family: "Baloo 2", var(--font-sans);
}

.page-practice .hero-content h1 {
    color: #f6f9ff;
    font-family: "Baloo 2", var(--font-sans);
    font-size: clamp(2rem, 3vw, 3.1rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.page-practice .hero-content p {
    color: rgba(234, 241, 255, 0.86);
    line-height: 1.5;
}

.page-practice .practice-hero__chips {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-practice .practice-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(160, 179, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: #eaf1ff;
    font-size: 0.82rem;
    font-weight: 700;
}

.page-practice .practice-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffd04a, #ff8a34);
    box-shadow: 0 0 0 3px rgba(255, 208, 74, 0.1);
}

.page-practice .hero-tip {
    padding: 18px;
    display: grid;
    align-content: start;
    gap: 10px;
    background:
        radial-gradient(circle at 100% 0%, rgba(36, 184, 255, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
}

.page-practice .hero-tip h3 {
    color: #f6f9ff;
    font-family: "Baloo 2", var(--font-sans);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.page-practice .practice-tip-badges {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.page-practice .practice-tip-badges span {
    min-width: 44px;
    text-align: center;
    padding: 6px 8px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.78rem;
    color: #f9fcff;
    background: linear-gradient(135deg, rgba(91, 107, 255, 0.8), rgba(36, 184, 255, 0.7));
    border: 1px solid rgba(160, 179, 255, 0.2);
}

.page-practice .practice-shell.container {
    width: min(1180px, 96%);
    margin: -28px auto 72px;
    padding: 0 0 80px;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.page-practice .streaks-panel,
.page-practice .menus {
    width: 100%;
}

.page-practice .streak-banner {
    border-radius: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255, 208, 74, 0.2), rgba(255, 138, 52, 0.12));
    border: 1px solid rgba(255, 138, 52, 0.22);
    box-shadow: var(--pq-shadow-soft);
}

.page-practice .streak-widget,
.page-practice .streak-badges,
.page-practice .menus {
    position: relative;
    border-radius: 22px;
    border: 1px solid var(--pq-line);
    background:
        radial-gradient(circle at 100% 0%, rgba(36, 184, 255, 0.06), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.84));
    box-shadow: var(--pq-shadow);
}

.page-practice .menus {
    padding: 20px 22px;
}

.page-practice .menus::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 16px;
    border: 1px dashed rgba(91, 107, 255, 0.15);
    pointer-events: none;
}

.page-practice .section-title {
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.page-practice .section-title h2,
.page-practice .section-title h3 {
    font-family: "Baloo 2", var(--font-sans);
    color: var(--pq-ink);
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}

.page-practice .section-title p {
    color: var(--pq-muted);
}

.page-practice .practice-setup-banner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.page-practice .practice-setup-banner__item {
    border-radius: 14px;
    border: 1px solid rgba(91, 107, 255, 0.12);
    background: rgba(91, 107, 255, 0.04);
    padding: 10px 12px;
    display: grid;
    gap: 2px;
}

.page-practice .practice-setup-banner__label {
    font-size: 0.7rem;
    color: var(--pq-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.page-practice .practice-setup-banner__item strong {
    font-size: 0.9rem;
    color: var(--pq-ink);
    font-weight: 800;
}

.page-practice .options-grid {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.page-practice .option-card {
    border-radius: 18px;
    padding: 16px;
    border: 1px solid rgba(91, 107, 255, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.86));
    box-shadow: 0 8px 18px rgba(19, 30, 64, 0.05);
    gap: 10px;
}

.page-practice .option-card:nth-child(1) {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 208, 74, 0.16), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 238, 0.92));
}

.page-practice .option-card:nth-child(2) {
    background:
        radial-gradient(circle at 100% 0%, rgba(36, 184, 255, 0.14), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 255, 0.92));
}

.page-practice .option-card:nth-child(3) {
    background:
        radial-gradient(circle at 100% 0%, rgba(91, 107, 255, 0.14), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 246, 255, 0.92));
}

.page-practice .option-card:nth-child(4) {
    background:
        radial-gradient(circle at 100% 0%, rgba(31, 191, 117, 0.14), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 255, 248, 0.92));
}

.page-practice .caption {
    color: var(--pq-ink);
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
}

.page-practice .input-box {
    border-radius: 12px;
    border: 1px solid rgba(91, 107, 255, 0.16);
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    min-height: 46px;
    color: var(--pq-ink);
    font-weight: 700;
}

.page-practice .input-box:focus {
    border-color: rgba(91, 107, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(91, 107, 255, 0.14);
}

.page-practice .option-toggle {
    border-radius: 12px;
    padding: 10px;
    border: 1px solid rgba(31, 191, 117, 0.14);
    background: rgba(31, 191, 117, 0.04);
}

.page-practice .option-toggle input {
    accent-color: var(--pq-primary);
}

.page-practice .option-toggle span {
    color: var(--pq-ink);
}

.page-practice .category-counts {
    gap: 6px;
}

.page-practice .category-count-pill {
    border-radius: 999px;
    border: 1px solid rgba(91, 107, 255, 0.14);
    background: rgba(91, 107, 255, 0.06);
    color: var(--pq-ink);
    font-weight: 700;
    font-size: 0.76rem;
}

.page-practice .tooltip-content {
    background: var(--pq-stage);
    border: 1px solid var(--pq-stage-line);
    color: #edf2ff;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(8, 12, 28, 0.26);
}

.page-practice .affiliate-panel,
.page-practice .affiliate-section {
    position: relative;
    z-index: 1;
    border-radius: 16px;
    border: 1px solid rgba(91, 107, 255, 0.1);
    background: rgba(91, 107, 255, 0.03);
    padding: 14px;
}

.page-practice .row.menu-row {
    position: relative;
    z-index: 1;
    margin-top: 6px;
}

.page-practice .green-btn {
    border-radius: 16px;
    min-height: 52px;
    padding: 12px 22px;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, var(--pq-primary), var(--pq-primary-2));
    border: 1px solid rgba(91, 107, 255, 0.22);
    box-shadow: 0 14px 22px rgba(68, 92, 255, 0.2);
}

.page-practice .green-btn:hover {
    background: linear-gradient(135deg, #4c5cff, #1caeff);
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 16px 24px rgba(68, 92, 255, 0.24);
}

.page-practice .gray-btn,
.page-practice .gray-btn:hover {
    background: linear-gradient(135deg, #cfd4ea, #d9e0f5);
    color: #6d7694;
    border-color: rgba(28, 35, 64, 0.08);
    box-shadow: none;
    transform: none;
}

.page-practice .start-btn {
    width: min(320px, 100%);
    font-family: "Baloo 2", var(--font-sans);
    font-size: 1.05rem;
}

.page-practice #quiz-form-container {
    background:
        radial-gradient(circle at 100% 0%, rgba(36, 184, 255, 0.06), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 255, 0.92));
}

.page-practice .question-timer-bar {
    height: 28px;
    border-radius: 14px;
    border: 1px solid rgba(91, 107, 255, 0.16);
    background:
        repeating-linear-gradient(
            90deg,
            rgba(91, 107, 255, 0.08) 0 12px,
            rgba(91, 107, 255, 0.03) 12px 24px
        );
    margin-bottom: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.page-practice .question-timer-bar .timer-progress {
    background: linear-gradient(90deg, #26d07c, #24b8ff);
}

.page-practice .question-timer-bar .timer-label {
    color: #fff;
    font-weight: 800;
    line-height: 28px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.page-practice .quiz-container {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 14px;
    align-items: start;
}

.page-practice .question-container {
    min-width: 0;
    border-radius: 18px;
    border: 1px solid var(--pq-stage-line);
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 208, 74, 0.12), transparent 50%),
        radial-gradient(circle at 100% 0%, rgba(36, 184, 255, 0.14), transparent 52%),
        linear-gradient(180deg, var(--pq-stage), var(--pq-stage-2));
    color: #edf2ff;
    box-shadow: 0 18px 28px rgba(8, 12, 28, 0.2);
    padding: 18px;
    position: relative;
}

.page-practice .question-container::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 12px;
    border: 1px dashed rgba(160, 179, 255, 0.12);
    pointer-events: none;
}

.page-practice .question-container h2 {
    color: #f7f9ff;
    margin-bottom: 10px;
    font-family: "Baloo 2", var(--font-sans);
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.page-practice #question-prompt {
    color: rgba(237, 242, 255, 0.95);
    line-height: 1.55;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.page-practice .correct-answer::after {
    border-bottom-color: #3fe28f;
    border-right-color: #3fe28f;
}

.page-practice .wrong-answer::after {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}

.page-practice .answer-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-self: stretch;
}

.page-practice .answer-container .answers {
    margin: 0;
    min-height: 92px;
    border-radius: 16px;
    border: 1px solid rgba(91, 107, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.94));
    padding: 12px 14px;
    font-weight: 800;
    line-height: 1.3;
    box-shadow: var(--pq-shadow-soft);
    display: flex;
    align-items: center;
    color: var(--pq-ink);
}

.page-practice .answer-container .answers.open:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(19, 30, 64, 0.08);
}

.page-practice .answer-container .answers.closed {
    opacity: 0.9;
}

.page-practice .answer-container .answers.chosen {
    background: linear-gradient(135deg, rgba(91, 107, 255, 0.18), rgba(36, 184, 255, 0.12)) !important;
    border-color: rgba(91, 107, 255, 0.3);
    box-shadow: 0 0 0 3px rgba(91, 107, 255, 0.08);
}

.page-practice .answer-container .answers.correct {
    background: linear-gradient(135deg, rgba(31, 191, 117, 0.22), rgba(103, 241, 179, 0.12)) !important;
    border-color: rgba(31, 191, 117, 0.34);
}

.page-practice .answer-container .answers.incorrect {
    background: linear-gradient(135deg, rgba(255, 91, 127, 0.2), rgba(255, 140, 150, 0.1)) !important;
    border-color: rgba(255, 91, 127, 0.3);
}

.page-practice .question-rationale__actions {
    margin-top: 4px;
}

.page-practice .question-rationale__action-btn {
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(91, 107, 255, 0.2);
    background: rgba(91, 107, 255, 0.08);
    color: var(--pq-ink);
    font-weight: 800;
}

.page-practice .question-rationale__action-btn:hover {
    border-color: rgba(91, 107, 255, 0.3);
    background: rgba(91, 107, 255, 0.12);
}

.page-practice .question-rationale__status {
    color: var(--pq-muted);
}

.page-practice .question-rationale__status.is-error {
    color: #b91c1c;
}

.page-practice .submit-container {
    justify-content: center;
    margin-top: 10px;
}

.page-practice .answer-submit-btn {
    min-width: 180px;
}

.page-practice #quiz-finished-container {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 208, 74, 0.1), transparent 52%),
        radial-gradient(circle at 0% 0%, rgba(36, 184, 255, 0.08), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.94));
    padding: 18px 20px 20px;
}

.page-practice .final-result .row.menu-row h2 {
    font-family: "Baloo 2", var(--font-sans);
    color: var(--pq-ink);
    font-size: 1.8rem;
}

.page-practice .final-result .row.menu-row h3 {
    color: var(--pq-muted);
    font-weight: 800;
}

.page-practice #result-percentage {
    color: var(--pq-primary);
    font-family: "Baloo 2", var(--font-sans);
    font-size: 1.4em;
}

.page-practice .final-result hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(91, 107, 255, 0.18), transparent);
    margin: 10px 0 2px;
}

.page-practice #past-questions-container {
    margin-top: 14px;
    gap: 12px;
}

.page-practice #past-questions-container .quiz-container {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(91, 107, 255, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 255, 0.88));
    box-shadow: var(--pq-shadow-soft);
    padding: 12px;
}

.page-practice #past-questions-container .question-container {
    border-radius: 14px;
    box-shadow: none;
    padding: 14px;
}

.page-practice #past-questions-container .answer-container .answers {
    min-height: 68px;
    font-size: 0.92rem;
    box-shadow: none;
}

.page-practice .streak-widget {
    padding: 18px;
    gap: 12px;
}

.page-practice .streak-widget__header h2,
.page-practice .streak-badges h3 {
    font-family: "Baloo 2", var(--font-sans);
    color: var(--pq-ink);
}

.page-practice .streak-select label,
.page-practice .streak-empty,
.page-practice .goal-status,
.page-practice .badge-description {
    color: var(--pq-muted);
}

.page-practice .streak-progress {
    height: 12px;
    background: rgba(91, 107, 255, 0.08);
    border: 1px solid rgba(91, 107, 255, 0.08);
    margin-top: 6px;
}

.page-practice .streak-progress__bar {
    background: linear-gradient(90deg, #ffb643, #ff7d55 40%, #5b6bff 100%);
}

.page-practice .streak-flame {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 138, 52, 0.08);
    border: 1px solid rgba(255, 138, 52, 0.14);
    color: #ff7c34;
}

.page-practice .badge-grid {
    gap: 10px;
}

.page-practice .badge-tile {
    border-radius: 14px;
    border: 1px solid rgba(91, 107, 255, 0.1);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 255, 0.9));
}

.page-practice .badge-tile.is-unlocked {
    border-color: rgba(31, 191, 117, 0.28);
    box-shadow: 0 0 0 3px rgba(31, 191, 117, 0.07);
}

.page-practice .badge-title {
    color: var(--pq-ink);
    font-weight: 800;
}

.page-practice .badge-counter {
    background: rgba(91, 107, 255, 0.08);
    border-color: rgba(91, 107, 255, 0.12);
    color: var(--pq-ink);
}

.page-practice .limit-modal__card {
    border-radius: 18px;
    border: 1px solid rgba(91, 107, 255, 0.14);
    background:
        radial-gradient(circle at 100% 0%, rgba(36, 184, 255, 0.08), transparent 55%),
        #fff;
    box-shadow: 0 22px 44px rgba(19, 30, 64, 0.16);
}

.page-practice .limit-modal__card h3 {
    font-family: "Baloo 2", var(--font-sans);
}

.page-practice [data-affiliate-list] > * {
    border-radius: 14px;
}

@media (max-width: 980px) {
    .page-practice .hero-content {
        grid-template-columns: 1fr;
    }

    .page-practice .practice-shell.container {
        margin-top: -20px;
    }

    .page-practice .practice-setup-banner {
        grid-template-columns: 1fr;
    }

    .page-practice .options-grid {
        grid-template-columns: 1fr;
    }

    .page-practice .quiz-container {
        grid-template-columns: 1fr;
    }

    .page-practice .answer-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-practice .site-hero.practice-hero {
        padding: 22px 5vw 54px;
    }

    .page-practice .practice-hero__copy,
    .page-practice .hero-tip {
        border-radius: 16px;
        padding: 16px;
    }

    .page-practice .hero-content h1 {
        font-size: clamp(1.8rem, 6vw, 2.4rem);
    }

    .page-practice .practice-hero__chips {
        gap: 6px;
    }

    .page-practice .practice-chip {
        font-size: 0.75rem;
        padding: 5px 9px;
    }

    .page-practice .menus,
    .page-practice .streak-widget,
    .page-practice .streak-badges {
        border-radius: 16px;
        padding: 16px;
    }

    .page-practice .menus::before {
        inset: 10px;
        border-radius: 12px;
    }

    .page-practice .question-container {
        border-radius: 14px;
        padding: 14px;
    }

    .page-practice .answer-container .answers {
        min-height: 72px;
        border-radius: 14px;
    }

    .page-practice .green-btn {
        border-radius: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-practice .green-btn,
    .page-practice .answer-container .answers,
    .page-practice .streak-progress__bar {
        transition: none !important;
    }

    .page-practice .answer-container .answers.open:hover,
    .page-practice .green-btn:hover {
        transform: none;
    }
}

/* Dark mode alignment for the fun quiz theme */
[data-theme="dark"] .page-practice,
.page-practice[data-theme="dark"] {
    --pq-bg-a: #070b16;
    --pq-bg-b: #0c1428;
    --pq-ink: #ecf1ff;
    --pq-muted: #9aa8cf;
    --pq-line: rgba(133, 153, 220, 0.18);
    --pq-card: #151d39;
    --pq-card-strong: #11182f;
    --pq-shadow: 0 16px 34px rgba(2, 6, 23, 0.28);
    --pq-shadow-soft: 0 8px 18px rgba(2, 6, 23, 0.2);
    --pq-primary: #7583ff;
    --pq-primary-2: #35c4ff;
    --pq-accent: #ff9548;
    --pq-accent-2: #ffd866;
    --pq-success: #32d48b;
    --pq-danger: #ff6a8b;
    --pq-stage: #171f41;
    --pq-stage-2: #111731;
    --pq-stage-line: rgba(160, 179, 255, 0.14);
    background:
        radial-gradient(28rem 22rem at 7% 0%, rgba(117, 131, 255, 0.14), transparent 70%),
        radial-gradient(36rem 26rem at 100% 0%, rgba(53, 196, 255, 0.12), transparent 72%),
        linear-gradient(180deg, var(--pq-bg-a) 0%, var(--pq-bg-b) 100%);
}

[data-theme="dark"] .page-practice .practice-shell.container,
.page-practice[data-theme="dark"] .practice-shell.container {
    background: transparent;
}

[data-theme="dark"] .page-practice .streak-widget,
[data-theme="dark"] .page-practice .streak-badges,
[data-theme="dark"] .page-practice .menus,
.page-practice[data-theme="dark"] .streak-widget,
.page-practice[data-theme="dark"] .streak-badges,
.page-practice[data-theme="dark"] .menus {
    background:
        radial-gradient(circle at 100% 0%, rgba(53, 196, 255, 0.08), transparent 55%),
        linear-gradient(180deg, rgba(21, 29, 57, 0.96), rgba(17, 24, 47, 0.96));
    border-color: var(--pq-line);
}

[data-theme="dark"] .page-practice .menus::before,
.page-practice[data-theme="dark"] .menus::before {
    border-color: rgba(133, 153, 220, 0.12);
}

[data-theme="dark"] .page-practice .section-title h2,
[data-theme="dark"] .page-practice .section-title h3,
[data-theme="dark"] .page-practice .streak-widget__header h2,
[data-theme="dark"] .page-practice .streak-badges h3,
[data-theme="dark"] .page-practice .badge-title,
.page-practice[data-theme="dark"] .section-title h2,
.page-practice[data-theme="dark"] .section-title h3,
.page-practice[data-theme="dark"] .streak-widget__header h2,
.page-practice[data-theme="dark"] .streak-badges h3,
.page-practice[data-theme="dark"] .badge-title {
    color: var(--pq-ink);
}

[data-theme="dark"] .page-practice .section-title p,
[data-theme="dark"] .page-practice .streak-select label,
[data-theme="dark"] .page-practice .streak-empty,
[data-theme="dark"] .page-practice .goal-status,
[data-theme="dark"] .page-practice .badge-description,
[data-theme="dark"] .page-practice .streak-progress-label,
[data-theme="dark"] .page-practice .streak-banner,
[data-theme="dark"] .page-practice .badge-counter,
.page-practice[data-theme="dark"] .section-title p,
.page-practice[data-theme="dark"] .streak-select label,
.page-practice[data-theme="dark"] .streak-empty,
.page-practice[data-theme="dark"] .goal-status,
.page-practice[data-theme="dark"] .badge-description,
.page-practice[data-theme="dark"] .streak-progress-label,
.page-practice[data-theme="dark"] .streak-banner,
.page-practice[data-theme="dark"] .badge-counter {
    color: var(--pq-muted);
}

[data-theme="dark"] .page-practice .streak-banner,
.page-practice[data-theme="dark"] .streak-banner {
    background: linear-gradient(135deg, rgba(255, 149, 72, 0.14), rgba(255, 106, 139, 0.08));
    border-color: rgba(255, 149, 72, 0.2);
}

[data-theme="dark"] .page-practice .streak-progress,
.page-practice[data-theme="dark"] .streak-progress {
    background: rgba(117, 131, 255, 0.1);
    border-color: rgba(117, 131, 255, 0.08);
}

[data-theme="dark"] .page-practice .streak-flame,
.page-practice[data-theme="dark"] .streak-flame {
    background: rgba(255, 149, 72, 0.1);
    border-color: rgba(255, 149, 72, 0.15);
    color: #ffb067;
}

[data-theme="dark"] .page-practice .badge-tile,
.page-practice[data-theme="dark"] .badge-tile {
    background: linear-gradient(180deg, rgba(26, 35, 68, 0.98), rgba(21, 29, 57, 0.98));
    border-color: rgba(133, 153, 220, 0.12);
}

[data-theme="dark"] .page-practice .badge-tile.is-unlocked,
.page-practice[data-theme="dark"] .badge-tile.is-unlocked {
    border-color: rgba(50, 212, 139, 0.28);
    box-shadow: 0 0 0 3px rgba(50, 212, 139, 0.08);
}

[data-theme="dark"] .page-practice .badge-counter,
.page-practice[data-theme="dark"] .badge-counter {
    background: rgba(117, 131, 255, 0.12);
    border-color: rgba(133, 153, 220, 0.12);
}

[data-theme="dark"] .page-practice .practice-setup-banner__item,
.page-practice[data-theme="dark"] .practice-setup-banner__item {
    background: rgba(117, 131, 255, 0.05);
    border-color: rgba(133, 153, 220, 0.12);
}

[data-theme="dark"] .page-practice .practice-setup-banner__label,
.page-practice[data-theme="dark"] .practice-setup-banner__label {
    color: var(--pq-muted);
}

[data-theme="dark"] .page-practice .practice-setup-banner__item strong,
.page-practice[data-theme="dark"] .practice-setup-banner__item strong {
    color: var(--pq-ink);
}

[data-theme="dark"] .page-practice .option-card,
.page-practice[data-theme="dark"] .option-card {
    background: linear-gradient(180deg, rgba(23, 31, 61, 0.98), rgba(19, 26, 52, 0.98));
    border-color: rgba(133, 153, 220, 0.14);
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.16);
}

[data-theme="dark"] .page-practice .option-card:nth-child(1),
.page-practice[data-theme="dark"] .option-card:nth-child(1) {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 216, 102, 0.14), transparent 52%),
        linear-gradient(180deg, rgba(23, 31, 61, 0.98), rgba(19, 26, 52, 0.98));
}

[data-theme="dark"] .page-practice .option-card:nth-child(2),
.page-practice[data-theme="dark"] .option-card:nth-child(2) {
    background:
        radial-gradient(circle at 100% 0%, rgba(53, 196, 255, 0.14), transparent 52%),
        linear-gradient(180deg, rgba(23, 31, 61, 0.98), rgba(19, 26, 52, 0.98));
}

[data-theme="dark"] .page-practice .option-card:nth-child(3),
.page-practice[data-theme="dark"] .option-card:nth-child(3) {
    background:
        radial-gradient(circle at 100% 0%, rgba(117, 131, 255, 0.14), transparent 52%),
        linear-gradient(180deg, rgba(23, 31, 61, 0.98), rgba(19, 26, 52, 0.98));
}

[data-theme="dark"] .page-practice .option-card:nth-child(4),
.page-practice[data-theme="dark"] .option-card:nth-child(4) {
    background:
        radial-gradient(circle at 100% 0%, rgba(50, 212, 139, 0.14), transparent 52%),
        linear-gradient(180deg, rgba(23, 31, 61, 0.98), rgba(19, 26, 52, 0.98));
}

[data-theme="dark"] .page-practice .caption,
[data-theme="dark"] .page-practice .option-toggle span,
.page-practice[data-theme="dark"] .caption,
.page-practice[data-theme="dark"] .option-toggle span {
    color: var(--pq-ink);
}

[data-theme="dark"] .page-practice .option-toggle,
.page-practice[data-theme="dark"] .option-toggle {
    background: rgba(50, 212, 139, 0.06);
    border-color: rgba(50, 212, 139, 0.14);
}

[data-theme="dark"] .page-practice .input-box,
.page-practice[data-theme="dark"] .input-box {
    background: #0f1630;
    border-color: rgba(133, 153, 220, 0.2);
    color: #ecf1ff;
}

[data-theme="dark"] .page-practice .input-box:focus,
.page-practice[data-theme="dark"] .input-box:focus {
    background: #131c3b;
    border-color: rgba(117, 131, 255, 0.35);
    box-shadow: 0 0 0 4px rgba(117, 131, 255, 0.14);
}

[data-theme="dark"] .page-practice .input-box::placeholder,
.page-practice[data-theme="dark"] .input-box::placeholder {
    color: #8f9ec7;
}

[data-theme="dark"] .page-practice .category-count-pill,
.page-practice[data-theme="dark"] .category-count-pill {
    background: rgba(117, 131, 255, 0.08);
    border-color: rgba(133, 153, 220, 0.14);
    color: #dce5ff;
}

[data-theme="dark"] .page-practice .affiliate-panel,
[data-theme="dark"] .page-practice .affiliate-section,
.page-practice[data-theme="dark"] .affiliate-panel,
.page-practice[data-theme="dark"] .affiliate-section {
    background: rgba(117, 131, 255, 0.04);
    border-color: rgba(133, 153, 220, 0.12);
}

[data-theme="dark"] .page-practice .question-timer-bar,
.page-practice[data-theme="dark"] .question-timer-bar {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(117, 131, 255, 0.12) 0 12px,
            rgba(117, 131, 255, 0.05) 12px 24px
        );
    border-color: rgba(133, 153, 220, 0.16);
}

[data-theme="dark"] .page-practice #quiz-form-container,
.page-practice[data-theme="dark"] #quiz-form-container {
    background:
        radial-gradient(circle at 100% 0%, rgba(53, 196, 255, 0.08), transparent 52%),
        linear-gradient(180deg, rgba(21, 29, 57, 0.96), rgba(17, 24, 47, 0.96));
}

[data-theme="dark"] .page-practice .answer-container .answers,
.page-practice[data-theme="dark"] .answer-container .answers {
    color: #ecf1ff;
    border-color: rgba(133, 153, 220, 0.14);
    background: linear-gradient(180deg, rgba(26, 35, 68, 0.96), rgba(20, 28, 54, 0.96));
    box-shadow: 0 8px 16px rgba(2, 6, 23, 0.16);
}

[data-theme="dark"] .page-practice .answer-container .answers.open:hover,
.page-practice[data-theme="dark"] .answer-container .answers.open:hover {
    box-shadow: 0 10px 18px rgba(2, 6, 23, 0.2);
}

[data-theme="dark"] .page-practice .question-rationale__action-btn,
.page-practice[data-theme="dark"] .question-rationale__action-btn {
    background: rgba(117, 131, 255, 0.12);
    border-color: rgba(133, 153, 220, 0.24);
    color: #ecf1ff;
}

[data-theme="dark"] .page-practice .question-rationale__action-btn:hover,
.page-practice[data-theme="dark"] .question-rationale__action-btn:hover {
    background: rgba(117, 131, 255, 0.18);
}

[data-theme="dark"] .page-practice .answer-container .answers.closed,
.page-practice[data-theme="dark"] .answer-container .answers.closed {
    opacity: 0.75;
}

[data-theme="dark"] .page-practice #quiz-finished-container,
.page-practice[data-theme="dark"] #quiz-finished-container {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 216, 102, 0.08), transparent 52%),
        radial-gradient(circle at 0% 0%, rgba(53, 196, 255, 0.06), transparent 52%),
        linear-gradient(180deg, rgba(21, 29, 57, 0.98), rgba(17, 24, 47, 0.98));
}

[data-theme="dark"] .page-practice .final-result .row.menu-row h2,
.page-practice[data-theme="dark"] .final-result .row.menu-row h2 {
    color: var(--pq-ink);
}

[data-theme="dark"] .page-practice .final-result .row.menu-row h3,
.page-practice[data-theme="dark"] .final-result .row.menu-row h3 {
    color: var(--pq-muted);
}

[data-theme="dark"] .page-practice #result-percentage,
.page-practice[data-theme="dark"] #result-percentage {
    color: #88a2ff;
}

[data-theme="dark"] .page-practice .final-result hr,
.page-practice[data-theme="dark"] .final-result hr {
    background: linear-gradient(90deg, transparent, rgba(133, 153, 220, 0.2), transparent);
}

[data-theme="dark"] .page-practice #past-questions-container .quiz-container,
.page-practice[data-theme="dark"] #past-questions-container .quiz-container {
    background: linear-gradient(180deg, rgba(21, 29, 57, 0.96), rgba(17, 24, 47, 0.96));
    border-color: rgba(133, 153, 220, 0.12);
}

[data-theme="dark"] .page-practice .limit-modal__card,
.page-practice[data-theme="dark"] .limit-modal__card {
    background:
        radial-gradient(circle at 100% 0%, rgba(53, 196, 255, 0.08), transparent 55%),
        linear-gradient(180deg, #171f3f, #121932);
    border-color: rgba(133, 153, 220, 0.14);
    color: var(--pq-ink);
}

[data-theme="dark"] .page-practice .limit-modal__card h3,
[data-theme="dark"] .page-practice .limit-modal__card p,
.page-practice[data-theme="dark"] .limit-modal__card h3,
.page-practice[data-theme="dark"] .limit-modal__card p {
    color: inherit;
}