:root{color:#142033;background:#f6f8fb;font-family:Inter,Noto Sans JP,Hiragino Sans,Yu Gothic UI,Meiryo,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg: #f6f8fb;--surface: #ffffff;--surface-soft: #f9fbfd;--line: #dfe7f0;--line-strong: #bfd0e1;--text: #142033;--muted: #64748b;--primary: #2563eb;--primary-strong: #1d4ed8;--green: #0f9f6e;--green-soft: #e8f8f1;--red: #dc3d4b;--red-soft: #fff0f2;--yellow: #d79f13;--yellow-soft: #fff8df;--navy: #172554;--shadow: 0 20px 60px rgba(21, 31, 48, .08)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(180deg,#ffffffb8,#f6f8fbf5),var(--bg)}button{font:inherit}.app-shell{display:grid;grid-template-columns:76px minmax(0,1fr) 336px;min-height:100vh;gap:22px;padding:22px}.side-nav{align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:22px;padding:14px 10px}.brand-mark{align-items:center;background:var(--navy);border-radius:8px;color:#fff;display:flex;font-size:20px;font-weight:800;height:46px;justify-content:center;text-decoration:none;width:46px}.nav-stack{display:flex;flex:1;flex-direction:column;gap:10px}.nav-button{align-items:center;background:transparent;border:1px solid transparent;border-radius:8px;color:#53657a;cursor:pointer;display:flex;height:46px;justify-content:center;transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease;width:46px}.nav-button:hover,.nav-button:focus-visible{background:#edf4ff;border-color:#cadcf8;color:var(--primary);outline:none}.nav-button.active{background:#eaf2ff;border-color:#bfd4ff;color:var(--primary-strong)}.reset-nav{color:#728197}.study-column{display:flex;flex-direction:column;gap:16px;min-width:0}.topbar{align-items:center;display:flex;justify-content:space-between;min-height:58px}.app-title{color:var(--muted);font-size:14px;font-weight:700;line-height:1.2;margin:0 0 5px}h1{font-size:clamp(26px,3vw,40px);letter-spacing:0;line-height:1.05;margin:0}.topbar-actions,.empty-actions{align-items:center;display:flex;gap:10px}.source-chip{align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--muted);display:inline-flex;font-size:13px;font-weight:800;height:40px;padding:0 12px}.ghost-button,.primary-button{align-items:center;border-radius:8px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:800;gap:8px;min-height:42px;padding:0 14px;text-decoration:none;transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease}.ghost-button{background:var(--surface);border:1px solid var(--line);color:#324158}.ghost-button:hover,.ghost-button:focus-visible{border-color:var(--line-strong);outline:none;transform:translateY(-1px)}.ghost-button:disabled{color:#94a3b8;cursor:not-allowed;transform:none}.sync-status{align-items:center;background:#edf8f3;border:1px solid #bde5d2;border-radius:8px;color:#0f7a58;display:inline-flex;font-size:13px;font-weight:900;gap:6px;min-height:40px;padding:0 11px;white-space:nowrap}.sync-status.offline{background:#fff8df;border-color:#f0d98b;color:#8b620c}.primary-button{background:var(--primary);border:1px solid var(--primary);color:#fff}.primary-button:hover,.primary-button:focus-visible{background:var(--primary-strong);outline:none;transform:translateY(-1px)}.mobile-mode-tabs{display:none}.quiz-panel,.status-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.quiz-panel{display:flex;flex:1;flex-direction:column;min-height:680px;overflow:hidden;padding:22px}.progress-row{align-items:center;color:var(--muted);display:grid;font-size:13px;font-weight:800;gap:12px;grid-template-columns:auto minmax(90px,1fr) auto;margin-bottom:16px}.progress-track{background:#e8eef6;border-radius:999px;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,var(--primary),#18a37a);height:100%;transition:width .18s ease}.question-layout{display:grid;flex:1;gap:18px;grid-template-rows:auto 1fr auto;min-height:0}.word-zone{background:var(--surface-soft);border:1px solid var(--line);border-radius:8px;padding:24px}.word-meta{color:var(--muted);display:flex;flex-wrap:wrap;font-size:13px;font-weight:800;gap:8px;justify-content:space-between;margin-bottom:12px}.word-row{align-items:center;display:flex;gap:16px;justify-content:space-between}.headword{color:var(--navy);font-size:clamp(48px,7vw,92px);font-weight:850;letter-spacing:0;line-height:1;margin:0;overflow-wrap:anywhere}.word-prompt{color:#42526a;font-size:17px;font-weight:800;margin:12px 0 0}.speak-button{align-items:center;background:#eaf2ff;border:1px solid #c7d9ff;border-radius:8px;color:var(--primary-strong);cursor:pointer;display:flex;flex:0 0 auto;height:52px;justify-content:center;width:52px}.speak-button:hover,.speak-button:focus-visible{background:#dceaff;outline:none}.choice-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.choice-button{align-items:center;background:#fff;border:1px solid var(--line-strong);border-radius:8px;color:var(--text);cursor:pointer;display:grid;gap:12px;grid-template-columns:40px minmax(0,1fr) 24px;min-height:96px;padding:16px;text-align:left;transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease}.choice-button:hover,.choice-button:focus-visible{border-color:var(--primary);box-shadow:0 10px 28px #2563eb1f;outline:none;transform:translateY(-1px)}.choice-button:disabled{cursor:default;transform:none}.choice-label{align-items:center;background:#eff4fb;border-radius:8px;color:#334155;display:flex;font-size:15px;font-weight:900;height:40px;justify-content:center;width:40px}.choice-text{font-size:clamp(15px,1.5vw,18px);font-weight:760;line-height:1.55;min-width:0}.choice-icon{justify-self:end}.choice-button.correct{background:var(--green-soft);border-color:#8edbbd}.choice-button.correct .choice-label{background:var(--green);color:#fff}.choice-button.correct .choice-icon{color:var(--green)}.choice-button.wrong{background:var(--red-soft);border-color:#f1a7b0}.choice-button.wrong .choice-label{background:var(--red);color:#fff}.choice-button.wrong .choice-icon{color:var(--red)}.choice-button.muted{color:#8a97a8}.feedback-zone{align-items:center;background:var(--surface-soft);border:1px solid var(--line);border-radius:8px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto;min-height:92px;padding:16px 18px}.feedback-zone>.quiet-text{grid-column:1 / -1}.feedback-zone.success{background:var(--green-soft);border-color:#a7e4cb}.feedback-zone.error{background:var(--red-soft);border-color:#f4b5bd}.feedback-copy{display:grid;gap:6px;min-width:0}.feedback-title{align-items:center;display:flex;font-size:18px;font-weight:900;gap:8px}.feedback-zone p{color:#334155;font-size:16px;font-weight:720;line-height:1.5;margin:0}.feedback-zone .primary-button{justify-content:center;justify-self:end;min-width:128px}.quiet-text{color:var(--muted);font-size:14px;font-weight:700;line-height:1.6;margin:0}.empty-state{align-items:center;color:var(--muted);display:flex;flex:1;flex-direction:column;justify-content:center;min-height:420px;text-align:center}.empty-state svg{color:var(--green);margin-bottom:14px}.empty-state h2{color:var(--navy);font-size:30px;line-height:1.2;margin:0 0 8px}.empty-state p{margin:0 0 20px}.status-panel{align-self:stretch;display:flex;flex-direction:column;gap:18px;padding:20px}.status-header,.status-block-title{align-items:center;display:flex;justify-content:space-between}.status-header p{font-size:20px;font-weight:900;margin:0}.status-header span{color:var(--muted);font-size:13px;font-weight:850}.metric-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.metric{border:1px solid var(--line);border-radius:8px;min-height:92px;padding:14px}.metric span{color:#5c6d82;display:block;font-size:12px;font-weight:900;margin-bottom:11px}.metric strong{color:var(--text);display:block;font-size:31px;letter-spacing:0;line-height:1}.metric-blue{background:#edf5ff}.metric-green{background:var(--green-soft)}.metric-yellow{background:var(--yellow-soft)}.metric-navy{background:#eef2ff}.status-block{border-top:1px solid var(--line);padding-top:17px}.status-block-title{color:#26384f;font-size:15px;font-weight:900;gap:8px;justify-content:flex-start;margin-bottom:12px}.review-list{display:flex;flex-direction:column;gap:8px}.review-item{align-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;min-height:48px;padding:0 12px;text-align:left}.review-item:hover,.review-item:focus-visible{border-color:var(--primary);outline:none}.review-item span{font-size:15px;font-weight:850}.review-item small{color:var(--muted);font-size:12px;font-weight:850}.session-stats{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}.session-stats div{background:var(--surface-soft);border:1px solid var(--line);border-radius:8px;padding:10px}.session-stats dt{color:var(--muted);font-size:11px;font-weight:900;margin:0 0 6px}.session-stats dd{color:var(--navy);font-size:22px;font-weight:900;line-height:1;margin:0}.dialog-backdrop{align-items:center;background:#0f172a5c;display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:20}.confirm-dialog{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 26px 80px #0f172a3d;display:grid;gap:14px;max-width:440px;padding:24px;width:100%}.dialog-icon{align-items:center;background:var(--yellow-soft);border:1px solid #f2d78e;border-radius:8px;color:#9b6b0b;display:flex;height:48px;justify-content:center;width:48px}.confirm-dialog h2{color:var(--navy);font-size:24px;line-height:1.2;margin:0}.confirm-dialog p{color:#475569;font-size:15px;font-weight:720;line-height:1.65;margin:0}.dialog-actions{display:flex;gap:10px;justify-content:flex-end}.danger-button{align-items:center;background:#dc3d4b;border:1px solid #dc3d4b;border-radius:8px;color:#fff;cursor:pointer;display:inline-flex;font-size:14px;font-weight:900;justify-content:center;min-height:42px;padding:0 14px}.danger-button:hover,.danger-button:focus-visible{background:#be2f3d;outline:none}.teacher-shell{display:grid;gap:18px;min-height:100vh;padding:24px}.teacher-header{align-items:center;display:grid;gap:16px;grid-template-columns:54px minmax(0,1fr) auto}.teacher-title{min-width:0}.teacher-actions{align-items:center;display:flex;gap:10px}.role-link-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}.role-link-card,.teacher-student-card,.teacher-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.role-link-card{display:grid;gap:12px;padding:16px}.role-link-title,.role-link-row,.updated-pill,.teacher-panel-title{align-items:center;display:flex}.role-link-title{color:#26384f;font-size:14px;font-weight:900;gap:8px}.role-link-row{background:var(--surface-soft);border:1px solid var(--line);border-radius:8px;gap:10px;min-width:0;padding:9px 10px}.role-link-row a{color:var(--primary-strong);flex:1;font-size:13px;font-weight:800;min-width:0;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.icon-action{align-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;color:#334155;cursor:pointer;display:inline-flex;flex:0 0 auto;height:34px;justify-content:center;width:34px}.icon-action:hover,.icon-action:focus-visible{border-color:var(--primary);color:var(--primary-strong);outline:none}.teacher-overview{display:grid;gap:12px;grid-template-columns:minmax(260px,1.4fr) repeat(4,minmax(130px,1fr))}.teacher-student-card{align-items:center;display:flex;gap:16px;justify-content:space-between;min-height:92px;padding:16px}.teacher-student-card p{color:var(--muted);font-size:12px;font-weight:900;margin:0 0 8px}.teacher-student-card strong{color:var(--navy);display:block;font-size:clamp(22px,2vw,32px);line-height:1.1;overflow-wrap:anywhere}.updated-pill{background:#eef4fb;border:1px solid var(--line);border-radius:8px;color:#53657a;flex:0 0 auto;font-size:12px;font-weight:900;gap:6px;min-height:34px;padding:0 10px}.teacher-error{background:var(--red-soft);border:1px solid #f1a7b0;border-radius:8px;color:#9b2432;font-size:14px;font-weight:850;margin:0;padding:12px 14px}.teacher-empty-panel{align-items:center;color:var(--muted);display:grid;justify-items:center;padding:34px 20px;text-align:center}.teacher-empty-panel svg{color:var(--green);margin-bottom:8px}.teacher-empty-panel h2{color:var(--navy);font-size:24px;margin:0 0 8px}.teacher-empty-panel p{font-size:15px;font-weight:720;line-height:1.7;margin:0;max-width:560px}.teacher-table-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.teacher-panel{display:grid;gap:14px;min-width:0;padding:18px}.teacher-panel-title{color:#26384f;gap:8px}.teacher-panel-title h2{font-size:18px;line-height:1.2;margin:0}.progress-table-wrap{overflow-x:auto}.progress-table{border-collapse:collapse;min-width:680px;width:100%}.progress-table th,.progress-table td{border-bottom:1px solid var(--line);font-size:13px;line-height:1.45;padding:12px 10px;text-align:left;vertical-align:top}.progress-table th{color:var(--muted);font-size:11px;font-weight:900;white-space:nowrap}.progress-table td{color:#334155;font-weight:720}.progress-table td:first-child,.progress-table td:nth-child(4),.progress-table td:nth-child(5),.progress-table td:nth-child(6){white-space:nowrap}.progress-table strong{color:var(--navy);font-weight:900}@media(max-width:1080px){.app-shell{grid-template-columns:64px minmax(0,1fr)}.side-nav{grid-row:1 / span 2}.status-panel{grid-column:2}.quiz-panel{min-height:calc(100vh - 134px)}.teacher-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.teacher-student-card{grid-column:1 / -1}.teacher-table-grid{grid-template-columns:1fr}}@media(max-width:720px){body{background:var(--surface)}.app-shell{display:flex;flex-direction:column;gap:0;min-height:100vh;padding:0}.side-nav{display:none}.study-column{min-height:auto;padding:14px}.status-panel{border-radius:8px;box-shadow:none;margin:0 14px 14px}.topbar{min-height:auto;padding:2px 0 10px}.topbar-actions{display:none}.app-title{font-size:12px}h1{font-size:25px}.mobile-mode-tabs{background:#edf2f8;border-radius:8px;display:grid;gap:4px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:12px;padding:4px}.mobile-mode-tabs button{background:transparent;border:0;border-radius:6px;color:#526177;cursor:pointer;font-size:12px;font-weight:900;min-height:38px;padding:0 4px}.mobile-mode-tabs button.selected{background:#fff;color:var(--primary-strong)}.quiz-panel{border:0;box-shadow:none;min-height:0;padding:0}.progress-row{margin-bottom:12px}.question-layout{gap:12px}.word-zone{padding:18px}.word-meta{font-size:12px}.headword{font-size:clamp(38px,12vw,56px);overflow-wrap:normal;word-break:normal}.word-prompt{font-size:15px}.speak-button{height:48px;width:48px}.choice-grid{grid-template-columns:1fr}.choice-button{grid-template-columns:38px minmax(0,1fr) 22px;min-height:72px;padding:12px}.choice-label{height:38px;width:38px}.choice-text{font-size:15px;line-height:1.45}.feedback-zone{align-items:stretch;grid-template-columns:1fr;min-height:124px;padding:14px}.primary-button,.ghost-button{justify-content:center;width:100%}.feedback-zone .primary-button{justify-self:stretch;width:100%}.empty-actions{width:100%}.dialog-actions{grid-template-columns:1fr}.dialog-actions{display:grid}.danger-button{width:100%}.teacher-shell{gap:14px;padding:14px}.teacher-header{grid-template-columns:46px minmax(0,1fr)}.teacher-header .brand-mark{height:46px;width:46px}.teacher-actions{grid-column:1 / -1;width:100%}.teacher-actions .ghost-button,.teacher-actions .primary-button{flex:1}.role-link-grid,.teacher-overview{grid-template-columns:1fr}.teacher-student-card{align-items:flex-start;flex-direction:column}.role-link-row a{font-size:12px}.progress-table{min-width:620px}}