:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#1f2937;background-color:#f5f7fb;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}a{color:inherit}a:hover{text-decoration:underline}body{margin:0;min-height:100vh;background-color:#f5f7fb}button{border-radius:12px;border:1px solid transparent;padding:.6rem 1.2rem;font-size:1rem;font-weight:600;font-family:inherit;background-color:#2563eb;color:#fff;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}button:hover{transform:translateY(-1px);box-shadow:0 10px 20px #2563eb26}button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}button.secondary{background-color:#fff;color:#1f2937;border-color:#d1d5db}button.secondary:hover{background-color:#f3f4f6;box-shadow:none}input,select,textarea{font:inherit}input{border-radius:12px;border:1px solid #d1d5db;padding:.75rem 1rem;width:100%;transition:border-color .12s ease,box-shadow .12s ease}input:focus,textarea:focus,select:focus{border-color:#2563eb;outline:none;box-shadow:0 0 0 3px #2563eb33}textarea{border-radius:12px;border:1px solid #d1d5db;padding:.75rem 1rem;width:100%;transition:border-color .12s ease,box-shadow .12s ease;resize:vertical}select{border-radius:12px;border:1px solid #d1d5db;padding:.75rem 1rem;width:100%;background-color:#fff;transition:border-color .12s ease,box-shadow .12s ease}input[type=range]{width:100%;accent-color:#2563eb}main{display:block}.app-shell{max-width:960px;margin:0 auto;padding:2.5rem 1.5rem 4rem;display:flex;flex-direction:column;gap:1.5rem}.app-header{text-align:center}.app-header h1{margin:0;font-size:2.25rem;color:#1d4ed8}.subtitle{margin:.35rem 0 0;color:#6b7280}.app-nav{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}.app-nav button{background:#fff;color:#1f2937;border:1px solid #dbeafe;padding:.55rem 1.4rem}.app-nav button:hover{background-color:#eff6ff;box-shadow:none}.app-nav button.active{background-color:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 12px 24px #2563eb33}.app-main{display:flex;justify-content:center}.practice-card,.placeholder-card{width:100%;max-width:720px;background-color:#fff;border-radius:24px;padding:2.5rem;box-shadow:0 24px 42px #0f172a14;display:flex;flex-direction:column;gap:1.75rem}.practice-header{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}.practice-header strong{font-size:1.5rem;color:#1f2937}.label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#6b7280;margin-bottom:.25rem}.prompt{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.prompt h3{margin:0;font-size:1.25rem}.prompt .play{background-color:#2563eb;color:#fff;border:none;padding:.5rem 1rem;display:inline-flex;align-items:center;gap:.4rem;font-weight:600}.prompt .play:hover{box-shadow:0 10px 20px #2563eb33}.spelling{display:flex;flex-direction:column;gap:.7rem}.underscores{display:flex;gap:.6rem;flex-wrap:wrap;font-size:2rem}.underscores .slot{position:relative;min-width:2rem;min-height:2.75rem;display:inline-flex;align-items:flex-end;justify-content:center;font-weight:600;color:#1f2937;line-height:1}.underscores .slot:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background-color:#dbeafe;border-radius:999px;transition:background-color .2s ease,transform .2s ease}.underscores .slot.filled{color:#1d4ed8}.underscores .slot.filled:after{background-color:#2563eb99}.underscores .slot.active:after{background-color:#2563eb;transform:scaleY(1.2)}.underscores .slot.divider{min-width:auto;padding:0 .35rem;font-weight:500}.underscores .slot.divider:after{content:none}.answer{display:flex;flex-direction:column;gap:1rem;position:relative}.answer input{font-size:1.2rem}.hidden-input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}.answer button{align-self:flex-start}.feedback{padding:1rem 1.25rem;border-radius:16px;font-weight:600}.feedback.correct{background-color:#dcfce7;color:#166534}.feedback.incorrect{background-color:#fee2e2;color:#991b1b}.next-hint{margin:0;color:#6b7280;font-style:italic}.actions{display:flex;gap:1rem}.primary{background-color:#2563eb;color:#fff}.word-form form{display:flex;flex-direction:column;gap:.75rem}.word-form textarea{min-height:110px}.word-settings{display:flex;justify-content:space-between;align-items:center}.toggle{display:inline-flex;align-items:center;gap:.75rem;font-weight:600}.toggle input{width:1.2rem;height:1.2rem}.word-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}.word-list li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border:1px solid #e5e7eb;border-radius:14px;align-items:flex-start}.word-list .meta{margin:.35rem 0 0;color:#6b7280;font-size:.9rem}.word-list button{white-space:nowrap}.settings-card{gap:1.5rem}.setting-group{display:flex;flex-direction:column;gap:1rem}.slider{display:flex;flex-direction:column;gap:.5rem}.slider label{display:flex;justify-content:space-between;font-weight:600;color:#1f2937}.stats-card section{display:flex;flex-direction:column;gap:.75rem}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}.stat-grid.compact{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.stat{background:#f8fbff;border-radius:18px;padding:1.25rem;display:flex;flex-direction:column;gap:.35rem}.stat strong{font-size:1.75rem;color:#1d4ed8}.stat p{margin:0;color:#6b7280}.muted{color:#6b7280;margin:0}.table-wrapper{border:1px solid #e5e7eb;border-radius:16px;overflow-x:auto}table{width:100%;border-collapse:collapse}table th,table td{padding:.75rem 1rem;text-align:left;font-size:.95rem}table thead{background-color:#f1f5f9;color:#475569}table tbody tr:nth-child(2n){background-color:transparent}table tbody tr:nth-child(odd){background-color:#f8fafc}.queue-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}.queue-list li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border:1px solid #e5e7eb;border-radius:14px;align-items:center}.queue-list p{margin:.35rem 0 0}.tag{background-color:#eff6ff;color:#1d4ed8;padding:.35rem .75rem;border-radius:999px;font-size:.85rem;font-weight:600}@media(max-width:640px){.app-shell{padding:1.5rem 1rem 3rem}.practice-card,.placeholder-card{padding:1.75rem}.practice-header{flex-direction:column;align-items:flex-start}.answer button{width:100%}}