:root {
  color-scheme: light;
  --ink: #222d41;
  --muted: #788398;
  --line: #e4e8ef;
  --paper: #ffffff;
  --canvas: #f4f5f8;
  --blue: #465dce;
  --blue-dark: #354bb7;
  --blue-pale: #eef1ff;
  --coral: #ed8b70;
  --mint: #3d9977;
  --shadow: 0 8px 30px rgba(37, 49, 76, .055);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
[hidden] { display: none !important; }
.app-shell { min-height: 100vh; }

.topbar {
  min-height: 82px; display: flex; align-items: center; gap: 13px;
  padding: 14px clamp(20px, 3vw, 44px); background: var(--paper); border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px;
  background: var(--blue); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: -.04em;
  box-shadow: 0 5px 12px rgba(70, 93, 206, .2);
}
.brand-copy h1 { margin: 2px 0 0; font-size: 19px; line-height: 1.15; letter-spacing: -.035em; }
.eyebrow { margin: 0; color: #9aa3b3; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.local-indicator { display: inline-flex; align-items: center; gap: 8px; color: #788398; font-size: 11px; font-weight: 650; }
.indicator-dot { width: 7px; height: 7px; border-radius: 50%; background: #54ae87; }

.workspace {
  width: min(1600px, 100%); margin: 0 auto; padding: 26px clamp(18px, 3vw, 44px) 48px;
  display: grid; grid-template-columns: minmax(270px, 320px) minmax(0, 1fr); align-items: start; gap: 22px;
}
.sidebar { display: grid; gap: 14px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.sidebar .panel { padding: 18px; }
.panel-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 16px; }
.compact-heading { margin-bottom: 13px; }
.step-number {
  width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px;
  color: var(--blue); background: var(--blue-pale); font-size: 10px; font-weight: 800;
}
.panel-heading h2 { margin: 1px 0 4px; font-size: 13px; letter-spacing: -.015em; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.class-library-panel .panel-heading { margin-bottom: 12px; }
.library-actions { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.library-actions .button { flex: 1; min-width: 0; padding: 0 8px; }
.library-actions-secondary { justify-content: space-between; }
.library-actions-secondary .button { flex: 0 1 auto; }
.library-actions-secondary .text-button { margin-left: auto; }
.backup-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #edf0f4; }
.backup-actions .text-button { color: #7d89a0; }
.backup-actions .text-button:hover { color: var(--blue); }
.backup-actions input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.import-backup-label { cursor: pointer; }

.drop-zone {
  position: relative; min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 15px; border: 1px dashed #c8d0df; border-radius: 12px; background: #fbfcfe;
  text-align: center; transition: border-color .15s, background .15s, transform .15s; cursor: pointer;
}
.drop-zone:hover, .drop-zone.is-dragging { border-color: var(--blue); background: #f6f7ff; }
.drop-zone.is-dragging { transform: scale(1.01); }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-icon { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 1px; border-radius: 9px; color: var(--blue); background: var(--blue-pale); }
.upload-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.drop-title { color: #4358bf; font-size: 10px; font-weight: 750; }
.drop-subtitle { color: #9aa3b3; font-size: 9px; }
.file-status { min-height: 14px; margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.file-status.is-error { color: #b34d4c; }
.file-status.is-success { color: #367b62; }
.mapping-panel { margin-top: 13px; padding-top: 14px; border-top: 1px solid var(--line); }
.mapping-title { margin: 0 0 12px; font-size: 10px; font-weight: 800; }
.field-label { display: block; margin: 11px 0 6px; color: #59657b; font-size: 10px; font-weight: 700; }
.optional { margin-left: 4px; color: #9ba4b2; font-size: 9px; font-weight: 500; }
.text-control {
  width: 100%; min-height: 35px; padding: 7px 10px; border: 1px solid #dfe4ec; border-radius: 8px;
  outline: none; background: #fff; color: var(--ink); font-size: 11px; transition: border-color .15s, box-shadow .15s;
}
.text-control:focus { border-color: #8899e8; box-shadow: 0 0 0 3px rgba(70, 93, 206, .1); }

.button {
  min-height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 9px; font-size: 10px; font-weight: 750;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.button:active:not(:disabled) { transform: translateY(1px); }
.button-primary { background: var(--blue); color: #fff; box-shadow: 0 4px 9px rgba(70, 93, 206, .15); }
.button-primary:hover:not(:disabled) { background: var(--blue-dark); box-shadow: 0 5px 12px rgba(70, 93, 206, .22); }
.button-light { border-color: #e3e7ee; background: #fff; color: #58647a; }
.button-light:hover:not(:disabled) { border-color: #cbd3df; background: #fafbfc; }
.button-danger-outline { border-color: #f0d6d3; background: #fff; color: #b34d4c; }
.button-danger-outline:hover { border-color: #e8b7b1; background: #fff8f7; }
.full-width { width: 100%; margin-top: 14px; }

.layout-controls { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; margin-bottom: 14px; }
.layout-field { display: grid; gap: 6px; color: #7b8699; font-size: 9px; font-weight: 700; }
.room-config-field { grid-column: 1 / -1; }
.teacher-desk-field { margin-top: 2px; }
.check-row { position: relative; display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; cursor: pointer; }
.check-row input { position: absolute; opacity: 0; }
.custom-check { width: 15px; height: 15px; display: block; position: relative; flex: 0 0 auto; margin-top: 1px; border: 1px solid #c8cfdb; border-radius: 4px; background: #fff; }
.check-row input:checked + .custom-check { border-color: var(--blue); background: var(--blue); }
.check-row input:checked + .custom-check::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff;
  border-width: 0 1.7px 1.7px 0; transform: rotate(45deg);
}
.check-row input:focus-visible + .custom-check { outline: 3px solid rgba(70, 93, 206, .2); }
.check-row strong { display: block; color: #47546a; font-size: 10px; font-weight: 700; }
.check-row small { display: block; margin-top: 3px; color: #99a2b1; font-size: 9px; line-height: 1.4; }

.roster-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.roster-heading .panel-heading { margin-bottom: 10px; }
.icon-button {
  width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #e1e6ef;
  border-radius: 8px; background: #fff; color: #59677f; font-size: 16px; line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-button:hover { border-color: #cdd5e3; background: #f8f9fc; color: var(--blue); }
.add-button { color: var(--blue); font-size: 19px; font-weight: 400; }
.roster-list { display: grid; gap: 6px; max-height: 290px; overflow-y: auto; }
.roster-item { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 6px 7px 6px 9px; border: 1px solid #ebedf2; border-radius: 9px; background: #fff; cursor: grab; transition: border-color .12s, background .12s; }
.roster-item:hover { border-color: #cfd6ec; background: #fcfcff; }
.roster-item:active { cursor: grabbing; }
.roster-name { min-width: 0; flex: 1; overflow: hidden; color: #3f4b60; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.roster-group { display: block; overflow: hidden; margin-top: 2px; color: #9aa3b1; font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.gender-badge { min-width: 24px; min-height: 19px; display: inline-grid; place-items: center; padding: 2px 5px; border-radius: 6px; background: #f1efff; color: #7668b5; font-size: 8px; font-weight: 800; }
.gender-badge.male { background: #eaf4ff; color: #4b7aa8; }
.gender-badge.other { background: #f0f2f5; color: #8791a0; }
.place-student { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 6px; background: var(--blue-pale); color: var(--blue); font-size: 14px; }
.place-student:hover { background: var(--blue); color: #fff; }
.empty-roster { margin: 7px 0 0; color: #9aa3b2; font-size: 10px; line-height: 1.5; }
.privacy-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid #dcece6; border-radius: 11px; background: #f5faf8; color: #668276; }
.privacy-icon { color: var(--mint); font-size: 18px; line-height: 1; }
.privacy-note p { margin: 0; font-size: 9px; line-height: 1.55; }

.board { min-width: 0; padding: clamp(18px, 2.4vw, 32px); }
.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.board-title-wrap .eyebrow { margin-bottom: 6px; }
.board-title-line { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.plan-title-input { width: min(430px, 100%); padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: clamp(20px, 2vw, 27px); font-weight: 760; letter-spacing: -.045em; }
.plan-title-input:focus { border-bottom: 1px solid #aab5e8; }
.room-chip { min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid #e5e9ef; border-radius: 8px; background: #fafbfd; color: #929bad; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.room-chip input { width: 38px; padding: 0; border: 0; outline: 0; background: transparent; color: #536078; font-size: 10px; font-weight: 750; letter-spacing: 0; text-align: center; }
.room-chip input::placeholder { color: #abb3bf; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.shuffle-button { min-height: 38px; padding: 0 14px; }
.shuffle-button span { font-size: 15px; }
.print-flip-option { display: inline-flex; align-items: center; gap: 6px; color: #788398; font-size: 9px; font-weight: 700; cursor: pointer; }
.print-flip-option input { accent-color: var(--blue); }
.board-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-bottom: 15px; border-bottom: 1px solid #edf0f4; }
.summary-pills { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.summary-pill { min-height: 25px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid #edf0f4; border-radius: 20px; color: #6d788c; font-size: 9px; font-weight: 650; }
.summary-dot { width: 6px; height: 6px; border-radius: 50%; }
.dot-students { background: #8a82ca; }
.dot-seats { background: #9db7aa; }
.incident-toolbar { display: flex; align-items: end; gap: 12px; margin-top: 14px; padding: 11px 12px; border: 1px solid #f0e5de; border-radius: 11px; background: #fffaf7; }
.quick-incident-field { width: min(260px, 45%); display: grid; gap: 5px; color: #9b7462; font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.incident-toast { min-width: 0; flex: 1; color: #48836e; font-size: 9px; }
.incident-log-button { min-height: 31px; flex: 0 0 auto; }
.table-overview-button { min-height: 31px; flex: 0 0 auto; color: #64728b; }
.table-overview-button.is-active { border-color: #cbd8ff; background: #f0f3ff; color: #465dce; }
.incident-count { min-width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; background: #f6ebe4; color: #9d6f58; font-size: 8px; }
.text-button { padding: 4px 0; border: 0; background: none; font-size: 9px; font-weight: 700; }
.danger-text { color: #a98d8c; }
.danger-text:hover:not(:disabled) { color: #af4f4b; }
.front-marker { display: flex; align-items: center; gap: 13px; margin: 24px 0 17px; }
.front-rule { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #e3e7ef); }
.front-rule:last-child { background: linear-gradient(90deg, #e3e7ef, transparent); }
.front-label { display: inline-flex; align-items: center; gap: 7px; color: #939dae; font-size: 9px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.board-icon { color: var(--coral); font-size: 13px; }
.teacher-desk {
  width: min(280px, 55%);
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -3px auto 17px;
  border: 2px solid #b8836e;
  border-radius: 7px;
  background: #fff9f5;
  color: #8c644f;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
}
.teacher-desk-icon { font-size: 13px; }
.teacher-desk[hidden] { display: none !important; }
.grid-scroll { width: 100%; overflow-x: auto; padding: 0 0 7px; }
.seat-grid { min-width: 740px; display: grid; gap: 18px; }
.desk-row { min-width: 740px; display: grid; gap: 12px; align-items: stretch; }
.desk-pair { min-width: 0; position: relative; padding: 25px 8px 10px; border: 1px solid #edf0f4; border-radius: 12px; background: #fafbfd; }
.desk-pair::after { content: ""; position: absolute; top: 48px; bottom: 15px; left: 50%; width: 1px; background: #e8ebf1; }
.desk-label { position: absolute; top: -7px; left: 50%; z-index: 1; padding: 0 7px; transform: translateX(-50%); background: #fff; color: #a1a9b6; font-size: 8px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.table-incident-button { position: absolute; top: 4px; right: 6px; z-index: 4; width: 25px; height: 25px; display: grid; place-items: center; padding: 0; border: 1px solid #e5e9f0; border-radius: 8px; background: #fff; color: #75829a; font-size: 16px; line-height: 1; cursor: pointer; }
.table-incident-button:hover, .table-incident-button:focus-visible { border-color: #c3cdef; background: #f1f4ff; color: #465dce; }
.table-incident-label { position: absolute; top: 7px; left: 50%; z-index: 3; max-width: calc(100% - 52px); overflow: hidden; padding: 3px 7px; transform: translateX(-50%); border: 1px solid transparent; border-radius: 99px; font-size: 7px; font-weight: 800; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.table-incident-label.heat-1 { border-color: #cde2f5; background: #e9f4ff; color: #3874a2; }
.table-incident-label.heat-2 { border-color: #bde5dd; background: #e3f6f0; color: #287f6d; }
.table-incident-label.heat-3 { border-color: #ebdfa5; background: #fff6ce; color: #90731d; }
.table-incident-label.heat-4 { border-color: #f0c99c; background: #ffead4; color: #a85c1e; }
.table-incident-label.heat-5 { border-color: #efb4ae; background: #ffe2df; color: #a43f39; }
.pair-seats { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; height: 100%; }
.seat { min-width: 0; min-height: 90px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 7px; padding: 10px 9px; border: 1px solid #e5e9f0; border-radius: 9px; background: #fff; transition: border-color .14s, box-shadow .14s, background .14s, transform .14s; }
.seat.occupied { border-color: #dfe4f2; box-shadow: 0 2px 5px rgba(41, 56, 92, .035); cursor: grab; }
.seat.occupied:active { cursor: grabbing; }
.seat.drag-over { border-color: var(--blue); background: #f3f5ff; box-shadow: 0 0 0 3px rgba(70, 93, 206, .1); transform: translateY(-1px); }
.seat.empty { align-items: center; justify-content: center; border-style: dashed; background: rgba(255,255,255,.68); color: #a3acba; }
.seat.priority-gap { border-color: #e7d9d3; background: #fffaf8; }
.seat-topline { position: absolute; top: 7px; left: 8px; right: 7px; display: flex; align-items: center; justify-content: space-between; }
.seat-position { color: #aab2bf; font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.seat-actions { display: flex; align-items: center; gap: 3px; opacity: .48; transition: opacity .14s; }
.seat:hover .seat-actions, .seat:focus-within .seat-actions { opacity: 1; }
.seat-action { width: 19px; height: 19px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #748097; font-size: 11px; }
.seat-action:hover { background: #f0f2f8; color: var(--blue); }
.seat-action.remove:hover { background: #fff0ee; color: #b34d4c; }
.seat-action.incident-action { color: #a56f50; font-weight: 850; }
.seat-action.incident-action:hover { background: #fff0e5; color: #b96130; }
.seat-name { width: 100%; margin-top: 12px; overflow-wrap: anywhere; color: #334158; font-size: 11px; font-weight: 730; line-height: 1.25; }
.seat-meta { min-height: 18px; display: flex; align-items: center; gap: 5px; color: #9aa3b1; font-size: 8px; }
.seat-meta .gender-badge { min-height: 16px; min-width: 19px; font-size: 7px; }
.empty-seat-mark { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 7px; background: #f0f2f6; color: #9aa4b3; font-size: 13px; }
.priority-gap .empty-seat-mark { background: #f8ece7; color: #d18a73; }
.empty-seat-label { font-size: 8px; font-weight: 650; }
.back-marker { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; color: #b1b8c3; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.back-rule { height: 1px; flex: 1; background: #edf0f4; }
.board-hint { min-height: 17px; margin: 15px 0 0; color: #8a95a6; font-size: 10px; line-height: 1.5; }
.board-hint.is-warning { color: #a96a4e; }
.board-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf0f4; color: #a0a8b4; font-size: 8px; }
.footer-key { margin-right: 4px; color: #7888ca; font-size: 12px; }

.student-dialog { width: min(420px, calc(100vw - 30px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 70px rgba(27, 38, 65, .23); }
.student-dialog::backdrop { background: rgba(24, 33, 52, .34); backdrop-filter: blur(2px); }
.student-dialog form { padding: 23px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.dialog-heading h2 { margin: 5px 0 0; font-size: 20px; letter-spacing: -.035em; }
.dialog-close { font-size: 18px; }
.student-dialog .field-label { margin-top: 13px; }
.student-dialog .text-control { min-height: 40px; font-size: 12px; }
.dialog-actions { display: flex; align-items: center; gap: 8px; margin-top: 23px; }
.dialog-spacer { flex: 1; }
.dialog-note { color: #778397; font-size: 11px; line-height: 1.6; }
.install-dialog { max-width: 500px; }
.incident-dialog, .incident-edit-dialog {
  width: min(640px, calc(100vw - 28px));
  max-width: 640px;
  max-height: min(88vh, 820px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 70px rgba(27, 38, 65, .23);
}
.incident-dialog::backdrop, .incident-edit-dialog::backdrop { background: rgba(24, 33, 52, .36); backdrop-filter: blur(2px); }
.incident-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.incident-dialog-header h2 { margin: 5px 0 7px; font-size: 20px; letter-spacing: -.035em; }
.incident-dialog-header .dialog-note { margin: 0; }
.incident-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 17px 0 8px; flex-wrap: wrap; }
.export-note { margin: 0 0 12px; color: #9aa3b1; font-size: 9px; line-height: 1.5; }
.incident-list { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; }
.incident-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #ebedf2; border-radius: 10px; background: #fff; }
.incident-item-main { min-width: 0; }
.incident-item-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.incident-student { color: #344158; font-size: 11px; font-weight: 800; }
.incident-date { color: #8b96a7; font-size: 9px; }
.incident-reason { margin: 5px 0 0; color: #9b6749; font-size: 10px; font-weight: 750; }
.incident-item-table .incident-student { color: #6378aa; }
.incident-details-preview { margin: 4px 0 0; color: #778397; font-size: 9px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.empty-incidents { margin: 14px 0 4px; color: #9aa3b2; font-size: 11px; }
.incident-edit-dialog form { padding: 0; }
.incident-edit-dialog .dialog-heading { margin-bottom: 14px; }
.incident-edit-dialog .text-control { min-height: 38px; }
.incident-details-input { min-height: 105px; resize: vertical; font-size: 11px; }

.saved-class-list { display: grid; gap: 7px; max-height: 190px; overflow-y: auto; }
.saved-class-card {
  width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; border: 1px solid #e7eaf0; border-radius: 10px; background: #fff; color: #566278; text-align: left;
}
.saved-class-card strong { min-width: 0; overflow: hidden; color: #344158; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.saved-class-card span { flex: 0 0 auto; color: #8994a7; font-size: 9px; }
.saved-class-card[aria-pressed="true"] { border-color: #aeb9ef; background: #f5f6ff; box-shadow: 0 0 0 2px rgba(70,93,206,.08); }
.saved-class-empty { margin: 0; padding: 10px; color: #9aa3b2; font-size: 10px; }
.picker-trigger {
  width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border: 1px solid #dfe4ec; border-radius: 10px; background: #fff; color: #40506a;
  font-size: 12px; font-weight: 650; text-align: left;
}
.picker-trigger::after { content: "›"; flex: 0 0 auto; color: #8e9ab0; font-size: 20px; line-height: 1; transform: rotate(90deg); }
.picker-trigger:active, .picker-trigger:focus-visible { border-color: #8899e8; outline: 3px solid rgba(70,93,206,.12); }
.quick-reason-trigger { min-height: 38px; border-color: #f0e5de; color: #65574f; font-size: 11px; }
.quick-reason-trigger::after { color: #a56f50; }
.number-stepper { min-height: 42px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; border: 1px solid #dfe4ec; border-radius: 10px; background: #fff; }
.number-stepper button { width: 42px; min-height: 40px; border: 0; background: #f8f9fc; color: var(--blue); font-size: 20px; font-weight: 600; }
.number-stepper output { min-width: 30px; color: #344158; font-size: 13px; font-weight: 800; text-align: center; }
.number-stepper button:disabled { background: #fff; color: #bdc4d0; opacity: 1; }
.choice-segment { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
.choice-segment button { min-height: 40px; padding: 6px 7px; border: 1px solid #e1e6ef; border-radius: 9px; background: #fff; color: #657188; font-size: 10px; font-weight: 700; }
.choice-segment button[aria-pressed="true"] { border-color: #abb7ee; background: #f1f3ff; color: #4056c3; }
.gender-choice { margin-top: 7px; }
.gender-choice button { min-height: 44px; font-size: 11px; }
.roster-name-button { min-width: 0; flex: 1; overflow: hidden; padding: 0; border: 0; background: transparent; color: #3f4b60; font-size: 10px; font-weight: 650; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.roster-name-button .roster-group { color: #9aa3b1; }
.roster-item:has(.roster-name-button:focus-visible) { outline: 3px solid rgba(70,93,206,.14); }
.seat.selected-for-move { border-color: var(--blue); background: #f1f3ff; box-shadow: 0 0 0 3px rgba(70,93,206,.18); }
.picker-dialog {
  width: min(460px, calc(100vw - 28px)); max-width: 460px; max-height: min(78vh, 700px); overflow: hidden;
  padding: 20px; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 70px rgba(27,38,65,.24);
}
.picker-dialog::backdrop { background: rgba(24,33,52,.4); backdrop-filter: blur(2px); }
.picker-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.picker-header h2 { margin: 4px 0 0; font-size: 19px; }
.picker-search { min-height: 46px; margin-bottom: 9px; font-size: 16px; }
.picker-options { display: grid; gap: 6px; max-height: min(55vh, 500px); overflow-y: auto; overscroll-behavior: contain; }
.picker-option { min-height: 48px; padding: 9px 12px; border: 1px solid #e8ebf1; border-radius: 10px; background: #fff; color: #39475e; font-size: 13px; font-weight: 650; text-align: left; }
.picker-option[aria-pressed="true"] { border-color: #aeb9ef; background: #f2f4ff; color: #4056c3; }
.picker-empty { padding: 12px; color: #8b96a7; font-size: 12px; }
.mobile-nav { display: none; }

@media (max-width: 980px) {
  .workspace { grid-template-columns: minmax(250px, 290px) minmax(0, 1fr); gap: 14px; padding-top: 18px; }
  .board { padding: 20px 17px; }
  .board-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .toolbar-actions { justify-content: flex-start; }
  .seat-grid, .desk-row { min-width: 680px; }
  .desk-row { gap: 8px; }
}
@media (max-width: 700px) {
  body { overflow-x: hidden; }
  .topbar { position: sticky; top: 0; z-index: 15; min-height: 64px; gap: 9px; padding: 9px 12px; }
  .topbar-actions { gap: 6px; }
  .local-indicator { display: none; }
  .topbar-actions .button { min-height: 40px; padding: 0 9px; font-size: 9px; }
  .workspace { grid-template-columns: minmax(0,1fr); gap: 12px; padding: 10px 9px calc(82px + env(safe-area-inset-bottom)); }
  .sidebar { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .sidebar .panel { padding: 14px; border-radius: 13px; }
  .board { grid-row: 1; padding: 14px 10px; border-radius: 13px; }
  .board-toolbar { gap: 9px; }
  .board-title-line { gap: 8px; }
  .plan-title-input { max-width: calc(100vw - 145px); font-size: 20px; }
  .toolbar-actions { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 7px; }
  .toolbar-actions .button { min-height: 44px; padding: 0 8px; font-size: 10px; }
  .toolbar-actions .print-flip-option { grid-column: 1 / -1; min-height: 38px; }
  .incident-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; padding: 9px; }
  .quick-incident-field { width: 100%; }
  .incident-toast { grid-column: 1 / -1; min-height: 0; }
  .incident-log-button { min-height: 40px; }
  .seat-actions { opacity: 1; gap: 2px; }
  .table-incident-button { top: 4px; right: 4px; width: 30px; height: 30px; }
  .table-incident-label { top: 7px; max-width: calc(100% - 46px); padding: 4px 6px; font-size: 7px; }
  .seat-grid, .desk-row { min-width: 0; width: 100%; }
  .seat-grid { gap: 13px; }
  .desk-row { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px; }
  .desk-pair { padding: 25px 5px 7px; border-radius: 10px; }
  .desk-pair::after { top: 48px; bottom: 11px; }
  .pair-seats { gap: 3px; }
  .seat { min-height: 82px; padding: 8px 4px; border-radius: 8px; gap: 5px; }
  .seat-topline { top: 4px; left: 4px; right: 4px; }
  .seat-position { display: none; }
  .seat-action { width: 30px; height: 30px; border-radius: 7px; font-size: 15px; }
  .seat-action.remove { display: none; }
  .seat-name { margin-top: 15px; font-size: clamp(9px, 2.9vw, 12px); line-height: 1.2; text-align: center; }
  .seat-meta { justify-content: center; min-height: 15px; }
  .seat-meta .gender-badge { min-height: 16px; }
  .empty-seat-label { font-size: 8px; text-align: center; }
  .front-marker { margin: 17px 0 13px; }
  .teacher-desk { width: 72%; min-height: 39px; margin-bottom: 13px; font-size: 9px; }
  .back-marker { margin-top: 12px; }
  .board-footer { flex-direction: column; font-size: 9px; }
  .board-summary { align-items: flex-start; flex-direction: column; gap: 7px; margin-top: 10px; padding-bottom: 10px; }
  .summary-pill { min-height: 30px; font-size: 10px; }
  .number-stepper button { width: 46px; min-height: 44px; }
  .layout-field { font-size: 10px; }
  .room-config-field .text-control, .text-control { min-height: 44px; font-size: 16px; }
  .check-row { min-height: 44px; align-items: center; }
  .custom-check { width: 21px; height: 21px; }
  .check-row input:checked + .custom-check::after { left: 6px; top: 3px; }
  .check-row strong { font-size: 12px; }
  .check-row small { font-size: 10px; }
  .drop-zone { min-height: 100px; }
  .drop-title { font-size: 12px; }
  .drop-subtitle { font-size: 10px; }
  .button, .text-button, .icon-button { min-height: 42px; }
  .library-actions .button { min-height: 44px; }
  .backup-actions { align-items: center; flex-wrap: wrap; }
  .backup-actions .text-button { min-height: 38px; }
  .roster-list { max-height: 330px; }
  .roster-item { min-height: 52px; gap: 8px; }
  .roster-name-button { font-size: 12px; }
  .place-student { width: 38px; height: 38px; font-size: 19px; }
  .picker-dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 86dvh; margin: 0; padding: 18px 14px calc(16px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .picker-options { max-height: 62dvh; }
  .picker-option { min-height: 54px; font-size: 15px; }
  .mobile-nav { position: fixed; inset: auto 0 0; z-index: 20; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid #e5e8ef; background: rgba(255,255,255,.96); box-shadow: 0 -5px 20px rgba(30,42,66,.08); backdrop-filter: blur(10px); }
  .mobile-nav button { min-height: 42px; padding: 0 2px; border: 0; border-radius: 9px; background: transparent; color: #637089; font-size: 11px; font-weight: 750; }
  .mobile-nav button:active { background: var(--blue-pale); color: var(--blue); }
  #seatGrid, #rosterPanel, #classLibraryPanel, #layoutPanel { scroll-margin-top: 76px; }
  .student-dialog, .incident-dialog, .incident-edit-dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 90dvh; margin: 0; padding: 18px 15px calc(18px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .student-dialog form { padding: 0; }
  .student-dialog .text-control, .incident-edit-dialog .text-control { min-height: 46px; font-size: 16px; }
  .incident-details-input { min-height: 115px !important; }
  .dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
  .dialog-actions .button { width: 100%; min-height: 46px; padding: 7px; white-space: normal; }
  .dialog-spacer { display: none; }
  .incident-dialog-actions { display: grid; grid-template-columns: 1fr; }
  .incident-dialog-actions .button { min-height: 46px; }
  .incident-item { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 420px) {
  .topbar { gap: 7px; }
  .brand-copy .eyebrow { font-size: 7px; }
  .brand-copy h1 { font-size: 15px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .topbar-actions { width: auto; margin-left: auto; }
  .topbar-actions .button { padding: 0 7px; font-size: 8px; }
  .desk-pair { padding-left: 3px; padding-right: 3px; }
  .seat-action { width: 28px; height: 28px; }
  .seat { min-height: 78px; }
  .layout-controls { gap: 8px; }
  .choice-segment { gap: 4px; }
  .choice-segment button { padding: 5px 3px; font-size: 9px; }
}
@media (max-width: 360px) {
  .topbar { flex-wrap: wrap; }
  .topbar-actions { width: 100%; margin-left: 41px; justify-content: flex-start; }
  .topbar-actions .button { min-height: 36px; }
  .board-title-line { flex-wrap: nowrap; }
  .room-chip { padding: 0 6px; }
}
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { min-width: 0; background: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .topbar, .sidebar, .mobile-nav, .toolbar-actions, .board-summary, .incident-toolbar, .board-footer, .seat-actions, .seat-position, .seat-meta, .table-incident-button, .table-incident-label,
  .empty-seat-mark, .empty-seat-label, .board-hint { display: none !important; }
  .workspace { display: block; width: 100%; padding: 16px 0 0; }
  .board { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .board-toolbar { display: block; }
  .board-title-line { justify-content: space-between; }
  .plan-title-input { width: auto; font-size: 22px; }
  .room-chip { border: 0; background: transparent; color: #445066; font-size: 10px; }
  .room-chip input { width: 45px; color: #26354c; font-size: 13px; }
  .front-marker { margin: 12px 0 10px; }
  .teacher-desk { width: 210px; min-height: 27px; margin: 0 auto 14px; border: 2px solid #4f5d70; border-radius: 3px; background: #fff; color: #303d52; font-size: 9px; }
  .grid-scroll { overflow: visible; }
  .seat-grid, .desk-row { min-width: 0; }
  .seat-grid { gap: 9px; }
  .desk-row { gap: 8px; break-inside: avoid; }
  .desk-pair { padding: 12px 7px 7px; border: 2px solid #4f5d70; border-radius: 5px; background: #fff; break-inside: avoid; }
  .desk-pair::after { top: 32px; bottom: 11px; background: #7b8797; }
  .desk-label { color: #35435a; background: #fff; font-size: 9px; }
  .pair-seats { gap: 5px; }
  .seat { min-height: 82px; padding: 8px 6px; justify-content: center; border: 1.2px solid #7d8998; border-radius: 3px; background: #fff; }
  .seat-name { margin: 0; color: #1f2c40; font-size: 15px; font-weight: 850; line-height: 1.15; text-align: center; }
  .print-head-over-tail .seat-name { transform: rotate(180deg); }
  .seat.empty { border-style: solid; background: #fff; }
  .back-marker { margin-top: 10px; }
  .teacher-desk.teacher-desk-back { margin: 14px auto 0; }
}