:root,[data-theme=forest]{--color-primary: #2d5a4a;--color-primary-dark: #1e3d32;--color-correct: #15803d;--color-correct-bg: #dcfce7;--color-wrong: #b91c1c;--color-wrong-bg: #fee2e2;--color-bg: #f0f7f4;--color-surface: #ffffff;--color-text: #1c1917;--color-text-secondary: #57534e;--color-border: #d6e5de;--radius: 16px;--radius-sm: 10px;--shadow-sm: 0 1px 3px rgba(45, 90, 74, .08);--shadow-md: 0 4px 12px rgba(45, 90, 74, .12);--shadow-card: 0 2px 8px rgba(0, 0, 0, .06)}[data-theme=ocean]{--color-primary: #0e7490;--color-primary-dark: #0c4a6e;--color-correct: #047857;--color-correct-bg: #ccfbf1;--color-wrong: #b91c1c;--color-wrong-bg: #fee2e2;--color-bg: #f0fdfa;--color-surface: #ffffff;--color-text: #134e4a;--color-text-secondary: #0f766e;--color-border: #99f6e4;--shadow-sm: 0 1px 3px rgba(14, 116, 144, .1);--shadow-md: 0 4px 12px rgba(14, 116, 144, .15);--shadow-card: 0 2px 8px rgba(0, 0, 0, .06)}[data-theme=ocean] .letter-btn.selected,[data-theme=ocean] .count-btn.selected,[data-theme=ocean] .primary-btn{color:#f0fdfa}[data-theme=sunset]{--color-primary: #b45309;--color-primary-dark: #92400e;--color-correct: #15803d;--color-correct-bg: #dcfce7;--color-wrong: #b91c1c;--color-wrong-bg: #fee2e2;--color-bg: #fffbeb;--color-surface: #ffffff;--color-text: #292524;--color-text-secondary: #78716c;--color-border: #fde68a;--shadow-sm: 0 1px 3px rgba(180, 83, 9, .1);--shadow-md: 0 4px 12px rgba(180, 83, 9, .15);--shadow-card: 0 2px 8px rgba(0, 0, 0, .06)}[data-theme=classic]{--color-primary: #4f46e5;--color-primary-dark: #3730a3;--color-correct: #16a34a;--color-correct-bg: #dcfce7;--color-wrong: #dc2626;--color-wrong-bg: #fee2e2;--color-bg: #f8fafc;--color-surface: #ffffff;--color-text: #1e293b;--color-text-secondary: #64748b;--color-border: #e2e8f0;--shadow-sm: 0 1px 3px rgba(79, 70, 229, .1);--shadow-md: 0 4px 12px rgba(79, 70, 229, .15);--shadow-card: 0 2px 8px rgba(0, 0, 0, .06)}[data-theme=lavender]{--color-primary: #6d28d9;--color-primary-dark: #5b21b6;--color-correct: #15803d;--color-correct-bg: #dcfce7;--color-wrong: #b91c1c;--color-wrong-bg: #fee2e2;--color-bg: #faf5ff;--color-surface: #ffffff;--color-text: #3b0764;--color-text-secondary: #7c3aed;--color-border: #e9d5ff;--shadow-sm: 0 1px 3px rgba(109, 40, 217, .1);--shadow-md: 0 4px 12px rgba(109, 40, 217, .15);--shadow-card: 0 2px 8px rgba(0, 0, 0, .06)}[data-theme=lavender] .letter-btn.selected,[data-theme=lavender] .count-btn.selected,[data-theme=lavender] .primary-btn{color:#fff}*{margin:0;padding:0;box-sizing:border-box}html{overflow-x:hidden}html,body{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100dvh;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .2s ease}body{width:100%;max-width:min(480px,100vw);margin:0 auto;padding:20px;padding-top:max(20px,env(safe-area-inset-top,0px));padding-bottom:env(safe-area-inset-bottom,20px);overflow-x:hidden}.loading{display:flex;justify-content:center;align-items:center;min-height:60dvh;font-size:1.2rem;color:var(--color-text-secondary)}.screen{max-width:100%;overflow-x:hidden;animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.app-title{text-align:center;font-size:1.75rem;font-weight:800;margin:20px 0 28px;color:var(--color-primary);display:flex;align-items:center;justify-content:center;gap:12px;letter-spacing:-.02em;max-width:100%;min-width:0}.app-logo{width:44px;height:44px;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}.app-title-text{height:1.4em;width:auto;max-width:min(240px,100%);object-fit:contain;object-position:center;display:block}.setup-section{margin-bottom:28px}.setup-section h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-secondary);margin-bottom:12px;font-weight:600}.theme-grid{display:flex;gap:10px;flex-wrap:wrap}.theme-btn{flex:1;min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border:2px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer;transition:all .2s ease;color:var(--color-text);font-size:.8rem;font-weight:600;box-shadow:var(--shadow-sm)}.theme-btn:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}.theme-btn.selected{background:var(--color-primary);border-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-md)}.theme-swatch{width:100%;height:24px;border-radius:6px;display:flex;overflow:hidden}.theme-swatch span{flex:1}.letter-grid,.count-grid{display:flex;gap:10px;flex-wrap:wrap;min-width:0}.count-grid .count-btn{min-width:0}.letter-grid{flex-direction:column}.letter-row{display:flex;gap:10px;flex-wrap:nowrap}.letter-row .letter-btn{flex:1;min-width:0}.letter-btn,.count-btn{flex:1;min-width:48px;padding:14px 10px;border:2px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .2s ease;color:var(--color-text);box-shadow:var(--shadow-sm)}.letter-btn:hover,.count-btn:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}.letter-btn.selected,.count-btn.selected{background:var(--color-primary);border-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-md)}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-size:.95rem;background:var(--color-surface);border-radius:var(--radius-sm);border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.toggle-row input[type=checkbox]{width:22px;height:22px;accent-color:var(--color-primary)}input[type=range]{width:100%;margin-top:10px;accent-color:var(--color-primary)}.primary-btn,.secondary-btn{display:flex;align-items:center;justify-content:center;gap:10px}.primary-btn{width:100%;padding:18px;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius);font-size:1.1rem;font-weight:700;cursor:pointer;margin-top:20px;transition:all .2s ease;box-shadow:var(--shadow-md)}.primary-btn:hover{filter:brightness(1.05)}.primary-btn:active{background:var(--color-primary-dark);transform:scale(.99)}.secondary-btn{width:100%;padding:16px;background:var(--color-surface);color:var(--color-text-secondary);border:2px solid var(--color-border);border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;margin-top:12px;transition:all .2s ease;box-shadow:var(--shadow-sm)}.secondary-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.test-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-top:max(6px,env(safe-area-inset-top,0px));position:sticky;top:0;z-index:10;background:var(--color-bg);margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;padding-bottom:6px}.progress,.score{font-size:.9rem;font-weight:600;color:var(--color-text-secondary)}.progress-bar{height:8px;background:var(--color-border);border-radius:4px;overflow:hidden;margin-bottom:14px;box-shadow:inset 0 1px 2px #0000000d}.progress-fill{height:100%;background:var(--color-primary);transition:width .3s ease;border-radius:4px}.timer{height:6px;background:var(--color-border);border-radius:3px;overflow:hidden;margin-bottom:24px}.timer-fill{height:100%;transition:width 1s linear;border-radius:3px}.word-display{text-align:center;padding:52px 20px;margin:20px 0 28px;background:var(--color-surface);border-radius:var(--radius);border:none;box-shadow:var(--shadow-card);transition:box-shadow .2s,background .2s,transform .2s}.word-display:hover{box-shadow:var(--shadow-md)}.word-display.feedback-correct{background:var(--color-correct-bg);box-shadow:0 0 0 3px #15803d40}.word-display.feedback-wrong{background:var(--color-wrong-bg);box-shadow:0 0 0 3px #b91c1c40}.word-text{display:block;font-size:2.6rem;font-weight:800;letter-spacing:.02em;line-height:1.2;color:var(--color-text)}.word-hint{display:block;margin-top:10px;font-size:.9rem;color:var(--color-text-secondary);font-style:italic}.answer-buttons{display:grid;gap:14px}.four-buttons{grid-template-columns:1fr 1fr}.answer-btn{padding:22px;font-size:1.9rem;font-weight:800;border:2px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);cursor:pointer;transition:all .2s ease;color:var(--color-text);box-shadow:var(--shadow-sm)}.answer-btn:hover:not(:disabled){border-color:var(--color-primary);box-shadow:var(--shadow-md)}.answer-btn:active:not(:disabled){transform:scale(.97)}.answer-btn.correct{background:var(--color-correct);border-color:var(--color-correct);color:#fff;box-shadow:0 0 0 2px #15803d4d}.answer-btn.wrong{background:var(--color-wrong);border-color:var(--color-wrong);color:#fff;box-shadow:0 0 0 2px #b91c1c4d}.results-screen h1{text-align:center;margin-bottom:24px;font-weight:800;color:var(--color-text)}.results-summary{text-align:center;padding:28px;background:var(--color-surface);border-radius:var(--radius);margin-bottom:24px;border:none;box-shadow:var(--shadow-card)}.score-big{font-size:2.75rem;font-weight:800;color:var(--color-primary);letter-spacing:-.02em}.score-pct{font-size:1.4rem;font-weight:700;color:var(--color-text-secondary);margin-top:6px}.score-time{font-size:.95rem;color:var(--color-text-secondary);margin-top:10px}.save-section{margin-bottom:24px}.name-input{display:block;width:100%;padding:14px 18px;border:2px solid var(--color-border);border-radius:var(--radius-sm);font-size:1rem;background:var(--color-surface);color:var(--color-text);outline:none;transition:border-color .2s,box-shadow .2s}.name-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #2d5a4a26}[data-theme=ocean] .name-input:focus{box-shadow:0 0 0 3px #0e749033}[data-theme=sunset] .name-input:focus{box-shadow:0 0 0 3px #b4530933}[data-theme=classic] .name-input:focus{box-shadow:0 0 0 3px #4f46e533}[data-theme=lavender] .name-input:focus{box-shadow:0 0 0 3px #6d28d933}.saved-msg{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:var(--color-correct);font-weight:600;padding:16px}.results-list{margin-bottom:24px}.result-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--color-surface);border-radius:var(--radius-sm);margin-bottom:8px;border-left:4px solid;box-shadow:var(--shadow-sm)}.result-row.correct{border-color:var(--color-correct)}.result-row.wrong{border-color:var(--color-wrong)}.result-word{font-weight:600;font-size:.95rem;flex:1;min-width:0}.result-answer{white-space:nowrap;flex-shrink:0}.check{color:var(--color-correct);font-weight:800;font-size:1.2rem}.user-answer{color:var(--color-wrong);text-decoration:line-through;font-weight:600}.correct-answer{color:var(--color-correct);font-weight:700}.history-header{display:flex;align-items:baseline;gap:12px;margin-bottom:24px;padding-top:max(6px,env(safe-area-inset-top,0px));position:sticky;top:0;z-index:10;background:var(--color-bg);margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;padding-bottom:6px}.history-header h1{font-size:1.35rem;font-weight:800;color:var(--color-text)}.back-btn{background:none;border:none;font-size:1rem;color:var(--color-primary);cursor:pointer;font-weight:600;padding:4px 0}.back-btn:hover{text-decoration:underline}.history-stats{display:flex;gap:14px;margin-bottom:24px}.stat{flex:1;text-align:center;padding:18px;background:var(--color-surface);border-radius:var(--radius);border:none;box-shadow:var(--shadow-card)}.stat-value{display:block;font-size:1.9rem;font-weight:800;color:var(--color-primary)}.stat-label{display:block;font-size:.8rem;color:var(--color-text-secondary);margin-top:4px}.empty-state{text-align:center;color:var(--color-text-secondary);padding:52px 20px;font-size:1rem}.delete-icon-btn{margin-left:auto;background:none;border:none;color:var(--color-wrong);cursor:pointer;padding:6px;border-radius:var(--radius-sm)}.delete-icon-btn:hover{background:var(--color-wrong-bg)}.modal-overlay{position:fixed;inset:0;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s ease}.modal{background:var(--color-surface);border-radius:var(--radius);padding:28px;width:min(300px,calc(100vw - 32px));max-width:100%;text-align:center;box-shadow:var(--shadow-md)}.modal-text{font-size:1.05rem;font-weight:600;margin-bottom:22px;color:var(--color-text)}.modal-actions{display:flex;gap:12px}.modal-btn{flex:1;padding:12px;border-radius:var(--radius-sm);font-size:.95rem;font-weight:600;cursor:pointer;border:none;transition:opacity .2s}.modal-btn.cancel{background:var(--color-border);color:var(--color-text)}.modal-btn.confirm{background:var(--color-wrong);color:#fff}.history-list{display:flex;flex-direction:column;gap:10px}.history-row{padding:16px 18px;background:var(--color-surface);border-radius:var(--radius-sm);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);transition:box-shadow .2s}.history-row.clickable{cursor:pointer}.history-row.clickable:hover{box-shadow:var(--shadow-md)}.history-row.clickable:active{background:var(--color-bg)}.history-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.history-name{font-weight:700;font-size:1rem}.history-date{font-size:.8rem;color:var(--color-text-secondary)}.history-info{display:flex;justify-content:space-between}.history-score{font-weight:700;color:var(--color-primary)}.history-letters{font-size:.85rem;color:var(--color-text-secondary)}