:root {
  color-scheme: light;
  font-family: Inter, "Noto Sans", "Noto Sans KR", "Noto Sans Vietnamese", system-ui, sans-serif;
  color: #172f39;
  background: #edf5f3;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: #096a66; }
a:hover { color: #074b48; }
.shell { max-width: 1050px; margin: 0 auto; padding: 34px 20px 70px; }
.topline { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 30px; }
.page-intro { min-width: 0; }
.course-brand { display: grid; justify-items: start; gap: 3px; margin-bottom: 17px; }
.course-brand .eyebrow { margin: 0 0 2px; }
.course-brand-title { color: #17665f; font-size: 1.15rem; font-weight: 850; }
.brand-credit { color: #587078; font-size: .7rem; font-weight: 500; letter-spacing: 0; }
.header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; flex-shrink: 0; max-width: 100%; }
.blossom-home { display: inline-block; text-decoration: none; font-size: .85rem; }
.eyebrow { margin: 0 0 7px; color: #17665f; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.6rem); letter-spacing: -.035em; line-height: 1.2; }
h2 { margin: 0 0 17px; font-size: 1.2rem; }
h3 { margin: 0 0 10px; font-size: 1.03rem; }
p { line-height: 1.55; }
.lede { margin: 12px 0 0; color: #516b73; max-width: 65ch; }
.identity { margin: 7px 0 0; color: #516b73; font-size: .94rem; }
.layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.wide { grid-column: 1 / -1; }
.card { background: #fff; border: 1px solid #d8e9e5; border-radius: 17px; box-shadow: 0 5px 22px rgba(17, 58, 54, .055); padding: 23px; }
.card > :last-child { margin-bottom: 0; }
.stack { display: grid; gap: 15px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.field { display: grid; gap: 6px; font-size: .9rem; font-weight: 650; }
.field input, .field select, .field textarea, .readonly { width: 100%; min-width: 0; border: 1px solid #bcd5d0; border-radius: 9px; padding: 11px 12px; color: #173139; background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid #8ed8c9; outline-offset: 2px; }
.field small { color: #5a737a; font-size: .79rem; font-weight: 400; }
.survey-fields, .device-options { min-width: 0; border: 1px solid #d4e7e1; border-radius: 11px; padding: 15px; }
.survey-fields { display: grid; gap: 14px; }
.survey-fields legend, .device-options legend { padding: 0 6px; font-weight: 750; }
.survey-fields > .note { margin: 0; }
.device-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
.checkbox-field { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; cursor: pointer; }
.checkbox-field input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.survey-prompt { border: 2px solid #4b9a89; border-radius: 14px; background: #e6f5ef; padding: 20px; margin-bottom: 20px; }
.quickstart-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: -10px 0 22px; padding: 14px 17px; border: 1px solid #83b9ac; border-radius: 12px; background: #e7f6f1; }
.quickstart-banner strong { color: #15554f; }
.quickstart-banner .resource-grid { margin-left: auto; }
.survey-prompt h2 { margin-bottom: 6px; }
.survey-prompt p { margin: 0 0 12px; }
.survey-jump { display: inline-block; border: 1px solid #5b9f90; border-radius: 8px; background: white; padding: 7px 10px; font-weight: 700; text-decoration: none; }
.class-survey { border: 1px solid #c6dfd6; border-radius: 11px; background: #f6fbf9; padding: 15px; margin: 14px 0; }
.class-survey h3 { margin-bottom: 4px; }
.class-survey .stack { margin-top: 13px; }
.roster-import-card { border-color: #8dbfb2; }
.roster-import-card > .note { margin-top: -5px; }
.roster-existing-import { margin: 16px 0; border: 1px solid #9ac5b9; border-radius: 11px; background: #f5fbf8; padding: 13px; }
.roster-existing-import > summary { cursor: pointer; color: #175d54; font-weight: 750; }
.roster-existing-import > .roster-import-card { margin-top: 14px; }
.roster-preview { margin-top: 15px; }
.roster-review h4 { margin: 15px 0 8px; }
.roster-warning { margin: 10px 0; border-left: 4px solid #bc8036; background: #fff7e8; padding: 9px 11px; color: #74440d; }
.roster-school-confirm { border: 1px solid #b4d6cd; border-radius: 9px; padding: 11px; background: white; }
.roster-table-wrap { max-height: 500px; border: 1px solid #d4e7e1; border-radius: 9px; }
.roster-table th { position: sticky; top: 0; z-index: 1; background: #f2f8f6; }
.roster-table input { width: 100%; min-width: 110px; border: 1px solid #bcd5d0; border-radius: 7px; padding: 8px; }
.roster-table td:first-child { white-space: nowrap; }
.roster-paste-input { resize: vertical; line-height: 1.5; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.manual-setup { display: grid; gap: 20px; }
.manual-preview-entry { margin: 18px 0; }
.manual-preview { display: grid; gap: 12px; }
.manual-preview h2, .manual-preview p { margin: 0; }
.manual-preview .primary { justify-self: start; }
.primary, .secondary, .tab { border-radius: 9px; padding: 11px 16px; font-weight: 700; }
.primary { border: 1px solid #096a66; color: white; background: #096a66; }
.primary:hover { background: #075551; }
.secondary { border: 1px solid #afcbc4; color: #185a58; background: #f4faf8; }
.secondary:hover { background: #e9f5f1; }
.primary:disabled, .secondary:disabled { opacity: .5; cursor: not-allowed; }
.tabs { display: flex; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.tab { border: 1px solid #bdd4cf; background: #f9fcfb; color: #37625e; }
.tab[aria-selected="true"] { background: #096a66; border-color: #096a66; color: #fff; }
.first-use-guide { margin: 0 0 18px; padding: 16px 18px; border: 2px solid #389384; border-radius: 11px; background: #e8f7f2; }
.first-use-guide strong { color: #12584f; font-size: 1.05rem; }
.first-use-guide p { margin: 9px 0 0; overflow-wrap: anywhere; }
.status { min-height: 1.5em; margin: 0 0 16px; color: #17665f; font-weight: 650; }
.status.error { color: #aa3227; }
.note { color: #587078; font-size: .9rem; }
.notice { margin: 17px 0; border: 1px solid #9bcfc4; border-radius: 11px; background: #e7f6f1; padding: 13px 15px; color: #135e59; }
.code { display: block; margin: 12px 0; padding: 13px 16px; border: 1px dashed #7eaea5; border-radius: 9px; background: #f4faf8; font-size: 1.35rem; font-weight: 850; letter-spacing: .08em; word-break: break-all; }
.list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.list li { border: 1px solid #e1ece8; border-radius: 10px; padding: 13px; }
.list li > :last-child { margin-bottom: 0; }
.item-title { margin: 0 0 6px; font-weight: 750; }
.muted { color: #5c737a; font-size: .85rem; overflow-wrap: anywhere; }
.invite-output { margin-top: 16px; border: 1px solid #b9d9d0; border-radius: 11px; background: #f1faf7; padding: 16px; }
.invite-output .readonly { font-size: .86rem; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th, td { border-bottom: 1px solid #e1eeea; text-align: left; vertical-align: top; padding: 10px 8px; }
th { color: #456268; font-weight: 750; white-space: nowrap; }
.report { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e1eeea; }
.student-report-heading { margin-top: 22px; padding-top: 13px; border-top: 1px solid #dbe9e5; }
.review-controls { display: grid; gap: 9px; min-width: 220px; }
.review-controls .note { margin: 0; }
.speech-attempts { margin-top: 15px; }
.speech-attempts li { display: grid; gap: 5px; }
.speech-attempts li p { margin: 0; }
.machine-transcript { border-left: 3px solid #80bfb2; padding: 8px 11px; background: #f4faf8; overflow-wrap: anywhere; }
.heard-check { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; }
.heard-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.student-instruction { margin: 14px 0; border: 1px solid #b9d9d0; border-radius: 11px; background: #f7fbfa; padding: 16px; }
.student-instruction p { margin: 8px 0; overflow-wrap: anywhere; }
.instruction-copy { display: block; margin: 12px 0; line-height: 1.5; resize: vertical; }
.resource-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.resource-grid a { display: inline-block; border: 1px solid #b7d2cc; border-radius: 8px; padding: 9px 12px; text-decoration: none; font-size: .87rem; font-weight: 650; background: #f7fbfa; }
.admin-material-group { margin-top: 18px; }
.admin-material-group + .admin-material-group { border-top: 1px solid #e1ece8; padding-top: 18px; }
.admin-material-group h3 { margin: 0 0 4px; }
.admin-material-group > .note { margin: 0 0 12px; }
.admin-material-group .list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 680px) { .admin-material-group .list { grid-template-columns: 1fr; } }
.footer-note { margin-top: 28px; color: #6a8085; font-size: .81rem; }
#print-root { display: none; }
@media print {
  @page { size: A4; margin: 14mm; }
  body:not(.printing-report) #app { display: none; }
  body.printing-report { background: white; color: #111; }
  body.printing-report #app { display: none; }
  body.printing-report #print-root { display: block; }
  body.printing-report #print-root h1 { font-size: 18pt; margin: 0 0 12mm; }
  body.printing-report #print-root .report { border: 0; margin: 0; padding: 0; }
  body.printing-report #print-root button { display: none; }
  body.printing-report #print-root .student-instruction { border: 0; background: white; padding: 0; }
  body.printing-report #print-root .student-report-heading { break-after: avoid; }
  body.printing-report #print-root .scroll { overflow: visible; }
  body.printing-report #print-root table { font-size: 9pt; }
  body.printing-report #print-root th, body.printing-report #print-root td { break-inside: avoid; }
}
@media (max-width: 720px) {
  .shell { padding: 24px 15px 48px; }
  .layout { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  .card { padding: 19px; }
  .topline { flex-direction: column; }
  .header-actions { justify-content: flex-start; }
  .device-options { grid-template-columns: 1fr; }
}
.relation-warning { width: fit-content; margin: 6px 0; padding: 4px 8px; border-radius: 6px; background: #fff3d8; color: #795211; font-size: .85rem; font-weight: 650; }