:root{--bg: #0f0f1a;--surface: #1a1a2e;--text: #f0f0f5;--text-muted: #8888aa;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;line-height:1.5;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;gap:1.25rem;max-width:500px;margin:0 auto}.header{text-align:center}.title{font-size:1.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:.5rem}.title-icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.6rem;background:linear-gradient(135deg,#667eea,#764ba2);font-size:.85rem;font-weight:800;letter-spacing:-.02em}.subtitle{color:var(--text-muted);font-size:.9rem}.categories{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.cat-btn{background:var(--surface);border:1.5px solid transparent;color:var(--text-muted);padding:.35rem .85rem;border-radius:999px;font-size:.8rem;cursor:pointer;transition:all .2s}.cat-btn:hover{color:var(--text);border-color:var(--cat-color)}.cat-btn.active{background:color-mix(in srgb,var(--cat-color) 20%,transparent);color:var(--cat-color);border-color:var(--cat-color);font-weight:600}.progress-bar{width:100%;height:4px;background:var(--surface);border-radius:2px;overflow:hidden}.progress-fill{height:100%;border-radius:2px;transition:width .3s ease,background .3s ease}.progress-text{font-size:.75rem;color:var(--text-muted);font-variant-numeric:tabular-nums}.card-container{perspective:1000px;width:100%;max-width:380px;height:280px;transition:transform .2s ease}.card-container.slide-left{transform:translate(-30px);opacity:.5}.card-container.slide-right{transform:translate(30px);opacity:.5}.flashcard{width:100%;height:100%;cursor:pointer;position:relative}.flashcard-inner{width:100%;height:100%;position:relative;transition:transform .5s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:1.25rem;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:.75rem}.flashcard-front{background:linear-gradient(145deg,color-mix(in srgb,var(--card-color) 25%,var(--surface)),color-mix(in srgb,var(--card-color) 10%,var(--surface)));border:2px solid color-mix(in srgb,var(--card-color) 40%,transparent);box-shadow:0 0 40px color-mix(in srgb,var(--card-color) 15%,transparent),0 8px 32px #0000004d}.flashcard-back{background:linear-gradient(145deg,color-mix(in srgb,var(--card-color) 35%,var(--surface)),color-mix(in srgb,var(--card-color) 15%,var(--surface)));border:2px solid color-mix(in srgb,var(--card-color) 50%,transparent);box-shadow:0 0 50px color-mix(in srgb,var(--card-color) 20%,transparent),0 8px 32px #0000004d;transform:rotateY(180deg)}.card-category{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--card-color);font-weight:600;opacity:.8}.card-word{font-size:2.5rem;font-weight:700;letter-spacing:-.02em}.card-hint{font-size:.8rem;color:var(--text-muted);opacity:.6}.card-translation{font-size:2rem;font-weight:700}.card-example{font-size:.9rem;color:var(--text-muted);text-align:center;line-height:1.6;font-style:italic}.controls{display:flex;align-items:center;gap:1rem}.nav-btn{width:3rem;height:3rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.1);background:var(--surface);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.nav-btn:hover{background:#ffffff1a;border-color:#fff3}.master-btn{padding:.6rem 1.5rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.1);background:var(--surface);color:var(--text-muted);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.master-btn:hover{border-color:#6bcb77;color:#6bcb77}.master-btn.mastered{background:linear-gradient(135deg,#6bcb77,#4ecdc4);color:#0f0f1a;border-color:transparent;box-shadow:0 0 20px #6bcb774d}.score{font-size:.8rem;color:var(--text-muted);font-variant-numeric:tabular-nums}