:root{color:#0f172a;--ui-bg:#f8fafc;--ui-surface:#fff;--ui-text:#0f172a;--ui-muted:#475569;--ui-muted-2:#64748b;--ui-border:#e2e8f0;--ui-border-strong:#cbd5e1;--ui-primary:#0f172a;--ui-primary-text:#fff;--ui-pill-active:#616569;--ui-pill-active-text:#fff;--ui-pill-idle:#fff;--ui-pill-idle-text:#0f172a;--ui-shadow:0 8px 24px #0f172a0d;--ui-radius-card:24px;--ui-radius-card-sm:20px;--ui-radius-button:16px;--ui-radius-pill:999px;background:#f8fafc;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{background:var(--ui-bg);min-width:320px;min-height:100vh;color:var(--ui-text);margin:0}button,input,select,textarea{font:inherit}.app-shell{background:var(--ui-bg);min-height:100vh;padding:24px}.container{max-width:1100px;margin:0 auto}.page-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;display:flex}.page-header>div:first-child{flex-direction:column;gap:6px;min-width:0;display:flex}.page-header h1{margin:0 0 8px;font-size:2.2rem;line-height:1.1}.page-header p{color:var(--ui-muted);margin:0}.page-header .button-row,.page-header .header-actions,.page-header .ui-header-actions{flex-shrink:0;margin-top:4px}@media (width<=760px){.page-header{flex-direction:column}.page-header .button-row,.page-header .header-actions,.page-header .ui-header-actions{width:100%;margin-top:0}}.header-actions,.ui-header-actions{justify-content:space-between;align-items:center;gap:12px;margin-top:12px;display:flex}@media (width<=640px){.header-actions,.ui-header-actions{flex-wrap:wrap}}.grid-4{grid-template-columns:repeat(1,minmax(0,1fr));gap:16px;display:grid}@media (width>=760px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=1100px){.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.card,.setting-block,.quiz-card,.review-item,.letter-card,.ui-card{background:var(--ui-surface);border:1px solid var(--ui-border);box-shadow:var(--ui-shadow)}.card,.ui-card{border-radius:var(--ui-radius-card);padding:20px}.card h2,.card h3,.ui-card h2,.ui-card h3{margin:0 0 10px}.card p,.ui-card p{color:var(--ui-muted);margin:0 0 16px}.button,.ui-button{border-radius:var(--ui-radius-button);background:var(--ui-primary);min-height:46px;color:var(--ui-primary-text);cursor:pointer;border:none;justify-content:center;align-items:center;padding:0 18px;transition:all .18s;display:inline-flex}.button:hover,.ui-button:hover{opacity:.92}.button.secondary,.ui-button.secondary,.button-secondary,.button.ghost,.ui-button.ghost,.button-ghost{background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border-strong)}.button.full,.ui-button.full,.button-full{width:100%}.button-row,.ui-button-row{flex-wrap:wrap;gap:12px;display:flex}.settings-grid,.ui-settings-grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:16px;margin-top:20px;display:grid}@media (width>=960px){.settings-grid,.ui-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.setting-block,.ui-setting-block{border-radius:var(--ui-radius-card);padding:18px}.setting-block h4,.ui-setting-block h4{margin:0 0 14px;font-size:.95rem}.radio-list,.check-list{gap:10px;display:grid}.option{border:1px solid var(--ui-border);border-radius:var(--ui-radius-button);align-items:center;gap:10px;padding:12px 14px;display:flex}.option input{margin:0}.review-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}@media (width>=760px){.review-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=1024px){.review-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.letter-card,.ui-letter-card{border-radius:var(--ui-radius-card-sm);padding:16px}.letter-main,.ui-letter-main{margin-bottom:8px;font-size:2rem;font-weight:700}.letter-meta,.ui-letter-meta{color:var(--ui-muted);font-size:.95rem}.quiz-shell,.ui-quiz-shell{max-width:760px;margin:0 auto}.progress-row,.ui-progress-row{color:var(--ui-muted-2);justify-content:space-between;margin-bottom:8px;font-size:.95rem;display:flex}.progress-bar,.ui-progress-bar{background:var(--ui-border);border-radius:999px;width:100%;height:10px;margin-bottom:20px;overflow:hidden}.progress-fill,.ui-progress-fill{background:var(--ui-primary);height:100%;transition:width .2s}.quiz-card,.ui-quiz-card{text-align:center;border-radius:32px;flex-direction:column;justify-content:center;gap:24px;min-height:420px;padding:20px;display:flex}.quiz-label,.ui-quiz-label{letter-spacing:.16em;text-transform:uppercase;color:#94a3b8;font-size:.8rem}.quiz-prompt,.ui-quiz-prompt{font-size:4.5rem;font-weight:700;line-height:1.05}.quiz-ipa,.ui-quiz-ipa{color:var(--ui-muted-2);font-size:1rem}.choice-grid,.ui-choice-grid{gap:12px;display:grid}@media (width>=760px){.choice-grid,.ui-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.choice-button,.ui-choice-button{border:1px solid var(--ui-border-strong);background:var(--ui-surface);min-height:60px;color:var(--ui-text);cursor:pointer;border-radius:18px;font-size:1.05rem}.choice-button.selected,.ui-choice-button.selected,.choice-button.is-selected,.ui-choice-button.is-selected{background:var(--ui-primary);color:var(--ui-primary-text);border-color:var(--ui-primary)}.answer-input,.styled-input,.ui-input,.styled-select,.ui-select{border-radius:var(--ui-radius-button);border:1px solid var(--ui-border-strong);background:var(--ui-surface);width:100%;max-width:360px;height:54px;color:var(--ui-text);padding:0 14px;font-size:1.05rem}.answer-input{text-align:center;margin:0 auto}.styled-select,.ui-select{text-align:left;max-width:none}.results-score{font-size:2.2rem;font-weight:700}.badge-pass,.badge-warn{border-radius:18px;padding:14px 16px;font-size:.95rem}.badge-pass{color:#047857;background:#ecfdf5}.badge-warn{color:#b45309;background:#fffbeb}.review-list{gap:12px;display:grid}.review-item,.ui-review-item{border-radius:22px;padding:18px}.review-item.wrong,.ui-review-item.wrong{background:#fef2f2;border-color:#fecaca}.review-prompt{margin:8px 0 14px;font-size:2rem;font-weight:700}.review-cols{gap:12px;display:grid}@media (width>=760px){.review-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}.small-label{text-transform:uppercase;letter-spacing:.08em;color:var(--ui-muted-2);font-size:.75rem}.good{color:#047857;font-weight:600}.bad{color:#b91c1c;font-weight:600}.filter-pill,.ui-pill,.chart-pill{border-radius:var(--ui-radius-pill);border:1px solid var(--ui-border-strong);background:var(--ui-pill-idle);min-height:40px;color:var(--ui-pill-idle-text);cursor:pointer;justify-content:center;align-items:center;padding:0 14px;transition:all .18s;display:inline-flex}.filter-pill.is-active,.filter-pill.active,.ui-pill.is-active,.ui-pill.active,.chart-pill.is-active,.chart-pill.active{background:var(--ui-pill-active);color:var(--ui-pill-active-text);border-color:var(--ui-pill-active)}.pill-row,.ui-pill-row{flex-wrap:wrap;gap:10px;display:flex}.no-matches-card{text-align:center;border-radius:var(--ui-radius-card);background:var(--ui-surface);border:1px dashed var(--ui-border-strong);color:var(--ui-muted);padding:28px}.filter-group{margin-top:12px;display:block}.filter-group-title{margin-bottom:8px;font-weight:600}.pill-row{flex-wrap:wrap;gap:8px;display:flex}.card-gap-bottom{margin-bottom:18px}.card-gap-top{margin-top:18px}.paragraph-gap-top{margin-top:12px}.radio-list-gap-bottom{margin-bottom:16px}.grid-tight-gap{gap:12px}.option-block{display:block}.field-label{margin-bottom:6px}.option-align-end{align-items:end;display:flex}.preview-body{min-height:260px;padding-top:12px}.preview-title-block{text-align:center;min-height:60px;padding-top:10px;line-height:1.4}.preview-symbol-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:16px;display:grid}.text-left{text-align:left}.preserve-lines{white-space:pre-line}.bullet-list{margin-top:10px;padding-left:20px}.button-row-center{justify-content:center}.button-row-split{justify-content:space-between;align-items:center}.button-row-wrap{flex-wrap:wrap;gap:10px}.button-row-top-sm{margin-top:12px}.button-row-top-md{margin-top:18px}.option-stack-centered{flex-direction:column;justify-content:center;gap:10px;display:flex}.inline-check{align-items:center;gap:8px;display:flex}.top-gap{margin-top:16px}.top-gap-md{margin-top:18px}.top-gap-sm{margin-top:8px}.top-gap-xs{margin-top:6px}.bottom-gap{margin-bottom:16px}.bottom-gap-md{margin-bottom:18px}.bottom-gap-sm{margin-bottom:10px}.bottom-gap-xs{margin-bottom:8px}.letter-main-sm{font-size:1.8rem}.meta-caps{text-transform:uppercase;font-size:.75rem}.card-full-span{grid-column:1/-1}.quiz-card-body{min-height:150px;padding-top:8px}.quiz-prompt-centered{text-align:center;justify-content:center;align-items:center;min-height:84px;padding-top:12px;line-height:1.45;display:flex}.no-top-margin{margin-top:0}.note-list{text-align:left;margin-top:10px;padding-left:18px}