html,body,#root{width:100%;min-height:100vh;margin:0}*{box-sizing:border-box}:root{--page-text:#243042;--muted-text:#5f6c80;--card-bg:#ffffffeb;--card-border:#ffffff73;--input-bg:#f4f7fb;--input-border:#cfd8e3;--input-focus:#7c9cff;--primary:#5b7cff;--primary-hover:#4c6ef5;--secondary:#8b5cf6;--secondary-hover:#7c3aed;--success:#1f9d68;--error:#d64545;--badge-bg:#eef3ff;--badge-text:#3554b4}body{color:var(--page-text);background-color:#dfe8f3;background-image:url(/background.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;margin:0;font-family:Arial,sans-serif}#root{min-height:100vh}.app{justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex;position:relative}.overlay{display:none}.card{z-index:1;background:var(--card-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--card-border);text-align:center;border-radius:28px;width:100%;max-width:560px;padding:32px;position:relative;box-shadow:0 18px 50px #161e322e}.title{color:#2f3d5c;margin-top:0;margin-bottom:16px;font-size:2.4rem}.selectors{flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:18px;display:flex}.selectorGroup{text-align:left;flex-direction:column;gap:8px;display:flex}.selectorGroup label{color:var(--muted-text);font-weight:700}.selectorGroup select{border:1px solid var(--input-border);background:var(--input-bg);color:var(--page-text);border-radius:14px;outline:none;padding:12px 14px;font-size:1rem}.selectorGroup select:focus{border-color:var(--input-focus)}.selectionSummary{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:22px;display:flex}.summaryBadge{background:var(--badge-bg);color:var(--badge-text);border-radius:999px;padding:8px 14px;font-size:.95rem;font-weight:700}.instruction{color:var(--muted-text);margin-bottom:8px;font-size:1.05rem}.word{color:#2e4a9d;margin-top:0;margin-bottom:24px;font-size:2.3rem}.answerInput{border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:var(--page-text);border-radius:16px;outline:none;padding:14px 16px;font-size:1rem}.answerInput::placeholder{color:#8b96a8}.answerInput:focus{border-color:var(--input-focus);box-shadow:0 0 0 4px #7c9cff24}.buttonRow{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px;display:flex}.primaryButton,.secondaryButton{cursor:pointer;color:#fff;border:none;border-radius:16px;padding:12px 18px;font-size:1rem;font-weight:700;transition:transform .15s,opacity .15s,background-color .15s}.primaryButton{background-color:var(--primary)}.primaryButton:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.secondaryButton{background-color:var(--secondary)}.secondaryButton:hover{background-color:var(--secondary-hover);transform:translateY(-1px)}.feedback{margin-top:18px;font-size:1.1rem;font-weight:700}.correct{color:var(--success)}.wrong{color:var(--error)}.counter{color:var(--muted-text);margin-top:18px;font-size:.95rem}.emptyText{color:var(--muted-text)}.pageShell{z-index:1;width:100%;max-width:760px;position:relative}.topBar{flex-direction:column;align-items:center;gap:16px;margin-bottom:20px;display:flex}.appTitle{color:#fff;text-shadow:0 4px 18px #00000040;margin:0;font-size:2.5rem}.navBar{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.navButton{color:#3554b4;background:#ffffffe0;border:1px solid #fff9;border-radius:999px;padding:12px 18px;font-weight:700;text-decoration:none;transition:transform .15s,background-color .15s;box-shadow:0 10px 24px #1822381f}.navButton:hover{transform:translateY(-1px)}.activeNavButton{color:#fff;background:#3554b4}.flashcard{background:#eef3ffcc;border:1px solid #dbe5ff;border-radius:24px;margin-top:10px;padding:28px 20px}.flashcardLabel{color:var(--muted-text);margin-bottom:8px;font-weight:700}.flashcardHint{color:var(--muted-text);margin-top:12px}.progressBar{background:#cfd8e3b3;border-radius:999px;width:100%;height:12px;margin-bottom:20px;overflow:hidden}.progressBarFill{background:linear-gradient(90deg,#5b7cff,#8b5cf6);border-radius:999px;height:100%;transition:width .25s}.flashcardGame{cursor:pointer;perspective:1000px;background:0 0;border:none;width:100%;margin-top:8px;padding:0}.flashcardInner{width:100%;min-height:280px;transform-style:preserve-3d;transition:transform .6s;position:relative}.flashcardGame.isFlipped .flashcardInner{transform:rotateY(180deg)}.flashcardFace{backface-visibility:hidden;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:28px 20px;display:flex;position:absolute;inset:0;box-shadow:0 16px 32px #1822381f}.flashcardFront{background:linear-gradient(#eef3fff2,#fffffffa);border:1px solid #dbe5ff}.flashcardBack{background:linear-gradient(#e8faf1f2,#fffffffa);border:1px solid #cfeedd;transform:rotateY(180deg)}.flashcardLabel{color:var(--muted-text);margin:0;font-weight:700}.flashcardAnswer{color:#1f9d68;margin:0;font-size:2rem;font-weight:700}.flashcardHint{color:var(--muted-text);margin:0}.flashcardGame:focus-visible{outline-offset:6px;border-radius:28px;outline:3px solid #7c9cff80}.primaryButton:disabled,.secondaryButton:disabled{opacity:.5;cursor:not-allowed;transform:none}.flashcardResult{text-align:center}.resultStats{grid-template-columns:1fr 1fr;gap:16px;margin:24px 0;display:grid}.resultStatCard{background:#f4f7fbe6;border:1px solid #dbe5ff;border-radius:20px;padding:18px}.resultStatLabel{color:var(--muted-text);margin-bottom:8px;font-size:.95rem;display:block}.resultStatCard strong{color:#2f3d5c;font-size:2rem}@media (width<=640px){.flashcardInner{min-height:240px}.resultStats{grid-template-columns:1fr}}.celebrationTitle{animation:.8s bounceIn}.celebrationText{color:#8b5cf6;margin-top:10px;font-size:1.1rem;font-weight:700}.celebrationStars{height:56px;margin-bottom:8px;position:relative}.star{font-size:1.8rem;animation:2.4s ease-in-out infinite floatStar;position:absolute}.star1{animation-delay:0s;top:10px;left:14%}.star2{animation-delay:.2s;top:0;left:32%}.star3{animation-delay:.4s;top:14px;left:50%}.star4{animation-delay:.6s;top:2px;left:66%}.star5{animation-delay:.8s;top:12px;left:82%}@keyframes floatStar{0%{opacity:.85;transform:translateY(0)scale(1)}50%{opacity:1;transform:translateY(-8px)scale(1.08)}to{opacity:.85;transform:translateY(0)scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.85)}60%{opacity:1;transform:scale(1.06)}to{transform:scale(1)}}