*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0}button,input{font:inherit}:root{--gradient: linear-gradient(135deg, #22d3ee 0%, #4ade80 100%)}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,sans-serif;color:#e2e8f0;background:radial-gradient(1000px 600px at 10% -10%,rgba(34,211,238,.15),transparent 60%),radial-gradient(900px 600px at 110% 10%,rgba(74,222,128,.12),transparent 60%),#0b1220}.app{min-height:100vh;display:grid;grid-template-rows:auto 1fr}.header{display:grid;grid-template-columns:max-content 1fr max-content;align-items:center;gap:1rem;padding:.75rem 1rem;position:sticky;top:0;z-index:10;background:#0b122099;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.06)}.header__mode{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem;border-radius:999px;background:#ffffff0f}.header__mode-btn{border:none;background:transparent;color:#94a3b8;font-weight:700;padding:.35rem .65rem;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease}.header__mode-btn:hover{color:#e2e8f0}.header__mode-btn--active{background:var(--gradient);color:#0f172a;box-shadow:0 10px 24px #00000040}.header__title{font-size:1.1rem;text-align:center;font-weight:800;letter-spacing:.2px}.header__meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}.header__flame{filter:drop-shadow(0 2px 6px rgba(255,165,0,.35))}.header__streak{display:inline-flex;align-items:center;gap:.25rem;background:#ffffff0f;border-radius:999px;padding:.3rem .6rem}.header__streak-num{font-weight:800}.header__accuracy{background:#ffffff0f;border-radius:999px;padding:.3rem .6rem;font-weight:700}.header__stats{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:12px;padding:.9rem 1.1rem;font-weight:700;cursor:pointer;transition:transform .08s ease,box-shadow .2s ease,background .2s ease,color .2s ease,opacity .2s ease}.header__stats:active{transform:translateY(1px) scale(.99)}.header__stats:disabled{opacity:.6;cursor:not-allowed}.header__stats{background:linear-gradient(135deg,#ffffff1f,#ffffff0a);color:#e2e8f0;white-space:nowrap}.main{margin:0 auto;max-width:720px;padding:1.2rem 1rem 3rem;display:grid;align-items:start;gap:1rem}.progress{position:relative;height:12px;border-radius:999px;overflow:hidden;background:#ffffff0f}.progress__bar{height:100%;background:var(--gradient);transition:width .35s ease}.progress__label{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:.75rem;color:#94a3b8;font-weight:700}.card{background:#ffffff0a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 30px #00000059;border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:1.1rem 1rem;display:grid;gap:.8rem;transform-origin:50% 60%;animation:pop .25s ease}.card__term{text-align:center;font-weight:800;font-size:clamp(1.8rem,5vw,2.6rem);letter-spacing:.3px;word-break:break-word}.card__part-tags{display:flex;justify-content:center;gap:.5rem;color:#94a3b8;font-weight:600;flex-wrap:wrap}.card__part,.card__tags{background:#ffffff0f;padding:.2rem .5rem;border-radius:999px}.card__input{border-radius:20px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#e2e8f0;padding:1rem;font-size:1rem}.card__input:focus{outline:none;box-shadow:0 0 0 3px #22d3ee80}.card__hint{text-align:center;color:#94a3b8;min-height:1.2rem;font-size:.9rem}.card--correct{animation:ok .4s ease;border-color:#34d39980}.card--wrong{animation:wrong .4s ease;border-color:#fb718580}@keyframes pop{0%{transform:scale(.98);opacity:0}to{transform:scale(1);opacity:1}}@keyframes ok{0%{transform:scale(1)}30%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes wrong{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:12px;padding:.9rem 1.1rem;font-weight:700;cursor:pointer;transition:transform .08s ease,box-shadow .2s ease,background .2s ease,color .2s ease,opacity .2s ease}.btn:active{transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn{background:#ffffff14;color:#e2e8f0}.btn:hover{box-shadow:0 10px 24px #00000040}.btn--primary{background:var(--gradient);color:#0f172a;text-shadow:0 1px 0 rgba(255,255,255,.2)}.btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.18)}.answer{min-height:1.4rem;display:grid;place-items:center;text-align:center}.answer__text{color:#94a3b8;font-weight:600}.answer__text--ok{color:#34d399;font-weight:800}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:grid;place-items:center;padding:1rem;z-index:50}.modal__dialog{background:#ffffff14;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 30px #00000059;border:1px solid rgba(255,255,255,.06);width:min(560px,100%);border-radius:24px;padding:1rem}.modal__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.06)}.modal__close{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:12px;padding:.9rem 1.1rem;font-weight:700;cursor:pointer;transition:transform .08s ease,box-shadow .2s ease,background .2s ease,color .2s ease,opacity .2s ease}.modal__close:active{transform:translateY(1px) scale(.99)}.modal__close:disabled{opacity:.6;cursor:not-allowed}.modal__close{background:#ffffff14;color:#e2e8f0;width:36px;height:36px;border-radius:10px;font-size:1.2rem;line-height:1}.modal__list{display:grid;gap:.6rem;margin:1rem 0 0;padding:0;list-style:none}.modal__list li{background:#ffffff0d;padding:.7rem .9rem;border-radius:20px}@media (max-width: 768px){.header{grid-template-columns:1fr;text-align:center;gap:.75rem}.header__mode,.header__meta{justify-content:center}}@media (max-width: 560px){.controls{grid-template-columns:1fr}.header__title{font-size:1rem}.header__mode{flex-wrap:wrap}}