*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#f7f8fb;color:#1f2430}a{color:#2b4c7e}button,input,textarea,select{font:inherit}.app-shell{display:flex;min-height:100vh}.nav{width:220px;background:#1d3557;color:#fff;padding:24px 16px;display:flex;flex-direction:column;gap:8px}.nav__brand{font-weight:700;font-size:1.2rem;margin-bottom:24px}.nav a{color:#ffffffd9;text-decoration:none;padding:8px 12px;border-radius:10px}.nav a:hover,.nav a.active{background:#ffffff1f;color:#fff}.nav__logout{margin-top:auto;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}.main{flex:1;padding:32px;max-width:960px}.card{background:#fff;border:1px solid #e2e5eb;border-radius:10px;box-shadow:0 1px 3px #00000014;padding:20px;margin-bottom:16px}.card-list{display:grid;gap:12px}h1{font-size:1.6rem;margin-top:0}.field{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}.field label{font-size:.85rem;color:#6b7280}.field input,.field select,.field textarea{padding:8px 10px;border:1px solid #e2e5eb;border-radius:6px}.field textarea{min-height:160px;font-family:inherit;resize:vertical}.btn{display:inline-block;padding:9px 16px;border-radius:6px;border:none;background:#2b4c7e;color:#fff;cursor:pointer;font-weight:600}.btn:hover{background:#1d3557}.btn:disabled{opacity:.55;cursor:not-allowed}.btn--secondary{background:transparent;color:#2b4c7e;border:1px solid #2b4c7e}.btn--danger{background:#c94c4c}.btn-row{display:flex;gap:8px;flex-wrap:wrap}.error-banner{background:#fdecea;color:#c94c4c;border:1px solid #f4c9c4;padding:10px 14px;border-radius:10px;margin-bottom:16px}.muted{color:#6b7280;font-size:.9rem}.badge{display:inline-block;font-size:.75rem;padding:2px 8px;border-radius:999px;background:#e2e5eb;color:#6b7280}.badge--success{background:#2f9e5b26;color:#2f9e5b}.badge--accent{background:#e8a33d33;color:#c27d17}table{width:100%;border-collapse:collapse}table th,table td{text-align:left;padding:8px 10px;border-bottom:1px solid #e2e5eb}.ipa-word{display:inline-block;margin:2px 6px 2px 0;padding:2px 6px;border-radius:6px;background:#eef2fb}.ipa-word--incorrect{background:#fbe7e7}.word-score{display:inline-block;margin:3px 4px 3px 0;padding:4px 10px;border-radius:6px;border:1px solid transparent;font:inherit;cursor:pointer}.word-score--correct{background:#2f9e5b26;border-color:#2f9e5b4d}.word-score--partial{background:#e8a33d33;border-color:#e8a33d66}.word-score--incorrect{background:#c94c4c26;border-color:#c94c4c4d}.word-score--active{outline:2px solid #2b4c7e;outline-offset:1px}.word-side-panel{position:fixed;top:0;right:0;bottom:0;width:min(360px,100vw);background:#fff;border-left:1px solid #e2e5eb;box-shadow:-4px 0 16px #0000001f;z-index:40;padding:12px 20px 20px;overflow-y:auto}.word-side-panel__header{display:flex;justify-content:flex-end}.word-side-panel__close{background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:#6b7280;padding:0 4px}.word-focus{text-align:center;font-size:1.8rem;font-weight:700;margin-bottom:20px}.phoneme-columns{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:20px}.phoneme-column{display:flex;flex-direction:column;align-items:center;gap:2px}.phoneme-column__arrow{color:#6b7280;font-size:.8rem;line-height:1}.phoneme-tile__stat{font-size:.7rem;color:#6b7280;line-height:1}.phoneme-tile__stat--low{color:#c94c4c;font-weight:600}.phoneme-tile__alternatives{font-size:.65rem;color:#6b7280;line-height:1.3;max-width:64px;text-align:center}.phoneme-tile{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:1.1rem;position:relative}.phoneme-tile--target{background:#eef2fb;color:#1d3557}.phoneme-tile--slot{border:2px dashed #e2e5eb;cursor:pointer}.phoneme-tile--correct{background:#2f9e5b26;border-color:#2f9e5b66}.phoneme-tile--incorrect{background:#c94c4c1f;border-color:#c94c4c66}.phoneme-tile__corrected-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#e8a33d}.phoneme-palette{border-top:1px solid #e2e5eb;padding-top:14px}.phoneme-palette__tiles{display:flex;flex-wrap:wrap;gap:6px}.phoneme-tile--palette{width:34px;height:34px;font-size:.95rem;background:#f7f8fb;border:1px solid #e2e5eb;cursor:grab}.phoneme-tile--palette:hover{border-color:#2b4c7e}.phoneme-tile--armed{border-color:#2b4c7e;box-shadow:0 0 0 2px #2b4c7e40}.phoneme-tile--special{color:#6b7280;font-weight:700}.student-shell{max-width:640px;margin:0 auto;padding:32px 20px}.recorder{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px}.recorder__button{width:96px;height:96px;border-radius:50%;border:none;background:#c94c4c;color:#fff;font-size:1rem;cursor:pointer}.recorder__button--recording{animation:pulse 1.4s infinite}@keyframes pulse{0%{box-shadow:0 0 #c94c4c80}70%{box-shadow:0 0 0 16px #c94c4c00}to{box-shadow:0 0 #c94c4c00}}.reading-text{font-size:1.3rem;line-height:2}.auth-shell{max-width:380px;margin:60px auto;padding:0 20px}