:root{--primary: #6C63FF;--primary-light: #8B83FF;--primary-dark: #5A52E0;--secondary: #00C9A7;--secondary-light: #33D4B9;--accent: #FF6B6B;--accent-light: #FF8A8A;--warning: #FFB347;--success: #4ECB71;--error: #FF5252;--bg: #F0F2FF;--bg-card: rgba(255, 255, 255, .85);--bg-glass: rgba(255, 255, 255, .6);--text: #2D2B55;--text-light: #6E6B9E;--text-muted: #A09DC0;--border: rgba(108, 99, 255, .15);--radius-sm: 12px;--radius-md: 16px;--radius-lg: 24px;--radius-xl: 32px;--shadow-sm: 0 2px 8px rgba(108, 99, 255, .08);--shadow-md: 0 4px 20px rgba(108, 99, 255, .12);--shadow-lg: 0 8px 40px rgba(108, 99, 255, .16);--shadow-glow: 0 0 30px rgba(108, 99, 255, .25);--font: "Nunito", sans-serif;--transition: .3s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;background-image:radial-gradient(ellipse at 20% 50%,rgba(108,99,255,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(0,201,167,.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(255,107,107,.05) 0%,transparent 50%)}#app{min-height:100vh;display:flex;flex-direction:column}h1{font-size:2rem;font-weight:900}h2{font-size:1.5rem;font-weight:800}h3{font-size:1.2rem;font-weight:700}.page{max-width:900px;margin:0 auto;padding:1.5rem;width:100%;animation:pageIn .4s ease-out}@keyframes pageIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.app-header{background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}.app-header .logo{font-size:1.3rem;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;cursor:pointer;display:flex;align-items:center;gap:.4rem}.app-header .logo:hover{transform:scale(1.03);transition:var(--transition)}.header-right{display:flex;align-items:center;gap:.75rem}.nav-btn{background:none;border:2px solid var(--border);border-radius:var(--radius-sm);padding:.4rem .9rem;font-family:var(--font);font-weight:700;font-size:.85rem;color:var(--text-light);cursor:pointer;transition:var(--transition)}.nav-btn:hover{border-color:var(--primary);color:var(--primary);background:#6c63ff0f}.nav-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.card{background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);transition:var(--transition)}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}.feature-card{background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid var(--border);border-radius:var(--radius-xl);padding:2.5rem 2rem;text-align:center;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;transition:var(--transition);border-radius:inherit}.feature-card.manage:before{background:linear-gradient(135deg,#6c63ff1a,#00c9a71a)}.feature-card.quiz:before{background:linear-gradient(135deg,#ff6b6b1a,#ffb3471a)}.feature-card:hover:before{opacity:1}.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--primary-light)}.feature-card:active{transform:translateY(-2px)}.feature-card .icon{font-size:3.5rem;margin-bottom:1rem;display:block;animation:float 3s ease-in-out infinite}.feature-card .title{font-size:1.4rem;font-weight:800;margin-bottom:.5rem;position:relative}.feature-card .subtitle{color:var(--text-light);font-size:.95rem;font-weight:600;position:relative}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.5rem;border:none;border-radius:var(--radius-md);font-family:var(--font);font-weight:700;font-size:.95rem;cursor:pointer;transition:var(--transition);text-decoration:none}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 15px #6c63ff4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c63ff66}.btn-secondary{background:linear-gradient(135deg,var(--secondary),#00A88A);color:#fff;box-shadow:0 4px 15px #00c9a74d}.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00c9a766}.btn-danger{background:linear-gradient(135deg,var(--accent),#E05050);color:#fff}.btn-outline{background:transparent;border:2px solid var(--border);color:var(--text-light)}.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:#6c63ff0f}.btn-sm{padding:.4rem .9rem;font-size:.85rem;border-radius:var(--radius-sm)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.input-group{display:flex;gap:.75rem;align-items:center}.input{flex:1;padding:.75rem 1rem;border:2px solid var(--border);border-radius:var(--radius-md);font-family:var(--font);font-size:1rem;font-weight:600;color:var(--text);background:#fff;transition:var(--transition);outline:none}.input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #6c63ff1a}.input::placeholder{color:var(--text-muted);font-weight:500}.input-lg{padding:1rem 1.25rem;font-size:1.2rem;border-radius:var(--radius-lg)}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;margin-top:1rem}.image-grid-item{aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;border:3px solid transparent;transition:var(--transition);position:relative}.image-grid-item img{width:100%;height:100%;object-fit:cover}.image-grid-item:hover{border-color:var(--primary);transform:scale(1.05);box-shadow:var(--shadow-md)}.image-grid-item.selected{border-color:var(--success);box-shadow:0 0 0 3px #4ecb714d}.image-grid-item.selected:after{content:"✓";position:absolute;top:6px;right:6px;background:var(--success);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.75rem}.question-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1rem}.question-item{background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);transition:var(--transition);position:relative}.question-item:hover{box-shadow:var(--shadow-sm)}.question-item img{width:100%;aspect-ratio:4/3;object-fit:cover}.question-item .info{padding:.75rem}.question-item .word{font-weight:800;font-size:1.1rem;color:var(--primary)}.question-item .hint{font-size:.85rem;color:var(--text-light);margin-top:.2rem}.question-item .delete-btn{position:absolute;top:8px;right:8px;background:#ff5252e6;color:#fff;border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition)}.question-item:hover .delete-btn{opacity:1}.quiz-setup{text-align:center;padding:2rem 0}.count-selector{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin:1.5rem 0}.count-option{width:60px;height:60px;border-radius:var(--radius-md);border:2px solid var(--border);background:#fff;font-family:var(--font);font-weight:800;font-size:1.2rem;color:var(--text);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center}.count-option:hover{border-color:var(--primary);color:var(--primary)}.count-option.selected{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 15px #6c63ff4d}.quiz-play{text-align:center;max-width:600px;margin:0 auto}.progress-bar-container{width:100%;height:8px;background:var(--border);border-radius:4px;margin-bottom:1rem;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:4px;transition:width .5s ease}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;font-weight:700;color:var(--text-light)}.timer{display:flex;align-items:center;gap:.4rem;font-size:1.1rem;font-weight:800;color:var(--text)}.quiz-image{width:100%;max-height:350px;object-fit:contain;border-radius:var(--radius-lg);margin-bottom:1.5rem;box-shadow:var(--shadow-md);background:#fff;padding:.5rem}.quiz-hint{color:var(--text-light);font-size:1rem;margin-bottom:1rem;font-weight:600}.answer-input-group{display:flex;gap:.75rem;margin-top:1rem}.feedback-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:200;pointer-events:none}.feedback-correct{animation:correctPulse .8s ease-out}.feedback-wrong{animation:wrongShake .6s ease-out}@keyframes correctPulse{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:0}}@keyframes wrongShake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.feedback-icon{font-size:6rem;text-shadow:0 0 40px rgba(0,0,0,.1)}.glow-correct{box-shadow:0 0 30px #4ecb7180,0 0 60px #4ecb7133!important;border-color:var(--success)!important}.glow-wrong{box-shadow:0 0 30px #ff525280,0 0 60px #ff525233!important;border-color:var(--error)!important}.result-score{text-align:center;margin:2rem 0}.score-circle{width:160px;height:160px;border-radius:50%;background:conic-gradient(var(--success) calc(var(--pct) * 1%),var(--border) calc(var(--pct) * 1%));display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;position:relative}.score-circle-inner{width:130px;height:130px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.score-pct{font-size:2.5rem;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.wrong-list{margin-top:1.5rem}.wrong-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:#fff;border-radius:var(--radius-md);margin-bottom:.5rem;border:1px solid var(--border)}.wrong-item img{width:60px;height:60px;border-radius:var(--radius-sm);object-fit:cover}.wrong-item .correct-answer{font-weight:800;color:var(--success)}.wrong-item .user-answer{font-weight:600;color:var(--error);text-decoration:line-through}.settings-section{margin-bottom:1.5rem}.settings-section h3{margin-bottom:.75rem}.user-selector{display:flex;align-items:center;gap:.5rem}.user-selector select{padding:.4rem .8rem;border:2px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-weight:700;font-size:.9rem;background:#fff;color:var(--text);cursor:pointer;outline:none}.user-selector select:focus{border-color:var(--primary)}.toggle-group{display:flex;align-items:center;gap:.75rem;margin:.75rem 0}.toggle{width:48px;height:26px;background:var(--border);border-radius:13px;position:relative;cursor:pointer;transition:var(--transition);border:none}.toggle.active{background:var(--primary)}.toggle:after{content:"";width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:var(--transition);box-shadow:0 2px 4px #00000026}.toggle.active:after{left:25px}.stats-bar{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}.stat-item{background:#fff;border-radius:var(--radius-md);padding:.75rem 1.25rem;border:1px solid var(--border);text-align:center;flex:1;min-width:100px}.stat-value{font-size:1.5rem;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.stat-label{font-size:.8rem;color:var(--text-light);font-weight:600;margin-top:.2rem}.loading{text-align:center;padding:3rem;color:var(--text-muted)}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;margin:0 auto 1rem;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-muted)}.empty-state .icon{font-size:3rem;margin-bottom:.5rem}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%) translateY(100px);padding:.75rem 1.5rem;border-radius:var(--radius-md);font-family:var(--font);font-weight:700;font-size:.9rem;box-shadow:var(--shadow-lg);z-index:300;transition:transform .3s ease;max-width:90vw}.toast.show{transform:translate(-50%) translateY(0)}.toast.success{background:var(--success);color:#fff}.toast.error{background:var(--error);color:#fff}.toast.info{background:var(--primary);color:#fff}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#2d2b5580;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:250;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s ease}.modal{background:#fff;border-radius:var(--radius-lg);padding:2rem;max-width:420px;width:100%;box-shadow:var(--shadow-lg);animation:modalIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.modal h3{margin-bottom:1rem}.modal .actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem}.no-image-placeholder{width:100%;max-height:350px;min-height:200px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);margin-bottom:1.5rem;box-shadow:var(--shadow-md);background:linear-gradient(135deg,var(--bg-card),var(--bg));border:2px dashed var(--border);font-size:3rem;font-weight:900;color:var(--primary);text-align:center;padding:1rem}.no-image-placeholder-small{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--primary-light);font-size:1.5rem;font-weight:800;text-align:center;padding:.5rem;border-bottom:1px solid var(--border)}.wrong-item .no-image-placeholder-small{width:60px;height:60px;border-radius:var(--radius-sm);aspect-ratio:auto;border:none;font-size:.9rem}@media(max-width:640px){h1{font-size:1.5rem}.page{padding:1rem}.card-grid{grid-template-columns:1fr}.feature-card{padding:2rem 1.5rem}.image-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.question-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.stats-bar,.input-group,.answer-input-group{flex-direction:column}.quiz-image{max-height:250px}.app-header{padding:.6rem 1rem}}