:root {
  color-scheme: light;
  --ink: #152f43;
  --muted: #536a79;
  --teal: #087478;
  --line: #dce6ea;
  --paper: #f4f8fa;
  font-family: system-ui, "Microsoft YaHei", sans-serif;
  line-height: 1.6;
}

.certificate-editor-layout { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:1rem; align-items:start; }
.certificate-image { display:block; width:100%; height:auto; border-radius:.35rem; }
.certificate-position-stage { position:relative; aspect-ratio:2400/1698; }
.certificate-position-stage > .certificate-image { position:absolute; inset:0; height:100%; }
.certificate-position-overlay, .certificate-position-layers { position:absolute; inset:0; width:100%; height:100%; }
.certificate-position-overlay { pointer-events:none; }
.certificate-position-layers { pointer-events:none; }
.certificate-position-text { position:absolute; display:block; margin:0; padding:0; border:0; border-radius:0; background:none; cursor:move; touch-action:none; pointer-events:auto; }
.certificate-position-text img { display:block; width:100%; height:100%; pointer-events:none; user-select:none; }
.certificate-position-text[aria-pressed="true"] { outline:2px dashed #1684a5; outline-offset:4px; z-index:1; }
.certificate-position-controls { min-width:0; padding:1rem 0 0; margin:0; border:0; }
.certificate-position-controls legend { float:left; width:100%; font-weight:700; padding:0; }
.certificate-position-controls > p:first-of-type { clear:both; padding-top:.5rem; }
.certificate-position-controls .quota-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(min-width:761px) { .certificate-position-panel { position:sticky; top:1rem; } }
.certificate-copy { white-space:pre-wrap; }
.certificate-candidates { display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; padding-left:1.2rem; }
.certificate-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.certificate-status-nav { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin:1.2rem 0; }
.certificate-status-nav a { padding:.4rem 0; }
.certificate-status-nav [aria-current="page"] { color:var(--ink); font-weight:700; }
.certificate-invalid { color:#a1242a; padding:.75rem; background:#fff0ee; border-radius:.4rem; }
.course-field input[type="checkbox"] { width:auto; }
.certificate-field-label { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.35rem .75rem; margin-bottom:.3rem; }
.certificate-field-label > label { margin:0; }
.certificate-field-check { display:inline-flex; align-items:center; gap:.4rem; min-height:2rem; color:var(--muted); font-size:.85rem; font-weight:400; cursor:pointer; }
.course-field .certificate-field-check input[type="checkbox"] { width:1.1rem; height:1.1rem; margin:0; padding:0; accent-color:var(--teal); }
@media(max-width:760px) { .certificate-editor-layout, .certificate-list { grid-template-columns:minmax(0,1fr); } }

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 1rem; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.3; overflow-wrap: anywhere; }
h2 { margin-bottom: .85rem; font-size: 1.15rem; }
a { color: var(--teal); text-underline-offset: .18em; }
button, input, textarea, select { font: inherit; }
select { display:block; width:100%; min-width:0; padding:.55rem .65rem; border:1px solid #8fa4ae; border-radius:.4rem; color:var(--ink); background:white; }
[data-activity-editor] #id_classrooms { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:.5rem; }
[data-activity-editor] #id_classrooms label { display:flex; align-items:center; gap:.5rem; padding:.5rem; border:1px solid var(--line); border-radius:.4rem; overflow-wrap:anywhere; }
[data-activity-editor] #id_classrooms input { flex:0 0 1.15rem; width:1.15rem; height:1.15rem; margin:0; accent-color:var(--teal); }
[data-activity-editor] [hidden] { display:none; }
input:disabled, textarea:disabled, select:disabled { background:var(--paper); color:var(--muted); }
:focus-visible { outline: 3px solid #1684a5; outline-offset: 3px; }

.wrap { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.topbar { background: white; border-bottom: 1px solid var(--line); }
.bar, .panel-heading, .student-row { display: flex; align-items: center; justify-content: space-between; gap: .65rem 1rem; flex-wrap: wrap; }
.bar { min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-weight: 750; text-decoration: none; }
.brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; background: var(--teal); color: white; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem 1.15rem; }
.site-nav a { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--ink); text-decoration: none; font-size: .92rem; }
.site-nav a:hover { color: var(--teal); text-decoration: underline; }
.site-nav a.official-website-link { justify-content: center; flex-shrink: 0; gap: .4rem; padding: .3rem .65rem; border: 1px solid #d8e4e9; border-radius: .6rem; color: #23485e; white-space: nowrap; }
.site-nav a.official-website-link:hover { border-color: #95c9c9; color: #096e77; text-decoration: none; }
.official-website-link img { display: block; object-fit: contain; }
.site-nav a[aria-current="page"] { color: var(--teal); font-weight: 700; }
.site-nav a.nav-sign-in { padding-inline: .8rem; border: 1px solid #bbd5d4; border-radius: .5rem; color: var(--teal); font-weight: 700; }
.site-nav a.nav-sign-in:hover, .site-nav a.nav-sign-in[aria-current="page"] { background: #e9f5f2; }
.workbench-class { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.25rem; align-items: center; }
.workbench-class div { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .9rem; }
.managed-course, .managed-course-actions, .managed-course-title { display: flex; flex-wrap: wrap; gap: .45rem .8rem; align-items: center; }
.managed-course { justify-content: space-between; }
.managed-course-info { flex: 1 1 20rem; min-width: 0; }
.managed-course-info .row-detail { margin: .35rem 0 0; }
.teacher-subject { overflow-wrap: anywhere; }
.course-state { padding: .18rem .55rem; border-radius: 1rem; background: var(--paper); color: var(--muted); font-size: .85rem; }
.course-state.progress-pill { color: var(--teal); background: #e5f5f1; }
.course-field + .course-field, .editor-actions { margin-top: .85rem; }
main.wrap { padding-block: clamp(1.25rem, 4vw, 2.75rem); }
.wrap.narrow { max-width: 31rem; }
.layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.panel { min-width: 0; padding: clamp(1rem, 3vw, 1.5rem); background: white; border: 1px solid var(--line); border-radius: .8rem; }
.panel-heading h2 { margin: 0; }
.muted, .row-detail, .helptext { color: var(--muted); }
.count, .row-detail, .helptext { font-size: .88rem; }
.row-detail, .helptext { display: block; }
.helptext { margin-top: .35rem; }
.helptext ul { margin: 0; padding-left: 1.25rem; }
label { display: block; font-weight: 600; margin-bottom: .3rem; }
input:not([type="hidden"]), textarea { display: block; width: 100%; padding: .55rem .65rem; border: 1px solid #8fa4ae; border-radius: .4rem; color: var(--ink); background: white; }
textarea { resize: vertical; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.55rem; padding: .4rem .85rem; border: 1px solid var(--teal); border-radius: .45rem; background: var(--teal); color: white; font-weight: 600; text-decoration: none; cursor: pointer; }
.button.secondary { background: white; color: var(--teal); }
.button:hover { filter: brightness(.92); }
.after-form { margin: 1rem 0 0; }
.login-divider { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }
.back { margin-bottom: .75rem; }
.notice { padding: .65rem .8rem; border-radius: .45rem; background: #e5f5f1; overflow-wrap: anywhere; }
.errorlist { color: #a1242a; padding-left: 1.2rem; }
.item-list { padding: 0; margin: .6rem 0 0; list-style: none; }
.item-list li { padding-block: .65rem; overflow-wrap: anywhere; }
.item-list li + li { border-top: 1px solid var(--line); }
.student-row > div { min-width: 0; }
code { font-size: .95em; }
.token { background: var(--paper); padding: .25rem .45rem; border-radius: .35rem; }
dt { color: var(--muted); font-size: .9rem; }
dd { margin: 0 0 .75rem; overflow-wrap: anywhere; }

.class-heading, .selection-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  margin-bottom: 1rem;
}
.class-heading h1 { margin: 0; min-width: 0; }
.quota-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.period-field { min-width: 0; margin-bottom: 1rem; }
.progress-pill { padding: .25rem .65rem; border-radius: 1rem; color: var(--teal); background: #e5f5f1; font-size: .9rem; }
.day-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.day-link { display: grid; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: .5rem; color: var(--ink); background: white; text-decoration: none; }
.day-link span, .day-link time { color: var(--muted); font-size: .85rem; }
.day-link.is-current { border-color: var(--teal); background: #e5f5f1; }
.day-link:hover { border-color: var(--teal); }
.evaluation-panel { margin-top: 1rem; }
.selection-fieldset { margin: 0; padding: 0; min-width: 0; border: 0; }
.selection-fieldset legend { padding: 0; font-weight: 600; }
.student-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .5rem; margin: .75rem 0; }
.student-option { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin: 0; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: .4rem; cursor: pointer; overflow-wrap: anywhere; }
.student-option input[type="checkbox"] { flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; margin: 0; padding: 0; accent-color: var(--teal); }
.student-option:has(:checked) { border-color: var(--teal); background: #e5f5f1; }
.student-option:has(:disabled) { color: var(--muted); cursor: default; }
.selection-actions { margin-bottom: 0; }
.button:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.teacher-notice-dialog { max-width: min(26rem, calc(100vw - 2rem)); color: var(--ink); }
.teacher-notice-dialog h2 { margin-top: 0; }
.teacher-notice-dialog::backdrop { background: rgba(17, 39, 53, .45); }
.winner-list { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; list-style: none; }
.winner-list li { padding: .45rem .65rem; border-radius: .4rem; background: #e5f5f1; overflow-wrap: anywhere; }
.winner-list span { margin-inline-start: .5rem; color: var(--muted); }
.result-table { width: 100%; border-collapse: collapse; }
.result-table caption { text-align: start; font-weight: 700; }
.result-table th, .result-table td { padding: .5rem; border-bottom: 1px solid var(--line); text-align: start; overflow-wrap: anywhere; }
.result-table th:not(:first-child), .result-table td { white-space: nowrap; }

main.teaching-workbench {
  width: calc(100% - clamp(2rem, 5vw, 4.5rem));
  padding-block: 1.25rem 2.5rem;
}

.workbench-toolbar, .workbench-tabs, .workbench-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .8rem;
}

.workbench-toolbar {
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  margin-bottom: .8rem;
}

.workbench-toolbar > .button, .workbench-toolbar > .workbench-actions {
  margin-bottom: .3rem;
}

.workbench-tabs a {
  padding: .6rem .8rem;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
}

.workbench-tabs a[aria-current="page"] {
  border-color: var(--teal);
  color: var(--teal);
  font-weight: 700;
}

.workbench-tabs a:hover {
  background: #e5f5f1;
}

.workbench-actions .button {
  min-height: 2.15rem;
  padding: .24rem .65rem;
}

.workbench-scroll {
  overflow-x: auto;
}

.workbench-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.workbench-table th, .workbench-table td {
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.workbench-table thead {
  background: var(--paper);
}

.workbench-table thead th, .workbench-table .progress-pill {
  white-space: nowrap;
}

.workbench-table tbody tr:last-child > * {
  border-bottom: 0;
}

.workbench-table .workbench-actions {
  min-width: 12rem;
}

.workbench-empty {
  margin: .7rem 0 0;
  color: var(--muted);
}

.create-class-panel {
  width: min(28rem, 100%);
  margin-bottom: .8rem;
}

dialog.create-class-panel {
  max-width: calc(100% - 2rem);
  margin: auto;
  color: var(--ink);
}

dialog.create-class-panel::backdrop {
  background: rgba(17, 39, 53, .45);
}

.import-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.import-methods > div {
  min-width: 0;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: .45rem;
}

.import-methods p {
  margin-bottom: 0;
}

.import-preview {
  margin-bottom: .8rem;
}

.import-preview .workbench-scroll {
  margin-top: .6rem;
}

.import-error {
  color: #a1242a;
}

@media (max-width: 700px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .import-methods { grid-template-columns: minmax(0, 1fr); }
  .bar { min-height: 3.75rem; }
}

@media (max-width: 480px) {
  .quota-fields { grid-template-columns:minmax(0,1fr); }
  .bar { padding-block: .55rem; }
  .site-nav { gap: .1rem .85rem; }
  .day-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .student-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}