/* Petrol, soft off-white and restrained gold, shared across the existing themes. */
:root,html[data-theme=light]{--bg:#f2f4f0;--surface:#fbfcf9;--surface2:#edf3f1;--line:#d6e2de;--ink:#1b343b;--secondary:#415c62;--muted:#566f75;--primary:#145365;--ledge:#0a3c48;--success:#23734f;--success-bg:#e6f4eb;--success-ink:#145437;--error:#b3344a;--error-bg:#fcebf0;--error-ink:#82223a;--amber:#806322;--amber-bg:#f1ecda;--option-ledge:#d1ded9;--card:var(--surface);--border:var(--line);--accent:var(--primary);--petrol-deep:#0b3039;--petrol-bright:#115365;--header-ink:#f3f8f5;--gold:#d3b25c}
html[data-theme=dark]{--bg:#0a1d24;--surface:#112e37;--surface2:#193d47;--line:#30545f;--ink:#edf5f2;--secondary:#c2d5d4;--muted:#a1baba;--primary:#86ccd3;--ledge:#3c8490;--success:#85cba5;--success-bg:#173c32;--success-ink:#e0f7e9;--error:#f1a0b1;--error-bg:#462a37;--error-ink:#ffe5ed;--amber:#dfc16f;--amber-bg:#343521;--option-ledge:#234650;--card:var(--surface);--border:var(--line);--accent:var(--primary);--petrol-deep:#082b35;--petrol-bright:#15586b;--header-ink:#f3f8f5;--gold:#dfc16f}
html[data-theme] body,html[data-theme] #app,html[data-theme] .quiz-shell{font-family:'Avenir Next',Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
html[data-theme] #app{padding-inline:0;--navigation-height:78px}
html[data-theme] #app .topbar,html[data-theme] #app .page,html[data-theme] #app .quiz-main,html[data-theme] #app .study-exam-row,html[data-theme] #app .app-download-banner{left:0;right:auto;transform:none}
html[data-theme] #app .topbar{max-width:1160px;position:relative;min-height:88px;height:auto;padding:16px 24px;gap:20px}
html[data-theme] #app .brand{font-size:20px;letter-spacing:-.6px}
html[data-theme] #app .brand-mark{width:44px;height:44px;border-radius:14px}
html[data-theme] #app .flag-control>span,html[data-theme] #app .theme-control,html[data-theme] #app .profile-control{border:1px solid var(--line);border-radius:50%;background:transparent;box-shadow:none}
html[data-theme] #app .flag-control>span{border-radius:14px}
html[data-theme] #app .profile-control .face-avatar{width:34px;height:34px;border-radius:50%}
html[data-theme] #app .page{max-width:800px;padding:24px 32px 110px}
html[data-theme] #app .home-page{min-height:0;gap:24px;padding-top:20px}
html[data-theme] #app .home-page .home-exam{margin:0 0 20px}
html[data-theme] #app .exam-select-wrap select{background:transparent;color:var(--secondary);border:0;border-radius:8px;font-size:14px;font-weight:600;padding-inline-start:0}
html[data-theme] #app .exam-current{background:transparent}
html[data-theme] #app .home-mcq{padding:22px 0 0;margin:0;min-height:0}
html[data-theme] #app .home-mcq-head h1,html[data-theme] #app .question-title{font-size:28px;line-height:1.45;letter-spacing:-.45px;font-weight:650;margin:24px 0}
html[data-theme] #app .home-answers,html[data-theme] #app .answers{gap:12px}
html[data-theme] #app .answer,html[data-theme] #app .home-answer{min-height:64px;border:1px solid var(--line);border-radius:17px;background:var(--surface);color:var(--ink);padding:14px 18px;box-shadow:0 3px 0 var(--option-ledge);transform:none;font-size:16px;line-height:1.5;font-weight:500}
html[data-theme] #app .answer:hover:not(:disabled),html[data-theme] #app .home-answer:hover{border-color:var(--primary);background:var(--surface2);transform:none}
html[data-theme] #app .answer-letter,html[data-theme] #app .home-answer-letter{width:30px;height:30px;border:1px solid var(--line);background:var(--surface2);color:var(--secondary);border-radius:9px;font-size:14px;font-weight:650;box-shadow:none}
html[data-theme] #app :is(.answer,.home-answer).correct{background:var(--success-bg);border-color:var(--success);color:var(--success-ink);box-shadow:0 3px 0 color-mix(in srgb,var(--success) 35%,var(--bg))}
html[data-theme] #app :is(.answer,.home-answer).wrong{background:var(--error-bg);border-color:var(--error);color:var(--error-ink);box-shadow:0 3px 0 color-mix(in srgb,var(--error) 35%,var(--bg))}
html[data-theme] #app .primary-button{background:var(--primary);border:1px solid var(--ledge);color:#fff;border-radius:14px;box-shadow:0 3px 0 var(--ledge),0 8px 16px #2a262214;min-height:52px;padding:14px 24px;font-weight:650;font-size:16px;width:auto;margin-inline:auto}
html[data-theme=dark] #app .primary-button{color:var(--bg)}
html[data-theme] #app .secondary-button{border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--ink);box-shadow:none}
html[data-theme] #app .question-counter>span{color:var(--muted);font-size:14px;font-weight:650}
html[data-theme] #app .question-counter>span>b{font-size:14px;color:inherit}
html[data-theme] #app .question-counter i{background:var(--surface2);height:3px}
html[data-theme] #app .question-counter em{background:var(--primary)}
html[data-theme] #app .practice-limit{max-width:560px;margin:36px auto 0;text-align:center;padding:24px 12px;background:none;border:0;box-shadow:none}
html[data-theme] #app .practice-limit:before{content:'✓';display:grid;place-items:center;width:64px;height:64px;border-radius:50%;margin:0 auto 24px;background:var(--surface2);color:var(--primary);font-size:28px}
html[data-theme] #app .next-practice-guidance h2{font-size:28px;font-weight:700;line-height:1.35;margin:0 0 20px}
html[data-theme] #app .next-practice-guidance p{font-size:16px;line-height:1.65;color:var(--secondary);max-width:440px;margin:0 auto 24px}
html[data-theme] #app .next-practice-guidance small{display:none}
html[data-theme] #app .practice-limit .primary-button{margin:20px auto}
html[data-theme] #app .free-replay{font-size:14px;color:var(--primary);font-weight:600;margin:22px auto 0}
html[data-theme] #app .sample-pass-link{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;background:none;color:var(--primary);font-size:14px;font-weight:650;padding:8px 0;box-shadow:none}
html[data-theme] #app .practice-limit .sample-pass-link{display:flex;margin:12px auto}
html[data-theme] #app .free-sample-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:4px 0 16px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
html[data-theme] #app .practice-topics-link{display:flex;align-items:center;justify-content:center;gap:10px;background:none;border:0;color:var(--secondary);font-size:14px;font-weight:600;padding:16px;margin:24px auto}
html[data-theme] #app .full-exam-card{border:0;background:none;padding:36px 24px;box-shadow:none;max-width:560px;margin:auto;text-align:center}
html[data-theme] #app .full-exam-card .primary-button{margin-top:28px}
html[data-theme] #app .full-exam-emblem{background:var(--surface2);border-radius:50%;width:72px;height:72px;margin:0 auto 24px}
html[data-theme] #app .full-exam-emblem .face-avatar{width:52px;height:52px}
html[data-theme] #app .full-exam-facts{justify-content:center;gap:28px;padding:16px 0;background:none;border-block:1px solid var(--line)}
html[data-theme] #app .app-download-banner{max-width:736px;background:transparent;border-radius:12px;margin-block:0 12px}
html[data-theme] #app .app-download-cta{background:var(--primary);font-weight:650}
html[data-theme] #app .pass-card,html[data-theme] #app .settings-panel,html[data-theme] #app .learn-area-card,html[data-theme] #app .stat-card{background:var(--surface);border-color:var(--line);box-shadow:none}
html[data-theme] #app .pass-card .primary-button,html[data-theme] #app .account-page .primary-button,html[data-theme] #app .result-page .primary-button{width:100%}
html[data-theme] #app .desktop-nav{display:none}
html[data-theme] #app .bottom-nav{border-top:1px solid var(--line);background:var(--bg);box-shadow:none;backdrop-filter:none}
html[data-theme] #app .bottom-nav button{color:var(--secondary);box-shadow:none}
html[data-theme] #app .bottom-nav button.active{color:var(--primary);background:none;border:0;box-shadow:none}
html[data-theme] #app .bottom-nav button svg{filter:none}
html[data-theme] #app .quiz-action{transform:none;left:0;right:0;max-width:736px;margin:auto;background:var(--bg);border-top:1px solid var(--line);box-shadow:none}
html[data-theme] #app .quiz-action .primary-button{margin-inline-start:auto;flex:initial;min-width:180px}
html[data-theme] #app .quiz-main{max-width:800px;min-height:0;padding:24px 32px 40px}
html[data-theme] #app .study-exam-row{max-width:1000px;width:calc(100% - 48px);margin:0 auto;padding:14px 0;border-bottom:1px solid var(--line);background:var(--bg)}
html[data-theme] #app .quiz-exam-label{font-size:14px;color:var(--muted);font-weight:600}
html[data-theme] #app .icon-button{border:0;background:transparent;color:var(--secondary);box-shadow:none}
html[data-theme] #app .premium-quiz>.topbar,html[data-theme] #app .premium-quiz>.bottom-nav{display:none}
html[data-theme] #app .question-stage{gap:20px}
html[data-theme] #app .feedback{background:var(--success-bg);color:var(--success-ink);border:1px solid var(--success);border-radius:14px;box-shadow:none}
html[data-theme] #app .feedback.bad{background:var(--error-bg);color:var(--error-ink);border-color:var(--error)}
@media(min-width:1024px){
 html[data-theme] #app .desktop-nav{display:flex;align-items:center;justify-content:center;gap:6px;margin-inline:auto}
 html[data-theme] #app .desktop-nav button{display:flex;align-items:center;gap:8px;padding:10px 12px;border:0;border-radius:12px;background:none;color:var(--secondary);font-size:14px;font-weight:600}
 html[data-theme] #app .desktop-nav button[aria-current=page]{color:var(--primary);background:var(--surface2)}
 html[data-theme] #app .bottom-nav{display:none}
 html[data-theme] #app .page{padding-bottom:64px}
 html[data-theme] #app .topbar-actions{gap:8px}
}
@media(max-width:767px){
 html[data-theme] #app .topbar{min-height:76px;padding:12px 18px;gap:10px}
 html[data-theme] #app .brand{font-size:17px}
 html[data-theme] #app .brand-mark{width:36px;height:36px}
 html[data-theme] #app .page{padding:18px 20px 104px}
 html[data-theme] #app .home-page .home-mcq:not(.is-revealed){min-height:0;display:block}
 html[data-theme] #app .home-mcq-head h1,html[data-theme] #app .question-title{font-size:25px;line-height:1.45}
 html[data-theme] #app .free-sample-bar{gap:8px;flex-wrap:wrap}
 html[data-theme] #app .free-sample-bar .sample-pass-link{padding:0}
 html[data-theme] #app .practice-limit{margin-top:8px;padding:20px 0}
 html[data-theme] #app .next-practice-guidance h2{font-size:25px}
 html[data-theme] #app .app-download-banner{width:calc(100% - 40px)}
 html[data-theme] #app .study-exam-row{width:calc(100% - 40px);position:relative;top:0}
 html[data-theme] #app .quiz-main{padding:20px}
 html[data-theme] #app .premium-quiz:not(.is-revealed) .quiz-main{min-height:0;padding-bottom:20px;display:block}
 html[data-theme] #app .premium-quiz .question-stage{justify-content:center;min-height:100%}
 html[data-theme] #app .premium-quiz .quiz-main{flex:1;overflow:auto}
 html[data-theme] #app .quiz-action{width:100%;padding:12px 20px calc(16px + env(safe-area-inset-bottom))}
 html[data-theme] #app .quiz-action .primary-button{width:auto;min-width:150px;flex:1}
}
@media(prefers-reduced-motion:reduce){html[data-theme] #app *{animation:none!important;transition:none!important}}
html[data-theme] #app .topbar::after{display:none}
html[data-theme] #app .app-download-banner{padding:6px 8px;gap:8px}
html[data-theme] #app .app-download-copy strong{font-size:13px}
html[data-theme] #app .app-download-copy small{font-size:11px}
html[data-theme] #app .home-exam{margin-bottom:8px}
html[data-theme] #app .home-mcq{padding-top:12px}
html[data-theme] #app .home-mcq-head h1{margin:18px 0 24px}
html[data-theme] #app .study-exam-row .language-menu{margin-inline-start:auto}
html[data-theme] #app .free-topic-note{padding:14px 16px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;color:var(--secondary);font-size:14px;line-height:1.6;margin:0 0 24px}
html[data-theme] #app .home-guide-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:18px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:1.5}
html[data-theme] #app .home-guide-links>span{color:var(--secondary)}
html[data-theme] #app .home-guide-links a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;color:var(--primary);text-underline-offset:3px;overflow-wrap:anywhere}

/* Installed apps retain safe areas, text scaling and navigation on tablets. */
html[data-platform=ios] #app .topbar,html[data-platform=android] #app .topbar{padding-top:calc(12px + env(safe-area-inset-top))}
html[data-platform=ios] #app .study-exam-row,html[data-platform=android] #app .study-exam-row{padding-top:calc(14px + env(safe-area-inset-top))}
html[data-platform=ios] #app .question-title,html[data-platform=android] #app .question-title,html[data-platform=ios] #app .home-mcq-head h1,html[data-platform=android] #app .home-mcq-head h1{font-size:calc(25px * var(--system-text-scale,1))}

/* Card layout experiment. Keep palette and type in the existing theme tokens.
   Isolated on codex/card-layout-experiment; revert its commit to restore layout. */
html[data-theme] #app{
 --layout-card-radius:22px;
 --layout-card-padding:28px;
 --layout-card-shadow:0 2px 5px color-mix(in srgb,var(--ledge) 7%,transparent),0 10px 28px color-mix(in srgb,var(--ledge) 9%,transparent);
}
html[data-theme=dark] #app{--layout-card-shadow:0 2px 5px color-mix(in srgb,var(--bg) 60%,transparent),0 12px 30px color-mix(in srgb,var(--bg) 70%,transparent)}
html[data-theme] #app :is(.study-question,.question-card,.mistake-mcq,.full-exam-card,.correct-progress,.badge-collection,.practice-support,.home-guide-links,:where(.mistakes-page) .empty-state,.practice-limit){
 background:var(--surface);border:1px solid var(--line);border-radius:var(--layout-card-radius);box-shadow:var(--layout-card-shadow);padding:var(--layout-card-padding);min-width:0;
}
html[data-theme] #app .home-page{display:flex;flex-direction:column;gap:20px;justify-content:flex-start}
html[data-theme] #app .home-page .home-exam{margin:0}
html[data-theme] #app :is(.home-exam,.progress-exam) .exam-picker{padding:0}
html[data-theme] #app .exam-select-wrap select{background:var(--surface2);border:1px solid var(--line);padding-inline:14px 40px;border-radius:12px}
html[data-theme] #app :is(.study-question,.mistake-mcq){margin:0;flex:none;overflow:visible}
html[data-theme] #app :is(.study-question h1,.mistake-mcq h2){margin:16px 0 22px}
html[data-theme] #app :is(.answers,.home-answers){gap:12px}
/* Answer rows stay flat inside the raised question surface. State colors and
   the existing reveal animation remain owned by the answer styles. */
html[data-theme] #app :is(.answer,.home-answer):not(.correct):not(.wrong){box-shadow:none}
html[data-theme] #app .question-card{position:relative}
html[data-theme] #app .question-card .question-stage{display:flex;flex-direction:column;gap:20px;min-height:0;justify-content:flex-start}
html[data-theme] #app .question-card .question-title{margin:0}
html[data-theme] #app .answer-feedback-panel{position:static;inset:auto;background:none;border-radius:0;margin-top:20px;display:block}
html[data-theme] #app .answer-feedback-panel[hidden]{display:none}
html[data-theme] #app .answer-feedback-panel .feedback{max-height:none;overflow:visible;padding:18px;margin:0}
html[data-theme] #app .answer-feedback-panel .feedback strong{padding-inline-end:48px}
html[data-theme] #app .answer-feedback-panel .feedback-companion{position:static;flex:none;inset:auto}
html[data-theme] #app .quiz-main{min-height:0;padding-bottom:120px}
html[data-theme] #app .quiz-action{border:1px solid var(--line);border-radius:18px 18px 0 0;background:var(--surface);padding:14px 20px}
html[data-theme] #app .practice-support{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 20px}
html[data-theme] #app .free-sample-bar{flex:1;min-width:0;border:0;padding:0;gap:12px;flex-wrap:wrap}
html[data-theme] #app .practice-topics-link{margin:0;padding:8px 0;min-height:48px}
html[data-theme] #app .home-guide-links{margin:0;justify-content:flex-start;gap:4px 20px;padding:12px 20px}
html[data-theme] #app .home-page .app-download-banner{width:100%;max-width:none;margin:0;background:var(--surface);box-shadow:var(--layout-card-shadow)}
html[data-theme] #app .full-exam-card{margin:20px auto 0;padding:32px;max-width:100%}
html[data-theme] #app .full-exam-facts{border-block:0;border-radius:12px;background:var(--surface2);gap:24px;padding:16px}
html[data-theme] #app .correct-progress{margin:20px 0;gap:20px}
html[data-theme] #app .badge-collection{padding:24px}
html[data-theme] #app .badge-grid{gap:12px}
html[data-theme] #app .badge-tile{background:var(--surface2);box-shadow:none;border-color:var(--line);border-radius:14px}
html[data-theme] #app .badge-tile.is-earned{border-color:var(--primary)}
html[data-theme] #app .mistakes-page .empty-state{margin-top:20px}
html[data-theme] #app .practice-limit{margin-top:0}
html[data-theme] #app :is(.mistake-exam,.progress-exam){margin-bottom:20px}
@media(max-width:767px){
 html[data-theme] #app{--layout-card-radius:18px;--layout-card-padding:16px}
 html[data-theme] #app :is(.page,.quiz-main){padding-inline:14px}
 html.question-screen[data-theme] #app .home-page{gap:12px;padding:10px 14px 18px}
 html[data-theme] #app .home-page .home-exam{margin:0}
 html.question-screen[data-theme] #app .home-mcq{margin:0;padding:var(--layout-card-padding)}
 html[data-theme] #app :is(.study-question h1,.mistake-mcq h2){margin:12px 0 16px}
 html[data-theme] #app :is(.answers,.home-answers){gap:10px}
 html[data-theme] #app :is(.answer,.home-answer){min-height:56px;padding:12px;line-height:1.4;border-radius:13px}
 html[data-theme] #app .question-card .question-stage{gap:14px;min-height:0}
 html[data-theme] #app .answer-feedback-panel{margin-top:16px}
 html[data-theme] #app .answer-feedback-panel .feedback{padding:14px}
 html[data-theme] #app .practice-support{padding:8px 14px;gap:4px 12px}
 html[data-theme] #app .free-sample-bar{gap:4px 10px}
 html[data-theme] #app .home-guide-links{padding:8px 14px;gap:0 14px}
 html[data-theme] #app .full-exam-card{padding:24px 18px;margin-top:16px}
 html[data-theme] #app .full-exam-emblem{margin-bottom:16px}
 html[data-theme] #app .full-exam-facts{gap:16px;padding:12px 8px;flex-wrap:wrap}
 html[data-theme] #app .correct-progress{padding:18px;margin:16px 0}
 html[data-theme] #app .badge-collection{padding:16px}
 html[data-theme] #app .badge-grid{gap:8px}
 html.question-screen[data-theme] #app .quiz-main{padding:12px 14px;scroll-padding-block:12px}
 html.question-screen[data-theme] #app .question-compact .question-stage{gap:12px}
 html.question-screen[data-theme] #app .question-compact .home-mcq-head h1{margin:12px 0 16px}
}

/* Contrast hierarchy: the petrol question header leads; supporting content recedes. */
html[data-theme] #app{--question-heading-bg:var(--petrol-deep);--question-heading-ink:var(--header-ink);--question-heading-accent:var(--gold)}
html[data-theme] #app :is(.study-question,.question-card,.mistake-mcq){padding:0;border-color:color-mix(in srgb,var(--primary) 25%,var(--line))}
html[data-theme] #app :is(.study-question,.mistake-mcq)>.home-mcq-head,
html[data-theme] #app .question-heading{
 background:var(--question-heading-bg);color:var(--question-heading-ink);
 padding:22px var(--layout-card-padding) 24px;
 border-radius:calc(var(--layout-card-radius) - 1px) calc(var(--layout-card-radius) - 1px) 0 0;
}
html[data-theme] #app :is(.home-mcq-head,.question-heading) :is(h1,h2,.question-counter>span,.question-counter>span>b,.question-counter>span>span){color:var(--question-heading-ink)}
html[data-theme] #app :is(.study-question,.mistake-mcq) .home-mcq-head :is(h1,h2){margin:18px 0 0}
html[data-theme] #app .question-card .question-title{margin:18px 0 0}
html[data-theme] #app :is(.home-mcq-head,.question-heading) .question-counter>i{background:color-mix(in srgb,var(--question-heading-ink) 20%,transparent)}
html[data-theme] #app :is(.home-mcq-head,.question-heading) .question-counter em{background:var(--question-heading-accent)}
html[data-theme] #app .question-card .question-stage{gap:0}
html[data-theme] #app :is(.study-question,.mistake-mcq)>.home-answers,
html[data-theme] #app .question-stage>.answers{margin:var(--layout-card-padding)}
html[data-theme] #app :is(.answer,.home-answer):not(.chosen):not(.correct):not(.wrong){background:var(--surface2)}
html[data-theme] #app :is(.answer,.home-answer):not(.chosen):not(.correct):not(.wrong):hover:not(:disabled){background:var(--surface);border-color:var(--primary)}
html[data-theme] #app .answer-feedback-panel{margin:0;padding:0 var(--layout-card-padding) var(--layout-card-padding)}
html[data-theme] #app .mistake-mcq>.feedback{margin:0 var(--layout-card-padding) var(--layout-card-padding)}
html[data-theme] #app .home-support{display:grid;align-content:start;gap:16px;min-width:0}
html[data-theme] #app .home-support :is(.practice-support,.home-guide-links,.app-download-banner){background:transparent;box-shadow:none;border-color:var(--line)}
html[data-theme] #app .home-support .app-download-banner{flex-wrap:wrap;padding:12px}
html[data-theme] #app .full-exam-card{border-top:4px solid var(--primary)}
html[data-theme] #app .correct-progress{background:var(--question-heading-bg);color:var(--question-heading-ink)}
html[data-theme] #app .correct-progress>strong,html[data-theme] #app .correct-progress>span{color:inherit}
html[data-theme] #app .badge-collection{box-shadow:none}
@media(min-width:1100px){
 html[data-theme] #app .home-page:has(.study-question){display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start;max-width:1160px;gap:20px 28px}
 html[data-theme] #app .home-page:has(.study-question)>:not(.study-question):not(.home-support){grid-column:1 / -1}
 html[data-theme] #app .home-page:has(.study-question)>.study-question{grid-column:1}
 html[data-theme] #app .home-support{grid-column:2}
 html[data-theme] #app .home-support :is(.practice-support,.home-guide-links){display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:18px}
 html[data-theme] #app .home-support .free-sample-bar{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
 html[data-theme] #app .home-support .practice-topics-link{justify-content:flex-start}
}
@media(max-width:767px){
 html.question-screen[data-theme] #app .home-mcq{padding:0}
 html[data-theme] #app :is(.study-question,.mistake-mcq)>.home-mcq-head,
 html[data-theme] #app .question-heading{padding:16px}
 html[data-theme] #app :is(.study-question,.mistake-mcq) .home-mcq-head :is(h1,h2),
 html[data-theme] #app .question-card .question-title{margin:12px 0 0}
 html.question-screen[data-theme] #app .question-compact .home-mcq-head h1{margin:12px 0 0}
 html.question-screen[data-theme] #app .question-compact .question-stage{gap:0}
 html[data-theme] #app .home-support{gap:12px}
}

