:root {
  --ink: #203047;
  --muted: #6b778b;
  --paper: #f4f7fb;
  --card: #ffffff;
  --line: #dfe6ef;
  --nav: #173a5e;
  --nav-2: #1d4b76;
  --blue: #246bce;
  --blue-soft: #eaf2ff;
  --green: #16845b;
  --green-soft: #e8f7f0;
  --yellow: #b36b00;
  --yellow-soft: #fff4d9;
  --red: #b83c4d;
  --red-soft: #fff0f1;
  --purple: #6750a4;
  --shadow: 0 12px 30px rgba(31, 52, 79, .09);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--ink); background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .58; }
.hidden { display: none !important; }
.muted { color: var(--muted); line-height: 1.7; }
.eyebrow { margin: 0 0 6px; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow.light { color: #cfe0ff; }

.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 18px;
  background: linear-gradient(145deg, #2f7ae0, #164d99);
  color: #fff; font-size: 28px; font-weight: 800; box-shadow: 0 10px 20px rgba(36,107,206,.22);
}
.brand-mark.small { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; box-shadow: none; }

.auth-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background:
    radial-gradient(circle at 20% 20%, rgba(78,137,218,.18), transparent 34%),
    linear-gradient(145deg, #eef4fb, #f9fbfd);
}
.auth-card {
  width: 420px; max-width: 100%; padding: 40px; border: 1px solid rgba(255,255,255,.8);
  border-radius: 28px; background: rgba(255,255,255,.95); box-shadow: var(--shadow);
}
.auth-card h1 { margin: 18px 0 10px; font-size: 28px; }
.field-label { display: block; margin: 22px 0 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.pin-input {
  width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 14px;
  font-size: 26px; letter-spacing: .45em; text-align: center; outline: none;
}
.pin-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.form-error { min-height: 22px; color: var(--red); font-size: 13px; }

.primary-button, .secondary-button, .ghost-button, .accent-button, .danger-button {
  border: 0; border-radius: 11px; padding: 10px 16px; font-weight: 700; transition: .15s ease;
}
.primary-button { background: var(--blue); color: #fff; }
.primary-button:hover, .accent-button:hover { transform: translateY(-1px); filter: brightness(.96); }
.secondary-button { background: #eef2f7; color: var(--ink); border: 1px solid var(--line); }
.ghost-button { background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.26); }
.accent-button { background: #ffcc66; color: #5b3a00; padding: 12px 20px; }
.danger-button { background: var(--red-soft); color: var(--red); border: 1px solid #f4cdd2; }
.primary-button:focus, .secondary-button:focus, .ghost-button:focus,
.accent-button:focus, .danger-button:focus, .text-button:focus, .nav-item:focus {
  outline: 2px solid #78aaf0; outline-offset: 2px;
}
.wide { width: 100%; margin-top: 14px; }
.icon-button { border: 0; background: transparent; color: var(--muted); font-size: 28px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 24px 18px; color: #fff;
  background: linear-gradient(180deg, var(--nav), #102b47); display: flex; flex-direction: column;
}
.sidebar-brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 26px; }
.sidebar-brand strong, .sidebar-brand small { display: block; }
.sidebar-brand small { margin-top: 4px; color: #a9c2dc; font-size: 11px; }
.nav-list { display: grid; gap: 10px; }
.nav-item {
  display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 2px 12px;
  width: 100%; padding: 13px 12px;
  border: 0; border-radius: 12px; background: transparent; color: #d9e6f3; text-align: left;
}
.nav-item span {
  grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 9px; background: rgba(255,255,255,.1); font-size: 13px; font-weight: 800;
}
.nav-item b { font-size: 14px; }
.nav-item small { color: #9fbbd5; font-size: 10px; line-height: 1.35; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.12); color: #fff; }
.nav-item.active span { background: #fff; color: var(--nav); }
.nav-item.active small { color: #d9e6f3; }
.settings-nav { margin-bottom: 8px; }
.settings-nav span { grid-row: 1; }
.sidebar-bottom { margin-top: auto; padding: 18px 8px 0; border-top: 1px solid rgba(255,255,255,.12); }
.sidebar-bottom p { color: #92adc8; font-size: 11px; text-align: center; }

.main-panel { min-width: 0; padding: 0 32px 50px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; min-height: 94px;
  border-bottom: 1px solid var(--line); margin-bottom: 26px;
}
.topbar h2 { margin: 0; font-size: 25px; }
.topbar-actions, .inline-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.global-search { position: relative; width: 42vw; max-width: 480px; margin-left: auto; }
.global-search > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.global-search > input { width: 100%; padding: 11px 15px 11px 38px; border: 1px solid #bfd2e2; border-radius: 13px; background: #fff; }
.global-search:before { content: "⌕"; position: absolute; z-index: 1; left: 14px; top: 8px; color: #56758f; font-size: 21px; }
.global-search-results { position: absolute; z-index: 40; top: calc(100% + 7px); left: 0; right: 0; max-height: 430px; overflow-y: auto; padding: 7px; border: 1px solid #bfd2e2; border-radius: 14px; background: #fff; box-shadow: 0 18px 45px rgba(25,53,77,.2); }
.global-search-result { display: flex; width: 100%; padding: 10px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; flex-direction: column; gap: 3px; }
.global-search-result:hover, .global-search-result:focus { background: #eaf4fd; outline: none; }
.global-search-result span { font-weight: 800; }
.global-search-result small, .global-search-empty { color: var(--muted); }
.global-search-empty { padding: 17px 12px; text-align: center; }
.status-pill {
  display: inline-flex; align-items: center; min-height: 30px; padding: 5px 11px;
  border-radius: 99px; background: #e9edf2; color: #4f5e70; font-size: 12px; font-weight: 700;
}
.status-pill.good { background: var(--green-soft); color: var(--green); }

.global-class-status {
  position: sticky; top: 8px; z-index: 25; display: grid;
  grid-template-columns: minmax(150px,1.2fr) minmax(105px,.7fr) minmax(90px,.65fr) minmax(180px,1.25fr) minmax(125px,.85fr) auto;
  align-items: stretch; gap: 1px; margin: -10px 0 18px; padding: 5px;
  border: 1px solid #b8cce3; border-radius: 17px; background: #d8e4f1;
  box-shadow: 0 10px 26px rgba(23,58,94,.16);
}
.global-class-main, .global-status-item, .global-end-button {
  min-width: 0; min-height: 55px; padding: 8px 11px; border: 0; background: #fff; color: var(--ink); text-align: left;
}
.global-class-main { display: flex; align-items: center; gap: 9px; border-radius: 12px 4px 4px 12px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4d5f; box-shadow: 0 0 0 5px rgba(239,77,95,.11); }
.global-class-main small, .global-class-main strong, .global-status-item small, .global-status-item strong { display: block; }
.global-class-main small, .global-status-item small { margin-bottom: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.global-class-main strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.global-status-item { cursor: pointer; }
.global-status-item:hover { background: #f7faff; }
.global-status-item strong { font-size: 13px; white-space: nowrap; }
.global-status-item.time-item strong { color: var(--blue); font-size: 19px; font-variant-numeric: tabular-nums; }
.global-status-item.time-item.warning strong { color: var(--yellow); }
.global-status-item.time-item.overtime strong { color: var(--red); }
.global-status-item.help-item.alert { background: #fff1f2; }
.global-status-item.help-item.alert strong { color: var(--red); }
.good-text { color: var(--green); }
.warning-text { color: var(--yellow); }
.global-end-button { border-radius: 4px 12px 12px 4px; background: var(--nav); color: #fff; font-size: 12px; font-weight: 800; text-align: center; }
.global-end-button:hover { background: var(--nav-2); }
.global-class-status + .context-nav { margin-top: 0; }

.schedule-now-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px;
  padding: 13px 16px; border: 1px solid #c9daee; border-radius: 15px; background: #f4f9ff;
}
.schedule-now-banner small, .schedule-now-banner strong, .schedule-now-banner span { display: block; }
.schedule-now-banner small { margin-bottom: 3px; color: var(--blue); font-size: 10px; font-weight: 800; }
.schedule-now-banner strong { font-size: 15px; }
.schedule-now-banner span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.schedule-name-stat { font-size: 17px !important; line-height: 1.35; }
.period-list { display: grid; gap: 9px; }
.period-row {
  display: grid; grid-template-columns: 70px 1fr 24px 1fr; align-items: center; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: #f9fbfd;
}
.period-row strong { font-size: 13px; }
.period-row span { color: var(--blue); font-size: 15px; font-weight: 800; text-align: center; }
.period-row i { height: 1px; background: #bac9da; }
.schedule-steps { margin: 0; padding: 0; list-style: none; counter-reset: schedule-step; display: grid; gap: 12px; }
.schedule-steps li { position: relative; padding: 11px 12px 11px 46px; border-radius: 11px; background: #f7f9fc; }
.schedule-steps li::before {
  counter-increment: schedule-step; content: counter(schedule-step); position: absolute; left: 12px; top: 12px;
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 800;
}
.schedule-steps b, .schedule-steps span { display: block; }
.schedule-steps b { font-size: 12px; }
.schedule-steps span { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.schedule-period-editor { display: grid; gap: 8px; }
.schedule-period-editor-row { display: grid; grid-template-columns: 55px 1fr 1fr; gap: 8px; align-items: end; }
.schedule-period-editor-row label span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; }
.schedule-period-editor-row input { width: 100%; }
.teacher-timetable-panel { margin-top: 18px; }
.teacher-timetable-grid,
.timetable-editor-grid { display: grid; grid-template-columns: 112px repeat(5,minmax(120px,1fr)); gap: 1px; overflow-x: auto; border: 1px solid #cbd8e5; border-radius: 14px; background: #dce5ee; }
.timetable-grid-head,
.timetable-editor-head { display: grid; min-height: 42px; place-items: center; padding: 8px; background: #eaf2f9; color: #355a78; font-size: 12px; font-weight: 900; }
.timetable-grid-head.period-head { background: #dfeaf4; }
.timetable-period-label,
.timetable-editor-period { display: grid; min-height: 66px; place-content: center; padding: 8px; background: #f4f8fb; text-align: center; }
.timetable-period-label strong,
.timetable-period-label small,
.timetable-editor-period strong,
.timetable-editor-period small { display: block; }
.timetable-period-label small,
.timetable-editor-period small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.timetable-class-cell { display: grid; min-height: 66px; place-content: center; padding: 8px; background: #fff; text-align: center; }
.timetable-class-cell strong { color: #195f98; font-size: 13px; }
.timetable-class-cell small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.timetable-class-cell.empty { color: #bec8d1; }
.teacher-timetable-grid.not-ready .timetable-class-cell { background: #fafbfc; }
.confirmed-timetable-summary { padding: 14px; border-radius: 12px; background: #eaf6ef; color: #285e42; }
.confirmed-timetable-summary p { margin: 6px 0 0; line-height: 1.55; }
.confirmed-timetable-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.confirmed-timetable-row { display: grid; grid-template-columns: 1fr 45px; gap: 3px 8px; padding: 9px; border: 1px solid #d9e3ec; border-radius: 10px; background: #fff; }
.confirmed-timetable-row span { color: var(--muted); font-size: 10px; }
.confirmed-timetable-row strong { grid-column: 1 / -1; font-size: 12px; }
.modal-card.wide-modal { width: 1040px; }
.timetable-editor-grid { min-width: 850px; max-height: 58vh; overflow: auto; }
.timetable-editor-select { min-width: 120px; min-height: 66px; border: 0; border-radius: 0; background: #fff; font-size: 11px; }

.context-nav {
  display: flex; align-items: center; gap: 18px; margin: -10px 0 24px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 4px 14px rgba(31,52,79,.04);
}
.context-heading { min-width: 105px; padding-right: 16px; border-right: 1px solid var(--line); }
.context-heading small, .context-heading strong { display: block; }
.context-heading small { margin-bottom: 3px; color: var(--muted); font-size: 10px; }
.context-heading strong { font-size: 13px; }
.context-tabs { display: flex; gap: 7px; flex-wrap: wrap; }
.context-item {
  min-height: 35px; padding: 7px 13px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--muted); font-size: 12px; font-weight: 700;
}
.context-item:hover { background: #f3f6fa; color: var(--ink); }
.context-item.active { border-color: #bed3ef; background: var(--blue-soft); color: var(--blue); }

.classroom-flow-card {
  margin: 16px 0 20px; padding: 16px 18px; border: 1px solid #cbdcf0; border-radius: 17px;
  background: linear-gradient(135deg,#f8fbff,#eef5fd); box-shadow: 0 5px 14px rgba(31,52,79,.04);
}
.classroom-flow-steps { display: flex; align-items: center; max-width: 760px; }
.classroom-flow-steps > i { flex: 1; height: 2px; min-width: 18px; background: #cbd8e8; }
.classroom-flow-step { display: flex; align-items: center; gap: 7px; color: var(--muted); white-space: nowrap; }
.classroom-flow-step span {
  display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px;
  border-radius: 50%; background: #dfe7f0; color: #65758a; font-size: 11px; font-weight: 800;
}
.classroom-flow-step b { font-size: 12px; }
.classroom-flow-step.done span { background: var(--green); color: #fff; }
.classroom-flow-step.done { color: var(--green); }
.classroom-flow-step.active span { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px rgba(36,107,206,.13); }
.classroom-flow-step.active { color: var(--blue); }
.classroom-next-action {
  display: grid; grid-template-columns: minmax(180px,1fr) minmax(280px,1.4fr) auto;
  align-items: center; gap: 18px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #dbe5f0;
}
.classroom-next-action small, .classroom-next-action strong { display: block; }
.classroom-next-action small { margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.classroom-next-action strong { font-size: 15px; }
.classroom-closure-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.closure-chip { padding: 5px 8px; border-radius: 8px; background: #fff; color: var(--muted); font-size: 10px; font-weight: 700; }
.closure-chip.warning { background: var(--yellow-soft); color: #825000; }
.closure-chip.good { background: var(--green-soft); color: var(--green); }
.closure-check-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 15px 0; }
.closure-check-card { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.closure-check-card span, .closure-check-card strong { display: block; }
.closure-check-card span { color: var(--muted); font-size: 10px; }
.closure-check-card strong { margin-top: 5px; font-size: 22px; }
.closure-warning-list { display: grid; gap: 8px; margin: 12px 0; }
.closure-warning-row { padding: 10px 12px; border-radius: 10px; background: var(--yellow-soft); color: #754800; font-size: 12px; line-height: 1.55; }
.closure-ready { padding: 14px; border-radius: 12px; background: var(--green-soft); color: var(--green); font-weight: 700; }

.hero-card {
  display: grid; grid-template-columns: 1fr 300px; gap: 24px; padding: 32px;
  border-radius: 24px; color: #fff; background:
    linear-gradient(135deg, rgba(21,76,126,.98), rgba(38,105,178,.94));
  box-shadow: var(--shadow);
}
.hero-card h3 { margin: 0 0 10px; max-width: 760px; font-size: 26px; line-height: 1.35; }
.hero-card p { color: #d5e5f6; line-height: 1.7; }
.hero-actions {
  align-self: center; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.1);
}
.hero-actions label { display: block; margin-bottom: 8px; color: #d5e5f6; font-size: 12px; font-weight: 700; }
.hero-actions select, .hero-actions button { width: 100%; }
.hero-actions select { margin-bottom: 10px; }
select, input, textarea {
  min-height: 41px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); outline: none;
}
textarea { width: 100%; min-height: 180px; resize: vertical; line-height: 1.7; }
select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin: 20px 0; }
.stat-card {
  padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 5px 14px rgba(31,52,79,.04);
}
.stat-card span, .stat-card small { display: block; color: var(--muted); font-size: 12px; }
.stat-card strong { display: block; margin: 8px 0 6px; font-size: 30px; }
.two-column { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); gap: 20px; }
.panel-card { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 5px 14px rgba(31,52,79,.04); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.panel-heading h3, .section-toolbar h3 { margin: 0; font-size: 19px; }
.check-list { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.check-list li { position: relative; padding: 12px 14px 12px 48px; border-radius: 12px; background: #f7f9fc; }
.check-list li::before {
  counter-increment: step; content: counter(step); position: absolute; left: 12px; top: 10px;
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #dfe6ef; color: var(--muted); font-weight: 800;
}
.check-list li.done::before { content: "✓"; background: var(--green); color: #fff; }
.address-box { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: #f4f7fb; }
.address-box code { flex: 1; overflow-wrap: anywhere; color: var(--blue); font-weight: 700; }

.section-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 20px; }
.class-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 20px; }
.class-browser { min-width: 0; display: grid; gap: 10px; align-content: start; }
.class-browser > .search-field {
  padding: 13px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; box-shadow: 0 4px 12px rgba(31,52,79,.035);
}
.class-browser > .search-result-count { padding: 0 4px; }
.class-list { display: grid; gap: 10px; align-content: start; }
.class-item {
  width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink); text-align: left;
}
.class-item strong, .class-item small { display: block; }
.class-item small { margin-top: 5px; color: var(--muted); }
.class-item:hover { border-color: #aac5e8; background: #fbfdff; }
.class-item.active { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.empty-state { padding: 60px 24px; color: var(--muted); text-align: center; }
.empty-state.compact { padding: 30px 14px; border: 1px dashed var(--line); border-radius: 14px; background: #fff; }
.empty-state.compact span { width: 42px; height: 42px; border-radius: 13px; font-size: 17px; }
.empty-state.large { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.empty-state span {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 18px; background: var(--blue-soft); color: var(--blue); font-size: 24px; font-weight: 800;
}
.empty-state h3 { color: var(--ink); margin-bottom: 4px; }
.table-wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
th { position: sticky; top: 0; background: #f6f8fb; color: var(--muted); z-index: 1; }
.text-button { padding: 4px 8px; border: 0; background: transparent; color: var(--blue); }
tbody tr:hover td { background: #f8fbff; }
.inactive-student-row { opacity: .62; }
.inactive-student-row:hover { opacity: .86; }
.roster-actions { flex-wrap: nowrap; }
.roster-status {
  display: inline-block; padding: 3px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 700;
}
.roster-status.active { background: var(--green-soft); color: var(--green); }
.roster-status.inactive { background: #edf0f4; color: var(--muted); }
.representative-manager { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 14px 0; padding: 12px; border: 1px solid #bad6ec; border-radius: 13px; background: #eef7ff; }
.representative-manager label { display: grid; grid-template-columns: minmax(105px,1fr) minmax(150px,1.4fr); gap: 10px; align-items: center; }
.representative-manager strong, .representative-manager small { display: block; }
.representative-manager small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.command-role-summary { margin: 0; padding: 8px 10px; border-radius: 10px; background: #eef7ff; color: #315b7c; }
.table-empty-search { padding: 34px 16px; color: var(--muted); text-align: center; }

.search-toolbar {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 13px; border: 1px solid var(--line);
  border-radius: 14px; background: #fff;
}
.search-field { min-width: 220px; flex: 1; }
.compact-field { min-width: 145px; }
.search-field > span, .compact-field > span {
  display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700;
}
.search-field input, .compact-field select { width: 100%; }
.search-result-count {
  min-width: max-content; margin-left: auto; padding: 0 3px 11px;
  color: var(--muted); font-size: 11px; line-height: 1.4;
}
.roster-search-toolbar { display: grid; grid-template-columns: minmax(220px,1fr) 150px auto; }
.seat-search-toolbar .search-field { max-width: 520px; }

.summary-strip {
  display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--muted); font-size: 13px;
}
.summary-strip strong { color: var(--ink); }
.room-shell { overflow-x: auto; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: #eaf0f7; }
.podium {
  width: 300px; margin: 0 auto 18px; padding: 9px; border-radius: 0 0 14px 14px;
  background: var(--nav); color: #fff; text-align: center; font-weight: 700;
}
.room-map { min-width: 900px; display: grid; grid-template-columns: repeat(4, minmax(190px,1fr)); gap: 16px 28px; align-items: start; }
.machine-column { display: grid; gap: 9px; }
.group-label { color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.machine-card {
  min-height: 83px; padding: 10px 11px; border: 2px solid transparent; border-radius: 13px;
  background: #fff; box-shadow: 0 3px 10px rgba(31,52,79,.05);
}
.machine-card.drag-over { border-color: var(--blue); background: var(--blue-soft); }
.machine-card.status-reserve { background: var(--yellow-soft); }
.machine-card.status-fault { background: var(--red-soft); }
.machine-card.status-repair { background: #f0ebff; }
.machine-card.status-disabled { background: #e5e8ec; opacity: .72; }
.machine-card.search-hit {
  border-color: var(--blue); box-shadow: 0 0 0 4px rgba(36,107,206,.16), 0 8px 18px rgba(31,52,79,.1);
}
.machine-card.search-dim { opacity: .26; }
.machine-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.machine-head strong { font-size: 13px; }
.machine-head button { border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.seat-slot {
  min-height: 24px; margin-top: 4px; padding: 4px 7px; border-radius: 7px;
  background: #edf3fa; color: var(--ink); font-size: 12px;
}
.seat-slot.empty { color: #9aa6b5; border: 1px dashed #ccd6e2; background: transparent; }
.seat-slot[draggable="true"] { cursor: grab; }
.seat-slot .lock { float: right; color: var(--yellow); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0 18px; color: var(--muted); font-size: 12px; }
.dot { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: var(--green); }
.dot.reserve { background: #e4a11b; }.dot.fault { background: var(--red); }.dot.repair { background: var(--purple); }.dot.disabled { background: #8993a0; }
.student-chip-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 46px; }
.student-chip { padding: 7px 10px; border: 1px solid #cdd9e7; border-radius: 999px; background: #f3f7fb; font-size: 12px; cursor: grab; }
.student-chip.search-hit { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); box-shadow: 0 0 0 3px rgba(36,107,206,.11); }
.student-chip.search-dim { opacity: .28; }
.student-chip.empty-message { border: 0; color: var(--muted); cursor: default; }

.registration-banner {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 20px;
  padding: 20px; border-radius: 18px; background: linear-gradient(135deg,#173a5e,#2d6ca8); color: #fff;
}
.registration-banner span, .registration-banner strong { display: block; text-align: center; }
.registration-banner span { color: #bed3e8; font-size: 12px; }
.registration-banner strong { margin-top: 7px; font-size: 24px; }
.count-badge { min-width: 30px; padding: 5px 9px; border-radius: 99px; background: var(--blue-soft); color: var(--blue); text-align: center; font-weight: 800; }
.stack-list { display: grid; gap: 10px; }
.stack-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe;
}
.stack-row strong, .stack-row small { display: block; }
.stack-row small { color: var(--muted); margin-top: 3px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.row-actions button { padding: 6px 9px; border-radius: 8px; font-size: 12px; }
.compact .stack-row { padding: 9px 11px; }

.identity-stats { margin-top: 0; }
.identity-machine-grid { display: grid; grid-template-columns: repeat(4,minmax(100px,1fr)); gap: 9px; }
.identity-cell { padding: 10px; border-radius: 11px; background: #f1f4f8; font-size: 12px; }
.identity-cell.confirmed { background: var(--green-soft); color: var(--green); }
.identity-cell.help { background: var(--yellow-soft); color: var(--yellow); }
.identity-cell.offline { background: var(--red-soft); color: var(--red); }
.identity-cell strong, .identity-cell span { display: block; }
.identity-cell span { margin-top: 4px; font-size: 11px; }

.classroom-toolbar { display: grid; grid-template-columns: 150px minmax(0,1fr); }
.classroom-toolbar > div:first-child h3 { white-space: nowrap; }
.classroom-toolbar .inline-actions { justify-content: flex-end; }
.classroom-toolbar select { max-width: 285px; }
.classroom-toolbar input { width: 180px; }
.classroom-toolbar .inline-actions button { padding-left: 12px; padding-right: 12px; }
.classroom-idle-card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 30px; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg,#173a5e,#2d6ca8); box-shadow: var(--shadow);
}
.classroom-idle-card h3 { margin: 0 0 8px; font-size: 24px; }
.classroom-idle-card p:not(.eyebrow) { margin: 0; color: #d5e5f6; line-height: 1.7; }
.recent-classrooms { margin-top: 20px; }
.classroom-session-strip {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px;
  overflow: hidden; margin-bottom: 18px; border-radius: 16px; background: #cfdbe9;
}
.classroom-session-strip div { min-width: 0; padding: 14px 16px; background: #173a5e; color: #fff; }
.classroom-session-strip span, .classroom-session-strip strong { display: block; }
.classroom-session-strip span { color: #bed3e8; font-size: 11px; }
.classroom-session-strip strong { overflow: hidden; margin-top: 5px; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.classroom-stats { margin-top: 0; }
.classroom-workspace { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 18px; align-items: start; }
.classroom-map-panel { overflow: hidden; }
.classroom-room-shell { padding: 12px; }
.classroom-room-map { min-width: 690px; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 12px; }
.classroom-machine {
  padding: 8px; border: 1px solid #d5dfeb; border-radius: 11px; background: #fff;
}
.classroom-machine.status-reserve { background: var(--yellow-soft); }
.classroom-machine.status-fault { background: var(--red-soft); }
.classroom-machine.status-repair { background: #f0ebff; }
.classroom-machine.status-disabled { opacity: .6; background: #e5e8ec; }
.classroom-machine-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.classroom-machine-head strong { font-size: 12px; }
.classroom-machine-head span { color: var(--muted); font-size: 9px; }
.classroom-seat {
  display: block; width: 100%; margin-top: 5px; padding: 7px 8px; border: 1px solid #dbe3ec;
  border-radius: 8px; background: #f7f9fc; color: var(--ink); text-align: left;
}
.classroom-seat span, .classroom-seat small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classroom-seat span { font-size: 12px; font-weight: 800; }
.classroom-seat small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.classroom-seat.present { border-color: #b6decf; background: var(--green-soft); }
.classroom-seat.missing { border-style: dashed; background: #f4f5f7; }
.classroom-seat.selected { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.classroom-seat.empty { color: #9aa6b5; cursor: default; }
.behavior-panel { position: sticky; top: 18px; }
.selected-students { display: flex; flex-wrap: wrap; gap: 6px; min-height: 43px; padding: 9px; border-radius: 11px; background: #f3f6fa; color: var(--muted); font-size: 12px; }
.selected-students span { padding: 6px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-weight: 700; }
.selected-students strong { color: var(--blue); }
.bulk-selection { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 8px; }
.bulk-selection button {
  min-height: 34px; padding: 6px; border: 1px solid #cbd9e9; border-radius: 8px;
  background: #f3f7fb; color: var(--blue); font-size: 11px; font-weight: 700;
}
.bulk-selection button:first-child { grid-column: span 2; background: var(--blue); color: #fff; }
.behavior-heading { margin: 18px 0 8px; font-size: 13px; }
.behavior-heading.positive { color: var(--green); }
.behavior-heading.correction { color: var(--red); }
.behavior-button-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.behavior-button {
  display: flex; align-items: center; justify-content: space-between; gap: 5px;
  min-height: 43px; padding: 8px 9px; border: 1px solid transparent; border-radius: 10px; text-align: left;
}
.behavior-button span { font-size: 11px; font-weight: 700; line-height: 1.35; }
.behavior-button strong { font-size: 13px; white-space: nowrap; }
.behavior-button.positive { border-color: #b9dfd0; background: var(--green-soft); color: var(--green); }
.behavior-button.correction { border-color: #f0cbd0; background: var(--red-soft); color: var(--red); }
.classroom-rankings { margin-top: 18px; }
.classroom-radar-overview{margin-bottom:18px;border:2px solid #bfd7eb;background:linear-gradient(135deg,#f8fcff,#edf6fd)}
.radar-heading{margin-bottom:12px}.radar-count-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.radar-count{display:grid;grid-template-columns:1fr auto auto;align-items:end;gap:5px;padding:13px 14px;border:2px solid #d5e2ed;border-radius:14px;background:#fff}.radar-count span{grid-column:1/-1;color:var(--muted);font-size:11px;font-weight:800}.radar-count strong{font-size:30px;line-height:1}.radar-count small{color:var(--muted)}.radar-count.working{border-color:#a8cdef;background:#edf7ff}.radar-count.working strong{color:#2673c9}.radar-count.submitted{border-color:#a8ddc3;background:#eaf8f0}.radar-count.submitted strong{color:#238352}.radar-count.help{border-color:#f0c66f;background:#fff7df}.radar-count.help strong{color:#9a5a00}.radar-count.attention{border-color:#eda8ae;background:#fff0f1}.radar-count.attention strong{color:#b6333f}.radar-priority-wrap{display:grid;grid-template-columns:90px 1fr;align-items:start;gap:12px;margin-top:13px}.radar-priority-wrap>strong{padding-top:10px;font-size:12px}.radar-priority-list{display:flex;gap:8px;overflow-x:auto}.radar-all-clear{display:block;width:100%;padding:10px 13px;border-radius:10px;background:#e8f6ed;color:#257149}.radar-priority-item{display:flex;min-width:250px;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:2px solid #d8e3ed;border-radius:11px;background:#fff}.radar-priority-item.help{border-color:#e8b958;background:#fff8e8}.radar-priority-item.attention{border-color:#e79aa2;background:#fff1f2}.radar-priority-item strong,.radar-priority-item small{display:block}.radar-priority-item small{margin-top:3px;color:var(--muted);font-size:10px}.radar-priority-item button{padding:7px 9px;font-size:10px}.radar-priority-item>span{color:#a3313c;font-size:10px;font-weight:800}.radar-legend{color:var(--muted);font-size:10px;white-space:nowrap}.radar-legend i{display:inline-block;width:9px;height:9px;margin-right:3px;border-radius:50%;background:#aab6c2}.radar-legend i.working{background:#4e9bdc}.radar-legend i.submitted{background:#45ad75}.radar-legend i.help{background:#e1a62f}.radar-legend i.attention{background:#dc5965}.machine-radar-note{overflow:hidden;margin-bottom:5px;padding:4px 6px;border-radius:6px;background:#eef3f8;color:#536b80;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.classroom-machine.radar-status-working{border:2px solid #78b6e7;background:#edf7ff}.classroom-machine.radar-status-submitted{border:2px solid #79c69f;background:#eaf8f0}.classroom-machine.radar-status-help{border:3px solid #e0a630;background:#fff7df;box-shadow:0 0 0 3px rgba(224,166,48,.15)}.classroom-machine.radar-status-attention{border:3px solid #d95864;background:#fff0f1;box-shadow:0 0 0 3px rgba(217,88,100,.13)}.classroom-seat.radar-working{border-color:#78b6e7;background:#e5f3ff}.classroom-seat.radar-submitted{border-color:#79c69f;background:#e3f6eb}.classroom-seat.radar-help{border-color:#e0a630;background:#fff2ce}.classroom-seat.radar-attention{border-color:#d95864;background:#ffe5e7}
.leaderboard-list { max-height: 410px; overflow: auto; display: grid; gap: 7px; }
.leaderboard-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px; background: #f7f9fc; }
.leaderboard-row.top { background: #fff8e6; }
.leaderboard-row strong, .leaderboard-row small { display: block; }
.leaderboard-row small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.leaderboard-row b { color: var(--green); }
.leaderboard-row b.negative, .negative { color: var(--red) !important; }
.rank-number { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #e8edf4; font-size: 12px; font-weight: 800; }
.leaderboard-row.top .rank-number { background: #ffcc66; color: #624100; }
.privacy-ranking { padding: 42px 18px; border-radius: 12px; background: #f5f7fa; color: var(--muted); text-align: center; }
.group-leaderboard { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.group-score-card { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #f8fafc; }
.group-score-card span, .group-score-card strong, .group-score-card small { display: block; }
.group-score-card strong { margin: 7px 0; color: var(--blue); font-size: 25px; }
.group-score-card small { color: var(--muted); }
.group-score-card.winner { border-color: #e8bf51; background: #fff8e6; }
.behavior-record-panel { margin-top: 18px; }
.behavior-record small { max-width: 900px; line-height: 1.55; }
.inline-score { margin-left: 4px; color: var(--green); }
.score-badge { padding: 5px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 800; }
.behavior-settings-list, .history-record-list { display: grid; gap: 8px; }
.behavior-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; }
.behavior-setting-row strong, .behavior-setting-row small { display: block; }
.behavior-setting-row small { margin-top: 3px; color: var(--muted); }
.behavior-setting-row.inactive { opacity: .55; }
.machine-manager-list { max-height: 56vh; overflow: auto; display: grid; gap: 7px; padding-right: 4px; }
.machine-setting-row {
  display: grid; grid-template-columns: 58px 120px minmax(0,1fr); align-items: center; gap: 8px;
  padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc;
}
.machine-setting-row strong { font-size: 12px; }
.machine-setting-row select, .machine-setting-row input { width: 100%; min-height: 36px; font-size: 12px; }
.classroom-history-summary { display: grid; gap: 6px; margin-bottom: 16px; padding: 14px; border-radius: 12px; background: #f3f6fa; }
.classroom-history-summary span { color: var(--muted); font-size: 12px; }
.history-record { padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.history-record strong, .history-record small { display: block; }
.history-record small { margin-top: 4px; color: var(--muted); line-height: 1.5; }

.history-filter-card {
  display: grid; grid-template-columns: minmax(180px,1.3fr) minmax(180px,1.3fr)
    minmax(140px,.8fr) minmax(140px,.8fr) auto auto;
  align-items: end; gap: 10px; padding: 16px; border: 1px solid var(--line);
  border-radius: 16px; background: #fff;
}
.history-filter-card label span {
  display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700;
}
.history-filter-card select, .history-filter-card input { width: 100%; }
.history-stats { margin-top: 18px; }
.history-layout {
  display: grid; grid-template-columns: minmax(560px,1.35fr) minmax(330px,.65fr);
  gap: 18px; align-items: start;
}
.history-student-tools {
  display: grid; grid-template-columns: minmax(190px,1fr) minmax(145px,.55fr) auto;
}
.history-table-wrap { max-height: 620px; }
.history-table td strong, .history-table td small { display: block; white-space: nowrap; }
.history-table td small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.history-session-list { max-height: 620px; overflow: auto; }
.history-session-row { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; }
.history-session-row > div:first-child { min-width: 0; }
.history-session-row > div:first-child strong,
.history-session-row > div:first-child small {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-session-row .row-actions { justify-content: space-between; }
.history-detail-panel { margin-top: 18px; }
.history-detail-panel h4 { margin: 0 0 12px; }
.history-detail-columns { align-items: start; }
.history-detail-columns > section {
  min-width: 0; max-height: 640px; overflow: auto; padding: 14px;
  border: 1px solid var(--line); border-radius: 13px; background: #fbfcfe;
}
.history-lesson-row > div:last-child { min-width: 120px; text-align: right; }

.assignment-idle { min-height: 300px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.recent-assignments-panel { margin-top: 18px; }
.assignment-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 18px; align-items: start; }
.assignment-list-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.assignment-list-heading { padding: 16px; border-bottom: 1px solid var(--line); background: #f6f8fb; }
.assignment-list-heading strong, .assignment-list-heading small { display: block; }
.assignment-list-heading small { margin-top: 4px; color: var(--muted); }
.assignment-list { display: grid; gap: 8px; padding: 10px; }
.assignment-list-item {
  display: grid; gap: 5px; width: 100%; padding: 12px; border: 1px solid var(--line);
  border-radius: 11px; background: #fff; color: var(--ink); text-align: left;
}
.assignment-list-item strong, .assignment-list-item small { display: block; }
.assignment-list-item small { color: var(--muted); font-size: 11px; }
.assignment-list-item.active { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 2px rgba(36,107,206,.1); }
.assignment-state { width: max-content; padding: 3px 7px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.assignment-state.open { background: var(--green-soft); color: var(--green); }
.assignment-state.closed { background: #edf0f4; color: var(--muted); }
.assignment-instructions { margin: -4px 0 16px; padding: 12px; border-radius: 11px; background: #f7f9fc; color: var(--muted); line-height: 1.7; white-space: pre-wrap; }
.assignment-task-files-block { margin: 0 0 16px; padding: 14px; border: 1px solid #c7dbf2; border-radius: 13px; background: #f2f7fd; }
.assignment-task-files-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.assignment-task-files-heading h4 { margin: 2px 0 0; }
.assignment-task-file-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 11px; }
.assignment-task-file {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; padding: 10px 11px; border: 1px solid #b9d3ee; border-radius: 10px;
  background: #fff; color: var(--ink); text-decoration: none;
}
.assignment-task-file:hover, .assignment-task-file:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,107,206,.1); }
.assignment-task-file span { min-width: 0; }
.assignment-task-file strong, .assignment-task-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-task-file small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.assignment-task-file b { flex: 0 0 auto; color: var(--blue); font-size: 11px; }
.assignment-stats { margin-bottom: 18px; }
.assignment-progress { margin-bottom: 20px; }
.assignment-progress section { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfe; }
.assignment-progress h4 { margin: 0 0 10px; }
.student-chip.submitted { border-color: #b9dfd0; background: var(--green-soft); color: var(--green); }
.submission-heading { display: flex; justify-content: space-between; align-items: end; margin-top: 10px; }
.submission-heading h4 { margin: 0 0 12px; font-size: 17px; }
.submission-list { display: grid; gap: 10px; }
.submission-card { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; }
.submission-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.submission-card-head strong, .submission-card-head small { display: block; }
.submission-card-head small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.submitted-mark { padding: 4px 8px; border-radius: 99px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 800; }
.submission-files { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.submission-file {
  min-width: 180px; padding: 8px 10px; border: 1px solid #cbd9e9; border-radius: 9px;
  background: #f1f6fc; color: var(--blue); text-decoration: none;
}
.submission-file span, .submission-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submission-file small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.assignment-publish-form textarea { min-height: 92px; }
.assignment-file-section { padding: 13px; border: 1px solid #cadcf0; border-radius: 13px; background: #f5f9fe; }
.assignment-file-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.assignment-file-section-heading strong, .assignment-file-section-heading small { display: block; }
.assignment-file-section-heading small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.assignment-file-picker {
  display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 4px 10px;
  padding: 11px; border: 1px dashed #8fb3da; border-radius: 11px; background: #fff; cursor: pointer;
}
.form-grid .assignment-file-picker span { display: block; margin: 0; color: var(--ink); font-size: 12px; }
.form-grid .assignment-file-picker span small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.form-grid .assignment-file-picker .assignment-file-picker-icon {
  grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-weight: 800;
}
.assignment-file-picker input { grid-column: 1 / -1; width: 100%; min-height: auto; margin-top: 5px; padding: 5px; border: 0; background: transparent; }
.assignment-file-summary { display: grid; gap: 6px; margin-top: 8px; }
.assignment-file-empty { padding: 8px 10px; color: var(--muted); font-size: 11px; text-align: center; }
.assignment-draft-file { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid #d6e2ef; border-radius: 9px; background: #fff; }
.assignment-draft-file > span { min-width: 0; }
.assignment-draft-file strong, .assignment-draft-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-draft-file small { margin-top: 2px; color: var(--muted); font-size: 10px; }

.modal-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(18,34,51,.45);
}
.modal-card { width: 620px; max-width: 100%; max-height: 88vh; overflow: auto; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.modal-card header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); background: #fff; z-index: 1; }
.modal-card header h3 { margin: 0; }
#modalBody { padding: 22px; }
.modal-form { display: grid; gap: 13px; }
.modal-form > label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.modal-form > label input, .modal-form > label select { width: 100%; }
.two-field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.two-field-row label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.two-field-row input { width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.backup-privacy-note {
  padding: 10px 12px; border-radius: 10px; background: var(--yellow-soft);
  color: #7a4b00; font-size: 12px; line-height: 1.6;
}
.form-grid { display: grid; gap: 14px; }
.form-grid label span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.form-grid input, .form-grid select { width: 100%; }
.preview-box { max-height: 240px; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.preview-box p { margin: 5px 0; font-size: 13px; }
.template-choice-list { display: grid; gap: 9px; margin-top: 14px; }
.template-choice {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); text-align: left;
}
.template-choice:hover { border-color: #a9c5e8; background: #f8fbff; }
.template-choice span, .template-choice strong, .template-choice small { display: block; }
.template-choice small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.template-choice b { color: var(--blue); font-size: 12px; }
.lesson-suggestion-card {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  margin-bottom: 18px; padding: 20px 22px; border: 1px solid #b8d3f0; border-radius: 18px;
  background: linear-gradient(135deg,#eff7ff,#f8fbff); box-shadow: 0 8px 24px rgba(36,107,206,.08);
}
.lesson-suggestion-card small, .lesson-suggestion-card strong { display: block; }
.lesson-suggestion-card small { color: var(--blue); font-weight: 800; }
.lesson-suggestion-card strong { margin-top: 5px; font-size: 21px; }
.lesson-suggestion-card p { margin: 7px 0 0; color: var(--muted); line-height: 1.6; }
.lesson-suggestion-card button { flex: 0 0 auto; }
.lesson-plan-list { display: grid; gap: 11px; }
.lesson-plan-row {
  display: grid; grid-template-columns: 64px minmax(0,1fr) 150px; gap: 15px; align-items: start;
  padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.lesson-plan-row.suggested { border-color: #7fb0e5; background: #f5faff; box-shadow: 0 0 0 2px rgba(36,107,206,.08); }
.lesson-plan-row.archived { background: #f6f7f9; opacity: .72; }
.lesson-sequence { display: grid; justify-items: center; padding: 7px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); }
.lesson-sequence span { font-size: 10px; font-weight: 700; }
.lesson-sequence strong { font-size: 24px; line-height: 1.05; }
.lesson-plan-content { min-width: 0; }
.lesson-plan-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lesson-plan-title > strong { font-size: 17px; }
.lesson-plan-content > small { display: block; margin-top: 5px; color: var(--muted); }
.lesson-plan-content > p { margin: 10px 0 0; line-height: 1.65; }
.lesson-student-task { margin-top: 9px; padding: 9px 10px; border-radius: 9px; background: #f3f7fc; color: #304b68; font-size: 12px; line-height: 1.65; }
.lesson-note { margin-top: 9px; padding: 8px 10px; border-radius: 9px; background: var(--yellow-soft); color: #74501a; font-size: 12px; }
.lesson-done { padding: 4px 8px; border-radius: 99px; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 800; }
.lesson-plan-actions { display: grid; gap: 7px; }
.lesson-plan-actions button { width: 100%; }
.lesson-detail-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.lesson-detail-heading span, .lesson-detail-heading b { padding: 4px 8px; border-radius: 99px; font-size: 10px; }
.lesson-detail-heading span { background: var(--blue-soft); color: var(--blue); font-weight: 800; }
.lesson-detail-heading strong { font-size: 14px; }
.lesson-detail-heading b { background: var(--green-soft); color: var(--green); }
.lesson-detail-block { margin-top: 11px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; }
.lesson-detail-block h4 { margin: 0 0 7px; color: #243d58; }
.lesson-detail-block p { margin: 0; line-height: 1.75; }
.lesson-detail-block.task { border-color: #bfd6ee; background: #f3f8fe; }
.lesson-detail-block.flow { border-color: #cad7e6; background: #f8fafc; }
.lesson-detail-block.criteria { border-color: #b9dfd0; background: var(--green-soft); }
.lesson-detail-block.note { border-color: #ecd39a; background: var(--yellow-soft); }
.lesson-detail-template { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #f1f3f6; color: var(--muted); }
.toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: 360px;
  padding: 12px 16px; border-radius: 12px; background: #1c2d42; color: #fff; box-shadow: var(--shadow);
}

.student-body {
  min-height: 100vh; background:
    radial-gradient(circle at 15% 10%, rgba(50,123,220,.16), transparent 34%),
    linear-gradient(160deg,#eff5fb,#f9fbfd);
}
.student-shell { width: 760px; max-width: calc(100% - 28px); margin: 0 auto; padding: 22px 0; }
.student-header, .student-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.student-brand { display: flex; align-items: center; gap: 10px; }
.student-footer { padding: 14px 6px; color: var(--muted); font-size: 12px; }
.student-footer a { color: inherit; text-decoration: none; }
.student-footer a:hover, .student-footer a:focus { text-decoration: underline; }
.student-card-large {
  min-height: 520px; margin-top: 18px; padding: 44px; border: 1px solid rgba(255,255,255,.9);
  border-radius: 28px; background: rgba(255,255,255,.95); box-shadow: var(--shadow); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.student-card-large h1 { margin: 6px 0 10px; font-size: 34px; }
.student-lead { max-width: 520px; color: var(--muted); font-size: 17px; line-height: 1.8; }
.waiting-orbit { width: 74px; height: 74px; margin-bottom: 22px; border: 4px solid #dce8f7; border-top-color: var(--blue); border-radius: 50%; animation: spin 1.1s linear infinite; }
.waiting-orbit span { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.browser-warning { margin-top: 18px; padding: 15px 18px; border-radius: 14px; background: var(--yellow-soft); color: #7a4b00; }
.browser-warning p { margin: 5px 0 0; }
.registration-form { width: 360px; max-width: 100%; display: grid; gap: 12px; margin-top: 12px; }
.registration-form select, .registration-form input, .registration-form button { width: 100%; min-height: 52px; font-size: 17px; }
.registration-error { margin: 0; padding: 10px 12px; border: 1px solid #ef9da4; border-radius: 10px; background: #fff0f1; color: #a92331; font-size: 14px; font-weight: 800; line-height: 1.55; }
.machine-number { margin: 4px 0 12px; color: var(--blue); font-size: 54px; font-weight: 800; }
.identity-options { width: 440px; max-width: 100%; display: grid; gap: 12px; margin-top: 20px; }
.identity-button {
  width: 100%; min-height: 60px; padding: 12px 18px; border: 1px solid #bfd2ea;
  border-radius: 15px; background: #f0f6fd; color: var(--ink); font-size: 18px; font-weight: 800;
}
.identity-button:hover { border-color: var(--blue); background: var(--blue-soft); }
.identity-button.together { background: var(--green-soft); border-color: #a9dac5; color: var(--green); }
.student-help-button { margin-top: 16px; border: 0; background: transparent; color: var(--blue); font-weight: 700; }
.student-help-chooser{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(12,35,55,.72)}.student-help-dialog{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(620px,96%);padding:24px;border-radius:22px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.28)}.student-help-dialog h2,.student-help-dialog p{grid-column:1/-1;margin:0}.student-help-dialog p{margin-bottom:6px;color:var(--muted)}.student-help-dialog button{min-height:62px;border:2px solid #b9d5ed;border-radius:14px;background:#eef7ff;color:#17324d;font:inherit;font-size:17px;font-weight:800}.student-help-dialog button.cancel{grid-column:1/-1;min-height:44px;border-color:#d9e0e7;background:#f4f6f8;color:#68798a}
.confirmed-panel { padding: 22px; border-radius: 18px; background: var(--green-soft); color: var(--green); }
.confirmed-panel strong { display: block; font-size: 24px; }
.student-score-grid { width: 440px; max-width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.student-score-card { padding: 18px; border: 1px solid #b9dfd0; border-radius: 15px; background: var(--green-soft); }
.student-score-card span, .student-score-card strong { display: block; }
.student-score-card span { font-weight: 700; }
.student-score-card strong { margin-top: 8px; color: var(--green); font-size: 26px; }
.student-no-assignment { width: 520px; max-width: 100%; margin-top: 24px; padding: 14px; border-radius: 12px; background: #f4f6f9; color: var(--muted); }
.student-assignment-section { width: 620px; max-width: 100%; margin-top: 30px; text-align: left; }
.student-assignment-section h2 { margin: 0 0 12px; text-align: center; }
.student-assignment-card { margin-top: 12px; padding: 18px; border: 1px solid #cbd9e9; border-radius: 16px; background: #f8fbff; }
.student-assignment-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.student-assignment-head span, .student-assignment-head strong { display: block; }
.student-assignment-head span { color: var(--blue); font-size: 11px; font-weight: 800; }
.student-assignment-head strong { margin-top: 4px; font-size: 19px; }
.student-assignment-head b { padding: 5px 8px; border-radius: 99px; background: var(--green-soft); color: var(--green); font-size: 11px; white-space: nowrap; }
.student-assignment-card > p { margin: 12px 0 6px; color: var(--ink); line-height: 1.65; white-space: pre-wrap; }
.student-assignment-card > small { color: var(--muted); line-height: 1.5; }
.student-task-files { display: grid; gap: 8px; margin: 14px 0; padding: 12px; border: 1px solid #c9ddf5; border-radius: 13px; background: #eef6ff; }
.student-task-files-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.student-task-files-heading strong { color: var(--blue); font-size: 14px; }
.student-task-files-heading small { color: var(--muted); font-size: 11px; text-align: right; }
.student-task-file { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #b8d3f0; border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none; }
.student-task-file:hover, .student-task-file:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28,108,199,.12); }
.student-task-file span { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.student-task-file b { flex: 0 0 auto; color: var(--blue); font-size: 12px; }
.student-assignment-form { display: grid; gap: 10px; margin-top: 14px; }
.submission-student-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.submission-student-choices label { padding: 7px 9px; border-radius: 9px; background: #eef3f9; font-size: 13px; }
.student-file-picker { display: grid; gap: 6px; padding: 10px; border: 1px dashed #9fb9d8; border-radius: 11px; background: #fff; }
.student-file-picker span { color: var(--blue); font-size: 12px; font-weight: 800; }
.student-file-picker input { min-height: auto; padding: 4px; border: 0; }
.assignment-upload-state { min-height: 20px; color: var(--muted); font-size: 12px; text-align: center; }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 220px 1fr; }
  .main-panel { padding-left: 22px; padding-right: 22px; }
  .two-column { grid-template-columns: 1fr; }
  .hero-card { grid-template-columns: 1fr 260px; }
  .classroom-workspace { grid-template-columns: 1fr; }
  .behavior-panel { position: static; }
  .assignment-layout { grid-template-columns: 230px minmax(0,1fr); }
  .history-filter-card { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .history-layout { grid-template-columns: 1fr; }
  .classroom-next-action { grid-template-columns: 1fr 1fr; }
  .classroom-next-action button { grid-column: 1 / -1; }
  .roster-search-toolbar { grid-template-columns: minmax(180px,1fr) 135px; }
  .roster-search-toolbar .search-result-count { grid-column: 1 / -1; margin-left: 0; padding-bottom: 0; }
  .global-class-status { grid-template-columns: 1.1fr .7fr .65fr 1fr; }
  .global-status-item.help-item { border-radius: 4px 4px 4px 12px; }
  .global-end-button { border-radius: 4px 4px 12px 4px; }
}
@media (max-width: 780px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; }
  .nav-list { grid-template-columns: repeat(2,1fr); }
  .nav-item { min-height: 60px; }
  .sidebar-bottom { display: none; }
  .main-panel { padding: 0 14px 40px; }
  .hero-card, .class-layout { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .section-toolbar, .topbar { align-items: flex-start; flex-direction: column; }
  .global-search { width: 100%; margin-left: 0; }
  .global-class-status { position: sticky; top: 4px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .global-class-main { border-radius: 12px 4px 4px 4px; }
  .global-status-item, .global-end-button { border-radius: 4px; }
  .global-end-button { border-radius: 4px 4px 12px 4px; }
  .context-nav { align-items: flex-start; flex-direction: column; gap: 10px; }
  .context-heading { width: 100%; padding: 0 0 9px; border-right: 0; border-bottom: 1px solid var(--line); }
  .classroom-toolbar { display: flex; }
  .classroom-toolbar .inline-actions { justify-content: flex-start; }
  .classroom-session-strip { grid-template-columns: repeat(2,1fr); }
  .classroom-flow-steps { overflow-x: auto; padding-bottom: 5px; }
  .classroom-next-action { grid-template-columns: 1fr; }
  .classroom-next-action button { grid-column: auto; }
  .closure-check-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .classroom-idle-card { align-items: flex-start; flex-direction: column; }
  .assignment-layout { grid-template-columns: 1fr; }
  .lesson-suggestion-card { align-items: flex-start; flex-direction: column; }
  .lesson-plan-row { grid-template-columns: 54px minmax(0,1fr); }
  .lesson-plan-actions { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .assignment-task-file-list { grid-template-columns: 1fr; }
  .assignment-file-section-heading, .student-task-files-heading { align-items: flex-start; flex-direction: column; }
  .history-filter-card { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .roster-search-toolbar, .history-student-tools { grid-template-columns: 1fr 1fr; }
  .roster-search-toolbar .search-field, .history-student-tools .search-field { grid-column: 1 / -1; }
  .roster-search-toolbar .search-result-count, .history-student-tools .search-result-count {
    grid-column: 1 / -1; margin-left: 0; padding-bottom: 0;
  }
  .seat-search-toolbar .search-field { min-width: 100%; max-width: none; flex-basis: 100%; }
  .seat-search-toolbar .search-result-count { width: 100%; margin-left: 0; padding-bottom: 0; }
  .history-lesson-row { align-items: flex-start; flex-direction: column; }
  .history-lesson-row > div:last-child { min-width: 0; text-align: left; }
  .registration-banner { grid-template-columns: 1fr; }
  .identity-machine-grid { grid-template-columns: repeat(2,1fr); }
  .student-card-large { min-height: 480px; padding: 28px 18px; }
}
.student-activity-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:20px 0;padding:20px;border:2px solid #9ac9f1;border-radius:18px;background:#edf7ff}.student-activity-card h2{margin:5px 0}.student-activity-card p{margin:4px 0;color:#547088}.activity-label{font-weight:700;color:#2673c9}.student-activity-start{white-space:nowrap;text-decoration:none;background:#2673c9;color:#fff;border-radius:14px;padding:14px 22px;font-size:19px;font-weight:700}.classroom-activity-panel{margin:16px 0}.activity-classroom-summary{display:flex;gap:20px;align-items:center;margin:10px 0 16px}.activity-classroom-summary strong{font-size:22px}.activity-result-chips{display:flex;gap:8px;flex-wrap:wrap}.activity-result-chips span{background:#eef4fa;border-radius:999px;padding:7px 12px}.activity-result-chips span.passed{background:#e1f5e8;color:#237344}.activity-result-chips span.missing{background:#fff0dd;color:#9a5a00}@media(max-width:650px){.student-activity-card{align-items:stretch;flex-direction:column}.student-activity-start{text-align:center}}

.group-leader-wrap { margin-top: 14px; padding: 14px; border: 1px solid #c8d7e7; border-radius: 14px; background: #f8fbfe; }
.group-leader-wrap > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.group-leader-wrap > div:first-child small { color: var(--muted); }
.group-leader-board { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 11px; }
.group-leader-card { display: grid; grid-template-columns: minmax(110px,1fr) minmax(145px,1.3fr) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid #d9e3ed; border-radius: 11px; background: #fff; }
.group-leader-card strong, .group-leader-card small { display: block; }
.group-leader-card small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.group-leader-card select { width: 100%; min-width: 0; }
.radar-priority-item.report { border-color: #d8c6ee; background: #faf6ff; }
.radar-priority-item.report strong { color: #6f42a6; }

.student-score-card small { display: block; margin-top: 5px; color: #426555; font-size: 12px; font-weight: 700; }
.student-class-progress, .student-group-panel { width: 620px; max-width: 100%; margin-top: 20px; padding: 18px; border: 1px solid #cbd9e9; border-radius: 17px; background: #f8fbff; text-align: left; }
.student-group-head small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.student-class-progress.waiting { color: var(--muted); }
.student-class-progress.waiting span, .student-class-progress.waiting strong { display: block; }
.student-class-progress.waiting strong { margin-top: 4px; color: var(--ink); }
.student-progress-head, .student-group-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.student-progress-head span, .student-progress-head strong, .student-group-head span, .student-group-head strong { display: block; }
.student-progress-head span, .student-group-head span { color: var(--blue); font-size: 11px; font-weight: 800; }
.student-progress-head strong, .student-group-head strong { margin-top: 4px; font-size: 17px; }
.student-progress-head b, .student-group-head b { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green); }
.student-progress-meter { height: 10px; margin: 14px 0; overflow: hidden; border-radius: 999px; background: #dfe8f1; }
.student-progress-meter i { display: block; height: 100%; border-radius: inherit; background: #31a46c; transition: width .25s ease; }
.student-class-progress details { border-top: 1px solid #dde6ef; padding-top: 10px; }
.student-class-progress summary { cursor: pointer; color: var(--blue); font-weight: 800; }
.student-progress-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.student-progress-list > div { padding: 10px; border-radius: 11px; background: #fff; }
.student-progress-list p, .student-group-members { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.student-progress-list p span, .student-group-members span { padding: 5px 8px; border-radius: 999px; font-size: 12px; }
.student-progress-list span.done, .student-group-members span.done { background: var(--green-soft); color: var(--green); }
.student-progress-list span.missing, .student-group-members span.pending { background: #f0f2f5; color: #68798a; }
.student-group-panel { border-color: #cfc4ee; background: #fbf9ff; }
.student-group-members { padding: 12px 0; }
.leader-badge { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: #eee7ff; color: #68429b; font-weight: 800; }
.group-leader-tools { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; margin-top: 12px; }
.group-help-box, .group-report-form { padding: 13px; border: 1px solid #ded5ef; border-radius: 12px; background: #fff; }
.group-help-box h3, .group-report-form h3 { margin: 0 0 9px; font-size: 15px; }
.group-help-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid #edf0f4; }
.group-help-row:first-of-type { border-top: 0; }
.group-help-row strong, .group-help-row small { display: block; }
.group-help-row small { margin-top: 3px; color: var(--muted); }
.group-help-row button { flex: 0 0 auto; }
.group-all-clear { margin: 0; color: var(--green); }
.group-report-form { display: grid; gap: 8px; }
.group-report-form p { margin: -3px 0 2px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.group-report-form select, .group-report-form input { width: 100%; }
.student-quick-help { position: sticky; bottom: 12px; z-index: 5; margin-top: 24px; padding: 14px 22px; border: 2px solid #e39b63; border-radius: 999px; background: #fff7ed; color: #9b4d13; box-shadow: 0 8px 22px rgba(96,56,20,.16); font-size: 15px; }

@media (max-width: 780px) {
  .group-leader-board { grid-template-columns: 1fr; }
  .group-leader-card { grid-template-columns: minmax(100px,1fr) minmax(130px,1.3fr) auto; }
  .group-leader-tools, .student-progress-list { grid-template-columns: 1fr; }
}

/* 里程碑U：四入口课堂指挥台 */
.context-nav { display: none !important; }
.teacher-body .topbar { margin-bottom: 14px; }
.teacher-body .view-section { animation: command-view-in .16s ease-out; }
@keyframes command-view-in { from { opacity: .65; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.hero-card { grid-template-columns: minmax(0,1fr) 330px; padding: 30px 34px; border-radius: 22px; }
.hero-card .hero-actions { display: grid; gap: 8px; }
.hero-card .hero-actions label { margin-top: 2px; color: #dcecff; font-size: 11px; font-weight: 800; }
.hero-card .hero-actions input,
.hero-card .hero-actions select { width: 100%; min-height: 42px; }
.hero-card .hero-actions button { width: 100%; }

.preparation-overview { margin-bottom: 18px; }
.prepare-class-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.prepare-class-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 12px; align-items: center; padding: 15px; border: 1px solid #d6e1ec; border-left: 4px solid #e2a631; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(37,65,91,.05); }
.prepare-class-card.ready { border-left-color: #37a96c; }
.prepare-class-card > div:first-child strong,
.prepare-class-card > div:first-child span { display: block; }
.prepare-class-card > div:first-child span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.prepare-class-card .prepare-next { grid-row: 1 / span 2; grid-column: 2; padding: 8px 11px; white-space: nowrap; }
.prepare-steps { display: flex; gap: 5px; }
.prepare-steps i { padding: 4px 7px; border-radius: 999px; background: #eef2f6; color: #7a8997; font-size: 10px; font-style: normal; font-weight: 800; }
.prepare-steps i.done { background: #e2f5e9; color: #238352; }
.prepare-empty { grid-column: 1 / -1; display: grid; gap: 5px; padding: 24px; border: 2px dashed #cbd9e7; border-radius: 16px; color: var(--muted); text-align: center; }
.prepare-empty strong { color: var(--ink); font-size: 18px; }

.settings-hub-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.settings-hub-card { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 4px 13px; align-items: center; min-height: 120px; padding: 19px; border: 1px solid #cfdeeb; border-radius: 17px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 6px 18px rgba(35,61,84,.06); cursor: pointer; }
.settings-hub-card:hover { border-color: #76aede; transform: translateY(-1px); }
.settings-hub-card > span { grid-row: 1 / span 2; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #e9f3fc; color: #246da9; font-size: 20px; font-weight: 900; }
.settings-hub-card strong { align-self: end; font-size: 16px; }
.settings-hub-card small { align-self: start; color: var(--muted); line-height: 1.5; }
.role-name-search { margin: 14px 0 18px; padding: 14px; border: 1px solid #bed8ec; border-radius: 14px; background: #f3f9fe; }
.role-name-search label { display: grid; gap: 7px; }
.role-name-search input { width: 100%; }
.role-search-results { display: grid; gap: 7px; margin-top: 10px; max-height: 260px; overflow-y: auto; }
.role-search-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 10px; background: #fff; }
.role-search-row span { display: grid; gap: 2px; }
.role-search-row small { color: var(--muted); }
.role-search-row > div { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.role-search-row button { padding: 6px 8px; border: 1px solid #aacbe5; border-radius: 8px; background: #edf6fd; color: #1f6198; cursor: pointer; }
.diagnostic-address-card { margin-bottom: 16px; }
.diagnostic-summary { display: grid; gap: 9px; margin-top: 14px; }
.diagnostic-summary > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #f5f8fa; }
.diagnostic-steps { display: grid; gap: 10px; padding-left: 28px; }
.diagnostic-steps li { padding: 10px 12px; }
.diagnostic-steps li b, .diagnostic-steps li span { display: block; }
.diagnostic-steps li span { margin-top: 4px; color: var(--muted); line-height: 1.65; }
.search-target { outline: 3px solid #f0a000; outline-offset: 2px; }
.danger-text { color: #b42318 !important; }
.danger-confirm-box { margin-bottom: 14px; padding: 14px; border: 1px solid #efb3ad; border-radius: 12px; background: #fff3f2; color: #7f1d1d; }
.danger-confirm-box p { margin: 7px 0 0; line-height: 1.55; }

.classroom-radar-overview { margin-bottom: 14px; border-color: #c4d8e9; box-shadow: 0 7px 22px rgba(37,64,89,.07); }
.radar-count { appearance: none; width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.radar-count:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(36,65,90,.09); }
.radar-count.active { outline: 3px solid rgba(40,111,174,.2); box-shadow: 0 0 0 2px #397fb8 inset; }
.group-leader-wrap { display: none; }
.classroom-flow-card,
.classroom-stats,
.classroom-rankings,
.behavior-record-panel { display: none; }
.classroom-workspace { grid-template-columns: minmax(720px,1fr) 350px; gap: 14px; }
.classroom-map-panel { padding: 16px; }
.classroom-room-shell { overflow-x: auto; }
.classroom-room-map { min-width: 700px; gap: 10px 14px; }
.classroom-machine { transition: opacity .15s ease, filter .15s ease, transform .15s ease; }
.classroom-machine.radar-filtered-out { opacity: .22; filter: grayscale(.8); }
.classroom-seat.radar-filtered-out { opacity: .38; }
.behavior-panel { top: 92px; padding: 14px; }
.command-task-card { display: grid; gap: 8px; margin: -2px -2px 16px; padding: 15px; border: 1px solid #a9cceb; border-radius: 14px; background: linear-gradient(145deg,#eef7ff,#fff); }
.command-task-card h3 { margin: 2px 0 0; font-size: 17px; }
.command-task-card > strong { color: #246da9; font-size: 13px; }
.command-task-card > p { margin: 0; font-size: 11px; line-height: 1.55; }
.command-task-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.command-task-actions button:first-child { grid-column: 1 / -1; }
.bulk-selection { position: sticky; top: 0; z-index: 2; padding: 8px 0; background: #fff; }
.command-modal-summary h3 { margin: 10px 0 5px; font-size: 22px; }
.command-modal-summary > p { color: var(--muted); line-height: 1.6; }
.command-modal-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.command-modal-columns section { min-width: 0; padding: 13px; border-radius: 12px; background: #f6f9fc; }
.command-modal-columns h4,
.command-modal-files h4 { margin: 0 0 10px; }
.command-modal-files { margin-top: 14px; }
.group-manager-list { display: grid; gap: 10px; margin-top: 14px; }
.group-manager-row { display: grid; grid-template-columns: minmax(130px,1fr) minmax(200px,1.5fr); gap: 12px; align-items: center; padding: 12px; border: 1px solid #d8e2ec; border-radius: 12px; background: #f8fbfe; }
.group-manager-row strong,
.group-manager-row small { display: block; }
.group-manager-row small { margin-top: 4px; color: var(--muted); }
.post-class-pending { margin-bottom: 16px; border-color: #e7cf98; background: linear-gradient(155deg,#fffdf7,#fff); }
.pending-record-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.pending-record-card { display: grid; gap: 4px; min-width: 0; padding: 12px; border: 1px solid #dbe3eb; border-radius: 12px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.pending-record-card:hover { border-color: #d3a844; background: #fffaf0; }
.pending-record-card span { color: #996400; font-size: 10px; font-weight: 900; }
.pending-record-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-record-card small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1250px) {
  .prepare-class-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-hub-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pending-record-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .classroom-workspace { grid-template-columns: 1fr; }
  .behavior-panel { position: static; }
}
@media (max-width: 780px) {
  .hero-card,
  .prepare-class-grid,
  .settings-hub-grid,
  .command-modal-columns { grid-template-columns: 1fr; }
  .pending-record-grid { grid-template-columns: 1fr; }
  .radar-count-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .radar-count:last-child { grid-column: 1 / -1; }
  .group-manager-row { grid-template-columns: 1fr; }
}
/* 里程碑Z基础能力：班级续教提醒、七个科技小队与固定换座 */
.last-lesson-reminder {
  margin: 18px 0;
  border-left: 5px solid #2f6fd0;
  background: linear-gradient(135deg, #f7fbff 0%, #eef5ff 100%);
}
.last-lesson-reminder-body {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.7fr);
  gap: 12px;
}
.lesson-reminder-block {
  padding: 14px 16px;
  border: 1px solid #d9e6f8;
  border-radius: 12px;
  background: #fff;
}
.lesson-reminder-block.next {
  border-color: #8dc4a1;
  background: #f3fbf5;
}
.lesson-reminder-block span,
.teaching-note-card span {
  display: block;
  color: #607089;
  font-size: 12px;
  margin-bottom: 5px;
}
.lesson-reminder-block strong { line-height: 1.55; }
.teaching-note-history { margin: 16px 0; }
.teaching-note-list,
.fixed-seat-change-list { display: grid; gap: 10px; }
.teaching-note-card,
.fixed-seat-change-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid #e1e7ef;
  border-radius: 12px;
  background: #fff;
}
.teaching-note-card > div:first-child,
.fixed-seat-change-row > div:first-child { flex: 1; min-width: 0; }
.teaching-note-card p,
.fixed-seat-change-row p { margin: 6px 0 0; line-height: 1.55; }
.teaching-note-next {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #edf8f0;
  color: #245f35;
}
.fixed-seat-change-panel { margin: 14px 0; }
.lesson-wrapup-fields {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #cfe0f5;
  border-radius: 12px;
  background: #f7fbff;
}
.lesson-wrapup-fields h4 { margin: 0 0 4px; }
.lesson-wrapup-fields label { display: grid; gap: 5px; margin-top: 10px; }
.fixed-seat-change-row small { display: block; margin-top: 4px; color: #6b778b; }
.team-range-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #edf3ff;
  color: #315b9c;
  font-size: 12px;
}
@media (max-width: 900px) {
  .last-lesson-reminder-body { grid-template-columns: 1fr; }
  .teaching-note-card,
  .fixed-seat-change-row { flex-direction: column; }
}

.teaching-note-reuse {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(260px, 1.7fr);
  gap: 12px;
  align-items: end;
  padding: 13px 14px;
  border: 1px solid #c9dcf5;
  border-radius: 12px;
  background: #f2f7ff;
}
.teaching-note-reuse > div:first-child { display: grid; gap: 4px; }
.teaching-note-reuse small { color: var(--muted); }
.teaching-note-reuse-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.teaching-note-reuse select { min-width: 0; }
.draft-restored-tip {
  padding: 9px 12px;
  border-radius: 9px;
  background: #eaf8ef;
  color: #25613b;
  font-weight: 700;
}
.export-format-help {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f5f7fa;
  color: var(--muted);
}
.export-format-help strong { color: var(--ink); }
.danger-explanation {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #efb1b1;
  border-radius: 12px;
  background: #fff2f2;
}
.danger-explanation strong { color: #a42626; }
.danger-explanation p { margin: 7px 0 0; color: #774848; line-height: 1.6; }
@media (max-width: 760px) {
  .teaching-note-reuse,
  .teaching-note-reuse-controls { grid-template-columns: 1fr; }
}