:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #172033;
  background: #f5f7fb;
  --blue: #1769e0;
  --blue-dark: #0d55bd;
  --blue-soft: #eaf2ff;
  --border: #dce3ec;
  --muted: #667085;
  --danger: #c9362b;
  --success: #087a55;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f5f7fb; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--blue); }
[hidden] { display: none !important; }

.topbar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 7px; }
.top-note { color: var(--muted); font-size: 13px; }

.page { width: min(1120px, calc(100% - 32px)); margin: 28px auto 48px; }
.page.narrow { width: min(720px, calc(100% - 32px)); max-width: 720px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 8px rgba(16, 24, 40, .04); }
.card-pad { padding: 24px; }
.stack { display: grid; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.space-between { justify-content: space-between; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: 26px; line-height: 1.35; }
h2 { margin-bottom: 14px; font-size: 19px; }
h3 { margin-bottom: 6px; font-size: 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: Consolas,, "SFMono-Regular", monospace; overflow-wrap: anywhere; }
.flush { margin: 0; }
.mt-7 { margin-top: 7px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }

.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status.open, .status.success { color: #087a55; background: #e8f7f1; }
.status.closed, .status.history { color: #667085; background: #eef1f5; }
.status.latest { color: #1459ba; background: var(--blue-soft); }
.status.warning { color: #8a4b08; background: #fff3df; white-space: normal; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.notice { padding: 12px 14px; border: 1px solid #bfd4f7; border-radius: 7px; color: #194d91; background: #f1f6ff; line-height: 1.65; }
.notice.error { color: #9d2c24; border-color: #efc0bc; background: #fff5f4; }
.notice.success { color: #086a4b; border-color: #a8dcca; background: #effbf6; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
label { font-size: 14px; font-weight: 700; }
.required::after { content: " *"; color: var(--danger); }
input, select, textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 11px;
  color: #172033;
  background: #fff;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,105,224,.12); }
textarea { min-height: 92px; resize: vertical; }

.file-box { padding: 16px; border: 1px dashed #9db8df; border-radius: 7px; background: #f8fbff; }
.file-box label { display: block; margin-bottom: 9px; }
.file-box input { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.file-list { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.file-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }

.btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
}
.btn.primary { color: #fff; background: var(--blue); }
.btn.primary:hover { background: var(--blue-dark); }
.btn.secondary { color: #344054; border-color: #cbd5e1; background: #fff; }
.btn.secondary:hover { background: #f7f9fc; }
.btn.danger { color: var(--danger); border-color: #e7b5b0; background: #fff; }
.btn.small-btn { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.icon { width: 17px; height: 17px; }

.progress { width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 5px; background: #e6ebf2; appearance: none; }
.progress::-webkit-progress-bar { background: #e6ebf2; border-radius: 5px; }
.progress::-webkit-progress-value { background: var(--blue); border-radius: 5px; transition: width .15s linear; }
.progress::-moz-progress-bar { background: var(--blue); border-radius: 5px; }

.login-card { width: min(430px, calc(100% - 32px)); margin: 70px auto; }
.login-card .card-pad { padding: 30px; }
.checkin-page { margin-top: 44px; }
.checkin-panel { max-width: 480px; margin: 0 auto; }
.checkin-class { margin-bottom: 7px; color: var(--blue); font-size: 14px; font-weight: 700; }
.checkin-panel .notice .btn { margin-top: 10px; }
.roster-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.roster-form .btn { min-height: 52px; }
.roster-overview { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.roster-overview strong { color: #172033; font-size: 18px; }
.roster-classes { display: flex; gap: 7px; flex-wrap: wrap; }
.roster-classes > span:not(.muted) { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; color: #344054; background: #f8fafc; }
.roster-manager { padding-top: 16px; border-top: 1px solid var(--border); }
.roster-manager .toolbar select, .roster-manager .toolbar input { width: min(240px, 100%); padding: 8px 10px; }
.roster-table-wrap { max-height: 340px; overflow: auto; }
.student-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.student-form-actions { padding-bottom: 1px; }
.system-panel { margin-bottom: 18px; }
.system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.system-block { min-width: 0; padding-top: 14px; border-top: 1px solid var(--border); }
.system-block h3 { margin-top: 0; }
.system-block progress { width: 100%; height: 12px; margin-bottom: 8px; }
.password-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: center; }
.password-form input { min-width: 0; padding: 8px 10px; }
.backup-table { max-height: 300px; overflow: auto; }
.class-options { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: 6px; }
.class-options legend { padding: 0 5px; font-size: 14px; font-weight: 700; }
.check-list { display: flex; gap: 8px 14px; flex-wrap: wrap; }
.check-option { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; }
.check-option input { width: 16px; height: 16px; margin: 0; }
.dashboard { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 18px; align-items: start; }
.side-panel { position: sticky; top: 18px; }
.assignment-list { display: grid; gap: 8px; max-height: calc(100vh - 290px); overflow: auto; }
.assignment-item { width: 100%; padding: 12px; text-align: left; border: 1px solid var(--border); border-radius: 7px; background: #fff; cursor: pointer; }
.assignment-item:hover, .assignment-item.active { border-color: #8fb5ed; background: #f3f7ff; }
.assignment-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--muted); font-size: 12px; }
.section + .section { margin-top: 18px; }
.assignment-actions { justify-content: flex-end; }
.edit-assignment-form { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.4fr) minmax(180px, .8fr) auto; gap: 10px; align-items: end; padding-top: 16px; border-top: 1px solid var(--border); }
.edit-assignment-form[hidden] { display: none; }
.share-grid { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 18px; align-items: center; }
.qr { width: 160px; height: 160px; border: 1px solid var(--border); border-radius: 6px; }
.link-box { padding: 10px 11px; border: 1px solid var(--border); border-radius: 6px; background: #f8fafc; }
.link-settings { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--border); }
.link-settings .field { max-width: 340px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.submission-stats { padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stats-controls { margin-bottom: 10px; }
.stats-class { width: min(300px, 100%); padding: 8px 34px 8px 10px; }
.stats-summary { margin-top: 10px; }
.stats-details { display: grid; gap: 12px; margin-top: 14px; }
.missing-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; font-size: 13px; }
.missing-list > span { min-width: 0; overflow-wrap: anywhere; }
.stats-alerts { display: grid; gap: 8px; }
.combined-stats { padding-top: 2px; }
.attendance-lesson { width: min(520px, 100%); padding: 8px 34px 8px 10px; }
.combined-summary { margin-top: 10px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 7px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 9px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; white-space: nowrap; }
th { color: #475467; background: #f8fafc; font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
.file-links { display: grid; gap: 5px; min-width: 170px; white-space: normal; }
.duplicate-note { color: #9d2c24; font-size: 12px; }
.score-box { display: grid; grid-template-columns: 64px auto; gap: 6px; min-width: 125px; }
.score-box input { padding: 6px 7px; }
.empty { padding: 32px 16px; text-align: center; color: var(--muted); }
.summary { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.summary strong { color: #172033; font-size: 18px; }

@media (max-width: 820px) {
  .topbar { padding: 11px 16px; }
  .top-note { display: none; }
  .page { width: min(100% - 20px, 720px); margin-top: 16px; }
  .card-pad { padding: 18px; }
  .dashboard { grid-template-columns: 1fr; }
  .dashboard > *, #detail, #detail > * { min-width: 0; }
  .side-panel { position: static; }
  .assignment-list { max-height: none; }
  .share-grid { grid-template-columns: 1fr; }
  .student-form { grid-template-columns: 1fr 1fr; }
  .system-grid { grid-template-columns: 1fr; }
  .password-form { grid-template-columns: 1fr 1fr; }
  .edit-assignment-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  h1 { font-size: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .roster-form { grid-template-columns: 1fr; }
  .student-form { grid-template-columns: 1fr; }
  .password-form, .edit-assignment-form { grid-template-columns: 1fr; }
  .roster-form .btn { min-height: 38px; }
  .missing-list { grid-template-columns: 1fr 1fr; }
  .field.full { grid-column: auto; }
  .btn { width: 100%; }
  .dashboard .btn { width: auto; }
  .toolbar .btn { width: auto; flex: 1 1 130px; }
  .share-grid { text-align: left; }
  .assignment-actions { width: 100%; justify-content: flex-start; }
  .qr { width: 180px; height: 180px; justify-self: center; }
}