@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");:root{--bg-color:#0a0e27;--main-color:#6366f1;--sub-color:#4a5568;--text-color:#e2e8f0;--error-color:#ef4444;--error-extra-color:#991b1b;--correct-color:#10b981;--border-radius:12px;--font-main:"Inter",-apple-system,BlinkMacSystemFont,sans-serif}*{margin:0;padding:0;box-sizing:border-box}body,html{min-height:100vh}body{font-family:var(--font-main);background:#0a0e27;color:var(--text-color);display:flex;flex-direction:column;overflow-x:hidden;margin:0;padding:0}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 0,rgba(99,102,241,.1) 0,transparent 50%);pointer-events:none;z-index:0}.container{position:relative;z-index:1}header{display:flex;flex-direction:column;align-items:center;padding:30px 0 20px;margin-bottom:0;gap:6px;background:rgba(10,14,39,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(99,102,241,.1)}.logo{font-size:32px;font-weight:800;background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px}.tagline{font-size:13px;color:var(--sub-color);font-weight:500;letter-spacing:.3px}.header-controls{display:flex;gap:10px}.icon-btn{background:none;border:none;color:var(--sub-color);cursor:pointer;padding:8px;border-radius:var(--border-radius);transition:all .2s;display:flex;align-items:center;justify-content:center}.icon-btn:hover{color:var(--text-color);background-color:rgba(255,255,255,.05)}.test-config{display:flex;flex-direction:column;gap:20px;padding:16px 20px 20px;background:rgba(10,14,39,.5);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(99,102,241,.12);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);width:100%;align-items:center}.test-config-combined{display:flex;align-items:flex-start;gap:40px;padding:0;border-radius:0;width:-moz-fit-content;width:fit-content;max-width:90%}.config-group.category-selector{width:-moz-fit-content;width:fit-content;max-width:100%}.category-tabs{display:flex;gap:6px;flex-wrap:wrap}.category-tab{padding:8px 16px;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--sub-color);font-family:var(--font-main);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;white-space:nowrap}.category-tab:hover{background:rgba(255,255,255,.03);border-color:rgba(99,102,241,.3);color:var(--text-color)}.category-tab.active{background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.12));border-color:rgba(99,102,241,.5);color:var(--text-color)}.category-tab.active:hover{border-color:rgba(99,102,241,.6)}.completion-dot{position:absolute;top:4px;right:4px;width:5px;height:5px;background:#10b981;border-radius:50%;box-shadow:0 0 4px rgba(16,185,129,.6)}.config-group{display:flex;flex-direction:column;gap:12px;padding:0;border-radius:0}.config-header{display:flex;align-items:center;width:100%;justify-content:space-between;gap:10px}.config-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.6);margin-bottom:4px}.dev-mode-toggle-inline{display:flex;align-items:center;gap:4px;cursor:pointer;opacity:.3;transition:opacity .2s;display:none;margin-left:8px}.dev-mode-toggle-inline:hover{opacity:.6}.dev-mode-checkbox-inline{width:12px;height:12px;cursor:pointer;accent-color:#ffa500}.dev-mode-text-inline{font-size:9px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px}.config-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.config-controls.level-controls{flex-direction:column;gap:8px;align-items:stretch}.config-group.language-selector-group,.config-group.level-selector{background:transparent;border:none}.config-group.level-selector{width:500px}.level-meta{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.6)}.level-range{color:rgba(255,255,255,.9)}.level-total{font-size:9px;font-weight:700;letter-spacing:.7px;padding:2px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)}.cefr-container{width:100%}.cefr-brackets{display:grid;grid-template-columns:repeat(10,1fr);width:100%;grid-gap:0;gap:0}.cefr-brace{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 2px;margin-bottom:0}.cefr-brace:first-child{grid-column:1/4}.cefr-brace:nth-child(2){grid-column:4/6}.cefr-brace:nth-child(3){grid-column:6/8}.cefr-brace:nth-child(4){grid-column:8/10}.cefr-brace:nth-child(5){grid-column:10/11}.brace-line{order:2;width:calc(100% - 4px);height:11px;margin:0 2px;position:relative}.brace-line:before{content:"";box-sizing:border-box;border:2px solid rgb(99 102 241/16%);border-bottom:none;border-radius:50px 50px 0 0;width:100%;height:100%;position:absolute}.brace-label{font-size:11px;font-weight:700;letter-spacing:.5px;color:rgb(99 102 241/33%);text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;order:1;margin-bottom:4px}.level-navigation{display:flex;align-items:center;gap:8px;width:100%}.level-nav-btn{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);color:var(--text-color);font-size:18px;font-weight:700;padding:8px 12px;cursor:pointer;border-radius:8px;transition:all .2s cubic-bezier(.4,0,.2,1);height:41px;min-width:41px;display:flex;align-items:center;justify-content:center}.level-nav-btn:hover:not(:disabled){background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.4);transform:translateY(-1px)}.level-nav-btn:disabled{opacity:.3;cursor:not-allowed}.level-buttons{display:flex;gap:0;flex-wrap:nowrap;flex:1 1}.level-btn{background:rgba(255,255,255,.05);color:#9ca3af;font-family:var(--font-main);font-size:13px;font-weight:700;padding:6px 0;cursor:pointer;border-radius:0;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;letter-spacing:.3px;flex:1 1;justify-content:center;border:1.5px solid rgba(255,255,255,.1);border-left:none;height:41px}.level-btn,.level-content{display:flex;align-items:center}.level-content{flex-direction:column;gap:1px}.level-number{font-size:14px;font-weight:700;line-height:1}.cefr-badge{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;opacity:.5;color:white;line-height:1}.level-btn:first-child{border-radius:8px 0 0 8px;border-left:1.5px solid rgba(255,255,255,.1)}.level-btn:last-child{border-radius:0 8px 8px 0}.level-btn:hover{color:var(--text-color);background:rgba(255,255,255,.08);border-color:rgba(99,102,241,.3);transform:translateY(-1px)}.level-btn.active{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:transparent;box-shadow:0 4px 12px rgba(99,102,241,.3)}.level-btn.active:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(99,102,241,.4)}.level-btn.locked{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.05);color:#4a5568;cursor:not-allowed;opacity:.5}.level-content-locked{display:flex;align-items:center;justify-content:center;gap:4px}.level-content-locked .level-number{font-size:14px;font-weight:700;line-height:1}.level-content-locked svg{opacity:.3;color:rgba(255,255,255,.5)}.level-btn.locked:hover{transform:none;background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.05)}.locked-level{display:flex;align-items:center;gap:4px;position:relative}.locked-number{font-size:13px;font-weight:700;opacity:.4}.level-btn:disabled{cursor:not-allowed}.level-btn.has-notification{position:relative;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{box-shadow:0 4px 12px rgba(16,185,129,.3)}50%{box-shadow:0 4px 20px rgba(16,185,129,.5)}}.notification-badge{position:absolute;top:-4px;right:-4px;width:10px;height:10px;background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;border:2px solid #1a1b26;animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(1.5);opacity:0}}.config-btn{background:transparent;border:none;color:#9ca3af;font-family:var(--font-main);font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer;border-radius:8px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;letter-spacing:.3px}.config-btn:hover{color:var(--text-color);background:rgba(255,255,255,.05)}.config-btn.active{color:#fff;background:linear-gradient(135deg,#6366f11a,#8b5cf62e)}.config-btn.completed{border:1.5px solid rgba(16,185,129,.3);background:rgba(16,185,129,.05)}.config-btn.completed:hover{border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.08)}.config-btn.completed.active{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(5,150,105,.15));border-color:rgba(16,185,129,.4)}.language-selector-group{display:flex;align-items:center;gap:12px}.language-select{background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.08));border:1.5px solid rgba(99,102,241,.25);color:var(--text-color);font-family:var(--font-main);font-size:15px;font-weight:600;padding:10px 36px 10px 18px;border-radius:10px;cursor:pointer;outline:none;transition:all .25s cubic-bezier(.4,0,.2,1);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;box-shadow:0 2px 4px rgba(0,0,0,.1);min-width:120px}.language-select:hover{background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.12));border-color:rgba(99,102,241,.4);transform:translateY(-1px);box-shadow:0 4px 8px rgba(99,102,241,.15)}.language-select:focus{border-color:rgba(99,102,241,.6);box-shadow:0 0 0 3px rgba(99,102,241,.1)}.language-select option{background:rgba(10,14,39,.95);color:var(--text-color);padding:10px}.language-arrow{color:var(--main-color);font-size:24px;font-weight:400;opacity:.6;display:flex;align-items:center}.test-container{display:flex;flex-direction:column;align-items:center;gap:20px;margin-bottom:30px;overflow:visible;padding:0 20px;margin-top:40px}.category-header{color:rgb(255 255 255/7%);letter-spacing:.5px;margin-bottom:-10px;font-size:35px;font-weight:600}.timer{font-size:48px;background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;letter-spacing:-1px}.current-pair-indicator{font-size:16px;color:var(--text-color);background-color:rgba(255,255,255,.05);padding:10px 20px;border-radius:var(--border-radius);margin-bottom:10px;display:flex;align-items:center;gap:12px}.pair-word{font-weight:700}.pair-separator{color:var(--sub-color);font-size:20px}.words{font-size:20px;line-height:1.6;max-width:100%;max-height:400px;text-align:left;letter-spacing:.5px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:center;padding:30px 30px 60px}.pronunciation-guide{width:100%;flex-basis:100%;align-self:stretch;margin-top:14px;padding-top:8px;border-top:1px dashed rgba(148,163,184,.2);opacity:.8;text-align:center;min-height:54px;transition:opacity .2s ease,transform .2s ease}.pronunciation-guide.is-hidden{opacity:0;visibility:hidden;border-top-color:transparent;transform:translateY(4px)}.pronunciation-guide.is-visible{opacity:.8;visibility:visible;transform:translateY(0)}.pronunciation-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.8px;justify-content:center}.pronunciation-label{font-size:10px;font-weight:700;color:rgba(148,163,184,.8)}.pronunciation-note{font-size:9px;font-weight:600;color:rgba(148,163,184,.7)}.pronunciation-text{font-size:16px;font-weight:600;letter-spacing:.5px;color:rgba(226,232,240,.6);display:flex;flex-direction:column;gap:4px;justify-content:center}.pronunciation-word{display:flex;justify-content:center;flex-wrap:wrap;gap:2px}.pronunciation-placeholder{display:inline-block;min-width:1px}.pronunciation-letter{transition:color .15s ease}.pronunciation-letter.typed{color:#e2e8f0}.pronunciation-separator{color:rgba(148,163,184,.5);margin:0 2px}.pronunciation-separator.typed{color:rgba(226,232,240,.65)}.word-pair{display:inline-flex;align-items:center;padding:8px;border-radius:10px}.word-pair.current-pair{background:linear-gradient(135deg,rgb(99 102 241/3%),rgb(139 92 246/6%))}.pair-divider{color:rgb(99 102 241/19%);font-size:14px;margin:0 2px;font-weight:600}.word{display:inline-block;margin:0;position:relative;padding:0 4px;border-radius:4px}.caret{position:absolute;width:2px;background-color:var(--main-color);transition:left .07s ease-out,top .07s ease-out,height .07s ease-out;z-index:10;pointer-events:none}.letter{color:#d7d7d7;position:relative;font-size:24px}.letter.correct{color:var(--correct-color)}.letter.incorrect{color:var(--error-color)}.word.error{background-color:var(--error-extra-color)}.extra-letter{color:var(--error-extra-color)}.same-language-warning{display:flex;align-items:center;gap:16px;padding:24px 32px;background:rgba(239,68,68,.1);border:2px solid rgba(239,68,68,.3);border-radius:12px;margin:40px auto;max-width:600px}.same-language-warning svg{flex-shrink:0;color:#ef4444}.same-language-warning p{font-size:16px;color:rgba(255,255,255,.9);line-height:1.5;margin:0}.restart-hint{font-size:14px;color:var(--sub-color);margin-top:20px}.results{display:flex;justify-content:center;align-items:center;min-height:300px}.results.hidden{display:none}.results-content{text-align:center;margin-top:30px}.performance-message{font-size:24px;font-weight:600;color:var(--text-color);margin-bottom:40px;padding:20px 40px;background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.08);border-radius:var(--border-radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:inline-block}.stat-group{display:flex;gap:40px;margin-bottom:30px;justify-content:center}.stat-item{display:flex;flex-direction:column;gap:8px;align-items:center}.stat-label{font-size:11px;color:var(--sub-color);text-transform:uppercase;font-weight:600;letter-spacing:1.2px}.stat-value{font-size:48px;background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;letter-spacing:-2px;line-height:1}.stat-sublabel{font-size:10px;color:var(--sub-color);font-weight:500;opacity:.7}.leaderboard-section{width:100%;max-width:600px;margin:0 auto 30px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:20px}.leaderboard-title{font-size:18px;font-weight:700;color:rgba(255,255,255,.9);text-align:center;margin-bottom:12px;letter-spacing:.3px}.leaderboard-header{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:8px}.leaderboard-header-rank{min-width:32px}.leaderboard-header-name,.leaderboard-header-rank{font-size:11px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px}.leaderboard-header-name{flex:1 1}.leaderboard-header-score{font-size:11px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px;min-width:50px;text-align:right;cursor:help;border-bottom:1px dotted rgba(255,255,255,.3)}.leaderboard-list{display:flex;flex-direction:column;gap:8px}.leaderboard-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:8px;transition:all .2s}.leaderboard-item:hover{background:rgba(255,255,255,.05);border-color:rgba(99,102,241,.3)}.leaderboard-item.user-entry{background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.15));border-color:rgba(99,102,241,.4);box-shadow:0 0 0 1px rgba(99,102,241,.2)}.leaderboard-item.user-entry .leaderboard-name{color:rgba(255,255,255,.95);font-weight:700}.leaderboard-rank{font-size:14px;font-weight:700;color:rgba(255,255,255,.5);min-width:32px}.leaderboard-item:first-child .leaderboard-rank{color:#ffd700}.leaderboard-item:nth-child(2) .leaderboard-rank{color:#c0c0c0}.leaderboard-item:nth-child(3) .leaderboard-rank{color:#cd7f32}.leaderboard-name{flex:1 1;font-size:14px;font-weight:600;color:rgba(255,255,255,.85)}.leaderboard-score{font-size:18px;font-weight:700;background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;min-width:50px;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:6px}.pr-badge{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000;font-size:10px;font-weight:800;padding:2px 6px;border-radius:4px;margin-left:6px;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 2px 4px rgba(251,191,36,.3)}.improvement-badge{font-size:11px;font-weight:600;padding:2px 5px;border-radius:4px;background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3)}.improvement-badge.negative{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.3)}.restart-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;color:#fff;font-family:var(--font-main);font-size:16px;font-weight:600;padding:16px 48px;border-radius:var(--border-radius);cursor:pointer;display:flex;align-items:center;gap:10px;margin:0 auto;transition:all .2s;box-shadow:0 4px 12px rgba(99,102,241,.3)}.restart-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,.4)}.recap-section{width:100%;max-width:900px}.recap-title{font-size:28px;background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px;text-align:center;font-weight:700;letter-spacing:-.8px}.recap-subtitle{font-size:15px;color:var(--sub-color);text-align:center;margin-bottom:30px;font-weight:500}.recap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:12px;gap:12px;max-height:400px;overflow-y:auto;padding:5px}.recap-item{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(99,102,241,.05),rgba(139,92,246,.05));border:1.5px solid rgba(99,102,241,.15);padding:16px 20px;border-radius:10px;transition:all .25s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.recap-item:hover{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.1));border-color:rgba(99,102,241,.4);transform:translateY(-3px);box-shadow:0 8px 20px rgba(99,102,241,.25)}.recap-english{font-size:15px;color:var(--text-color);font-weight:600}.recap-arrow{color:rgba(99,102,241,.6);font-size:16px;margin:0 10px;font-weight:700}.recap-translation{font-size:15px;background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.recap-choice{display:flex;gap:16px;justify-content:center;align-items:stretch;margin-top:30px;flex-wrap:wrap}.choice-btn{flex:1 1;min-width:200px;max-width:280px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 20px;border-radius:12px;border:1.5px solid rgba(99,102,241,.2);background:linear-gradient(135deg,rgba(99,102,241,.05),rgba(139,92,246,.05));cursor:pointer;font-family:var(--font-main);font-size:16px;font-weight:600;color:var(--text-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.choice-btn,.choice-btn svg{transition:all .25s cubic-bezier(.4,0,.2,1)}.choice-btn svg{width:32px;height:32px;stroke:#6366f1}.choice-btn:hover{transform:translateY(-2px);border-color:rgba(99,102,241,.4);background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.1));box-shadow:0 8px 20px rgba(99,102,241,.25)}.choice-btn:hover svg{stroke:#8b5cf6;transform:scale(1.08)}.choice-subtitle{font-size:12px;margin-top:2px}.choice-subtitle,.shortcut-hint{font-weight:500;color:var(--sub-color)}.shortcut-hint{font-size:13px;opacity:.7;margin-left:6px;color:white}.quiz-btn:hover{background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(5,150,105,.08));border-color:rgba(16,185,129,.4)}.quiz-btn:hover svg{stroke:#10b981}.advanced-btn:hover{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(217,119,6,.08));border-color:rgba(245,158,11,.4)}.advanced-btn:hover svg{stroke:#f59e0b}.back-btn{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);font-size:14px;padding:12px 20px;margin:0 auto}button.quiz-submit-btn{display:flex;flex-direction:column;gap:5px}.back-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}.quiz-header{margin-bottom:30px}.quiz-progress-bar{width:100%;max-width:500px;height:6px;background:rgba(255,255,255,.08);border-radius:8px;overflow:hidden;margin:16px auto 0}.quiz-progress-fill{height:100%;background:linear-gradient(135deg,#6366f1,#8b5cf6);transition:width .3s ease;box-shadow:0 0 10px rgba(99,102,241,.3)}.quiz-container{max-width:500px;margin:0 auto;display:flex;flex-direction:column;align-items:center}.quiz-question{background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(139,92,246,.06));border:1.5px solid rgba(99,102,241,.2);border-radius:12px;padding:28px 24px;text-align:center;margin-bottom:24px;width:-moz-fit-content;width:fit-content}.quiz-question-label{font-size:12px;color:var(--sub-color);font-weight:600;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:16px}.quiz-question-word{font-size:32px;font-weight:700;background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}.quiz-form{gap:16px}.quiz-form,.quiz-multiple-choice{display:flex;flex-direction:column;width:100%}.quiz-multiple-choice{gap:12px;max-width:400px}.quiz-choice-btn{padding:16px 24px;font-size:18px;font-weight:600;color:var(--text-color);background:linear-gradient(135deg,rgba(99,102,241,.05),rgba(139,92,246,.05));border:1.5px solid rgba(99,102,241,.2);border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);font-family:var(--font-main);text-align:center}.quiz-choice-btn:hover{transform:translateY(-2px);background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.1));border-color:rgba(99,102,241,.4);box-shadow:0 4px 12px rgba(99,102,241,.2)}.quiz-choice-btn:active{transform:translateY(0)}.quiz-input{width:100%;padding:14px 18px;font-size:16px;font-family:var(--font-main);background:rgba(255,255,255,.05);border:1.5px solid rgba(99,102,241,.2);border-radius:10px;color:var(--text-color);transition:all .2s;outline:none;text-align:center}.quiz-input:focus{border-color:rgba(99,102,241,.5);background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(99,102,241,.1)}.quiz-input::placeholder{color:var(--sub-color);opacity:.5}.quiz-buttons{display:flex;gap:10px;justify-content:center;margin-top:8px}.quiz-skip-btn,.quiz-submit-btn{padding:12px 24px;font-size:14px;font-weight:600;font-family:var(--font-main);border-radius:10px;cursor:pointer;transition:all .2s;border:none}.quiz-submit-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;flex:1 1}.quiz-submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,.4)}.quiz-submit-btn:disabled{opacity:.5;cursor:not-allowed}.quiz-skip-btn{background:rgba(255,255,255,.05);color:var(--sub-color);border:2px solid rgba(255,255,255,.1)}.quiz-skip-btn:hover{background:rgba(255,255,255,.08);color:var(--text-color)}.level-unlocked-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(5,150,105,.1));border:2px solid rgba(16,185,129,.3);border-radius:12px;padding:20px 24px;margin:20px 0;animation:slideInScale .5s ease-out}.level-unlocked-banner svg{color:#10b981;flex-shrink:0;animation:spin 1s ease-in-out}@keyframes spin{0%{transform:rotate(0deg) scale(.5);opacity:0}50%{transform:rotate(180deg) scale(1.1)}to{transform:rotate(1turn) scale(1);opacity:1}}@keyframes slideInScale{0%{transform:translateY(-20px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.unlock-title{font-size:18px;font-weight:700;color:#10b981;margin-bottom:4px}.unlock-subtitle{font-size:14px;color:var(--text-color);opacity:.8}.level-locked-message{background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(217,119,6,.1));border:2px solid rgba(245,158,11,.3);border-radius:12px;padding:16px 24px;margin:20px 0;text-align:center}.level-locked-message p{font-size:15px;font-weight:600;color:#f59e0b;margin:0}.quiz-results{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));grid-gap:12px;gap:12px;margin:24px 0;max-height:450px;overflow-y:auto;padding:5px}.quiz-result-item{background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.1);border-radius:10px;padding:14px;transition:all .2s;display:flex;flex-direction:column;gap:10px}.quiz-result-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}.quiz-result-item.correct{border-color:rgba(16,185,129,.3);background:linear-gradient(135deg,rgba(16,185,129,.06),rgba(5,150,105,.06))}.quiz-result-item.incorrect{border-color:rgba(239,68,68,.3);background:linear-gradient(135deg,rgba(239,68,68,.06),rgba(220,38,38,.06))}.quiz-result-header{display:flex;align-items:center;gap:8px}.quiz-result-number{font-size:10px;font-weight:700;color:var(--sub-color);background:rgba(255,255,255,.08);padding:3px 7px;border-radius:4px;flex-shrink:0}.quiz-result-question{font-size:13px;font-weight:600;color:var(--text-color);flex:1 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quiz-icon{width:18px;height:18px;flex-shrink:0}.quiz-result-item.correct .quiz-icon{color:#10b981}.quiz-result-item.incorrect .quiz-icon{color:#ef4444}.quiz-result-answers{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--sub-color)}.quiz-correct-answer,.quiz-user-answer{display:flex;flex-direction:column;gap:4px}.correct-text{color:#10b981;font-weight:600}.incorrect-text{color:#ef4444;font-weight:600}.quiz-actions{display:flex;justify-content:center;margin-top:30px}.quiz-actions .choice-btn{max-width:300px}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;z-index:1000}.modal.hidden{display:none}.modal-content{background-color:var(--bg-color);padding:30px;border-radius:var(--border-radius);max-width:500px;width:90%;border:2px solid var(--sub-color)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.modal-header h2{color:var(--main-color);font-size:24px}.close-btn{background:none;border:none;color:var(--sub-color);font-size:32px;cursor:pointer;line-height:1;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:var(--text-color)}.modal-body{display:flex;flex-direction:column;gap:20px}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--sub-color)}.setting-item label{font-size:16px;color:var(--text-color)}.setting-item select{background-color:rgba(255,255,255,.05);border:none;color:var(--text-color);font-family:var(--font-main);font-size:14px;padding:8px 16px;border-radius:var(--border-radius);cursor:pointer;outline:none}.setting-item input[type=checkbox]{width:20px;height:20px;cursor:pointer}body.light-theme{--bg-color:#f5f5f5;--main-color:#e2b714;--sub-color:#9b9b9b;--text-color:#3c3c3c;--error-color:#ca4754;--error-extra-color:#f5b3b9}@media (max-width:768px){.words{font-size:20px;line-height:1.8}.pronunciation-guide{padding-top:6px}.pronunciation-text{font-size:14px}.stat-group{gap:20px}.stat-value{font-size:32px}.test-config{gap:15px}}.hidden{display:none!important}.navigation{background:rgba(10,14,39,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(99,102,241,.2);position:-webkit-sticky;position:sticky;top:0;z-index:100;width:100%}.nav-container{max-width:1400px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.nav-logo{text-decoration:none;color:var(--text-color)}.nav-logo .logo{font-size:1.5rem}.nav-links{display:flex;gap:2rem;align-items:center}.nav-link{text-decoration:none;color:var(--text-color);font-size:.95rem;font-weight:500;transition:color .2s;position:relative}.nav-link.active,.nav-link:hover{color:var(--main-color)}.nav-link.active:after{content:"";position:absolute;bottom:-8px;left:0;right:0;height:2px;background:var(--main-color)}.footer{background:rgba(10,14,39,.95);border-top:1px solid rgba(99,102,241,.2);margin-top:4rem;width:100%}.footer-container{max-width:1400px;margin:0 auto;padding:3rem 2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:2rem;gap:2rem}.footer-section{display:flex;flex-direction:column;gap:1rem}.footer-title{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,var(--main-color),#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.footer-description{color:var(--sub-color);font-size:.9rem;line-height:1.6}.footer-heading{font-size:1.1rem;font-weight:600;color:var(--text-color);margin-bottom:.5rem}.footer-links{list-style:none;display:flex;flex-direction:column;gap:.75rem}.footer-links a{color:var(--sub-color);text-decoration:none;font-size:.9rem;transition:color .2s}.footer-links a:hover{color:var(--main-color)}.footer-bottom{border-top:1px solid rgba(99,102,241,.1);padding:1.5rem 2rem;text-align:center;color:var(--sub-color);font-size:.9rem}.home-container{width:100%;max-width:1400px;margin:0 auto}.hero{padding:6rem 2rem;text-align:center}.hero-content{max-width:800px;margin:0 auto}.hero-title{font-size:4rem;font-weight:700;background:linear-gradient(135deg,var(--main-color),#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}.hero-tagline{font-size:2rem;font-weight:600;color:var(--text-color);margin-bottom:1.5rem}.hero-description{font-size:1.25rem;color:var(--sub-color);line-height:1.8;margin-bottom:2.5rem}.cta-button,.cta-button-large{display:inline-flex;align-items:center;gap:.75rem;background:var(--main-color);color:white;text-decoration:none;padding:1rem 2rem;border-radius:var(--border-radius);font-weight:600;font-size:1.1rem;transition:all .3s;border:none;cursor:pointer}.cta-button-large:hover,.cta-button:hover{background:#4f46e5;transform:translateY(-2px);box-shadow:0 10px 30px rgba(99,102,241,.4)}.cta-button-large{font-size:1.25rem;padding:1.25rem 2.5rem}.features{padding:4rem 2rem}.section-title{text-align:center;font-size:2.5rem;font-weight:700;color:var(--text-color);margin-bottom:3rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));grid-gap:2rem;gap:2rem;max-width:1200px;margin:0 auto}.feature-card{background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.2);border-radius:var(--border-radius);padding:2rem;transition:all .3s}.feature-card:hover{transform:translateY(-5px);border-color:var(--main-color);box-shadow:0 10px 30px rgba(99,102,241,.2)}.feature-icon{color:var(--main-color);margin-bottom:1.5rem}.feature-title{font-size:1.5rem;font-weight:600;color:var(--text-color);margin-bottom:1rem}.feature-description{color:var(--sub-color);line-height:1.6;font-size:1rem}.cta-section{padding:6rem 2rem;text-align:center;background:rgba(99,102,241,.05);margin:4rem 0}.cta-content{max-width:700px;margin:0 auto}.cta-title{font-size:2.5rem;font-weight:700;color:var(--text-color);margin-bottom:1.5rem}.cta-text{font-size:1.25rem;color:var(--sub-color);line-height:1.8;margin-bottom:2rem}.page-container{width:100%;max-width:1400px;margin:0 auto;padding:3rem 2rem}.page-content{max-width:900px;margin:0 auto}.page-title{font-size:3rem;font-weight:700;color:var(--text-color);margin-bottom:1rem}.page-date,.page-intro{font-size:1.125rem;color:var(--sub-color);line-height:1.8;margin-bottom:2rem}.page-date{font-size:1rem;font-style:italic}.content-section{margin-bottom:3rem}.section-heading{font-size:1.875rem;font-weight:600;color:var(--text-color);margin-bottom:1rem;margin-top:2rem}.content-list,.content-text{font-size:1.125rem;color:var(--sub-color);line-height:1.8;margin-bottom:1.25rem}.content-list{margin-left:2rem}.content-list li{margin-bottom:.75rem}.text-link{color:var(--main-color);text-decoration:none;transition:opacity .2s}.text-link:hover{opacity:.8;text-decoration:underline}.inline-button{display:inline-block;background:var(--main-color);color:white;text-decoration:none;padding:.75rem 1.5rem;border-radius:var(--border-radius);font-weight:600;transition:all .3s;margin-top:1rem}.inline-button:hover{background:#4f46e5;transform:translateY(-2px)}.contact-intro{background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.2);border-radius:var(--border-radius);padding:1.5rem;margin-bottom:2rem}.contact-form{gap:1.5rem;margin:2rem 0}.contact-form,.form-group{display:flex;flex-direction:column}.form-group{gap:.5rem}.form-label{font-size:1rem;font-weight:600;color:var(--text-color)}.form-input,.form-textarea{background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.2);border-radius:var(--border-radius);padding:.875rem;font-size:1rem;color:var(--text-color);font-family:var(--font-main);transition:all .2s}.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--main-color);box-shadow:0 0 0 3px rgba(99,102,241,.1)}.form-textarea{resize:vertical;min-height:150px}.form-submit-btn{background:var(--main-color);color:white;border:none;padding:1rem 2rem;border-radius:var(--border-radius);font-weight:600;font-size:1.1rem;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:.75rem}.form-submit-btn:hover{background:#4f46e5;transform:translateY(-2px);box-shadow:0 10px 30px rgba(99,102,241,.4)}.success-message{background:rgba(16,185,129,.1);border:1px solid var(--correct-color);border-radius:var(--border-radius);padding:1rem;display:flex;align-items:center;gap:1rem;color:var(--correct-color);margin-bottom:2rem}.contact-info{margin-top:3rem}.contact-methods{display:flex;flex-direction:column;gap:1rem}.contact-method{display:flex;align-items:center;gap:1rem;color:var(--sub-color);font-size:1.125rem}.faq-list{margin:2rem 0}.faq-item{border-bottom:1px solid rgba(99,102,241,.2)}.faq-question{width:100%;background:none;border:none;color:var(--text-color);padding:1.5rem 0;text-align:left;font-size:1.125rem;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:color .2s}.faq-question.active,.faq-question:hover{color:var(--main-color)}.faq-icon{flex-shrink:0;transition:transform .3s}.faq-icon.open{transform:rotate(180deg)}.faq-answer{padding:0 0 1.5rem;color:var(--sub-color);line-height:1.8;font-size:1.125rem;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));grid-gap:2rem;gap:2rem;margin:3rem 0}.blog-card{background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.2);border-radius:var(--border-radius);padding:2rem;transition:all .3s;display:flex;flex-direction:column}.blog-card:hover{transform:translateY(-5px);border-color:var(--main-color);box-shadow:0 10px 30px rgba(99,102,241,.2)}.blog-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.blog-category{background:var(--main-color);color:white;padding:.375rem .875rem;border-radius:6px;font-size:.875rem;font-weight:600}.blog-date{color:var(--sub-color);font-size:.875rem}.blog-card-title{font-size:1.5rem;font-weight:600;margin-bottom:1rem}.blog-card-title a{color:var(--text-color);text-decoration:none;transition:color .2s}.blog-card-title a:hover{color:var(--main-color)}.blog-card-excerpt{color:var(--sub-color);line-height:1.6;margin-bottom:1.5rem;flex-grow:1}.blog-read-more{color:var(--main-color);text-decoration:none;font-weight:600;display:flex;align-items:center;gap:.5rem;transition:gap .2s}.blog-read-more:hover{gap:.75rem}.blog-post{max-width:900px;margin:0 auto;padding:2rem}.back-link{color:var(--main-color);text-decoration:none;display:flex;align-items:center;gap:.5rem;margin-bottom:2rem;font-weight:600;transition:gap .2s}.back-link:hover{gap:.75rem}.blog-post-header{margin-bottom:3rem}.blog-meta{display:flex;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}.blog-post-title{font-size:3rem;font-weight:700;color:var(--text-color);line-height:1.2;margin-bottom:1rem}.blog-post-excerpt{font-size:1.25rem}.blog-post-content,.blog-post-excerpt{color:var(--sub-color);line-height:1.8}.blog-post-content h2{font-size:2rem;font-weight:600;color:var(--text-color);margin:2.5rem 0 1.25rem}.blog-post-content h3{font-size:1.5rem;font-weight:600;color:var(--text-color);margin:2rem 0 1rem}.blog-post-content p{margin-bottom:1.5rem;font-size:1.125rem}.blog-post-content ol,.blog-post-content ul{margin:1.5rem 0 1.5rem 2rem}.blog-post-content li{margin-bottom:.75rem;font-size:1.125rem}.blog-post-content strong{color:var(--text-color);font-weight:600}.blog-cta{background:rgba(99,102,241,.1);border:2px solid var(--main-color);border-radius:var(--border-radius);padding:2.5rem;margin:3rem 0;text-align:center}.blog-cta h3{font-size:1.875rem;color:var(--text-color);margin-bottom:1rem}.blog-cta p{font-size:1.125rem;color:var(--sub-color);margin-bottom:1.5rem}@media (max-width:768px){.nav-container{flex-direction:column;gap:1rem}.nav-links{flex-wrap:wrap;justify-content:center;gap:1rem}.hero-title{font-size:2.5rem}.hero-tagline{font-size:1.5rem}.blog-post-title,.page-title{font-size:2rem}.blog-grid,.features-grid{grid-template-columns:1fr}}