/* A dark navigation band and matching question header establish the hierarchy. */
html[data-theme] #app .topbar{isolation:isolate;color:var(--header-ink);background:var(--petrol-deep)}
html[data-theme] #app .topbar::before{content:'';position:absolute;inset:0 calc((100% - 100vw) / 2);z-index:-1;background:var(--petrol-deep)}
html[data-theme] #app .topbar .brand,html[data-theme] #app .topbar .theme-control{color:var(--header-ink)}
html[data-theme] #app .topbar :is(.flag-control>span,.theme-control,.profile-control){border-color:color-mix(in srgb,var(--header-ink) 24%,transparent);color:var(--header-ink)}
html[data-theme] #app .topbar .desktop-nav button{color:color-mix(in srgb,var(--header-ink) 72%,transparent);border-radius:0}
html[data-theme] #app .topbar .desktop-nav button[aria-current=page]{color:var(--header-ink);background:transparent;box-shadow:0 2px 0 var(--gold)}
html[data-theme] #app .topbar :is(.brand,.theme-control,.profile-control,.flag-control,.desktop-nav button):focus-visible{outline-color:var(--gold)}
html[data-theme] #app :is(.study-question,.mistake-mcq)>.home-mcq-head,html[data-theme] #app .question-heading{background:linear-gradient(110deg,var(--petrol-deep),var(--petrol-bright))}
html[data-theme] #app .correct-progress{background:linear-gradient(110deg,var(--petrol-deep),var(--petrol-bright))}

