@import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;700;900&family=Baloo+2:wght@500;600;700;800&display=swap";:root{--coral-500:#ff5b45;--coral-600:#f0402a;--coral-100:#ffe5e0;--coral-050:#fff0ed;--orange-500:#ff8a3d;--orange-100:#ffe8d4;--cream-050:#fff6ee;--cream-100:#fbede1;--white:#fff;--navy-900:#0d182a;--slate-500:#5b6b7b;--grey-400:#9ca3af;--grey-200:#e7ecf1;--mint-300:#86f0c2;--green-500:#22c55e;--green-050:#e7fbf0;--yellow-500:#eab308;--yellow-050:#fdf6e3;--gold-star:#ffc01e;--red-500:#dc2626;--red-050:#fdecec;--blue-500:#2563eb;--blue-050:#e9f0fe;--score-good:var(--green-500);--score-okay:var(--yellow-500);--score-work:var(--coral-500);--bg-app:var(--cream-050);--surface-card:var(--white);--surface-sunken:var(--cream-100);--surface-brand:var(--coral-500);--surface-brand-soft:var(--coral-050);--text-primary:var(--navy-900);--text-secondary:var(--slate-500);--text-muted:var(--grey-400);--text-on-brand:var(--white);--text-link:var(--blue-500);--border-hairline:var(--grey-200);--border-strong:#d5dce3;--accent:var(--coral-500);--accent-hover:var(--coral-600);--focus-ring:color-mix(in srgb, var(--coral-500) 45%, transparent);--font-display:"Poppins", "Noto Sans TC", system-ui, sans-serif;--font-body:"Noto Sans TC", "Poppins", system-ui, sans-serif;--font-playful:"Baloo 2", "Poppins", "Noto Sans TC", system-ui, sans-serif;--font-en:"Poppins", system-ui, sans-serif;--fs-display:34px;--fs-h1:26px;--fs-h2:22px;--fs-h3:18px;--fs-body:16px;--fs-sm:14px;--fs-xs:12px;--fs-practice:24px;--fs-score-lg:56px;--lh-tight:1.15;--lh-snug:1.3;--lh-body:1.6;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-heavy:800;--ls-tight:-.01em;--ls-normal:0;--ls-wide:.02em;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-sm:10px;--radius-md:14px;--radius-lg:18px;--radius-xl:24px;--radius-2xl:28px;--radius-pill:999px;--control-h:52px;--control-h-sm:44px;--tap-min:44px;--record-size:80px;--page-pad:20px;--nav-h:68px;--content-max:440px;--shadow-xs:0 1px 2px #0d182a0d;--shadow-sm:0 2px 8px #0d182a0f;--shadow-card:0 6px 20px #0d182a12;--shadow-lg:0 12px 32px #0d182a1a;--shadow-brand:0 8px 20px #ff5b4547;--shadow-record:0 10px 30px #ff5b4566;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--dur-fast:.12s;--dur-base:.22s;--dur-slow:.4s}@keyframes echoup-breathe{0%,to{box-shadow:var(--shadow-record);transform:scale(1)}50%{transform:scale(1.06);box-shadow:0 14px 40px #ff5b4580}}@keyframes echoup-pulse-ring{0%{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes echoup-wave{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes echoup-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes echoup-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}*{box-sizing:border-box}body{background:var(--cream-050);color:var(--navy-900);font-family:var(--font-body);font-size:14px;line-height:var(--lh-body);margin:0}#root{min-height:100vh;display:flex}.sidebar{background:var(--white);border-right:1px solid var(--grey-200);flex-direction:column;flex-shrink:0;gap:4px;width:232px;height:100vh;padding:20px 12px;display:flex;position:sticky;top:0}.sidebar-brand{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--coral-500);align-items:center;gap:10px;padding:4px 12px 20px;font-size:18px;display:flex}.nav-item{border-radius:var(--radius-md);color:var(--slate-500);font-weight:var(--fw-medium);cursor:pointer;font-size:14px;font-family:var(--font-body);text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:10px 12px;display:flex}.nav-item.active{background:var(--coral-050);color:var(--coral-500);font-weight:var(--fw-semibold)}.nav-item:disabled{opacity:.45;cursor:not-allowed}.main{flex:1;max-width:1240px;padding:28px 36px 60px}.page-title{font-size:24px;font-weight:var(--fw-semibold);margin:0 0 4px}.page-subtitle{color:var(--slate-500);margin:0 0 24px;font-size:14px}.card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-card,0 6px 20px #0d182a0f);margin-bottom:20px;padding:20px}.card h2{font-size:18px;font-weight:var(--fw-semibold);margin:0 0 14px}.field-label{font-weight:var(--fw-semibold);margin:14px 0 6px;font-size:14px;display:block}textarea,input[type=number]{border:1px solid var(--grey-200);border-radius:var(--radius-md);width:100%;font-family:var(--font-body);color:var(--navy-900);background:var(--white);padding:10px 12px;font-size:14px}textarea:focus,input:focus{outline:2px solid var(--coral-500);outline-offset:1px;border-color:var(--coral-500)}.category-row{gap:10px;display:flex}.category-btn{border:2px solid var(--grey-200);border-radius:var(--radius-md);background:var(--white);cursor:pointer;font-family:var(--font-body);color:var(--navy-900);text-align:center;flex:1;padding:14px;font-size:14px}.category-btn .emoji{margin-bottom:4px;font-size:22px;display:block}.category-btn.selected{border-color:var(--coral-500);background:var(--coral-050);font-weight:var(--fw-semibold)}.dropzone{border:2px dashed var(--grey-200);border-radius:var(--radius-md);text-align:center;color:var(--slate-500);cursor:pointer;background:var(--cream-050);padding:28px}.dropzone:hover{border-color:var(--coral-500)}.preview-img{border-radius:var(--radius-md);max-width:100%;max-height:300px;margin:0 auto;display:block}.btn-primary{background:var(--coral-500);color:var(--white);border-radius:var(--radius-pill);height:44px;font-size:15px;font-weight:var(--fw-semibold);font-family:var(--font-body);cursor:pointer;border:none;padding:0 28px}.btn-primary:hover{background:var(--coral-600)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{border:1px solid var(--grey-200);border-radius:var(--radius-pill);height:36px;color:var(--slate-500);cursor:pointer;font-size:13px;font-family:var(--font-body);background:0 0;padding:0 16px}.btn-ghost:hover{border-color:var(--coral-500);color:var(--coral-500)}.items-table{border-collapse:collapse;width:100%}.items-table.cloze-table{table-layout:fixed}.items-table th{text-align:left;color:var(--slate-500);font-size:12px;font-weight:var(--fw-semibold);border-bottom:1px solid var(--grey-200);padding:8px 10px}.items-table td{border-bottom:1px solid var(--grey-200);vertical-align:top;padding:6px}.items-table input{border-radius:var(--radius-sm);width:100%;font-size:14px;font-family:var(--font-body);color:var(--navy-900);background:0 0;border:1px solid #0000;padding:6px 8px}.items-table input.en{font-family:var(--font-en);font-weight:var(--fw-medium)}.items-table input:hover{border-color:var(--grey-200)}.items-table input:focus{background:var(--white);border-color:var(--coral-500);outline:none}.regen-link{color:var(--slate-500);cursor:pointer;font-size:11px;font-family:var(--font-body);white-space:nowrap;background:0 0;border:none;padding:0;line-height:1.2}.regen-link:hover{color:var(--coral-500)}.items-table th.audio-col,.items-table td.audio-col{text-align:center;padding-left:0;padding-right:0}.items-table textarea.en-cell{border-radius:var(--radius-sm);width:100%;font-size:14px;line-height:1.4;font-family:var(--font-en);font-weight:var(--fw-medium);color:var(--navy-900);resize:vertical;background:0 0;border:1px solid #0000;min-height:34px;padding:6px 8px}.items-table textarea.en-cell:hover{border-color:var(--grey-200)}.items-table textarea.en-cell:focus{background:var(--white);border-color:var(--coral-500);outline:none}.items-table textarea.hint-cell{border-radius:var(--radius-sm);width:100%;font-size:13px;line-height:1.45;font-family:var(--font-body);color:var(--navy-900);resize:vertical;background:0 0;border:1px solid #0000;min-height:46px;padding:6px 8px}.items-table textarea.hint-cell:hover{border-color:var(--grey-200)}.items-table textarea.hint-cell:focus{background:var(--white);border-color:var(--coral-500);outline:none}.row-delete{color:var(--grey-400);cursor:pointer;background:0 0;border:none;padding:4px;font-size:16px}.row-delete:hover{color:var(--red-500)}.error-box{background:var(--red-050);color:var(--red-500);border-radius:var(--radius-md);margin-top:12px;padding:12px 14px;font-size:13px}.spinner{border:2px solid #fff6;border-top-color:var(--white);vertical-align:-3px;border-radius:50%;width:16px;height:16px;margin-right:8px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.meta-note{color:var(--text-muted,var(--slate-500));margin-top:10px;font-size:12px}.sidebar-foot{border-top:1px solid var(--grey-200);margin-top:auto;padding-top:10px}.sidebar-user{font-size:13px;font-weight:var(--fw-semibold);color:var(--navy-900);padding:4px 12px 8px}.nav-item.logout{color:var(--slate-500)}.login-wrap{flex:1;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.login-card{flex-direction:column;width:100%;max-width:380px;display:flex}.login-brand{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--coral-500);font-size:22px}.login-sub{color:var(--slate-500);margin:4px 0 18px;font-size:13px}.login-label{font-size:13px;font-weight:var(--fw-semibold);color:var(--slate-500);margin:12px 0 6px}.login-input{border:1px solid var(--grey-200);border-radius:var(--radius-sm);width:100%;font-size:14px;font-family:var(--font-body);color:var(--navy-900);background:var(--white);padding:10px 12px}.login-input:focus{border-color:var(--coral-500);outline:none}.login-error{color:var(--coral-600,#d64a34);margin:10px 0 0;font-size:13px}.login-submit{margin-top:18px}.assign-panel{flex-direction:column;max-width:460px;display:flex}.assign-done-title{font-size:16px;font-weight:var(--fw-semibold);color:var(--navy-900)}.assign-summary{color:var(--slate-500);gap:16px;margin-top:10px;font-size:13px;display:flex}.track-list{flex-direction:column;gap:12px;margin-top:12px;display:flex}.track-card{text-align:left;border:1px solid var(--grey-200);border-radius:var(--radius-md);background:var(--white);cursor:pointer;flex-direction:column;gap:4px;padding:14px 16px;display:flex}.track-card:hover{border-color:var(--coral-500)}.track-card-title{font-size:15px;font-weight:var(--fw-semibold);color:var(--navy-900)}.track-student{border-top:1px solid var(--grey-200);margin-top:14px;padding-top:14px}.track-student-head{align-items:baseline;gap:10px;margin-bottom:8px;display:flex}.track-student-name{font-size:15px;font-weight:var(--fw-semibold);color:var(--navy-900)}.track-items{flex-direction:column;gap:8px;display:flex}.track-item{border-bottom:1px dashed var(--grey-200);gap:14px;padding:8px 0;display:flex}.track-item-en{font-family:var(--font-en);font-weight:var(--fw-medium);color:var(--navy-900);flex:0 0 180px;font-size:14px}.track-item-body{flex-direction:column;flex:1;gap:6px;display:flex}.track-quiz{font-size:14px;font-weight:var(--fw-semibold)}.track-attempt{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.track-score{font-size:20px;font-weight:var(--fw-bold);min-width:32px}.lib-items{flex-direction:column;gap:12px;margin-top:16px;display:flex}.lib-item{border-bottom:1px solid var(--grey-200);gap:14px;padding:12px 0;display:flex}.lib-item-img{border-radius:var(--radius-md);object-fit:cover;background:var(--cream-050);flex-shrink:0;width:64px;height:64px}.lib-item-img-empty{border:1px dashed var(--grey-200)}.lib-item-body{flex:1;min-width:0}.lib-item-top{align-items:center;gap:10px;display:flex}.lib-item-en{font-family:var(--font-en);font-weight:var(--fw-semibold);color:var(--navy-900);font-size:15px}.lib-item-hint{color:var(--slate-500);background:var(--cream-050);border-radius:var(--radius-sm);margin-top:6px;padding:6px 10px;font-size:13px;line-height:1.45}.link-inline{font:inherit;color:var(--coral-600);font-weight:var(--fw-semibold);cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.link-inline:hover{color:var(--coral-500)}.modal-backdrop{z-index:100;background:#0f1e3761;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-card{background:var(--white);border-radius:var(--radius-lg,20px);width:100%;max-width:480px;padding:24px;box-shadow:0 18px 48px #0f1e372e}.modal-card h2{color:var(--navy-900);margin:0;font-size:18px}.report-system-box{background:var(--cream-050);border:1px solid var(--grey-200);border-radius:var(--radius-md);color:var(--navy-900);margin-top:12px;padding:10px 12px;font-size:13px;line-height:1.5}.report-system-title{font-size:12px;font-weight:var(--fw-semibold);color:var(--slate-500);margin-bottom:4px}.report-system-raw{font-family:var(--font-en);color:var(--slate-500);word-break:break-word;margin-top:6px;font-size:11px}