@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700&family=Be+Vietnam+Pro:wght@400;500;700&display=swap";:root{--font-heading:"Plus Jakarta Sans", sans-serif;--font-body:"Be Vietnam Pro", sans-serif;--color-primary:#fdc003;--color-primary-dark:#553e00;--color-primary-light:#ffe796;--color-bg:#fffbf2;--color-bg-header:#fff6e1;--color-bg-hero:#fae18c;--color-card-bg:#fff0c4;--color-card-border:#ffe796;--color-placeholder-bg:#b3d4ff;--color-chip-bg:#fff0c4;--color-level-card-bg:#fff5d9;--color-footer-bg:#fff0c4;--color-text:#392e00;--color-text-light:#695b23;--color-text-muted:#695b23;--color-white:#fff;--color-logo:#755700;--color-blue:#b3d4ff;--color-blue-btn:#b3d4ff;--color-blue-dark:#004a7e;--color-green:#006b1b;--color-green-dark:#006b1b;--color-green-progress:#006b1b;--color-green-light:#d1ffc8;--color-red:#f95630;--color-yellow-btn:#fdc003;--color-badge-green:#91f78e;--color-audio-teal:#3a7d8c;--color-btn-primary-shadow:#755700;--color-btn-secondary-shadow:#00528b;--color-btn-danger-bg:#d4654a;--color-btn-danger-shadow:#b05038;--color-lesson-btn-bg:#ffeaad;--color-lesson-btn-shadow:#edd374;--color-vocab-card-shadow:#edd374;--color-quiz-meta:#664b00;--color-quiz-counter:#005e9f;--color-quiz-option-border:#bfac6c;--color-quiz-label-bg:#006b1b;--color-level-badge-overlay:#ffe288;--color-badge-green-text:#005e17;--color-black:#000;--color-blob-blue:#b3d4ff;--color-blob-green:#91f78e;--color-decor-star:#fdc003;--color-decor-badge:#006b1b;--color-decor-sparkle:#005e9f;--color-decor-dot-green:#83e881;--color-decor-dot-blue:#b3d4ff;--color-decor-dot-yellow:#fdc003;--color-decor-dot-red:#f95630;--font-size-2xs:12px;--font-size-xs:14px;--font-size-sm:16px;--font-size-base:16px;--font-size-md:18px;--font-size-lg:20px;--font-size-xl:24px;--font-size-2xl:30px;--font-size-3xl:36px;--font-size-4xl:clamp(28px, 5vw, 48px);--font-size-5xl:clamp(32px, 6vw, 60px);--font-size-6xl:clamp(36px, 7vw, 72px);--font-size-7xl:clamp(36px, 8vw, 80px);--space-1:4px;--space-1-5:6px;--space-2:8px;--space-2-5:10px;--space-3:12px;--space-3-5:14px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-9:36px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-sm:6px;--radius-md:12px;--radius-lg:28px;--radius-xl:32px;--radius-full:50%;--radius-pill:9999px;--shadow-card:0 2px 8px #0000000f;--shadow-button:0 3px 8px #0000001a;--shadow-btn-primary:0 4px 0 var(--color-btn-primary-shadow);--shadow-btn-secondary:0 4px 0 var(--color-btn-secondary-shadow);--shadow-btn-danger:0 3px 0 var(--color-btn-danger-shadow);--shadow-vocab-card:4px 4px 0 var(--color-vocab-card-shadow);--shadow-hero-card:0 8px 0 var(--color-card-border);--max-width-page:1200px;--max-width-narrow:1024px;--max-width-quiz:896px;--max-width-result:848px}.btn{padding:var(--space-5) var(--space-12);border-radius:var(--radius-pill);font-family:var(--font-heading);font-size:var(--font-size-lg);cursor:pointer;justify-content:center;align-items:center;gap:var(--space-3);border:none;font-weight:700;text-decoration:none;transition:transform .15s,box-shadow .15s;display:inline-flex}.btn:hover{transform:translateY(-2px)}.btn--primary:hover{box-shadow:0 6px 0 var(--color-btn-primary-shadow)}.btn--secondary:hover{box-shadow:0 6px 0 var(--color-btn-secondary-shadow)}.btn--danger:hover{box-shadow:0 5px 0 var(--color-btn-danger-shadow)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--color-yellow-btn);color:var(--color-primary-dark);box-shadow:var(--shadow-btn-primary)}.btn--secondary{background:var(--color-blue-btn);color:var(--color-blue-dark);box-shadow:var(--shadow-btn-secondary)}.btn--danger{background:var(--color-btn-danger-bg);color:var(--color-white);box-shadow:var(--shadow-btn-danger)}.btn--lg{padding:var(--space-5) var(--space-12);font-size:var(--font-size-lg);min-width:200px;height:56px}@media (width<=480px){.btn{padding:var(--space-4) var(--space-8);font-size:var(--font-size-base)}.btn--lg{min-width:unset;width:100%;height:48px;padding:var(--space-4) var(--space-6);font-size:var(--font-size-base)}}.tag{padding:var(--space-1) var(--space-3);background:var(--color-primary-light);border-radius:var(--radius-pill);font-size:var(--font-size-2xs);color:var(--color-logo);text-transform:uppercase;letter-spacing:.5px;font-weight:700}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;line-height:1.6}a{color:inherit;text-decoration:none}button{font-family:var(--font-body);cursor:pointer;border:none;outline:none}img{max-width:100%;display:block}#root{flex-direction:column;min-height:100vh;display:flex}.app-main{flex:1}.header{background:var(--color-bg-header);flex-direction:column;display:flex}.header__inner{padding:var(--space-4) var(--space-6);align-items:center;display:flex}.header-logo{font-family:var(--font-heading);font-weight:700;font-size:var(--font-size-xl);color:var(--color-logo)}.header__bar{background:var(--color-card-bg);height:4px}@media (width<=480px){.header__inner{padding:var(--space-3) var(--space-4)}.header-logo{font-size:var(--font-size-lg)}}.footer{background:var(--color-footer-bg);padding:var(--space-8) 0;margin-top:auto}.footer__inner{padding:0 var(--space-8);justify-content:flex-start;align-items:center;display:flex}.footer__copy{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-logo);font-weight:500}@media (width<=480px){.footer__copy{font-size:var(--font-size-xs)}}