/* Familiar official store badges, app identity and a generic phone preview. */
html[data-theme] #app .app-download-banner.app-download-platforms{
 position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:stretch;gap:20px;padding:18px;
 color:var(--header-ink);border:1px solid color-mix(in srgb,var(--gold) 40%,var(--petrol-bright));border-radius:22px;
 background:radial-gradient(ellipse at 5% 0%,#ffffff14,transparent 65%),linear-gradient(135deg,var(--petrol-bright),var(--petrol-deep));
 box-shadow:inset 0 1px 0 #ffffff30,0 12px 28px #082c351c;
}
html[data-theme] #app .app-download-platforms::before{content:'';position:absolute;inset:1px;z-index:-1;pointer-events:none;border-radius:20px;background:linear-gradient(135deg,#ffffff0d 0 22%,transparent 22% 100%)}
html[data-theme] #app .app-download-intro{display:grid;grid-template-columns:62px minmax(0,1fr);gap:16px;align-items:center;min-width:0;padding-inline-end:18px}
html[data-theme] #app .app-download-copy{display:flex;flex-direction:column;gap:8px;min-width:0;flex-basis:auto}
html[data-theme] #app .app-download-context{margin:0;color:var(--header-ink);font-size:20px;font-weight:750;line-height:1.25;letter-spacing:-.35px}
html[data-theme] #app .app-download-copy small{color:#c2d8d7;font-size:var(--type-label);line-height:1.45}
html[data-theme] #app .app-download-platforms .app-download-dismiss{position:absolute;inset-inline-end:4px;top:4px;color:#c2d8d7;background:transparent;border-radius:50%}
html[data-theme] #app .app-download-platforms .app-download-dismiss:hover{background:#ffffff12;color:var(--header-ink)}
html[data-theme] #app .app-preview-phone{display:block;width:62px;height:96px;padding:4px;border:1px solid #9bced069;border-radius:15px;background:linear-gradient(150deg,#d5ece855,#102c35);box-shadow:inset 0 1px 0 #ffffff66,5px 8px 16px #001c3250;transform:rotate(-7deg)}
html[data-theme] #app .app-preview-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:100%;border-radius:11px;background:linear-gradient(160deg,#f1f7f2,#c9dfd9);box-shadow:inset 0 0 0 1px #ffffff66}
html[data-theme] #app .app-preview-screen img{width:30px;height:30px;border-radius:8px;margin-bottom:3px;box-shadow:0 3px 6px #082c3526}
html[data-theme] #app .app-preview-screen i{width:30px;height:4px;border-radius:4px;background:#91b1ad}
html[data-theme] #app .app-preview-screen i:last-child{width:23px;background:#b6c9c1}
html[data-theme] #app .app-download-stores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
html[data-theme] #app .app-download-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;padding:0;background:none;border:0;border-radius:9px;color:var(--header-ink);text-decoration:none;box-shadow:none}
html[data-theme] #app .app-download-logo>span:last-child{color:#d8e5df;font-size:12px;font-weight:650;line-height:1.3;letter-spacing:.2px}
html[data-theme] #app .store-badge-frame{position:relative;display:block;width:100%;max-width:144px;height:48px;overflow:visible;filter:drop-shadow(0 3px 6px #001c3233)}
html[data-theme] #app .store-badge-frame img{display:block;width:100%;height:100%;object-fit:contain}
html[data-theme] #app .store-badge-android img{position:absolute;width:115%;max-width:none;height:auto;left:50%;top:50%;transform:translate(-50%,-50%)}
html[data-theme] #app .app-download-logo:hover .store-badge-frame{filter:drop-shadow(0 2px 7px #b5e9e84a)}
html[data-theme] #app .app-download-platforms :is(a,button):focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@media(max-width:767px){html[data-theme] #app .app-download-banner.app-download-platforms{padding:18px;gap:18px}html[data-theme] #app .app-download-intro{grid-template-columns:54px minmax(0,1fr);gap:16px}html[data-theme] #app .app-preview-phone{width:54px;height:84px}}
@media(max-width:360px){html[data-theme] #app .app-download-stores{grid-template-columns:1fr;gap:16px}html[data-theme] #app .store-badge-frame{width:144px}html[data-theme] #app .app-download-logo{min-height:64px}}

/* The free sample is a small treasure to open; existing practice/access actions stay inside. */
html[data-theme] #app .home-support .practice-support:has(.sample-treasure){display:block;padding:0;background:radial-gradient(ellipse at 12% 0%,#fffbe97a,transparent 65%),linear-gradient(130deg,#ffedb0,#ecc666 55%,#d8a641);border-color:#bb8b2d;box-shadow:inset 0 1px 0 #fff9d8c9,0 3px 6px #74501512,0 10px 24px #a8782021;color:#392b10}
html[data-theme] #app .home-support .sample-treasure{display:block;padding:0;min-width:0}
html[data-theme] #app .sample-treasure summary{display:grid;grid-template-columns:88px minmax(0,1fr) 16px;align-items:center;gap:10px;padding:14px 12px;list-style:none;cursor:pointer;border-radius:var(--layout-card-radius)}
html[data-theme] #app .sample-treasure summary::-webkit-details-marker{display:none}
html[data-theme] #app .sample-treasure summary:hover{background:#fff9dc30}
html[data-theme] #app .sample-treasure summary:focus-visible{outline:2px solid var(--petrol-deep);outline-offset:-4px}
html[data-theme] #app .sample-treasure-copy{color:#392b10;font-size:14px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
html[data-theme] #app .sample-treasure-art{display:block;width:88px;height:74px;overflow:visible;filter:drop-shadow(0 5px 5px #74501540)}
html[data-theme] #app .sample-treasure-lid{transform-origin:14px 39px;transition:transform .22s ease}
html[data-theme] #app .sample-treasure-light{opacity:0;transition:opacity .22s ease}
html[data-theme] #app .sample-treasure[open] .sample-treasure-lid{transform:translateY(-7px) rotate(-12deg)}
html[data-theme] #app .sample-treasure[open] .sample-treasure-light{opacity:1}
html[data-theme] #app .sample-treasure-chevron{display:flex;color:var(--petrol-deep);transition:transform .22s ease}
html[data-theme] #app .sample-treasure[open] .sample-treasure-chevron{transform:rotate(90deg)}
html[data-theme] #app .sample-treasure-reveal{display:flex;flex-direction:column;gap:8px;padding:0 16px 14px}
html[data-theme] #app .sample-treasure-reveal .primary-button{width:100%;min-height:44px;margin:0;padding:10px 12px;font-size:14px;background:var(--petrol-deep);border-color:var(--petrol-deep);color:var(--header-ink);box-shadow:0 3px 0 #07232b,0 5px 12px #74501526}
html[data-theme] #app .sample-treasure-reveal .sample-pass-link{justify-content:center;min-height:44px;padding:8px 0;color:#392b10}
@media(max-width:767px){html[data-theme] #app .sample-treasure summary{grid-template-columns:74px minmax(0,1fr) 16px;padding:10px 12px;gap:12px}html[data-theme] #app .sample-treasure-art{width:74px;height:62px}}

html[data-theme] #app .sample-treasure-reveal :is(a,button):focus-visible{outline:2px solid var(--petrol-deep);outline-offset:3px}
html[data-theme] #app .sample-treasure-reveal .primary-button:hover{background:var(--petrol-bright)}
html[data-theme] #app .sample-treasure-reveal .sample-pass-link:hover{text-decoration:underline;text-underline-offset:4px}
/* Topics belongs with the guides, away from the free sample. */
html[data-theme] #app .home-resources{min-width:0;padding:12px 18px;border:1px solid var(--line);border-radius:var(--layout-card-radius);background:var(--surface)}
html[data-theme] #app .home-resources>.practice-topics-link{width:100%;min-height:44px;margin:0;padding:4px 0 12px;justify-content:flex-start}
html[data-theme] #app .home-resources>.home-guide-links{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0;padding:12px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
html[data-theme] #app .home-resources:not(:has(.home-guide-links))>.practice-topics-link{padding-bottom:4px}
@media(max-width:767px){html[data-theme] #app .home-resources{padding:10px 14px}}

/* Graded and selected rows must remain distinct from hover in every view. */
html[data-theme] #app :is(.answer,.home-answer).chosen:not(.correct):not(.wrong){background:color-mix(in srgb,var(--surface2) 75%,var(--primary));border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
html[data-theme] #app :is(.answer,.home-answer).chosen:not(.correct):not(.wrong) :is(.answer-letter,.home-answer-letter){background:var(--primary);border-color:var(--primary);color:var(--bg)}
html[data-theme=light] #app :is(.answer,.home-answer).chosen:not(.correct):not(.wrong) :is(.answer-letter,.home-answer-letter){color:#fff}
html[data-theme] #app :is(.answer,.home-answer).correct :is(.answer-letter,.home-answer-letter){background:var(--success);border-color:var(--success);color:var(--bg)}
html[data-theme] #app :is(.answer,.home-answer).wrong :is(.answer-letter,.home-answer-letter){background:var(--error);border-color:var(--error);color:var(--bg)}
html[data-theme=light] #app :is(.answer,.home-answer):is(.correct,.wrong) :is(.answer-letter,.home-answer-letter){color:#fff}
html[data-theme][dir=rtl] #app .sample-treasure:not([open]) .sample-treasure-chevron,html[data-theme][dir=rtl] #app .sample-pass-link>svg{transform:rotate(180deg)}
@media(min-width:1024px){html[data-theme] #app .premium-quiz .quiz-main{padding-bottom:24px;min-height:0}html[data-theme] #app .quiz-action{border-radius:18px}}

html[data-theme] #app .quiz-exam-label bdi{min-width:0;overflow-wrap:anywhere}
@media(max-width:400px){
 html[data-theme] #app .study-exam-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;padding-inline:0;gap:8px}
 html[data-theme] #app .study-exam-row>.icon-button{grid-column:1;grid-row:1}
 html[data-theme] #app .study-exam-row>.language-menu{grid-column:3;grid-row:1;margin:0}
 html[data-theme] #app .study-exam-row>.quiz-timer{grid-column:2;grid-row:1;justify-self:end}
 html[data-theme] #app .study-exam-row>.quiz-exam-label{grid-column:2;grid-row:1}
 html[data-theme] #app .study-exam-row:has(>.quiz-timer)>.quiz-exam-label{grid-column:1/-1;grid-row:2}
}

/* SVG paint is styled through CSS rather than var() presentation attributes. */
html[data-theme] #app .sample-treasure-art .treasure-gold-fill{fill:var(--gold)}
html[data-theme] #app .sample-treasure-art .treasure-gold-stop{stop-color:var(--gold)}
html[data-theme] #app .sample-treasure-art .treasure-gold-stroke{stroke:var(--gold)}
html[data-theme] #app .sample-treasure-art .treasure-highlight-stop{stop-color:var(--header-ink)}
html[data-theme] #app .sample-treasure-art .treasure-highlight-stroke{stroke:var(--header-ink)}
html[data-theme] #app .sample-treasure-art .treasure-ink-fill{fill:var(--petrol-deep)}
html[data-theme] #app .sample-treasure-art .treasure-petrol-fill{fill:var(--petrol-bright)}
html[data-theme] #app .sample-treasure-art .treasure-shade-stop{stop-color:var(--amber)}

html[data-theme] #app .home-access-status{align-content:start;align-items:flex-start;flex-direction:column;gap:12px;padding:18px}
html[data-theme] #app .home-access-status p{margin:0;color:var(--secondary);line-height:1.5}