:root {
  color-scheme: light;
  --bg: #f3f7f6;
  --white: #fff;
  --ink: #172f30;
  --muted: #516767;
  --line: #d6e2e0;
  --teal: #126863;
  --deep: #104c4b;
  --soft: #e6f4f1;
  font: 15px/1.55 "Leelawadee UI", Tahoma, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
#print-report { display: none; }
#print-report.measure-print-names {
  display: block;
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  font: 14pt/1.15 "TH Sarabun New", "Sarabun", sans-serif;
}
.name-parts {
  display: inline-grid;
  grid-template-columns: var(--student-first-width, max-content) max-content;
  column-gap: .55em;
  align-items: baseline;
}
.student-first { width: max-content; }

@media print {
  @page { size: A4 landscape; margin: 11mm; }
  body.printing-scores { display: block; min-height: 0; background: white; }
  body.printing-scores > :not(#print-report) { display: none !important; }
  body.printing-scores #print-report {
    display: block;
    font: 14pt/1.15 "TH Sarabun New", "Sarabun", sans-serif;
    color: #111;
  }
  .print-sheet + .print-sheet { break-before: page; }
  .print-sheet h1 { margin: 0 0 2mm; font-size: 22pt; }
  .print-sheet p { margin: 0 0 2mm; }
  .print-sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .print-sheet thead { display: table-header-group; }
  .print-sheet tr { break-inside: avoid; }
  .print-sheet th, .print-sheet td {
    border: .25mm solid #777;
    padding: 1mm;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .print-sheet th { background: #f0f3f3; font-weight: 700; }
  .print-sheet th small { display: block; font-size: 12pt; font-weight: 400; }
  .print-sheet .print-number { width: 11mm; }
  .print-sheet .print-id { width: 23mm; }
  .print-sheet .print-name { width: 54mm; }
  .print-sheet .student-full-name { text-align: left; }
  .print-sheet .name-parts {
    display: grid;
    grid-template-columns: min(var(--student-first-width, 52%), 55%) minmax(0, 1fr);
  }
  .print-sheet .student-first { max-width: 100%; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
a { color: var(--teal); }
:focus-visible { outline: 2px solid #227e75; outline-offset: 3px; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }
.wrap { width: min(100% - 64px, 1424px); margin-inline: auto; }
.site-header { background: var(--white); border-top: 3px solid #16766d; border-bottom: 1px solid var(--line); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); white-space: nowrap; }
.brand strong { display: block; font: 740 22px/1.16 system-ui, sans-serif; letter-spacing: -.65px; }
.brand small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.account-chip, .account-group, .nav-inner, .nav-tab { display: flex; align-items: center; gap: 10px; }
.account-chip { color: var(--muted); font-size: 13px; }
.account-chip strong { display: block; color: var(--ink); font-size: 14px; }
.avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--soft); color: var(--teal); }
.site-nav { background: linear-gradient(180deg, #e4f6f3, #cfebe7); border-bottom: 1px solid #bbd9d5; }
.nav-inner { gap: 6px; overflow-x: auto; }
.nav-tab { background: transparent; border: 0; border-bottom: 3px solid transparent; font-weight: 650; color: var(--deep); padding: 13px 14px 10px; white-space: nowrap; }
.nav-tab[aria-current="page"] { border-bottom-color: #187d72; background: #fff8; }
.nav-tab:hover { background: #fff9; }
.spacer { flex: 1; }
main { flex: 1; }
.site-footer { display: flex; justify-content: space-between; gap: 14px; padding: 20px 0 26px; margin-top: 36px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.site-footer span:first-child { color: var(--deep); font-weight: 750; }
.loading, .empty { padding: 32px; text-align: center; color: var(--muted); }
.empty .icon { display: block; margin: 0 auto 10px; width: 26px; height: 26px; color: var(--teal); }
.empty p { margin: 0 0 14px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(27px, 3vw, 38px); line-height: 1.22; margin-bottom: 7px; letter-spacing: -.45px; }
h2 { line-height: 1.3; margin-bottom: 5px; }
h3 { font-size: 16px; margin-bottom: 5px; }
.muted { color: var(--muted); }
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--teal); font-size: 12px; font-weight: 780; letter-spacing: .06em; margin-bottom: 11px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #38a993; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 7px 13px; border-radius: 7px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-weight: 680; white-space: nowrap; }
.btn:hover { background: var(--soft); border-color: #9ecac1; }
.btn.primary { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn.primary:hover { background: var(--deep); }
.btn.subtle { background: transparent; border-color: transparent; color: var(--teal); }
.btn.subtle:hover { background: var(--soft); }
.btn.danger { color: #a53930; }
.btn.icon-only { padding: 6px; min-width: 35px; }
.btn.small { font-size: 13px; min-height: 32px; padding: 4px 9px; }
.pill { display: inline-flex; align-items: center; gap: 5px; background: var(--soft); color: var(--deep); border-radius: 5px; font-size: 12px; font-weight: 700; padding: 3px 8px; white-space: nowrap; }
.pill.amber { background: #fbf0d8; color: #745119; }
.field { display: grid; gap: 5px; text-align: left; font-size: 13px; font-weight: 690; }
.field input, .field select, .search input { min-width: 0; width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid #c8d7d5; background: var(--white); border-radius: 7px; }
.field input::placeholder, .search input::placeholder { color: #647b7a; }
.field small { font-size: 12px; color: var(--muted); font-weight: 400; }
.error { color: #96342b; font-size: 13px; margin: 0; }
.form-stack { display: grid; gap: 14px; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.login-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 435px); gap: clamp(30px, 6vw, 96px); width: min(1120px, 100%); margin: clamp(40px, 7vw, 98px) auto 24px; align-items: center; }
.login-intro h1 { font-size: clamp(37px, 5vw, 64px); letter-spacing: -1.55px; margin-bottom: 12px; }
.login-intro h1 span { display: block; color: var(--teal); }
.login-intro p { max-width: 470px; color: var(--muted); font-size: 16px; margin-bottom: 24px; }
.login-shell .eyebrow { margin-bottom: 15px; }
.login-card { background: var(--white); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 12px 30px #1149450a; padding: 28px; }
.login-card h2 { font-size: 25px; }
.login-card > p { margin: 4px 0 20px; font-size: 14px; }
.login-card .primary { width: 100%; min-height: 44px; }
.login-switch { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 13px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.login-switch .btn { padding-inline: 4px; }
.demo-box { background: #eef7f5; border: 1px dashed #bdd9d3; border-radius: 8px; padding: 10px 12px; margin-top: 14px; font-size: 12px; }
.demo-box strong { display: block; margin-bottom: 4px; }
.demo-box button { border: 0; background: transparent; text-decoration: underline; color: var(--teal); padding: 3px 8px 3px 0; }
.preview-sheet { max-width: 515px; border: 1px solid #bfdbd5; border-radius: 11px; background: var(--white); overflow: hidden; box-shadow: 0 12px 26px #164c4510; }
.preview-head { background: linear-gradient(180deg, #e3f6f2, #bfe7e0); color: var(--deep); padding: 10px 13px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 750; }
.preview-head small { margin-left: auto; }
.preview-sheet table { width: 100%; border-collapse: collapse; font-size: 12px; }
.preview-sheet th, .preview-sheet td { padding: 7px 8px; text-align: center; border-top: 1px solid var(--line); border-right: 1px solid var(--line); white-space: nowrap; }
.preview-sheet th:last-child, .preview-sheet td:last-child { border-right: 0; }
.preview-sheet th { background: #eef7f5; color: var(--deep); }
.preview-sheet .student-example { text-align: left; padding-left: 13px; }
.preview-sheet td:last-child { color: var(--teal); font-weight: 750; background: #f3faf8; }
.page-head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 30px 0 18px; }
.page-head p { margin-bottom: 0; }
.page-head .eyebrow { margin-bottom: 7px; }
.panel { border: 1px solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; margin-bottom: 16px; }
.panel-bar { padding: 10px 15px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--deep); background: linear-gradient(180deg, #def5ef, #bde6df); border-bottom: 1px solid #b9d8d3; font-weight: 760; }
.panel-bar .status { margin-left: auto; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.status.bad { color: #98362e; }
.status.unsaved { color: #765819; }
.attendance-counts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 15px 12px; }
.attendance-count { padding: 4px 10px; border-radius: 5px; font-size: 13px; }
.attendance-count strong { margin-inline-start: 4px; }
.attendance-count, .attendance-badge { background: #f1f5f5; color: #365153; }
.attendance-panel [data-status="present"] { background: #e2f3e8; color: #205f3d; }
.attendance-panel [data-status="late"] { background: #fbf0d8; color: #745119; }
.attendance-panel [data-status="absent"] { background: #fae8e5; color: #91392e; }
.attendance-panel [data-status="leave"] { background: #e7eff9; color: #2b527d; }
.attendance-toolbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 0 15px 12px;
}
.attendance-toolbar .btn { min-height: 44px; font-weight: 750; }
.attendance-toolbar .attendance-fill { background: #087e3c; border-color: #14a953; color: #fff; }
.attendance-toolbar .attendance-reset { background: #ffb429; border-color: #df8d09; color: #332306; }
.attendance-toolbar .attendance-delete { background: #b42b32; border-color: #d8464b; color: #fff; }
.attendance-toolbar #attendance-save { background: #e0b500; border-color: #c29c00; color: #292104; }
.attendance-toolbar .btn:hover:not(:disabled) { filter: brightness(.9); }
.attendance-toolbar .btn:disabled { cursor: default; }
.attendance-choices, .attendance-current { display: flex; align-items: center; justify-content: center; gap: 5px; }
.attendance-choice {
  min-height: 33px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--white); color: var(--ink); font-weight: 650;
}
.attendance-choice:hover:not(:disabled) { background: var(--soft); border-color: #9ecac1; }
.attendance-choice[aria-pressed="true"], .attendance-choice[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--active-status); color: #fff; border-color: var(--active-status);
}
.attendance-choice[data-attendance-status="present"] { --active-status: #246842; }
.attendance-choice[data-attendance-status="late"] { --active-status: #805708; }
.attendance-choice[data-attendance-status="absent"] { --active-status: #a53930; }
.attendance-choice[data-attendance-status="leave"] { --active-status: #2b527d; }
.attendance-badge { min-width: 76px; padding: 4px 8px; border-radius: 20px; font-weight: 650; }
.attendance-clear { padding: 3px; border: 0; border-radius: 5px; background: transparent; color: #516867; }
.attendance-clear:hover:not(:disabled) { background: var(--soft); color: var(--ink); }
.attendance-clear:disabled { visibility: hidden; }
.attendance-clear .icon { width: 15px; height: 15px; }
.attendance-grid th:last-child { width: 26%; }
.attendance-reason {
  width: 100%; min-width: 165px; min-height: 34px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink);
}
.attendance-reason::placeholder { color: var(--muted); }
.attendance-reason:disabled { background: #f4f7f7; }
.attendance-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.attendance-status-filter { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 15px 12px; border: 1px solid var(--line); }
.attendance-status-filter[hidden] { display: none; }
.attendance-report-table th { white-space: nowrap; }
.attendance-report-table td:last-child { overflow-wrap: anywhere; }
.attendance-statistics { padding: 0 15px 15px; max-width: 690px; }
.attendance-stat { display: grid; grid-template-columns: 3.5em minmax(60px, 1fr) 10em; gap: 10px; align-items: center; margin: 8px 0; }
.attendance-stat meter { width: 100%; height: 22px; }
.filters, .table-tools { display: flex; gap: 10px 14px; padding: 12px 15px; flex-wrap: wrap; align-items: end; }
.filters .field { min-width: 84px; }
.filters .subject { min-width: 200px; max-width: 330px; }
.filter-note { color: var(--muted); font-size: 12px; margin: 0 0 9px auto; }
.table-tools { align-items: center; border-bottom: 1px solid var(--line); }
.search { display: flex; gap: 6px; align-items: center; min-width: min(265px, 100%); color: var(--teal); }
.search input { color: var(--ink); min-height: 34px; font-size: 13px; }
.checkbox { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.checkbox input { accent-color: var(--teal); }
.counter { font-size: 12px; color: var(--muted); }
.table-scroll { overflow-x: auto; }
.directory-scroll { max-height: 50vh; overflow: auto; }
.directory-scroll thead { position: sticky; top: 0; }
.score-grid { width: 100%; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.score-grid th, .score-grid td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; min-width: 60px; padding: 7px 6px; white-space: nowrap; }
.score-grid th:last-child, .score-grid td:last-child { border-right: 0; }
.score-grid tbody tr:last-child td { border-bottom: 0; }
.score-grid thead th { background: #e8f5f2; color: var(--deep); }
.score-grid thead .band { background: #d5eeea; font-weight: 750; }
.score-grid thead .exam { background: #f8f1df; color: #6c501e; min-width: 90px; }
.score-grid thead .total { background: #d5eeea; }
.score-grid th.room, .score-grid th.number { min-width: 48px; }
.score-grid .student-full-name { text-align: left; min-width: 150px; padding-inline: 12px; }
.score-grid th.school-id { min-width: 84px; }
.score-grid tbody tr:nth-child(even) td { background: #f9fbfb; }
.score-grid tbody tr:hover td { background: #eef8f5; }
.score-grid .exam-cell { background: #fffcf5; }
.score-grid .total-cell { font-weight: 750; background: #eff8f5; }
.max-label { display: block; font-size: 11px; font-weight: 550; color: var(--muted); margin-top: 1px; }
.table-link { border: 0; padding: 1px 3px; border-radius: 4px; color: var(--teal); font-weight: 750; background: transparent; }
.table-link:hover { background: #cae6e0; }
.score-input { width: 55px; max-width: 100%; border-radius: 4px; border: 1px solid #c5d7d3; padding: 3px 4px; background: var(--white); text-align: right; font-variant-numeric: tabular-nums; }
.score-input[aria-invalid="true"] { border-color: #ae4f40; background: #fff4ef; }
.score-input[data-unsaved]:not([aria-invalid="true"]) { border-color: #d5b86f; background: #fff9e8; }
.score-grid .objective-score { font-weight: 650; color: var(--deep); }
.score-scroll { max-height: 68vh; overflow: auto; }
.assignment-grid thead th { position: sticky; top: 0; z-index: 2; border-bottom-color: #abcac3; }
.assignment-grid .work-heading { min-width: 160px; max-width: 220px; padding: 12px; vertical-align: top; }
.assignment-grid .work-title { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; width: 100%; font-weight: 650; }
.work-objective { display: block; font-size: 11px; color: var(--muted); letter-spacing: .04em; margin-bottom: 4px; }
.assignment-grid td { height: 42px; }
.assignment-grid .score-input { width: 72px; text-align: center; padding: 5px 8px; }
.assignment-grid .score-input:focus { border-color: var(--teal); background: #f0faf7; }
.assignment-due { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; color: var(--muted); font-size: 11px; }
.assignment-due .icon, .submission-button .icon { width: 14px; height: 14px; }
.assignment-score-cell { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.due-badge { display: inline-block; padding: 1px 6px; border-radius: 5px; background: #fbf0d8; color: #745119; font-size: 11px; font-weight: 700; }
.due-badge.late { background: #fae8e5; color: #91392e; }
.submission-button { min-width: 26px; min-height: 26px; padding: 3px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); }
.submission-button:hover { background: var(--soft); border-color: var(--line); color: var(--teal); }
.setup-content { padding: clamp(14px, 3vw, 24px); }
.setup-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); gap: 12px; margin-top: 16px; align-items: start; }
.setup-group { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.setup-group h3 { padding: 9px 12px; margin: 0; background: var(--soft); color: var(--deep); }
.setup-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); }
.setup-row .muted { display: block; font-size: 12px; }
.setup-total { padding: 10px 14px; background: var(--soft); border-radius: 7px; }
.setup-total strong { font-size: 22px; margin-inline: 4px; color: var(--deep); }
.setup-notice { margin: 6px 0; color: #745119; font-size: 13px; }
.setup-footer { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.class-delete-summary { padding: 12px 14px; margin-bottom: 12px; background: var(--soft); border-radius: 7px; }
.class-delete-summary p { margin: 4px 0 0; }
#delete-class .btn.primary { background: #a53930; border-color: #a53930; }
.grade { display: inline-block; min-width: 29px; padding: 1px 5px; border-radius: 5px; color: var(--deep); background: #dbefea; font-weight: 780; }
.panel-foot { border-top: 1px solid var(--line); padding: 9px 15px; color: var(--muted); font-size: 12px; }
.records { width: 100%; border-collapse: collapse; text-align: left; }
.records th, .records td { padding: 9px 13px; border-bottom: 1px solid var(--line); }
.records tr:last-child td { border-bottom: 0; }
.records th { background: #edf6f4; color: var(--deep); font-size: 13px; }
.records .actions { flex-wrap: nowrap; }
.records td:last-child .actions { justify-content: end; }
.record-name { font-weight: 670; min-width: 145px; }
.group-heading { margin: 16px 15px 8px; color: var(--deep); }
.summary-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.summary-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px 17px; }
.summary-card span { display: block; font-size: 13px; color: var(--muted); }
.summary-card strong { font-size: 25px; color: var(--deep); font-variant-numeric: tabular-nums; }
dialog { color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 14px; width: min(530px, calc(100% - 28px)); max-height: min(85dvh, 740px); padding: 0; box-shadow: 0 20px 60px #0d32334a; }
dialog.wide { width: min(690px, calc(100% - 28px)); }
dialog::backdrop { background: #102e3099; }
.dialog-head { background: #edf7f4; border-bottom: 1px solid var(--line); padding: 12px 17px; display: flex; justify-content: space-between; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 1; }
.dialog-head h2 { font-size: 19px; margin: 0; }
.dialog-body { padding: 18px; }
.dialog-body > p { margin-bottom: 11px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.code-output { display: block; padding: 11px; margin-bottom: 13px; border-radius: 8px; background: var(--soft); color: var(--deep); font-size: clamp(15px, 4vw, 20px); user-select: all; }
.toast { position: fixed; z-index: 2; bottom: 20px; right: 20px; max-width: min(430px, 90vw); padding: 10px 14px; background: #174b48; color: var(--white); border-radius: 8px; box-shadow: 0 4px 16px #0f33332e; }
@media (max-width: 860px) {
  .wrap { width: calc(100% - 34px); }
  .login-shell { grid-template-columns: minmax(0, 1fr); max-width: 540px; gap: 20px; margin-top: 28px; }
  .login-intro h1 { font-size: 38px; }
  .login-intro p { margin-bottom: 0; }
  .preview-sheet { display: none; }
}
@media (max-width: 520px) {
  .wrap { width: calc(100% - 24px); }
  .header-inner { min-height: 65px; }
  .brand strong { font-size: 17px; }
  .brand img { width: 33px; height: 33px; }
  .brand { gap: 7px; }
  .account-chip > span:last-child { display: none; }
  .account-chip .avatar { width: 28px; height: 28px; }
  .account-group { gap: 3px; }
  .login-card { padding: 18px; }
  .page-head { padding-top: 20px; }
  .summary-cards { gap: 6px; }
  .summary-card { padding: 9px; }
  .summary-card strong { font-size: 19px; }
  .site-footer { flex-wrap: wrap; }
}