.exam-root{--exam-color-primary:#2563EB;--exam-color-primary-dark:#1D4ED8;--exam-color-primary-light:#3B82F6;--exam-color-primary-subtle:#EFF6FF;--exam-color-accent:#F59E0B;--exam-color-accent-dark:#D97706;--exam-color-accent-subtle:#FFFBEB;--exam-color-success:#10B981;--exam-color-success-subtle:#ECFDF5;--exam-color-error:#EF4444;--exam-color-error-subtle:#FEF2F2;--exam-color-warning:#F59E0B;--exam-color-white:#FFFFFF;--exam-color-gray-50:#F9FAFB;--exam-color-gray-100:#F3F4F6;--exam-color-gray-200:#E5E7EB;--exam-color-gray-300:#D1D5DB;--exam-color-gray-400:#9CA3AF;--exam-color-gray-500:#6B7280;--exam-color-gray-600:#4B5563;--exam-color-gray-700:#374151;--exam-color-gray-800:#1F2937;--exam-color-gray-900:#111827;--exam-color-listening:#8B5CF6;--exam-color-reading:#10B981;--exam-color-writing:#F59E0B;--exam-color-speaking:#EF4444;--exam-font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--exam-font-mono:"JetBrains Mono","Fira Code",monospace;--exam-text-xs:0.75rem;--exam-text-sm:0.875rem;--exam-text-base:1rem;--exam-text-lg:1.125rem;--exam-text-xl:1.25rem;--exam-text-2xl:1.5rem;--exam-text-3xl:1.875rem;--exam-text-4xl:2.25rem;--exam-font-normal:400;--exam-font-medium:500;--exam-font-semibold:600;--exam-font-bold:700;--exam-space-1:0.25rem;--exam-space-2:0.5rem;--exam-space-3:0.75rem;--exam-space-4:1rem;--exam-space-5:1.25rem;--exam-space-6:1.5rem;--exam-space-8:2rem;--exam-space-10:2.5rem;--exam-space-12:3rem;--exam-space-16:4rem;--exam-radius-sm:0.375rem;--exam-radius-md:0.5rem;--exam-radius-lg:0.75rem;--exam-radius-xl:1rem;--exam-radius-2xl:1.5rem;--exam-radius-full:9999px;--exam-shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--exam-shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--exam-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--exam-shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);--exam-transition-fast:150ms ease;--exam-transition-base:200ms ease;--exam-transition-slow:300ms ease}.dark .exam-root{--exam-color-white:#111827;--exam-color-gray-50:#1F2937;--exam-color-gray-100:#374151;--exam-color-gray-200:#4B5563;--exam-color-gray-300:#6B7280;--exam-color-gray-400:#9CA3AF;--exam-color-gray-500:#D1D5DB;--exam-color-gray-600:#E5E7EB;--exam-color-gray-700:#F3F4F6;--exam-color-gray-800:#F9FAFB;--exam-color-gray-900:#FFFFFF;--exam-color-primary-subtle:rgba(37,99,235,0.15)}.exam-container{max-width:1200px;margin:0 auto;padding:0 var(--exam-space-6)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.btn,.sr-only{white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--exam-space-2);padding:var(--exam-space-3) var(--exam-space-6);font-family:var(--exam-font-sans);font-size:var(--exam-text-base);font-weight:var(--exam-font-semibold);line-height:1.5;border:2px solid transparent;border-radius:var(--exam-radius-lg);cursor:pointer;transition:all var(--exam-transition-base);text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background-color:var(--exam-color-primary);color:var(--exam-color-white);border-color:var(--exam-color-primary)}.btn--primary:hover:not(:disabled){background-color:var(--exam-color-primary-dark);border-color:var(--exam-color-primary-dark);transform:translateY(-1px);box-shadow:var(--exam-shadow-md)}.btn--secondary{background-color:var(--exam-color-white);color:var(--exam-color-primary);border-color:var(--exam-color-primary)}.btn--secondary:hover:not(:disabled){background-color:var(--exam-color-primary-subtle)}.btn--accent{background-color:var(--exam-color-accent);color:var(--exam-color-white);border-color:var(--exam-color-accent)}.btn--accent:hover:not(:disabled){background-color:var(--exam-color-accent-dark)}.btn--ghost{background-color:initial;color:var(--exam-color-gray-600);border-color:var(--exam-color-gray-300)}.btn--ghost:hover:not(:disabled){background-color:var(--exam-color-gray-100);color:var(--exam-color-gray-900)}.btn--danger{background-color:var(--exam-color-error);color:var(--exam-color-white);border-color:var(--exam-color-error)}.btn--sm{padding:var(--exam-space-2) var(--exam-space-4);font-size:var(--exam-text-sm)}.btn--lg{padding:var(--exam-space-4) var(--exam-space-8);font-size:var(--exam-text-lg)}.btn--full{width:100%}.btn__icon{width:1.25em;height:1.25em;flex-shrink:0}.card{background-color:var(--exam-color-white);border-radius:var(--exam-radius-xl);box-shadow:var(--exam-shadow-sm);border:1px solid var(--exam-color-gray-200);overflow:hidden;transition:box-shadow var(--exam-transition-base)}.card:hover{box-shadow:var(--exam-shadow-md)}.card__header{border-bottom:1px solid var(--exam-color-gray-100)}.card__body,.card__footer,.card__header{padding:var(--exam-space-6)}.card__footer{border-top:1px solid var(--exam-color-gray-100);background-color:var(--exam-color-gray-50)}.card--elevated{box-shadow:var(--exam-shadow-lg)}.card--interactive{cursor:pointer;transition:all var(--exam-transition-base)}.card--interactive:hover{transform:translateY(-2px);box-shadow:var(--exam-shadow-xl);border-color:var(--exam-color-primary-light)}.progress-bar{width:100%;height:8px;background-color:var(--exam-color-gray-200);overflow:hidden}.progress-bar,.progress-bar__fill{border-radius:var(--exam-radius-full)}.progress-bar__fill{height:100%;background:linear-gradient(90deg,var(--exam-color-primary),var(--exam-color-primary-light));transition:width var(--exam-transition-slow);position:relative}.progress-bar__fill:after{content:"";position:absolute;top:0;right:0;bottom:0;width:20px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3))}.progress-step,.progress-steps{display:flex;align-items:center;gap:var(--exam-space-2)}.progress-step__dot{width:32px;height:32px;border-radius:var(--exam-radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--exam-text-sm);font-weight:var(--exam-font-bold);background-color:var(--exam-color-gray-200);color:var(--exam-color-gray-500);transition:all var(--exam-transition-base)}.progress-step--completed .progress-step__dot{background-color:var(--exam-color-success);color:var(--exam-color-white)}.progress-step--active .progress-step__dot{background-color:var(--exam-color-primary);color:var(--exam-color-white);box-shadow:0 0 0 4px var(--exam-color-primary-subtle)}.progress-step__label{font-size:var(--exam-text-sm);font-weight:var(--exam-font-medium);color:var(--exam-color-gray-500)}.progress-step--active .progress-step__label{color:var(--exam-color-primary);font-weight:var(--exam-font-semibold)}.progress-step__connector{width:40px;height:2px;background-color:var(--exam-color-gray-200);border-radius:var(--exam-radius-full)}.progress-step--completed+.progress-step__connector,.progress-step__connector--completed{background-color:var(--exam-color-success)}.timer{display:inline-flex;align-items:center;gap:var(--exam-space-2);padding:var(--exam-space-2) var(--exam-space-4);background-color:var(--exam-color-gray-100);border-radius:var(--exam-radius-lg);font-family:var(--exam-font-mono);font-size:var(--exam-text-lg);font-weight:var(--exam-font-bold);color:var(--exam-color-gray-700)}.timer--warning{background-color:var(--exam-color-accent-subtle);color:var(--exam-color-accent-dark);animation:pulse-warning 1s infinite}.timer--danger{background-color:var(--exam-color-error-subtle);color:var(--exam-color-error);animation:pulse-danger .5s infinite}@keyframes pulse-warning{0%,to{opacity:1}50%{opacity:.7}}@keyframes pulse-danger{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.timer__icon{width:20px;height:20px}.question-card{background-color:var(--exam-color-white);border-radius:var(--exam-radius-xl);padding:var(--exam-space-8);box-shadow:var(--exam-shadow-md);border:1px solid var(--exam-color-gray-200)}.question-card__number{display:inline-flex;align-items:center;gap:var(--exam-space-2);padding:var(--exam-space-2) var(--exam-space-4);background-color:var(--exam-color-primary-subtle);color:var(--exam-color-primary);border-radius:var(--exam-radius-full);font-size:var(--exam-text-sm);font-weight:var(--exam-font-semibold);margin-bottom:var(--exam-space-6)}.question-card__text{font-size:var(--exam-text-xl);font-weight:var(--exam-font-semibold);color:var(--exam-color-gray-900);line-height:1.5;margin-bottom:var(--exam-space-8)}.question-card__media{margin-bottom:var(--exam-space-8);border-radius:var(--exam-radius-lg);overflow:hidden}.question-card__media audio,.question-card__media img{width:100%;display:block}.options-list{display:flex;flex-direction:column;gap:var(--exam-space-3)}.option{display:flex;align-items:flex-start;gap:var(--exam-space-4);padding:var(--exam-space-5);background-color:var(--exam-color-gray-50);border:2px solid var(--exam-color-gray-200);border-radius:var(--exam-radius-lg);cursor:pointer;transition:all var(--exam-transition-base)}.option:hover{border-color:var(--exam-color-primary-light)}.option--selected,.option:hover{background-color:var(--exam-color-primary-subtle)}.option--selected{border-color:var(--exam-color-primary)}.option--correct{border-color:var(--exam-color-success);background-color:var(--exam-color-success-subtle)}.option--incorrect{border-color:var(--exam-color-error);background-color:var(--exam-color-error-subtle)}.option__marker{width:28px;height:28px;border-radius:var(--exam-radius-full);border:2px solid var(--exam-color-gray-300);display:flex;align-items:center;justify-content:center;font-size:var(--exam-text-sm);font-weight:var(--exam-font-bold);color:var(--exam-color-gray-500);flex-shrink:0;transition:all var(--exam-transition-base)}.option:hover .option__marker{border-color:var(--exam-color-primary);color:var(--exam-color-primary)}.option--selected .option__marker{background-color:var(--exam-color-primary);border-color:var(--exam-color-primary);color:var(--exam-color-white)}.option--correct .option__marker{background-color:var(--exam-color-success);border-color:var(--exam-color-success);color:var(--exam-color-white)}.option--incorrect .option__marker{background-color:var(--exam-color-error);border-color:var(--exam-color-error);color:var(--exam-color-white)}.option__text{font-size:var(--exam-text-base);color:var(--exam-color-gray-700);line-height:1.5;padding-top:2px}.option--selected .option__text{color:var(--exam-color-primary-dark);font-weight:var(--exam-font-medium)}.exam-header{position:sticky;top:0;z-index:100;background-color:var(--exam-color-white);border-bottom:1px solid var(--exam-color-gray-200);box-shadow:var(--exam-shadow-sm)}.exam-header__container{display:flex;align-items:center;justify-content:space-between;padding:var(--exam-space-4) var(--exam-space-6);max-width:1200px;margin:0 auto}.exam-header__brand{display:flex;align-items:center;gap:var(--exam-space-3)}.exam-header__logo{width:40px;height:40px;background:linear-gradient(135deg,var(--exam-color-primary),var(--exam-color-primary-light));border-radius:var(--exam-radius-lg);display:flex;align-items:center;justify-content:center;color:var(--exam-color-white)}.exam-header__logo,.exam-header__title{font-weight:var(--exam-font-bold);font-size:var(--exam-text-lg)}.exam-header__title{color:var(--exam-color-gray-900)}.exam-header__meta{display:flex;align-items:center;gap:var(--exam-space-6)}.exam-header__section-badge{display:flex;align-items:center;gap:var(--exam-space-2);padding:var(--exam-space-2) var(--exam-space-4);border-radius:var(--exam-radius-full);font-size:var(--exam-text-sm);font-weight:var(--exam-font-semibold)}.exam-header__section-badge--listening{background-color:rgba(139,92,246,.1);color:var(--exam-color-listening)}.exam-header__section-badge--reading{background-color:rgba(16,185,129,.1);color:var(--exam-color-reading)}.exam-header__section-badge--writing{background-color:rgba(245,158,11,.1);color:var(--exam-color-writing)}.exam-header__section-badge--speaking{background-color:rgba(239,68,68,.1);color:var(--exam-color-speaking)}.question-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:var(--exam-space-2);max-width:400px}.question-nav__item{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--exam-radius-md);border:2px solid var(--exam-color-gray-200);background-color:var(--exam-color-white);font-size:var(--exam-text-sm);font-weight:var(--exam-font-semibold);color:var(--exam-color-gray-600);cursor:pointer;transition:all var(--exam-transition-base)}.question-nav__item:hover{border-color:var(--exam-color-primary);color:var(--exam-color-primary)}.question-nav__item--current{border-color:var(--exam-color-primary);background-color:var(--exam-color-primary);color:var(--exam-color-white);box-shadow:0 0 0 3px var(--exam-color-primary-subtle)}.question-nav__item--answered{border-color:var(--exam-color-success);background-color:var(--exam-color-success-subtle);color:var(--exam-color-success)}.question-nav__item--flagged{border-color:var(--exam-color-accent);background-color:var(--exam-color-accent-subtle);color:var(--exam-color-accent-dark)}.question-nav__item--flagged:after{content:"";position:absolute;top:2px;right:2px;width:8px;height:8px;background-color:var(--exam-color-accent);border-radius:var(--exam-radius-full)}.exam-layout{display:grid;grid-template-columns:1fr 320px;gap:var(--exam-space-8);max-width:1200px;margin:0 auto;padding:var(--exam-space-8) var(--exam-space-6)}.exam-layout__main{min-width:0}.exam-layout__sidebar{position:sticky;top:calc(73px + var(--exam-space-8));height:fit-content}@media (max-width:968px){.exam-layout{grid-template-columns:1fr}.exam-layout__sidebar{position:static;order:-1}}.exam-start{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--exam-space-8);background:linear-gradient(135deg,var(--exam-color-primary-subtle) 0,var(--exam-color-gray-50) 100%)}.exam-start__card{max-width:640px;width:100%;text-align:center}.exam-start__icon{width:80px;height:80px;margin:0 auto var(--exam-space-6);background:linear-gradient(135deg,var(--exam-color-primary),var(--exam-color-primary-light));border-radius:var(--exam-radius-2xl);display:flex;align-items:center;justify-content:center;color:var(--exam-color-white)}.exam-start__title{font-size:var(--exam-text-3xl);font-weight:var(--exam-font-bold);color:var(--exam-color-gray-900);margin-bottom:var(--exam-space-4)}.exam-start__subtitle{font-size:var(--exam-text-lg);color:var(--exam-color-gray-600);margin-bottom:var(--exam-space-8)}.exam-start__info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--exam-space-4);margin-bottom:var(--exam-space-8)}.exam-start__info-item{padding:var(--exam-space-5);background-color:var(--exam-color-gray-50);border-radius:var(--exam-radius-lg);border:1px solid var(--exam-color-gray-200)}.exam-start__info-value{font-size:var(--exam-text-2xl);font-weight:var(--exam-font-bold);color:var(--exam-color-primary);margin-bottom:var(--exam-space-1)}.exam-start__info-label{font-size:var(--exam-text-sm);color:var(--exam-color-gray-500)}.exam-start__rules{text-align:left;background-color:var(--exam-color-gray-50);border-radius:var(--exam-radius-lg);padding:var(--exam-space-6);margin-bottom:var(--exam-space-8)}.exam-start__rules-title{font-size:var(--exam-text-lg);font-weight:var(--exam-font-semibold);color:var(--exam-color-gray-900);margin-bottom:var(--exam-space-4);display:flex;align-items:center;gap:var(--exam-space-2)}.exam-start__rules-list{list-style:none;display:flex;flex-direction:column;gap:var(--exam-space-3)}.exam-start__rules-list li{display:flex;align-items:flex-start;gap:var(--exam-space-3);font-size:var(--exam-text-sm);color:var(--exam-color-gray-600)}.exam-start__rules-list li:before{content:"✓";width:20px;height:20px;background-color:var(--exam-color-success);color:var(--exam-color-white);border-radius:var(--exam-radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--exam-text-xs);flex-shrink:0;margin-top:1px}.exam-results{min-height:100vh;padding:var(--exam-space-8) var(--exam-space-6);background-color:var(--exam-color-gray-50)}.exam-results__header{text-align:center;margin-bottom:var(--exam-space-10)}.exam-results__badge{display:inline-flex;align-items:center;gap:var(--exam-space-2);padding:var(--exam-space-2) var(--exam-space-4);background-color:var(--exam-color-success-subtle);color:var(--exam-color-success);border-radius:var(--exam-radius-full);font-size:var(--exam-text-sm);font-weight:var(--exam-font-semibold);margin-bottom:var(--exam-space-4)}.exam-results__title{font-size:var(--exam-text-4xl);font-weight:var(--exam-font-bold);color:var(--exam-color-gray-900);margin-bottom:var(--exam-space-4)}.exam-results__subtitle{font-size:var(--exam-text-lg);color:var(--exam-color-gray-600)}.score-card{background:linear-gradient(135deg,var(--exam-color-primary),var(--exam-color-primary-dark));border-radius:var(--exam-radius-2xl);padding:var(--exam-space-10);color:var(--exam-color-white);text-align:center;margin-bottom:var(--exam-space-8)}.score-card__label{font-size:var(--exam-text-sm);font-weight:var(--exam-font-medium);opacity:.9;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--exam-space-2)}.score-card__value{font-size:var(--exam-text-4xl);font-weight:var(--exam-font-bold);margin-bottom:var(--exam-space-2)}.score-card__band{display:inline-block;padding:var(--exam-space-2) var(--exam-space-6);background-color:rgba(255,255,255,.2);border-radius:var(--exam-radius-full);font-size:var(--exam-text-xl);font-weight:var(--exam-font-bold)}.score-breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--exam-space-4);margin-bottom:var(--exam-space-8)}.score-breakdown__item{background-color:var(--exam-color-white);border-radius:var(--exam-radius-xl);padding:var(--exam-space-6);text-align:center;border:1px solid var(--exam-color-gray-200)}.score-breakdown__icon{width:48px;height:48px;border-radius:var(--exam-radius-xl);display:flex;align-items:center;justify-content:center;margin:0 auto var(--exam-space-3);font-size:var(--exam-text-xl)}.score-breakdown__icon--listening{background-color:rgba(139,92,246,.1);color:var(--exam-color-listening)}.score-breakdown__icon--reading{background-color:rgba(16,185,129,.1);color:var(--exam-color-reading)}.score-breakdown__icon--writing{background-color:rgba(245,158,11,.1);color:var(--exam-color-writing)}.score-breakdown__icon--speaking{background-color:rgba(239,68,68,.1);color:var(--exam-color-speaking)}.score-breakdown__label{font-size:var(--exam-text-sm);font-weight:var(--exam-font-medium);color:var(--exam-color-gray-500);margin-bottom:var(--exam-space-1)}.score-breakdown__score{font-size:var(--exam-text-2xl);font-weight:var(--exam-font-bold);color:var(--exam-color-gray-900)}@media (max-width:768px){.exam-start__info-grid{grid-template-columns:1fr}.score-breakdown{grid-template-columns:repeat(2,1fr)}.question-card{padding:var(--exam-space-5)}.exam-header__container{flex-wrap:wrap;gap:var(--exam-space-3)}.exam-header__meta{width:100%;justify-content:space-between}}@media (max-width:480px){.score-breakdown{grid-template-columns:1fr}.btn--lg{padding:var(--exam-space-3) var(--exam-space-6);font-size:var(--exam-text-base)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.animate-fade-in{animation:fadeIn .3s ease-out}.animate-slide-in{animation:slideIn .3s ease-out}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--exam-color-gray-100);border-radius:var(--exam-radius-full)}::-webkit-scrollbar-thumb{background:var(--exam-color-gray-300);border-radius:var(--exam-radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--exam-color-gray-400)}