:root { color-scheme: light; font-family: system-ui, "Yu Gothic UI", sans-serif; color: #15233a; background: #f4f7fb; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; padding: 20px; display: grid; place-items: center; }
main { width: min(100%, 34rem); padding: 24px; border-radius: 14px; background: #fff; box-shadow: 0 6px 8px rgba(25, 51, 83, .16); }
h1 { margin: 0; font-size: 1.45rem; text-wrap: balance; } p { line-height: 1.65; color: #40516a; }
form { display: grid; gap: 12px; margin-top: 20px; } label { display: grid; gap: 6px; font-size: .88rem; font-weight: 700; color: #33445e; }.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
label small { color: #52657f; font-weight: 500; }
.question-prompt { display: block; max-width: 100%; overflow-wrap: anywhere; white-space: pre-line; font-size: .95rem; font-weight: 700; line-height: 1.55; text-wrap: pretty; }
.identity-help { display: block; color: #40516a; font-size: .82rem; line-height: 1.5; }
.student-secondary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.toolbar, .submission-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }.submission-list { display: grid; }.submission-list button { text-align: left; }.student-result pre { white-space: pre-wrap; overflow-wrap: anywhere; color: #15233a; }
.projection-controls { margin: 18px 0; padding: 14px; border: 1px solid #9dc5ec; border-radius: 10px; background: #edf7ff; }.projection-controls h2 { margin: 0; font-size: 1.05rem; }.projection-summary { margin: 8px 0; font-size: .88rem; }.choice-label, .submission-select { display: flex; align-items: center; gap: 8px; color: #33445e; font-size: .88rem; font-weight: 700; }.choice-label input, .submission-select input { width: 20px; min-height: 20px; }.projection-controls button:disabled { cursor: not-allowed; opacity: .55; }
input, select, textarea, button { font: inherit; } input, select, textarea { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #aab8ca; border-radius: 8px; color: #15233a; background: #fff; } textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
button { min-height: 44px; padding: 9px 14px; border: 1px solid #1b67b1; border-radius: 8px; color: #fff; background: #1b67b1; font-weight: 700; cursor: pointer; }
button.secondary { border-color: #aab8ca; color: #27415f; background: #fff; } button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #72b5f7; outline-offset: 2px; }
.answer-field { display: grid; gap: 8px; padding-block: 4px; }
.english-symbols { display: flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: 6px; padding: 1px 0 4px; }
.english-symbols-label { flex: 0 0 auto; margin-right: 2px; color: #52657f; font-size: .78rem; font-weight: 700; }
.english-symbol-button { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 7px; font-size: 1.05rem; }
.hidden { display: none !important; }.notice { min-height: 1.5em; margin: 16px 0 0; color: #33445e; }.notice.error { color: #a61e4d; }.session, .student-result, .assignment { margin: 16px 0; padding: 12px; border-radius: 8px; background: #eaf4ff; }.session strong { display: block; font-size: 1.05rem; }.student-result p { margin: 0 0 10px; color: #15233a; font-weight: 700; }.assignment h2 { margin: 0; font-size: 1.15rem; }.assignment .passage { white-space: pre-wrap; color: #15233a; }
.submission-status { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 4px; padding: 14px; border: 1px solid #5b9d6b; border-radius: 10px; color: #174f2a; background: #e8f7ec; }
.submission-status[data-state="dirty"] { border-color: #bf7a17; color: #67420b; background: #fff3dc; }
.submission-status-icon { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: #26733c; font-size: 1.05rem; font-weight: 800; }
.submission-status[data-state="dirty"] .submission-status-icon { background: #a8660d; }
.submission-status strong { display: block; font-size: 1.02rem; }
.submission-status p { margin: 3px 0 0; color: inherit; font-size: .88rem; line-height: 1.5; }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

.teacher-page { display: block; padding: 20px; }
.teacher-main { width: min(100%, 76rem); margin: 0 auto; }
.teacher-filter-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.teacher-filter-form .field-row { min-width: 0; }
.teacher-filter-form > .toolbar { margin: 0; }
.teacher-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 16px 0 10px; overflow: hidden; border-radius: 9px; background: #c8d3e0; }
.teacher-status-grid > div { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; background: #eaf4ff; }
.teacher-status-grid span { color: #52657f; font-size: .75rem; font-weight: 700; }
.teacher-status-grid strong { overflow-wrap: anywhere; font-size: .96rem; }
.projection-controls { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(15rem, 1.3fr) minmax(12rem, 1fr) auto; gap: 8px 14px; align-items: end; margin: 0 0 10px; padding: 12px; border: 1px solid #9dc5ec; border-radius: 9px; background: #edf7ff; }
.projection-question-control { grid-row: 1 / span 2; }
.projection-summary { align-self: center; margin: 0; }
.projection-actions { display: flex; grid-column: 2 / -1; flex-wrap: wrap; gap: 8px; }
.submission-section { margin-top: 24px; }
.section-heading { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 10px; }
.section-heading h2 { margin: 0; font-size: 1.12rem; }
.section-heading p { margin: 3px 0 0; font-size: .84rem; }
.section-heading small { color: #52657f; }
.submission-table-wrap { overflow-x: auto; border: 1px solid #c8d3e0; border-radius: 10px; }
.submission-table { width: 100%; min-width: 740px; border-collapse: collapse; table-layout: fixed; }
.submission-table th, .submission-table td { padding: 10px 12px; border-bottom: 1px solid #dbe3ec; text-align: left; vertical-align: top; }
.submission-table thead th { position: sticky; top: 0; z-index: 1; color: #40516a; background: #edf3f9; font-size: .78rem; }
.submission-table thead th:nth-child(1) { width: 4.5rem; text-align: center; }
.submission-table thead th:nth-child(2) { width: 10rem; }
.submission-table thead th:nth-child(4) { width: 6rem; }
.submission-table thead th:nth-child(5) { width: 6rem; }
.submission-row:last-child th, .submission-row:last-child td { border-bottom: 0; }
.submission-row.selected { background: #edf7ff; }
.submission-row th, .submission-row td { writing-mode: horizontal-tb; word-break: normal; }
.submission-row > td:first-child { text-align: center; }
.submission-select { justify-content: center; }
.submission-answer { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.submission-answer > span { display: block; }
.input-method-badge { display: block; margin-top: 5px; color: #52657f; font-size: .74rem; font-weight: 600; }
.submission-meta { white-space: pre-line; color: #52657f; font-size: .8rem; }
button.compact { min-height: 36px; padding: 6px 10px; white-space: nowrap; }
.submission-empty { margin: 0; padding: 22px; text-align: center; }
.teacher-admin { margin-top: 24px; padding-top: 14px; border-top: 1px solid #c8d3e0; }
.teacher-admin summary { min-height: 44px; padding: 10px 0; color: #27415f; font-weight: 700; cursor: pointer; }
.teacher-admin > p { margin: 4px 0 0; }
.ai-panel { margin-top: 28px; padding-top: 20px; border-top: 1px solid #c8d3e0; }
.ai-heading { align-items: center; }
.ai-heading p { margin: 3px 0 0; }
.ai-empty { padding: 18px; border-radius: 10px; color: #40516a; background: #edf3f9; }
.ai-question-bar { display: grid; grid-template-columns: minmax(14rem, .8fr) minmax(20rem, 1.5fr) auto; gap: 10px 16px; align-items: end; padding: 14px; border: 1px solid #9dc5ec; border-radius: 10px; background: #edf7ff; }
.ai-question-prompt { grid-column: 2 / -1; grid-row: 1; max-height: 4.8em; margin: 0; overflow: auto; font-size: .84rem; line-height: 1.5; white-space: pre-wrap; }
.ai-counts { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 6px; }
.ai-counts span { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 9px; border-radius: 999px; color: #40516a; background: #fff; font-size: .75rem; }
.ai-counts strong { color: #15233a; font-size: .92rem; }
.ai-progress { margin-top: 12px; padding: 12px 14px; border: 1px solid #aab8ca; border-radius: 10px; }
.ai-progress > div { display: flex; justify-content: space-between; gap: 12px; }
.ai-progress progress { width: 100%; height: 12px; margin: 10px 0 4px; accent-color: #1b67b1; }
.ai-progress p { margin: 3px 0 10px; font-size: .84rem; }
.ai-progress-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-results-heading { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin: 20px 0 8px; }
.ai-results-heading h3 { margin: 0; font-size: 1rem; }
.ai-results-heading p { margin: 3px 0 0; font-size: .82rem; }
.ai-bulk-actions, .ai-result-actions, .dialog-actions, .ai-detail-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-results { display: grid; gap: 10px; }
.ai-result { padding: 13px 14px; border: 1px solid #c8d3e0; border-radius: 10px; background: #fff; }
.ai-result-header { display: flex; gap: 10px; align-items: center; }
.ai-result-header input { flex: 0 0 auto; width: 20px; min-height: 20px; }
.ai-result-header > div { display: flex; flex: 1; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.ai-student-info { display: grid; gap: 2px; }
.ai-student-info small { color: #52657f; font-size: .75rem; font-weight: 600; }
.ai-status { padding: 4px 8px; border-radius: 999px; color: #40516a; background: #edf3f9; font-size: .75rem; font-weight: 700; }
.ai-status.status-published { color: #174f2a; background: #e8f7ec; }
.ai-status.status-failed, .ai-status.status-blocked { color: #8a173d; background: #fde9ef; }
.ai-status.status-processing, .ai-status.status-queued { color: #194f82; background: #e4f2ff; }
.ai-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 10px; overflow: hidden; border-radius: 8px; background: #c8d3e0; }
.ai-compare > div { min-width: 0; padding: 10px 12px; background: #f7f9fc; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.ai-compare > .corrected { background: #edf8f0; }
.ai-result-meta, .ai-muted { margin: 7px 0; color: #52657f; font-size: .8rem; }
.ai-result-details { margin: 8px 0; }
.ai-result-details summary { min-height: 40px; padding: 8px 0; color: #1b5d99; font-weight: 700; cursor: pointer; }
.ai-detail-view { display: grid; gap: 10px; padding: 12px 0; }
.ai-detail-toggles label { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 5px; }
.ai-detail-toggles input { width: 20px; min-height: 20px; }
.ai-grammar { padding: 12px; border-radius: 8px; background: #f4f7fb; font-size: 1rem; line-height: 1.9; }
.ai-comment { margin: 0; color: #15233a; }
.ai-strengths, .ai-feedback-group { padding: 10px 12px; border-radius: 8px; background: #edf8f0; }
.ai-feedback-group.issue { background: #fff2e4; }
.ai-feedback-group.suggestion { background: #eef2ff; }
.ai-strengths h4, .ai-feedback-group h4, .ai-edit-form h4 { margin: 0 0 7px; font-size: .9rem; }
.ai-strengths p, .ai-feedback-group p { margin: 4px 0; color: #33445e; font-size: .86rem; }
.ai-feedback-item { display: grid; gap: 3px; padding: 8px 0; border-top: 1px solid rgba(64,81,106,.18); }
.ai-feedback-item:first-of-type { border-top: 0; }
.ai-edit-form { display: grid; gap: 8px; margin: 10px 0; padding: 12px; border-radius: 8px; background: #f4f7fb; }
.ai-edit-form > label { margin-top: 4px; }
.ai-edit-list { display: grid; gap: 8px; }
.ai-edit-list fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; padding: 8px; border: 1px solid #c8d3e0; border-radius: 8px; }
.ai-edit-list textarea { grid-column: 1 / -1; }
.ai-error-text { color: #a61e4d; }
.ai-syntax-notice { margin: 8px 0; padding: 10px 12px; border-radius: 8px; color: #67420b; background: #fff3dc; }
.ai-syntax-notice p { margin: 0 0 8px; color: inherit; font-size: .84rem; }
.ai-dialog { width: min(92vw, 32rem); padding: 0; border: 0; border-radius: 12px; color: #15233a; }
.ai-dialog::backdrop { background: rgba(21,35,58,.45); }
.ai-dialog form { margin: 0; padding: 20px; }
.ai-dialog h2 { margin: 0; font-size: 1.15rem; }
.ai-privacy-note { padding: 10px; border-radius: 8px; color: #33445e; background: #edf3f9; font-size: .84rem; }
.dialog-actions { justify-content: flex-end; }
@media (max-width: 700px) { .teacher-page { padding: 10px; } .teacher-main { padding: 16px; } .teacher-filter-form, .projection-controls { grid-template-columns: 1fr; } .teacher-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .projection-controls { position: static; } .projection-question-control { grid-row: auto; } .projection-actions { grid-column: auto; } .section-heading { align-items: flex-start; flex-direction: column; gap: 4px; } }
@media (max-width: 700px) { .ai-question-bar { grid-template-columns: 1fr; } .ai-question-prompt, .ai-counts { grid-column: 1; grid-row: auto; } .ai-results-heading { align-items: flex-start; flex-direction: column; } .ai-compare, .ai-edit-list fieldset { grid-template-columns: 1fr; } .ai-edit-list textarea { grid-column: 1; } }

.identity-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.identity-modes button{background:white;color:#40516a;border:1px solid #aab8ca}.identity-modes button[aria-pressed=true]{background:#1b67b1;color:white;border-color:#1b67b1}#identity-title{font-size:1.15rem;margin:12px 0 8px}#identity-description{font-size:.9rem;margin:0;line-height:1.65}

.english-symbols > small { flex-basis: 100%; }

.math-editor { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px; border:1px solid #aab8ca; border-radius:8px; }
.math-text-field { flex:1 1 100px; min-width:80px; margin:0; }
.math-text-field .math-text { width:100%; min-width:0; min-height:44px; }
.math-text-caption { display:block; font-size:.78rem; margin-bottom:4px; }
.math-text-caption[hidden] { display:none; }
.fraction-actions { display:flex; flex-direction:column; gap:5px; }
.fraction-input { display:flex; align-items:center; gap:5px; max-width:100%; }
.fraction-input select { width:66px; padding:5px; }
.fraction-input .fraction-stack { width:130px; }
.fraction-input .fraction-stack input { min-width:0; border-radius:0; text-align:center; }
.fraction-input button { padding:5px; font-size:.78rem; }

.power-input { display:flex; align-items:center; gap:5px; max-width:100%; padding-block:12px; }
.power-input input { width:95px; min-width:0; text-align:center; }
.power-input input:nth-child(2) { width:70px; transform:translateY(-15px); font-size:.85em; }
.power-input button { padding:5px; font-size:.78rem; }

.chemical-input { display:flex; align-items:center; gap:5px; max-width:100%; }
.chemical-input > input { width:90px; min-width:0; text-align:center; }
.chemical-input-scripts { display:grid; gap:2px; width:70px; }
.chemical-input-scripts input { min-width:0; padding:5px; text-align:center; font-size:.85em; }
.chemical-input button { padding:5px; font-size:.78rem; }

.structured-answer:not(.active-input) > .english-symbols{display:none}.input-destination{font-weight:600;color:#245dcc}.math-help{margin:18px 0}.math-help summary{cursor:pointer;padding:12px}.math-help p{font-size:.9rem;line-height:1.8;padding:0 12px}.structure-actions{display:flex;flex-wrap:wrap;gap:6px}.fraction-input{display:grid;grid-template-columns:66px minmax(0,1fr);gap:8px;width:100%}.fraction-input>.structure-actions{grid-column:1/-1}.fraction-input .fraction-stack{width:100%;min-width:0}.fraction-side{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}.fraction-side .math-text-field{min-width:60px;flex-basis:70px}.fraction-side textarea{text-align:center}.power-input{display:grid;grid-template-columns:minmax(90px,1fr) 70px;gap:8px;width:100%;min-width:0}.power-input input{width:100%;min-width:0}.power-input>.structure-actions{grid-column:1/-1}.fraction-side .power-input{flex:1 1 100%;padding-block:16px 6px}.chemical-input{display:grid;grid-template-columns:minmax(90px,1fr) 90px;gap:8px;width:100%}.chemical-input>input{width:100%}.chemical-input>.structure-actions{grid-column:1/-1}.chemical-input-scripts{width:100%;gap:6px}.chemical-input-scripts label{display:block;font-size:.75rem;margin:0}.chemical-input-scripts label[hidden]{display:none}.chemical-input-scripts input{width:100%;margin:2px 0 0}.math-editor>.math-text-field{flex-basis:100%}

.math-preview{border-left:3px solid #b7cdec;background:#f5f8fc;padding:10px 12px;overflow-wrap:anywhere}.math-preview[hidden]{display:none}.math-preview p{margin:4px 0;font-size:1.2rem;line-height:1.6;white-space:pre-wrap}.math-preview small{font-size:.75rem;color:#52657f}

body:has(.math-editor){overflow-anchor:none}

/* English punctuation needs a visible shape and a written name. */
.english-symbols[data-subject="english"] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; width:100%; max-width:260px; }
.english-symbols[data-subject="english"] > .english-symbols-label { display:none; }
.english-punctuation-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; flex:0 1 82px; width:100%; min-width:0; max-width:none; min-height:48px; padding:4px 3px; color:#15233a; }
.english-punctuation-glyph { font-family:Arial,sans-serif; font-size:28px; font-weight:700; line-height:1; }
.english-punctuation-caption { font-size:10px; line-height:1.2; white-space:normal; overflow-wrap:anywhere; }

.multiple-answer-group{border:1px solid #aab8ca;border-radius:10px;padding:14px;min-width:0;margin:12px 0}.multiple-answer-group legend{font-weight:700;padding:0 6px}.multiple-answer-group>p{font-size:.85rem;margin-top:0}.multiple-answer-group>.answer-field+.answer-field{margin-top:16px;padding-top:16px;border-top:1px solid #d6deea}

.student-correction{border:1px solid #aab8ca;border-radius:10px;padding:14px;margin:16px 0}.student-correction p{white-space:pre-wrap;overflow-wrap:anywhere}.student-correction h4{margin-bottom:4px}