@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--text:#64748b;--text-h:#0f172a;--text-muted:#94a3b8;--bg:#f1f5f9;--bg-gradient:linear-gradient(135deg, #e0e7ff 0%, #f1f5f9 40%, #fce7f3 100%);--card-bg:#ffffffb3;--card-bg-solid:#fff;--card-border:#fffc;--border:#e2e8f0;--primary:#6366f1;--primary-hover:#4f46e5;--primary-soft:#6366f11a;--correct:#10b981;--correct-bg:#10b9811a;--incorrect:#f43f5e;--incorrect-bg:#f43f5e1a;--tag-bg:#6366f114;--tag-text:#6366f1;--input-bg:#fffc;--input-border:#e2e8f0;--input-focus:#6366f14d;--shadow-sm:0 1px 2px #0000000a;--shadow:0 4px 6px -1px #0000000d, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 25px -5px #00000014, 0 8px 10px -6px #0000000a;--radius:16px;--radius-sm:10px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:15px/1.6 Inter,system-ui,-apple-system,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#94a3b8;--text-h:#f1f5f9;--text-muted:#64748b;--bg:#0f172a;--bg-gradient:linear-gradient(135deg, #1e1b4b 0%, #0f172a 40%, #1c1917 100%);--card-bg:#1e293bb3;--card-bg-solid:#1e293b;--card-border:#33415580;--border:#1e293b;--primary:#818cf8;--primary-hover:#6366f1;--primary-soft:#818cf81f;--correct:#34d399;--correct-bg:#34d3991f;--incorrect:#fb7185;--incorrect-bg:#fb71851f;--tag-bg:#818cf81f;--tag-text:#a5b4fc;--input-bg:#1e293bcc;--input-border:#334155;--input-focus:#818cf84d;--shadow-sm:0 1px 2px #0003;--shadow:0 4px 6px -1px #0003, 0 2px 4px -2px #00000026;--shadow-lg:0 10px 25px -5px #0000004d, 0 8px 10px -6px #0003}}*{box-sizing:border-box}body{background:var(--bg);background-image:var(--bg-gradient);background-attachment:fixed;min-height:100vh;margin:0}#root{max-width:960px;min-height:100vh;margin:0 auto}h1,h2,h3{color:var(--text-h);letter-spacing:-.02em}::selection{background:var(--primary-soft);color:var(--text-h)}.app{padding:0 24px 60px}.app-header{text-align:center;padding:32px 0 24px}.app-header h1{color:var(--text-h);letter-spacing:-.03em;background:linear-gradient(135deg, var(--primary) 0%, #ec4899 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 20px;font-size:32px;font-weight:700}.nav{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--card-border);box-shadow:var(--shadow-sm);border-radius:14px;gap:4px;padding:4px;display:inline-flex}.nav-btn{border-radius:var(--radius-sm);color:var(--text);cursor:pointer;background:0 0;border:none;padding:8px 20px;font-family:inherit;font-size:14px;font-weight:500;transition:all .25s}.nav-btn:hover{color:var(--primary);background:var(--primary-soft)}.nav-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px #6366f14d}.btn{border-radius:var(--radius-sm);cursor:pointer;letter-spacing:-.01em;border:none;padding:10px 22px;font-family:inherit;font-size:14px;font-weight:600;transition:all .25s}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 2px 8px #6366f140}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px #6366f159}.btn-secondary{background:var(--card-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text-h);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}.btn-correct{background:var(--correct);color:#fff;border-radius:12px;padding:14px 36px;font-size:15px;box-shadow:0 2px 8px #10b9814d}.btn-correct:hover{transform:translateY(-1px);box-shadow:0 4px 12px #10b98166}.btn-incorrect{background:var(--incorrect);color:#fff;border-radius:12px;padding:14px 36px;font-size:15px;box-shadow:0 2px 8px #f43f5e4d}.btn-incorrect:hover{transform:translateY(-1px);box-shadow:0 4px 12px #f43f5e66}.btn-delete{background:var(--incorrect-bg);color:var(--incorrect);cursor:pointer;border:1px solid #0000;border-radius:6px;padding:4px 10px;font-family:inherit;font-size:13px;font-weight:500;line-height:1.4;transition:all .2s}.btn-delete:hover{color:var(--incorrect);background:var(--incorrect-bg)}.add-word-form{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:var(--radius);max-width:520px;box-shadow:var(--shadow-lg);margin:0 auto;padding:32px}.add-word-form h2{margin:0 0 24px;font-size:20px;font-weight:600}.existing-word-notice{margin-top:4px}.existing-word-label{color:var(--primary);margin-bottom:10px;font-size:13px;font-weight:600}.existing-word-card{background:var(--primary-soft);border:1px solid var(--card-border);border-radius:var(--radius-sm);padding:16px}.existing-word-card .word-text{font-size:16px}.existing-word-card .word-translation{margin:4px 0;font-size:14px}.existing-word-card .word-example{margin:8px 0}.existing-word-card .word-stats{border-top:1px solid var(--border);margin-top:10px;padding-top:10px}.form-image-preview{text-align:center;margin-bottom:20px}.image-loading{color:var(--text-muted);padding:24px;font-size:13px;animation:1s infinite pulse}.image-preview-wrapper{display:inline-block;position:relative}.word-image-preview{border-radius:var(--radius-sm);object-fit:cover;max-width:100%;max-height:180px}.btn-remove-image{color:#fff;cursor:pointer;background:#0009;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;line-height:1;display:flex;position:absolute;top:6px;right:6px}.btn-remove-image:hover{background:#000c}.word-image{object-fit:cover;border-radius:var(--radius-xs,6px);width:100%;max-height:120px;margin-bottom:8px}.input-with-status{position:relative}.input-with-status input{padding-left:36px}.input-status{color:var(--primary);font-size:14px;font-weight:600;animation:1s infinite pulse;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.input-status.valid{color:var(--correct);animation:none}.input-status.invalid{color:var(--incorrect);animation:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.spell-status{color:var(--text-muted);margin-top:6px;font-size:12px;animation:1s infinite pulse}.spell-error{color:var(--incorrect);margin-top:6px;font-size:13px}.spell-suggestions{color:var(--text);margin-top:4px}.spell-suggestion{color:var(--primary);cursor:pointer;background:0 0;border:none;padding:0 2px;font-family:inherit;font-size:13px;font-weight:600;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.spell-suggestion:hover{color:var(--primary-hover)}.form-group{margin-bottom:20px}.form-group label{color:var(--text-h);letter-spacing:.01em;margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-group input{border:1.5px solid var(--input-border);border-radius:var(--radius-sm);background:var(--input-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);width:100%;color:var(--text-h);padding:11px 14px;font-family:inherit;font-size:14px;transition:all .25s}.form-group input::placeholder{color:var(--text-muted)}.form-group input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--input-focus);outline:none}.word-list-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.word-list-header h2{margin:0;font-size:20px;font-weight:600}.word-list-actions{gap:8px;display:flex}.import-btn{cursor:pointer}.filters{align-items:center;gap:12px;margin-bottom:24px;display:flex}.btn-fav-filter{background:var(--card-bg);border:1.5px solid var(--input-border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);padding:9px 12px;font-size:16px;line-height:1;transition:all .2s}.btn-fav-filter:hover{border-color:var(--primary);color:#f59e0b}.btn-fav-filter.active{color:#f59e0b;background:#f59e0b14;border-color:#f59e0b}.btn-fav{cursor:pointer;color:var(--text-muted);background:0 0;border:none;padding:0;font-size:16px;line-height:1;transition:color .2s}.btn-fav:hover,.btn-fav.active{color:#f59e0b}.btn-play{cursor:pointer;background:0 0;border:none;padding:0;line-height:1;transition:transform .15s}.btn-play.sm{font-size:16px}.btn-play.md{font-size:22px}.btn-play:hover{transform:scale(1.2)}.btn-play.playing{animation:.8s pulse}.search-input-wrapper{flex:1}.search-input-wrapper .search-input{width:100%}.search-input{border:1.5px solid var(--input-border);border-radius:var(--radius-sm);background:var(--input-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--text-h);padding:11px 14px;font-family:inherit;font-size:14px;transition:all .25s}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--input-focus);outline:none}.filters select{border:1.5px solid var(--input-border);border-radius:var(--radius-sm);background:var(--input-bg);color:var(--text-h);cursor:pointer;padding:11px 14px;font-family:inherit;font-size:14px}.filters select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--input-focus);outline:none}.empty-state{text-align:center;color:var(--text-muted);padding:60px 20px;font-size:15px}.words-table{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.word-row{border-bottom:1px solid var(--border);align-items:center;gap:14px;padding:14px 20px;transition:background .15s;display:flex}.word-row-image{object-fit:cover;border-radius:8px;flex-shrink:0;width:44px;height:44px}.word-row-image.placeholder{background:var(--primary-soft);color:var(--primary);justify-content:center;align-items:center;font-size:18px;font-weight:600;display:flex}.word-row-content{flex:1;min-width:0}.word-row:last-child{border-bottom:none}.word-row:hover{background:var(--primary-soft)}.word-row-main{flex-wrap:wrap;align-items:baseline;gap:8px;display:flex}.word-row-sep{color:var(--text-muted)}.word-row-meta{flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px;display:flex}.word-row-right{align-items:center;gap:10px;margin-left:auto;display:flex}.word-text{color:var(--text-h);font-size:15px;font-weight:600}.word-translation{color:var(--text);font-size:14px}.word-example{color:var(--text-muted);font-size:13px;font-style:italic}.word-tags{flex-wrap:wrap;gap:6px;display:flex}.tag{background:var(--tag-bg);color:var(--tag-text);letter-spacing:.02em;text-transform:lowercase;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600}.word-stats{border-top:1px solid var(--border);gap:14px;margin-top:14px;padding-top:12px;font-size:13px;font-weight:500;display:flex}.stat.correct{color:var(--correct)}.stat.correct:before{content:"✓"}.stat.incorrect{color:var(--incorrect)}.stat.incorrect:before{content:"✗"}.flashcard-container{flex-direction:column;align-items:center;gap:28px;padding:32px 0;display:flex}.flashcard-progress{color:var(--text-muted);background:var(--card-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--card-border);border-radius:20px;padding:6px 16px;font-size:13px;font-weight:600}.flashcard{perspective:1000px;cursor:pointer;width:100%;max-width:440px;height:280px;position:relative}.flashcard-front,.flashcard-back{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--card-border);box-shadow:var(--shadow-lg);backface-visibility:hidden;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:32px;transition:transform .6s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;inset:0}.flashcard-front{transform:rotateY(0)}.flashcard-back{transform:rotateY(180deg)}.flashcard.flipped .flashcard-front{transform:rotateY(-180deg)}.flashcard.flipped .flashcard-back{transform:rotateY(0)}.flashcard-label{text-transform:uppercase;letter-spacing:1.5px;color:var(--primary);font-size:11px;font-weight:700}.flashcard-text{color:var(--text-h);letter-spacing:-.02em;font-size:30px;font-weight:700}.flashcard-hint{color:var(--text-muted);font-size:12px}.flashcard-image{border-radius:var(--radius-xs,6px);object-fit:cover;max-height:80px}.flashcard-example{color:var(--text);text-align:center;font-size:14px;font-style:italic;line-height:1.5}.flashcard-actions{gap:16px;display:flex}.quiz-container{flex-direction:column;align-items:center;gap:28px;padding:32px 0;display:flex}.quiz-question{text-align:center}.quiz-question h3{color:var(--text-muted);margin:0 0 8px;font-size:15px;font-weight:500}.quiz-word-row{justify-content:center;align-items:center;gap:10px;display:flex}.quiz-word{color:var(--text-h);letter-spacing:-.02em;font-size:36px;font-weight:700}.quiz-example{color:var(--text-muted);margin-top:10px;font-size:14px;font-style:italic}.quiz-options{grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:520px;display:grid}.quiz-option{border:2px solid var(--border);background:var(--card-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text-h);cursor:pointer;border-radius:14px;padding:16px 18px;font-family:inherit;font-size:14px;font-weight:500;transition:all .25s}.quiz-option:hover:not(:disabled){border-color:var(--primary);background:var(--primary-soft);box-shadow:var(--shadow);transform:translateY(-2px)}.quiz-option.correct{border-color:var(--correct);background:var(--correct-bg);box-shadow:0 2px 8px #10b98133}.quiz-option.incorrect{border-color:var(--incorrect);background:var(--incorrect-bg);box-shadow:0 2px 8px #f43f5e33}.session-complete{text-align:center;background:var(--card-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--card-border);box-shadow:var(--shadow-lg);border-radius:20px;padding:40px}.session-complete h2{margin:0 0 20px;font-size:24px;font-weight:700}.session-stats{justify-content:center;gap:32px;margin-bottom:28px;font-size:18px;font-weight:600;display:flex}@media (width<=640px){.app{padding:0 16px 40px}.app-header h1{font-size:26px}.nav{flex-wrap:wrap;justify-content:center}.words-grid,.quiz-options{grid-template-columns:1fr}.flashcard-actions{flex-direction:column;width:100%;max-width:440px}.flashcard-actions .btn{width:100%}.filters{flex-direction:column}}