/* [project]/src/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --animate-spin: spin 1s linear infinite;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .grow {
    flex-grow: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .resize {
    resize: both;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .\!italic {
    font-style: italic !important;
  }

  .italic {
    font-style: italic;
  }

  .\!underline {
    text-decoration-line: underline !important;
  }

  .underline {
    text-decoration-line: underline;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }
}

.workspace-switching {
  color: #547363;
  background: #f6f8f7;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 240px;
  display: flex;
}

.review-paper-panel .review-paper-scroll.pan-enabled {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  scroll-behavior: auto;
}

.review-paper-scroll.pan-enabled .review-answer-bbox {
  cursor: inherit;
}

.review-paper-scroll.pan-enabled.panning {
  cursor: grabbing;
}

.review-question-panel .review-auto-textarea.textarea {
  resize: none;
  min-height: 56px;
  max-height: none;
  overflow: hidden;
}

.exam-detail-page .paper-canvas-scroll.pan-enabled, .paper-page-dialog-workspace.pan-enabled {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  scroll-behavior: auto;
  touch-action: auto;
}

.paper-canvas-scroll.pan-enabled.panning, .paper-page-dialog-workspace.pan-enabled.panning {
  cursor: grabbing;
}

:root {
  --primary: #c84f28;
  --primary-soft: #fff0eb;
  --background: #f7f4ef;
  --surface: #fff;
  --text: #24272d;
  --muted: #697078;
  --border: #e5ded5;
  --success: #278a5c;
  --warning: #b97917;
  --danger: #cc3b3b;
  --info: #3274c5;
}

.scanner-dialog.scan-share-dialog {
  flex-direction: column;
  width: min(620px, 100vw - 32px);
  max-height: min(820px, 100dvh - 32px);
  display: flex;
  overflow: hidden;
}

.scan-share-dialog > header, .scan-share-dialog > footer {
  background: #fff;
  flex: none;
}

.scan-share-body {
  overscroll-behavior: contain;
  flex: auto;
  gap: 14px;
  min-height: 0;
  padding: 18px 20px;
  display: grid;
  overflow: auto;
}

.scan-share-section {
  border-bottom: 1px solid var(--border);
  gap: 10px;
  padding-bottom: 14px;
  display: grid;
}

.scan-share-step {
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.scan-share-step > span {
  color: #05904a;
  background: #e8f8ef;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 750;
  display: grid;
}

.scan-share-step > div {
  gap: 2px;
  display: grid;
}

.scan-share-step strong {
  color: #20252b;
  font-size: 14px;
}

.scan-share-step small {
  color: #718078;
  font-size: 12px;
}

.scan-share-search {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  display: grid;
}

.scan-share-search input, .scan-share-section select {
  color: #20252b;
  background: #fff;
  border: 1px solid #d8dfdb;
  border-radius: 7px;
  outline: none;
  height: 38px;
  padding: 0 11px;
}

.scan-share-search input:focus, .scan-share-section select:focus {
  border-color: #07c160;
  box-shadow: 0 0 0 3px #07c1601a;
}

.scan-share-recipients {
  flex-wrap: wrap;
  gap: 7px;
  min-height: 34px;
  display: flex;
}

.scan-share-recipients > span {
  color: #315342;
  background: #f1fbf5;
  border: 1px solid #ccebd9;
  border-radius: 7px;
  align-items: center;
  gap: 6px;
  padding: 6px 7px 6px 9px;
  display: flex;
}

.scan-share-recipients small {
  color: #6d7c74;
}

.scan-share-recipients button {
  color: #668073;
  background: none;
  border: 0;
  place-items: center;
  padding: 2px;
  display: grid;
}

.scan-share-recipients em {
  color: #8a9690;
  align-self: center;
  font-size: 12px;
  font-style: normal;
}

.scan-share-group-list {
  gap: 7px;
  max-height: 220px;
  padding: 2px;
  display: grid;
  overflow: auto;
}

.scan-share-group-list > label {
  cursor: pointer;
  background: #fff;
  border: 1px solid #dde4e0;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 11px;
  transition: border-color .15s, background .15s;
  display: flex;
}

.scan-share-group-list > label:hover {
  border-color: #a9d9bd;
}

.scan-share-group-list > label.selected {
  background: #f0faf4;
  border-color: #72cc98;
}

.scan-share-group-list input {
  accent-color: #07a653;
  width: 16px;
  height: 16px;
}

.scan-share-group-list label > span {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.scan-share-group-list label strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.scan-share-group-list label small {
  color: #75817b;
}

.scan-share-group-list > em {
  color: #849089;
  text-align: center;
  padding: 18px 10px;
  font-size: 12px;
  font-style: normal;
}

.scan-share-summary {
  color: #05904a;
  background: #edf9f2;
  border: 1px solid #bce7ce;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.scan-share-summary div {
  gap: 2px;
  display: grid;
}

.scan-share-summary span {
  color: #5c7165;
  font-size: 12px;
}

.scan-share-error {
  color: #a53535;
  background: #fff2f1;
  border-left: 3px solid #dd4b4b;
  margin: 0;
  padding: 9px 11px;
  font-size: 13px;
}

.scan-share-history > summary {
  cursor: pointer;
  color: #526059;
  padding: 6px 0;
  font-size: 13px;
}

.scan-share-history > summary:focus-visible {
  outline-offset: 3px;
  border-radius: 4px;
  outline: 2px solid #07c160;
}

.scan-share-history-list {
  gap: 7px;
  display: grid;
}

.scan-share-history-list > div {
  border-top: 1px dashed #e3e8e5;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  display: grid;
}

.scan-share-history-list > div > span {
  overflow-wrap: anywhere;
  min-width: 0;
  display: grid;
}

.scan-share-history small {
  color: #87928c;
}

.scan-share-history em {
  color: #68756e;
  background: #f4f6f5;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
  font-style: normal;
}

.scan-share-history em.approved {
  color: #078544;
  background: #e8f8ef;
}

.scan-share-history em.rejected, .scan-share-history em.cancelled {
  color: #818181;
  background: #f5f5f5;
}

.scan-share-history button {
  color: #b24949;
  background: none;
  border: 0;
  font-size: 12px;
}

.scanner-shared-notice {
  color: #078544;
  background: #f2faf5;
  border: 1px solid #cfeada;
  border-radius: 8px;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 13px 15px;
  display: flex;
}

.scanner-shared-notice div {
  gap: 2px;
  display: grid;
}

.scanner-shared-notice span {
  color: #617269;
  font-size: 12px;
}

.scanner-shared-origin {
  color: #078544;
  white-space: nowrap;
  background: #e8f8ef;
  border-radius: 999px;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 10px;
}

.message-center-share-decision {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  display: flex;
}

.message-center-share-decision p {
  color: #a53535;
  background: #fff2f1;
  flex-basis: 100%;
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
}

.report-download-button {
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  place-items: center;
  display: grid;
}

.report-download-button:disabled {
  cursor: default;
  opacity: .55;
}

.wechat-download-dialog-overlay {
  z-index: 120;
  background: #0a2016e8;
  position: fixed;
  inset: 0;
}

.wechat-download-dialog {
  z-index: 121;
  width: min(100%, 640px);
  height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  color: #fff;
  background: none;
  border: 0;
  outline: 0;
  flex-direction: column;
  gap: 14px;
  margin: 0 auto;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: auto;
}

.wechat-download-menu-guide {
  flex: 0 0 106px;
  position: relative;
}

.wechat-download-menu-prompt {
  color: #15241c;
  background: #fff;
  border-radius: 16px;
  align-items: center;
  gap: 10px;
  width: min(246px, 100% - 106px);
  height: 58px;
  padding: 0 16px;
  display: flex;
  position: absolute;
  top: 43px;
  left: 0;
  box-shadow: 0 10px 26px #0000002e;
}

.wechat-download-menu-prompt b, .wechat-download-menu-preview .selected > b {
  color: #07834e;
  background: #ddf7e8;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  display: grid;
}

.wechat-download-menu-prompt strong {
  white-space: nowrap;
  font-size: 16px;
}

.wechat-download-menu-arrow {
  color: #6ae8a9;
  filter: drop-shadow(0 2px 7px #0000003d);
  width: 54px;
  height: 54px;
  position: absolute;
  top: 20px;
  right: 56px;
  transform: rotate(-7deg);
}

.wechat-download-menu-target {
  color: #075e45;
  background: #fff;
  border: 3px solid #6ae8a9;
  border-radius: 999px;
  place-items: center;
  width: 52px;
  height: 44px;
  display: grid;
  position: absolute;
  top: 0;
  right: 0;
  box-shadow: 0 0 20px #6ae8a973;
}

.wechat-download-menu-target svg {
  width: 25px;
  height: 25px;
}

.wechat-download-intro {
  text-align: center;
  flex: none;
  gap: 6px;
  display: grid;
}

.wechat-download-intro h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
}

.wechat-download-intro p {
  color: #cfe2d9;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.wechat-download-menu-preview {
  color: #48554d;
  background: #fff;
  border-radius: 22px;
  flex: none;
  align-self: center;
  gap: 4px;
  width: min(310px, 100%);
  padding: 14px;
  display: grid;
  box-shadow: 0 12px 30px #06110c4d;
}

.wechat-download-menu-preview > header {
  color: #18271f;
  align-items: center;
  min-height: 38px;
  padding: 0 8px;
  font-size: 15px;
  display: flex;
}

.wechat-download-menu-item {
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 10px;
  font-size: 14px;
  display: flex;
}

.wechat-download-menu-item > svg {
  color: #68766e;
  width: 20px;
  height: 20px;
}

.wechat-download-menu-item.selected {
  color: #075e45;
  background: #e7f9ef;
  border: 2px solid #38c97e;
  border-radius: 14px;
  min-height: 64px;
}

.wechat-download-menu-item.selected > b {
  color: #fff;
  background: #08b968;
  width: 34px;
  height: 34px;
  font-size: 14px;
}

.wechat-download-menu-item.selected > div {
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: grid;
}

.wechat-download-menu-item.selected strong {
  font-size: 16px;
}

.wechat-download-menu-item.selected small {
  color: #438267;
  font-size: 10px;
}

.wechat-download-menu-item.selected > svg {
  color: #08a85f;
  width: 24px;
  height: 24px;
}

.wechat-download-retry-note {
  background: #ffffff14;
  border: 1px solid #ffffff2e;
  border-radius: 16px;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  display: flex;
}

.wechat-download-retry-note > span {
  color: #063d2b;
  background: #6ae8a9;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
}

.wechat-download-retry-note > span svg {
  width: 20px;
  height: 20px;
}

.wechat-download-retry-note > div {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.wechat-download-retry-note strong {
  font-size: 14px;
}

.wechat-download-retry-note p {
  color: #cfe2d9;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  display: flex;
}

.wechat-download-retry-note p svg {
  flex: none;
  width: 13px;
  height: 13px;
}

.wechat-download-dialog > footer {
  min-height: 50px;
  margin-top: auto;
  display: flex;
}

.wechat-download-confirm {
  color: #fff;
  cursor: pointer;
  background: #08b968;
  border: 0;
  border-radius: 15px;
  width: 100%;
  font-size: 15px;
  font-weight: 700;
}

@media (max-height: 700px) {
  .wechat-download-dialog {
    gap: 10px;
  }

  .wechat-download-menu-guide {
    flex-basis: 92px;
  }

  .wechat-download-menu-prompt {
    height: 52px;
    top: 34px;
  }

  .wechat-download-menu-preview {
    gap: 0;
    padding-block: 10px;
  }

  .wechat-download-menu-item {
    min-height: 42px;
  }

  .wechat-download-menu-item.selected {
    min-height: 56px;
  }

  .wechat-download-retry-note {
    padding-block: 10px;
  }
}

.admin-analytics-page {
  gap: 18px;
  display: grid;
}

.admin-analytics-heading {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.admin-analytics-heading p {
  color: #078544;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
}

.admin-analytics-heading h1 {
  margin: 0;
  font-size: 26px;
}

.admin-analytics-heading span {
  color: #7d8882;
  font-size: 12px;
}

.admin-analytics-period, .admin-analytics-tabs {
  background: #fff;
  border: 1px solid #dde3df;
  border-radius: 8px;
  gap: 4px;
  padding: 4px;
  display: flex;
}

.admin-analytics-period a, .admin-analytics-tabs a {
  color: #68756e;
  border-radius: 5px;
  padding: 6px 11px;
  font-size: 12px;
}

.admin-analytics-period a.active, .admin-analytics-tabs a.active {
  color: #078544;
  background: #e8f8ef;
  font-weight: 700;
}

.admin-analytics-tabs {
  width: max-content;
}

.admin-analytics-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.admin-analytics-metrics article {
  background: #fff;
  border: 1px solid #e0e5e2;
  border-radius: 9px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  display: flex;
}

.admin-analytics-metrics article > span {
  color: #078544;
  background: #edf9f2;
  border-radius: 8px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.admin-analytics-metrics article div {
  gap: 2px;
  display: grid;
}

.admin-analytics-metrics small {
  color: #78847e;
}

.admin-analytics-metrics strong {
  font-size: 21px;
}

.admin-analytics-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .8fr);
  gap: 14px;
  display: grid;
}

.admin-analytics-panel {
  background: #fff;
  border: 1px solid #e0e5e2;
  border-radius: 9px;
  overflow: hidden;
}

.admin-analytics-panel > header {
  border-bottom: 1px solid #edf0ee;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  display: flex;
}

.admin-analytics-panel h2 {
  margin: 0;
  font-size: 15px;
}

.admin-analytics-panel header span {
  color: #859089;
  font-size: 12px;
}

.admin-trend-chart {
  align-items: end;
  gap: 5px;
  height: 230px;
  padding: 24px 16px 12px;
  display: flex;
  overflow-x: auto;
}

.admin-trend-chart > div {
  flex: 1;
  grid-template-rows: 1fr 20px;
  align-items: end;
  min-width: 20px;
  height: 100%;
  display: grid;
}

.admin-trend-chart > div > span {
  background: #07c160;
  border-radius: 3px 3px 0 0;
  width: 100%;
  min-height: 4px;
}

.admin-trend-chart small {
  color: #8a948f;
  text-align: center;
  font-size: 9px;
  overflow: hidden;
}

.admin-event-ranking {
  padding: 8px 16px 14px;
  display: grid;
}

.admin-event-ranking > div {
  border-bottom: 1px dashed #e7ebe8;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  display: grid;
}

.admin-event-ranking b {
  color: #a0aaa4;
  font-size: 11px;
}

.admin-event-ranking span {
  font-size: 13px;
}

.admin-event-ranking strong {
  color: #078544;
  font-variant-numeric: tabular-nums;
}

.admin-funnel-list {
  gap: 9px;
  padding: 16px;
  display: grid;
}

.admin-funnel-list > div {
  grid-template-columns: 24px 150px minmax(120px, 1fr) 52px;
  align-items: center;
  gap: 10px;
  display: grid;
}

.admin-funnel-list > div > span {
  color: #66746c;
  background: #f0f4f2;
  border-radius: 50%;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  display: grid;
}

.admin-funnel-list > div > strong {
  font-size: 12px;
}

.admin-funnel-list > div > i {
  background: #edf1ef;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.admin-funnel-list > div > i > b {
  border-radius: inherit;
  background: #07c160;
  height: 100%;
  display: block;
}

.admin-funnel-list > div > em {
  color: #526059;
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 12px;
  font-style: normal;
}

.admin-analytics-empty, .admin-timeline-empty {
  color: #8a948f;
  place-items: center;
  min-height: 180px;
  font-size: 13px;
  display: grid;
}

.admin-teacher-timeline > header form {
  gap: 7px;
  display: flex;
}

.admin-teacher-timeline select {
  background: #fff;
  border: 1px solid #d8dfdb;
  border-radius: 6px;
  height: 34px;
  padding: 0 9px;
}

.admin-timeline-teacher {
  align-items: baseline;
  gap: 8px;
  padding: 13px 16px 0;
  display: flex;
}

.admin-timeline-teacher span {
  color: #7e8983;
  font-size: 12px;
}

.admin-timeline-list {
  padding: 10px 16px 16px;
}

.admin-timeline-list article {
  grid-template-columns: 170px 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  display: grid;
}

.admin-timeline-list time, .admin-timeline-list em {
  color: #7f8a84;
  font-size: 11px;
  font-style: normal;
}

.admin-timeline-list i {
  background: #07c160;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px #e8f8ef;
}

.admin-timeline-list article > div {
  border-bottom: 1px solid #edf0ee;
  gap: 2px;
  padding: 10px 0;
  display: grid;
}

.admin-timeline-list article > div span {
  color: #7d8882;
  font-size: 11px;
}

.admin-timeline-pagination {
  border-top: 1px solid #edf0ee;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  font-size: 12px;
  display: flex;
}

@media (max-width: 1000px) {
  .admin-analytics-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-analytics-grid {
    grid-template-columns: 1fr;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
}

body {
  background: var(--background);
  color: var(--text);
  letter-spacing: 0;
  margin: 0;
  font-family: Arial, PingFang SC, Microsoft YaHei, sans-serif;
}

button, input, select, textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.button {
  background: var(--primary);
  color: #fff;
  border: 1px solid #0000;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  font-weight: 600;
  display: inline-flex;
}

.button:hover {
  background: #ad4222;
}

.button.secondary {
  border-color: var(--border);
  color: var(--text);
  background: #fff;
}

.button.danger {
  background: var(--danger);
}

.button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.icon-button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  display: inline-flex;
}

.field {
  gap: 6px;
  display: grid;
}

.field label, .field > span {
  color: #4f555c;
  font-size: 13px;
  font-weight: 600;
}

.input, .select, .textarea {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  outline: none;
  width: 100%;
  padding: 9px 11px;
}

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--info);
  box-shadow: 0 0 0 2px #3274c522;
}

.textarea {
  resize: vertical;
  min-height: 110px;
}

.panel {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
}

.panel-header {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  padding: 0 18px;
  display: flex;
}

.panel-body {
  padding: 18px;
}

.admin-system-settings-grid {
  gap: 22px;
  max-width: 800px;
  display: grid;
}

.admin-setting-section {
  gap: 16px;
  display: grid;
}

.admin-setting-section + .admin-setting-section {
  border-top: 1px solid var(--border);
  padding-top: 22px;
}

.admin-setting-section p {
  margin: 5px 0 0;
  line-height: 1.65;
}

.admin-setting-check {
  cursor: pointer;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.admin-setting-check input {
  margin-top: 3px;
}

.admin-setting-check small {
  margin-top: 3px;
  display: block;
}

.admin-scanner-options {
  border: 0;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  display: flex;
}

.admin-scanner-options-label {
  width: 100%;
  color: var(--muted);
  margin-bottom: 10px;
  font-size: 13px;
}

.admin-scanner-options label {
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  min-width: 210px;
  padding: 13px 15px;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
  display: flex;
}

.admin-scanner-options label:hover {
  background: #f7fbf8;
  border-color: #78b28d;
}

.admin-scanner-options label:has(input:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
  background: #f2f8f4;
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-scanner-options label:has(input:checked) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent);
  }
}

.admin-scanner-options input {
  accent-color: var(--primary);
  margin-top: 3px;
}

.admin-scanner-options span {
  gap: 3px;
  display: grid;
}

.admin-scanner-options small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.admin-system-settings-submit {
  width: fit-content;
}

.page-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
}

.muted {
  color: var(--muted);
}

.error {
  color: var(--danger);
  font-size: 13px;
}

.success {
  color: var(--success);
}

.badge {
  color: #5b626a;
  background: #eef1f4;
  border-radius: 4px;
  align-items: center;
  padding: 3px 7px;
  font-size: 12px;
  display: inline-flex;
}

.badge.success {
  color: var(--success);
  background: #eaf7f0;
}

.badge.warning {
  color: #855608;
  background: #fff4df;
}

.badge.danger {
  color: var(--danger);
  background: #ffeded;
}

.table {
  border-collapse: collapse;
  width: 100%;
}

.table th, .table td {
  border-bottom: 1px solid var(--border);
  text-align: left;
  padding: 11px 12px;
  font-size: 14px;
}

.table th {
  color: var(--muted);
  background: #faf9f7;
  font-size: 12px;
  font-weight: 600;
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 44px 20px;
}

.grid-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.admin-task-heading p {
  color: var(--muted);
  margin: 7px 0 0;
  font-size: 13px;
}

.admin-task-tabs {
  border-bottom: 1px solid var(--border);
  align-items: end;
  gap: 22px;
  margin-top: 22px;
  display: flex;
}

.admin-task-tabs a {
  min-height: 42px;
  color: var(--muted);
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  position: relative;
}

.admin-task-tabs a:after {
  content: "";
  background: none;
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}

.admin-task-tabs a.active {
  color: var(--primary);
}

.admin-task-tabs a.active:after {
  background: var(--primary);
}

.admin-task-tabs a span {
  color: #656b72;
  text-align: center;
  background: #ece9e5;
  border-radius: 10px;
  min-width: 20px;
  padding: 2px 6px;
  font-size: 11px;
}

.admin-task-tabs a.active span {
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-task-panel {
  margin-top: 16px;
  overflow: hidden;
}

.admin-task-panel .panel-header > span {
  font-size: 12px;
}

.admin-task-panel-tools, .admin-business-task-tools {
  align-items: center;
  gap: 7px;
  display: flex;
}

.admin-task-panel-tools > span {
  font-size: 12px;
}

.admin-model-call-panel-tools, .admin-model-call-tools, .admin-model-call-tools label {
  align-items: center;
  display: flex;
}

.admin-model-call-panel-tools {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-model-call-panel-tools > span {
  font-size: 12px;
}

.admin-model-call-tools {
  gap: 7px;
}

.admin-model-call-id-search form {
  align-items: center;
  display: flex;
}

.admin-model-call-id-search .input {
  border-radius: 6px 0 0 6px;
  width: 300px;
  height: 30px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.admin-model-call-id-search form > a, .admin-model-call-id-search form > button {
  border: 1px solid var(--border);
  width: 30px;
  height: 30px;
  color: var(--muted);
  cursor: pointer;
  background: #fff;
  border-left: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.admin-model-call-id-search form > button {
  border-radius: 0 6px 6px 0;
}

.admin-model-call-id-search form > a:hover, .admin-model-call-id-search form > button:hover {
  color: var(--primary);
}

.admin-model-call-id-search p {
  color: var(--danger);
  margin: 4px 0 0;
  font-size: 11px;
}

.admin-model-call-tools label {
  border: 1px solid var(--border);
  height: 30px;
  color: var(--muted);
  background: #fff;
  border-radius: 6px;
  gap: 6px;
  padding-left: 9px;
  font-size: 12px;
}

.admin-model-call-tools select {
  border: 0;
  border-left: 1px solid var(--border);
  max-width: 180px;
  height: 28px;
  color: var(--text);
  font: inherit;
  background: #fff;
  border-radius: 0 5px 5px 0;
  padding: 0 26px 0 8px;
}

.admin-model-call-tools > a, .admin-model-call-tools > button {
  border: 1px solid var(--border);
  height: 30px;
  color: var(--muted);
  cursor: pointer;
  background: #fff;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  display: inline-flex;
}

.admin-model-call-status-filter {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  height: 30px;
  display: inline-flex;
  overflow: hidden;
}

.admin-model-call-status-filter a {
  border-left: 1px solid var(--border);
  color: var(--muted);
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  display: inline-flex;
}

.admin-model-call-status-filter a:first-child {
  border-left: 0;
}

.admin-model-call-status-filter a:hover {
  color: var(--primary);
}

.admin-model-call-status-filter a.active {
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-model-call-status-filter a.active {
    background: color-mix(in srgb, var(--primary) 9%, white);
  }
}

.admin-model-call-status-filter a.active {
  color: var(--primary);
  font-weight: 600;
}

.admin-model-call-tools > a {
  padding: 0 9px;
}

.admin-model-call-tools > button {
  width: 30px;
  padding: 0;
}

.admin-model-call-tools > a:hover, .admin-model-call-tools > button:hover {
  border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-model-call-tools > a:hover, .admin-model-call-tools > button:hover {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  }
}

.admin-model-call-tools > a:hover, .admin-model-call-tools > button:hover {
  color: var(--primary);
}

.admin-model-call-tools > a.active {
  color: var(--danger);
  background: #fff3f3;
  border-color: #e0a2a2;
  font-weight: 600;
}

.admin-business-task-tools > a, .admin-business-task-tools > button {
  border: 1px solid var(--border);
  height: 30px;
  color: var(--muted);
  cursor: pointer;
  background: #fff;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  display: inline-flex;
}

.admin-business-task-tools > a {
  padding: 0 9px;
}

.admin-business-task-tools > button {
  width: 30px;
  padding: 0;
}

.admin-business-task-tools > a:hover, .admin-business-task-tools > button:hover {
  border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-business-task-tools > a:hover, .admin-business-task-tools > button:hover {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  }
}

.admin-business-task-tools > a:hover, .admin-business-task-tools > button:hover {
  color: var(--primary);
}

.admin-business-task-tools > a.active {
  color: var(--danger);
  background: #fff3f3;
  border-color: #e0a2a2;
  font-weight: 600;
}

.admin-model-call-sort {
  align-items: center;
  gap: 4px;
  font-size: 12px;
  display: flex;
}

.admin-model-call-sort a {
  border: 1px solid var(--border);
  color: var(--muted);
  background: #fff;
  border-radius: 5px;
  padding: 5px 8px;
}

.admin-model-call-sort a.active {
  border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-model-call-sort a.active {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  }
}

.admin-model-call-sort a.active {
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-model-call-sort a.active {
    background: color-mix(in srgb, var(--primary) 8%, white);
  }
}

.admin-model-call-sort a.active {
  color: var(--primary);
  font-weight: 600;
}

.admin-capacity-diagnostics {
  border-bottom: 1px solid var(--border);
  background: #f8fbf9;
  padding: 12px 16px;
}

.admin-capacity-summary {
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.admin-capacity-summary > div {
  border: 1px solid var(--primary);
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-width: 150px;
  padding: 8px 10px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-capacity-summary > div {
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
  }
}

.admin-capacity-summary > div {
  background: #fff;
  border-radius: 7px;
}

.admin-capacity-summary span {
  color: var(--muted);
  font-size: 12px;
}

.admin-capacity-summary strong {
  color: var(--text);
  font-size: 14px;
}

.admin-model-capacity-list {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 8px;
  display: grid;
}

.admin-model-capacity-list article {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 7px;
  padding: 9px 10px;
}

.admin-model-capacity-list article header {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  display: flex;
}

.admin-model-capacity-list article header span {
  color: var(--muted);
  font-size: 11px;
}

.admin-model-capacity-list dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  display: grid;
}

.admin-model-capacity-list dl div {
  min-width: 0;
}

.admin-model-capacity-list dt {
  color: var(--muted);
  font-size: 10px;
}

.admin-model-capacity-list dd {
  color: var(--text);
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
}

.admin-model-capacity-list article > p {
  color: var(--warning);
  margin: 7px 0 0;
  font-size: 11px;
}

.admin-task-table-scroll {
  overflow-x: auto;
}

.admin-task-table {
  min-width: 960px;
}

.admin-task-table td {
  vertical-align: top;
}

.admin-task-cancel-button {
  white-space: nowrap;
  height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.admin-task-id {
  overflow-wrap: anywhere;
  color: #59616a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.admin-model-call-job-id {
  color: var(--muted);
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  display: block;
}

.admin-task-description {
  overflow-wrap: anywhere;
  width: 42%;
  min-width: 330px;
  max-width: 620px;
  line-height: 1.55;
}

.admin-task-error, .admin-task-item-error, .admin-call-error {
  color: var(--danger);
}

.admin-related-call {
  border-left: 2px solid var(--warning);
  background: #fffaf1;
  margin-top: 9px;
  padding: 7px 0 1px 10px;
}

.admin-related-call > div {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  display: flex;
}

.admin-task-item-error {
  margin: 0 0 4px;
  font-size: 12px;
}

.admin-related-call > div > span, .admin-related-call > small {
  color: var(--muted);
  font-size: 11px;
}

.admin-related-call > small {
  margin-top: 2px;
  display: block;
}

.admin-related-call details, .admin-task-table td > details {
  margin-top: 5px;
}

.admin-related-call summary, .admin-task-table td > details summary {
  cursor: pointer;
  width: fit-content;
  color: var(--info);
  font-size: 12px;
  font-weight: 600;
}

.admin-model-output {
  color: #f4f5f6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  background: #25282d;
  border: 1px solid #ded8cf;
  border-radius: 5px;
  max-height: 280px;
  margin: 7px 0 0;
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  overflow: auto;
}

.admin-model-io-heading {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  display: flex;
}

.copy-text-button {
  border: 1px solid var(--border);
  width: 26px;
  height: 26px;
  color: var(--muted);
  background: #fff;
  border-radius: 4px;
  flex: none;
  place-items: center;
  display: inline-grid;
}

.copy-text-button:hover {
  border-color: var(--info);
  color: var(--info);
  background: #f1f6f8;
}

.copy-text-button.copied {
  border-color: var(--success);
}

@supports (color: color-mix(in lab, red, red)) {
  .copy-text-button.copied {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  }
}

.copy-text-button.copied {
  color: var(--success);
}

.copy-text-button.failed {
  border-color: var(--danger);
}

@supports (color: color-mix(in lab, red, red)) {
  .copy-text-button.failed {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  }
}

.copy-text-button.failed {
  color: var(--danger);
}

.admin-model-call-output {
  width: min(720px, 72vw);
}

.admin-model-io-actions {
  align-items: center;
  gap: 4px;
  display: flex;
}

.admin-segmentation-preview-trigger {
  color: var(--success);
}

.admin-segmentation-preview-trigger:hover {
  border-color: var(--success);
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-segmentation-preview-trigger:hover {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  }
}

.admin-segmentation-preview-trigger:hover {
  color: var(--success);
  background: #edf9f2;
}

.admin-model-input-images {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 7px;
  display: grid;
}

.admin-model-input-image-button {
  min-width: 0;
  color: var(--foreground);
  text-align: left;
  cursor: zoom-in;
  background: none;
  border: 0;
  gap: 5px;
  padding: 0;
  font-size: 11px;
  text-decoration: none;
  display: grid;
}

.admin-model-input-images img {
  object-fit: contain;
  background: #f6f3ef;
  border: 1px solid #ded8cf;
  border-radius: 5px;
  width: 100%;
  height: 220px;
}

.admin-model-input-image-button:hover img, .admin-model-input-image-button:focus-visible img {
  border-color: var(--info);
  box-shadow: 0 0 0 2px var(--info);
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-model-input-image-button:hover img, .admin-model-input-image-button:focus-visible img {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--info) 18%, transparent);
  }
}

.admin-image-preview-overlay {
  z-index: 200;
  background: #141619c7;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.admin-image-preview-dialog {
  background: #f6f3ef;
  border: 1px solid #d8d2c9;
  border-radius: 8px;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1200px, 94vw);
  height: min(900px, 92vh);
  display: grid;
  overflow: hidden;
  box-shadow: 0 24px 80px #00000052;
}

.admin-image-preview-header {
  background: #fff;
  border-bottom: 1px solid #ded8cf;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}

.admin-image-preview-actions {
  align-items: center;
  gap: 4px;
  display: flex;
}

.admin-image-preview-actions a, .admin-image-preview-actions button {
  width: 34px;
  height: 34px;
  color: var(--foreground);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  place-items: center;
  display: grid;
}

.admin-image-preview-actions a:hover, .admin-image-preview-actions button:hover {
  background: #f0ece6;
}

.admin-image-preview-dialog > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  padding: 14px;
}

.admin-segmentation-preview-dialog {
  background: #ecefeb;
  border: 1px solid #d8d2c9;
  border-radius: 8px;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1200px, 94vw);
  height: min(900px, 92vh);
  display: grid;
  overflow: hidden;
  box-shadow: 0 24px 80px #00000052;
}

.admin-segmentation-preview-title {
  align-items: baseline;
  gap: 10px;
  display: flex;
}

.admin-segmentation-preview-title span {
  color: var(--muted);
  font-size: 12px;
}

.admin-segmentation-preview-stage {
  place-items: center;
  min-height: 0;
  padding: 14px;
  display: grid;
  overflow: hidden;
}

.admin-segmentation-preview-canvas {
  background: #fff;
  border: 1px solid #d5d0c8;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 22px #20252b24;
}

.admin-segmentation-preview-canvas > img {
  object-fit: contain;
  max-width: 100%;
  max-height: calc(92vh - 86px);
  display: block;
}

.admin-segmentation-preview-regions {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.admin-segmentation-preview-region {
  box-sizing: border-box;
  border: 2px solid;
  position: absolute;
}

.admin-segmentation-preview-region > span {
  color: #fff;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px #0003;
  white-space: nowrap;
  max-width: 100%;
  padding: 2px 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.admin-segmentation-preview-empty {
  color: var(--muted);
  background: #fff;
  border: 1px dashed #c9c3ba;
  border-radius: 7px;
  margin: 0;
  padding: 28px 36px;
  font-size: 13px;
}

.admin-model-input-empty {
  color: var(--muted);
  margin: 7px 0 0;
  font-size: 11px;
}

.admin-model-io-label {
  color: var(--muted);
  margin-top: 9px;
  font-size: 11px;
  font-weight: 700;
  display: block;
}

.admin-call-error {
  margin: 6px 0 0;
  font-size: 12px;
}

.stat {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 7px;
  padding: 18px;
}

.stat strong {
  margin-top: 8px;
  font-size: 26px;
  display: block;
}

.danger-text {
  color: var(--danger) !important;
}

.workbench-kicker {
  color: var(--primary);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}

.exam-detail-page, .batch-detail-page {
  min-width: 0;
}

.exam-detail-header {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 62px;
  display: flex;
}

.exam-title-row, .exam-title-meta, .batch-page-summary {
  align-items: center;
  display: flex;
}

.exam-title-row {
  gap: 13px;
}

.exam-title-meta {
  color: var(--muted);
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
}

.batch-page-summary {
  color: var(--muted);
  gap: 8px;
}

.batch-page-summary strong {
  color: var(--text);
  font-size: 18px;
}

.exam-stage-nav {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 7px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 12px 0 18px;
  display: grid;
}

.exam-stage-nav > a, .exam-stage-nav > div {
  border-right: 1px solid var(--border);
  min-width: 0;
  min-height: 54px;
  color: var(--muted);
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  display: grid;
}

.exam-stage-nav > :last-child {
  border-right: 0;
}

.exam-stage-nav > .active {
  background: var(--primary-soft);
  color: var(--primary);
}

.exam-stage-nav > a > span, .exam-stage-nav > div > span {
  background: #f1f2f3;
  border-radius: 6px;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.exam-stage-nav > .active > span {
  background: #fff;
}

.exam-stage-nav div div, .exam-stage-nav a div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.exam-stage-nav small {
  font-size: 9px;
}

.exam-stage-nav strong {
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.exam-workspace-section {
  margin-bottom: 32px;
  scroll-margin-top: 20px;
}

.workspace-section-heading {
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 8px;
  display: flex;
}

.workspace-section-heading h2 {
  margin: 3px 0 0;
  font-size: 18px;
}

.workspace-section-heading p {
  max-width: 520px;
  color: var(--muted);
  text-align: right;
  margin: 0;
  font-size: 12px;
}

.paper-empty-state {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  grid-template-columns: minmax(220px, 260px) minmax(520px, 620px);
  justify-content: center;
  align-items: start;
  gap: 56px;
  min-height: 390px;
  padding: 34px 44px;
  display: grid;
}

.paper-empty-copy {
  min-width: 0;
}

.paper-empty-copy h2 {
  margin: 7px 0 8px;
  font-size: 22px;
}

.paper-empty-copy p, .paper-recognizing-state p {
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
}

.paper-source-panel {
  background: #f8fcf9;
  border: 1px solid #dce8e1;
  border-radius: 10px;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 8px 28px #2e4c3b0b;
}

.paper-source-heading {
  background: #ffffffb8;
  border-bottom: 1px solid #e1ebe5;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 68px;
  padding: 12px 14px;
  display: flex;
}

.paper-source-heading > div:first-child {
  gap: 2px;
  display: grid;
}

.paper-source-heading span {
  color: #7e8b84;
  font-size: 11px;
}

.paper-source-heading h3 {
  color: #2d3c34;
  margin: 0;
  font-size: 15px;
}

.paper-source-tabs {
  background: #edf3ef;
  border-radius: 8px;
  gap: 3px;
  padding: 3px;
  display: flex;
}

.paper-source-tabs button {
  color: #66756d;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
}

.paper-source-tabs button:hover {
  color: #247951;
}

.paper-source-tabs button[aria-selected="true"] {
  color: #247951;
  background: #fff;
  box-shadow: 0 1px 4px #32544224;
}

.paper-source-tabs button:focus-visible {
  outline-offset: 1px;
  outline: 2px solid #07c160;
}

.paper-source-panel.pdf-disabled .paper-source-heading {
  min-height: 58px;
}

.paper-source-body {
  height: 320px;
  padding: 14px;
  display: grid;
}

.paper-source-body[hidden] {
  display: none;
}

.paper-source-panel .scan-group-picker {
  background: none;
  border: 0;
  border-radius: 0;
  min-width: 0;
  padding: 0;
}

.paper-source-panel .scan-group-options {
  max-height: 180px;
}

.paper-source-pdf-upload {
  width: 100%;
  height: 100%;
}

.paper-recognizing-state {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 12px 16px;
  min-height: 220px;
  padding: 28px;
  display: grid;
}

.paper-page-statuses {
  flex-wrap: wrap;
  grid-column: 2;
  gap: 6px;
  display: flex;
}

.paper-workbench {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.paper-workbench-toolbar, .grading-command-bar {
  border-bottom: 1px solid var(--border);
  background: #faf9f7;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 9px 14px;
  display: flex;
}

.paper-progress-summary, .paper-toolbar-actions, .grading-progress-stats, .grading-command-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.paper-recognition-inline {
  min-width: 250px;
  color: var(--muted);
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  display: flex;
}

.paper-recognition-inline > span, .paper-recognition-inline > b {
  color: var(--text);
  font-size: 12px;
}

.paper-recognition-inline > small {
  font-size: 11px;
}

.paper-recognition-track {
  background: #ddd7cc;
  border-radius: 999px;
  width: 88px;
  height: 5px;
  overflow: hidden;
}

.paper-recognition-track i {
  border-radius: inherit;
  background: #245b87;
  height: 100%;
  transition: width .18s;
  display: block;
}

.paper-recognition-error {
  border-left: 3px solid var(--danger);
  min-height: 36px;
  color: var(--danger);
  background: #fff0ed;
  align-items: center;
  padding: 8px 14px;
  font-size: 12px;
  display: flex;
}

.paper-recognition-paused {
  border-left: 3px solid var(--warning);
  color: #825313;
  background: #fff8e8;
  align-items: center;
  min-height: 36px;
  padding: 8px 14px;
  font-size: 12px;
  display: flex;
}

.paper-capture-banner {
  color: #744522;
  background: #fff4ea;
  border-left: 3px solid #d66a2c;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 12px;
  font-size: 11px;
  display: flex;
}

.paper-capture-banner button {
  color: #a34624;
  background: none;
  border: 0;
  margin-left: auto;
  font-weight: 700;
}

.paper-capture-overlay {
  z-index: 8;
  cursor: crosshair;
  touch-action: none;
  position: absolute;
  inset: 0;
}

.paper-capture-selection {
  pointer-events: none;
  background: #d66a2c1a;
  border: 2px solid #d66a2c;
  position: absolute;
}

@keyframes control-spin {
  to {
    transform: rotate(360deg);
  }
}

.paper-progress-summary > span, .grading-progress-stats > span:not(.badge) {
  border-left: 1px solid var(--border);
  color: var(--muted);
  padding-left: 8px;
  font-size: 12px;
}

.paper-blocker-count, .paper-ready-count {
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.paper-blocker-count {
  color: var(--warning) !important;
}

.paper-ready-count {
  color: var(--success) !important;
}

.review-inline-error, .missing-students-strip {
  color: #825313;
  background: #fff6e7;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 12px;
  display: flex;
}

.paper-workbench-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, .75fr) minmax(310px, .9fr);
  grid-template-areas: "paper tree editor";
  min-height: 720px;
  display: grid;
}

.paper-canvas-panel {
  grid-area: paper;
}

.paper-question-tree {
  grid-area: tree;
}

.paper-question-editor {
  grid-area: editor;
}

.paper-canvas-panel, .paper-question-tree, .paper-question-editor {
  border-right: 1px solid var(--border);
  min-width: 0;
  height: 720px;
  min-height: 0;
  overflow: hidden;
}

.paper-question-editor {
  border-right: 0;
}

.paper-workbench-grid.locked {
  cursor: progress;
}

.review-paper-toolbar {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 12px;
  display: flex;
}

.paper-canvas-viewer {
  flex-direction: column;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
}

.paper-page-tabs {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.paper-page-tabs button, .review-paper-toolbar button {
  border: 1px solid var(--border);
  width: 28px;
  height: 28px;
  color: var(--muted);
  background: #fff;
  border-radius: 5px;
  place-items: center;
  display: grid;
}

.paper-page-tabs button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.paper-canvas-scroll, .review-paper-scroll {
  background: #e8e9ea;
  flex: 1;
  min-height: 0;
  padding: 18px;
  position: relative;
  overflow: auto;
}

.paper-page-canvas, .review-paper-canvas {
  background: #fff;
  width: min(100%, 820px);
  min-height: 300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 18px #24272d1f;
}

.paper-page-canvas > img, .review-paper-canvas > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.paper-image-missing {
  height: 100%;
  color: var(--muted);
  place-items: center;
  display: grid;
}

.paper-question-bbox {
  background: none;
  border: 1px solid #3274c5b3;
}

.paper-question-bbox.selected {
  z-index: 3;
  background: #d66a2c0f;
  border: 2px solid #d66a2c;
  box-shadow: 0 0 0 2px #ffffffbf;
}

.review-answer-bbox span {
  background: var(--info);
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
  padding: 2px 5px;
  font-size: 9px;
  position: absolute;
  top: -20px;
  left: -1px;
  overflow: hidden;
}

.review-answer-bbox.selected span {
  background: var(--primary);
}

.paper-question-tree, .paper-question-editor, .review-question-panel, .review-submission-rail {
  background: #fff;
  flex-direction: column;
  display: flex;
}

.paper-tree-heading, .question-editor-heading, .review-question-list-heading {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 11px 14px;
  display: flex;
  position: relative;
}

.paper-tree-heading-copy {
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.paper-tree-heading-copy h2 {
  white-space: nowrap;
  flex: none;
  margin: 0;
}

.paper-tree-heading-copy span {
  color: var(--muted);
  white-space: nowrap;
  font-size: 11px;
}

.paper-tree-progress-tip {
  z-index: 5;
  bottom: calc(100% + 6px);
  left: var(--paper-recognition-tip-left, 14px);
  color: #8d481e;
  pointer-events: none;
  background: #fff7ed;
  border: 1px solid #e7b98f;
  border-radius: 4px;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 28px);
  padding: 3px 7px;
  font-size: 9px;
  line-height: 1.25;
  transition: left .3s;
  display: flex;
  position: absolute;
  box-shadow: 0 2px 7px #4a2e1a14;
}

.paper-tree-progress-tip:before {
  bottom: -4px;
  left: var(--paper-recognition-tip-arrow-left, 8px);
  content: "";
  background: #fff7ed;
  border-bottom: 1px solid #e7b98f;
  border-right: 1px solid #e7b98f;
  width: 6px;
  height: 6px;
  transition: left .3s;
  position: absolute;
  transform: rotate(45deg);
}

.paper-tree-progress-tip strong, .paper-tree-progress-tip b {
  white-space: nowrap;
}

.paper-tree-progress-tip b {
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.paper-tree-progress-tip.slow span {
  color: #75523b;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 1px solid #e7cbb2;
  padding-left: 5px;
  overflow: hidden;
}

.paper-question-tree {
  position: relative;
}

.paper-question-tree.recognition-running, .paper-question-tree.generation-running, .paper-question-tree.recognition-failed {
  z-index: 4;
  overflow: visible;
}

.paper-tree-recognition-line {
  z-index: 2;
  pointer-events: none;
  background: #d7dde0;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.paper-tree-recognition-line i {
  width: var(--paper-recognition-progress, 0%);
  background: #245b87;
  height: 100%;
  transition: width .3s, background-color .2s;
  display: block;
}

.paper-question-tree.recognition-running .paper-tree-recognition-line i {
  background: #d66a2c;
}

.paper-question-tree.generation-running .paper-tree-recognition-line i {
  background: #245b87;
}

.paper-question-tree.recognition-complete .paper-tree-recognition-line i {
  background: #39714a;
}

.paper-question-tree.recognition-failed .paper-tree-recognition-line i {
  background: #b94535;
}

.paper-tree-heading-right, .paper-tree-state-icons {
  align-items: center;
  display: flex;
}

.paper-tree-heading-right {
  gap: 7px;
}

.paper-tree-state-icons {
  border-right: 1px solid #ddd7cc;
  gap: 3px;
  padding-right: 7px;
}

.paper-tree-state-icon {
  border-radius: 50%;
  outline: none;
  place-items: center;
  width: 24px;
  height: 24px;
  display: grid;
}

.paper-tree-state-icon:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #245b87;
}

.paper-tree-state-icon.running {
  color: #b35a21;
  background: #fff0df;
}

.paper-tree-state-icon.complete {
  color: #39714a;
  background: #e7efe8;
}

.paper-tree-state-icon.pending {
  color: #9a632d;
  background: #f5ead8;
}

.paper-tree-state-icon.failed {
  color: #b23e30;
  background: #f8e3df;
}

.paper-tree-heading-actions {
  align-items: center;
  gap: 4px;
  display: flex;
}

.paper-tree-icon-action {
  border: 1px solid var(--border);
  color: #56656d;
  background: #fff;
  border-radius: 5px;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.paper-tree-icon-action:hover:not(:disabled) {
  color: #245b87;
  background: #edf3f5;
  border-color: #90a9ba;
}

.paper-tree-icon-action.ai {
  color: #8c4f23;
}

.paper-tree-icon-action.danger {
  color: #b94535;
  border-color: #dfaaa1;
}

.paper-tree-icon-action.danger:hover:not(:disabled) {
  color: #9f3327;
  background: #fff0ed;
  border-color: #c96a5d;
}

.paper-tree-icon-action.primary {
  color: #fff;
  background: #c54132;
  border-color: #b94535;
}

.paper-tree-icon-action:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.paper-tree-heading h2, .question-editor-heading h2, .review-question-list-heading h2 {
  margin: 2px 0 0;
  font-size: 17px;
}

.paper-tree-heading > span, .review-question-list-heading > span {
  color: var(--muted);
  font-size: 11px;
}

.paper-tree-search, .review-search {
  border: 1px solid var(--border);
  height: 36px;
  color: var(--muted);
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  margin: 8px 10px 6px;
  padding: 0 9px;
  display: flex;
}

.paper-tree-search input, .review-search input {
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
}

.paper-tree-filter {
  border: 1px solid var(--border);
  width: calc(100% - 20px);
  height: 34px;
  color: var(--muted);
  background: #fff;
  border-radius: 6px;
  margin: 0 10px 8px;
  padding: 0 8px;
  font-size: 11px;
}

.paper-tree-scroll, .question-editor-scroll, .review-editor-scroll, .review-submission-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.paper-tree-scroll {
  padding: 0 8px 12px;
}

.paper-tree-page {
  border: 1px solid #0000;
  margin-bottom: 5px;
}

.paper-tree-page.active {
  background: #f3f7fa;
  border-color: #c7d7e5;
}

.paper-tree-page-title {
  width: 100%;
  min-height: 38px;
  color: var(--muted);
  text-align: left;
  background: none;
  border: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  display: grid;
}

.paper-tree-page-title > button:first-child, .paper-tree-section-title > button:first-child {
  width: 24px;
  height: 24px;
  color: inherit;
  background: none;
  border: 0;
  flex: none;
  place-items: center;
  display: grid;
}

.paper-tree-page-label, .paper-tree-section-label {
  min-width: 0;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  display: flex;
}

.paper-tree-page-label span, .paper-tree-section-label span {
  white-space: nowrap;
  margin-left: auto;
}

.paper-tree-page-children {
  padding-bottom: 4px;
}

.paper-tree-page-title strong {
  color: var(--text);
  font-size: 11px;
}

.paper-tree-page-title span {
  font-size: 9px;
}

.paper-page-dot {
  background: #b1b6bc;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.paper-page-dot.succeeded {
  background: var(--success);
}

.paper-page-dot.failed {
  background: var(--danger);
}

.paper-page-dot.running {
  background: var(--info);
}

.paper-tree-section-title, .paper-tree-question {
  text-align: left;
  background: none;
  border: 0;
  width: 100%;
}

.paper-tree-section-title {
  min-height: 38px;
  color: var(--text);
  align-items: center;
  gap: 7px;
  padding: 5px 7px 5px 18px;
  display: flex;
}

.paper-tree-section-label {
  flex: 1;
}

.paper-tree-section-label span {
  color: var(--muted);
  margin-left: auto;
  font-size: 10px;
}

.paper-tree-question {
  min-height: 52px;
  color: var(--muted);
  border-left: 2px solid #0000;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 26px;
  display: flex;
}

.paper-tree-question-main {
  min-width: 0;
  min-height: 38px;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  flex: 1;
  grid-template-columns: minmax(42px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  display: grid;
}

.paper-tree-question:hover, .paper-tree-question.selected {
  background: #f7f4ef;
}

.paper-tree-question.selected {
  border-left-color: var(--primary);
}

.paper-tree-question-number {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}

.paper-tree-question-copy {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.paper-tree-question-copy strong {
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.paper-tree-question-copy small {
  font-size: 9px;
}

.paper-tree-node-menu {
  z-index: 5;
  flex: none;
  position: relative;
}

.paper-tree-node-menu summary {
  width: 26px;
  height: 26px;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  border-radius: 4px;
  place-items: center;
  list-style: none;
  display: grid;
}

.paper-tree-node-menu summary::-webkit-details-marker {
  display: none;
}

.paper-tree-question:hover .paper-tree-node-menu summary, .paper-tree-section-title:hover .paper-tree-node-menu summary, .paper-tree-node-menu[open] summary {
  opacity: 1;
}

.paper-tree-node-menu summary:hover {
  background: #e5e9ea;
}

.paper-tree-node-menu > div {
  z-index: 20;
  background: #fff;
  border: 1px solid #c9c5bb;
  width: 132px;
  padding: 4px;
  display: grid;
  position: absolute;
  top: 28px;
  right: 0;
  box-shadow: 0 8px 24px #1e272b29;
}

.paper-tree-node-menu > div button {
  min-height: 30px;
  color: var(--text);
  text-align: left;
  background: none;
  border: 0;
  padding: 0 9px;
  font-size: 11px;
}

.paper-tree-node-menu > div button:hover {
  background: #edf3f5;
}

.paper-tree-add-row {
  border-top: 1px dashed #ddd7ca;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px 8px 4px 26px;
  display: flex;
}

.paper-tree-add-row > button, .paper-tree-add-question {
  color: #245b87;
  background: none;
  border: 0;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.paper-tree-add-row form {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px;
  width: 100%;
  display: grid;
}

.paper-tree-add-row input {
  border: 1px solid #90a9ba;
  min-width: 0;
  height: 30px;
  padding: 0 7px;
}

.paper-tree-add-row form button {
  border: 1px solid var(--border);
  background: #fff;
  font-size: 11px;
}

.paper-tree-section-questions {
  padding-left: 12px;
}

.paper-tree-add-question {
  margin-left: 26px;
}

.paper-editor-empty {
  height: 100%;
  color: var(--muted);
  text-align: center;
  place-content: center;
  gap: 6px;
  padding: 24px;
  display: grid;
}

.paper-editor-empty strong {
  color: var(--text);
}

.paper-editor-heading {
  border-bottom: 1px solid var(--border);
  background: #f8f7f3;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  display: flex;
}

.paper-editor-heading > div:first-child {
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.paper-editor-heading > div:first-child span {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.paper-editor-heading-status {
  align-items: center;
  gap: 6px;
  display: flex;
}

.paper-editor-heading-status button {
  width: 28px;
  height: 28px;
  color: var(--danger);
  background: none;
  border: 0;
  place-items: center;
  display: grid;
}

.paper-editor-heading-status .paper-tree-icon-action.paper-editor-ai-action {
  border: 1px solid var(--border);
  color: #07a652;
  background: #e8f8ef;
  border-radius: 9px;
  width: 36px;
  height: 36px;
}

.paper-editor-heading-status .paper-tree-icon-action.paper-editor-ai-action:hover:not(:disabled) {
  color: #079c4e;
  background: #f3faf6;
  border-color: #a9d9bc;
}

.paper-editor-heading-status button:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.paper-editor-issue, .paper-editor-score-warning, .paper-save-state {
  white-space: nowrap;
  font-size: 10px;
}

.paper-editor-score-warning {
  color: #a36514;
}

.paper-editor-issue, .paper-save-state.error {
  color: var(--danger);
}

.paper-save-state.saving {
  color: var(--info);
}

.paper-save-state.saved {
  color: var(--success);
}

.paper-editor-fields {
  scrollbar-gutter: stable;
  border: 0;
  flex-direction: column;
  flex: 1;
  gap: 9px;
  min-height: 0;
  margin: 0;
  padding: 10px 12px 12px;
  display: flex;
  overflow-y: auto;
}

.paper-editor-fields label {
  min-width: 0;
  color: var(--muted);
  align-content: start;
  gap: 3px;
  font-size: 10px;
  display: grid;
}

.paper-editor-fields input, .paper-editor-fields select, .paper-editor-fields textarea, .paper-editor-question-text-preview {
  border: 1px solid var(--border);
  width: 100%;
  min-width: 0;
  color: var(--text);
  font: inherit;
  background: #fff;
  border-radius: 4px;
  outline: 0;
  font-size: 11px;
}

.paper-editor-fields input, .paper-editor-fields select {
  height: 30px;
  padding: 0 7px;
}

.paper-editor-fields textarea {
  resize: none;
  height: 68px;
  min-height: 68px;
  padding: 6px 7px;
  overflow: auto;
}

.paper-editor-question-text-preview {
  color: #56625b;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #f6f8f7;
  border-color: #e3e9e5;
  height: 68px;
  min-height: 68px;
  padding: 6px 7px;
  line-height: 1.5;
  overflow: auto;
}

.paper-editor-fields input:focus, .paper-editor-fields select:focus, .paper-editor-fields textarea:focus {
  border-color: #245b87;
  box-shadow: 0 0 0 2px #245b871a;
}

.paper-editor-fields :disabled {
  cursor: not-allowed;
  opacity: .58;
}

.paper-editor-fields [readonly] {
  cursor: text;
  color: #56625b;
  background: #f6f8f7;
  border-color: #e3e9e5;
}

.paper-editor-fields [readonly]:focus {
  box-shadow: none;
  border-color: #d5ded8;
}

.paper-editor-existing-score-warning {
  color: #855817;
  background: #fff9ef;
  border: 1px solid #ecd8b5;
  border-radius: 7px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  font-size: 10px;
  line-height: 1.45;
  display: flex;
}

.paper-editor-existing-score-warning button {
  color: #81510e;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d5aa68;
  border-radius: 6px;
  flex: none;
  padding: 5px 8px;
  font-size: 10px;
}

.paper-editor-primary-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(80px, .65fr);
  gap: 8px 10px;
  display: grid;
}

.paper-editor-text, .paper-editor-subjective-grid {
  min-height: 68px;
}

.paper-editor-fields .paper-editor-text {
  align-content: start;
  gap: 3px;
  display: grid;
}

.paper-editor-fields .paper-editor-text > span {
  color: var(--muted);
  font-size: 10px;
}

.question-rich-text u {
  text-underline-offset: .14em;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}

.review-question-text-preview {
  resize: none;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.paper-editor-subjective-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  display: grid;
}

.paper-editor-fields .paper-editor-rubric textarea {
  resize: vertical;
  height: 132px;
  min-height: 110px;
}

.paper-editor-fields .paper-editor-reference-answer textarea {
  resize: vertical;
}

.paper-editor-field-error {
  min-height: 12px;
  color: var(--danger);
  font-size: 10px;
  line-height: 12px;
}

.paper-editor-field-error.is-empty {
  visibility: hidden;
}

.add-question-disclosure {
  border-top: 1px solid var(--border);
  margin: 8px;
}

.compact-empty {
  padding: 24px 8px;
  font-size: 11px;
}

.add-question-disclosure summary {
  color: var(--primary);
  cursor: pointer;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.add-question-form {
  gap: 7px;
  max-height: 420px;
  padding: 4px;
  display: grid;
  overflow-y: auto;
}

.question-editor-form {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
}

.question-editor-scroll, .review-editor-scroll {
  align-content: start;
  gap: 12px;
  padding: 12px 14px;
  display: grid;
}

.question-editor-four-columns {
  grid-template-columns: 1.2fr .8fr;
  gap: 9px;
  display: grid;
}

.question-answer-settings {
  border-top: 1px solid var(--border);
  gap: 11px;
  padding-top: 10px;
  display: grid;
}

.textarea.compact {
  min-height: 70px;
}

.bbox-fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 0;
  padding: 10px;
}

.bbox-fieldset legend {
  color: var(--muted);
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
}

.region-selector {
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
  display: flex;
}

.region-selector button {
  border: 1px solid var(--border);
  height: 27px;
  color: var(--muted);
  background: #fff;
  border-radius: 5px;
  font-size: 10px;
}

.region-selector button.active {
  border-color: var(--info);
  color: var(--info);
  background: #edf3f8;
}

.bbox-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.bbox-grid .input {
  padding: 7px 5px;
}

.question-editor-actions {
  border-top: 1px solid var(--border);
  background: #faf9f7;
  gap: 8px;
  padding: 10px 14px;
  display: flex;
}

.paper-region-save-state {
  min-width: 38px;
  color: var(--muted);
  white-space: nowrap;
  font-size: 10px;
}

.paper-region-save-state.saving {
  color: var(--info);
}

.paper-region-save-state.saved {
  color: var(--success);
}

.paper-region-save-state.error {
  color: var(--danger);
}

.answer-key-strip {
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  display: flex;
}

.answer-key-strip > div:first-child, .answer-key-strip > div:first-child span {
  align-items: center;
  gap: 9px;
  display: flex;
}

.answer-key-strip > div:first-child span {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.answer-key-strip small {
  color: var(--muted);
}

.answer-key-uploader {
  width: 320px;
}

.answer-key-uploader > label {
  grid-template-columns: auto 1fr;
  text-align: left !important;
  justify-items: start !important;
  min-height: 86px !important;
}

.submission-batch-layout {
  grid-template-columns: minmax(350px, .8fr) minmax(520px, 1.2fr);
  gap: 14px;
  display: grid;
}

.submission-upload-panel, .batch-list {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  padding: 14px;
}

.batch-list {
  align-content: start;
  gap: 5px;
  display: grid;
}

.batch-list-row {
  border-bottom: 1px solid var(--border);
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 8px;
  display: grid;
}

.batch-class-mark {
  width: 34px;
  height: 34px;
  color: var(--info);
  background: #edf3f8;
  border-radius: 6px;
  place-items: center;
  font-weight: 800;
  display: grid;
}

.batch-list-row > span:nth-child(2) {
  min-width: 0;
  display: grid;
}

.batch-list-row small {
  color: var(--muted);
}

.submission-locked-state {
  min-height: 340px;
  color: var(--muted);
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 7px;
  display: grid;
}

.submission-locked-artwork {
  border-radius: 11px;
  width: min(210px, 100%);
  height: auto;
  margin-bottom: 4px;
}

.submission-locked-state .button {
  margin-top: 5px;
}

.submission-locked-state strong {
  color: var(--text);
}

.missing-students-strip {
  border: 1px solid #efd5a7;
  border-radius: 6px;
  margin: 14px 0;
}

.grading-workbench {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.grading-command-bar {
  min-height: 62px;
}

.grading-progress-stats strong {
  color: var(--text);
  font-size: 16px;
}

.grading-mode-tabs {
  border-bottom: 1px solid var(--border);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.grading-mode-tabs button {
  border: 0;
  border-right: 1px solid var(--border);
  height: 56px;
  color: var(--muted);
  text-align: left;
  background: #fff;
  border-bottom: 3px solid #0000;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  display: grid;
}

.grading-mode-tabs button:last-child {
  border-right: 0;
}

.grading-mode-tabs button.active {
  border-bottom-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.grading-mode-tabs small {
  font-size: 10px;
}

.submission-organize-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  padding: 14px;
  display: grid;
}

.submission-organize-card {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 7px;
  min-width: 0;
  padding: 12px;
}

.submission-organize-card.has-error {
  border-color: #e7b0a5;
}

.submission-card-heading {
  justify-content: space-between;
  align-items: start;
  gap: 8px;
  min-height: 44px;
  display: flex;
}

.submission-card-heading > div {
  gap: 2px;
  display: grid;
}

.submission-card-heading span:first-child {
  color: var(--muted);
  font-size: 10px;
}

.submission-bind-form {
  grid-template-columns: 1fr auto;
  gap: 7px;
  margin-top: 9px;
  display: grid;
}

.recognized-name-line {
  color: var(--muted);
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  display: flex;
}

.recognized-name-line span {
  margin-left: auto;
}

.review-workbench-grid {
  grid-template-columns: 220px minmax(480px, 1fr) 390px;
  height: 720px;
  display: grid;
}

.review-submission-rail, .review-paper-panel {
  border-right: 1px solid var(--border);
  min-width: 0;
}

.review-submission-list {
  padding: 0 8px 10px;
}

.review-submission-list > button {
  width: 100%;
  min-height: 54px;
  color: var(--muted);
  text-align: left;
  background: none;
  border: 0;
  border-left: 2px solid #0000;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  display: grid;
}

.review-submission-list > button.selected {
  border-left-color: var(--primary);
  background: var(--primary-soft);
}

.review-submission-list > button > span {
  background: #eef1f4;
  border-radius: 5px;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.review-submission-list button div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.review-submission-list button strong, .review-submission-list button small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.review-submission-list button strong {
  color: var(--text);
  font-size: 11px;
}

.review-submission-list button small {
  font-size: 9px;
}

.review-paper-panel {
  background: #e8e9ea;
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.review-paper-toolbar {
  background: #fff;
  flex: none;
}

.review-paper-toolbar span {
  color: var(--muted);
  margin-left: auto;
  font-size: 11px;
}

.review-paper-scroll {
  flex: 1;
  height: auto;
  min-height: 0;
}

.review-answer-bbox {
  border: 1px dashed var(--info);
  background: #3274c514;
  position: absolute;
}

.review-answer-bbox.selected {
  z-index: 3;
  border: 2px solid var(--primary);
  background: #c84f281f;
}

.review-question-panel {
  min-width: 0;
}

.review-inline-error {
  border-radius: 5px;
  margin: 8px;
}

.review-question-chips {
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 5px;
  max-height: 92px;
  padding: 8px 10px;
  display: flex;
  overflow-y: auto;
}

.review-question-chips button {
  border: 1px solid var(--border);
  min-width: 34px;
  height: 27px;
  color: var(--muted);
  background: #fff;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  display: inline-flex;
}

.review-question-chips button.selected {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.review-current-question, .recognition-meta {
  align-items: center;
  gap: 7px;
  display: flex;
}

.review-current-question strong {
  color: var(--primary);
  margin-left: auto;
}

.review-edit-form {
  gap: 11px;
  display: grid;
}

.recognition-meta {
  color: var(--muted);
  flex-wrap: wrap;
  font-size: 10px;
}

.review-reference-details {
  border: 1px solid var(--border);
  background: #f4efe673;
  margin-top: 3px;
}

.review-reference-details summary {
  color: #17253a;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  list-style: none;
  display: flex;
}

.review-reference-details summary::-webkit-details-marker {
  display: none;
}

.review-reference-details summary svg {
  color: var(--muted);
  flex: none;
  transition: transform .14s;
}

.review-reference-details[open] summary svg {
  transform: rotate(90deg);
}

.review-reference-content {
  border-top: 1px solid var(--border);
  gap: 10px;
  padding: 0 10px 10px;
  display: grid;
}

.review-reference-content .field:first-child {
  padding-top: 10px;
}

.review-download-row {
  border-top: 1px solid var(--border);
  background: #faf9f7;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 9px 12px;
  display: flex;
}

.review-download-row > div {
  display: grid;
}

.review-download-row small {
  color: var(--muted);
}

.review-download-row strong {
  color: var(--primary);
  font-size: 24px;
}

@media (max-width: 900px) {
  .desktop-workbench {
    display: none !important;
  }

  .desktop-warning {
    display: block !important;
  }

  .grid-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1450px) and (min-width: 901px) {
  .paper-workbench-grid {
    grid-template: "paper tree" minmax(0, 38fr)
                   "paper editor" minmax(0, 62fr)
                   / minmax(460px, 1.25fr) minmax(340px, .75fr);
  }

  .paper-question-tree, .paper-question-editor {
    height: auto;
  }

  .review-workbench-grid {
    grid-template-columns: 190px minmax(420px, 1fr) 350px;
  }

  .paper-toolbar-actions .button, .grading-command-actions .button {
    padding: 0 9px;
    font-size: 12px;
  }
}

.admin-tabs {
  border-bottom: 1px solid var(--border);
  gap: 4px;
  display: flex;
}

.admin-tabs a {
  color: var(--muted-foreground);
  border-bottom: 2px solid #0000;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
}

.admin-tabs a.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.prompt-config-layout {
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-top: 20px;
  display: grid;
}

.admin-sidebar {
  min-height: 100vh;
  transition: padding .18s;
  position: relative;
}

.admin-sidebar-brand-copy, .admin-nav-label, .admin-sidebar-toggle span {
  white-space: nowrap;
  transition: opacity .14s, width .14s;
}

.admin-sidebar-toggle {
  color: #d9dde3;
  cursor: pointer;
  background: #ffffff0b;
  border: 1px solid #ffffff1f;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  padding: 0;
  display: flex;
}

.admin-sidebar-toggle:hover {
  background: #ffffff18;
}

.admin-shell.is-collapsed .admin-sidebar {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.admin-shell.is-collapsed .admin-sidebar-brand-copy, .admin-shell.is-collapsed .admin-nav-label {
  display: none;
}

.admin-shell.is-collapsed .admin-sidebar > div:first-child {
  justify-content: center;
}

.admin-shell.is-collapsed .admin-sidebar > div:first-child .admin-sidebar-toggle {
  margin-left: 0;
}

.admin-shell.is-collapsed nav a {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}

.admin-shell.is-collapsed main {
  max-width: 1680px;
}

.admin-page-heading, .admin-diagnostic-hero, .admin-job-items-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.admin-page-heading p, .admin-diagnostic-hero p, .admin-job-items-heading p {
  color: var(--muted);
  margin: 7px 0 0;
  font-size: 13px;
}

.admin-page-heading-mark {
  color: #286146;
  background: #f4faf7;
  border: 1px solid #dce8e1;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  font-size: 12px;
  display: inline-flex;
}

.admin-teacher-diagnostic-actions, .admin-task-row-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.admin-teacher-diagnostic-actions .button, .admin-task-row-actions .button, .admin-support-launch-button {
  white-space: nowrap;
  height: 31px;
  padding: 0 9px;
  font-size: 12px;
}

.modal-backdrop {
  z-index: 300;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #161f1b8f;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.modal-card.admin-support-dialog {
  background: #fff;
  border: 1px solid #d7e2dc;
  border-radius: 12px;
  width: min(520px, 92vw);
  overflow: hidden;
  box-shadow: 0 24px 70px #0e23193d;
}

.admin-support-dialog > header, .admin-support-dialog > footer {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  display: flex;
}

.admin-support-dialog > header {
  background: #f7fbf9;
  border-bottom: 1px solid #e5ece8;
}

.admin-support-dialog > header > div {
  align-items: center;
  gap: 11px;
  display: flex;
}

.admin-support-dialog > header > div > span {
  color: #078749;
  background: #e5f7ed;
  border-radius: 9px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.admin-support-dialog h2, .admin-support-dialog p {
  margin: 0;
}

.admin-support-dialog h2 {
  color: #202a25;
  font-size: 17px;
}

.admin-support-dialog header p {
  color: #6a756f;
  margin-top: 3px;
  font-size: 12px;
}

.admin-support-dialog > .field {
  gap: 7px;
  padding: 18px;
  display: grid;
}

.admin-support-dialog textarea {
  resize: vertical;
  min-height: 100px;
}

.admin-support-dialog .field small {
  color: #78827c;
  font-size: 11px;
}

.admin-support-dialog .form-error {
  color: var(--danger);
  margin: -8px 18px 10px;
  font-size: 12px;
}

.admin-support-dialog > footer {
  border-top: 1px solid #e5ece8;
  justify-content: flex-end;
}

.admin-support-banner {
  z-index: 120;
  color: #4e3b08;
  background: #fff8df;
  border-bottom: 1px solid #d7a931;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 7px 22px;
  display: flex;
  position: sticky;
  top: 0;
  box-shadow: 0 4px 14px #46360a14;
}

.admin-support-banner-main, .admin-support-banner-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.admin-support-banner-main > span {
  background: #f4d97f;
  border-radius: 50%;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.admin-support-banner-main strong, .admin-support-banner-main small {
  display: block;
}

.admin-support-banner-main strong {
  font-size: 13px;
}

.admin-support-banner-main small {
  color: #796622;
  margin-top: 2px;
  font-size: 11px;
}

.admin-support-banner-actions a, .admin-support-banner-actions button {
  color: #59440b;
  cursor: pointer;
  background: #fffdf5;
  border: 1px solid #d5b85a;
  border-radius: 6px;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 9px;
  font-size: 12px;
  display: inline-flex;
}

.admin-support-banner-actions button {
  color: #fff;
  background: #6a5314;
}

.admin-support-banner > p {
  color: #fff;
  background: #b43d2e;
  border-radius: 5px;
  margin: 0;
  padding: 7px 10px;
  font-size: 11px;
  position: absolute;
  top: 45px;
  right: 20px;
}

.admin-diagnostic-hero {
  background: linear-gradient(100deg, #f5fbf8, #fff 56%);
  border: 1px solid #dce6e0;
  border-left: 4px solid #139155;
  border-radius: 9px;
  align-items: center;
  padding: 18px 20px;
}

.admin-diagnostic-hero.compact {
  padding-block: 15px;
}

.admin-diagnostic-hero > div > a {
  color: #5f7468;
  font-size: 12px;
}

.admin-diagnostic-hero h1 {
  color: #1d2a23;
  letter-spacing: -.02em;
  margin: 6px 0 0;
  font-size: 25px;
}

.admin-diagnostic-hero > .badge {
  padding: 6px 10px;
}

.admin-diagnostic-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
  display: grid;
}

.admin-diagnostic-metrics article {
  background: #fff;
  border: 1px solid #e0e7e3;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 12px;
  display: flex;
}

.admin-diagnostic-metrics article > span, .admin-diagnostic-storage-grid article > span {
  color: #0b8d4d;
  background: #ebf7f0;
  border-radius: 8px;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.admin-diagnostic-metrics svg, .admin-diagnostic-storage-grid svg {
  width: 17px;
  height: 17px;
}

.admin-diagnostic-metrics strong, .admin-diagnostic-metrics small, .admin-diagnostic-storage-grid strong, .admin-diagnostic-storage-grid small {
  display: block;
}

.admin-diagnostic-metrics strong {
  color: #202923;
  font-size: 20px;
}

.admin-diagnostic-metrics small, .admin-diagnostic-storage-grid small {
  color: #78827c;
  margin-top: 2px;
  font-size: 11px;
}

.admin-diagnostic-tabs {
  border-bottom: 1px solid #dfe6e2;
  gap: 4px;
  margin-top: 17px;
  display: flex;
}

.admin-diagnostic-tabs a {
  color: #68746d;
  border-bottom: 2px solid #0000;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.admin-diagnostic-tabs a.active {
  color: #087f45;
  border-bottom-color: #0a9650;
}

.admin-diagnostic-tabs a span {
  color: #617068;
  background: #edf1ef;
  border-radius: 9px;
  padding: 1px 6px;
  font-size: 10px;
}

.admin-diagnostic-tabs a.active span {
  color: #087f45;
  background: #e3f6eb;
}

.admin-diagnostic-sections {
  gap: 14px;
  margin-top: 14px;
  display: grid;
}

.admin-diagnostic-sections .table td small, .admin-teacher-diagnostic-page .table td small {
  color: #7c8680;
  margin-top: 3px;
  font-size: 11px;
  display: block;
}

.admin-diagnostic-storage-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.admin-diagnostic-storage-grid article {
  align-items: center;
  gap: 10px;
  padding: 14px;
  display: flex;
}

.admin-diagnostic-storage-grid strong {
  font-size: 19px;
}

.admin-cache-repair-strip {
  background: #fffcf4;
  border-color: #eadfc5;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 13px 15px;
  display: flex;
}

.admin-cache-repair-strip > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.admin-cache-repair-strip > div > span {
  color: #9a670f;
  background: #fff2d7;
  border-radius: 7px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.admin-cache-repair-strip p {
  color: #7b735f;
  margin: 3px 0 0;
  font-size: 11px;
}

.admin-cache-repair-form .admin-action-fields {
  align-items: center;
  gap: 7px;
  display: flex;
}

.admin-cache-repair-form input {
  width: 220px;
}

.admin-diagnostic-timeline-panel {
  margin-top: 14px;
  overflow: hidden;
}

.admin-audit-timeline {
  margin: 0;
  padding: 7px 18px 18px 28px;
  list-style: none;
}

.admin-audit-timeline li {
  border-bottom: 1px solid #edf0ee;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  padding: 12px 0;
  display: grid;
  position: relative;
}

.admin-audit-timeline li:last-child {
  border-bottom: 0;
}

.admin-audit-dot {
  background: #86928b;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  box-shadow: 0 0 0 1px #cbd3ce;
}

.admin-audit-dot.admin {
  background: #bc7b13;
  box-shadow: 0 0 0 1px #e4c47e;
}

.admin-audit-dot.teacher {
  background: #0b9850;
  box-shadow: 0 0 0 1px #9cd3b6;
}

.admin-audit-timeline li > div > div {
  align-items: center;
  gap: 7px;
  display: flex;
}

.admin-audit-timeline time {
  color: #7f8983;
  margin-left: auto;
  font-size: 11px;
}

.admin-audit-timeline p {
  color: #465149;
  margin: 5px 0 2px;
  font-size: 12px;
}

.admin-audit-timeline small {
  color: #89918d;
  overflow-wrap: anywhere;
  font-size: 10px;
}

.admin-job-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 12px;
  display: grid;
  overflow: hidden;
}

.admin-job-summary > div {
  border-right: 1px solid #e3e8e5;
  min-height: 70px;
  padding: 13px 15px;
}

.admin-job-summary > div.wide {
  border-top: 1px solid #e3e8e5;
  border-right: 0;
  grid-column: 1 / -1;
  min-height: 58px;
}

.admin-job-summary small, .admin-job-summary strong {
  display: block;
}

.admin-job-summary small {
  color: #7b8580;
  font-size: 10px;
}

.admin-job-summary strong {
  overflow-wrap: anywhere;
  margin-top: 6px;
  font-size: 14px;
}

.admin-repair-panel {
  border-color: #eadfc5;
  margin-top: 13px;
  overflow: visible;
}

.admin-repair-panel .panel-header {
  background: #fffbf1;
}

.admin-repair-panel .panel-header p {
  color: #7a725d;
  margin: 3px 0 0;
  font-size: 11px;
}

.admin-repair-panel .panel-header > svg {
  color: #a67316;
}

.admin-repair-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 11px;
  display: grid;
}

.admin-repair-tool {
  background: #fffdfa;
  border: 1px solid #e8dfca;
  border-radius: 7px;
  padding: 10px;
}

.admin-repair-tool .admin-action-fields {
  gap: 8px;
  display: grid;
}

.admin-repair-tool .admin-action-fields > div {
  gap: 8px;
  display: flex;
}

.admin-repair-tool .admin-action-fields > div > span {
  color: #966613;
  background: #fff1d1;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.admin-repair-tool strong {
  font-size: 12px;
}

.admin-repair-tool p {
  color: #7b7568;
  margin: 3px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

.admin-repair-tool .input {
  height: 32px;
  font-size: 11px;
}

.admin-repair-tool .button {
  justify-self: start;
  height: 31px;
  font-size: 11px;
}

.admin-job-payload-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 13px;
  display: grid;
}

.admin-job-payload {
  min-width: 0;
  overflow: hidden;
}

.admin-job-payload header {
  border-bottom: 1px solid #e2e7e4;
  justify-content: space-between;
  align-items: center;
  padding: 9px 11px;
  display: flex;
}

.admin-job-payload pre, .admin-model-attempt-content pre {
  color: #eff6f2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #252b28;
  max-height: 310px;
  margin: 0;
  padding: 11px;
  font: 11px / 1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: auto;
}

.admin-job-items {
  margin-top: 18px;
}

.admin-job-items-heading {
  align-items: end;
  margin-bottom: 10px;
}

.admin-job-items-heading h2 {
  margin: 0;
  font-size: 18px;
}

.admin-job-items-heading > span {
  color: #6f7d75;
  font-size: 11px;
}

.admin-job-item-card {
  background: #fff;
  border: 1px solid #dce4df;
  border-radius: 8px;
  overflow: hidden;
}

.admin-job-item-card + .admin-job-item-card {
  margin-top: 9px;
}

.admin-job-item-card > header, .admin-model-attempt > header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  display: flex;
}

.admin-job-item-card > header {
  background: #f8faf9;
  border-bottom: 1px solid #e4e9e6;
}

.admin-job-item-card > header > div, .admin-model-attempt > header > div {
  align-items: center;
  gap: 9px;
  display: flex;
}

.admin-job-item-card header strong, .admin-job-item-card header small, .admin-model-attempt header strong, .admin-model-attempt header small {
  display: block;
}

.admin-job-item-card header small, .admin-model-attempt header small {
  color: #7e8983;
  overflow-wrap: anywhere;
  margin-top: 2px;
  font-size: 10px;
}

.admin-job-item-sequence {
  color: #087f45;
  background: #e6f5ed;
  border-radius: 6px;
  place-items: center;
  width: 30px;
  height: 30px;
  font: 600 11px ui-monospace, monospace;
  display: grid;
}

.admin-job-item-meta {
  color: #737f78;
  flex-wrap: wrap;
  gap: 8px 17px;
  padding: 8px 12px;
  font-size: 10px;
  display: flex;
}

.admin-job-item-error {
  color: #a63b2c;
  background: #fff4f2;
  border-left: 2px solid #c34b39;
  margin: 0 12px 9px;
  padding: 5px 8px;
  font-size: 11px;
}

.admin-job-item-payload {
  margin: 0 12px 10px;
}

.admin-job-item-payload summary, .admin-model-attempt > details > summary {
  cursor: pointer;
  color: #30614a;
  font-size: 11px;
  font-weight: 600;
}

.admin-job-item-payload > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 7px;
  display: grid;
}

.admin-model-attempts {
  background: #fbfcfb;
  border-top: 1px solid #e6ebe8;
  gap: 7px;
  padding: 10px 12px 12px;
  display: grid;
}

.admin-model-attempt {
  background: #fff;
  border: 1px solid #dee5e1;
  border-radius: 7px;
  overflow: hidden;
}

.admin-model-attempt > header {
  border-bottom: 1px solid #e5eae7;
  padding-block: 8px;
}

.admin-model-attempt dl {
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  display: grid;
}

.admin-model-attempt dl > div {
  min-width: 0;
}

.admin-model-attempt dt {
  color: #7b857f;
  font-size: 9px;
}

.admin-model-attempt dd {
  overflow-wrap: anywhere;
  margin: 3px 0 0;
  font-size: 10px;
}

.admin-model-attempt > details {
  border-top: 1px solid #edf0ee;
  padding: 8px 10px;
}

.admin-model-attempt-content {
  gap: 8px;
  margin-top: 8px;
  display: grid;
}

.admin-model-attempt-content > div:not(.admin-model-io-heading) {
  border: 1px solid #e2e7e4;
  border-radius: 6px;
  padding: 8px;
}

.admin-model-attempt-content .admin-model-input-images {
  grid-template-columns: repeat(auto-fit, minmax(150px, 220px));
}

.admin-model-attempt-content .admin-model-input-images img {
  height: 200px;
}

.admin-model-attempt-empty {
  color: #7b8580;
  text-align: center;
  margin: 0;
  padding: 10px;
  font-size: 11px;
}

.admin-task-filter-note {
  background: #eef7f2;
  border-radius: 5px;
  gap: 5px;
  padding: 5px 8px;
  display: inline-flex;
  color: #476254 !important;
}

@media (max-width: 1180px) {
  .admin-diagnostic-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-repair-grid {
    grid-template-columns: 1fr;
  }

  .admin-diagnostic-storage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.prompt-scope-tree {
  position: sticky;
  top: 20px;
}

.prompt-tree-stage + .prompt-tree-stage {
  margin-top: 16px;
}

.prompt-tree-grade {
  gap: 3px;
  margin: 8px 0 0 10px;
  display: grid;
}

.prompt-tree-grade > span {
  color: var(--muted-foreground);
  font-size: 12px;
}

.prompt-tree-grade a {
  color: var(--foreground);
  border-radius: 5px;
  justify-content: space-between;
  padding: 7px 9px;
  font-size: 13px;
  display: flex;
}

.prompt-tree-grade a.active {
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .prompt-tree-grade a.active {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
  }
}

.prompt-tree-grade a.active {
  color: var(--primary);
}

.prompt-tree-grade small {
  color: var(--muted-foreground);
}

.prompt-config-main, .prompt-editor-list, .paper-type-list, .prompt-settings-form {
  gap: 14px;
  display: grid;
}

.prompt-config-main > .panel {
  margin-top: 0;
}

.prompt-settings-form label, .paper-type-editor > label {
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  display: grid;
}

.prompt-settings-form .textarea, .paper-type-editor .textarea {
  min-height: 150px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400;
}

.toggle-line {
  align-items: center;
  gap: 8px !important;
  display: flex !important;
}

.paper-type-create {
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  display: grid;
}

.paper-type-editor {
  border-top: 1px solid var(--border);
  gap: 10px;
  padding-top: 16px;
  display: grid;
}

.paper-type-heading {
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  display: grid;
}

.paper-type-heading label {
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
}

.paper-type-actions {
  gap: 8px;
  display: flex;
}

.paper-type-catalog {
  gap: 12px;
  display: grid;
}

.paper-type-catalog-list {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  display: grid;
}

.paper-type-catalog-item {
  border: 1px solid var(--border);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  background: #fff;
  border-radius: 8px;
  gap: 6px;
  padding: 12px;
  display: grid;
}

.paper-type-catalog-item:hover {
  border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .paper-type-catalog-item:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  }
}

.paper-type-catalog-item.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .paper-type-catalog-item.active {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent);
  }
}

.paper-type-catalog-title {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.paper-type-catalog-meta {
  color: var(--muted-foreground);
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  display: flex;
}

.paper-type-catalog-status {
  color: #15803d;
}

.paper-type-catalog-status.off {
  color: var(--muted-foreground);
}

.prompt-group {
  border: 1px solid var(--border);
  background: var(--muted);
  border-radius: 9px;
  gap: 12px;
  padding: 14px;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .prompt-group {
    background: color-mix(in srgb, var(--muted) 18%, white);
  }
}

.prompt-group-heading {
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.prompt-group-heading h3 {
  margin: 0;
  font-size: 14px;
}

.paper-type-settings-form {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  display: flex;
}

.paper-type-setting-field {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.paper-type-setting-field .input {
  width: 150px;
  min-height: 34px;
  color: var(--text-primary);
  padding-inline: 9px;
}

.paper-type-code-field .input {
  width: 140px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.paper-type-page-count .input {
  width: 68px;
}

.continuation-prompt-unused-note {
  color: #855b16;
  background: #fff8e8;
  border: 1px solid #e4bd78;
  border-radius: 5px;
  padding: 9px 11px;
  line-height: 1.5;
  display: none;
}

.paper-type-detail:has(input[name="includePreviousGroupLastPage"]:not(:checked)) .continuation-prompt-unused-note {
  display: block;
}

.prompt-card {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.prompt-card-heading {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.prompt-card-heading strong {
  font-size: 13px;
}

.prompt-card .textarea {
  min-height: 170px;
}

.prompt-card-note {
  color: var(--muted-foreground);
  font-size: 11px;
}

.paper-type-detail-heading {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.paper-type-detail-heading h2 {
  margin: 0;
  font-size: 18px;
}

.paper-type-detail-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.paper-type-workspace {
  z-index: 12;
  border-color: var(--primary);
  position: sticky;
  top: 12px;
  overflow: visible;
}

@supports (color: color-mix(in lab, red, red)) {
  .paper-type-workspace {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  }
}

.paper-type-workspace {
  box-shadow: 0 8px 24px #16281f12;
}

.paper-type-workspace-main {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 9px 14px;
  padding: 14px 16px;
  display: grid;
}

.paper-type-workspace-selector {
  color: var(--muted-foreground);
  letter-spacing: .02em;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.paper-type-workspace-selector .select {
  min-height: 38px;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
}

.paper-type-workspace-selector small {
  color: var(--primary);
}

.paper-type-readiness {
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  display: flex;
}

.paper-type-readiness > span:not(.paper-type-readiness-state) {
  background: var(--muted);
  color: var(--muted-foreground);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
}

.paper-type-readiness-state {
  border: 1px solid #0000;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
}

.paper-type-readiness-state.enabled, .paper-type-readiness-state.ready {
  color: #16723a;
  background: #eef9f1;
  border-color: #9ed5b0;
}

.paper-type-readiness-state.incomplete {
  color: #8a5b10;
  background: #fff8e9;
  border-color: #ebc17c;
}

.paper-type-activation-form .admin-action-fields {
  display: flex;
}

.paper-type-activation-form .button {
  white-space: nowrap;
}

.paper-type-missing-list, .paper-type-ready-note {
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 9px 16px;
  font-size: 12px;
  display: flex;
}

.paper-type-missing-list {
  color: #745019;
  background: #fffaf0;
}

.paper-type-missing-list a {
  color: #9a5b08;
  text-underline-offset: 3px;
  font-weight: 700;
  text-decoration: underline;
}

.paper-type-ready-note {
  color: #23683b;
  background: #f4fbf6;
}

.configuration-scope-badge {
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
}

.paper-type-metadata-body {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  display: flex;
}

.paper-type-detail > .panel-header > div, .paper-type-detection-panel > .panel-header > div {
  gap: 3px;
  display: grid;
}

.prompt-compact-settings {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) auto;
  align-items: end;
  padding: 14px;
}

.prompt-disclosure {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  scroll-margin-top: 150px;
  overflow: clip;
}

.prompt-disclosure[open] {
  border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .prompt-disclosure[open] {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  }
}

.prompt-disclosure > summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 11px 14px;
  list-style: none;
  display: flex;
}

.prompt-disclosure > summary::-webkit-details-marker {
  display: none;
}

.prompt-disclosure > summary:hover {
  background: var(--muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .prompt-disclosure > summary:hover {
    background: color-mix(in srgb, var(--muted) 32%, white);
  }
}

.prompt-disclosure > summary > span:first-child {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.prompt-disclosure > summary strong {
  font-size: 13px;
}

.prompt-disclosure > summary code {
  color: var(--muted-foreground);
  font-size: 11px;
}

.prompt-disclosure-editor {
  border-top: 1px solid var(--border);
  background: var(--muted);
  gap: 10px;
  padding: 14px;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .prompt-disclosure-editor {
    background: color-mix(in srgb, var(--muted) 16%, white);
  }
}

.prompt-disclosure-editor .textarea {
  min-height: 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.prompt-disclosure-editor .button {
  justify-self: end;
}

.model-stage-binding {
  background: #f7fbf8;
  border: 1px solid #dce8df;
  border-radius: 8px;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end;
  gap: 8px 12px;
  padding: 10px 12px;
  display: grid;
}

.model-stage-binding label {
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  display: grid;
}

.model-stage-binding small {
  grid-column: 1 / -1;
}

.prompt-configuration-badge {
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.prompt-configuration-badge.complete {
  color: #168044;
}

.prompt-configuration-badge.missing {
  color: #a15b08;
}

.prompt-configuration-badge.optional {
  color: var(--muted-foreground);
}

.answer-recognition-settings {
  gap: 12px;
}

.prompt-settings-section {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.prompt-settings-grid {
  grid-template-columns: minmax(150px, 190px) repeat(2, minmax(210px, 1fr));
  align-items: end;
  gap: 14px;
  display: grid;
}

.segmentation-settings {
  background: var(--muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .segmentation-settings {
    background: color-mix(in srgb, var(--muted) 14%, white);
  }
}

.segmentation-disabled-note {
  display: none;
}

.answer-recognition-settings:has(input[name="answerSegmentationEnabled"]:not(:checked)) .segmentation-dependent-settings {
  display: none;
}

.answer-recognition-settings:has(input[name="answerSegmentationEnabled"]:not(:checked)) .segmentation-disabled-note {
  display: block;
}

.unused-setting-note {
  color: #855b16;
  background: #fff8e8;
  border-left: 3px solid #d4a044;
  padding: 8px 10px;
}

.prompt-page-heading {
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  display: flex;
}

.prompt-page-heading .page-title {
  margin: 0;
}

.prompt-page-heading p {
  color: var(--muted-foreground);
  margin: 5px 0 0;
  font-size: 12px;
}

.prompt-config-layout {
  grid-template-columns: 210px 276px minmax(560px, 1fr);
  gap: 12px;
}

.prompt-scope-tree, .prompt-type-rail {
  max-height: calc(100vh - 36px);
  position: sticky;
  top: 18px;
  overflow: auto;
}

.prompt-scope-tree {
  flex-direction: column;
  display: flex;
}

.prompt-global-entry {
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  margin: auto 10px 10px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
}

.prompt-global-entry.active, .prompt-global-entry:hover {
  color: var(--primary);
  background: #eef7f1;
}

.prompt-type-rail {
  align-self: start;
}

.prompt-type-rail-header {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  display: flex;
}

.prompt-type-rail-header > div {
  gap: 3px;
  display: grid;
}

.prompt-type-rail-header small {
  color: var(--muted-foreground);
  font-size: 10px;
}

.prompt-type-rail-header strong {
  font-size: 13px;
}

.prompt-type-rail .icon-button {
  border: 1px solid var(--border);
  width: 32px;
  height: 32px;
  color: var(--muted-foreground);
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.prompt-type-rail .icon-button.active, .prompt-type-rail .icon-button:hover {
  color: var(--primary);
  background: #edf7f0;
  border-color: #afd0bb;
}

.prompt-type-create-disclosure {
  border-bottom: 1px solid var(--border);
}

.prompt-type-create-disclosure > summary {
  color: var(--primary);
  cursor: pointer;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
  display: flex;
}

.prompt-type-create-disclosure > summary::-webkit-details-marker {
  display: none;
}

.prompt-type-create-disclosure .paper-type-create {
  grid-template-columns: 1fr;
  padding: 0 12px 12px;
}

.prompt-type-list {
  padding: 8px;
  display: grid;
}

.prompt-type-item {
  border: 1px solid #0000;
  border-radius: 7px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  display: grid;
  overflow: hidden;
}

.prompt-type-item + .prompt-type-item {
  margin-top: 4px;
}

.prompt-type-item > a {
  color: var(--foreground);
  gap: 5px;
  padding: 10px;
  display: grid;
}

.prompt-type-item > a > span {
  gap: 2px;
  display: grid;
}

.prompt-type-item > a strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.prompt-type-item > a code, .prompt-type-item > a small {
  color: var(--muted-foreground);
  font-size: 10px;
}

.prompt-type-item:hover {
  background: #f7faf8;
}

.prompt-type-item.active {
  box-shadow: inset 3px 0 0 var(--primary);
  background: #f1f8f3;
  border-color: #b9d7c2;
}

.prompt-type-row-actions {
  grid-area: 1 / 2;
  align-items: center;
  gap: 3px;
  padding: 8px 7px 0 0;
  display: flex;
}

.prompt-type-row-actions .admin-action-fields {
  display: flex;
}

.prompt-type-icon-action {
  color: #78827d;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
}

.prompt-type-icon-action:hover, .prompt-type-icon-action.active {
  color: var(--primary);
  background: #fff;
  border-color: #b9d7c2;
}

.prompt-type-icon-action.danger-text:hover {
  color: #c7473d;
  background: #fff6f5;
  border-color: #efc4bf;
}

.prompt-type-inline-editor {
  background: #fff;
  border-top: 1px solid #dbe9df;
  grid-column: 1 / -1;
  gap: 7px;
  padding: 10px;
  display: grid;
}

.prompt-type-inline-form {
  gap: 7px;
  display: grid;
}

.prompt-type-inline-form label {
  color: var(--muted-foreground);
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  display: grid;
}

.prompt-type-inline-form .input {
  min-height: 31px;
  font-size: 12px;
}

.prompt-type-inline-editor .button {
  min-height: 31px;
  font-size: 11px;
}

.prompt-type-empty {
  color: var(--muted-foreground);
  text-align: center;
  gap: 4px;
  padding: 18px 10px;
  display: grid;
}

.prompt-type-empty strong {
  color: var(--foreground);
  font-size: 12px;
}

.prompt-type-empty span {
  font-size: 11px;
  line-height: 1.5;
}

.prompt-config-main {
  min-width: 0;
}

.configuration-reset-boundary {
  display: contents;
}

.paper-type-workspace-title {
  align-items: center;
  gap: 11px;
  min-width: 0;
  display: flex;
}

.paper-type-workspace-title > div {
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.paper-type-workspace-title h2 {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 17px;
  overflow: hidden;
}

.paper-type-workspace-title code {
  color: var(--muted-foreground);
  font-size: 10px;
}

.paper-type-workspace-main {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.prompt-workflow-list {
  gap: 10px;
  display: grid;
}

.prompt-workflow {
  scroll-margin-top: 142px;
  overflow: clip;
}

.prompt-workflow > summary {
  cursor: pointer;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 64px;
  padding: 10px 15px;
  list-style: none;
  display: grid;
}

.prompt-workflow > summary::-webkit-details-marker {
  display: none;
}

.prompt-workflow > summary:hover {
  background: #fafcfb;
}

.prompt-workflow > summary > span:nth-child(2) {
  gap: 3px;
  display: grid;
}

.prompt-workflow > summary strong {
  font-size: 14px;
}

.prompt-workflow > summary small {
  color: var(--muted-foreground);
  font-size: 11px;
}

.prompt-workflow-index {
  color: #34734a;
  background: #f2f8f4;
  border: 1px solid #cfe1d4;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  display: inline-flex;
}

.prompt-workflow[open] > summary {
  border-bottom: 1px solid var(--border);
  background: #fbfdfc;
}

.prompt-workflow-body {
  gap: 12px;
  padding: 14px;
  display: grid;
}

.prompt-record-error {
  color: #9a3731;
  background: #fff5f4;
  border: 1px solid #e8b7b2;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  font-size: 12px;
  display: flex;
}

.prompt-subject-note {
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground);
  background: #f7faf8;
  font-size: 12px;
}

@media (max-width: 900px) {
  .prompt-config-layout {
    grid-template-columns: 180px 230px minmax(520px, 1fr);
    overflow-x: auto;
  }

  .paper-type-catalog-list {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }

  .paper-type-workspace-main {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .prompt-compact-settings, .prompt-settings-grid {
    grid-template-columns: 1fr;
  }

  .paper-type-metadata-body {
    flex-direction: column;
    align-items: stretch;
  }
}

.model-profile-fields {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  display: grid;
}

.model-config-grid {
  gap: 8px;
  display: grid;
}

.model-config-grid.two-columns {
  grid-template-columns: 1fr 1fr;
}

.model-node-limit-fields {
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: 8px;
  display: grid;
}

.model-group-row-actions {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px;
  margin-top: 10px;
  display: flex;
}

.model-weight-form, .model-weight-form .admin-action-fields {
  align-items: flex-end;
  gap: 6px;
  display: flex;
}

.model-weight-form label {
  color: var(--muted-foreground);
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  display: grid;
}

.model-weight-form .input {
  width: 72px;
  min-height: 34px;
}

.model-group-row-actions .button {
  min-height: 34px;
  padding: 6px 10px;
}

.model-config-field {
  color: var(--foreground);
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  display: grid;
}

.model-config-field small {
  font-weight: 400;
  line-height: 1.5;
}

.model-config-checkbox {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.model-config-checkbox small {
  flex-basis: 100%;
  padding-left: 21px;
  font-weight: 400;
  line-height: 1.5;
}

.model-thinking-fields {
  border: 1px solid var(--border);
  background: #fafcfb;
  border-radius: 8px;
  gap: 10px;
  margin: 2px 0;
  padding: 12px;
  display: grid;
}

.model-thinking-fields legend {
  color: var(--foreground);
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
}

.model-config-notice {
  color: #72591b;
  background: #fff9e8;
  border-left: 3px solid #d4a72c;
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.55;
}

.admin-action-fields {
  display: contents;
}

.admin-sms-page {
  gap: 18px;
  display: grid;
}

.admin-login-form {
  width: min(420px, 100vw - 32px);
}

.admin-login-form .panel-body {
  border: 0;
  gap: 14px;
  margin: 0;
  padding: 20px;
  display: grid;
}

.admin-login-error {
  color: var(--danger);
  margin: -2px 0 0;
  font-size: 13px;
}

.admin-page-heading p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 13px;
}

.admin-fixed-sms-panel .panel-header, .admin-sms-history-panel .panel-header {
  min-height: 66px;
}

.admin-fixed-sms-panel .panel-header > div, .admin-sms-history-panel .panel-header > div {
  gap: 4px;
  display: grid;
}

.admin-fixed-sms-panel .panel-header p, .admin-sms-history-panel .panel-header p {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
  font-weight: 400;
}

.admin-fixed-sms-panel .panel-header > svg, .admin-sms-history-panel .panel-header > svg {
  color: var(--primary);
}

.admin-fixed-sms-create {
  border-bottom: 1px solid var(--border);
  background: #fbfdfc;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, .72fr) auto auto;
  align-items: end;
  gap: 12px;
  padding: 18px;
  display: grid;
}

.admin-fixed-sms-create .field {
  gap: 6px;
  display: grid;
}

.admin-fixed-sms-create .field > span {
  color: #39443e;
  font-size: 12px;
  font-weight: 650;
}

.admin-fixed-sms-enabled {
  color: #46524b;
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  font-size: 13px;
  display: inline-flex;
}

.admin-fixed-sms-enabled input {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
}

.admin-fixed-sms-enabled.compact {
  min-height: 34px;
}

.admin-sms-code-input {
  letter-spacing: .12em;
  width: 150px;
  font: 700 17px / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.admin-fixed-sms-table-wrap, .admin-sms-history-wrap {
  overflow-x: auto;
}

.admin-fixed-sms-table th:first-child {
  width: 24%;
}

.admin-fixed-sms-table th:nth-child(2) {
  width: 22%;
}

.admin-fixed-sms-table th:nth-child(3) {
  width: 18%;
}

.admin-fixed-sms-table th:nth-child(4) {
  width: 24%;
}

.admin-fixed-sms-table th:nth-child(5) {
  width: 12%;
}

.admin-fixed-sms-row {
  align-items: center;
  gap: 8px;
  display: flex;
}

.admin-fixed-sms-edit {
  flex: 1;
  grid-template-columns: 22fr 18fr 24fr auto;
  align-items: center;
  gap: 12px;
  display: grid;
}

.admin-fixed-sms-edit time {
  color: var(--muted);
  font-size: 13px;
}

.admin-fixed-sms-empty {
  color: var(--muted);
  text-align: center;
  padding: 34px 18px;
}

.admin-sms-query-form {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 10px;
  padding: 18px;
  display: flex;
}

.admin-sms-query-form .input {
  max-width: 340px;
}

.admin-sms-code-value {
  letter-spacing: .1em;
  font: 700 18px / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.admin-sms-credential-state {
  color: var(--muted);
  white-space: nowrap;
  margin-top: 5px;
  display: block;
}

.admin-sms-trace {
  min-width: 190px;
  max-width: 320px;
}

.admin-sms-trace code, .admin-sms-trace span, .admin-sms-trace small {
  overflow-wrap: anywhere;
  display: block;
}

.admin-sms-trace code {
  color: #315443;
  font-size: 11px;
}

.admin-sms-trace span {
  color: var(--danger);
  margin-top: 4px;
  font-weight: 650;
}

.admin-sms-trace small {
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.45;
}

.admin-fixed-sms-delete-dialog {
  position: relative;
}

.admin-fixed-sms-delete-dialog > button:first-child {
  width: 30px;
  height: 30px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 6px;
  place-items: center;
  display: grid;
  position: absolute;
  top: 14px;
  right: 14px;
}

.admin-fixed-sms-delete-dialog > button:first-child:hover {
  color: var(--foreground);
  background: #f2f4f3;
}

.admin-fixed-sms-delete-dialog form {
  justify-content: flex-end;
  display: flex;
}

@media (max-width: 900px) {
  .admin-fixed-sms-create {
    grid-template-columns: 1fr 1fr;
  }

  .admin-fixed-sms-edit {
    grid-template-columns: 1fr auto;
  }

  .admin-fixed-sms-edit time {
    display: none;
  }
}

.admin-tip {
  z-index: 1000;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  width: fit-content;
  max-width: min(390px, 100vw - 44px);
  color: var(--foreground);
  background: #fff;
  border-radius: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 16px;
  animation: .18s ease-out admin-tip-slide-in;
  display: grid;
  position: fixed;
  top: 78px;
  right: 22px;
  overflow: hidden;
  box-shadow: 0 14px 34px #0f172a29;
}

.admin-tip > span:not(.teacher-tip-countdown) {
  overflow-wrap: anywhere;
  min-width: 0;
}

.admin-tip.error {
  border-left-color: #c2412d;
}

.admin-tip.success > svg {
  color: #16825d;
}

.admin-tip.error > svg {
  color: #c2412d;
}

.admin-tip button {
  width: 28px;
  height: 28px;
  color: var(--muted-foreground);
  background: none;
  border: 0;
  border-radius: 4px;
  place-items: center;
  display: grid;
}

.teacher-tip-countdown {
  transform-origin: 0;
  height: 3px;
  animation: teacher-tip-countdown var(--teacher-tip-auto-close-duration) linear forwards;
  background: #16a765;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.admin-tip.error .teacher-tip-countdown {
  background: #c2412d;
}

@keyframes admin-tip-slide-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes teacher-tip-countdown {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

body:has(.exam-detail-page, .batch-detail-page) {
  background: #f6f1e7;
}

body:has(.exam-detail-page, .batch-detail-page) .teacher-shell {
  grid-template-columns: 176px minmax(0, 1fr) !important;
}

body:has(.exam-detail-page, .batch-detail-page) .teacher-sidebar {
  color: #f8f1e6;
  height: 100vh;
  position: sticky;
  top: 0;
  background: #17253a !important;
  border-right: 0 !important;
  padding: 24px 14px 20px !important;
}

body:has(.exam-detail-page, .batch-detail-page) .teacher-sidebar > div:first-child {
  height: 42px !important;
  margin-bottom: 28px !important;
}

body:has(.exam-detail-page, .batch-detail-page) .teacher-sidebar > div:first-child > div:first-child {
  font-family: Songti SC, STSong, serif;
  font-size: 20px;
  color: #fff !important;
  background: none !important;
}

body:has(.exam-detail-page, .batch-detail-page) .teacher-sidebar > div:first-child strong {
  color: #fff;
  font-family: Songti SC, STSong, serif;
  font-size: 22px !important;
}

body:has(.exam-detail-page, .batch-detail-page) .teacher-sidebar nav a {
  border-left: 2px solid #0000;
  color: #cbd5dc !important;
  border-radius: 0 !important;
  height: 48px !important;
  padding: 0 12px !important;
}

body:has(.exam-detail-page, .batch-detail-page) .teacher-sidebar nav a:hover {
  background: #ffffff0a;
  border-left-color: #c54132;
  color: #fff !important;
}

body:has(.batch-detail-page) .teacher-sidebar-account {
  border-top-color: #ffffff29;
}

body:has(.batch-detail-page) .teacher-sidebar-account > a {
  color: #cbd5dc;
}

body:has(.batch-detail-page) .teacher-sidebar-account > a:hover {
  color: #fff;
  background: #ffffff14;
}

body:has(.exam-detail-page, .batch-detail-page) .teacher-topbar {
  display: none !important;
}

body:has(.exam-detail-page, .batch-detail-page) .teacher-main {
  background: #f6f1e7;
  max-width: 1800px !important;
  margin: 0 !important;
  padding: 20px clamp(24px, 3.8vw, 58px) 40px !important;
}

.exam-workbench-header {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  display: grid;
}

.exam-workbench-eyebrow {
  color: #b33629;
  letter-spacing: .12em;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 800;
  display: flex;
}

.exam-workbench-eyebrow a {
  color: inherit;
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.exam-workbench-header h1 {
  color: #17253a;
  margin: 3px 0 5px;
  font: 600 34px / 1.05 Songti SC, STSong, Georgia, serif;
}

.exam-workbench-meta {
  color: #5f655f;
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex;
}

.exam-workbench-tabs {
  border-bottom: 1px solid #d8d0c1;
  align-items: stretch;
  gap: 0;
  height: 46px;
  display: flex;
}

.exam-workbench-tabs button, .exam-workbench-tabs a, .exam-workbench-tabs span {
  color: #5f655f;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 3px solid #0000;
  justify-content: center;
  align-items: center;
  min-width: 94px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
}

.exam-workbench-tabs .active {
  color: #17253a;
  border-bottom-color: #c54132;
}

.exam-workbench-tabs span[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .45;
}

.exam-workbench-tab-content {
  padding-top: 10px;
  position: relative;
}

.exam-detail-page .paper-workbench, .batch-detail-page .grading-workbench {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.exam-detail-page .paper-workbench-toolbar {
  z-index: 2;
  background: none;
  border: 0;
  justify-content: flex-end;
  width: auto;
  min-height: 46px;
  padding: 0;
  position: absolute;
  top: -68px;
  left: 0;
  right: 0;
}

.exam-detail-page .paper-toolbar-actions {
  flex-wrap: nowrap;
}

.exam-detail-page .paper-recognition-error, .exam-detail-page .paper-recognition-paused {
  margin: -8px 0 10px;
}

.exam-detail-page .paper-progress-summary > strong, .exam-detail-page .paper-progress-summary > span:not(.paper-blocker-count, .paper-ready-count) {
  display: none;
}

.exam-detail-page .paper-workbench-grid, .batch-detail-page .review-workbench-grid {
  gap: 18px;
  height: calc(100vh - 138px);
  min-height: 0;
}

.exam-detail-page .paper-workbench-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr) minmax(320px, .9fr);
}

.batch-detail-page .review-workbench-grid {
  grid-template-columns: minmax(480px, 1.35fr) minmax(220px, .52fr) minmax(350px, .85fr);
}

.exam-detail-page .paper-canvas-panel, .exam-detail-page .paper-question-tree, .exam-detail-page .paper-question-editor, .batch-detail-page .review-paper-panel, .batch-detail-page .review-tree-panel, .batch-detail-page .review-question-panel {
  border: 1px solid #d8d0c1;
  border-radius: 0;
  min-width: 0;
  height: 100%;
}

.exam-detail-page .paper-canvas-panel, .batch-detail-page .review-paper-panel {
  background: none;
}

.exam-detail-page .paper-canvas-scroll, .batch-detail-page .review-paper-scroll {
  scroll-behavior: smooth;
  background: none;
  height: 100%;
  padding: 0 8px 18px 0;
  overflow: auto;
}

.paper-pages-stack, .review-paper-pages {
  gap: 14px;
  display: grid;
}

.paper-page-frame, .review-paper-page {
  background: #fff;
  border: 1px solid #d8d0c1;
  scroll-margin-top: 4px;
}

.paper-page-frame.active, .review-paper-page.active {
  border-color: #245b87;
}

.paper-page-label {
  color: #6e746f;
  background: #eee7da;
  border-bottom: 1px solid #d8d0c1;
  justify-content: space-between;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.paper-page-expand-button {
  color: #526773;
  background: none;
  border: 0;
  place-items: center;
  width: 26px;
  height: 26px;
  display: grid;
}

.paper-page-expand-button:hover {
  color: #1f526f;
  background: #dce4e6;
}

.paper-page-expand-button:focus-visible {
  outline-offset: 1px;
  outline: 2px solid #245b87;
}

.paper-page-dialog-overlay {
  z-index: 80;
  background: #181e22c2;
  position: fixed;
  inset: 0;
}

.answer-fill-dialog-overlay {
  z-index: 90;
  background: #181e2280;
  position: fixed;
  inset: 0;
}

.answer-fill-dialog {
  z-index: 91;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  outline: none;
  width: min(520px, 100vw - 32px);
  padding: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 24px 80px #0c121647;
}

.answer-fill-dialog h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.answer-fill-dialog > p {
  margin: 0 0 18px;
}

.paper-recognition-confirmation-dialog {
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  display: grid;
}

.paper-recognition-confirmation-icon {
  background: var(--primary-soft);
  width: 40px;
  height: 40px;
  color: var(--primary);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.paper-recognition-confirmation-copy {
  min-width: 0;
  padding-right: 24px;
}

.paper-recognition-confirmation-copy h2 {
  margin: 0 0 6px;
}

.paper-recognition-confirmation-copy p {
  margin: 0;
  line-height: 1.65;
}

.paper-recognition-overwrite-warning {
  color: #9d3326;
  background: #fff3f0;
  border: 1px solid #efb5aa;
  border-radius: 6px;
  grid-column: 1 / -1;
  padding: 10px 12px;
  font-size: 13px;
  margin: 18px 0 0 !important;
}

.paper-recognition-confirmation-dialog .answer-fill-dialog-actions {
  grid-column: 1 / -1;
}

.answer-fill-options {
  gap: 10px;
  display: grid;
}

.answer-fill-options label {
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 6px;
  grid-template-columns: 18px 1fr;
  gap: 3px 9px;
  padding: 13px;
  display: grid;
}

.answer-fill-options input {
  grid-row: 1 / span 2;
  margin-top: 2px;
}

.answer-fill-options span, .answer-file-picker small {
  color: var(--muted);
  font-size: 12px;
}

.answer-generation-summary {
  border-block: 1px solid var(--border);
  grid-template-columns: repeat(3, 1fr);
  margin: 18px 0;
  display: grid;
}

.answer-generation-summary span {
  text-align: center;
  gap: 2px;
  min-width: 0;
  padding: 12px 10px;
  display: grid;
}

.answer-generation-summary span + span {
  border-left: 1px solid var(--border);
}

.answer-generation-summary strong {
  color: #17253a;
  font-variant-numeric: tabular-nums;
  font-size: 20px;
}

.answer-generation-summary small, .answer-fill-scope-options small {
  color: var(--muted);
  font-size: 11px;
}

.answer-fill-scope-options {
  gap: 8px;
  display: grid;
}

.answer-fill-scope-options label {
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 6px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-height: 60px;
  padding: 12px;
  display: grid;
}

.answer-fill-scope-options label:has(input:checked) {
  background: #f0f5f7;
  border-color: #7393a8;
}

.answer-fill-scope-options label.force:has(input:checked) {
  background: #fff3f0;
  border-color: #d69083;
}

.answer-fill-scope-options label.disabled {
  cursor: not-allowed;
  opacity: .5;
}

.answer-fill-scope-options input {
  margin-top: 3px;
}

.answer-fill-scope-options span {
  gap: 3px;
  display: grid;
}

.answer-fill-scope-notice {
  color: #315d43;
  background: #f0faf4;
  border: 1px solid #a9d9bc;
  border-radius: 10px;
  gap: 4px;
  padding: 13px 14px;
  display: grid;
}

.answer-fill-scope-notice small {
  color: #64806f;
  font-size: 11px;
  line-height: 1.6;
}

.answer-fill-scope-notice.force {
  color: #a43e35;
  background: #fff3f1;
  border-color: #e4a39d;
}

.answer-fill-scope-notice.force small {
  color: #a85b54;
}

.answer-fill-overwrite-warning {
  color: #8f3025;
  background: #fff0ed;
  border-left: 3px solid #b94535;
  padding: 8px 10px;
  font-size: 12px;
  margin: 10px 0 0 !important;
}

.answer-file-picker {
  gap: 7px;
  margin-top: 14px;
  font-weight: 600;
  display: grid;
}

.answer-file-picker input {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 9px;
  font-weight: 400;
}

.answer-fill-dialog-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  display: flex;
}

.answer-fill-dialog-close {
  width: 30px;
  height: 30px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 5px;
  place-items: center;
  display: grid;
  position: absolute;
  top: 14px;
  right: 14px;
}

.answer-fill-dialog-close:hover {
  color: var(--foreground);
  background: #f1f0ec;
}

.paper-page-dialog {
  z-index: 81;
  background: #f5f4f0;
  border: 1px solid #91999d;
  outline: none;
  width: min(96vw, 1600px);
  height: 94vh;
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 24px 80px #0c121652;
}

.paper-page-dialog-layout {
  grid-template-rows: 54px minmax(0, 1fr);
  height: 100%;
  display: grid;
}

.paper-page-dialog-toolbar {
  background: #fff;
  border-bottom: 1px solid #c9c5bb;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 16px 0 20px;
  display: flex;
}

.paper-page-dialog-toolbar > div:first-child {
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.paper-page-dialog-toolbar h2 {
  color: #24333b;
  margin: 0;
  font-size: 16px;
}

.paper-page-dialog-toolbar span {
  color: #707a7e;
  font-size: 12px;
}

.paper-page-dialog-toolbar button {
  color: #536066;
  background: none;
  border: 1px solid #0000;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.paper-page-dialog-toolbar button:hover {
  background: #f1f0ec;
  border-color: #c9c5bb;
}

.paper-page-dialog-toolbar button.active {
  color: #079c4e;
  background: #e7f8ee;
  border-color: #74c997;
}

.paper-page-dialog-toolbar button.danger:hover:not(:disabled) {
  color: #c64a40;
  border-color: #e4aaa5;
}

.paper-page-dialog-toolbar button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.paper-page-dialog-actions {
  align-items: center;
  gap: 3px;
  display: flex;
}

.paper-page-dialog-toolbar .paper-page-dialog-zoom-value {
  color: #34454e;
  font-variant-numeric: tabular-nums;
  justify-content: center;
  align-items: center;
  width: 58px;
  height: 34px;
  font-size: 12px;
  display: inline-flex;
}

.paper-page-dialog-workspace {
  background: #dfe2e2;
  min-height: 0;
  padding: 20px;
  display: block;
  position: relative;
  overflow: auto;
}

.paper-page-dialog-stack {
  align-content: start;
  gap: 18px;
  min-width: 100%;
  display: grid;
}

.paper-page-dialog-page {
  min-width: 100%;
  display: grid;
}

.paper-page-canvas.dialog, .review-paper-canvas.dialog {
  max-width: none;
  min-height: 0;
  margin: 0 auto;
  box-shadow: 0 8px 26px #19202433;
}

.review-page-dialog-workspace {
  overscroll-behavior: contain;
}

.exam-detail-page .paper-page-canvas, .batch-detail-page .review-paper-canvas {
  width: 100%;
  max-width: none;
  box-shadow: none;
}

.exam-detail-page .paper-tree-heading, .batch-detail-page .review-question-list-heading {
  border-top: 0;
  border-bottom: 0;
  min-height: 66px;
  padding: 13px 16px 10px;
}

.exam-detail-page .paper-tree-heading h2, .batch-detail-page .review-question-list-heading h2 {
  font: 600 21px / 1.2 Songti SC, STSong, serif;
}

.exam-detail-page .paper-tree-search {
  border-color: #d8d0c1;
  border-radius: 0;
  height: 38px;
  margin: 0 12px 8px;
}

.exam-detail-page .paper-tree-filter {
  border-color: #d8d0c1;
  border-radius: 0;
  width: calc(100% - 24px);
  height: 36px;
  margin: 0 12px 10px;
}

.exam-detail-page .paper-tree-page.active, .batch-detail-page .review-tree-page.active {
  background: #edf3f5;
  border-color: #b9cad5;
}

.exam-detail-page .paper-tree-question {
  min-height: 40px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.exam-detail-page .paper-tree-question:hover, .exam-detail-page .paper-tree-question.selected, .batch-detail-page .review-tree-questions button.selected {
  background: #f2e7d8;
  border-left-color: #c54132;
}

.exam-detail-page .question-editor-heading, .batch-detail-page .review-question-panel > .review-question-list-heading {
  border-top: 0;
  border-bottom: 1px solid #d8d0c1;
  min-height: 66px;
  padding: 13px 2px 10px;
}

.exam-detail-page .paper-question-editor, .batch-detail-page .review-question-panel {
  background: none;
  padding: 0 14px;
}

.exam-detail-page .paper-editor-fields {
  padding-left: 0;
  padding-right: 0;
}

.exam-detail-page .question-editor-scroll, .batch-detail-page .review-editor-scroll {
  scrollbar-gutter: stable;
  padding: 12px 2px;
}

.exam-detail-page .question-editor-actions {
  margin: 0 -14px;
}

.exam-detail-page .answer-key-strip {
  display: none;
}

.submission-management-view {
  min-height: calc(100vh - 138px);
}

.batch-create-panel {
  background: #fffdf8eb;
  border: 1px solid #d8d0c1;
  grid-template-columns: minmax(260px, 1fr) minmax(620px, 1.35fr);
  align-items: center;
  gap: 24px;
  min-height: 96px;
  padding: 16px 18px;
  display: grid;
}

.batch-create-copy h2, .batch-create-copy p {
  margin: 0;
}

.batch-create-copy h2 {
  font: 600 21px / 1.2 Songti SC, STSong, serif;
}

.batch-create-copy p {
  color: #6e746f;
  margin-top: 5px;
  font-size: 11px;
}

.batch-create-fields {
  grid-template-columns: minmax(180px, .9fr) minmax(150px, .65fr) minmax(250px, 1.1fr);
  align-items: end;
  gap: 10px;
  display: grid;
}

.batch-pdf-upload {
  text-align: left !important;
  border-radius: 0 !important;
  grid-template-rows: auto auto !important;
  grid-template-columns: auto 1fr !important;
  justify-items: start !important;
  column-gap: 9px !important;
  min-height: 64px !important;
  padding: 9px 12px !important;
}

.batch-pdf-upload svg {
  grid-row: 1 / span 2;
}

.demo-batch-list {
  border-top: 1px solid #d8d0c1;
  gap: 14px;
  margin-top: 34px;
  padding-top: 18px;
  display: grid;
}

.demo-batch-card {
  color: #17253a;
  background: #fffdf8eb;
  border: 1px solid #d8d0c1;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 14px 16px;
  display: grid;
}

.demo-batch-card:hover {
  border-color: #245b87;
  box-shadow: 3px 3px #17253a1a;
}

.demo-batch-copy {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.demo-batch-copy strong {
  font: 600 20px / 1.2 Songti SC, STSong, serif;
}

.demo-batch-copy small {
  color: #6e746f;
}

.demo-batch-action {
  color: #245b87;
  border: 1px solid #d8d0c1;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
}

.submission-management-heading {
  background: #fffdf8e6;
  border: 1px solid #d8d0c1;
  justify-content: space-between;
  align-items: center;
  min-height: 62px;
  padding: 12px 16px;
  display: flex;
}

.submission-management-heading h2, .submission-management-heading p {
  margin: 0;
}

.submission-management-heading h2 {
  font: 600 21px / 1.2 Songti SC, STSong, serif;
}

.submission-management-heading p, .submission-management-heading > span {
  color: #6e746f;
  font-size: 11px;
}

.submission-management-view .submission-batch-layout {
  margin-top: 14px;
}

.batch-detail-page .exam-workbench-tabs {
  margin-bottom: 10px;
}

.batch-detail-page .missing-students-strip {
  border-radius: 0;
  margin: 0 0 10px;
}

.batch-detail-page .review-submission-toolbar {
  background: #fffdf8eb;
  border: 1px solid #d8d0c1;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin-bottom: 10px;
  padding: 8px 11px;
  display: flex;
}

.batch-detail-page .review-submission-selector {
  grid-template-columns: minmax(150px, .7fr) minmax(250px, 1.3fr);
  gap: 7px;
  min-width: min(520px, 42vw);
  display: grid;
}

.batch-detail-page .review-student-search {
  align-items: center;
  display: flex;
  position: relative;
}

.batch-detail-page .review-student-search svg {
  color: #6e746f;
  position: absolute;
  left: 9px;
}

.batch-detail-page .review-student-search input, .batch-detail-page .review-submission-selector select, .batch-detail-page .review-mode-select {
  background: #fff;
  border: 1px solid #d8d0c1;
  border-radius: 0;
  height: 34px;
  padding: 6px 8px;
  font-size: 11px;
}

.batch-detail-page .review-student-search input {
  width: 100%;
  padding-left: 29px;
}

.batch-detail-page .review-submission-meta {
  color: #6e746f;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 11px;
  display: flex;
}

.batch-detail-page .review-submission-meta strong {
  color: #17253a;
  font-size: 13px;
}

.batch-detail-page .review-mode-select {
  margin-left: auto;
}

.review-task-menu {
  position: relative;
}

.review-task-menu summary {
  color: #17253a;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d8d0c1;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  list-style: none;
  display: flex;
}

.review-task-menu summary::-webkit-details-marker {
  display: none;
}

.review-task-menu[open] .review-task-actions {
  display: grid;
}

.batch-detail-page .review-task-actions {
  z-index: 20;
  background: #fffdf8;
  border: 1px solid #d8d0c1;
  gap: 6px;
  width: 180px;
  padding: 8px;
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  box-shadow: 4px 4px #17253a1f;
}

.batch-detail-page .review-task-actions .button {
  justify-content: center;
  width: 100%;
  height: 34px;
  padding: 0 9px;
  font-size: 11px;
}

.batch-detail-page .review-tree-panel, .batch-detail-page .review-question-panel {
  background: #fffdf8eb;
  flex-direction: column;
  display: flex;
}

.review-tree-scroll {
  flex: 1;
  min-height: 0;
  padding: 0 8px 14px;
  overflow-y: auto;
}

.review-tree-page {
  border: 1px solid #0000;
  margin-bottom: 6px;
}

.review-tree-page-title {
  color: #6e746f;
  text-align: left;
  background: none;
  border: 0;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 38px;
  padding: 5px 7px;
  display: grid;
}

.review-tree-page-title strong {
  color: #17253a;
  font-size: 11px;
}

.review-tree-page-title span {
  font-size: 9px;
}

.review-tree-page-title > svg:first-child {
  transition: transform .14s;
}

.review-tree-page-title > svg:first-child.open {
  transform: rotate(90deg);
}

.review-tree-filters {
  background: #f4efe6;
  border: 1px solid #d8d0c1;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 8px 8px 6px;
  padding: 3px;
  display: grid;
}

.review-tree-filters button {
  color: #6e746f;
  background: none;
  border: 0;
  height: 27px;
  font-size: 10px;
  font-weight: 700;
}

.review-tree-filters button.active {
  color: #17253a;
  background: #fffdf8;
  box-shadow: 0 1px 3px #17253a1f;
}

.review-tree-questions {
  gap: 3px;
  padding: 0 5px 8px 28px;
  display: grid;
}

.review-tree-questions button {
  color: #6e746f;
  text-align: left;
  background: none;
  border: 0;
  border-left: 2px solid #0000;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 42px;
  padding: 6px 8px;
  display: grid;
}

.review-tree-questions button strong {
  color: #17253a;
  font-size: 11px;
}

.review-tree-questions button span {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.review-tree-questions button.wrong > svg {
  color: #c54132;
}

.review-tree-questions button.pending > svg {
  color: #d58a1b;
}

.review-pending-configuration {
  color: #9a6618;
  background: #fff9ec;
  border: 1px solid #f1d7a8;
  border-radius: 7px;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.review-pending-configuration > div {
  gap: 4px;
  display: grid;
}

.review-pending-configuration strong {
  color: #70470e;
  font-size: 13px;
}

.review-pending-configuration span {
  font-size: 11px;
  line-height: 1.6;
}

.review-tree-empty {
  color: #7a7f88;
  text-align: center;
  padding: 28px 12px;
  font-size: 11px;
}

.score-overview-panel {
  background: #fffdf8eb;
  border: 1px solid #d8d0c1;
}

.score-overview-heading {
  border-bottom: 1px solid #d8d0c1;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 82px;
  padding: 16px 18px;
  display: flex;
}

.score-overview-heading h2, .score-overview-heading p {
  margin: 0;
}

.score-overview-heading h2 {
  font: 600 22px / 1.2 Songti SC, STSong, serif;
}

.score-overview-heading p, .score-overview-heading > span {
  color: #6e746f;
  margin-top: 5px;
  font-size: 11px;
}

.score-overview-table {
  border-collapse: collapse;
  width: 100%;
}

.score-overview-table th, .score-overview-table td {
  text-align: left;
  border-bottom: 1px solid #d8d0c1;
  height: 58px;
  padding: 10px 16px;
  font-size: 12px;
}

.score-overview-table th {
  color: #555b57;
  background: #eee7da;
  height: 42px;
  font-size: 10px;
}

.score-overview-table td:last-child a {
  color: #245b87;
  font-weight: 700;
}

.batch-management-dashboard {
  gap: 12px;
  display: grid;
}

.exam-batch-home {
  align-content: start;
  gap: 12px;
  display: grid;
}

.batch-home-toolbar {
  background: #fffdf8f0;
  border: 1px solid #d8d0c1;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding: 12px 16px;
  display: flex;
}

.batch-home-toolbar h2, .batch-home-toolbar p {
  margin: 0;
}

.batch-home-toolbar h2 {
  color: #17253a;
  margin-top: 2px;
  font: 600 20px / 1.2 Songti SC, STSong, serif;
}

.batch-home-toolbar p {
  color: #5f655f;
  margin-top: 5px;
  font-size: 11px;
}

.batch-accordion-list {
  gap: 8px;
  display: grid;
}

.batch-accordion {
  background: #fffdf8f0;
  border: 1px solid #d8d0c1;
}

.batch-accordion.expanded {
  border-color: #a9a396;
  box-shadow: 3px 3px #17253a14;
}

.batch-accordion-trigger {
  color: #4f5753;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  grid-template-columns: 36px minmax(220px, 1fr) 100px 110px max-content 22px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 9px 14px;
  display: grid;
}

.batch-accordion-trigger:hover {
  background: #f7f2e9;
}

.batch-accordion.expanded .batch-accordion-trigger {
  background: #eee7da;
  border-bottom: 1px solid #d8d0c1;
}

.batch-accordion-trigger > svg {
  transition: transform .16s;
}

.batch-accordion.expanded .batch-accordion-trigger > svg {
  transform: rotate(180deg);
}

.batch-accordion-title {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.batch-accordion-title strong {
  color: #17253a;
  font-size: 13px;
}

.batch-accordion-title small {
  color: #5f655f;
  font-size: 10px;
}

.batch-accordion-count {
  color: #5f655f;
  white-space: nowrap;
  font-size: 10px;
}

.batch-accordion-count b {
  color: #17253a;
  font: 600 18px / 1 Songti SC, STSong, serif;
}

.batch-accordion-content {
  gap: 10px;
  padding: 12px;
  display: grid;
}

.batch-inline-actions {
  background: #eef2f3;
  border-left: 3px solid #245b87;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 6px 9px;
  display: flex;
}

.batch-inline-actions > span {
  color: #45535a;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  display: inline-flex;
}

.batch-inline-actions .button {
  min-height: 30px;
  font-size: 10px;
}

.batch-embedded-summary {
  color: #647078;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 0 2px;
  font-size: 11px;
  display: flex;
}

.batch-append-upload {
  background: #fffaf2;
  border: 1px dashed #b9ab9e;
  grid-template-columns: minmax(260px, 1fr) 300px;
  align-items: center;
  gap: 16px;
  padding: 12px;
  display: grid;
}

.batch-append-upload > div:first-child {
  gap: 5px;
  display: grid;
}

.batch-append-upload strong {
  color: #17253a;
  font-size: 12px;
}

.batch-append-upload span {
  color: #5f655f;
  font-size: 10px;
}

.batch-append-dropzone {
  grid-template-columns: auto 1fr;
  justify-content: center;
  column-gap: 8px;
  min-height: 82px !important;
}

.batch-home-empty {
  color: #5f655f;
  border: 1px dashed #c4bbae;
  align-content: center;
  place-items: center;
  gap: 6px;
  min-height: 180px;
  display: grid;
}

.batch-home-empty strong {
  color: #17253a;
}

.batch-home-empty span {
  font-size: 11px;
}

.exam-score-groups {
  gap: 12px;
  display: grid;
}

.review-batch-selector {
  color: #5f655f;
  gap: 3px;
  min-width: 150px;
  font-size: 9px;
  font-weight: 700;
  display: grid;
}

.review-batch-selector select {
  color: #17253a;
  background: #fff;
  border: 1px solid #d8d0c1;
  border-radius: 0;
  height: 34px;
  padding: 5px 8px;
  font-size: 11px;
}

.batch-overview-lead, .batch-anomaly-panel, .batch-next-panel {
  background: #fffdf8f0;
  border: 1px solid #d8d0c1;
}

.batch-overview-lead {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 116px;
  padding: 18px 20px;
  display: flex;
}

.batch-overview-lead h2, .batch-overview-lead p, .batch-panel-heading h3, .batch-task-progress p {
  margin: 0;
}

.batch-overview-lead h2 {
  color: #17253a;
  margin-top: 3px;
  font: 600 24px / 1.2 Songti SC, STSong, serif;
}

.batch-overview-lead p {
  color: #4f5753;
  margin-top: 8px;
  font-size: 13px;
}

.batch-overview-meta {
  color: #6e746f;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  display: flex;
}

.batch-delete-trigger {
  color: #945145;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 8px;
  font-size: 11px;
  display: inline-flex;
}

.batch-stage-rail {
  background: #eee7da;
  border: 1px solid #d8d0c1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  display: grid;
}

.batch-stage-rail > div {
  color: #7a7d78;
  border-right: 1px solid #d8d0c1;
  grid-template-columns: 24px 1fr;
  align-content: center;
  column-gap: 7px;
  min-height: 74px;
  padding: 11px 13px;
  display: grid;
}

.batch-stage-rail > div:last-child {
  border-right: 0;
}

.batch-stage-rail > div > span {
  border: 1px solid #aaa89f;
  border-radius: 50%;
  grid-row: 1 / span 2;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 10px;
  display: grid;
}

.batch-stage-rail strong {
  font-size: 11px;
}

.batch-stage-rail small {
  margin-top: 3px;
  font-size: 9px;
}

.batch-stage-rail .complete {
  color: #486b59;
  background: #e7eee6;
}

.batch-stage-rail .complete > span {
  border-color: #486b59;
}

.batch-stage-rail .current {
  color: #fffdf8;
  background: #17253a;
}

.batch-stage-rail .current > span {
  border-color: #fffdf8;
}

.batch-management-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(330px, .8fr);
  gap: 12px;
  display: grid;
}

.batch-anomaly-panel, .batch-next-panel {
  padding: 16px;
}

.batch-panel-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-height: 39px;
  display: flex;
}

.batch-panel-heading h3 {
  color: #17253a;
  font: 600 18px / 1.2 Songti SC, STSong, serif;
}

.batch-panel-heading > a {
  color: #245b87;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.batch-anomaly-grid {
  border-top: 1px solid #d8d0c1;
  border-left: 1px solid #d8d0c1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.batch-anomaly-item {
  color: #7a7d78;
  border-bottom: 1px solid #d8d0c1;
  border-right: 1px solid #d8d0c1;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 66px;
  padding: 9px 10px;
  display: grid;
}

.batch-anomaly-item strong, .batch-anomaly-item small {
  display: block;
}

.batch-anomaly-item strong {
  color: #37413d;
  font-size: 11px;
}

.batch-anomaly-item small {
  margin-top: 3px;
  font-size: 9px;
}

.batch-anomaly-item b {
  font: 600 18px / 1 Songti SC, STSong, serif;
}

.batch-anomaly-item.has-issue {
  color: #945145;
  background: #fff6ed;
}

.batch-anomaly-item.has-issue strong {
  color: #743d35;
}

.batch-missing-note, .review-purpose-strip, .review-organization-confirm {
  color: #4f5753;
  background: #eee7da;
  border: 1px solid #d8d0c1;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

.batch-missing-note {
  margin-top: 10px;
  padding: 8px 10px;
}

.batch-next-panel {
  flex-direction: column;
  display: flex;
}

.batch-task-progress {
  background: #f7f2e9;
  border: 1px solid #d8d0c1;
  padding: 12px;
}

.batch-task-progress > div:first-child {
  justify-content: space-between;
  font-size: 11px;
  display: flex;
}

.batch-progress-track {
  background: #d8d0c1;
  height: 5px;
  margin: 9px 0;
  overflow: hidden;
}

.batch-progress-track span {
  background: #245b87;
  height: 100%;
  transition: width .18s;
  display: block;
}

.batch-task-progress p, .batch-action-note {
  color: #6e746f;
  font-size: 10px;
}

.batch-primary-action {
  margin-top: auto;
  padding-top: 18px;
}

.batch-primary-action .button {
  min-height: 40px;
}

.batch-action-note {
  margin: 9px 0 0;
  line-height: 1.6;
}

.batch-delete-dialog {
  max-width: 520px;
}

.batch-delete-dialog [role="alert"] {
  margin-top: 12px;
}

.dialog-overlay {
  z-index: 80;
  background: #0d18277a;
  position: fixed;
  inset: 0;
}

.dialog-content {
  z-index: 81;
  background: #fffdf8;
  border: 1px solid #17253a;
  border-radius: 0;
  width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: auto;
  transform: translate(-50%, -50%);
  box-shadow: 8px 8px #0d182733;
}

.dialog-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.dialog-heading h2 {
  color: #17253a;
  margin: 3px 0 0;
  font: 600 22px / 1.25 Songti SC, STSong, serif;
}

.dialog-close {
  color: #4f5753;
  background: none;
  border: 1px solid #d8d0c1;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.dialog-content > p {
  color: #4f5753;
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.7;
}

.dialog-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  display: flex;
}

.button.danger {
  color: #fff;
  background: #945145;
  border-color: #945145;
}

.button.danger:disabled {
  background: #cbbdb6;
  border-color: #cbbdb6;
}

.review-purpose-strip {
  color: #743d35;
  background: #fff6ed;
  border-color: #d8b48b;
  margin: 0 0 10px;
  padding: 8px 11px;
}

.review-purpose-strip strong {
  margin-left: auto;
}

.review-purpose-strip button {
  color: #245b87;
  background: none;
  border: 0;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.review-organization-confirm {
  margin: 0 0 10px;
  padding: 9px 11px;
}

.review-organization-confirm > span {
  flex: 1;
}

.review-edit-form > div:has( > .button) {
  margin-top: 8px;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.grading-overview {
  min-height: calc(100vh - 140px);
  margin-top: -10px;
}

.grading-batch-tabs {
  background: #fffdf8b8;
  border-bottom: 1px solid #d8d0c1;
  align-items: stretch;
  gap: 0;
  height: 51px;
  display: flex;
  overflow-x: auto;
}

.grading-batch-tabs > button {
  color: #313a49;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 118px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 750;
  display: inline-flex;
  position: relative;
}

.grading-batch-tabs > button.active {
  color: #17253a;
  border-bottom-color: #cf4930;
}

.grading-batch-tabs > button:hover {
  background: #f3eee5;
}

.grading-batch-tabs > .grading-add-batch {
  color: #17253a;
  width: 51px;
  min-width: 51px;
}

.batch-issue-dot, .submission-issue-dot {
  background: #d63d32;
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
  display: inline-block;
}

.grading-empty-state {
  color: #69717e;
  align-content: center;
  place-items: center;
  gap: 8px;
  min-height: 420px;
  display: grid;
}

.grading-empty-state strong {
  color: #17253a;
  font-size: 16px;
}

.grading-empty-state span {
  font-size: 12px;
}

.grading-empty-state .button {
  margin-top: 8px;
}

.batch-submission-home {
  padding: 18px 0 0;
}

.batch-submission-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 0 4px 14px;
  display: flex;
}

.batch-submission-heading h2, .batch-submission-heading p {
  margin: 0;
}

.batch-submission-heading h2 {
  color: #17253a;
  font: 600 23px / 1.2 Songti SC, STSong, serif;
}

.batch-submission-heading p {
  color: #69717e;
  margin-top: 5px;
  font-size: 11px;
}

.batch-submission-actions {
  align-items: center;
  gap: 7px;
  display: flex;
}

.submission-filter {
  background: #ebe9e4;
  align-items: center;
  height: 36px;
  padding: 3px;
  display: flex;
}

.submission-filter button {
  color: #747b87;
  background: none;
  border: 1px solid #0000;
  height: 30px;
  padding: 0 11px;
  font-size: 11px;
}

.submission-filter button.active {
  color: #17253a;
  background: #fff;
  border-color: #c9c2b7;
  font-weight: 750;
}

.submission-search {
  align-items: center;
  width: 190px;
  height: 36px;
  display: flex;
  position: relative;
}

.submission-search svg {
  color: #747b87;
  position: absolute;
  left: 10px;
}

.submission-search input {
  color: #17253a;
  background: #fff;
  border: 1px solid #c9c2b7;
  border-radius: 0;
  width: 100%;
  height: 36px;
  padding: 0 10px 0 31px;
  font-size: 11px;
}

.grading-icon-button {
  color: #17253a;
  background: #fff;
  border: 1px solid #c9c2b7;
  border-radius: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-grid;
}

.grading-icon-button.primary {
  color: #fff;
  background: #17253a;
  border-color: #17253a;
}

.grading-icon-button:disabled {
  opacity: .38;
}

.append-submissions-button {
  color: #cf4930;
  background: none;
  border: 1px solid #cf4930;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 750;
  display: inline-flex;
}

.batch-more-menu {
  position: relative;
}

.batch-more-menu summary {
  color: #17253a;
  cursor: pointer;
  background: #fff;
  border: 1px solid #c9c2b7;
  place-items: center;
  width: 36px;
  height: 36px;
  list-style: none;
  display: grid;
}

.batch-more-menu summary::-webkit-details-marker {
  display: none;
}

.batch-more-popover {
  z-index: 30;
  background: #fffdf8;
  border: 1px solid #c9c2b7;
  gap: 4px;
  width: 168px;
  padding: 6px;
  display: none;
  position: absolute;
  top: 41px;
  right: 0;
  box-shadow: 4px 4px #17253a1a;
}

.batch-more-menu[open] .batch-more-popover {
  display: grid;
}

.batch-more-popover > a, .batch-more-popover > button, .batch-more-popover .batch-more-action {
  color: #34404c;
  background: none;
  border: 0;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  font-size: 10px;
  display: flex;
}

.batch-more-popover > button {
  color: #9a4136;
}

.batch-job-strip {
  color: #53626b;
  background: #eaf0f2;
  border-left: 3px solid #245b87;
  grid-template-columns: max-content 44px 160px minmax(180px, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 38px;
  margin-bottom: 10px;
  padding: 7px 10px;
  font-size: 10px;
  display: grid;
}

.batch-job-strip.blocked {
  color: #743d35;
  background: #fff1e8;
  border-left-color: #cf4930;
}

.batch-job-strip strong {
  color: #17253a;
  font-size: 11px;
}

.batch-job-strip > div {
  background: #d1d6d8;
  height: 4px;
  overflow: hidden;
}

.batch-job-strip i {
  background: #245b87;
  height: 100%;
  display: block;
}

.batch-job-strip p {
  margin: 0;
}

.submission-overview-layout {
  grid-template-columns: 212px minmax(0, 1fr);
  gap: 14px;
  height: calc(100vh - 265px);
  min-height: 610px;
  display: grid;
}

.all-pages-rail {
  background: #fffdf8f5;
  border: 1px solid #d8d0c1;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
}

.all-pages-heading {
  border-bottom: 1px solid #d8d0c1;
  gap: 8px;
  padding: 11px 10px;
  display: grid;
}

.all-pages-heading > div:first-child {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.all-pages-heading strong {
  color: #17253a;
  font-size: 12px;
}

.expand-pages-button {
  color: #17253a;
  background: #fff;
  border: 1px solid #d8d0c1;
  place-items: center;
  width: 27px;
  height: 27px;
  display: grid;
}

.page-rail-tools {
  align-items: center;
  gap: 4px;
  display: flex;
}

.page-rail-tools label {
  background: #fff;
  border: 1px solid #d8d0c1;
  align-items: center;
  height: 27px;
  display: flex;
}

.page-rail-tools input {
  color: #17253a;
  border: 0;
  width: 34px;
  height: 25px;
  padding: 0 2px 0 6px;
  font-size: 10px;
}

.page-rail-tools label span {
  color: #727983;
  padding-right: 6px;
  font-size: 9px;
}

.page-rail-tools button {
  color: #17253a;
  background: #fff;
  border: 1px solid #d8d0c1;
  place-items: center;
  width: 27px;
  height: 27px;
  display: grid;
}

.page-rail-tools button:disabled {
  opacity: .32;
}

.page-rail-tools button.locked {
  color: #fff;
  background: #17253a;
  border-color: #17253a;
}

.page-sequence-error {
  margin: 0 14px 10px;
}

.all-pages-list {
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #9aa1a8 #eee9df;
  flex: 1;
  min-height: 0;
  padding: 8px 10px 18px;
  overflow-y: scroll;
}

.all-pages-list::-webkit-scrollbar {
  width: 8px;
}

.all-pages-list::-webkit-scrollbar-track {
  background: #eee9df;
}

.all-pages-list::-webkit-scrollbar-thumb {
  background: #9aa1a8;
  border: 2px solid #eee9df;
  border-radius: 8px;
}

.all-pages-list::-webkit-scrollbar-thumb:hover {
  background: #737b84;
}

.submission-divider {
  color: #6d737c;
  letter-spacing: .04em;
  margin: 5px 0 6px;
  font-size: 9px;
  font-weight: 750;
}

.single-page-item {
  cursor: grab;
  background: #f6f6f3;
  border: 1px solid #d4d6d8;
  place-items: center;
  width: 100%;
  height: 84px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.single-page-item img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.single-page-item > span:last-child {
  color: #53606d;
  background: #ffffffe6;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  font-size: 8px;
  display: inline-flex;
  position: absolute;
  top: 4px;
  left: 4px;
}

.single-page-item.selected {
  outline-offset: -2px;
  outline: 2px solid #cf4930;
}

.single-page-item.cut {
  outline-offset: -2px;
  opacity: .65;
  outline: 2px dashed #245b87;
}

.single-page-item.dragging {
  opacity: .38;
}

.single-page-item.drop-before:before, .single-page-item.drop-after:after {
  content: "";
  z-index: 5;
  background: #cf4930;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  box-shadow: 0 1px #ffffffe6;
}

.single-page-item.drop-before:before {
  top: 0;
}

.single-page-item.drop-after:after {
  bottom: 0;
}

.single-page-item.placeholder {
  color: #9a6756;
  cursor: pointer;
  background: #fff8ef;
  border-style: dashed;
}

.page-drag-preview {
  z-index: 9999;
  opacity: .62;
  pointer-events: none;
  background: #fffdf8;
  border: 1px solid #7f8993;
  width: 140px;
  height: 96px;
  position: fixed;
  top: -1000px;
  left: -1000px;
  overflow: hidden;
  box-shadow: 0 8px 20px #17253a38;
}

.page-drag-preview img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.page-drag-preview span {
  color: #17253a;
  background: #ffffffe6;
  padding: 2px 5px;
  font-size: 9px;
  position: absolute;
  top: 5px;
  left: 5px;
}

.page-placeholder-copy {
  font-size: 10px;
}

.single-page-actions {
  justify-content: flex-end;
  gap: 3px;
  height: 23px;
  padding-top: 3px;
  display: flex;
}

.single-page-actions button {
  color: #777e85;
  background: none;
  border: 0;
  place-items: center;
  width: 22px;
  height: 19px;
  display: grid;
}

.single-page-actions button:hover {
  color: #cf4930;
}

.single-page-actions button:disabled {
  opacity: .25;
}

.single-page-preview-dialog {
  z-index: 102;
  background: #f4f1ea;
  border: 1px solid #c9c2b7;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 18px;
  display: grid;
  position: fixed;
  inset: 4vh 12vw;
  box-shadow: 0 18px 50px #17253a3d;
}

.single-page-preview-dialog h2 {
  color: #17253a;
  margin: 0;
  font: 600 18px / 1.2 Songti SC, STSong, serif;
}

.single-page-preview-dialog > img {
  object-fit: contain;
  background: #fff;
  width: 100%;
  height: 100%;
}

.single-page-preview-dialog > button {
  color: #596270;
  background: none;
  border: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
  position: absolute;
  top: 12px;
  right: 12px;
}

.submission-card-area {
  min-width: 0;
  height: 100%;
  padding: 0 4px 24px 0;
  overflow-y: auto;
}

.submission-preview-caption {
  color: #69717e;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 31px;
  font-size: 10px;
  display: flex;
}

.submission-preview-caption strong {
  color: #9a6756;
  font-size: 9px;
}

.submission-card-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  display: grid;
}

.submission-overview-card {
  min-width: 0;
  color: inherit;
  background: #fff;
  border: 1px solid #c9c2b7;
  flex-direction: column;
  gap: 8px;
  padding: 9px;
  transition: border-color .14s, transform .14s;
  display: flex;
}

.submission-overview-card:hover {
  border-color: #7f8c98;
  transform: translateY(-1px);
}

.submission-card-preview-link {
  color: inherit;
  display: block;
}

.submission-overview-card.has-issue {
  border-color: #e08a7f;
}

.submission-card-preview {
  color: #8a9097;
  background: #f4f5f3;
  border: 1px solid #d6dadd;
  place-items: center;
  height: 224px;
  font-size: 10px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.submission-card-preview img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.submission-card-preview b {
  color: #b84231;
  background: #fff1e8;
  padding: 3px 6px;
  font-size: 9px;
  position: absolute;
  top: 6px;
  right: 6px;
}

.submission-card-copy {
  gap: 4px;
  display: grid;
  position: relative;
}

.submission-card-copy strong {
  color: #17253a;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
}

.submission-card-copy small {
  color: #737a85;
  font-size: 9px;
}

.submission-student-picker {
  min-width: 0;
  position: relative;
}

.submission-student-trigger {
  color: #17253a;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 0;
  display: flex;
}

.submission-student-trigger > span {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.submission-student-trigger > svg {
  color: #7a818a;
  flex: none;
  transition: transform .14s;
}

.submission-student-trigger[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}

.submission-student-trigger small {
  color: #9a6756;
  align-items: center;
  gap: 3px;
  display: flex;
}

.submission-name-progress svg {
  animation: .9s linear infinite submission-task-spin;
}

.submission-student-popover {
  z-index: 12;
  background: #fff;
  border: 1px solid #bfc6cb;
  width: min(260px, 100vw - 48px);
  padding: 7px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  box-shadow: 0 10px 26px #17253a29;
}

.submission-student-popover > label {
  color: #727a84;
  border: 1px solid #d4d8da;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  display: flex;
}

.submission-student-popover input {
  color: #17253a;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 11px;
}

.submission-student-options {
  max-height: 210px;
  margin-top: 5px;
  overflow-y: auto;
}

.submission-student-options > button {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  display: grid;
}

.submission-student-options > button:hover {
  background: #f0f3f5;
}

.submission-student-options > button:disabled {
  opacity: .55;
  cursor: wait;
}

.submission-student-option-avatar-slot {
  color: #779486;
  background: #f2f8f4;
  border: 1px solid #d6e7dc;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
  overflow: hidden;
}

.submission-student-options > button .submission-student-option-name {
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.submission-student-option-name strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.submission-student-options > button > small {
  color: #9a6756;
  flex: none;
}

.submission-student-options p {
  color: #7a818a;
  text-align: center;
  margin: 0;
  padding: 16px 8px;
  font-size: 10px;
}

.submission-inline-task-error {
  color: #a44236;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  display: flex;
}

.submission-grading-progress {
  color: #405a72;
  gap: 4px;
  font-size: 9px;
  display: grid;
}

.submission-grading-progress > span {
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.submission-grading-progress > span em {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  overflow: hidden;
}

.submission-grading-progress > span strong {
  color: #245b87;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.submission-grading-progress > span svg {
  animation: .9s linear infinite submission-task-spin;
}

.submission-grading-progress > div {
  background: #dfe4e7;
  height: 3px;
  overflow: hidden;
}

.submission-grading-progress > div i {
  background: #245b87;
  height: 100%;
  transition: width .32s;
  display: block;
}

.submission-grading-progress > div i.ceiling {
  background-image: linear-gradient(90deg, #245b87 0%, #4f83ad 50%, #245b87 100%);
  background-size: 180% 100%;
  animation: 1.4s linear infinite submission-task-ceiling;
}

.submission-grading-progress.paused, .submission-grading-progress.paused > span strong {
  color: #806842;
}

.submission-grading-progress.paused > div i {
  background: #a98b55;
}

.submission-grading-progress.failed, .submission-grading-progress.failed > span strong {
  color: #a44236;
}

.submission-grading-progress.failed > div {
  background: #f0d9d5;
}

.submission-grading-progress.failed > div i {
  background: #bd584b;
}

.submission-grading-progress.complete, .submission-grading-progress.complete > span strong {
  color: #397052;
}

.submission-grading-progress.complete > div i {
  background: #4f8767;
}

.submission-card-actions {
  border-top: 1px solid #ece8df;
  align-items: center;
  gap: 5px;
  padding-top: 7px;
  display: flex;
}

.submission-card-actions > div {
  flex: none;
}

@keyframes submission-task-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes submission-task-ceiling {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -80% 0;
  }
}

.all-pages-expanded-dialog {
  z-index: 101;
  background: #f4f1ea;
  border: 1px solid #c9c2b7;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  width: min(760px, 100vw - 48px);
  padding: 18px;
  display: grid;
  position: fixed;
  top: 3vh;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 18px 50px #17253a3d;
}

.all-pages-expanded-dialog h2 {
  color: #17253a;
  margin: 0;
  font: 600 18px / 1.2 Songti SC, STSong, serif;
}

.all-pages-expanded-dialog > button {
  color: #596270;
  background: none;
  border: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
  position: absolute;
  top: 14px;
  right: 14px;
}

.expanded-page-tools {
  padding-right: 42px;
}

.expanded-pages-list {
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  background: #fffdf8;
  border: 1px solid #d8d0c1;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 18px;
  min-height: 0;
  padding: 16px 22px 28px;
  display: grid;
  overflow-y: auto;
}

.expanded-page-cell {
  min-width: 0;
}

.expanded-page-cell .submission-divider {
  margin: 5px 0 8px;
  font-size: 11px;
}

.expanded-page-cell .single-page-item {
  background: #f3f4f2;
  border-color: #c7cbd0;
  height: min(72vh, 760px);
}

.expanded-page-cell .single-page-item > span:last-child {
  padding: 4px 7px;
  font-size: 10px;
}

.expanded-page-cell .single-page-actions {
  gap: 5px;
  height: 31px;
  padding-top: 5px;
}

.expanded-page-cell .single-page-actions button {
  width: 28px;
  height: 24px;
}

.upload-drawer-overlay {
  z-index: 100;
  background: #131f3066;
  position: fixed;
  inset: 0;
}

.upload-drawer {
  z-index: 101;
  background: #fff;
  border-left: 1px solid #c9c2b7;
  grid-template-rows: auto 1fr auto;
  width: min(440px, 100vw);
  height: 100vh;
  display: grid;
  position: fixed;
  top: 0;
  right: 0;
  box-shadow: -12px 0 30px #17253a1f;
}

.upload-drawer > header {
  border-bottom: 1px solid #d8d0c1;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 18px 22px;
  display: flex;
}

.upload-drawer h2, .upload-drawer p {
  margin: 0;
}

.upload-drawer h2 {
  color: #17253a;
  font: 600 23px / 1.2 Songti SC, STSong, serif;
}

.upload-drawer p {
  color: #747b87;
  margin-top: 5px;
  font-size: 11px;
}

.upload-drawer header > button {
  color: #69717e;
  background: none;
  border: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.upload-drawer-body {
  align-content: start;
  gap: 18px;
  padding: 22px;
  display: grid;
  overflow-y: auto;
}

.upload-target-tip, .upload-rule-tip {
  background: #f8f4ec;
  border: 1px solid #d8d0c1;
  gap: 5px;
  padding: 12px;
  display: grid;
}

.upload-target-tip strong, .upload-rule-tip strong {
  color: #17253a;
  font-size: 12px;
}

.upload-target-tip span, .upload-rule-tip span {
  color: #69717e;
  font-size: 10px;
  line-height: 1.5;
}

.grading-upload-dropzone {
  background: #fff !important;
  border-radius: 0 !important;
  min-height: 210px !important;
}

.upload-drawer > footer {
  border-top: 1px solid #d8d0c1;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  display: flex;
}

.grading-confirm-dialog {
  z-index: 102;
  background: #fffdf8;
  border: 1px solid #c9c2b7;
  width: min(440px, 100vw - 32px);
  padding: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 18px 50px #17253a33;
}

.grading-confirm-dialog h2 {
  color: #17253a;
  margin: 0;
  font: 600 22px / 1.25 Songti SC, STSong, serif;
}

.grading-confirm-dialog p {
  color: #626a76;
  margin: 12px 0 22px;
  font-size: 12px;
  line-height: 1.7;
}

.grading-confirm-dialog > div {
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.page-sequence-confirm-dialog > .review-inline-error {
  justify-content: flex-start;
  margin: 0 0 18px;
}

.grading-mode-dialog {
  z-index: 102;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  width: min(520px, 100vw - 32px);
  padding: 22px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 20px 64px #17253a2e;
}

.grading-mode-dialog h2 {
  color: #17253a;
  margin: 0;
  font: 600 22px / 1.25 Songti SC, STSong, serif;
}

.grading-mode-dialog > p {
  color: #626a76;
  margin: 9px 0 18px;
  font-size: 13px;
}

.grading-configuration-warning {
  color: #9a6618;
  background: #fff9ec;
  border: 1px solid #f1d7a8;
  border-radius: 9px;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 11px 12px;
  display: flex;
}

.grading-configuration-warning > svg {
  flex: none;
  margin-top: 1px;
}

.grading-configuration-warning > div {
  gap: 4px;
  display: grid;
}

.grading-configuration-warning strong {
  color: #70470e;
  font-size: 12px;
  line-height: 1.55;
}

.grading-configuration-warning span {
  color: #8c6a37;
  font-size: 11px;
  line-height: 1.5;
}

.grading-mode-options {
  gap: 7px;
  display: grid;
}

.grading-mode-options label {
  cursor: pointer;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.grading-mode-options label.selected {
  background: #f1fbf5;
  border-color: #07a652;
  box-shadow: inset 0 0 0 1px #07a652;
}

.grading-mode-options label.disabled {
  color: #9aa1aa;
  cursor: not-allowed;
  background: #f7f7f7;
}

.grading-mode-options input {
  accent-color: #07a652;
  margin-top: 3px;
}

.grading-mode-options span {
  gap: 3px;
  display: grid;
}

.grading-mode-options strong {
  color: #26384f;
  font-size: 14px;
}

.grading-mode-options small {
  color: #737b86;
  font-size: 12px;
}

.grading-mode-options p {
  color: #747c87;
  margin: -1px 4px 5px 28px;
  font-size: 12px;
  line-height: 1.55;
}

.grading-mode-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  display: flex;
}

.grading-report-comment-option {
  cursor: pointer;
  background: #fbfdfc;
  border: 1px solid #dce5df;
  border-radius: 9px;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.grading-report-comment-option input {
  accent-color: #07c160;
  margin-top: 3px;
}

.grading-report-comment-option span {
  gap: 3px;
  display: grid;
}

.grading-report-comment-option strong {
  color: #27312b;
  font-size: 14px;
}

.grading-report-comment-option small {
  color: #748078;
  font-size: 12px;
}

.grading-report-skip-note {
  color: #78591d;
  background: #fff9ec;
  border-left: 3px solid #d6a347;
  margin-top: 12px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.6;
}

.exam-level-review .review-submission-toolbar {
  background: none;
  border: 0;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  margin-bottom: 10px;
  padding: 7px 0;
  display: flex;
}

.exam-level-review .review-navigation-button {
  color: #17253a;
  border-color: #d8d0c1;
  border-radius: 4px;
  flex: none;
}

.exam-level-review .review-navigation-button:hover:not(:disabled) {
  background: #fffdf8;
  border-color: #b9afa0;
}

.exam-level-review .review-navigation-button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.exam-level-review .review-submission-meta {
  white-space: nowrap;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.exam-level-review .review-submission-meta span:before {
  content: "·";
  color: #b3aa9d;
  margin-right: 10px;
}

.review-sequence-actions {
  gap: 7px;
  margin-left: auto;
  display: flex;
}

.exam-level-review .review-workbench-grid {
  flex: 1;
  grid-template-columns: minmax(460px, 1.45fr) minmax(250px, .62fr) minmax(360px, .86fr);
  gap: 14px;
  height: auto;
  min-height: 0;
  display: grid;
}

.exam-level-review .review-paper-panel, .exam-level-review .review-tree-panel, .exam-level-review .review-question-panel {
  background: #fffdf8f0;
  border: 1px solid #d8d0c1;
  border-radius: 0;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.exam-level-review .review-tree-panel, .exam-level-review .review-question-panel {
  flex-direction: column;
  display: flex;
}

.exam-level-review .review-paper-scroll, .exam-level-review .review-tree-scroll, .exam-level-review .review-editor-scroll {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  min-height: 0;
  overflow-y: auto;
}

.exam-level-review .review-paper-scroll {
  height: auto;
}

.exam-level-review .submission-organize-grid {
  grid-template-columns: minmax(560px, 820px);
  justify-content: center;
}

body:has(.exam-level-review) {
  height: 100dvh;
  overflow: hidden;
}

body:has(.exam-level-review) .teacher-shell {
  height: 100dvh;
  overflow: hidden;
  min-height: 0 !important;
}

body:has(.exam-level-review) .teacher-shell > div {
  min-height: 0;
}

body:has(.exam-level-review) .teacher-main {
  min-height: 0;
}

body:has(.exam-level-review) .exam-detail-page {
  min-height: 0;
}

body:has(.exam-level-review) .desktop-workbench {
  min-height: 0;
}

body:has(.exam-level-review) .exam-workbench-tab-content {
  min-height: 0;
}

body:has(.exam-level-review) .exam-level-review {
  min-height: 0;
}

body:has(.exam-level-review) .grading-workbench {
  min-height: 0;
}

body:has(.exam-level-review) .teacher-shell > div {
  overflow: hidden;
}

body:has(.exam-level-review) .teacher-main {
  overflow: hidden;
}

body:has(.exam-level-review) .exam-detail-page {
  overflow: hidden;
}

body:has(.exam-level-review) .desktop-workbench {
  overflow: hidden;
}

body:has(.exam-level-review) .exam-workbench-tab-content {
  overflow: hidden;
}

body:has(.exam-level-review) .exam-level-review {
  overflow: hidden;
}

body:has(.exam-level-review) .teacher-main {
  height: 100dvh;
}

:is(body:has(.exam-level-review) .exam-detail-page, body:has(.exam-level-review) .desktop-workbench, body:has(.exam-level-review) .exam-workbench-tab-content, body:has(.exam-level-review) .grading-workbench) {
  flex-direction: column;
  height: 100%;
  display: flex;
}

:is(body:has(.exam-level-review) .desktop-workbench, body:has(.exam-level-review) .exam-workbench-tab-content, body:has(.exam-level-review) .exam-level-review) {
  flex: 1;
}

.review-page-placeholder {
  color: #956454;
  background: #fff8ef;
  border: 1px dashed #c9c2b7;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
  display: grid;
}

.review-empty-result {
  background: #f8f4ec;
  border: 1px solid #ded6c8;
  justify-items: center;
  gap: 6px;
  padding: 18px 13px;
  display: grid;
}

.review-empty-result-artwork {
  border-radius: 9px;
  width: min(156px, 100%);
  height: auto;
  margin-bottom: 3px;
}

.review-empty-result strong {
  color: #17253a;
  font-size: 12px;
}

.review-empty-result span {
  color: #69717e;
  text-align: center;
  font-size: 10px;
  line-height: 1.55;
}

.teacher-shell {
  --primary: #07c160;
  --primary-soft: #e8f8ef;
  --background: #f6f8f7;
  --border: #dfe7e2;
  background: var(--background);
  grid-template-columns: 176px minmax(0, 1fr);
  min-height: 100vh;
  display: grid;
}

.teacher-sidebar {
  background: #edf8f2;
  border-right: 1px solid #dcebe3;
  flex-direction: column;
  height: 100vh;
  padding: 28px 14px;
  display: flex;
  position: sticky;
  top: 0;
}

.teacher-brand {
  align-items: center;
  height: 52px;
  padding: 0 8px;
  display: flex;
}

.teacher-brand-lockup {
  mix-blend-mode: multiply;
  object-fit: contain;
  flex: none;
  width: 132px;
  height: 52px;
  display: block;
}

.teacher-sidebar nav {
  gap: 7px;
  margin-top: 28px;
  display: grid;
}

.teacher-sidebar nav a {
  color: #4c5b52;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  height: 45px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .16s, color .16s, transform .16s;
  display: flex;
}

.teacher-sidebar nav a:hover {
  color: #078c47;
  background: #dff3e8;
  transform: translateX(2px);
}

.teacher-sidebar nav a.active {
  color: #fff;
  background: #07c160;
  box-shadow: 0 6px 15px #07c16029;
}

.teacher-sidebar nav a small {
  color: #fff;
  background: #f05252;
  border-radius: 9px;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  font-size: 10px;
  display: grid;
}

.teacher-sidebar-account {
  border-top: 1px solid #dcebe3;
  justify-content: center;
  margin-top: auto;
  padding-top: 16px;
  display: flex;
}

.teacher-sidebar-account > a {
  color: #5d6c63;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 42px;
  padding: 0 10px;
  transition: background-color .16s, color .16s;
  display: flex;
}

.teacher-sidebar-avatar {
  background: #edf7f1;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 13px;
  font-weight: 800;
  display: grid;
  position: relative;
  overflow: visible;
}

.teacher-sidebar-avatar img {
  border-radius: inherit;
  object-fit: cover;
  border: 1px solid #cfe5d8;
  width: 100%;
  height: 100%;
}

.teacher-sidebar-avatar b {
  color: #fff;
  background: #07a853;
  border: 2px solid #edf8f2;
  border-radius: 50%;
  place-items: center;
  width: 17px;
  height: 17px;
  font-family: Songti SC, STSong, serif;
  font-size: 9px;
  line-height: 1;
  display: grid;
  position: absolute;
  bottom: -3px;
  right: -3px;
}

.teacher-sidebar-account-name {
  color: #25302a;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}

.teacher-sidebar-account > a:hover {
  color: #078c47;
  background: #dff3e8;
}

.teacher-product-version {
  color: #829189;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  margin-top: 7px;
  font-size: 10px;
  line-height: 18px;
}

.teacher-product-version-collapsed {
  display: none;
}

.teacher-shell-content {
  min-width: 0;
}

.teacher-main {
  width: 100%;
  max-width: 1600px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 38px 32px 44px;
}

.teacher-dashboard {
  color: #202721;
}

.teacher-dashboard-header {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  display: flex;
  position: relative;
}

.teacher-dashboard-emblem {
  z-index: -1;
  object-fit: contain;
  opacity: .08;
  pointer-events: none;
  width: 104px;
  height: 104px;
  position: absolute;
  top: -26px;
  right: 0;
}

.teacher-dashboard-header h1 {
  letter-spacing: .01em;
  margin: 0;
  font-family: Songti SC, STSong, serif;
  font-size: clamp(27px, 2vw, 34px);
  font-weight: 700;
}

.teacher-dashboard-header p {
  color: #78817b;
  margin: 9px 0 0;
  font-size: 13px;
}

.teacher-dashboard-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
  display: grid;
}

.teacher-dashboard-metric {
  background: #fff;
  border: 1px solid #dfe6e1;
  border-radius: 14px;
  align-items: center;
  gap: 16px;
  min-height: 112px;
  padding: 18px;
  display: flex;
  box-shadow: 0 1px 2px #23342a06;
}

.teacher-dashboard-metric-icon {
  border-radius: 12px;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  display: grid;
}

.teacher-dashboard-metric-icon.green {
  color: #07ad56;
  background: #e5f8ed;
}

.teacher-dashboard-metric-icon.orange {
  color: #f39a39;
  background: #fff2e3;
}

.teacher-dashboard-metric > div {
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: 8px;
  display: grid;
}

.teacher-dashboard-metric-value {
  color: #1f2521;
  font-family: Georgia, Times New Roman, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

.teacher-dashboard-metric-label {
  color: #4c5750;
  font-size: 13px;
}

.teacher-dashboard-metric small {
  color: #8a928d;
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: 11px;
}

.teacher-dashboard-content {
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 16px;
  margin-top: 22px;
  display: grid;
}

.teacher-dashboard-work, .teacher-dashboard-shortcuts {
  background: #fff;
  border: 1px solid #dfe6e1;
  border-radius: 14px;
}

.teacher-dashboard-work {
  min-height: 520px;
  padding: 20px;
}

.teacher-dashboard-section-heading {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.teacher-dashboard-section-heading h2, .teacher-dashboard-shortcuts h2 {
  margin: 0;
  font-size: 17px;
}

.teacher-dashboard-section-heading > a {
  color: #08a652;
  font-size: 12px;
  font-weight: 700;
}

.teacher-dashboard-work-list {
  margin-top: 17px;
}

.teacher-dashboard-shortcuts {
  gap: 10px;
  padding: 20px 18px;
  display: grid;
}

.teacher-dashboard-shortcuts h2 {
  margin-bottom: 4px;
}

.teacher-dashboard-shortcut {
  color: #33433a;
  background: #e5f6ed;
  border-radius: 11px;
  grid-template-columns: 22px 1fr 16px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 13px;
  font-size: 13px;
  display: grid;
}

.teacher-dashboard-shortcut > svg:first-child {
  color: #08aa54;
}

.teacher-dashboard-shortcut > svg:last-child {
  color: #8ca198;
}

.teacher-dashboard-shortcut:hover {
  background: #d9f1e4;
}

.teacher-dashboard-shortcut.warm {
  background: #fff3e5;
}

.teacher-dashboard-shortcut.warm > svg:first-child {
  color: #ef9737;
}

.teacher-dashboard-shortcut.warm:hover {
  background: #ffead2;
}

.teacher-dashboard-empty {
  color: #8a948e;
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 8px;
  min-height: 320px;
  display: grid;
}

.teacher-dashboard-empty strong {
  color: #435047;
  font-size: 14px;
}

.teacher-dashboard-empty span {
  max-width: 360px;
  font-size: 12px;
  line-height: 1.6;
}

.teacher-dashboard-empty a {
  color: #08a652;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
}

.class-directory {
  color: #202721;
}

.class-directory-header {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  display: flex;
}

.class-directory-header h1 {
  margin: 0;
  font-family: Songti SC, STSong, serif;
  font-size: clamp(27px, 2vw, 34px);
  font-weight: 700;
}

.class-directory-header p {
  color: #78817b;
  margin: 9px 0 0;
  font-size: 13px;
}

.class-directory-header-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.class-directory-create-button {
  color: #fff;
  background: #07c160;
  border: 0;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 17px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  box-shadow: 0 8px 20px #07c16024;
}

.class-directory-create-button:hover {
  background: #06ad56;
}

.class-directory-toolbar {
  border-bottom: 1px solid #e0e7e2;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 58px;
  margin-top: 22px;
  display: flex;
}

.class-directory-filters {
  align-self: stretch;
  gap: 26px;
  display: flex;
}

.class-directory-filters button {
  color: #7b857f;
  background: none;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  position: relative;
}

.class-directory-filters button:after {
  content: "";
  background: none;
  border-radius: 2px;
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}

.class-directory-filters button.active {
  color: #07a652;
}

.class-directory-filters button.active:after {
  background: #07c160;
}

.class-directory-search {
  color: #8b9690;
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 9px;
  align-items: center;
  gap: 8px;
  width: 260px;
  height: 40px;
  padding: 0 11px;
  display: flex;
}

.class-directory-search:focus-within {
  border-color: #7fd5a6;
  box-shadow: 0 0 0 3px #07c16014;
}

.class-directory-search input {
  color: #29322d;
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
  font-size: 12px;
}

.class-directory-search input::placeholder {
  color: #a2aaa6;
}

.class-directory-list {
  gap: 13px;
  margin-top: 18px;
  display: grid;
}

.class-directory-card {
  background: #fff;
  border: 1px solid #dfe6e1;
  border-radius: 13px;
  align-items: center;
  gap: 17px;
  min-height: 116px;
  padding: 18px 20px;
  transition: border-color .16s, box-shadow .16s, transform .16s;
  display: flex;
  position: relative;
  box-shadow: 0 1px 2px #23342a06;
}

.class-directory-card:hover {
  border-color: #cce3d5;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px #2d4c3a0f;
}

.class-directory-card-link {
  z-index: 1;
  border-radius: inherit;
  position: absolute;
  inset: 0;
}

.class-directory-card-link:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #07c16033;
}

.class-directory-card-icon {
  border-radius: 11px;
  flex: none;
  place-items: center;
  width: 48px;
  height: 58px;
  display: grid;
}

.class-directory-card-icon.green {
  color: #08ad57;
  background: #e4f8ec;
}

.class-directory-card-icon.orange {
  color: #ef993b;
  background: #fff1df;
}

.class-directory-card-icon.mint {
  color: #37a974;
  background: #e8f6ef;
}

.class-directory-card-copy {
  flex: 1;
  gap: 6px;
  min-width: 0;
  display: grid;
}

.class-directory-card-copy strong {
  color: #252c27;
  font-size: 15px;
}

.class-directory-card-copy > span {
  color: #77817b;
  font-size: 12px;
}

.class-directory-card-copy small {
  color: #8b958f;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  display: flex;
}

.class-directory-card-copy small.recent-primary {
  color: #099851;
}

.class-directory-card-copy small.recent-warning {
  color: #c7822f;
}

.class-directory-card-copy small.recent-success {
  color: #668075;
}

.class-directory-card:hover .class-directory-card-copy strong {
  color: #079b4d;
}

.class-directory-card-actions {
  z-index: 2;
  align-items: center;
  gap: 8px;
  display: flex;
  position: relative;
}

.class-directory-card-actions > a, .class-directory-more > summary {
  color: #688078;
  background: #fff;
  border: 1px solid #dfe7e2;
  border-radius: 9px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.class-directory-card-actions > a:hover, .class-directory-more > summary:hover {
  color: #08a652;
  background: #eff9f3;
  border-color: #9ed9b9;
}

.class-directory-more {
  position: relative;
}

.class-directory-more > summary {
  cursor: pointer;
  list-style: none;
}

.class-directory-more > summary::-webkit-details-marker {
  display: none;
}

.class-directory-more > div {
  z-index: 20;
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 10px;
  gap: 5px;
  width: 220px;
  padding: 9px;
  display: grid;
  position: absolute;
  top: 42px;
  right: 0;
  box-shadow: 0 16px 40px #233a2c24;
}

.class-directory-more > div > span {
  color: #8a948e;
  padding: 6px 8px;
  font-size: 10px;
}

.class-directory-more > div > a, .class-directory-more > div > button {
  color: #3e4b43;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 7px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px;
  font-size: 12px;
  display: flex;
}

.class-directory-more > div > button {
  justify-content: flex-start;
}

.class-directory-more > div > a:hover, .class-directory-more > div > button:hover {
  color: #079b4d;
  background: #edf8f2;
}

.class-directory-empty {
  color: #8c9690;
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 8px;
  min-height: 360px;
  display: grid;
}

.class-directory-empty strong {
  color: #445047;
  font-size: 15px;
}

.class-directory-empty span {
  font-size: 12px;
}

.class-directory-dialog {
  z-index: 101;
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 16px;
  width: min(520px, 100vw - 32px);
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  box-shadow: 0 28px 80px #18302238;
}

.class-directory-dialog-heading {
  padding: 24px 24px 17px;
}

.class-directory-dialog-heading h2 {
  color: #253029;
  margin: 0;
  font-family: Songti SC, STSong, serif;
  font-size: 23px;
}

.class-directory-dialog-heading p {
  color: #7d8981;
  margin: 7px 32px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

.class-directory-dialog-tabs {
  border-bottom: 1px solid #e3e9e5;
  gap: 22px;
  padding: 0 24px;
  display: flex;
}

.class-directory-dialog-tabs button {
  color: #7d8781;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  height: 42px;
  font-size: 13px;
  font-weight: 700;
}

.class-directory-dialog-tabs button.active {
  color: #079b4d;
  border-bottom-color: #07c160;
}

.class-directory-dialog-form {
  padding: 20px 24px 24px;
}

.class-directory-dialog-form .admin-action-fields {
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  display: grid;
}

.class-directory-dialog-form .field:first-child, .class-directory-dialog-form .class-directory-dialog-submit {
  grid-column: 1 / -1;
}

.class-directory-dialog-form.join .admin-action-fields {
  grid-template-columns: 1fr;
}

.class-directory-dialog-form.join p {
  color: #89928d;
  margin: -3px 0 0;
  font-size: 11px;
}

.class-directory-dialog-submit {
  color: #fff;
  background: #07c160;
  border: 0;
  border-radius: 9px;
  height: 42px;
  margin-top: 3px;
  font-weight: 700;
}

.class-directory-dialog-submit:hover {
  background: #06ad56;
}

.class-directory-code-input {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 700;
}

.class-directory-dialog-close {
  color: #849088;
  background: none;
  border: 0;
  border-radius: 8px;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
  position: absolute;
  top: 18px;
  right: 18px;
}

.class-directory-dialog-close:hover {
  color: #445047;
  background: #f1f5f2;
}

.class-directory-toolbar {
  border-bottom: 0;
  justify-content: flex-end;
  min-height: 48px;
  margin-top: 18px;
}

.class-directory-card {
  min-height: 112px;
}

.class-directory-card-copy {
  gap: 9px;
}

.class-directory-card-meta {
  color: #77817b;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex;
}

.class-directory-card-meta > i {
  background: #dfe6e1;
  width: 1px;
  height: 14px;
}

.class-directory-card-meta button {
  z-index: 2;
  color: #079b4d;
  background: #e7f7ed;
  border: 0;
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
  position: relative;
}

.class-directory-card-meta button:hover {
  background: #d8f2e2;
}

.class-directory-code {
  font-weight: 650;
}

.class-directory-card-actions > a {
  width: 38px;
  height: 38px;
}

.class-breadcrumb {
  color: #929b96;
  align-items: center;
  gap: 8px;
  height: 28px;
  font-size: 14px;
  display: flex;
}

.class-breadcrumb a {
  color: #079b4d;
  font-weight: 650;
}

.class-page-heading, .class-detail-heading {
  margin-top: 14px;
}

.class-page-heading h1, .class-detail-heading h1 {
  color: #202721;
  margin: 0;
  font-family: Songti SC, STSong, serif;
  font-size: clamp(27px, 2vw, 34px);
}

.class-page-heading p, .class-detail-heading p {
  color: #78817b;
  margin: 7px 0 0;
  font-size: 13px;
}

.class-creation-layout {
  grid-template-columns: minmax(620px, 760px) minmax(300px, 1fr);
  align-items: start;
  gap: 20px;
  margin-top: 24px;
  display: grid;
}

.class-creation-form, .class-settings-form {
  background: #fff;
  border: 1px solid #dfe6e1;
  border-radius: 14px;
}

.class-creation-form > .admin-action-fields, .class-settings-form > .admin-action-fields {
  gap: 20px;
  padding: 25px;
  display: grid;
}

.class-section-title {
  color: #079b4d;
  align-items: center;
  gap: 9px;
  display: flex;
}

.class-section-title strong {
  color: #28312c;
  font-size: 17px;
}

.class-form-field {
  color: #4f5b53;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
  display: grid;
}

.class-form-field input, .class-form-field select, .class-join-form input, .class-danger-zone select {
  color: #29332d;
  background: #fff;
  border: 1px solid #dce4df;
  border-radius: 9px;
  outline: none;
  width: 100%;
  height: 43px;
  padding: 0 12px;
  font-size: 12px;
}

.class-form-field input:focus, .class-form-field select:focus, .class-join-form input:focus {
  border-color: #7fd5a6;
  box-shadow: 0 0 0 3px #07c16014;
}

.class-form-field input:disabled, .class-form-field select:disabled {
  color: #929b96;
  background: #f3f6f4;
}

.class-form-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.class-select-wrap {
  position: relative;
}

.class-select-wrap select {
  appearance: none;
  padding-right: 36px;
}

.class-select-wrap svg {
  pointer-events: none;
  color: #919b95;
  position: absolute;
  top: 14px;
  right: 12px;
}

.class-icon-field {
  border: 0;
  gap: 10px;
  margin: 0;
  padding: 0;
  display: grid;
}

.class-icon-field legend {
  color: #4f5b53;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 650;
}

.class-icon-options {
  gap: 11px;
  display: flex;
}

.class-icon-options label {
  color: #58a675;
  cursor: pointer;
  background: #f2f8f4;
  border: 1px solid #dfe6e1;
  border-radius: 13px;
  place-items: center;
  width: 46px;
  height: 46px;
  display: grid;
}

.class-icon-options label:nth-child(2) {
  color: #e99a3e;
  background: #fff5e9;
}

.class-icon-options label:nth-child(3) {
  color: #666bd1;
  background: #f0f2ff;
}

.class-icon-options label:nth-child(4) {
  color: #d96582;
  background: #fceff3;
}

.class-icon-options label:nth-child(5) {
  color: #338d68;
  background: #eef7f3;
}

.class-icon-options label.active {
  border: 2px solid #07c160;
  box-shadow: 0 0 0 3px #07c16014;
}

.class-icon-options input {
  opacity: 0;
  position: absolute;
}

.class-form-note {
  color: #65736a;
  background: #e9f8ef;
  border-radius: 9px;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  font-size: 11px;
  display: flex;
}

.class-form-note svg {
  color: #08a652;
  flex: none;
}

.class-form-actions, .class-dialog-actions {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.class-primary-button, .class-secondary-button {
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  height: 41px;
  padding: 0 17px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.class-primary-button {
  color: #fff;
  background: #07c160;
  border: 1px solid #07c160;
}

.class-primary-button:hover {
  background: #06ad56;
}

.class-primary-button:disabled {
  cursor: wait;
  opacity: .6;
}

.class-secondary-button {
  color: #5f6b63;
  background: #fff;
  border: 1px solid #dce4df;
}

.class-secondary-button:hover {
  background: #f4f8f5;
}

.class-creation-aside {
  gap: 14px;
  display: grid;
}

.class-preview-card, .class-join-form {
  background: #fff;
  border: 1px solid #dfe6e1;
  border-radius: 14px;
  padding: 21px;
}

.class-preview-card > span {
  color: #7c8780;
  font-size: 11px;
  font-weight: 650;
}

.class-preview-card > div {
  align-items: center;
  gap: 13px;
  margin-top: 17px;
  display: flex;
}

.class-preview-card i {
  color: #08aa55;
  background: #e5f7ec;
  border-radius: 16px;
  place-items: center;
  width: 54px;
  height: 54px;
  display: grid;
}

.class-preview-card p {
  gap: 5px;
  margin: 0;
  display: grid;
}

.class-preview-card strong {
  color: #28312c;
  font-size: 16px;
}

.class-preview-card small {
  color: #919b95;
  font-size: 11px;
}

.class-creation-tips {
  color: #65736a;
  gap: 11px;
  margin: 0;
  padding: 4px 2px;
  font-size: 11px;
  list-style: none;
  display: grid;
}

.class-creation-tips li {
  align-items: center;
  gap: 9px;
  display: flex;
}

.class-creation-tips svg {
  color: #08a652;
}

.class-join-form > .admin-action-fields {
  gap: 9px;
  display: grid;
}

.class-join-form strong {
  color: #303a34;
  font-size: 13px;
}

.class-join-form p {
  color: #8a948e;
  margin: 0;
  font-size: 11px;
}

.class-join-form label {
  gap: 8px;
  margin-top: 3px;
  display: flex;
}

.class-join-form input {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
}

.class-join-form button {
  color: #079b4d;
  background: #e6f7ed;
  border: 0;
  border-radius: 9px;
  flex: none;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 700;
}

.class-detail-heading {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 70px;
  display: flex;
}

.class-detail-actions {
  gap: 9px;
  display: flex;
}

.class-icon-button, .class-primary-icon-button {
  cursor: pointer;
  border-radius: 9px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

.class-icon-button {
  color: #617169;
  background: #fff;
  border: 1px solid #dce4df;
}

.class-icon-button:hover {
  color: #08a652;
  background: #edf8f2;
  border-color: #a8dabb;
}

.class-primary-icon-button {
  color: #fff;
  background: #07c160;
  border: 1px solid #07c160;
}

.class-detail-tabs {
  border-bottom: 1px solid #dfe6e1;
  gap: 26px;
  height: 46px;
  display: flex;
}

.class-detail-tabs a {
  color: #77817b;
  border-bottom: 2px solid #0000;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.class-detail-tabs a.active {
  color: #079b4d;
  border-bottom-color: #07c160;
}

.class-roster-toolbar {
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  height: 58px;
  display: flex;
}

.class-roster-table-wrap {
  background: #fff;
  border: 1px solid #dfe6e1;
  border-radius: 13px;
  overflow: hidden;
}

.class-roster-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.class-roster-table th {
  color: #748078;
  text-align: left;
  background: #f3f8f5;
  height: 46px;
  font-size: 11px;
  font-weight: 650;
}

.class-roster-table th, .class-roster-table td {
  padding: 0 18px;
}

.class-roster-table th:first-child, .class-roster-table td:first-child {
  width: 70px;
}

.class-roster-table th:nth-child(2), .class-roster-table td:nth-child(2) {
  width: 210px;
}

.class-roster-table th:nth-child(3), .class-roster-table td:nth-child(3) {
  width: 190px;
}

.class-roster-table th:nth-child(4), .class-roster-table td:nth-child(4) {
  width: 110px;
}

.class-roster-table tbody tr {
  border-top: 1px solid #e5ebe7;
}

.class-roster-table td {
  color: #69746d;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 66px;
  font-size: 12px;
  overflow: hidden;
}

.class-roster-table td strong {
  color: #303a34;
  font-size: 13px;
}

.class-roster-table .class-roster-actions-cell {
  width: 112px;
}

.class-roster-table th.class-roster-actions-cell {
  text-align: center;
}

.class-roster-actions {
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
}

.class-row-action {
  border-radius: 9px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.class-row-action.edit {
  color: #08a652;
  background: #fff;
  border: 1px solid #dce4df;
}

.class-row-action.delete {
  color: #ed5d52;
  background: #fff4f3;
  border: 1px solid #f2d4d0;
}

.class-roster-empty {
  color: #929b96;
  place-items: center;
  min-height: 240px;
  font-size: 12px;
  display: grid;
}

.class-dialog {
  z-index: 101;
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 15px;
  width: min(520px, 100vw - 32px);
  padding: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 28px 80px #18302238;
}

.class-dialog h2 {
  color: #27312b;
  margin: 0;
  font-family: Songti SC, STSong, serif;
  font-size: 21px;
}

.class-dialog > p {
  color: #7e8a82;
  margin: 7px 32px 20px 0;
  font-size: 11px;
}

.class-dialog-close {
  color: #839088;
  background: none;
  border: 0;
  border-radius: 8px;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
  position: absolute;
  top: 17px;
  right: 17px;
}

.class-dialog-close:hover {
  background: #f2f6f3;
}

.class-student-form > .admin-action-fields {
  gap: 15px;
  display: grid;
}

.class-student-form .class-dialog-actions {
  margin-top: 4px;
}

.class-roster-preview-dialog {
  width: min(700px, 100vw - 32px);
}

.class-roster-preview-table {
  border: 1px solid #e0e7e2;
  border-radius: 10px;
  max-height: 360px;
  overflow: auto;
}

.class-roster-preview-table table {
  border-collapse: collapse;
  width: 100%;
}

.class-roster-preview-table th, .class-roster-preview-table td {
  color: #5f6a63;
  text-align: left;
  border-bottom: 1px solid #e6ebe8;
  height: 42px;
  padding: 0 14px;
  font-size: 11px;
}

.class-roster-preview-table th {
  color: #7a857e;
  background: #f4f8f5;
}

.class-roster-preview-dialog .class-dialog-actions {
  margin-top: 18px;
}

.class-settings-layout {
  grid-template-columns: minmax(620px, 760px) minmax(280px, 1fr);
  align-items: start;
  gap: 20px;
  margin-top: 20px;
  display: grid;
}

.class-settings-side {
  gap: 14px;
  display: grid;
}

.class-code-card, .class-head-card {
  background: #fff;
  border: 1px solid #dfe6e1;
  border-radius: 14px;
  gap: 12px;
  padding: 20px;
  display: grid;
}

.class-code-card > span, .class-head-card > span {
  color: #7d8881;
  font-size: 11px;
  font-weight: 650;
}

.class-code-card > div {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  display: flex;
}

.class-code-card strong {
  color: #28312c;
  letter-spacing: .12em;
  font-size: 24px;
}

.class-code-card button {
  color: #079b4d;
  background: #e6f7ed;
  border: 0;
  border-radius: 10px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.class-code-card p {
  color: #919b95;
  margin: 0;
  font-size: 10px;
}

.class-head-card > div {
  align-items: center;
  gap: 11px;
  display: flex;
}

.class-head-card i {
  color: #079b4d;
  background: #e6f7ed;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  font-style: normal;
  font-weight: 700;
  display: grid;
}

.class-head-card p {
  gap: 3px;
  margin: 0;
  display: grid;
}

.class-head-card strong {
  color: #303a34;
  font-size: 12px;
}

.class-head-card small {
  color: #929b96;
  font-size: 10px;
}

.class-settings-form .class-form-actions {
  margin-top: 2px;
}

.class-readonly-note {
  color: #7e8982;
  background: #f3f6f4;
  border-radius: 9px;
  margin: 0;
  padding: 11px 13px;
  font-size: 11px;
}

.class-danger-zone {
  background: #fff;
  border: 1px solid #efd4d0;
  border-radius: 13px;
  margin-top: 18px;
  overflow: hidden;
}

.class-danger-zone > header {
  color: #ed5d52;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  display: flex;
}

.class-danger-zone > header strong {
  color: #303a34;
  font-size: 13px;
}

.class-danger-zone > div {
  border-top: 1px solid #e5eae7;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 62px;
  padding: 10px 18px;
  display: flex;
}

.class-danger-zone p {
  gap: 3px;
  margin: 0;
  display: grid;
}

.class-danger-zone p strong {
  color: #303a34;
  font-size: 12px;
}

.class-danger-zone p span {
  color: #8c9690;
  font-size: 10px;
}

.class-danger-zone form > .admin-action-fields {
  align-items: center;
  gap: 8px;
  display: flex;
}

.class-danger-zone select {
  width: 180px;
  height: 34px;
}

.class-risk-button {
  color: #657169;
  background: #fff;
  border: 1px solid #dce4df;
  border-radius: 9px;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 650;
  display: inline-flex;
}

.class-risk-button.danger {
  color: #ed5d52;
  background: #fff4f3;
  border-color: #f2d4d0;
}

.class-risk-unavailable {
  color: #9aa29e;
  font-size: 10px;
}

.sr-only {
  clip: rect(0,0,0,0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.message-center, .account-settings {
  color: #202721;
}

.message-center-header, .account-settings-header {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  display: flex;
}

.message-center-header h1, .account-settings-header h1 {
  margin: 0;
  font-family: Songti SC, STSong, serif;
  font-size: clamp(27px, 2vw, 34px);
  font-weight: 700;
}

.message-center-header p, .account-settings-header p {
  color: #78817b;
  margin: 9px 0 0;
  font-size: 13px;
}

.message-center-header-actions {
  gap: 10px;
  display: flex;
}

.message-center-header-actions button {
  color: #607068;
  background: #fff;
  border: 1px solid #dbe4de;
  border-radius: 10px;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
}

.message-center-header-actions button:hover {
  color: #08a652;
  background: #eff9f3;
  border-color: #9ed9b9;
}

.message-center-workspace {
  grid-template-columns: minmax(330px, .74fr) minmax(520px, 1.26fr);
  gap: 18px;
  height: calc(100vh - 178px);
  min-height: 620px;
  margin-top: 24px;
  display: grid;
}

.message-center-list, .message-center-detail {
  background: #fff;
  border: 1px solid #dfe6e1;
  border-radius: 14px;
  overflow: hidden;
}

.message-center-list {
  height: 100%;
  overflow-y: auto;
}

.message-center-tabs {
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid #e1e8e3;
  align-items: center;
  gap: 24px;
  min-height: 56px;
  padding: 0 18px;
  display: flex;
  position: sticky;
  top: 0;
}

.message-center-tabs button {
  color: #77827b;
  background: none;
  border: 0;
  border-radius: 8px;
  height: 34px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
}

.message-center-tabs button.active {
  color: #079b4d;
  background: #e7f7ee;
}

.message-center-list-item {
  width: 100%;
  min-height: 116px;
  color: inherit;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e5eae7;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 18px 18px 16px 28px;
  display: grid;
  position: relative;
}

.message-center-list-item:hover {
  background: #f7fbf9;
}

.message-center-list-item.active {
  background: #fff6e9;
}

.message-center-unread-dot {
  background: #f55;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 20px;
  left: 12px;
}

.message-center-list-icon, .message-center-detail-icon {
  border-radius: 10px;
  place-items: center;
  display: grid;
}

.message-center-list-icon {
  width: 42px;
  height: 42px;
}

.message-center-list-icon.warning, .message-center-detail-icon.warning {
  color: #f39a36;
  background: #fff0de;
}

.message-center-list-icon.success, .message-center-detail-icon.success {
  color: #08ad57;
  background: #e5f8ed;
}

.message-center-list-icon.points, .message-center-detail-icon.points {
  color: #14a75b;
  background: #e9f7ef;
}

.message-center-list-copy {
  gap: 6px;
  min-width: 0;
  display: grid;
}

.message-center-list-copy strong, .message-center-list-copy span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.message-center-list-copy strong {
  color: #2a312d;
  font-size: 13px;
}

.message-center-list-copy span {
  color: #707b74;
  font-size: 11px;
}

.message-center-list-copy small {
  color: #9aa29d;
  font-size: 10px;
}

.message-center-list-empty {
  color: #8c9690;
  align-content: center;
  place-items: center;
  gap: 8px;
  min-height: 250px;
  font-size: 12px;
  display: grid;
}

.message-center-list-empty strong {
  color: #526058;
  font-size: 13px;
}

.message-center-detail {
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 28px;
  display: flex;
  position: relative;
}

.message-center-detail-heading {
  gap: 9px;
  display: grid;
}

.message-center-status {
  border-radius: 15px;
  justify-self: start;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 700;
}

.message-center-status.pending {
  color: #e98e2c;
  background: #fff1df;
}

.message-center-status.completed {
  color: #079c4d;
  background: #e7f7ee;
}

.message-center-status.normal {
  color: #65746b;
  background: #eef4f0;
}

.message-center-detail-heading h2 {
  color: #252c28;
  margin: 0;
  font-family: Songti SC, STSong, serif;
  font-size: 26px;
}

.message-center-detail-heading time {
  color: #929b96;
  font-size: 11px;
}

.message-center-detail-body {
  background: #eff8f3;
  border-radius: 14px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 20px;
  display: grid;
}

.message-center-detail-icon {
  width: 52px;
  height: 52px;
}

.message-center-detail-body > div {
  gap: 5px;
  display: grid;
}

.message-center-detail-body strong {
  color: #29332d;
  font-size: 14px;
}

.message-center-detail-body div span {
  color: #7a867e;
  font-size: 11px;
}

.message-center-detail-kind {
  color: #079c4d;
  background: #fff;
  border-radius: 15px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 700;
}

.message-center-detail-content {
  margin-top: 26px;
}

.message-center-detail-content > span {
  color: #6f7a73;
  font-size: 12px;
}

.message-center-detail-content p {
  color: #39433d;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.85;
}

.message-center-notice {
  color: #7d6d59;
  background: #fff2e2;
  border-radius: 10px;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 13px 14px;
  font-size: 11px;
  display: flex;
}

.message-center-notice svg {
  color: #f29a36;
}

.message-center-detail-actions {
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  padding-top: 30px;
  display: flex;
}

.message-center-detail-actions .admin-action-fields {
  display: block;
}

.message-center-reject-button, .message-center-approve-button, .message-center-primary-link {
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 17px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.message-center-reject-button {
  color: #ed5353;
  background: #fff;
  border: 1px solid #e1e6e3;
}

.message-center-reject-button:hover {
  background: #fff5f5;
}

.message-center-approve-button, .message-center-primary-link {
  color: #fff;
  background: #07c160;
  border: 1px solid #07c160;
}

.message-center-approve-button:hover, .message-center-primary-link:hover {
  background: #06ad56;
}

.message-center-detail-empty {
  color: #93a098;
  flex: 1;
  align-content: center;
  place-items: center;
  gap: 10px;
  font-size: 13px;
  display: grid;
}

.account-settings-grid {
  grid-template-columns: minmax(350px, .72fr) minmax(620px, 1.6fr);
  gap: 18px;
  height: calc(100vh - 178px);
  min-height: 620px;
  margin-top: 24px;
  display: grid;
}

.account-profile-column {
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  display: flex;
}

.account-profile-card, .account-ledger-card {
  background: #fff;
  border: 1px solid #dfe6e1;
  border-radius: 14px;
  height: 100%;
  overflow: hidden;
}

.account-profile-column .account-profile-card {
  flex: 1;
  min-height: 0;
}

.account-profile-card > .admin-action-fields {
  gap: 18px;
  padding: 25px;
  display: grid;
}

.account-card-heading {
  gap: 6px;
  display: grid;
}

.account-card-heading strong {
  color: #28302b;
  font-size: 17px;
}

.account-card-heading span {
  color: #7c867f;
  font-size: 11px;
}

.account-profile-identity {
  justify-items: center;
  gap: 7px;
  padding: 4px 0 10px;
  display: grid;
}

.account-profile-identity > span {
  color: #08aa55;
  background: #e4f7ec;
  border-radius: 50%;
  place-items: center;
  width: 76px;
  height: 76px;
  font-family: Songti SC, STSong, serif;
  font-size: 30px;
  display: grid;
}

.account-profile-identity strong {
  color: #28302b;
  font-size: 15px;
}

.account-profile-identity small {
  color: #919a95;
  font-size: 11px;
}

.preset-avatar-trigger {
  cursor: pointer;
  background: #edf7f1;
  border: 1px solid #cfe5d8;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  display: grid;
  position: relative;
  overflow: hidden;
}

.preset-avatar-trigger.teacher {
  width: 76px;
  height: 76px;
}

.preset-avatar-trigger.student {
  flex: none;
  width: 32px;
  height: 32px;
}

.preset-avatar-trigger > img {
  border-radius: inherit;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.preset-avatar-trigger > span {
  color: #fff;
  opacity: 0;
  background: #183f2ac2;
  padding: 3px 0 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  transition: opacity .14s;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.preset-avatar-trigger:hover > span, .preset-avatar-trigger:focus-visible > span {
  opacity: 1;
}

.preset-avatar-trigger:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #07c16029;
}

.avatar-picker-dialog {
  z-index: 102;
  background: #fff;
  border: 1px solid #dce6df;
  border-radius: 16px;
  width: min(610px, 100vw - 32px);
  max-height: min(720px, 100vh - 32px);
  padding: 22px;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: auto;
  transform: translate(-50%, -50%);
  box-shadow: 0 28px 80px #18302238;
}

.avatar-picker-dialog > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.avatar-picker-dialog > header > div {
  gap: 6px;
  display: grid;
}

.avatar-picker-dialog h2 {
  color: #27312b;
  margin: 0;
  font-family: Songti SC, STSong, serif;
  font-size: 21px;
}

.avatar-picker-dialog header p {
  color: #7c8780;
  margin: 0;
  font-size: 12px;
}

.avatar-picker-dialog header > button {
  color: #829087;
  background: none;
  border: 0;
  border-radius: 8px;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.avatar-picker-dialog header > button:hover {
  color: #445149;
  background: #f1f6f3;
}

.avatar-picker-form > .admin-action-fields {
  gap: 18px;
  margin-top: 20px;
  display: grid;
}

.avatar-option-group {
  gap: 10px;
  display: grid;
}

.avatar-option-group h3 {
  color: #5d6b63;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}

.avatar-option-group > div {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.avatar-option-group button {
  aspect-ratio: 1;
  background: #f3f8f5;
  border: 2px solid #0000;
  border-radius: 14px;
  padding: 3px;
  position: relative;
  overflow: hidden;
}

.avatar-option-group button:hover {
  border-color: #9bd8b6;
}

.avatar-option-group button[aria-pressed="true"] {
  background: #e9f8ef;
  border-color: #07b85b;
}

.avatar-option-group button img {
  object-fit: cover;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  display: block;
}

.avatar-option-group button svg {
  color: #fff;
  background: #07b85b;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 21px;
  height: 21px;
  padding: 2px;
  position: absolute;
  bottom: 6px;
  right: 6px;
}

.account-field {
  color: #647068;
  gap: 7px;
  font-size: 11px;
  display: grid;
}

.account-field input {
  color: #29332d;
  background: #fff;
  border: 1px solid #dce4df;
  border-radius: 9px;
  outline: none;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font-size: 12px;
}

.account-field input:focus {
  border-color: #7fd5a6;
  box-shadow: 0 0 0 3px #07c16014;
}

.account-field input:disabled {
  color: #929b96;
  background: #f4f7f5;
}

.account-save-button {
  color: #fff;
  background: #07c160;
  border: 0;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 43px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
}

.account-save-button:hover {
  background: #06ad56;
}

.account-logout-form button {
  color: #c64a40;
  background: #fff;
  border: 1px solid #ead7d5;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 43px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
}

.account-logout-form button:hover {
  background: #fff4f2;
}

.account-logout-form button:disabled {
  cursor: wait;
  opacity: .72;
}

.account-logout-error {
  color: #b8463d;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.account-logout-overlay {
  z-index: 120;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #f4f8f5db;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.account-logout-overlay > div {
  color: #22764f;
  background: #fff;
  border: 1px solid #dce7e0;
  border-radius: 14px;
  justify-items: center;
  gap: 9px;
  min-width: 280px;
  padding: 28px 34px;
  display: grid;
  box-shadow: 0 18px 60px #1f433029;
}

.account-logout-overlay strong {
  color: #2d3932;
  font-size: 16px;
}

.account-logout-overlay span {
  color: #748078;
  font-size: 12px;
}

.account-ledger-card {
  flex-direction: column;
  display: flex;
}

.account-ledger-card > header {
  background: #f1f8f4;
  border-bottom: 1px solid #e2e8e4;
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 82px;
  padding: 13px 22px;
  display: flex;
}

.account-ledger-card h2 {
  color: #28312c;
  margin: 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}

.account-ledger-card header p {
  color: #7d8981;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 17px;
}

.account-ledger-account {
  flex-shrink: 0;
  align-items: center;
  gap: 24px;
  display: flex;
}

.account-points-actions {
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  display: flex;
}

.account-balance small {
  white-space: nowrap;
  color: #8a958e;
  font-size: 10px;
  font-weight: 400;
  position: absolute;
  bottom: -16px;
  right: 0;
}

.account-balance {
  justify-items: end;
  gap: 2px;
  display: grid;
  position: relative;
}

.account-balance strong {
  color: #05904a;
  font-size: 26px;
  line-height: 38px;
}

.account-balance span {
  color: #8a958e;
  font-size: 11px;
  line-height: 16px;
}

.account-ledger-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.account-ledger-card table {
  border-collapse: collapse;
  width: 100%;
}

.account-ledger-card th {
  color: #7c8780;
  text-align: left;
  background: #f6f8f7;
  height: 46px;
  font-size: 10px;
  font-weight: 600;
}

.account-ledger-card th, .account-ledger-card td {
  padding: 0 20px;
}

.account-ledger-card td {
  color: #3d4641;
  border-bottom: 1px solid #e3e8e5;
  height: 68px;
  font-size: 11px;
}

.account-ledger-card td:first-child {
  color: #909a94;
  white-space: nowrap;
}

.account-ledger-card td:nth-child(2) {
  width: 48%;
  font-weight: 600;
}

.account-ledger-card td.positive {
  color: #0ca757;
  font-weight: 700;
}

.account-ledger-card td.negative {
  color: #f05b5b;
  font-weight: 700;
}

.account-ledger-empty {
  color: #8c9690;
  align-content: center;
  place-items: center;
  gap: 8px;
  min-height: 360px;
  font-size: 11px;
  display: grid;
}

.account-ledger-empty strong {
  color: #526058;
  font-size: 13px;
}

@media (max-width: 1050px) {
  .message-center-workspace {
    grid-template-columns: minmax(300px, .85fr) minmax(430px, 1.15fr);
  }

  .account-settings-grid {
    grid-template-columns: 350px minmax(480px, 1fr);
  }
}

@media (max-width: 1100px) {
  .teacher-dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-dashboard-content {
    grid-template-columns: 1fr;
  }

  .teacher-dashboard-shortcuts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .teacher-dashboard-shortcuts h2 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .teacher-shell {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .teacher-sidebar {
    padding: 18px 9px;
  }

  .teacher-brand {
    justify-content: center;
    padding: 0;
  }

  .teacher-sidebar nav a span, .teacher-sidebar-account-name {
    display: none;
  }

  .teacher-brand-lockup {
    object-fit: cover;
    object-position: left center;
    width: 42px;
    height: 42px;
  }

  .teacher-sidebar nav a {
    justify-content: center;
    padding: 0;
  }

  .teacher-sidebar nav a small {
    margin: -25px -28px 0 0;
    position: absolute;
  }

  .teacher-sidebar-account {
    justify-content: center;
    padding: 7px;
  }

  .teacher-product-version-expanded {
    display: none;
  }

  .teacher-product-version-collapsed {
    font-size: 9px;
    display: inline;
  }

  .teacher-main {
    padding: 24px 18px 32px;
  }

  .teacher-dashboard-header {
    align-items: flex-start;
  }

  .teacher-dashboard-header h1 {
    font-size: 25px;
  }

  .teacher-dashboard-metrics, .teacher-dashboard-shortcuts {
    grid-template-columns: 1fr;
  }

  .class-directory-header {
    align-items: flex-start;
  }

  .class-directory-header h1 {
    font-size: 25px;
  }

  .class-directory-create-button {
    width: 42px;
    padding: 0;
    font-size: 0;
  }

  .class-directory-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 14px;
  }

  .class-directory-search {
    width: 100%;
  }

  .class-directory-card {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .class-directory-card-copy {
    min-width: calc(100% - 70px);
  }

  .class-directory-card-actions {
    justify-content: flex-end;
    width: 100%;
  }

  .class-creation-layout, .class-settings-layout, .class-form-columns {
    grid-template-columns: 1fr;
  }

  .class-detail-heading {
    align-items: flex-start;
  }

  .class-roster-table-wrap {
    overflow-x: auto;
  }

  .class-roster-table {
    min-width: 820px;
  }

  .message-center-workspace, .account-settings-grid {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .message-center-workspace {
    min-height: auto;
  }

  .message-center-detail {
    min-height: 520px;
  }

  .account-ledger-card {
    min-width: 0;
  }

  .account-ledger-card > header {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px;
  }

  .account-ledger-card > header > div:first-child {
    flex-basis: 100%;
    min-width: 0;
  }

  .account-ledger-account {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }

  .account-ledger-card table {
    min-width: 520px;
  }
}

@media (max-width: 1450px) and (min-width: 901px) {
  .exam-detail-page .paper-workbench-grid {
    grid-template: "paper tree" minmax(0, 38fr)
                   "paper editor" minmax(0, 62fr)
                   / minmax(460px, 1.25fr) minmax(340px, .75fr);
  }

  .batch-detail-page .review-workbench-grid {
    grid-template-columns: minmax(440px, 1.25fr) 240px 340px;
  }

  .submission-card-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  .exam-level-review .review-workbench-grid {
    grid-template-columns: minmax(430px, 1.2fr) 230px 330px;
  }
}

.exam-directory, .new-exam-page {
  color: #202721;
}

.exam-directory-header {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  display: flex;
}

.exam-directory-header h1, .new-exam-header h1 {
  color: #202721;
  letter-spacing: .01em;
  margin: 0;
  font-family: Songti SC, STSong, serif;
  font-size: clamp(27px, 2vw, 34px);
  font-weight: 700;
}

.exam-directory-header p, .new-exam-header p {
  color: #78817b;
  margin: 9px 0 0;
  font-size: 13px;
}

.exam-directory-header-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.exam-directory-icon-button, .exam-directory-create-button {
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  height: 42px;
  display: inline-flex;
}

.exam-directory-icon-button {
  color: #4d5a52;
  background: #fff;
  border: 1px solid #dbe4de;
  width: 42px;
}

.exam-directory-icon-button:hover {
  color: #07a652;
  border-color: #b9d8c5;
}

.exam-directory-create-button {
  color: #fff;
  background: #07c160;
  gap: 8px;
  padding: 0 17px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 20px #07c16024;
}

.exam-directory-create-button:hover {
  background: #06ad56;
}

.exam-directory-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 48px;
  margin-top: 22px;
  display: flex;
}

.exam-directory-filters {
  background: #edf6f1;
  border-radius: 12px;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 4px;
  display: flex;
}

.exam-directory-filters button {
  color: #7b857f;
  background: none;
  border: 0;
  border-radius: 9px;
  height: 36px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 600;
}

.exam-directory-filters button.active {
  color: #079c4e;
  background: #fff;
  box-shadow: 0 1px 3px #22483214;
}

.exam-directory-tools {
  align-items: center;
  gap: 10px;
  display: flex;
}

.exam-directory-search {
  color: #8b9690;
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 9px;
  align-items: center;
  gap: 8px;
  width: 290px;
  height: 42px;
  padding: 0 11px;
  display: flex;
}

.exam-directory-search:focus-within {
  border-color: #7fd5a6;
  box-shadow: 0 0 0 3px #07c16014;
}

.exam-directory-search input {
  color: #29322d;
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
  font-size: 12px;
}

.exam-directory-search input::placeholder {
  color: #a2aaa6;
}

.exam-directory-sort {
  color: #657169;
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 9px;
  align-items: center;
  gap: 7px;
  width: 150px;
  height: 42px;
  padding: 0 10px;
  display: flex;
}

.exam-directory-sort:focus-within {
  border-color: #7fd5a6;
  box-shadow: 0 0 0 3px #07c16014;
}

.exam-directory-sort select {
  color: #4d5a52;
  background: none;
  border: 0;
  outline: none;
  flex: 1;
  min-width: 0;
  font-size: 12px;
}

.exam-directory-list {
  gap: 12px;
  margin-top: 18px;
  display: grid;
}

.exam-directory-card {
  height: 112px;
  color: inherit;
  background: #fff;
  border: 1px solid #dfe6e1;
  border-radius: 13px;
  align-items: center;
  gap: 16px;
  padding: 17px;
  text-decoration: none;
  transition: border-color .16s, box-shadow .16s, transform .16s;
  display: flex;
  box-shadow: 0 1px 2px #23342a06;
}

.exam-directory-card:hover {
  border-color: #cce3d5;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px #2d4c3a0f;
}

.exam-directory-date {
  color: #079c4e;
  text-align: center;
  background: #e4f8ec;
  border-radius: 11px;
  flex: none;
  place-content: center;
  gap: 1px;
  width: 64px;
  height: 68px;
  display: grid;
}

.exam-directory-card.warning .exam-directory-date {
  color: #e58c2e;
  background: #fff1df;
}

.exam-directory-card.danger .exam-directory-date {
  color: #d15348;
  background: #fff0ee;
}

.exam-directory-card.muted .exam-directory-date {
  color: #8b958f;
  background: #f0f3f1;
}

.exam-directory-date strong {
  font-size: 20px;
  line-height: 1;
}

.exam-directory-date span {
  font-size: 10px;
  font-weight: 700;
}

.exam-directory-card-copy {
  flex: 1;
  gap: 7px;
  min-width: 0;
  display: grid;
}

.exam-directory-card-title {
  align-items: center;
  gap: 9px;
  display: flex;
}

.exam-directory-card-title h2 {
  color: #252c27;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 16px;
  overflow: hidden;
}

.exam-directory-card-title span {
  color: #079c4e;
  background: #e5f8ed;
  border-radius: 999px;
  flex: none;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
}

.exam-directory-card.warning .exam-directory-card-title span {
  color: #db862c;
  background: #fff1df;
}

.exam-directory-card.danger .exam-directory-card-title span {
  color: #c64a40;
  background: #fff0ee;
}

.exam-directory-card.muted .exam-directory-card-title span {
  color: #7d8982;
  background: #f0f3f1;
}

.exam-directory-card-copy p {
  color: #7b857f;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 12px;
  overflow: hidden;
}

.exam-directory-progress {
  background: #e1e8e4;
  border-radius: 999px;
  width: 100%;
  height: 5px;
  display: block;
  overflow: hidden;
}

.exam-directory-progress i {
  border-radius: inherit;
  background: #07c160;
  height: 100%;
  transition: width .22s;
  display: block;
}

.exam-directory-card.warning .exam-directory-progress i {
  background: #f2a044;
}

.exam-directory-card.danger .exam-directory-progress i {
  background: #d65e53;
}

.exam-directory-card.muted .exam-directory-progress i {
  background: #9ca8a1;
}

.exam-directory-enter {
  color: #079c4e;
  pointer-events: none;
  background: #e8f8ef;
  border: 1px solid #d7e9df;
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.exam-directory-card:hover .exam-directory-enter {
  background: #dff5e9;
  border-color: #9dd9b8;
}

.exam-directory-empty {
  color: #87928b;
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 8px;
  min-height: 360px;
  display: grid;
}

.exam-directory-empty strong {
  color: #435047;
  font-size: 14px;
}

.exam-directory-empty span {
  font-size: 12px;
}

.exam-directory-pagination {
  color: #89938d;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  margin-top: 12px;
  font-size: 11px;
  display: flex;
}

.exam-directory-pagination nav {
  gap: 6px;
  display: flex;
}

.exam-directory-pagination button {
  color: #657169;
  background: #fff;
  border: 1px solid #dfe7e2;
  border-radius: 8px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 11px;
  display: grid;
}

.exam-directory-pagination button.active {
  color: #fff;
  background: #07c160;
  border-color: #07c160;
}

.exam-directory-pagination button:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.exam-directory-pagination-gap {
  color: #89938d;
  place-items: center;
  width: 24px;
  height: 32px;
  display: grid;
}

.new-exam-page {
  max-width: 1180px;
  margin: 0 auto;
}

.new-exam-breadcrumb {
  color: #8a948e;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  display: flex;
}

.new-exam-breadcrumb a {
  color: #079c4e;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  display: inline-flex;
}

.new-exam-breadcrumb strong {
  color: #59655e;
}

.new-exam-header {
  margin-top: 22px;
}

.new-exam-steps {
  background: #edf2ef;
  border-radius: 11px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  max-width: 760px;
  margin: 22px auto 0;
  padding: 4px;
  list-style: none;
  display: grid;
}

.new-exam-steps li {
  color: #8a948e;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 42px;
  font-size: 12px;
  display: flex;
}

.new-exam-steps li.active {
  color: #078f48;
  background: #e6f8ed;
  border: 1px solid #a9ddbd;
}

.new-exam-steps li span {
  background: #dfe6e2;
  border-radius: 50%;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 10px;
  display: grid;
}

.new-exam-steps li.active span {
  color: #fff;
  background: #07c160;
}

.new-exam-form {
  max-width: 760px;
  margin: 18px auto 0;
}

.new-exam-form-card {
  background: #fff;
  border: 1px solid #dfe7e2;
  border-radius: 13px;
  gap: 17px;
  padding: 28px;
  display: grid;
  box-shadow: 0 8px 28px #2e4c3b0b;
}

.new-exam-form-card h2 {
  color: #29332d;
  margin: 0 0 2px;
  font-size: 16px;
}

.new-exam-form-card label {
  gap: 7px;
  display: grid;
}

.new-exam-form-card label > span {
  color: #536159;
  font-size: 12px;
  font-weight: 700;
}

.new-exam-form-card input, .new-exam-form-card select {
  color: #27312b;
  background: #fbfdfc;
  border: 1px solid #dce5df;
  border-radius: 9px;
  outline: none;
  width: 100%;
  height: 43px;
  padding: 0 12px;
  font-size: 13px;
}

.new-exam-form-card input:focus, .new-exam-form-card select:focus {
  background: #fff;
  border-color: #7fd5a6;
  box-shadow: 0 0 0 3px #07c16014;
}

.new-exam-actions {
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
  display: flex;
}

.new-exam-actions a, .new-exam-actions button {
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
}

.new-exam-actions a {
  color: #68736c;
  background: #fff;
  border: 1px solid #dce5df;
}

.new-exam-actions button {
  color: #fff;
  background: #07c160;
  border: 0;
  gap: 7px;
  box-shadow: 0 7px 18px #07c16024;
}

.new-exam-actions button:hover {
  background: #06ad56;
}

body:has(.exam-detail-page) {
  background: #f6f8f7;
}

body:has(.exam-detail-page) .teacher-shell {
  background: #f6f8f7;
  grid-template-columns: 176px minmax(0, 1fr) !important;
}

body:has(.exam-detail-page) .teacher-sidebar {
  color: #4c5b52;
  height: 100vh;
  position: sticky;
  top: 0;
  background: #edf8f2 !important;
  border-right: 1px solid #dcebe3 !important;
  padding: 28px 14px !important;
}

body:has(.exam-detail-page) .teacher-sidebar > div:first-child {
  height: 52px !important;
  margin-bottom: 0 !important;
}

body:has(.exam-detail-page) .teacher-sidebar > div:first-child > div:first-child {
  font-family: inherit;
  font-size: 18px;
  color: #fff !important;
  background: #07c160 !important;
}

body:has(.exam-detail-page) .teacher-sidebar > div:first-child strong {
  color: #1f2722;
  font-family: inherit;
  font-size: 20px !important;
}

body:has(.exam-detail-page) .teacher-sidebar nav a {
  border-left: 0;
  color: #4c5b52 !important;
  border-radius: 10px !important;
  height: 45px !important;
  padding: 0 14px !important;
}

body:has(.exam-detail-page) .teacher-sidebar nav a:hover {
  background: #dff3e8;
  border-left: 0;
  color: #078c47 !important;
}

body:has(.exam-detail-page) .teacher-sidebar nav a.active {
  background: #07c160;
  color: #fff !important;
}

body:has(.exam-detail-page) .teacher-main {
  background: #f6f8f7;
  max-width: 1800px !important;
  margin: 0 auto !important;
  padding: 22px 32px 30px !important;
}

.exam-detail-page .exam-workbench-header {
  min-height: 70px;
}

.exam-detail-page .exam-workbench-eyebrow {
  color: #079c4e;
  letter-spacing: 0;
  font-size: 14px;
}

.class-breadcrumb > a, .new-exam-breadcrumb > a, .exam-workbench-eyebrow > a {
  color: #079c4e;
}

.class-breadcrumb > :last-child:not(a), .new-exam-breadcrumb > :last-child:not(a), .exam-workbench-eyebrow > :last-child:not(a) {
  color: #59655e;
}

.exam-detail-page .exam-workbench-header h1 {
  color: #202721;
  margin: 5px 0 0;
  font: 700 26px / 1.15 Arial, PingFang SC, sans-serif;
}

.exam-name-heading {
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-width: 0;
  display: flex;
}

.exam-name-heading h1 {
  min-width: 0;
}

.exam-name-edit-button {
  color: #738078;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 7px;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 5px;
  transition: background-color .16s, border-color .16s, color .16s;
  display: inline-grid;
}

.exam-name-edit-button:hover, .exam-name-edit-button:focus-visible {
  color: #078c47;
  background: #e8f7ef;
  border-color: #bfe4cf;
  outline: none;
}

.exam-name-dialog-error {
  color: #bd3d34;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.exam-detail-page .exam-workbench-meta {
  color: #6f7b74;
}

.exam-delete-button {
  color: #9aa39e;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 7px;
  place-items: center;
  width: 30px;
  height: 30px;
  transition: border-color .16s, background-color .16s, color .16s;
  display: inline-grid;
}

.exam-delete-button:hover, .exam-delete-button:focus-visible {
  color: #c64a40;
  background: #fff3f1;
  border-color: #efc7c2;
  outline: none;
}

.exam-delete-active-job-warning {
  color: #a9433e;
  background: #fff3f1;
  border-radius: 8px;
  margin: 10px 0 0;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.55;
}

.exam-delete-dialog-error {
  color: #bd3d34;
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.exam-detail-page .exam-workbench-tabs {
  background: #e9f0ec;
  border: 0;
  border-radius: 10px;
  gap: 4px;
  width: fit-content;
  height: 42px;
  margin-top: 4px;
  padding: 4px;
}

.exam-detail-page .exam-workbench-tabs :is(button, a) {
  color: #6c7871;
  border: 0;
  border-radius: 7px;
  min-width: 112px;
  font-size: 12px;
}

.exam-detail-page .exam-workbench-tabs :is(button, a).active {
  color: #079c4e;
  background: #fff;
  box-shadow: 0 2px 8px #2b47370f;
}

.exam-detail-page .exam-workbench-tab-content {
  padding-top: 10px;
}

.exam-detail-page .paper-workbench-grid {
  grid-template: minmax(0, 1fr) / minmax(500px, 1.45fr) minmax(268px, .74fr) minmax(360px, 1fr);
  gap: 10px;
  height: calc(100vh - 154px);
}

.exam-detail-page .paper-canvas-panel, .exam-detail-page .paper-question-tree, .exam-detail-page .paper-question-editor {
  background: #fff;
  border-color: #dce5df;
  border-radius: 12px;
  grid-area: auto;
}

.exam-detail-page .paper-canvas-panel {
  background: #e9eef5;
  overflow: hidden;
}

.exam-detail-page .paper-tree-heading {
  border-bottom: 1px solid #e2e8e4;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px 8px;
  display: flex;
}

.exam-detail-page .paper-tree-heading-row {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  display: flex;
}

.exam-detail-page .paper-tree-heading-copy {
  align-items: center;
}

.exam-detail-page .paper-tree-heading-copy h2 {
  color: #27312b;
  font: 700 15px / 1.2 Arial, PingFang SC, sans-serif;
}

.exam-detail-page .paper-tree-heading-copy span {
  color: #078f48;
  background: #e8f8ef;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 700;
}

.exam-detail-page .paper-tree-state-icons {
  border: 0;
  gap: 5px;
  padding: 0;
}

.exam-detail-page .paper-tree-state-icon {
  width: 24px;
  height: 24px;
}

.exam-detail-page .paper-tree-state-icon.running {
  color: #07a652;
  background: #e8f8ef;
}

.exam-detail-page .paper-tree-state-icon.complete {
  color: #078f48;
  background: #e8f8ef;
}

.exam-detail-page .paper-tree-state-icon.pending {
  color: #b37b31;
  background: #fff6df;
}

.exam-detail-page .paper-tree-state-icon.failed {
  color: #c64a40;
  background: #fff0ed;
}

.exam-detail-page .paper-tree-recognition-line {
  background: #dce5df;
  border-radius: 999px;
  width: 100%;
  height: 5px;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
}

.exam-detail-page .paper-tree-recognition-line i {
  border-radius: inherit;
  background: #07c160;
}

.exam-detail-page .paper-question-tree.recognition-running .paper-tree-recognition-line i, .exam-detail-page .paper-question-tree.generation-running .paper-tree-recognition-line i, .exam-detail-page .paper-question-tree.recognition-complete .paper-tree-recognition-line i {
  background: #07c160;
}

.exam-detail-page .paper-question-tree.recognition-failed .paper-tree-recognition-line i {
  background: #c64a40;
}

.exam-detail-page .paper-tree-progress-tip {
  color: #078f48;
  background: #e8f8ef;
  border-color: #8bd6ad;
  border-radius: 8px;
  box-shadow: 0 3px 10px #1f4b3117;
}

.exam-detail-page .paper-tree-progress-tip:before {
  background: #e8f8ef;
  border-color: #8bd6ad;
}

.exam-detail-page .paper-tree-progress-tip > svg {
  flex: none;
}

.exam-detail-page .paper-tree-progress-tip.slow {
  color: #9b612c;
  background: #fff7ed;
  border-color: #e7b98f;
}

.exam-detail-page .paper-tree-progress-tip.slow:before {
  background: #fff7ed;
  border-color: #e7b98f;
}

.exam-detail-page .paper-tree-progress-tip.failed {
  color: #c64a40;
  background: #fff0ed;
  border-color: #efb8b1;
}

.exam-detail-page .paper-tree-progress-tip.failed:before {
  background: #fff0ed;
  border-color: #efb8b1;
}

.exam-detail-page .paper-tree-toolbar {
  border-bottom: 1px solid #e2e8e4;
  justify-content: space-between;
  align-items: center;
  min-height: 46px;
  padding: 0 10px;
  display: flex;
}

.exam-detail-page .paper-tree-heading-actions {
  gap: 6px;
}

.exam-detail-page .paper-tree-icon-action {
  color: #637168;
  background: #fff;
  border-color: #dce5df;
  border-radius: 9px;
  width: 36px;
  height: 36px;
}

.exam-detail-page .paper-tree-icon-action:hover:not(:disabled) {
  color: #079c4e;
  background: #f3faf6;
  border-color: #a9d9bc;
}

.exam-detail-page .paper-tree-icon-action.ai {
  color: #07a652;
  background: #e8f8ef;
}

.exam-detail-page .paper-tree-icon-action.recognition {
  color: #b37b31;
  background: #fff6df;
}

.exam-detail-page .paper-tree-icon-action.primary {
  color: #078f48;
  background: #e8f8ef;
  border-color: #dce5df;
}

.exam-detail-page .paper-tree-icon-action.danger {
  color: #c64a40;
  background: #fff0ed;
  border-color: #efb8b1;
}

.exam-detail-page .paper-tree-search {
  background: #fbfdfc;
  border-color: #dce5df;
  border-radius: 8px;
  height: 38px;
  margin: 8px 10px 7px;
}

.exam-detail-page .paper-tree-filter {
  background: #f0f3f1;
  border: 0;
  border-radius: 8px;
  gap: 2px;
  width: calc(100% - 20px);
  height: 34px;
  margin: 0 10px 8px;
  padding: 3px;
  display: flex;
}

.exam-detail-page .paper-tree-filter button {
  color: #68756e;
  background: none;
  border: 0;
  border-radius: 7px;
  flex: 1;
  min-width: 0;
  height: 28px;
  font-size: 9px;
  font-weight: 500;
}

.exam-detail-page .paper-tree-filter button:hover {
  color: #078f48;
}

.exam-detail-page .paper-tree-filter button.active {
  color: #078f48;
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 4px #2746330f;
}

.exam-detail-page .paper-tree-scroll {
  flex-direction: column;
  gap: 5px;
  padding: 0 8px 12px;
  display: flex;
}

.exam-detail-page .paper-tree-page {
  background: none;
  border: 0;
  border-radius: 7px;
  margin: 0;
}

.exam-detail-page .paper-tree-page.active {
  background: none;
  border-color: #0000;
}

.exam-detail-page .paper-tree-page-title {
  background: #f0f3f1;
  border-radius: 7px;
  gap: 4px;
  min-height: 32px;
  padding: 0 7px;
}

.exam-detail-page .paper-tree-page.active > .paper-tree-page-title {
  background: #eaf6ef;
}

.exam-detail-page .paper-tree-page-title > button:first-child, .exam-detail-page .paper-tree-section-title > button:first-child {
  width: 18px;
  height: 28px;
}

.exam-detail-page .paper-tree-page-label {
  gap: 5px;
}

.exam-detail-page .paper-tree-page-title strong {
  color: #344039;
  font-size: 11px;
  font-weight: 700;
}

.exam-detail-page .paper-tree-page-title span {
  color: #7a857e;
  font-size: 9px;
}

.exam-detail-page .paper-tree-page-children {
  padding: 0 0 4px 8px;
}

.exam-detail-page .paper-tree-section-title {
  gap: 5px;
  min-height: 30px;
  padding: 0;
}

.exam-detail-page .paper-tree-section-label strong {
  color: #39443e;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.exam-detail-page .paper-tree-section-label span {
  color: #7a857e;
  font-size: 9px;
}

.exam-detail-page .paper-tree-section-questions {
  padding-left: 0;
}

.exam-detail-page .paper-tree-question {
  border-left: 3px solid #0000;
  border-radius: 7px;
  gap: 3px;
  min-height: 32px;
  margin-bottom: 3px;
  padding: 0 3px 0 7px;
}

.exam-detail-page .paper-tree-question-main {
  grid-template-columns: minmax(42px, auto) minmax(0, 1fr) auto;
  gap: 6px;
  min-height: 32px;
}

.exam-detail-page .paper-tree-question:hover, .exam-detail-page .paper-tree-question.selected {
  background: #e8f8ef;
  border-left-color: #07c160;
}

.exam-detail-page .paper-tree-question-number {
  color: #078f48;
  font-size: 9px;
  font-weight: 700;
}

.exam-detail-page .paper-tree-question-text {
  color: #5f6d65;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 500;
  overflow: hidden;
}

.exam-detail-page .paper-tree-node-menu summary {
  opacity: 1;
  border-radius: 6px;
  width: 24px;
  height: 24px;
}

.exam-detail-page .paper-tree-node-menu summary:hover {
  color: #078f48;
  background: #dff3e8;
}

.exam-detail-page .paper-tree-node-menu > div {
  border-color: #dce5df;
  border-radius: 8px;
  box-shadow: 0 8px 22px #1f33271f;
}

.exam-detail-page .paper-tree-node-menu > div button:hover {
  color: #078f48;
  background: #e8f8ef;
}

.exam-detail-page .paper-tree-add-row {
  border: 0;
  gap: 12px;
  min-height: 28px;
  padding: 0 8px;
}

.exam-detail-page .paper-tree-add-row > button, .exam-detail-page .paper-tree-add-question {
  color: #07a652;
  min-height: 26px;
  font-size: 9px;
}

.exam-detail-page .paper-tree-add-question {
  margin-left: 18px;
}

.paper-preview-toolbar {
  background: #fff;
  border-bottom: 1px solid #dce5df;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 11px;
  display: flex;
}

.paper-preview-meta, .paper-preview-actions {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.paper-preview-meta strong {
  color: #36423b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.paper-preview-meta small {
  color: #079c4e;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.paper-preview-meta small.error {
  color: #c64a40;
}

.paper-preview-meta small.saving {
  color: #b37b31;
}

.paper-preview-actions button {
  color: #617068;
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 8px;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
}

.paper-preview-actions .zoom-value {
  color: #617068;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 30px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.paper-preview-actions button.expand {
  color: #079c4e;
  background: #e7f8ee;
}

.paper-preview-actions button.active {
  color: #079c4e;
  background: #e7f8ee;
  border-color: #74c997;
}

.paper-preview-actions button.danger:hover:not(:disabled) {
  color: #c64a40;
  border-color: #e4aaa5;
}

.paper-preview-actions button:hover:not(:disabled) {
  color: #079c4e;
  border-color: #a9d9bc;
}

.paper-preview-actions button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.paper-preview-actions > i {
  background: #e2e8e4;
  width: 1px;
  height: 18px;
}

.exam-detail-page .paper-canvas-scroll {
  background: #e9eef5;
  height: auto;
  padding: 18px;
}

.exam-detail-page .paper-pages-stack {
  min-width: 50%;
  margin: 0 auto;
  transition: width .16s;
}

.exam-detail-page .paper-page-frame {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.exam-detail-page .paper-page-frame.active {
  box-shadow: none;
  border-color: #0000;
}

.exam-detail-page .paper-page-canvas {
  box-shadow: 0 6px 18px #28466421;
}

.exam-detail-page .paper-question-editor {
  padding: 0;
  overflow: hidden;
}

.exam-detail-page .paper-editor-heading {
  background: #fff;
  border-bottom-color: #e2e8e4;
  min-height: 58px;
  margin: 0;
  padding: 9px 12px;
}

.exam-detail-page .paper-editor-fields {
  padding: 12px;
}

.exam-detail-page .paper-editor-fields input, .exam-detail-page .paper-editor-fields select, .exam-detail-page .paper-editor-fields textarea {
  background: #fbfdfc;
  border-color: #dce5df;
  border-radius: 8px;
}

.exam-detail-page .paper-editor-fields input:focus, .exam-detail-page .paper-editor-fields select:focus, .exam-detail-page .paper-editor-fields textarea:focus {
  background: #fff;
  border-color: #7fd5a6;
  box-shadow: 0 0 0 3px #07c16014;
}

.exam-detail-page .paper-question-bbox {
  border-color: #07c160b8;
}

.exam-detail-page .paper-question-bbox.selected {
  background: #07c1600f;
  border-color: #07a652;
}

:is(body:has(.exam-detail-page) .answer-fill-dialog-overlay, body:has(.exam-detail-page) .paper-workbench-dialog-overlay, body:has(.exam-detail-page) .paper-page-dialog-overlay) {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #1d2b238f;
}

:is(body:has(.exam-detail-page) .answer-fill-dialog, body:has(.exam-detail-page) .paper-workbench-dialog) {
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 15px;
  padding: 24px;
  box-shadow: 0 28px 80px #18302238;
}

:is(body:has(.exam-detail-page) .answer-fill-dialog h2, body:has(.exam-detail-page) .paper-workbench-dialog h2) {
  color: #27312b;
  margin: 0;
  font-family: Songti SC, STSong, serif;
  font-size: 21px;
  line-height: 1.3;
}

:is(body:has(.exam-detail-page) .answer-fill-dialog > p, body:has(.exam-detail-page) .paper-workbench-dialog-copy p) {
  color: #748078;
  margin: 7px 32px 0 0;
  font-size: 12px;
  line-height: 1.7;
}

:is(body:has(.exam-detail-page) .answer-fill-dialog-close, body:has(.exam-detail-page) .paper-workbench-dialog-close) {
  color: #839088;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  top: 17px;
  right: 17px;
}

:is(body:has(.exam-detail-page) .answer-fill-dialog-close:hover, body:has(.exam-detail-page) .paper-workbench-dialog-close:hover) {
  color: #3f4d44;
  background: #f0f5f2;
}

body:has(.exam-detail-page) .answer-fill-options {
  gap: 9px;
  margin-top: 18px;
}

:is(body:has(.exam-detail-page) .answer-fill-options label, body:has(.exam-detail-page) .answer-fill-scope-options label) {
  color: #3d4941;
  background: #fbfdfc;
  border-color: #dce5df;
  border-radius: 10px;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}

body:has(.exam-detail-page) .answer-fill-options label:hover {
  background: #f5fbf7;
  border-color: #a9d9bc;
}

body:has(.exam-detail-page) .answer-fill-scope-options label:hover:not(.disabled) {
  background: #f5fbf7;
  border-color: #a9d9bc;
}

:is(body:has(.exam-detail-page) .answer-fill-options label:has(input:checked), body:has(.exam-detail-page) .answer-fill-scope-options label:has(input:checked)) {
  background: #e9f8ef;
  border-color: #70cf9c;
  box-shadow: 0 0 0 3px #07c16012;
}

body:has(.exam-detail-page) .answer-fill-scope-options label.force:has(input:checked) {
  background: #fff3f1;
  border-color: #e4a39d;
  box-shadow: 0 0 0 3px #c64a400f;
}

:is(body:has(.exam-detail-page) .answer-fill-options input, body:has(.exam-detail-page) .answer-fill-scope-options input) {
  accent-color: #07c160;
}

body:has(.exam-detail-page) .answer-generation-summary {
  background: #f8fbf9;
  border-color: #e1e8e4;
}

body:has(.exam-detail-page) .answer-generation-summary span + span {
  border-color: #e1e8e4;
}

body:has(.exam-detail-page) .answer-generation-summary strong {
  color: #078f48;
}

body:has(.exam-detail-page) .answer-file-picker {
  color: #46534b;
}

body:has(.exam-detail-page) .answer-file-picker input {
  background: #fbfdfc;
  border-color: #dce5df;
  border-radius: 9px;
}

body:has(.exam-detail-page) .answer-fill-overwrite-warning {
  color: #a43e35;
  background: #fff3f1;
  border-left-color: #d85a50;
  border-radius: 0 8px 8px 0;
}

body:has(.exam-detail-page) .answer-fill-dialog-actions .button {
  border-radius: 9px;
  min-width: 86px;
  height: 39px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
}

body:has(.exam-detail-page) .paper-workbench-dialog-actions button {
  border-radius: 9px;
  min-width: 86px;
  height: 39px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
}

body:has(.exam-detail-page) .answer-fill-dialog-actions .button:not(.secondary):not(.danger) {
  color: #fff;
  background: #07c160;
  border: 1px solid #07c160;
  box-shadow: 0 7px 18px #07c16021;
}

body:has(.exam-detail-page) .paper-workbench-dialog-primary {
  color: #fff;
  background: #07c160;
  border: 1px solid #07c160;
  box-shadow: 0 7px 18px #07c16021;
}

body:has(.exam-detail-page) .answer-fill-dialog-actions .button:not(.secondary):not(.danger):hover {
  background: #06ad56;
}

body:has(.exam-detail-page) .paper-workbench-dialog-primary:hover:not(:disabled) {
  background: #06ad56;
}

body:has(.exam-detail-page) .answer-fill-dialog-actions .button.secondary {
  color: #68756d;
  background: #fff;
  border: 1px solid #dce5df;
}

body:has(.exam-detail-page) .paper-workbench-dialog-secondary {
  color: #68756d;
  background: #fff;
  border: 1px solid #dce5df;
}

body:has(.exam-detail-page) .answer-fill-dialog-actions .button.secondary:hover {
  color: #078f48;
  background: #f6faf7;
  border-color: #b9d8c5;
}

body:has(.exam-detail-page) .paper-workbench-dialog-secondary:hover:not(:disabled) {
  color: #078f48;
  background: #f6faf7;
  border-color: #b9d8c5;
}

body:has(.exam-detail-page) .answer-fill-dialog-actions .button.danger {
  color: #fff;
  background: #d85a50;
  border-color: #d85a50;
  box-shadow: 0 7px 18px #d85a501f;
}

body:has(.exam-detail-page) .paper-workbench-dialog-primary.danger {
  color: #fff;
  background: #d85a50;
  border-color: #d85a50;
  box-shadow: 0 7px 18px #d85a501f;
}

:is(body:has(.exam-detail-page) .answer-fill-dialog-actions .button.danger:hover, body:has(.exam-detail-page) .paper-workbench-dialog-primary.danger:hover:not(:disabled)) {
  background: #c74c43;
}

:is(body:has(.exam-detail-page) .paper-recognition-confirmation-icon, body:has(.exam-detail-page) .paper-workbench-dialog-icon) {
  color: #079c4e;
  background: #e8f8ef;
}

body:has(.exam-detail-page) .paper-recognition-confirmation-icon.danger {
  color: #c94d44;
  background: #fff0ee;
}

body:has(.exam-detail-page) .paper-action-confirmation-dialog.danger .paper-workbench-dialog-icon {
  color: #c94d44;
  background: #fff0ee;
}

.paper-workbench-dialog-overlay {
  z-index: 92;
  position: fixed;
  inset: 0;
}

.paper-workbench-dialog {
  z-index: 93;
  outline: none;
  width: min(500px, 100vw - 32px);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.paper-action-confirmation-dialog {
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  display: grid;
}

.paper-workbench-dialog-icon {
  border-radius: 50%;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
}

.paper-workbench-dialog-copy {
  min-width: 0;
  padding-right: 22px;
}

.paper-action-confirmation-dialog .paper-workbench-dialog-actions {
  grid-column: 1 / -1;
}

.paper-workbench-dialog-actions {
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
  display: flex;
}

.paper-workbench-dialog-actions button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.paper-workbench-dialog-close {
  background: none;
  border: 0;
  place-items: center;
  display: grid;
  position: absolute;
}

.exam-level-review .review-paper-panel, .exam-level-review .review-tree-panel, .exam-level-review .review-question-panel {
  background: #fff;
  border-color: #dce5df;
  border-radius: 10px;
  box-shadow: 0 2px 10px #283f310b;
}

.review-paper-toolbar {
  background: #fff;
  border-bottom: 1px solid #e2e8e4;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 9px 12px;
  display: flex;
}

.review-paper-toolbar-title {
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.review-paper-toolbar-title h2 {
  color: #27312b;
  margin: 0;
  font: 600 18px / 1.2 Songti SC, STSong, serif;
}

.review-paper-toolbar-title span {
  color: #7a857e;
  font-size: 10px;
}

.review-paper-toolbar-actions, .review-tree-heading-actions {
  align-items: center;
  gap: 5px;
  display: flex;
}

.review-paper-toolbar-actions button {
  color: #617068;
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 8px;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
}

.review-paper-toolbar-actions button:hover:not(:disabled) {
  color: #079c4e;
  border-color: #a9d9bc;
}

.review-paper-toolbar-actions button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.review-paper-toolbar-actions .review-paper-zoom-value {
  color: #078f48;
  place-items: center;
  min-width: 42px;
  font-size: 10px;
  font-weight: 700;
  display: grid;
}

.review-paper-toolbar-actions button:last-child {
  color: #079c4e;
  background: #e9f8ef;
  border-color: #bfe5ce;
}

.exam-level-review .review-paper-scroll {
  background: #e9eef5;
  padding: 18px;
  overflow: auto;
}

.exam-level-review .review-paper-pages {
  min-width: 50%;
  margin: 0 auto;
  transition: width .16s;
}

.exam-level-review .review-paper-page {
  background: none;
  border: 0;
  overflow: visible;
}

.exam-level-review .review-paper-page.active {
  border-color: #0000;
}

.exam-level-review .review-paper-canvas {
  overflow: visible;
  box-shadow: 0 6px 18px #28466421;
}

.exam-level-review .review-question-list-heading.review-tree-heading {
  border-bottom: 0;
  min-height: 58px;
  padding: 9px 10px 8px 12px;
}

.review-tree-heading-title {
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.review-tree-heading-title span {
  color: #7a857e;
  white-space: nowrap;
  font-size: 10px;
}

.exam-level-review .review-tree-heading-title h2 {
  color: #27312b;
  margin: 0;
  font: 600 18px / 1.2 Songti SC, STSong, serif;
}

.exam-level-review .review-tree-heading-actions .paper-tree-icon-action {
  color: #617068;
  border-color: #dce5df;
  border-radius: 8px;
  width: 30px;
  height: 30px;
}

.exam-level-review .review-tree-heading-actions .paper-tree-icon-action:hover:not(:disabled) {
  color: #079c4e;
  background: #f1faf5;
  border-color: #a9d9bc;
}

.exam-level-review .review-tree-heading-actions .paper-tree-icon-action.primary {
  color: #fff;
  background: #07c160;
  border-color: #07c160;
}

.review-tree-task-progress {
  z-index: 4;
  background: #e4ebe7;
  flex: 0 0 3px;
  height: 3px;
  position: relative;
  overflow: visible;
}

.review-tree-task-progress > [role="progressbar"] {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.review-tree-task-progress i {
  background: #07c160;
  height: 100%;
  transition: width .5s;
  display: block;
}

.review-tree-task-progress.complete i {
  background: #078f48;
}

.review-tree-task-progress.paused i {
  background: #c18a3d;
}

.review-tree-task-progress.failed i {
  background: #c64a40;
}

.review-tree-progress-tip {
  z-index: 5;
  bottom: calc(100% + 6px);
  left: var(--review-tree-progress-tip-left, 8px);
  color: #078f48;
  pointer-events: none;
  background: #e8f8ef;
  border: 1px solid #8bd6ad;
  border-radius: 8px;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 16px);
  padding: 3px 7px;
  font-size: 9px;
  line-height: 1.25;
  transition: left .3s;
  display: flex;
  position: absolute;
  box-shadow: 0 3px 10px #1f4b3117;
}

.review-tree-progress-tip:before {
  bottom: -4px;
  left: var(--review-tree-progress-tip-arrow-left, 8px);
  content: "";
  background: #e8f8ef;
  border-bottom: 1px solid #8bd6ad;
  border-right: 1px solid #8bd6ad;
  width: 6px;
  height: 6px;
  transition: left .3s;
  position: absolute;
  transform: rotate(45deg);
}

.review-tree-progress-tip strong, .review-tree-progress-tip b {
  white-space: nowrap;
}

.review-tree-progress-tip b {
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.review-tree-task-progress.failed .review-tree-progress-tip {
  color: #c64a40;
  background: #fff0ed;
  border-color: #efb8b1;
}

.review-tree-task-progress.failed .review-tree-progress-tip:before {
  background: #fff0ed;
  border-color: #efb8b1;
}

.review-tree-task-progress.paused .review-tree-progress-tip {
  color: #9b612c;
  background: #fff7ed;
  border-color: #e7b98f;
}

.review-tree-task-progress.paused .review-tree-progress-tip:before {
  background: #fff7ed;
  border-color: #e7b98f;
}

.exam-level-review .review-tree-filters {
  background: #f1f5f2;
  border-color: #dce5df;
  border-radius: 8px;
}

.exam-level-review .review-tree-filters button.active {
  color: #078f48;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px #22442e1a;
}

.exam-level-review .review-tree-questions button.selected {
  color: #27312b;
  background: #e9f8ef;
  border-left-color: #07a652;
  box-shadow: inset 0 0 0 1px #07a6521f;
}

.review-paper-dialog-stack {
  min-width: 100%;
  margin: 0 auto;
  transition: width .16s;
}

.review-paper-dialog-stack .review-paper-page {
  background: none;
  border: 0;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

body:has(.exam-level-review) .paper-page-dialog {
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 28px 80px #18302238;
}

body:has(.exam-level-review) .paper-page-dialog-toolbar {
  background: #fff;
  border-bottom-color: #e2e8e4;
}

body:has(.exam-level-review) .paper-page-dialog-toolbar h2 {
  color: #27312b;
  font-family: Songti SC, STSong, serif;
}

body:has(.exam-level-review) .paper-page-dialog-toolbar button {
  color: #617068;
  border-radius: 8px;
}

body:has(.exam-level-review) .paper-page-dialog-toolbar button:hover:not(:disabled) {
  color: #079c4e;
  border-color: #a9d9bc;
}

body:has(.exam-level-review) .paper-page-dialog-toolbar .paper-page-dialog-zoom-value {
  color: #078f48;
}

body:has(.exam-level-review) .paper-page-dialog-workspace {
  background: #e4ebe7;
}

.score-analysis-panel {
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 12px;
  min-height: 540px;
  overflow: hidden;
  box-shadow: 0 8px 24px #253a2e0d;
}

.score-analysis-header {
  background: #fbfdfb;
  border-bottom: 1px solid #e5ebe7;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 68px;
  padding: 12px 16px;
  display: flex;
}

.score-analysis-header > div {
  gap: 4px;
  display: grid;
}

.score-analysis-header h2 {
  color: #202923;
  margin: 0;
  font-size: 16px;
  font-weight: 750;
}

.score-analysis-header > div > span {
  color: #7a867e;
  font-size: 11px;
}

.score-analysis-search {
  color: #849188;
  background: #fff;
  border: 1px solid #dbe5de;
  border-radius: 8px;
  align-items: center;
  gap: 7px;
  width: 245px;
  height: 34px;
  padding: 0 10px;
  display: flex;
}

.score-analysis-search:focus-within {
  border-color: #69bd8b;
  box-shadow: 0 0 0 3px #07c16017;
}

.score-analysis-search input {
  color: #263129;
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
  font-size: 12px;
}

.score-analysis-table-wrap {
  overflow: auto;
}

.score-analysis-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  min-width: 980px;
}

.score-analysis-table th {
  color: #68756d;
  text-align: left;
  background: #f5f8f6;
  border-bottom: 1px solid #e4ebe6;
  height: 39px;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 700;
}

.score-analysis-table th:first-child {
  width: 200px;
}

.score-analysis-table th:nth-child(2) {
  width: 105px;
}

.score-analysis-table th:nth-child(3) {
  width: 115px;
}

.score-analysis-table th:nth-child(4), .score-analysis-table th:nth-child(5), .score-analysis-table th:nth-child(6) {
  width: 95px;
}

.score-analysis-table th:nth-child(7), .score-analysis-table th:nth-child(8) {
  width: 105px;
}

.score-analysis-table td {
  color: #4e5a53;
  vertical-align: middle;
  border-bottom: 1px solid #edf1ee;
  height: 55px;
  padding: 7px 13px;
  font-size: 12px;
}

.score-analysis-table tr.clickable:hover td {
  background: #f7fbf8;
}

.score-student-button {
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 9px;
  padding: 0;
  display: flex;
}

.score-student-button.static {
  cursor: default;
}

.score-student-button > span:last-child {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.score-student-button strong {
  color: #263129;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.score-student-button button:hover strong, .score-student-button:hover strong {
  color: #078f48;
}

.score-student-button small {
  color: #929c96;
  font-size: 10px;
}

.score-student-avatar {
  color: #087c43;
  background: #e4f4e9;
  border-radius: 50%;
  flex: 0 0 31px;
  place-items: center;
  width: 31px;
  height: 31px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  overflow: hidden;
}

.score-student-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.score-student-avatar.unbound {
  color: #9b7c6a;
  background: #f2eee9;
}

.score-value strong {
  color: #202923;
  font-size: 14px;
}

.score-value span {
  color: #98a29c;
}

.score-rank {
  color: #85621f;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  display: inline-flex;
}

.score-rank svg {
  color: #c99532;
}

.score-status {
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  height: 23px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.score-status.status-complete {
  color: #078c48;
  background: #e5f7ec;
}

.score-status.status-pending {
  color: #996814;
  background: #fff4dc;
}

.score-status.status-error {
  color: #bc4f48;
  background: #fdebea;
}

.score-status.status-muted {
  color: #78837c;
  background: #f0f3f1;
}

.score-analysis-empty {
  color: #89948d;
  text-align: center;
  padding: 70px 20px;
  font-size: 12px;
}

.score-analysis-workspace-empty {
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 12px;
  place-content: center;
  gap: 8px;
  min-height: 360px;
  display: grid;
}

.score-analysis-workspace-empty strong {
  color: #344039;
  font-size: 15px;
}

.score-analysis-workspace-empty span {
  color: #89948d;
}

.score-analysis-dialog-overlay {
  z-index: 150;
  background: #131d177a;
  animation: .16s ease-out score-dialog-fade;
  position: fixed;
  inset: 0;
}

.score-analysis-dialog {
  z-index: 151;
  background: #f5f8f6;
  border: 1px solid #ffffffb3;
  border-radius: 14px;
  outline: 0;
  flex-direction: column;
  min-width: 1120px;
  animation: .2s ease-out score-dialog-enter;
  display: flex;
  position: fixed;
  inset: 18px;
  overflow: hidden;
  box-shadow: 0 26px 70px #0a1a1147;
}

.score-analysis-dialog-header {
  background: #fff;
  border-bottom: 1px solid #dde6e0;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
  padding: 11px 18px;
  display: flex;
}

.score-analysis-dialog-header > button {
  color: #6f7d74;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.score-analysis-dialog-header > button:hover {
  color: #087943;
  background: #eef5f0;
}

.score-analysis-dialog-student {
  align-items: center;
  gap: 11px;
  display: flex;
}

.score-analysis-dialog-student > span {
  color: #087c43;
  background: #e4f4e9;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 15px;
  font-weight: 800;
  display: grid;
  overflow: hidden;
}

.score-analysis-dialog-student img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.score-analysis-dialog-student > div {
  gap: 3px;
  display: grid;
}

.score-analysis-dialog-student h2 {
  color: #202923;
  margin: 0;
  font-size: 18px;
}

.score-analysis-dialog-student p {
  color: #7d8981;
  margin: 0;
  font-size: 11px;
}

.score-analysis-dialog-body {
  flex: 1;
  padding: 16px 18px 22px;
  overflow: auto;
}

.score-history-summary {
  background: #fff;
  border: 1px solid #dce6df;
  border-radius: 11px;
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.score-history-summary > div {
  border-right: 1px solid #e5ebe7;
  align-content: center;
  gap: 3px;
  min-height: 86px;
  padding: 13px 18px;
  display: grid;
}

.score-history-summary > div:last-child {
  border-right: 0;
}

.score-history-summary span {
  color: #768279;
  font-size: 11px;
}

.score-history-summary strong {
  color: #193d29;
  letter-spacing: -.3px;
  font-size: 22px;
}

.score-history-summary small {
  color: #8b958f;
  font-size: 10px;
}

.score-history-chart-section, .score-history-records {
  background: #fff;
  border: 1px solid #dce6df;
  border-radius: 11px;
  margin-top: 13px;
}

.score-history-section-heading {
  border-bottom: 1px solid #e7ece9;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  padding: 0 15px;
  display: flex;
}

.score-history-section-heading > div {
  color: #078f48;
  align-items: center;
  gap: 7px;
  display: flex;
}

.score-history-section-heading h3 {
  color: #263129;
  margin: 0;
  font-size: 13px;
}

.score-chart-legend {
  font-size: 10px;
  color: #6d7971 !important;
  gap: 17px !important;
}

.score-chart-legend span {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.score-chart-legend span:before {
  content: "";
  border-radius: 2px;
  width: 16px;
  height: 3px;
}

.score-chart-legend .rate:before {
  background: #08a956;
}

.score-chart-legend .rank:before {
  background: #d49335;
}

.score-trend-chart {
  padding: 8px 14px 2px;
}

.score-trend-chart svg {
  width: 100%;
  height: 245px;
  display: block;
  overflow: visible;
}

.score-trend-chart text {
  fill: #8a958e;
  font-size: 10px;
}

.score-trend-chart .grid {
  stroke: #e8edea;
  stroke-width: 1px;
}

.score-trend-chart .rate-line, .score-trend-chart .rank-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5px;
}

.score-trend-chart .rate-line {
  stroke: #08a956;
}

.score-trend-chart .rank-line {
  stroke: #d49335;
  stroke-dasharray: 5 5;
}

.score-trend-chart .rate-point {
  fill: #fff;
  stroke: #08a956;
  stroke-width: 3px;
}

.score-trend-chart .rank-point {
  fill: #fff;
  stroke: #d49335;
  stroke-width: 3px;
}

.score-trend-chart .date-label {
  fill: #66736b;
  font-size: 10px;
}

.score-history-records {
  overflow: hidden;
}

.score-history-records table {
  border-collapse: collapse;
  width: 100%;
}

.score-history-records th, .score-history-records td {
  color: #536058;
  text-align: left;
  border-bottom: 1px solid #edf1ee;
  height: 39px;
  padding: 0 15px;
  font-size: 11px;
}

.score-history-records th {
  color: #748078;
  background: #f7f9f8;
  font-weight: 700;
}

.score-history-records tbody tr:last-child td {
  border-bottom: 0;
}

.score-history-records td strong {
  color: #263129;
  font-size: 12px;
}

.score-history-empty {
  color: #849087;
  align-content: center;
  place-items: center;
  gap: 8px;
  min-height: 420px;
  display: grid;
}

.score-history-empty svg {
  color: #70ad89;
}

.score-history-empty strong {
  color: #344139;
  font-size: 15px;
}

.score-history-empty span {
  font-size: 11px;
}

@keyframes score-dialog-fade {
  from {
    opacity: 0;
  }
}

@keyframes score-dialog-enter {
  from {
    opacity: 0;
    transform: translateY(8px)scale(.995);
  }
}

.grading-overview .grading-batch-tabs, .grading-overview .all-pages-rail, .grading-overview .submission-overview-card {
  background: #fffffff5;
  border-color: #dce5df;
}

.grading-overview .grading-batch-tabs > button.active {
  color: #078f48;
  background: #e9f8ef;
  border-bottom-color: #07c160;
}

.grading-overview .grading-batch-tabs > button:hover {
  background: #f1f8f4;
}

.grading-overview .grading-batch-tabs > .grading-add-batch {
  color: #078f48;
}

.grading-overview .grading-icon-button.primary {
  color: #fff;
  background: #07c160;
  border-color: #07c160;
}

.grading-overview .append-submissions-button {
  color: #078f48;
  background: #fff;
  border-color: #79c99a;
  border-radius: 8px;
}

.grading-overview .submission-filter {
  background: #f1f5f2;
  border-color: #dce5df;
  border-radius: 8px;
}

.grading-overview .submission-filter button.active {
  color: #078f48;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px #22442e1a;
}

.grading-overview .submission-search input, .grading-overview .grading-icon-button, .grading-overview .batch-more-menu summary, .grading-overview .page-rail-tools label, .grading-overview .page-rail-tools button, .grading-overview .expand-pages-button {
  border-color: #dce5df;
  border-radius: 8px;
}

.grading-overview .page-rail-tools button:hover:not(:disabled), .grading-overview .expand-pages-button:hover {
  color: #079c4e;
  border-color: #a9d9bc;
}

.grading-overview .page-rail-tools button.locked {
  background: #079c4e;
  border-color: #079c4e;
}

.grading-overview .all-pages-list {
  scrollbar-color: #9ab7a5 #edf3ef;
}

.grading-overview .all-pages-list::-webkit-scrollbar-track {
  background: #edf3ef;
}

.grading-overview .all-pages-list::-webkit-scrollbar-thumb {
  background: #9ab7a5;
  border-color: #edf3ef;
}

.grading-overview .single-page-item.selected {
  outline-color: #07a652;
}

.grading-overview .single-page-item.drop-before:before, .grading-overview .single-page-item.drop-after:after {
  background: #07c160;
}

.rail-page-preview {
  z-index: 90;
  background: #fff;
  border: 1px solid #a9d9bc;
  border-radius: 12px;
  grid-template-rows: 48px minmax(0, 1fr);
  min-width: 360px;
  max-width: calc(100vw - 32px);
  min-height: 320px;
  max-height: calc(100vh - 32px);
  animation: .14s ease-out rail-page-preview-enter;
  display: grid;
  position: fixed;
  overflow: visible;
  box-shadow: 0 22px 56px #18302238;
}

.rail-page-preview:before, .rail-page-preview:after {
  content: "";
  top: calc(var(--rail-preview-anchor-y) - 10px);
  border-top: 10px solid #0000;
  border-bottom: 10px solid #0000;
  width: 0;
  height: 0;
  position: absolute;
}

.rail-page-preview:before {
  border-right: 12px solid #a9d9bc;
  left: -12px;
}

.rail-page-preview:after {
  border-right: 11px solid #fff;
  left: -10px;
}

.rail-page-preview > header {
  z-index: 1;
  background: #fff;
  border-bottom: 1px solid #dce5df;
  border-radius: 12px 12px 0 0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 10px 0 14px;
  display: flex;
  position: relative;
}

.rail-page-preview > header strong {
  color: #27312b;
  font-size: 13px;
}

.rail-page-preview-actions {
  align-items: center;
  gap: 4px;
  display: flex;
}

.rail-page-preview-actions button {
  color: #617068;
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 8px;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.rail-page-preview-actions button:hover:not(:disabled) {
  color: #078f48;
  background: #eef9f2;
  border-color: #9fd6b5;
}

.rail-page-preview-actions button:disabled {
  cursor: not-allowed;
  opacity: .34;
}

.rail-page-preview-actions span {
  color: #078f48;
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  font-size: 10px;
  font-weight: 750;
}

.rail-page-preview-actions i {
  background: #dce5df;
  width: 1px;
  height: 18px;
  margin: 0 2px;
}

.rail-page-preview-workspace {
  overscroll-behavior: contain;
  background: #dfe7e3;
  border-radius: 0 0 12px 12px;
  min-width: 0;
  min-height: 0;
  padding: 14px;
  overflow: auto;
}

.rail-page-preview-image-stage {
  min-width: 1px;
  min-height: 1px;
  margin: 0 auto;
  transition: width .12s, height .12s;
}

.rail-page-preview-workspace img {
  object-fit: contain;
  background: #fff;
  width: 100%;
  height: 100%;
  display: block;
  box-shadow: 0 6px 22px #192a212e;
}

.rail-page-preview-resize-handle {
  z-index: 2;
  color: #078f48;
  cursor: nwse-resize;
  touch-action: none;
  background: #ffffffe0;
  border: 0;
  border-radius: 7px;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
  position: absolute;
  bottom: 2px;
  right: 2px;
  box-shadow: 0 1px 5px #1830221f;
}

.rail-page-preview-resize-handle:hover {
  background: #e8f8ef;
}

.rail-page-preview-resize-handle:focus-visible {
  outline-offset: 1px;
  outline: 2px solid #07c160;
}

@keyframes rail-page-preview-enter {
  from {
    opacity: 0;
    transform: translateX(-5px)scale(.995);
  }
}

.grading-overview .submission-overview-card {
  border-radius: 10px;
  box-shadow: 0 2px 9px #283f310a;
}

.grading-overview .submission-overview-card.has-issue {
  border-color: #e3a29c;
}

.grading-overview .submission-card-preview {
  background: #f2f6f3;
  border-color: #e0e7e3;
  border-radius: 7px;
}

body:has(.grading-overview, .exam-level-review) .upload-drawer-overlay {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #1d2b2380;
}

:is(body:has(.grading-overview) .upload-drawer, body:has(.grading-overview) .all-pages-expanded-dialog, body:has(.grading-overview) .single-page-preview-dialog, body:has(.grading-overview) .grading-confirm-dialog, body:has(.grading-overview, .exam-level-review) .grading-mode-dialog) {
  background: #fff;
  border-color: #dce5df;
  border-radius: 14px;
  box-shadow: 0 24px 72px #18302233;
}

body:has(.grading-overview) .upload-drawer {
  border-radius: 0;
}

:is(body:has(.grading-overview) .upload-drawer > header, body:has(.grading-overview) .upload-drawer > footer) {
  border-color: #e2e8e4;
}

:is(body:has(.grading-overview) .upload-target-tip, body:has(.grading-overview) .upload-rule-tip) {
  background: #f5faf7;
  border-color: #dce5df;
  border-radius: 9px;
}

:is(body:has(.grading-overview, .exam-level-review) .grading-mode-dialog h2, body:has(.grading-overview) .grading-confirm-dialog h2, body:has(.grading-overview) .all-pages-expanded-dialog h2, body:has(.grading-overview) .single-page-preview-dialog h2, body:has(.grading-overview) .upload-drawer h2) {
  color: #27312b;
}

body:has(.grading-overview, .exam-level-review) .grading-mode-options label {
  background: #fbfdfc;
  border-color: #dce5df;
}

body:has(.grading-overview, .exam-level-review) .grading-mode-options label.selected {
  background: #e9f8ef;
  border-color: #70cf9c;
  box-shadow: 0 0 0 3px #07c16012;
}

body:has(.grading-overview, .exam-level-review) .grading-mode-options input {
  accent-color: #07c160;
}

body:has(.grading-overview, .exam-level-review) .grading-mode-actions .button:not(.secondary) {
  color: #fff;
  background: #07c160;
  border-color: #07c160;
}

body:has(.grading-overview, .exam-level-review) .grading-mode-actions .button:not(.secondary):hover:not(:disabled) {
  background: #06ad56;
}

.paper-text-input-dialog form {
  gap: 0;
  margin-top: 20px;
  display: grid;
}

.paper-text-input-dialog label {
  color: #4a574f;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.paper-text-input-dialog input, .paper-text-input-dialog select {
  color: #27312b;
  background: #fbfdfc;
  border: 1px solid #dce5df;
  border-radius: 9px;
  outline: none;
  width: 100%;
  height: 42px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 400;
}

.paper-text-input-dialog input:focus, .paper-text-input-dialog select:focus {
  background: #fff;
  border-color: #70cf9c;
  box-shadow: 0 0 0 3px #07c16014;
}

body:has(.exam-detail-page) .paper-page-dialog {
  background: #edf2ef;
  border: 1px solid #cfdad3;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 30px 90px #14281c47;
}

body:has(.exam-detail-page) .paper-page-dialog-toolbar {
  background: #fff;
  border-bottom-color: #dce5df;
}

body:has(.exam-detail-page) .paper-page-dialog-toolbar h2 {
  color: #27312b;
  font-family: Songti SC, STSong, serif;
}

body:has(.exam-detail-page) .paper-page-dialog-toolbar span {
  color: #78837c;
}

body:has(.exam-detail-page) .paper-page-dialog-toolbar button {
  color: #617068;
  border-radius: 8px;
}

body:has(.exam-detail-page) .paper-page-dialog-toolbar button:hover:not(:disabled) {
  color: #079c4e;
  background: #e9f8ef;
  border-color: #b9d8c5;
}

body:has(.exam-detail-page) .paper-page-dialog-toolbar .paper-page-dialog-zoom-value {
  color: #078f48;
}

body:has(.exam-detail-page) .paper-page-dialog-workspace {
  background: #e4ebe7;
}

@media (max-width: 900px) {
  .exam-directory-header {
    align-items: flex-start;
  }

  .exam-directory-create-button {
    width: 42px;
    padding: 0;
    font-size: 0;
  }

  .exam-directory-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 14px;
  }

  .exam-directory-filters {
    min-height: 42px;
    overflow-x: auto;
  }

  .exam-directory-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .exam-directory-search, .exam-directory-sort {
    width: 100%;
  }

  .exam-directory-pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .new-exam-form-card {
    padding: 20px;
  }
}

.grading-overview .grading-batch-tabs {
  background: #fff;
  border: 1px solid #dde3df;
  border-radius: 12px;
  align-items: center;
  gap: 6px;
  height: 58px;
  padding: 0 10px;
}

.grading-overview .grading-batch-tabs > button {
  color: #60666d;
  border: 1px solid #0000;
  border-radius: 10px;
  min-width: 112px;
  height: 36px;
  padding: 0 13px;
  font-size: 12px;
}

.grading-overview .grading-batch-tabs > button.active {
  color: #078f48;
  box-shadow: none;
  background: #e8f8ef;
  border-color: #bfe5ce;
}

.grading-overview .grading-batch-tabs > .grading-add-batch {
  color: #078f48;
  background: #f4fbf7;
  border-color: #bfe5ce;
  width: 36px;
  min-width: 36px;
}

.grading-overview .batch-submission-home {
  padding-top: 10px;
}

.grading-overview .batch-submission-toolbar {
  min-height: 62px;
  padding: 0 4px 10px;
}

.grading-overview .batch-submission-heading h2 {
  color: #27312b;
  font-size: 21px;
}

.grading-overview .batch-submission-heading p {
  color: #7a857e;
}

.grading-overview .submission-filter, .grading-overview .submission-search input, .grading-overview .grading-icon-button, .grading-overview .batch-more-menu summary, .grading-overview .append-submissions-button {
  border-radius: 9px;
  height: 34px;
}

.grading-overview .submission-filter {
  height: 36px;
  padding: 3px;
}

.grading-overview .submission-filter button {
  border-radius: 7px;
  height: 30px;
}

.grading-overview .submission-overview-layout {
  grid-template-columns: 238px minmax(0, 1fr);
  gap: 10px;
}

.grading-overview .all-pages-rail {
  background: #fff;
  border-color: #dde3df;
  border-radius: 12px;
  overflow: hidden;
}

.grading-overview .all-pages-heading {
  border-color: #dde3df;
  gap: 0;
  padding: 0;
}

.grading-overview .all-pages-heading > div:first-child {
  border-bottom: 1px solid #dde3df;
  height: 54px;
  padding: 0 11px;
}

.grading-overview .all-pages-heading strong {
  color: #1f2329;
  font-size: 13px;
}

.grading-overview .expand-pages-button {
  color: #07a652;
  background: #e8f8ef;
  border-color: #d5e5dc;
  border-radius: 9px;
  width: 32px;
  height: 32px;
}

.grading-overview .page-rail-tools {
  gap: 5px;
  height: 45px;
  padding: 6px 8px;
}

.grading-overview .page-rail-tools label {
  border-color: #dde3df;
  border-radius: 9px;
  width: 62px;
  height: 31px;
}

.grading-overview .page-rail-tools input {
  text-align: center;
  width: 34px;
  height: 29px;
  font-weight: 700;
}

.grading-overview .page-rail-tools button {
  border-color: #dde3df;
  border-radius: 9px;
  width: 31px;
  height: 31px;
}

.grading-overview .page-rail-tools button:first-of-type {
  color: #07a652;
  background: #e8f8ef;
}

.grading-overview .all-pages-list {
  scrollbar-color: #aab7b0 #edf3ef;
  background: #f2f5f4;
  padding: 9px;
}

.grading-overview .submission-divider {
  color: #7a857e;
  letter-spacing: .02em;
  align-items: center;
  gap: 7px;
  margin: 5px 1px 6px;
  font-size: 9px;
  display: flex;
}

body:has(.grading-overview) .all-pages-expanded-dialog .submission-divider {
  color: #7a857e;
  letter-spacing: .02em;
  align-items: center;
  gap: 7px;
  margin: 5px 1px 6px;
  font-size: 9px;
  display: flex;
}

.grading-overview .submission-divider:before, .grading-overview .submission-divider:after {
  content: "";
  background: #d7dfda;
  flex: 1;
  height: 1px;
}

body:has(.grading-overview) .all-pages-expanded-dialog .submission-divider:before {
  content: "";
  background: #d7dfda;
  flex: 1;
  height: 1px;
}

body:has(.grading-overview) .all-pages-expanded-dialog .submission-divider:after {
  content: "";
  background: #d7dfda;
  flex: 1;
  height: 1px;
}

.grading-overview .submission-divider span {
  white-space: nowrap;
  flex: none;
}

body:has(.grading-overview) .all-pages-expanded-dialog .submission-divider span {
  white-space: nowrap;
  flex: none;
}

.single-page-row {
  background: #fff;
  border: 1px solid #dde3df;
  border-radius: 9px;
  grid-template-rows: minmax(0, 1fr) 24px;
  grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 8px;
  min-height: 106px;
  margin-bottom: 8px;
  padding: 7px;
  transition: border-color .14s, background-color .14s, opacity .14s;
  display: grid;
  position: relative;
}

.single-page-row .single-page-item {
  background: #fff;
  border-color: #dde3df;
  border-radius: 5px;
  grid-row: 1 / 3;
  width: 68px;
  height: 92px;
}

.single-page-copy {
  align-content: center;
  gap: 4px;
  min-width: 0;
  display: grid;
}

.single-page-copy strong {
  color: #1f2329;
  font-size: 11px;
}

.single-page-copy small {
  color: #91979e;
  white-space: nowrap;
  font-size: 9px;
}

.single-page-row .single-page-actions {
  justify-content: flex-start;
  gap: 1px;
  height: 24px;
  padding: 0;
}

.single-page-row .single-page-actions button {
  color: #91979e;
  width: 18px;
  height: 20px;
}

.single-page-row .single-page-actions button:last-child {
  color: #d85a50;
}

.single-page-row.selected {
  background: #e8f8ef;
  border-color: #07c160;
}

.single-page-row.cut {
  opacity: .7;
  border-style: dashed;
  border-color: #4e8eae;
}

.single-page-row.dragging {
  opacity: .38;
}

.single-page-row.placeholder {
  background: #fff5e8;
  border-color: #eeaa5f;
}

.single-page-row.placeholder .single-page-item {
  color: #d88731;
  background: #fffaf3;
}

.single-page-row.drop-before:before, .single-page-row.drop-after:after, .expanded-page-row.drop-before:before, .expanded-page-row.drop-after:after {
  content: "";
  z-index: 5;
  background: #07c160;
  border-radius: 999px;
  height: 3px;
  position: absolute;
  left: 8px;
  right: 8px;
  box-shadow: 0 1px #ffffffe6;
}

.single-page-row.drop-before:before, .expanded-page-row.drop-before:before {
  top: -6px;
}

.single-page-row.drop-after:after, .expanded-page-row.drop-after:after {
  bottom: -6px;
}

.grading-overview .submission-card-area {
  padding-right: 2px;
}

.grading-overview .submission-overview-card {
  border-radius: 14px;
  gap: 11px;
  min-height: 500px;
  padding: 12px;
  box-shadow: 0 2px 10px #283f3109;
}

.grading-overview .submission-overview-card:hover {
  border-color: #a9cdb7;
  box-shadow: 0 8px 22px #283f3114;
}

.grading-overview .submission-card-preview {
  background: #eef2f1;
  border-color: #dde3df;
  border-radius: 10px;
  height: 320px;
}

.grading-overview .submission-card-copy strong {
  color: #27312b;
  font-size: 13px;
}

.grading-overview .submission-card-copy small {
  color: #7a857e;
  font-size: 10px;
}

.grading-overview .submission-card-actions {
  border-color: #e6ece8;
  margin-top: auto;
  padding-top: 10px;
}

body:has(.grading-overview) .upload-drawer-overlay {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #14212fc7;
}

body:has(.grading-overview) .all-pages-expanded-dialog {
  background: #fff;
  border: 0;
  border-radius: 18px;
  grid-template-rows: 66px 58px minmax(0, 1fr);
  gap: 0;
  width: min(1048px, 100vw - 64px);
  height: min(864px, 100vh - 64px);
  padding: 0;
  top: 50%;
  bottom: auto;
  overflow: hidden;
  transform: translate(-50%, -50%);
  box-shadow: 0 24px 70px #0b1c3047;
}

.expanded-dialog-heading {
  border-bottom: 1px solid #dde3df;
  align-content: center;
  gap: 4px;
  padding: 0 18px;
  display: grid;
}

body:has(.grading-overview) .expanded-dialog-heading h2 {
  color: #1f2329;
  margin: 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 750;
}

.expanded-dialog-heading p {
  color: #91979e;
  margin: 0;
  font-size: 11px;
}

body:has(.grading-overview) .all-pages-expanded-dialog > button {
  color: #60666d;
  background: #fff;
  border: 1px solid #dde3df;
  border-radius: 9px;
  width: 36px;
  height: 36px;
  top: 15px;
  right: 18px;
}

body:has(.grading-overview) .all-pages-expanded-dialog > .expanded-page-tools {
  background: #f2f8f4;
  border-bottom: 1px solid #dde3df;
  justify-content: flex-start;
  gap: 6px;
  height: 58px;
  padding: 0 16px;
}

body:has(.grading-overview) .all-pages-expanded-dialog > .expanded-page-tools label {
  width: 72px;
  height: 34px;
}

body:has(.grading-overview) .all-pages-expanded-dialog > .expanded-page-tools button {
  width: 34px;
  height: 34px;
}

body:has(.grading-overview) .expanded-pages-list {
  background: #f3f6f5;
  border: 0;
  gap: 8px;
  padding: 10px 14px 18px;
}

.expanded-page-cell .submission-divider {
  color: #6f7c74;
  margin: 6px 1px 2px;
  font-size: 10px;
}

.expanded-page-row {
  background: #fff;
  border: 1px solid #dde3df;
  border-radius: 11px;
  grid-template-columns: 98px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  height: 126px;
  padding: 10px;
  display: grid;
  position: relative;
}

.expanded-page-row.selected {
  background: #e8f8ef;
  border-color: #07c160;
}

.expanded-page-row.cut {
  opacity: .7;
  border-style: dashed;
  border-color: #4e8eae;
}

.expanded-page-row.dragging {
  opacity: .38;
}

.expanded-page-row.placeholder {
  background: #fff5e8;
  border-color: #eeaa5f;
}

.expanded-page-cell .expanded-page-row .single-page-item {
  background: #fff;
  border-color: #dde3df;
  border-radius: 6px;
  width: 98px;
  height: 106px;
}

.expanded-page-copy {
  gap: 6px;
  min-width: 0;
  display: grid;
}

.expanded-page-copy strong {
  color: #1f2329;
  font-size: 14px;
}

.expanded-page-copy span {
  color: #60666d;
  font-size: 11px;
}

.expanded-page-copy small {
  color: #078f48;
  font-size: 10px;
}

.expanded-page-row.placeholder .expanded-page-copy small {
  color: #c47c2e;
}

.expanded-page-row .single-page-actions {
  gap: 6px;
  height: auto;
  padding: 0;
}

.expanded-page-row .single-page-actions button {
  color: #60666d;
  background: #fff;
  border: 1px solid #dde3df;
  border-radius: 9px;
  width: 34px;
  height: 34px;
}

.expanded-page-row .single-page-actions button:hover:not(:disabled) {
  color: #079c4e;
  background: #f1faf5;
  border-color: #a9d9bc;
}

.expanded-page-row .single-page-actions button:last-child {
  color: #d85a50;
  background: #fff0f0;
  border-color: #f0d4d1;
}

body:has(.grading-overview) .single-page-preview-dialog {
  background: #fff;
  border: 0;
  border-radius: 14px;
  grid-template-rows: 64px minmax(0, 1fr);
  gap: 0;
  width: min(1120px, 100vw - 64px);
  height: min(860px, 100vh - 64px);
  padding: 0;
  inset: 50% auto auto 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  box-shadow: 0 24px 70px #0b1c3047;
}

.single-page-preview-dialog > header {
  border-bottom: 1px solid #dde3df;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  display: flex;
}

.single-page-preview-dialog header > div {
  align-items: baseline;
  gap: 10px;
  display: flex;
}

body:has(.grading-overview) .single-page-preview-dialog h2 {
  color: #1f2329;
  margin: 0;
  font-family: inherit;
  font-size: 18px;
}

.single-page-preview-dialog header p {
  color: #91979e;
  margin: 0;
  font-size: 11px;
}

.single-page-preview-dialog header > button {
  color: #60666d;
  background: #fff;
  border: 1px solid #dde3df;
  border-radius: 9px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.single-page-preview-workspace {
  background: #dfe7e3;
  place-items: start center;
  min-height: 0;
  padding: 22px;
  display: grid;
  overflow: auto;
}

.single-page-preview-workspace img {
  object-fit: contain;
  background: #fff;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  box-shadow: 0 8px 26px #192a212e;
}

.exam-level-review .review-submission-toolbar {
  background: #fff;
  border: 1px solid #dde3df;
  border-radius: 12px;
  min-height: 58px;
  margin-bottom: 10px;
  padding: 0 4px;
}

.exam-level-review .review-navigation-button {
  color: #60666d;
  border-color: #dde3df;
  border-radius: 9px;
  width: 34px;
  height: 34px;
}

.exam-level-review .review-submission-meta strong {
  color: #1f2329;
  font-size: 13px;
}

.exam-level-review .review-submission-meta span {
  color: #7a857e;
  font-size: 10px;
}

.exam-level-review .review-sequence-actions {
  margin-left: auto;
}

.exam-level-review .review-workbench-grid {
  grid-template-columns: minmax(500px, 1.42fr) 268px minmax(360px, .9fr);
  gap: 10px;
  height: calc(100vh - 266px);
  min-height: 680px;
  padding: 0;
}

.exam-level-review .review-paper-panel, .exam-level-review .review-tree-panel, .exam-level-review .review-question-panel {
  box-shadow: none;
  border: 1px solid #dde3df;
  border-radius: 12px;
  overflow: hidden;
}

.exam-level-review .review-paper-panel {
  background: #e9eef0;
}

.exam-level-review .review-paper-toolbar, .exam-level-review .review-question-list-heading.review-tree-heading, .exam-level-review .review-question-panel > header {
  border-bottom: 1px solid #dde3df;
  min-height: 58px;
  padding: 0 12px;
}

.exam-level-review .review-paper-toolbar-title h2, .exam-level-review .review-tree-heading-title h2, .exam-level-review .review-question-panel > header h2 {
  color: #1f2329;
  font-family: inherit;
  font-size: 15px;
  font-weight: 750;
}

.exam-level-review .review-paper-scroll {
  background: #e9eef0;
  padding: 18px 22px;
}

.exam-level-review .review-paper-canvas {
  box-shadow: 0 7px 20px #24382d24;
}

.exam-level-review .review-tree-filters {
  background: #f2f8f4;
  margin: 7px 8px;
}

.exam-level-review .review-tree-pages {
  padding: 0 8px 10px;
}

.exam-level-review .review-question-scroll {
  padding: 15px;
}

.exam-level-review .review-answer-bbox.selected {
  background: #07c1601f;
  border-color: #07c160;
}

body:has(.exam-level-review) .paper-page-dialog {
  background: #fff;
  border: 0;
  border-radius: 14px;
  width: min(1320px, 100vw - 64px);
  height: min(860px, 100vh - 64px);
  box-shadow: 0 28px 80px #0b1c304d;
}

body:has(.exam-level-review) .paper-page-dialog-layout {
  grid-template-rows: 64px minmax(0, 1fr);
}

body:has(.exam-level-review) .paper-page-dialog-toolbar {
  padding: 0 18px;
}

body:has(.exam-level-review) .paper-page-dialog-toolbar h2 {
  color: #1f2329;
  font-family: inherit;
  font-size: 18px;
}

body:has(.exam-level-review) .paper-page-dialog-toolbar button {
  background: #fff;
  border: 1px solid #dde3df;
  width: 34px;
  height: 34px;
}

body:has(.exam-level-review) .paper-page-dialog-toolbar .paper-page-dialog-zoom-value {
  width: 50px;
}

body:has(.exam-level-review) .paper-page-dialog-workspace {
  background: #dfe7e3;
  padding: 18px 24px 28px;
}

.review-page-dialog-tip {
  z-index: 4;
  color: #fff;
  pointer-events: none;
  background: #17212be0;
  border-radius: 999px;
  width: max-content;
  margin: 0 auto 12px;
  padding: 7px 12px;
  font-size: 11px;
  position: sticky;
  top: 0;
}

.review-paper-dialog-stack {
  min-width: 50%;
}

.review-paper-dialog-stack .review-paper-page {
  max-width: 760px;
}

.grading-overview {
  background: #fff;
  border: 1px solid #dde6e0;
  border-radius: 12px;
  overflow: hidden;
}

.grading-overview .grading-batch-tabs {
  border: 0;
  border-bottom: 1px solid #dde6e0;
  border-radius: 0;
  justify-content: space-between;
  gap: 16px;
  height: 58px;
  padding: 0 16px;
  display: flex;
  overflow: visible;
}

.grading-overview .grading-batch-tab-list {
  align-items: center;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.grading-overview .grading-batch-tab-list > button {
  color: #526159;
  background: #f2f8f4;
  border: 1px solid #0000;
  border-radius: 9px;
  min-width: 108px;
  height: 38px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 650;
}

.grading-overview .grading-batch-tab-list > button:hover:not(:disabled) {
  color: #078f48;
  background: #eaf8ef;
  border-color: #c6e7d2;
}

.grading-overview .grading-batch-tab-list > button.active {
  color: #fff;
  background: #07c160;
  border-color: #07c160;
  box-shadow: 0 4px 10px #07c16029;
}

.grading-overview .grading-batch-tab-list > .grading-add-batch {
  color: #078f48;
  background: #e9f8ef;
  border-color: #c5e8d2;
  width: 38px;
  min-width: 38px;
  padding: 0;
}

.grading-overview .grading-batch-summary {
  color: #7a857e;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  margin: 0;
  font-size: 11px;
  overflow: hidden;
}

.grading-overview .batch-submission-home {
  padding: 10px;
}

.grading-overview .submission-overview-layout {
  grid-template-columns: 238px minmax(0, 1fr);
  gap: 10px;
  height: calc(100vh - 250px);
  min-height: 650px;
}

.grading-overview .all-pages-rail, .grading-overview .submission-card-area {
  min-height: 0;
}

.grading-overview .all-pages-rail {
  border-radius: 10px;
}

.grading-overview .all-pages-list {
  min-height: 0;
  overflow-y: auto;
}

.grading-overview .page-rail-tools button.locked {
  color: #fff;
  background: #25352c;
  border-color: #25352c;
}

.grading-overview .submission-card-area {
  scrollbar-color: #a9b7af #edf3ef;
  padding: 0 2px 12px 0;
  overflow-y: auto;
}

.grading-overview .batch-submission-toolbar {
  z-index: 12;
  background: #fff;
  height: 48px;
  min-height: 48px;
  padding: 5px 0;
  position: sticky;
  top: 0;
}

.grading-overview .batch-submission-actions {
  align-items: center;
  gap: 7px;
  width: 100%;
  display: flex;
}

.grading-overview .submission-filter {
  background: #f2f6f3;
  flex: none;
  height: 38px;
  padding: 3px;
}

.grading-overview .submission-filter button {
  color: #66726b;
  border-radius: 7px;
  height: 32px;
  padding-inline: 11px;
}

.grading-overview .submission-filter button.active {
  color: #078f48;
  background: #fff;
  box-shadow: 0 1px 5px #243d2f17;
}

.grading-overview .submission-search {
  background: #fff;
  border: 1px solid #dbe4de;
  border-radius: 9px;
  width: 180px;
  height: 38px;
  margin-left: auto;
}

.grading-overview .submission-search input {
  border: 0;
  height: 36px;
}

.grading-overview .grading-icon-button, .grading-overview .append-submissions-button {
  border-radius: 9px;
  flex: none;
  height: 38px;
}

.grading-overview .submission-card-grid {
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 12px;
}

.grading-overview .submission-overview-card {
  background: #fff;
  border-color: #dce5df;
  border-radius: 12px;
  gap: 10px;
  min-height: 590px;
  padding: 12px;
}

.grading-overview .submission-card-preview-link {
  display: block;
}

.grading-overview .submission-card-identity-row {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.grading-overview .submission-student-picker {
  flex: 1;
  min-width: 0;
}

.grading-overview .submission-student-trigger {
  color: #27312b;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 32px;
  font-weight: 700;
  display: flex;
}

.grading-overview .submission-card-status {
  color: #737c77;
  background: #f3f5f4;
  border-radius: 999px;
  flex: none;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 650;
  display: inline-flex;
}

.grading-overview .submission-card-status.complete {
  color: #078f48;
  background: #e8f8ef;
}

.grading-overview .submission-card-status.running {
  color: #277da4;
  background: #eaf5fb;
}

.grading-overview .submission-card-status.ready {
  color: #bc6f20;
  background: #fff4e4;
}

.grading-overview .submission-card-score {
  background: #f4faf6;
  border-radius: 8px;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 3px;
  padding: 9px 10px;
  display: flex;
}

.grading-overview .submission-card-score span {
  color: #768179;
  font-size: 10px;
}

.grading-overview .submission-card-score strong {
  color: #e2493f;
  font-size: 16px;
}

.grading-overview .submission-card-actions {
  border-top: 0;
  justify-content: flex-end;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.grading-overview .submission-card-actions .grading-icon-button {
  color: #078f48;
  background: #f1faf5;
  border-color: #cfe6d8;
  width: 36px;
  height: 34px;
}

body:has(.grading-overview) .all-pages-expanded-overlay {
  z-index: 100;
  background: #223044eb;
  position: fixed;
  inset: 0;
}

body:has(.grading-overview) .all-pages-expanded-dialog {
  z-index: 101;
}

body:has(.grading-overview) .expanded-page-tools {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

:is(body:has(.grading-overview) .expanded-page-edit-tools, body:has(.grading-overview) .expanded-page-lock-tools) {
  align-items: center;
  gap: 6px;
  display: flex;
}

body:has(.grading-overview) .expanded-page-lock-tools > span {
  color: #65736b;
  font-size: 11px;
}

body:has(.grading-overview) .expanded-page-lock-tools .lock-state {
  color: #fff;
  background: #26372d;
  border-color: #26372d;
}

body:has(.grading-overview) .expanded-page-lock-tools .resplit {
  min-width: 38px;
  padding: 0 10px;
  color: #b86517 !important;
  background: #fff3df !important;
  border-color: #efbf80 !important;
  width: auto !important;
}

body:has(.grading-overview) .expanded-pages-list {
  overflow-y: auto;
}

body:has(.grading-overview) .expanded-page-cell {
  display: block;
}

body:has(.grading-overview) .expanded-page-row.placeholder {
  background: #fff5e8;
  border-color: #eeaa5f;
}

body:has(.grading-overview) .expanded-page-copy {
  gap: 5px;
  display: grid;
}

body:has(.grading-overview) .expanded-page-copy strong {
  color: #27312b;
  font-size: 13px;
}

body:has(.grading-overview) .expanded-page-copy span {
  color: #77827b;
  font-size: 11px;
}

body:has(.grading-overview) .expanded-page-copy small {
  color: #078f48;
  background: #e8f8ef;
  border-radius: 999px;
  width: max-content;
  padding: 3px 7px;
  font-size: 9px;
}

body:has(.review-detail-page) .teacher-main {
  overflow: hidden;
}

.review-detail-page .exam-workbench-header {
  align-items: center;
  height: 74px;
  min-height: 74px;
  padding-block: 0;
}

.review-detail-page .exam-workbench-header h1 {
  margin-top: 3px;
  font-size: 22px;
}

.review-detail-page .exam-workbench-tabs {
  display: none;
}

.review-detail-page .exam-workbench-tab-content {
  padding-top: 0;
}

.exam-level-review .grading-workbench {
  gap: 10px;
}

.exam-level-review .review-submission-toolbar {
  background: #fff;
  border: 1px solid #dde5df;
  border-radius: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  height: 58px;
  min-height: 58px;
  margin: 0;
  padding: 0 12px;
  display: grid;
}

.exam-level-review .review-sequence-actions {
  gap: 5px;
  margin: 0;
  display: flex;
}

.exam-level-review .review-navigation-button {
  background: #fff;
  border: 1px solid #dbe4de;
  border-radius: 8px;
  width: 34px;
  height: 34px;
}

.exam-level-review .review-submission-meta {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.exam-level-review .review-submission-meta span:before {
  content: none;
}

.exam-level-review .review-student-avatar {
  background: #e7f8ee;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  font-weight: 750;
  display: grid;
  color: #078f48 !important;
  font-size: 13px !important;
}

.exam-level-review .review-completed-count {
  align-items: center;
  gap: 3px;
  display: inline-flex;
}

.exam-level-review .review-total-score {
  font-weight: 750;
  color: #e24a40 !important;
  font-size: 13px !important;
}

.exam-level-review .review-scope-filter {
  background: #f0f5f2;
  border-radius: 8px;
  padding: 3px;
  display: flex;
}

.exam-level-review .review-scope-filter button {
  color: #68746d;
  background: none;
  border: 0;
  border-radius: 6px;
  height: 30px;
  padding: 0 10px;
  font-size: 11px;
}

.exam-level-review .review-scope-filter button.active {
  color: #078f48;
  background: #fff;
  box-shadow: 0 1px 5px #233c2e17;
}

.exam-level-review .review-workbench-grid {
  grid-template-columns: minmax(500px, 526px) 268px minmax(360px, 1fr);
  gap: 10px;
  height: calc(100vh - 216px);
  min-height: 640px;
}

.exam-level-review .review-paper-panel, .exam-level-review .review-tree-panel, .exam-level-review .review-question-panel {
  border-radius: 10px;
}

.exam-level-review .review-paper-toolbar, .exam-level-review .review-question-list-heading {
  background: #fff;
  border-bottom: 1px solid #dde5df;
  height: 46px;
  min-height: 46px;
  padding: 0 12px;
}

.exam-level-review .review-paper-toolbar-title {
  align-items: center;
  gap: 8px;
  display: flex;
}

.exam-level-review .review-paper-toolbar-title h2, .exam-level-review .review-tree-heading-title h2, .exam-level-review .review-question-list-heading h2 {
  color: #27312b;
  margin: 0;
  font-size: 14px;
  font-weight: 750;
}

.exam-level-review .review-paper-toolbar-title > span {
  color: #078f48;
  background: #edf7f1;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 9px;
}

.exam-level-review .review-paper-toolbar-actions {
  align-items: center;
  gap: 4px;
  display: flex;
}

.exam-level-review .review-paper-toolbar-actions button {
  border-radius: 7px;
  width: 30px;
  height: 30px;
}

.exam-level-review .review-paper-toolbar-divider {
  background: #dce4df;
  width: 1px;
  height: 18px;
  margin: 0 2px;
}

.exam-level-review .review-paper-scroll {
  min-height: 0;
  padding: 18px 22px;
  overflow: auto;
}

.exam-level-review .review-paper-pages {
  max-width: none;
  margin: 0 auto;
}

.exam-level-review .review-paper-page {
  width: 100%;
  max-width: none;
  margin-bottom: 18px;
}

.exam-level-review .review-paper-canvas {
  width: 100%;
}

.exam-level-review .review-answer-bbox {
  background: #07c1600f;
  border-color: #07c1608f;
}

.exam-level-review .review-answer-bbox span {
  background: #05904ab8;
}

.exam-level-review .review-answer-bbox.selected {
  background: #07c16029;
  border-color: #05904a;
  box-shadow: 0 0 0 2px #07c16029;
}

.exam-level-review .review-answer-bbox.selected span {
  background: #05904a;
}

.exam-level-review .review-tree-panel {
  grid-template-rows: 46px auto auto minmax(0, 1fr);
  display: grid;
}

.exam-level-review .review-question-list-heading.review-tree-heading {
  height: 46px;
  min-height: 46px;
  padding: 0 12px;
}

.exam-level-review .review-tree-heading-title {
  align-items: baseline;
  gap: 6px;
  display: flex;
}

.exam-level-review .review-tree-heading-title span {
  color: #89938d;
  font-size: 10px;
}

.exam-level-review .review-tree-task-progress {
  background: #e7ede9;
  border: 0;
  border-radius: 0;
  height: 5px;
  min-height: 5px;
  margin: 0;
  padding: 0;
}

.exam-level-review .review-tree-task-progress > [role="progressbar"] {
  border-radius: 0;
  height: 5px;
}

.exam-level-review .review-tree-action-toolbar {
  background: #fff;
  border-bottom: 1px solid #e2e9e4;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 5px 8px;
  display: flex;
}

.exam-level-review .review-tree-heading-actions {
  gap: 5px;
  display: flex;
}

.exam-level-review .review-tree-heading-actions .paper-tree-icon-action {
  border-radius: 8px;
  width: 31px;
  height: 31px;
}

.exam-level-review .review-identity-status {
  color: #078f48;
  background: #e8f8ef;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  font-size: 9px;
  display: inline-flex;
}

.exam-level-review .review-tree-scroll {
  min-height: 0;
  padding: 7px 8px 12px;
  overflow-y: auto;
}

.exam-level-review .review-tree-page {
  border: 0;
  border-radius: 7px;
}

.exam-level-review .review-tree-page-title {
  min-height: 34px;
}

.exam-level-review .review-tree-questions button {
  border-radius: 6px;
  min-height: 34px;
}

.exam-level-review .review-tree-questions button.selected {
  color: #087d43;
  background: #e8f8ef;
  border-left: 3px solid #07c160;
}

.exam-level-review .review-tree-questions button.wrong {
  color: #ca4c43;
}

.exam-level-review .review-tree-questions button.wrong.selected {
  color: #b93d35;
  background: #fff0ef;
  border-left-color: #df5147;
}

.exam-level-review .review-question-panel {
  grid-template-rows: 46px minmax(0, 1fr);
  display: grid;
}

.exam-level-review .review-question-list-heading {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.exam-level-review .review-question-list-heading > span {
  color: #87918b;
  font-size: 10px;
}

.exam-level-review .review-editor-scroll {
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
}

.exam-level-review .review-current-question {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.exam-level-review .review-current-question strong {
  color: #df4b42;
  font-size: 20px;
}

.exam-level-review .review-edit-form {
  gap: 12px;
}

.exam-level-review .review-edit-form .field > span {
  color: #5c6861;
  font-size: 11px;
  font-weight: 650;
}

.exam-level-review .review-edit-form .textarea, .exam-level-review .review-edit-form .input {
  background: #fbfcfb;
  border-color: #dbe4de;
  border-radius: 8px;
}

.exam-level-review .review-edit-form .wrong-answer {
  color: #a83e37;
  background: #fff1f0;
  border-color: #efb5b0;
}

.exam-level-review .review-score-reason-grid {
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px;
  display: grid;
}

.exam-level-review .review-score-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.exam-level-review .review-score-actions .button {
  white-space: nowrap;
  flex: 1;
  justify-content: center;
  min-width: 0;
  padding-inline: 9px;
  font-size: 11px;
}

.exam-level-review .review-reference-details {
  background: #f8faf9;
  border: 1px solid #dfe7e2;
  border-radius: 9px;
  overflow: hidden;
}

.exam-level-review .review-reference-details summary {
  cursor: pointer;
  color: #46534c;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 650;
  list-style: none;
  display: flex;
}

.exam-level-review .review-reference-details[open] summary svg {
  transform: rotate(90deg);
}

.exam-level-review .review-reference-content {
  gap: 10px;
  padding: 0 11px 11px;
  display: grid;
}

body:has(.exam-level-review) .paper-page-dialog-overlay {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #13202bdb;
}

body:has(.exam-level-review) .paper-page-dialog {
  width: min(1320px, 100vw - 64px);
  height: min(860px, 100vh - 64px);
}

body:has(.exam-level-review) .paper-page-dialog-toolbar {
  height: 64px;
}

body:has(.exam-level-review) .paper-page-dialog-toolbar > div:first-child {
  align-items: baseline;
  gap: 8px;
  display: flex;
}

body:has(.exam-level-review) .paper-page-dialog-toolbar > div:first-child span {
  color: #87918b;
  font-size: 10px;
}

body:has(.exam-level-review) .review-page-dialog-workspace {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: auto;
}

body:has(.exam-level-review) .review-page-dialog-workspace.panning {
  cursor: grabbing;
}

body:has(.exam-level-review) .review-page-dialog-tip {
  align-items: center;
  display: flex;
}

body:has(.exam-level-review) .review-paper-dialog-stack {
  min-width: 0;
  max-width: none;
  margin: 0 auto;
}

body:has(.exam-level-review) .review-paper-dialog-stack .review-paper-page {
  width: 100%;
  max-width: none;
}

@media (max-width: 1420px) {
  .grading-overview .submission-card-grid {
    grid-template-columns: repeat(2, minmax(270px, 1fr));
  }

  .exam-level-review .review-workbench-grid {
    grid-template-columns: minmax(450px, 1.25fr) 250px minmax(340px, .9fr);
  }
}

.grading-overview .grading-batch-tabs {
  justify-content: flex-start;
}

.grading-overview .grading-batch-tab-list > .grading-add-batch {
  place-items: center;
  line-height: 0;
  display: grid;
}

.grading-overview .grading-batch-tab-list > .grading-add-batch svg {
  margin: 0;
  display: block;
}

.grading-overview .expand-pages-button {
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
}

.grading-overview .expand-pages-button svg {
  display: block;
}

.grading-overview .page-rail-tools label {
  flex: 0 0 76px;
  width: 76px;
  overflow: hidden;
}

.grading-overview .page-rail-tools label span {
  white-space: nowrap;
  word-break: keep-all;
  flex: none;
  padding-right: 5px;
}

.grading-overview .page-rail-tools input {
  flex: 1;
  min-width: 0;
}

.grading-overview .submission-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(252px, 276px));
  justify-content: start;
  align-items: start;
  gap: 10px;
}

.grading-overview .submission-overview-card {
  border-radius: 11px;
  gap: 7px;
  width: 100%;
  height: auto;
  min-height: 338px;
  padding: 10px;
}

.grading-overview .submission-card-preview, .grading-overview .submission-card-preview-link {
  height: 220px;
}

.grading-overview .submission-card-copy {
  gap: 5px;
}

.grading-overview .submission-student-picker {
  flex: 1;
}

.grading-overview .submission-student-trigger {
  text-align: left;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  min-height: 28px;
  padding: 0;
}

.grading-overview .submission-student-trigger > span {
  text-align: left;
  flex: 1;
  min-width: 0;
}

.grading-overview .submission-card-score {
  text-align: right;
  background: none;
  justify-content: flex-end;
  align-items: baseline;
  gap: 4px;
  min-width: max-content;
  margin: 0;
  padding: 0;
  display: flex;
}

.grading-overview .submission-card-score span {
  font-size: 9px;
}

.grading-overview .submission-card-score strong {
  white-space: nowrap;
  font-size: 14px;
}

.grading-overview .submission-card-meta-row {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  display: flex;
}

.grading-overview .submission-card-meta-row small {
  min-width: 0;
}

.grading-overview .submission-card-actions {
  justify-content: flex-end;
  gap: 5px;
  margin-top: 1px;
  padding-top: 5px;
}

.grading-overview .submission-card-actions .grading-icon-button {
  width: 33px;
  height: 32px;
}

.grading-overview .submission-overview-card.unbound, .grading-overview .submission-overview-card.unbound.has-issue {
  background: #fff;
  border-color: #dce5df;
  box-shadow: 0 2px 10px #283f3109;
}

.grading-overview .submission-overview-card.unbound .submission-student-trigger, .grading-overview .submission-overview-card.unbound .submission-student-trigger strong {
  color: #8b5c20;
}

.grading-overview .submission-overview-card.unbound .submission-card-status.pending {
  color: #a76718;
  background: #fff0d6;
}

@media (max-width: 1420px) {
  .grading-overview .submission-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(244px, 268px));
  }
}

.exam-detail-page .paper-tree-page-children {
  padding-top: 5px;
}

body:has(.exam-detail-page) .paper-question-bbox {
  background: #07c16006;
  border-color: #07c160c7;
}

body:has(.exam-detail-page) .paper-question-bbox.selected {
  background: #07c16014;
  border-color: #07a652;
}

.grading-overview .single-page-cell {
  display: block;
}

.grading-overview .single-page-row {
  cursor: grab;
}

.grading-overview .single-page-row:active {
  cursor: grabbing;
}

.grading-overview .single-page-row:focus-visible, .grading-overview .expanded-page-row:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #07c16073;
}

.grading-overview .submission-card-area, .grading-overview .submission-card-grid {
  padding-top: 4px;
}

.grading-overview .submission-card-result-slot {
  align-items: center;
  min-height: 30px;
  display: flex;
}

.grading-overview .single-page-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
}

.grading-overview .submission-overview-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 184px;
}

.exam-workspace-loading {
  min-height: calc(100vh - 80px);
}

.exam-workspace-loading-title, .exam-workspace-loading-meta, .exam-workspace-loading-grid > span {
  background: #e8eeea;
  border-radius: 9px;
  animation: 1.2s ease-in-out infinite alternate exam-workspace-loading-pulse;
}

.exam-workspace-loading-title {
  width: 260px;
  height: 30px;
}

.exam-workspace-loading-meta {
  width: 220px;
  height: 24px;
}

.exam-workspace-loading .exam-workbench-tabs span {
  min-width: 112px;
}

.exam-workspace-loading-grid {
  grid-template-columns: minmax(500px, 1.45fr) minmax(268px, .74fr) minmax(360px, 1fr);
  gap: 10px;
  height: calc(100vh - 180px);
  padding-top: 10px;
  display: grid;
}

.exam-workspace-loading-grid > span {
  min-width: 0;
}

@keyframes exam-workspace-loading-pulse {
  from {
    opacity: .58;
  }

  to {
    opacity: 1;
  }
}

.grading-overview .submission-card-result-slot > * {
  width: 100%;
}

.grading-overview .submission-card-result-slot .submission-card-score {
  text-align: left;
  justify-content: flex-start;
}

.grading-overview .submission-card-name-control {
  flex: 1;
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.grading-overview .submission-card-name-control .submission-student-picker {
  flex: 0 auto;
  min-width: 0;
}

.grading-overview .submission-card-name-control .submission-name-recognition-button {
  color: #65736b;
  width: 22px;
  height: 22px;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  background: #eef2f0;
  border-color: #dbe3de;
  border-radius: 6px;
  flex: 0 0 22px;
  padding: 0;
  transition: opacity .12s, border-color .14s, background-color .14s, color .14s;
}

.grading-overview .submission-card-name-control:hover .submission-name-recognition-button:not(.is-running, .is-suppressed), .grading-overview .submission-card-name-control .submission-name-recognition-button:focus-visible, .grading-overview .submission-card-name-control .submission-name-recognition-button.is-failed:not(.is-suppressed) {
  opacity: 1;
  pointer-events: auto;
}

.grading-overview .submission-card-name-control .submission-name-recognition-button:hover:not(:disabled, .is-suppressed) {
  color: #079c4e;
  background: #e9f8ef;
  border-color: #b9ddc8;
}

.grading-overview .submission-card-name-control .submission-name-recognition-button.is-running:disabled {
  color: #079c4e;
  opacity: 0;
  pointer-events: none;
  background: #e4f7eb;
  border-color: #a9d9bc;
}

.grading-overview .submission-card-name-control .submission-name-recognition-button.is-failed {
  color: #b85d54;
  background: #fff1ef;
  border-color: #eccfca;
}

.grading-overview .submission-card-name-control .submission-name-recognition-button.is-failed:hover:not(:disabled, .is-suppressed) {
  color: #a9443c;
  background: #ffe8e5;
  border-color: #e1aaa2;
}

.grading-overview .submission-card-name-control .submission-name-recognition-button.is-suppressed {
  opacity: 0;
  pointer-events: none;
}

.grading-overview .submission-card-footer-row {
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
  min-height: 32px;
  display: flex;
}

.grading-overview .submission-card-footer-row .submission-card-result-slot {
  text-align: right;
  flex: 1;
  justify-content: flex-end;
  align-items: flex-end;
  min-width: 0;
  min-height: 32px;
}

.grading-overview .submission-card-footer-row .submission-card-result-slot .submission-card-score {
  text-align: right;
  justify-content: flex-end;
}

.grading-overview .submission-card-footer-row .submission-card-actions {
  flex: none;
  margin: 0;
  padding: 0;
}

.grading-overview .submission-student-trigger > span {
  flex: 0 auto;
}

.grading-overview .submission-student-trigger > svg:last-child {
  margin-left: 0;
}

.grading-overview .submission-student-trigger > svg {
  transform: none;
}

.grading-overview .submission-student-trigger[aria-expanded="true"] > svg:last-child {
  transform: rotate(180deg);
}

body:has(.grading-overview) .all-pages-expanded-dialog {
  width: min(1320px, 100vw - 48px);
  height: min(920px, 100vh - 48px);
}

body:has(.grading-overview) .expanded-page-lock-tools .lock-state {
  color: #078f48;
  background: #e8f8ef;
  border-color: #b9dfc9;
  place-items: center;
  display: grid;
}

:is(body:has(.grading-overview) .expanded-page-lock-tools .lock-state svg, body:has(.grading-overview) .expanded-page-lock-tools .resplit svg) {
  display: block;
  transform: none;
}

body:has(.grading-overview) .expanded-page-lock-tools .resplit {
  place-items: center;
  display: grid;
  padding: 0 !important;
}

.expanded-page-row {
  grid-template-columns: 340px minmax(0, 1fr) auto;
  align-items: center;
  height: 430px;
  min-height: 430px;
}

.expanded-page-viewport {
  background: #eef2f0;
  border: 1px solid #dce5df;
  border-radius: 8px;
  width: 340px;
  height: 408px;
  overflow: auto;
}

.expanded-page-cell .expanded-page-row .expanded-page-viewport .single-page-item {
  border: 0;
  border-radius: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  transition: width .14s;
}

.expanded-page-cell .expanded-page-row .expanded-page-viewport .single-page-item img {
  object-fit: contain;
  object-position: top center;
  width: 100%;
  height: auto;
  min-height: 100%;
}

.expanded-page-row .single-page-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 82px;
}

.expanded-page-row .single-page-actions .expanded-page-zoom-value {
  width: 42px;
  padding: 0 4px;
  font-size: 9px;
}

.exam-level-review .review-submission-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.exam-level-review .review-submission-leading, .exam-level-review .review-sequence-actions, .exam-level-review .review-submission-meta {
  align-items: center;
  min-width: 0;
  display: flex;
}

.exam-level-review .review-submission-leading {
  flex: 1;
  gap: 9px;
}

.exam-level-review .review-submission-meta {
  white-space: nowrap;
  flex: 1;
  gap: 8px;
}

.exam-level-review .review-submission-meta strong {
  text-overflow: ellipsis;
  overflow: hidden;
}

.exam-level-review .review-sequence-actions {
  gap: 5px;
  margin-left: auto;
}

.exam-level-review .review-submission-meta {
  justify-content: flex-start;
  overflow: visible;
}

.exam-level-review .review-student-name-control {
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.exam-level-review .review-student-name-control .submission-student-picker {
  min-width: 0;
}

.exam-level-review .review-student-name-control .submission-student-trigger {
  color: #27312b;
  gap: 5px;
  width: auto;
  max-width: 190px;
}

.exam-level-review .review-student-name-control .submission-student-trigger > span:not(.review-student-avatar) {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.exam-level-review .review-student-name-control .submission-student-trigger strong {
  font-size: 13px;
}

.exam-level-review .review-student-name-control .submission-student-trigger > svg:last-child {
  width: 13px;
  margin-left: 0;
}

.exam-level-review .review-student-name-control .submission-student-popover {
  z-index: 30;
}

.exam-level-review .review-student-name-control .review-identity-button {
  color: #65736b;
  opacity: 1;
  pointer-events: auto;
  background: #eef2f0;
  border-color: #dbe3de;
  border-radius: 6px;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  transition: opacity .12s, border-color .14s, background-color .14s, color .14s;
}

.exam-level-review .review-student-name-control .review-identity-button:hover:not(:disabled) {
  color: #079c4e;
  background: #e9f8ef;
  border-color: #b9ddc8;
}

.exam-level-review .review-student-name-control .review-identity-button:disabled {
  opacity: .45;
  pointer-events: none;
}

.exam-level-review .review-sequence-label {
  color: #68756d;
  white-space: nowrap;
  margin-right: 3px;
  font-size: 11px;
  font-weight: 650;
}

.exam-level-review .review-identity-button, .exam-level-review .review-regrade-button {
  border-radius: 7px;
  flex: none;
  width: 30px;
  height: 30px;
}

.exam-level-review .review-workbench-grid {
  grid-template-columns: minmax(500px, 1.45fr) minmax(268px, .74fr) minmax(360px, 1fr);
}

.exam-level-review .review-tree-panel {
  grid-template-rows: 46px auto auto auto minmax(0, 1fr);
}

.exam-level-review .review-scope-filter {
  margin: 5px 8px 7px;
}

.exam-level-review .review-scope-filter button {
  flex: 1;
}

.exam-level-review .review-question-list-heading > div:last-child {
  place-items: center;
  display: grid;
}

.exam-level-review .review-score-actions .button {
  flex: 1;
}

.grading-overview .single-page-row[data-page-layout="preview-over-actions"] {
  grid-template-rows: 190px 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 6px;
  min-height: 0;
  padding: 5px;
}

.grading-overview .single-page-row[data-page-layout="preview-over-actions"] .single-page-item {
  grid-area: 1 / 1 / auto / -1;
  width: 100%;
  height: 190px;
}

.grading-overview .single-page-row[data-page-layout="preview-over-actions"] .single-page-copy {
  grid-area: 2 / 1;
  align-items: center;
  gap: 6px;
  display: flex;
}

.grading-overview .single-page-row[data-page-layout="preview-over-actions"] .single-page-copy small {
  text-overflow: ellipsis;
  overflow: hidden;
}

.grading-overview .single-page-row[data-page-layout="preview-over-actions"] .single-page-actions {
  grid-area: 2 / 2;
  justify-content: flex-end;
  align-self: center;
}

body:has(.grading-overview) .expanded-page-row[data-page-layout="preview-over-actions"] {
  grid-template-rows: auto 38px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  height: auto;
  min-height: 0;
  padding: 12px;
}

body:has(.grading-overview) .expanded-page-row[data-page-layout="preview-over-actions"] .expanded-page-viewport {
  grid-area: 1 / 1 / auto / -1;
  width: 100%;
  height: auto;
  overflow: visible;
}

body:has(.grading-overview) .expanded-page-row[data-page-layout="preview-over-actions"] .expanded-page-viewport .single-page-item {
  min-height: 0;
}

body:has(.grading-overview) .expanded-page-row[data-page-layout="preview-over-actions"] .expanded-page-viewport .single-page-item img {
  min-height: 0;
}

body:has(.grading-overview) .expanded-page-row.placeholder[data-page-layout="preview-over-actions"] .expanded-page-viewport .single-page-item {
  min-height: 420px;
}

body:has(.grading-overview) .expanded-page-row[data-page-layout="preview-over-actions"] .expanded-page-copy {
  grid-area: 2 / 1;
  align-items: center;
  gap: 10px;
  display: flex;
}

body:has(.grading-overview) .expanded-page-row[data-page-layout="preview-over-actions"] .single-page-actions {
  flex-wrap: nowrap;
  grid-area: 2 / 2;
  justify-content: flex-end;
  max-width: none;
}

.scanner-page, .scanner-workbench-page {
  color: #27332e;
  min-width: 1180px;
  padding: 28px 32px 40px;
}

.scanner-page-header, .scanner-workbench-header {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
  display: flex;
}

.scanner-page-header h1, .scanner-workbench-header h1 {
  margin: 4px 0;
  font-size: 26px;
  line-height: 1.2;
}

.scanner-page-header p {
  color: #75817b;
  margin: 6px 0 0;
}

.scanner-kicker {
  letter-spacing: .12em;
  color: #4d8d70;
  font-size: 12px;
  font-weight: 700;
}

.scanner-header-actions, .scanner-workbench-actions, .scanner-manager-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.icon-button {
  color: #52625a;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dce6e0;
  border-radius: 8px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: inline-grid;
}

.icon-button:hover {
  color: #237752;
  background: #f3faf6;
  border-color: #8db9a2;
}

.icon-button.danger {
  color: #bd4e4e;
}

.icon-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.scanner-device-card {
  background: #fff;
  border: 1px solid #dfe8e3;
  border-radius: 12px;
  align-items: center;
  gap: 15px;
  padding: 17px 18px;
  display: flex;
  box-shadow: 0 4px 16px #264c3a0a;
}

.scanner-device-icon {
  color: #7b8981;
  background: #f0f3f1;
  border-radius: 11px;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
}

.scanner-device-icon.online {
  color: #248358;
  background: #e9f7ef;
}

.scanner-device-copy {
  flex: 1;
  gap: 2px;
  display: grid;
}

.scanner-device-copy small {
  color: #88938d;
  font-size: 12px;
}

.scanner-device-copy strong {
  font-size: 16px;
}

.scanner-device-copy span {
  color: #738078;
  font-size: 12px;
}

.scanner-device-status {
  color: #4e6057;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  display: flex;
}

.status-dot {
  background: #24a266;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 3px #e1f6ea;
}

.status-dot.muted {
  box-shadow: none;
  background: #a6afa9;
}

.scanner-groups {
  margin-top: 24px;
}

.scanner-section-heading, .scanner-panel-heading {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.scanner-section-heading > div:first-child {
  align-items: baseline;
  gap: 9px;
  display: flex;
}

.scanner-section-heading h2 {
  font-size: 18px;
}

.scanner-section-heading span {
  color: #87918c;
  font-size: 13px;
}

.scanner-filter-tabs button {
  color: #64736b;
  background: none;
  border: 0;
  border-radius: 6px;
  height: 30px;
  padding: 0 13px;
}

.scanner-filter-tabs button.active {
  color: #267956;
  background: #fff;
  box-shadow: 0 1px 4px #b8c9bf66;
}

.scanner-group-list {
  background: #fff;
  border: 1px solid #dfe8e3;
  border-radius: 12px;
  margin-top: 12px;
  overflow: hidden;
}

.scanner-group-row {
  border-bottom: 1px solid #edf1ef;
  align-items: center;
  display: flex;
}

.scanner-group-row > a {
  min-height: 76px;
  color: inherit;
  flex: 1;
  grid-template-columns: 36px minmax(260px, 1fr) 100px 120px 75px;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  display: grid;
}

.scanner-group-row > a:hover {
  background: #f8fbf9;
}

.scanner-group-row > button {
  margin-right: 14px;
}

.scanner-group-row a > div {
  gap: 5px;
  display: grid;
}

.scanner-group-row a strong {
  font-size: 14px;
}

.scanner-group-row a small {
  color: #89948e;
  font-size: 12px;
}

.scanner-group-row a > span {
  color: #758179;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  display: flex;
}

.scanner-group-row a > span.warning {
  color: #bc752d;
}

.scanner-group-row a > em {
  color: #59806c;
  font-size: 12px;
  font-style: normal;
}

.scanner-group-state {
  color: #518067;
  background: #eef5f1;
  border-radius: 9px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid !important;
}

.scanner-group-state.state-completed {
  color: #248358;
  background: #e7f7ee;
}

.scanner-empty {
  color: #849089;
  align-content: center;
  place-items: center;
  gap: 9px;
  min-height: 260px;
  display: grid;
}

.scanner-empty strong {
  color: #536159;
}

.scanner-dialog {
  z-index: 60;
  background: #fff;
  border: 1px solid #dbe6e0;
  border-radius: 14px;
  width: min(520px, 100vw - 40px);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 24px 80px #1e3c2d33;
}

.scanner-dialog > header, .scanner-page-manager > header {
  border-bottom: 1px solid #e8eeea;
  justify-content: space-between;
  align-items: flex-start;
  padding: 19px 21px;
  display: flex;
}

.scanner-dialog > header h2, .scanner-page-manager > header h2 {
  font-size: 18px;
}

.scanner-dialog > header p, .scanner-page-manager > header p {
  color: #7d8982;
  margin: 5px 0 0;
  font-size: 12px;
}

.scanner-dialog > header button, .scanner-page-manager > header button {
  background: none;
  border: 0;
}

.scanner-dialog-body {
  padding: 20px 21px;
}

.scanner-dialog-tip {
  color: #65756c;
  background: #f2f8f5;
  border-radius: 7px;
  margin: 13px 0 0;
  padding: 10px 12px;
  font-size: 12px;
}

.scanner-dialog > footer {
  border-top: 1px solid #e8eeea;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 21px;
  display: flex;
}

.scanner-workbench-title {
  align-items: center;
  gap: 11px;
  display: flex;
}

.scanner-workbench-title > div {
  gap: 2px;
  display: grid;
}

.scanner-workbench-title > div span {
  color: #849088;
  font-size: 11px;
}

.scanner-status-panel, .scanner-page-strip {
  border-right: 1px solid #dfe7e2;
  min-height: 0;
}

.scanner-status-panel {
  background: #f9fbfa;
  padding: 16px;
}

.scanner-status-panel section {
  border-bottom: 1px solid #e4ebe7;
  margin-bottom: 16px;
  padding: 2px 0 18px;
}

.scanner-panel-heading > span, .scanner-panel-heading > div > span {
  font-size: 13px;
  font-weight: 700;
}

.scanner-panel-heading > div {
  align-items: center;
  gap: 7px;
  display: flex;
}

.scanner-panel-heading small {
  color: #8b9690;
  font-size: 11px;
}

.scanner-status-panel dl {
  gap: 11px;
  margin-top: 15px;
  display: grid;
}

.scanner-status-panel dl div {
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  display: flex;
}

.scanner-status-panel dt {
  color: #89938e;
}

.scanner-status-panel dd {
  text-overflow: ellipsis;
  max-width: 120px;
  font-weight: 600;
  overflow: hidden;
}

.scanner-config-summary {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  display: flex;
}

.scanner-config-summary span {
  color: #607069;
  background: #fff;
  border: 1px solid #dfe9e3;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 11px;
}

.scanner-job-progress strong {
  font-size: 12px;
}

.scanner-job-progress > div {
  background: #dfeae4;
  border-radius: 5px;
  height: 5px;
  margin: 10px 0;
  overflow: hidden;
}

.scanner-job-progress i {
  background: #32a66c;
  height: 100%;
  transition: width .3s;
  display: block;
}

.scanner-job-progress small {
  color: #7d8982;
  font-size: 11px;
}

.scanner-page-strip {
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.scanner-page-strip > .scanner-panel-heading {
  border-bottom: 1px solid #e4ebe7;
  height: 54px;
  padding: 0 12px;
}

.scanner-page-list {
  gap: 8px;
  padding: 10px;
  display: grid;
  overflow-y: auto;
}

.scanner-page-item {
  cursor: grab;
  background: #fff;
  border: 1px solid #dfe7e2;
  border-radius: 7px;
  grid-template-columns: 14px 1fr 22px;
  align-items: center;
  gap: 5px;
  padding: 6px;
  display: grid;
  position: relative;
}

.scanner-page-item.selected {
  border-color: #3a9a6c;
  box-shadow: 0 0 0 2px #dff1e7;
}

.scanner-page-item.removed {
  opacity: .42;
}

.scanner-page-thumb {
  background: #edf1ef;
  place-items: center;
  height: 130px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.scanner-page-thumb img {
  object-fit: contain;
  background: #f4f4f1;
  width: 100%;
  height: 100%;
}

.scanner-page-thumb i {
  background: #ee8e3b;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 5px;
  right: 5px;
}

.scanner-page-item > span {
  text-align: center;
  font-size: 11px;
}

.scanner-preview-panel {
  background: #eef2ef;
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.scanner-preview-panel > .scanner-panel-heading {
  background: #fff;
  border-bottom: 1px solid #dfe7e2;
  height: 54px;
  padding: 0 16px;
}

.scanner-zoom-control {
  background: #f1f5f2;
  border-radius: 7px;
  align-items: center;
  padding: 2px;
  gap: 2px !important;
  display: flex !important;
}

.scanner-zoom-control button {
  background: none;
  border: 0;
  place-items: center;
  width: 28px;
  height: 27px;
  display: grid;
}

.scanner-zoom-control span {
  text-align: center;
  min-width: 45px;
  font-size: 11px;
}

.scanner-preview-canvas {
  text-align: center;
  flex: 1;
  padding: 26px;
  overflow: auto;
}

.scanner-preview-canvas img {
  background: #fff;
  max-width: none;
  margin: 0 auto;
  display: block;
  box-shadow: 0 6px 25px #263d3130;
}

.scanner-preview-empty {
  color: #85918b;
  flex: 1;
  align-content: center;
  place-items: center;
  gap: 8px;
  display: grid;
}

.scanner-page-toolbar {
  background: #fff;
  border: 1px solid #dce5e0;
  border-radius: 8px;
  gap: 3px;
  padding: 5px;
  display: flex;
  position: absolute;
  bottom: 34px;
  right: 44px;
  box-shadow: 0 8px 24px #263d3129;
}

.scanner-page-toolbar button {
  background: none;
  border: 0;
  border-radius: 5px;
  place-items: center;
  min-width: 30px;
  height: 30px;
  display: grid;
}

.scanner-page-toolbar button:hover {
  color: #247951;
  background: #edf7f1;
}

.scanner-page-toolbar button.danger {
  color: #bd4e4e;
}

.scanner-config-dialog {
  width: 610px;
}

.scanner-config-grid {
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  display: grid;
}

.scanner-check {
  align-items: center;
  gap: 8px;
  font-size: 13px;
  display: flex;
}

.scanner-advanced-toggle {
  color: #587064;
  background: #f2f7f4;
  border: 0;
  border-radius: 7px;
  grid-column: 1 / -1;
  justify-content: center;
  align-items: center;
  gap: 5px;
  height: 36px;
  display: flex;
}

.scanner-page-manager {
  z-index: 60;
  background: #f0f3f1;
  border-radius: 14px;
  flex-direction: column;
  width: min(1120px, 100vw - 44px);
  height: calc(100vh - 48px);
  display: flex;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  box-shadow: 0 24px 90px #14271e55;
}

.scanner-manager-actions > span {
  color: #607168;
  text-align: center;
  min-width: 40px;
  font-size: 12px;
}

.scanner-manager-list {
  flex: 1;
  gap: 18px;
  padding: 20px 42px;
  display: grid;
  overflow-y: auto;
}

.scanner-manager-page {
  background: #fff;
  border: 1px solid #dce5e0;
  border-radius: 10px;
  place-items: center;
  padding: 16px 18px 10px;
  display: grid;
}

.scanner-manager-page.selected {
  border-color: #4a9e74;
}

.scanner-manager-paper {
  background: #f5f5f2;
  place-items: center;
  min-height: 540px;
  display: grid;
  overflow: hidden;
}

.scanner-manager-paper img {
  object-fit: contain;
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
}

.scanner-manager-page footer {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding-top: 10px;
  display: flex;
}

.scanner-manager-page footer > div {
  gap: 5px;
  display: flex;
}

.scanner-manager-page footer button {
  background: #fff;
  border: 1px solid #dce5e0;
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 9px;
  font-size: 12px;
  display: flex;
}

.scanner-manager-page footer button.active {
  color: #237951;
  background: #eaf7f0;
  border-color: #3d9d6d;
}

.scanner-manager-page footer button.danger {
  color: #bb5050;
}

.scanner-inline-error {
  color: #a9433e;
  background: #fff0ee;
  border: 1px solid #f2ccc7;
  border-radius: 8px;
  margin: -8px 0 14px;
  padding: 10px 13px;
  font-size: 13px;
}

.spin {
  animation: 1s linear infinite scanner-spin;
}

@keyframes scanner-spin {
  to {
    transform: rotate(360deg);
  }
}

.paper-source-options {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: min(820px, 100%);
  display: grid;
}

.scan-group-picker {
  background: #f8fcf9;
  border: 1px solid #dce8e1;
  border-radius: 9px;
  gap: 12px;
  padding: 14px;
  display: grid;
}

.scan-group-picker-title {
  color: #2c7957;
  align-items: center;
  gap: 9px;
  display: flex;
}

.scan-group-picker-title > div {
  display: grid;
}

.scan-group-picker-title strong {
  font-size: 13px;
}

.scan-group-picker-title span {
  color: #7e8b84;
  font-size: 11px;
}

.scan-group-options {
  gap: 6px;
  max-height: 180px;
  display: grid;
  overflow-y: auto;
}

.scan-group-options button {
  text-align: left;
  background: #fff;
  border: 1px solid #dfe8e3;
  border-radius: 7px;
  grid-template-columns: 42px 1fr 20px;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px;
  display: grid;
}

.scan-group-options button.selected {
  border-color: #4a9d73;
  box-shadow: 0 0 0 2px #e2f2e9;
}

.scan-group-options img {
  object-fit: contain;
  background: #f0f1ee;
  width: 42px;
  height: 48px;
}

.scan-group-options span {
  gap: 3px;
  display: grid;
}

.scan-group-options strong {
  font-size: 12px;
}

.scan-group-options small {
  color: #7f8a84;
  font-size: 10px;
}

.scan-group-picker > .button {
  justify-content: center;
  width: 100%;
}

.scan-group-picker-empty {
  color: #7c8982;
  align-content: center;
  place-items: center;
  gap: 7px;
  min-height: 95px;
  font-size: 12px;
  display: grid;
}

.scan-group-picker-empty a {
  color: #27805a;
}

.grading-scan-picker {
  background: #f6faf7;
}

.upload-drawer .scan-group-picker {
  margin-top: 4px;
}

.scan-group-picker-create-link {
  color: #27805a;
  text-underline-offset: 3px;
  justify-self: center;
  font-size: 12px;
  font-weight: 650;
  text-decoration: underline;
}

.scan-group-picker > .scan-group-picker-submit {
  color: #fff;
  background: #07c160;
  border-color: #07c160;
}

.scan-group-picker > .scan-group-picker-submit:hover:not(:disabled) {
  background: #05904a;
  border-color: #05904a;
}

.scanner-dialog, .scanner-page-manager {
  z-index: 81;
}

.scanner-device-statuses {
  gap: 7px;
  min-width: 150px;
  display: grid;
}

.scanner-device-status, .scanner-device-usage {
  color: #4e6057;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  display: flex;
}

.scanner-device-usage.busy {
  color: #a96523;
}

.scanner-device-usage.unknown {
  color: #8a6662;
}

.status-dot.disconnected, .scanner-device-usage.unknown .status-dot {
  background: #c65a52;
  box-shadow: 0 0 0 3px #fae9e7;
}

.scanner-device-usage.busy .status-dot {
  background: #df8a32;
  box-shadow: 0 0 0 3px #fff0de;
}

.scanner-device-actions {
  align-items: center;
  gap: 7px;
  margin-left: 4px;
  display: flex;
}

.scanner-device-actions .scanner-usage-start {
  color: #237752;
  background: #f2faf6;
  border-color: #b9d9c8;
}

.scanner-device-actions .scanner-usage-start:hover:not(:disabled) {
  color: #17643f;
  background: #e7f6ee;
  border-color: #73ad8e;
}

.scanner-device-actions .scanner-usage-stop {
  color: #a96523;
  background: #fff9f1;
  border-color: #ead0b5;
}

.scanner-device-actions .scanner-usage-stop:hover:not(:disabled) {
  color: #8b4d17;
  background: #fff1df;
  border-color: #d9aa79;
}

.scanner-recovery-panel {
  color: #69491f;
  background: #fff9ed;
  border: 1px solid #edcf9f;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: -8px 0 14px;
  padding: 12px 14px;
  display: flex;
}

.scanner-recovery-artwork {
  object-fit: cover;
  border-radius: 9px;
  flex: none;
  width: 112px;
  height: 84px;
}

.scanner-recovery-copy {
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: grid;
}

.scanner-recovery-panel strong {
  font-size: 13px;
}

.scanner-recovery-panel span {
  color: #86663a;
  font-size: 12px;
}

.scanner-recovery-actions {
  flex: none;
  align-items: center;
  gap: 7px;
  display: flex;
}

.scanner-recovery-panel .button {
  height: 34px;
  padding-inline: 11px;
}

.scanner-recovery-panel .button.danger {
  color: #a64742;
  background: #fff8f7;
  border-color: #e4bbb7;
}

.scanner-recovery-panel.completed-round {
  color: #21643d;
  background: #f1faf4;
  border-color: #a9d8bc;
}

.scanner-recovery-panel.completed-round span {
  color: #4f765e;
}

.scanner-inline-error {
  align-items: center;
  gap: 12px;
  min-height: 62px;
  display: flex;
}

.scanner-inline-error-artwork {
  object-fit: cover;
  border-radius: 7px;
  flex: none;
  width: 72px;
  height: 54px;
}

.brand-empty-artwork {
  object-fit: contain;
  border-radius: 12px;
  width: min(280px, 100%);
  height: auto;
  display: block;
}

.brand-empty-artwork.compact {
  width: min(190px, 100%);
}

.brand-empty-artwork.miniature {
  border-radius: 8px;
  width: min(118px, 100%);
}

.upload-panel-artwork {
  object-fit: cover;
  border-radius: 8px;
  width: 84px;
  height: 63px;
}

.teacher-dashboard-header > div {
  z-index: 1;
  position: relative;
}

.teacher-dashboard-emblem {
  z-index: 0;
  opacity: .09;
  pointer-events: none;
  width: 180px;
  bottom: -54px;
  right: 24px;
}

.class-creation-artwork {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border: 1px solid #dce8e1;
  border-radius: 11px;
  justify-self: start;
  width: min(300px, 100%);
  display: block;
}

.class-roster-name-content {
  align-items: center;
  gap: 9px;
  display: flex;
}

.class-roster-name-content .preset-avatar-trigger {
  flex: none;
}

.class-roster-avatar {
  object-fit: cover;
  border: 1px solid #dce9e2;
  border-radius: 50%;
  flex: none;
  width: 32px;
  height: 32px;
}

.review-student-avatar img, .submission-student-avatar {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.submission-student-avatar {
  border: 1px solid #d6e7dc;
  flex: none;
  width: 22px;
  height: 22px;
}

.submission-student-option-avatar {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.class-roster-empty {
  text-align: center;
  align-content: center;
  gap: 7px;
  padding: 24px;
}

.class-roster-empty strong {
  color: #536159;
  font-size: 13px;
}

.class-roster-empty span {
  color: #929b96;
  font-size: 12px;
}

.new-exam-steps {
  max-width: 1100px;
}

.new-exam-layout {
  grid-template-columns: minmax(560px, 760px) minmax(260px, 320px);
  align-items: stretch;
  gap: 18px;
  max-width: 1100px;
  margin: 18px auto 0;
  display: grid;
}

.new-exam-layout .new-exam-form {
  max-width: none;
  margin: 0;
}

.new-exam-artwork-card {
  background: #fff;
  border: 1px solid #dfe7e2;
  border-radius: 13px;
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-self: start;
  gap: 8px;
  height: calc(100% - 58px);
  padding: 13px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 8px 28px #2e4c3b0b;
}

.new-exam-artwork-card img {
  object-fit: cover;
  border-radius: 9px;
  justify-self: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
}

.new-exam-artwork-card strong {
  color: #35433b;
  font-size: 13px;
}

.new-exam-artwork-card span {
  color: #7c8881;
  font-size: 12px;
  line-height: 1.65;
}

.paper-empty-artwork {
  border-radius: 10px;
  width: min(190px, 100%);
  height: auto;
  margin: 0 0 14px;
  display: block;
}

.account-profile-identity > span {
  background: #edf7f1;
  position: relative;
  overflow: visible;
}

.account-profile-identity > span img {
  border-radius: inherit;
  object-fit: cover;
  border: 1px solid #cfe5d8;
  width: 100%;
  height: 100%;
}

.account-profile-identity > span b {
  color: #fff;
  background: #07a853;
  border: 2px solid #fff;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-family: Songti SC, STSong, serif;
  font-size: 12px;
  display: grid;
  position: absolute;
  bottom: -2px;
  right: -2px;
}

.account-ledger-empty .brand-empty-artwork {
  width: min(250px, 100%);
}

.message-center-list-empty, .message-center-detail-empty {
  text-align: center;
}

.message-center-list-empty .brand-empty-artwork, .message-center-detail-empty .brand-empty-artwork {
  margin-inline: auto;
}

.scanner-empty .brand-empty-artwork {
  width: min(240px, 100%);
}

.scanner-preview-empty .brand-empty-artwork {
  width: min(220px, 100%);
}

.teacher-onboarding-page {
  background: linear-gradient(#f1f4efb8, #f1f4efdb), url("/brand-system/18-background-paper.webp") center / cover fixed;
  place-items: center;
  min-height: 100svh;
  padding: 28px;
  display: grid;
}

.teacher-onboarding-card {
  background: #fff;
  border: 1px solid #3559462e;
  border-radius: 18px;
  grid-template-columns: 320px minmax(420px, 500px);
  width: min(820px, 100%);
  display: grid;
  overflow: hidden;
  box-shadow: 0 28px 80px #233e3029;
}

.teacher-onboarding-brand {
  color: #ffffffd6;
  text-align: center;
  background: linear-gradient(150deg, #0a4c31eb, #156943c7), url("/brand-system/19-background-green-pattern.webp") center / cover;
  align-content: center;
  place-items: center;
  gap: 18px;
  min-height: 480px;
  padding: 36px;
  display: grid;
  position: relative;
}

.teacher-onboarding-brand img:first-child {
  object-fit: contain;
  width: 156px;
  height: 156px;
}

.teacher-onboarding-brand img:nth-child(2) {
  background: #ffffffeb;
  border-radius: 9px;
  width: 160px;
  height: auto;
  padding: 5px 11px;
}

.teacher-onboarding-brand span {
  max-width: 230px;
  font-size: 13px;
  line-height: 1.7;
}

.teacher-onboarding-form {
  background: #fffffffa;
  align-content: center;
  gap: 28px;
  padding: 48px;
  display: grid;
}

.teacher-onboarding-form > header {
  gap: 8px;
  display: grid;
}

.teacher-onboarding-form > header strong {
  color: #25332b;
  font-size: 23px;
}

.teacher-onboarding-form > header span {
  color: #849089;
  font-size: 12px;
}

.teacher-onboarding-fields {
  gap: 18px;
  display: grid;
}

.teacher-onboarding-fields .field {
  gap: 7px;
  display: grid;
}

.teacher-onboarding-fields label {
  color: #536159;
  font-size: 12px;
  font-weight: 700;
}

.teacher-onboarding-fields .button {
  width: 100%;
  height: 42px;
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .new-exam-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
  }

  .new-exam-artwork-card {
    display: none;
  }
}

@media (max-width: 760px) {
  .teacher-onboarding-page {
    padding: 16px;
  }

  .teacher-onboarding-card {
    grid-template-columns: 1fr;
  }

  .teacher-onboarding-brand {
    min-height: 190px;
    padding: 24px;
  }

  .teacher-onboarding-brand img:first-child {
    width: 90px;
    height: 90px;
  }

  .teacher-onboarding-brand img:nth-child(2) {
    display: none;
  }

  .teacher-onboarding-brand span {
    font-size: 12px;
  }

  .teacher-onboarding-form {
    padding: 30px 24px;
  }
}

.report-access-page, .report-portal-page, .report-detail-page, .report-status-page {
  --report-green: #07c160;
  --report-deep-green: #075e45;
  --report-paper: #f7f8f5;
  --report-ink: #1f2a26;
  --report-muted: #738078;
  --report-line: #e4eae5;
  --report-soft: #eaf8ef;
  min-height: 100svh;
  color: var(--report-ink);
  background: var(--report-paper);
  font-family: PingFang SC, Microsoft YaHei, sans-serif;
}

.report-access-page {
  background: #fff;
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: 48px;
}

.report-access-hero {
  background: var(--report-deep-green);
  color: #fff;
  min-height: 390px;
  padding: 48px 28px 56px;
  position: relative;
  overflow: hidden;
}

.report-access-hero:after {
  content: "";
  border: 1px solid #ffffff25;
  border-radius: 50%;
  width: 310px;
  height: 310px;
  position: absolute;
  bottom: -130px;
  right: -125px;
  box-shadow: 0 0 0 46px #ffffff0a, 0 0 0 92px #ffffff08;
}

.report-access-hero img {
  object-fit: contain;
  object-position: left center;
  width: 164px;
  height: 62px;
}

.report-access-hero p {
  color: #a9dfbf;
  letter-spacing: .12em;
  margin: 42px 0 12px;
  font-size: 14px;
}

.report-access-hero h1 {
  letter-spacing: -.04em;
  margin: 0;
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1.24;
}

.report-access-hero span {
  color: #d4eadc;
  margin-top: 18px;
  font-size: 15px;
  display: block;
}

.report-access-card {
  z-index: 2;
  border: 1px solid var(--report-line);
  background: #fff;
  border-radius: 22px;
  gap: 18px;
  margin: -34px 20px 0;
  padding: 26px 22px 22px;
  display: grid;
  position: relative;
  box-shadow: 0 14px 34px #0b3a2420;
}

.report-access-card label {
  color: var(--report-ink);
  gap: 9px;
  font-size: 14px;
  font-weight: 650;
  display: grid;
}

.report-access-card input {
  width: 100%;
  height: 54px;
  color: var(--report-ink);
  letter-spacing: .2em;
  text-transform: uppercase;
  background: #fbfcfa;
  border: 1px solid #ced8d1;
  border-radius: 13px;
  outline: none;
  padding: 0 16px;
  font-size: 20px;
  font-weight: 700;
}

.report-access-card input:focus {
  border-color: var(--report-green);
  box-shadow: 0 0 0 3px #07c1601f;
}

.report-access-card button {
  background: var(--report-green);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 13px;
  height: 52px;
  font-size: 16px;
  font-weight: 700;
}

.report-access-card button:disabled {
  opacity: .45;
  cursor: default;
}

.report-access-card small {
  color: var(--report-muted);
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}

.report-form-error {
  color: #d94b3d;
  margin: -5px 0 0;
  font-size: 13px;
}

.report-portal-page, .report-detail-page {
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 56px;
}

.report-mobile-header {
  z-index: 4;
  border-bottom: 1px solid var(--report-line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #f7f8f5ee;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  display: flex;
  position: sticky;
  top: 0;
}

.report-mobile-header > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.report-mobile-header > div > div {
  gap: 1px;
  display: grid;
}

.report-mobile-header small {
  color: #657169;
  font-size: 11px;
}

.report-mobile-header strong {
  font-size: 15px;
}

.report-student-avatar {
  background: var(--report-soft);
  width: 38px;
  height: 38px;
  color: var(--report-deep-green);
  border: 1px solid #cfe4d6;
  border-radius: 12px;
  place-items: center;
  display: grid;
  overflow: hidden;
}

.report-student-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.report-mobile-header button, .report-detail-toolbar a, .report-detail-toolbar .report-download-button {
  border: 1px solid var(--report-line);
  width: 38px;
  height: 38px;
  color: var(--report-deep-green);
  cursor: pointer;
  background: #fff;
  border-radius: 12px;
  place-items: center;
  display: grid;
}

.report-list-heading {
  padding: 34px 20px 20px;
}

.report-list-heading p {
  color: #087b46;
  letter-spacing: .1em;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
}

.report-list-heading h1 {
  letter-spacing: -.04em;
  margin: 0;
  font-size: 30px;
}

.report-list-heading span {
  color: #657169;
  margin-top: 8px;
  font-size: 13px;
  display: block;
}

.report-filter-panel {
  gap: 10px;
  padding: 0 20px 18px;
  display: grid;
}

.report-name-search {
  border: 1px solid var(--report-line);
  height: 46px;
  color: var(--report-muted);
  background: #fff;
  border-radius: 13px;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  display: flex;
}

.report-name-search input {
  min-width: 0;
  color: var(--report-ink);
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  font-size: 14px;
}

.report-filter-panel details {
  border: 1px solid var(--report-line);
  background: #fff;
  border-radius: 13px;
}

.report-filter-panel summary {
  color: #657169;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 13px;
  list-style: none;
  display: flex;
}

.report-filter-panel details > div {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 14px 14px;
  display: grid;
}

.report-filter-panel details label {
  color: var(--report-muted);
  gap: 5px;
  font-size: 11px;
  display: grid;
}

.report-filter-panel details input {
  border: 1px solid var(--report-line);
  min-width: 0;
  height: 38px;
  color: var(--report-ink);
  background: #fbfcfa;
  border-radius: 9px;
  padding: 0 8px;
}

.report-filter-panel details button {
  color: var(--report-deep-green);
  cursor: pointer;
  background: none;
  border: 0;
  grid-column: 1 / -1;
  font-size: 12px;
}

.report-list {
  gap: 11px;
  padding: 0 20px;
  display: grid;
}

.report-list-card {
  border: 1px solid var(--report-line);
  min-height: 104px;
  color: inherit;
  background: #fff;
  border-radius: 17px;
  grid-template-columns: 52px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  padding: 15px;
  text-decoration: none;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  display: grid;
}

.report-list-card:active {
  transform: scale(.985);
}

.report-list-card:hover {
  border-color: #bcdcc7;
  box-shadow: 0 7px 22px #194c3120;
}

.report-card-date {
  background: var(--report-soft);
  height: 60px;
  color: var(--report-deep-green);
  border-radius: 13px;
  align-content: center;
  place-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.report-card-main {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.report-card-main small, .report-card-main span {
  color: #657169;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.report-card-main strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  overflow: hidden;
}

.report-card-score {
  color: var(--report-deep-green);
  align-items: baseline;
  display: flex;
}

.report-card-score strong {
  font-size: 25px;
}

.report-card-score span {
  color: #657169;
  font-size: 11px;
}

.report-empty-state {
  min-height: 310px;
  color: var(--report-muted);
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 10px;
  padding: 30px;
  display: grid;
}

.report-empty-state svg {
  color: #90b79e;
}

.report-empty-state strong {
  color: var(--report-ink);
  font-size: 18px;
}

.report-empty-state span {
  font-size: 13px;
  line-height: 1.6;
}

.report-detail-toolbar {
  z-index: 5;
  border-bottom: 1px solid var(--report-line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #f7f8f5ee;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  padding: 12px 16px;
  display: grid;
  position: sticky;
  top: 0;
}

.report-detail-toolbar strong {
  text-align: center;
}

.report-detail-summary {
  background: var(--report-deep-green);
  color: #fff;
  padding: 30px 20px 26px;
}

.report-detail-summary > p, .report-detail-summary > span {
  color: #b8dbc6;
  margin: 0;
  font-size: 12px;
}

.report-detail-summary h1 {
  margin: 12px 0 5px;
  font-size: 28px;
  line-height: 1.3;
}

.report-detail-summary > div {
  border-top: 1px solid #ffffff25;
  justify-content: space-between;
  align-items: end;
  margin-top: 28px;
  padding-top: 20px;
  display: flex;
}

.report-detail-summary > div small {
  font-size: 15px;
  font-weight: 650;
}

.report-detail-summary > div p {
  align-items: baseline;
  margin: 0;
  display: flex;
}

.report-detail-summary > div strong {
  font-size: 42px;
  line-height: 1;
}

.report-detail-summary > div span {
  color: #cfe9d9;
  font-size: 13px;
}

.report-wrong-list {
  gap: 13px;
  padding: 22px 16px;
  display: grid;
}

.report-wrong-list > header {
  gap: 5px;
  padding: 0 4px 3px;
  display: grid;
}

.report-wrong-list > header > div {
  color: var(--report-deep-green);
  align-items: center;
  gap: 8px;
  display: flex;
}

.report-wrong-list > header > span {
  color: #657169;
  font-size: 11px;
}

.report-wrong-card {
  border: 1px solid var(--report-line);
  background: #fff;
  border-radius: 17px;
  padding: 17px;
}

.report-question-heading {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.report-question-heading strong {
  color: var(--report-deep-green);
  font-size: 17px;
}

.report-question-heading span {
  color: #b9382e;
  background: #fff1ef;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
}

.report-question-text {
  margin: 14px 0 16px;
  font-size: 14px;
  line-height: 1.65;
}

.report-wrong-card dl {
  border-top: 1px solid var(--report-line);
  gap: 0;
  margin: 0;
  display: grid;
}

.report-wrong-card dl > div {
  border-bottom: 1px solid var(--report-line);
  grid-template-columns: 76px 1fr;
  gap: 10px;
  padding: 12px 0;
  display: grid;
}

.report-wrong-card dt {
  color: #657169;
  font-size: 12px;
}

.report-wrong-card dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.report-wrong-card .report-comment {
  background: var(--report-soft);
  border: 0;
  border-radius: 10px;
  margin: 10px -4px -4px;
  padding: 13px 10px;
}

.report-comment dt {
  color: var(--report-deep-green);
  font-weight: 700;
}

.report-perfect-state {
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 10px;
  min-height: 330px;
  display: grid;
}

.report-perfect-state > span {
  background: var(--report-soft);
  width: 74px;
  height: 74px;
  color: var(--report-green);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.report-perfect-state strong {
  font-size: 21px;
}

.report-perfect-state p {
  color: var(--report-muted);
  margin: 0;
  font-size: 13px;
}

.report-original-pages {
  padding: 0 16px 30px;
}

.report-original-pages details {
  border: 1px solid var(--report-line);
  background: #fff;
  border-radius: 17px;
  overflow: hidden;
}

.report-original-pages summary {
  min-height: 58px;
  color: var(--report-deep-green);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 0 17px;
  list-style: none;
  display: flex;
}

.report-original-pages summary::-webkit-details-marker {
  display: none;
}

.report-original-pages summary > span {
  align-items: center;
  gap: 8px;
  display: flex;
}

.report-original-pages summary small {
  color: var(--report-muted);
  font-size: 11px;
}

.report-original-pages details[open] summary {
  border-bottom: 1px solid var(--report-line);
}

.report-original-page-list {
  gap: 18px;
  padding: 17px;
  display: grid;
}

.report-original-page {
  border: 1px solid var(--report-line);
  background: var(--report-paper);
  border-radius: 13px;
  overflow: hidden;
}

.report-original-page header {
  color: #657169;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  font-size: 12px;
  display: flex;
}

.report-original-page > button {
  cursor: zoom-in;
  background: #edf1ed;
  border: 0;
  width: 100%;
  padding: 0;
  display: block;
}

.report-original-page img {
  object-fit: contain;
  background: #edf1ed;
  width: 100%;
  height: auto;
  display: block;
}

.report-original-page-missing {
  min-height: 180px;
  color: var(--report-muted);
  place-items: center;
  font-size: 13px;
  display: grid;
}

.report-page-lightbox {
  z-index: 100;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  color: #fff;
  background: #07120eef;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  display: grid;
  position: fixed;
  inset: 0;
}

.report-page-lightbox-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  display: flex;
}

.report-page-lightbox-toolbar button, .report-page-lightbox-navigation button {
  color: #fff;
  cursor: pointer;
  background: #ffffff14;
  border: 1px solid #fff3;
  border-radius: 12px;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
}

.report-page-lightbox-image {
  overscroll-behavior: contain;
  text-align: center;
  border-radius: 10px;
  align-items: center;
  display: grid;
  overflow: auto;
}

.report-page-lightbox-image img {
  object-fit: contain;
  background: #fff;
  width: auto;
  max-width: 100%;
  height: auto;
  display: inline-block;
}

.report-page-lightbox-navigation {
  justify-content: center;
  gap: 12px;
  display: flex;
}

.report-page-lightbox-navigation button:disabled {
  opacity: .3;
  cursor: default;
}

.report-status-page {
  place-items: center;
  padding: 24px;
  display: grid;
}

.report-status-page > div {
  border: 1px solid var(--report-line);
  text-align: center;
  background: #fff;
  border-radius: 20px;
  gap: 13px;
  max-width: 400px;
  padding: 30px;
  display: grid;
}

.report-status-page strong {
  font-size: 20px;
}

.report-status-page p {
  color: var(--report-muted);
  margin: 0;
  line-height: 1.6;
}

.report-status-page a {
  background: var(--report-green);
  color: #fff;
  border-radius: 12px;
  margin-top: 8px;
  padding: 13px;
  text-decoration: none;
}

.report-status-actions {
  gap: 9px;
  display: grid;
}

.report-status-actions .report-status-secondary {
  border: 1px solid var(--report-line);
  color: var(--report-text);
  background: #fff;
  margin-top: 0;
}

@media (min-width: 760px) {
  .report-portal-page, .report-detail-page {
    border: 1px solid #dbe4dd;
    border-radius: 24px;
    min-height: calc(100svh - 56px);
    margin-top: 28px;
    margin-bottom: 28px;
    overflow: hidden;
    box-shadow: 0 20px 60px #143c2620;
  }
}

.class-report-query-code {
  align-items: center;
  gap: 6px;
  display: flex;
}

.class-report-query-code > strong {
  color: #075e45;
  letter-spacing: .08em;
  min-width: 66px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
}

.class-report-query-code button {
  color: #557064;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dfe8e1;
  border-radius: 8px;
  place-items: center;
  width: 29px;
  height: 29px;
  display: grid;
}

.class-report-query-code button:hover {
  color: #075e45;
  background: #f0faf3;
  border-color: #9ed2af;
}

.class-student-code-dialog {
  width: min(560px, 100vw - 32px);
}

.student-code-dialog-content {
  justify-items: center;
  gap: 12px;
  padding: 4px 0 8px;
  display: grid;
}

.student-code-dialog-identity {
  background: #f8faf8;
  border: 1px solid #e0e8e2;
  border-radius: 12px;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  display: grid;
}

.student-code-dialog-identity > img {
  object-fit: cover;
  background: #eef6f0;
  border: 1px solid #d8e4dc;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display: block;
}

.student-code-dialog-identity > div {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.student-code-dialog-identity strong {
  color: #27312b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  overflow: hidden;
}

.student-code-dialog-identity span {
  color: #7b8880;
  font-size: 10px;
}

.student-code-dialog-identity code {
  color: #075e45;
  letter-spacing: .1em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
  font-weight: 750;
}

.student-code-dialog-identity > .student-code-identity-actions {
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 66px;
  display: flex;
}

.student-code-icon-action {
  color: #557064;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d8e4dc;
  border-radius: 8px;
  place-items: center;
  width: 30px;
  height: 30px;
  transition: border-color .16s, background-color .16s, color .16s;
  display: grid;
}

.student-code-icon-action:hover {
  color: #075e45;
  background: #eef9f2;
  border-color: #9ed2af;
}

.student-code-icon-action.danger {
  color: #a96359;
  border-color: #eadbd8;
}

.student-code-icon-action.danger:hover {
  color: #bd4e43;
  background: #fff3f1;
  border-color: #e6bcb6;
}

.student-code-icon-action:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #07c160;
}

.student-code-dialog-qr {
  aspect-ratio: 720 / 920;
  object-fit: contain;
  background: #f7f8f5;
  border: 1px solid #e0e7e2;
  border-radius: 13px;
  width: 320px;
  max-width: 100%;
  display: block;
}

.student-code-dialog-content > small {
  color: #7b8880;
  text-align: center;
  max-width: 330px;
  font-size: 10px;
  line-height: 1.6;
}

.student-code-dialog-content.common .student-code-dialog-qr {
  width: 332px;
}

.student-code-dialog-actions {
  margin-top: 12px;
}

.student-code-dialog-actions .class-secondary-button, .student-code-dialog-actions .class-primary-button {
  cursor: pointer;
  text-decoration: none;
}

.student-code-dialog-actions .class-secondary-button.danger {
  color: #b84a3d;
  border-color: #efd4cf;
}

.student-code-dialog-actions .class-secondary-button.danger:hover {
  background: #fff5f3;
}

.student-code-regeneration-dialog {
  z-index: 113;
  background: #fff;
  border: 1px solid #dce5df;
  border-radius: 15px;
  padding: 24px;
  box-shadow: 0 30px 90px #18302247;
}

body:has(.student-code-regeneration-dialog) .paper-workbench-dialog-overlay {
  z-index: 112;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  background: #181e2294;
}

.student-code-regeneration-dialog .paper-workbench-dialog-icon {
  color: #c94d44;
  background: #fff0ee;
}

.student-code-regeneration-dialog h2 {
  color: #27312b;
  margin: 0;
  font-family: Songti SC, STSong, serif;
  font-size: 20px;
}

.student-code-regeneration-dialog .paper-workbench-dialog-copy p {
  color: #758078;
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.7;
}

.student-code-regeneration-dialog .paper-workbench-dialog-close {
  color: #839088;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  top: 15px;
  right: 15px;
}

.student-code-regeneration-dialog .paper-workbench-dialog-close:hover {
  background: #f2f6f3;
}

.student-code-regeneration-dialog .paper-workbench-dialog-actions button {
  cursor: pointer;
  border-radius: 9px;
  min-width: 86px;
  height: 38px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
}

.student-code-regeneration-dialog .paper-workbench-dialog-secondary {
  color: #657169;
  background: #fff;
  border: 1px solid #dce4df;
}

.student-code-regeneration-dialog .paper-workbench-dialog-primary.danger {
  color: #fff;
  background: #cf554b;
  border: 1px solid #cf554b;
}

@media (max-height: 780px) {
  .class-student-code-dialog {
    max-height: calc(100vh - 28px);
    overflow: auto;
  }

  .student-code-dialog-qr {
    width: 270px;
  }

  .student-code-dialog-content.common .student-code-dialog-qr {
    width: 282px;
  }
}

.submission-report-statuses {
  align-items: center;
  gap: 5px;
  display: flex;
}

.report-publication-dialog textarea {
  resize: vertical;
  color: #27312b;
  min-height: 94px;
  font: inherit;
  border: 1px solid #dfe7e1;
  border-radius: 10px;
  padding: 10px 12px;
}

.report-publication-dialog {
  width: min(94vw, 560px);
}

.report-publication-dialog.is-preview {
  flex-direction: column;
  width: min(94vw, 1040px);
  height: min(88vh, 820px);
  max-height: min(88vh, 820px);
  display: flex;
}

.report-publication-dialog > .dialog-close {
  background: #fbfdfc;
  border-color: #dfe6e1;
  border-radius: 8px;
  position: absolute;
  top: 16px;
  right: 16px;
}

.report-publication-dialog > .dialog-close:hover {
  color: #075e45;
  background: #f0faf3;
  border-color: #9ed2af;
}

.report-publication-dialog.is-preview > h2, .report-publication-dialog.is-preview > p, .report-publication-dialog.is-preview > .report-publication-settings, .report-publication-dialog.is-preview > .inline-error, .report-publication-dialog.is-preview > .grading-mode-actions {
  flex: none;
}

.report-publication-dialog.is-preview > .grading-mode-actions {
  margin-top: 12px;
}

.report-publication-settings {
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
  display: grid;
}

.report-publication-settings .class-form-field {
  gap: 6px;
  margin: 0;
}

.report-publication-settings .class-form-field > span {
  color: #5e6b63;
  font-size: 11px;
  font-weight: 700;
}

.report-publication-settings .class-form-field input {
  background: #fbfdfc;
  border-color: #dce5df;
  border-radius: 9px;
  height: 44px;
}

.report-publication-settings .class-form-field input:focus {
  background: #fff;
  border-color: #70cf9c;
  outline: none;
  box-shadow: 0 0 0 3px #07c16014;
}

.report-publication-settings .grading-report-comment-option {
  align-items: center;
  min-height: 44px;
  padding: 7px 11px;
}

.report-publication-settings .grading-report-comment-option input {
  margin-top: 0;
}

.report-publication-settings .grading-report-comment-option strong {
  font-size: 12px;
}

.report-publication-settings .grading-report-comment-option small {
  white-space: nowrap;
  font-size: 10px;
}

.report-publication-settings .grading-report-skip-note {
  grid-column: 1 / -1;
  margin: 0;
}

.report-preview-layout {
  background: #f6f8f6;
  border: 1px solid #dfe8e1;
  border-radius: 14px;
  flex: auto;
  min-height: 0;
  max-height: min(64vh, 620px);
  display: grid;
  overflow: hidden;
}

.report-preview-layout.batch {
  grid-template-columns: 230px minmax(0, 1fr);
}

.report-preview-loading {
  color: #07a652;
  text-align: center;
  grid-column: 1 / -1;
  align-content: center;
  place-items: center;
  gap: 8px;
  min-height: 0;
  display: grid;
}

.report-preview-loading strong {
  color: #27312b;
  font-size: 14px;
}

.report-preview-loading span {
  color: #748078;
  font-size: 11px;
}

.report-preview-student-list {
  background: #fbfcfb;
  border-right: 1px solid #dfe8e1;
  overflow-y: auto;
}

.report-preview-student-list header {
  z-index: 1;
  background: #fbfcfb;
  border-bottom: 1px solid #e4eae5;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 13px;
  display: flex;
  position: sticky;
  top: 0;
}

.report-preview-student-list header strong {
  color: #27312b;
  font-size: 13px;
}

.report-preview-student-list header span {
  color: #6f7d74;
  font-size: 11px;
}

.report-preview-student-list > button {
  color: #334139;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid #edf1ee;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  padding: 9px 12px;
  display: flex;
}

.report-preview-student-list > button:hover:not(:disabled), .report-preview-student-list > button.active {
  background: #edf8f0;
}

.report-preview-student-list > button.active {
  box-shadow: inset 3px 0 #07c160;
}

.report-preview-student-list > button:disabled {
  cursor: default;
  opacity: .68;
}

.report-preview-student-list > button > span {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.report-preview-student-list > button strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.report-preview-student-list > button small {
  color: #879189;
  font-size: 10px;
}

.report-preview-student-list em {
  color: #657169;
  text-align: center;
  background: #eef1ef;
  border-radius: 999px;
  max-width: 94px;
  padding: 3px 7px;
  font-size: 10px;
  font-style: normal;
  line-height: 1.25;
}

.report-preview-student-list em.ready {
  color: #087c43;
  background: #e7f7ed;
}

.report-preview-paper {
  background: #fff;
  padding: 22px 24px 30px;
  overflow-y: auto;
}

.report-preview-paper > header {
  border-bottom: 1px solid #e5eae6;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 17px;
  display: flex;
}

.report-preview-paper > header small {
  color: #728077;
  font-size: 11px;
}

.report-preview-paper > header h3 {
  color: #1f2c25;
  margin: 5px 0 4px;
  font-size: 20px;
  line-height: 1.3;
}

.report-preview-paper > header p {
  color: #657169;
  margin: 0;
  font-size: 12px;
}

.report-preview-score {
  color: #075e45;
  flex: none;
  align-items: baseline;
  gap: 4px;
  display: flex;
}

.report-preview-score strong {
  font-size: 30px;
  line-height: 1;
}

.report-preview-score span {
  color: #6f7d74;
  font-size: 12px;
}

.report-preview-section-heading {
  justify-content: space-between;
  align-items: center;
  padding: 18px 0 10px;
  display: flex;
}

.report-preview-section-heading strong {
  color: #27312b;
  font-size: 14px;
}

.report-preview-section-heading span {
  color: #77837b;
  font-size: 11px;
}

.report-preview-wrong-list {
  gap: 10px;
  display: grid;
}

.report-preview-wrong-list article {
  background: #fff;
  border: 1px solid #e2e8e3;
  border-radius: 11px;
  padding: 13px 14px;
}

.report-preview-question-heading {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.report-preview-question-heading strong {
  color: #25342b;
  font-size: 13px;
}

.report-preview-question-heading span {
  color: #b43f34;
  background: #fff0ee;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 700;
}

.report-preview-wrong-list article > p {
  color: #4c5a51;
  margin: 9px 0;
  font-size: 12px;
  line-height: 1.55;
}

.report-preview-wrong-list dl {
  border-top: 1px solid #edf1ee;
  gap: 0;
  margin: 0;
  display: grid;
}

.report-preview-wrong-list dl > div {
  border-bottom: 1px solid #edf1ee;
  grid-template-columns: 66px 1fr;
  gap: 9px;
  padding: 7px 0;
  font-size: 11px;
  line-height: 1.5;
  display: grid;
}

.report-preview-wrong-list dt {
  color: #7a857e;
}

.report-preview-wrong-list dd {
  color: #354239;
  margin: 0;
}

.report-preview-wrong-list dl > div.comment {
  background: #f0f8f2;
  border: 0;
  border-radius: 8px;
  margin: 7px -5px 0;
  padding: 8px 5px;
}

.report-preview-wrong-list .comment dt {
  color: #087c43;
  font-weight: 700;
}

.report-preview-perfect {
  color: #087c43;
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 7px;
  min-height: 260px;
  display: grid;
}

.report-preview-perfect strong {
  color: #27312b;
  font-size: 16px;
}

.report-preview-perfect span {
  color: #758178;
  font-size: 11px;
}

.report-preview-pages {
  background: #fff;
  border: 1px solid #e2e8e3;
  border-radius: 11px;
  margin-top: 14px;
  overflow: hidden;
}

.report-preview-pages summary {
  color: #334139;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
  display: flex;
}

.report-preview-pages summary::-webkit-details-marker {
  display: none;
}

.report-preview-pages summary span {
  color: #7b877f;
  font-size: 10px;
  font-weight: 400;
}

.report-preview-pages > div {
  background: #f7f9f7;
  border-top: 1px solid #e8ede9;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  padding: 12px;
  display: grid;
}

.report-preview-pages article {
  background: #fff;
  border: 1px solid #dde5df;
  border-radius: 8px;
  overflow: hidden;
}

.report-preview-pages article strong {
  color: #637067;
  padding: 6px 8px;
  font-size: 10px;
  display: block;
}

.report-preview-pages article img {
  object-fit: contain;
  background: #eef1ef;
  width: 100%;
  height: 150px;
  display: block;
}

.report-preview-pages article > span {
  color: #8a948d;
  background: #eef1ef;
  place-items: center;
  height: 150px;
  font-size: 10px;
  display: grid;
}

.scanner-page {
  padding: 28px 0 40px;
  font-size: 14px;
}

.scanner-page-header {
  margin-bottom: 18px;
}

.scanner-page-header h1 {
  margin: 0;
  font-size: 22px;
}

.scanner-device-card {
  min-height: 112px;
  box-shadow: none;
  border-color: #dfe8e3;
  border-radius: 12px;
  gap: 20px;
  padding: 18px 20px;
}

.scanner-device-info {
  flex: 1;
  align-items: center;
  gap: 14px;
  min-width: 0;
  display: flex;
}

.scanner-device-icon {
  background: none;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  display: grid;
}

.scanner-device-icon img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.scanner-device-icon.online {
  background: none;
}

.scanner-device-copy {
  flex-direction: column;
  flex: 1;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.scanner-device-name-row {
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.scanner-device-name-row strong {
  color: #20252b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
}

.scanner-device-meta {
  color: #7b8780;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  display: flex;
}

.scanner-device-meta span {
  color: inherit;
  font-size: inherit;
}

.scanner-device-meta i {
  background: #a7b2ac;
  border-radius: 999px;
  width: 3px;
  height: 3px;
}

.scanner-device-id {
  white-space: nowrap;
  align-items: center;
  gap: 3px;
  min-width: 0;
  display: inline-flex;
}

.scanner-device-id-toggle {
  color: #7b8780;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-grid;
}

.scanner-device-id-toggle:hover {
  color: #237752;
  background: #edf5f0;
}

.scanner-device-id-toggle:focus-visible {
  outline-offset: 1px;
  outline: 2px solid #68a987;
}

.scanner-device-state {
  color: #05904a;
  white-space: nowrap;
  background: #e8f8ef;
  border-radius: 999px;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
}

.scanner-device-state span {
  color: inherit;
  font-size: inherit;
}

.scanner-device-state .status-dot {
  width: 7px;
  height: 7px;
  box-shadow: none;
}

.scanner-device-state b {
  opacity: .62;
  font-weight: 400;
}

.scanner-device-state.busy {
  color: #a96523;
  background: #fff2df;
}

.scanner-device-state.busy .status-dot {
  background: #df8a32;
}

.scanner-device-state.offline {
  color: #a64c45;
  background: #fae9e7;
}

.scanner-device-state.offline .status-dot {
  background: #c65a52;
}

.scanner-device-state.pending {
  color: #65756d;
  background: #eef4f1;
}

.scanner-device-state.pending .status-dot {
  background: #8e9a93;
  animation: 1.2s ease-in-out infinite scanner-status-pulse;
}

.scanner-device-state.unavailable {
  color: #9a672d;
  background: #fff3df;
}

.scanner-device-state.unavailable .status-dot {
  background: #d29245;
}

.scanner-device-state.unbound {
  color: #758179;
  background: #f0f3f1;
}

.scanner-device-state.unbound .status-dot {
  background: #a6afa9;
}

@keyframes scanner-status-pulse {
  50% {
    opacity: .38;
  }
}

.scanner-device-actions {
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  display: flex;
}

.scanner-device-actions .icon-button {
  width: 36px;
  height: 36px;
}

.scanner-groups {
  background: #fff;
  border: 1px solid #dfe8e3;
  border-radius: 12px;
  margin-top: 18px;
  overflow: hidden;
}

.scanner-section-heading {
  border-bottom: 1px solid #e4ebe7;
  min-height: 62px;
  padding: 0 18px;
}

.scanner-section-heading > div:first-child {
  align-items: center;
  gap: 9px;
}

.scanner-section-heading h2 {
  color: #20252b;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.scanner-section-heading > div:first-child > span {
  color: #647169;
  text-align: center;
  background: #f3f6f4;
  border-radius: 999px;
  min-width: 28px;
  padding: 3px 8px;
  font-size: 14px;
  font-weight: 650;
}

.scanner-section-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.scanner-group-search {
  color: #8a958f;
  background: #f6f8f7;
  border: 1px solid #0000;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  width: 236px;
  height: 38px;
  padding: 0 10px;
  display: flex;
}

.scanner-group-search:focus-within {
  background: #fff;
  border-color: #8bc9a9;
  box-shadow: 0 0 0 2px #e8f8ef;
}

.scanner-group-search input {
  color: #20252b;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 14px;
}

.scanner-group-search input::placeholder {
  color: #8a958f;
}

.scanner-filter-tabs {
  background: #edf3ef;
  border-radius: 8px;
  padding: 2px;
}

.scanner-filter-tabs button {
  height: 34px;
  padding: 0 12px;
  font-size: 14px;
}

.scanner-create-group {
  color: #05904a;
  width: 38px;
  height: 38px;
}

.scanner-group-table {
  min-height: 306px;
}

.scanner-group-table-head, .scanner-group-row {
  grid-template-columns: 30% 10% 14% 24% 22%;
  align-items: center;
  padding: 0 18px;
  display: grid;
}

.scanner-group-table-head {
  color: #20252b;
  background: #f6f8f7;
  height: 46px;
  font-size: 14px;
  font-weight: 650;
}

.scanner-group-table-head span:last-child {
  text-align: right;
}

.scanner-group-list {
  border: 0;
  border-radius: 0;
  margin-top: 0;
  overflow: visible;
}

.scanner-group-row {
  border-bottom: 1px solid #e7ede9;
  min-height: 70px;
}

.scanner-group-row:last-child {
  border-bottom: 0;
}

.scanner-group-row:hover {
  background: #fbfdfc;
}

.scanner-group-name-cell {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.scanner-group-name-cell a {
  color: #20252b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
}

.scanner-group-name-cell a:hover {
  color: #05904a;
}

.scanner-group-row > span {
  color: #59675f;
  font-size: 14px;
}

.scanner-group-status {
  color: #647169;
  border-radius: 999px;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 3px 10px;
  font-size: 14px;
  font-style: normal;
  font-weight: 650;
  display: inline-flex;
}

.scanner-group-status.completed, .scanner-group-status.scanning {
  color: #05904a;
  background: #e8f8ef;
}

.scanner-group-status.pending {
  color: #647169;
  background: #f0f3f1;
}

.scanner-group-status.warning {
  color: #aa681e;
  background: #fff2df;
}

.scanner-group-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.scanner-group-actions .icon-button {
  border-radius: 7px;
  width: 30px;
  height: 30px;
}

.scanner-group-actions a.icon-button {
  display: inline-grid;
}

.scanner-group-table .scanner-empty {
  min-height: 264px;
}

.scanner-group-pagination {
  color: #647169;
  border-top: 1px solid #e4ebe7;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  padding: 8px 18px;
  font-size: 14px;
  display: grid;
}

.scanner-group-pagination > div {
  align-items: center;
  gap: 5px;
  display: flex;
}

.scanner-group-pagination button {
  color: #59675f;
  background: #fff;
  border: 1px solid #dce6e0;
  border-radius: 7px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 14px;
  display: inline-grid;
}

.scanner-group-pagination button:hover:not(:disabled) {
  color: #05904a;
  background: #f3faf6;
  border-color: #8bc9a9;
}

.scanner-group-pagination button.active {
  color: #05904a;
  background: #e8f8ef;
  border-color: #05904a;
  font-weight: 700;
}

.scanner-group-pagination button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.scanner-group-pagination > span:last-child {
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.scanner-unbind-dialog .scanner-dialog-body {
  color: #59675f;
  align-items: center;
  gap: 13px;
  font-size: 14px;
  line-height: 1.65;
  display: flex;
}

.scanner-unbind-dialog .scanner-dialog-body p {
  margin: 0;
}

.scanner-unbind-dialog-icon {
  color: #bd4e4e;
  background: #fae9e7;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
}

.scanner-workbench-page {
  color: #20252b;
  background: #f6f8f7;
  min-width: 1180px;
  min-height: calc(100vh - 64px);
  padding: 18px 0 28px;
}

.scanner-workbench-header {
  min-height: 70px;
  margin: 0 0 12px;
}

.scanner-workbench-title {
  gap: 12px;
  min-width: 0;
}

.scanner-workbench-title > div {
  gap: 4px;
  min-width: 0;
}

.scanner-workbench-title > div > p {
  color: #7b8780;
  margin: 0;
  font-size: 12px;
}

.scanner-workbench-name-row {
  align-items: center;
  gap: 9px;
  min-width: 0;
  display: flex;
}

.scanner-workbench-name-row h1 {
  color: #20252b;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  overflow: hidden;
}

.scanner-workbench-name-row .badge {
  flex: none;
}

.scanner-workbench-actions .button {
  border-radius: 8px;
  height: 36px;
  padding: 0 13px;
  font-size: 12px;
}

.scanner-control-bar {
  background: #fff;
  border: 1px solid #dbe5df;
  border-radius: 12px;
  grid-template-columns: auto minmax(330px, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 74px;
  margin-bottom: 12px;
  padding: 10px 14px;
  display: grid;
  box-shadow: 0 3px 14px #264c3a09;
}

.scanner-control-parameters {
  align-items: center;
  gap: 10px;
  display: flex;
}

.scanner-control-parameters .scanner-control-field {
  align-items: center;
  gap: 7px;
  display: flex;
}

.scanner-control-parameters .scanner-control-field > span {
  white-space: nowrap;
}

.scanner-control-parameters .scanner-control-field select {
  width: 124px;
}

.scanner-control-status-slot {
  border-left: 1px solid #e6ece8;
  border-right: 1px solid #e6ece8;
  grid-template-columns: minmax(180px, auto) minmax(150px, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  height: 48px;
  padding: 0 20px;
  display: grid;
}

.scanner-waiting-status {
  color: #59675f;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  display: flex;
}

.scanner-waiting-status > i {
  background: #a7b2ac;
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px #edf1ef;
}

.scanner-waiting-status strong {
  font-size: 12px;
  font-weight: 650;
}

.scanner-waiting-status span {
  color: #87918c;
  font-size: 11px;
}

.scanner-progress-copy {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.scanner-progress-copy strong {
  color: #246e4d;
  font-size: 12px;
}

.scanner-progress-copy span {
  color: #5d806f;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.scanner-control-progress {
  background: #cfeedd;
  border-radius: 999px;
  height: 5px;
  position: relative;
  overflow: hidden;
}

.scanner-control-progress i {
  border-radius: inherit;
  background: #1f9d5f;
  width: 100%;
  position: absolute;
  inset: 0 auto 0 0;
}

.scanner-control-progress.indeterminate i {
  width: 38%;
  animation: 1.8s ease-in-out infinite scanner-progress-sweep;
}

.scanner-control-actions {
  justify-content: flex-end;
  min-width: 112px;
  display: flex;
}

.scanner-control-actions .button, .scanner-control-actions .scanner-stop-button {
  width: auto;
  min-width: 108px;
  height: 36px;
  padding: 0 12px;
}

.scanner-workbench-grid {
  background: none;
  border: 0;
  border-radius: 0;
  grid-template-columns: minmax(0, 1fr);
  height: calc(100vh - 260px);
  min-height: 600px;
  display: grid;
  overflow: visible;
}

.scanner-pages-panel {
  background: #fff;
  border: 1px solid #dbe5df;
  border-radius: 12px;
  min-height: 0;
  overflow: hidden;
}

.scanner-pages-toolbar {
  border-bottom: 1px solid #e3eae6;
  flex: none;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  padding: 0 16px;
  display: flex;
}

.scanner-pages-toolbar h2 {
  color: #20252b;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.scanner-control-field {
  gap: 6px;
  display: grid;
}

.scanner-control-field > span {
  color: #59675f;
  font-size: 11px;
  font-weight: 600;
}

.scanner-control-field select {
  color: #27332e;
  background: #fff;
  border: 1px solid #dbe5df;
  border-radius: 8px;
  outline: 0;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
}

.scanner-control-field select:focus {
  border-color: #5cac7f;
  box-shadow: 0 0 0 2px #e3f4eb;
}

.scanner-control-field select:disabled {
  cursor: not-allowed;
  color: #8d9791;
  background: #f2f5f3;
}

@keyframes scanner-progress-sweep {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(85%);
  }

  100% {
    transform: translateX(265%);
  }
}

.scanner-stop-button {
  color: #b74c45;
  background: #fff;
  border: 1px solid #c95d55;
  border-radius: 8px;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 38px;
  font-size: 12px;
  font-weight: 650;
  display: flex;
}

.scanner-stop-button:hover:not(:disabled) {
  background: #fff4f2;
}

.scanner-stop-button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.scanner-pages-panel {
  flex-direction: column;
  display: flex;
}

.scanner-pages-toolbar {
  height: 54px;
  padding: 0 14px;
}

.scanner-pages-toolbar > div:first-child {
  align-items: center;
  gap: 10px;
  display: flex;
}

.scanner-pages-toolbar > div:first-child > span {
  color: #7b8780;
  font-size: 11px;
  font-weight: 650;
}

.scanner-pages-toolbar > div:first-child > b {
  color: #a96523;
  background: #fff2df;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 650;
}

.scanner-pages-tools {
  align-items: center;
  gap: 6px;
  display: flex;
}

.scanner-pages-tools .icon-button {
  border-radius: 7px;
  width: 32px;
  height: 32px;
}

.scanner-pages-tools .icon-button.active {
  color: #147a47;
  background: #e8f8ef;
  border-color: #38a16b;
}

.scanner-page-grid {
  flex: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 260px;
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 16px;
  display: grid;
  overflow-y: auto;
}

.scanner-page-card {
  cursor: grab;
  background: #f6f8f7;
  border: 1px solid #dbe5df;
  border-radius: 10px;
  outline: 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 260px;
  padding: 8px;
  transition: border-color .16s, box-shadow .16s, background .16s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.scanner-page-card:hover {
  background: #f9fcfa;
  border-color: #9dc9b1;
}

.scanner-page-card.selected {
  background: #eaf8f0;
  border: 2px solid #18a05a;
  padding: 7px;
  box-shadow: 0 0 0 2px #d8f1e3;
}

.scanner-page-card.cut {
  opacity: .62;
}

.scanner-page-card.dragging {
  opacity: .38;
}

.scanner-page-card.drop-before:before, .scanner-page-card.drop-after:after {
  z-index: 6;
  content: "";
  pointer-events: none;
  background: #07c160;
  border-radius: 999px;
  width: 4px;
  position: absolute;
  top: 8px;
  bottom: 8px;
  box-shadow: 0 0 0 1px #ffffffeb, 0 2px 8px #07c16047;
}

.scanner-page-card.drop-before:before {
  left: 3px;
}

.scanner-page-card.drop-after:after {
  right: 3px;
}

.scanner-page-card.removed {
  opacity: .5;
  filter: grayscale(.35);
}

.scanner-page-card-paper {
  background: #eef1ef;
  border-radius: 5px;
  flex: 1;
  place-items: center;
  min-height: 0;
  display: grid;
  position: relative;
  overflow: hidden;
}

.scanner-page-card-paper img {
  object-fit: contain;
  background: #f4f4f1;
  width: 100%;
  height: 100%;
  display: block;
}

.scanner-page-card-paper i {
  background: #e68b35;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 7px;
  right: 7px;
  box-shadow: 0 0 0 3px #fff7eb;
}

.scanner-page-card footer {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  display: flex;
}

.scanner-page-card footer > div:first-child {
  color: #7c8982;
  align-items: center;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.scanner-page-card footer strong {
  color: #27332e;
  font-size: 11px;
}

.scanner-page-card footer span {
  color: #a96523;
  background: #fff2df;
  border-radius: 999px;
  padding: 2px 5px;
  font-size: 9px;
}

.scanner-page-card-actions {
  flex: none;
  gap: 3px;
  display: flex;
}

.scanner-page-card-actions button {
  color: #68766e;
  background: none;
  border: 0;
  border-radius: 6px;
  place-items: center;
  width: 27px;
  height: 27px;
  display: grid;
}

.scanner-page-card-actions button:hover:not(:disabled) {
  color: #147a47;
  background: #e2f3ea;
}

.scanner-page-card-actions button.danger:hover:not(:disabled) {
  color: #b74c45;
  background: #fae9e7;
}

.scanner-page-card-actions button:disabled {
  opacity: .35;
}

.scanner-page-drag-preview {
  z-index: 9999;
  opacity: .62;
  pointer-events: none;
  background: #fff;
  border: 1px solid #77a98e;
  border-radius: 8px;
  width: 140px;
  height: 96px;
  position: fixed;
  top: -1000px;
  left: -1000px;
  overflow: hidden;
  box-shadow: 0 10px 26px #1e3d2d3d;
}

.scanner-page-drag-preview img {
  object-fit: contain;
  background: #f4f4f1;
  width: 100%;
  height: 100%;
}

.scanner-page-drag-preview span {
  color: #27332e;
  background: #ffffffeb;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 650;
  position: absolute;
  top: 6px;
  left: 6px;
}

.scanner-pages-error {
  color: #a9433e;
  background: #fff0ee;
  border-bottom: 1px solid #f0c9c5;
  flex: none;
  padding: 9px 14px;
  font-size: 12px;
}

.scanner-pages-empty {
  color: #7d8982;
  flex: 1;
  align-content: center;
  place-items: center;
  gap: 8px;
  min-height: 0;
  display: grid;
}

.scanner-pages-empty .brand-empty-artwork {
  object-fit: contain;
  width: 168px;
  height: 116px;
}

.scanner-pages-empty strong {
  color: #4f5d55;
  font-size: 14px;
}

.scanner-pages-empty span {
  font-size: 12px;
}

.scanner-confirmation-dialog {
  z-index: 91;
  width: min(460px, 100vw - 40px);
}

.scanner-confirmation-dialog > header {
  align-items: flex-start;
}

.scanner-confirmation-dialog > header p {
  max-width: 380px;
  font-size: 13px;
  line-height: 1.65;
}

.scanner-confirmation-dialog .button.danger {
  color: #fff;
  background: #bd4e4e;
  border-color: #bd4e4e;
}

.scanner-confirmation-dialog .button.danger:hover {
  background: #a9443e;
}

.scanner-page-manager {
  z-index: 91;
}

.scanner-page-manager > header > div:first-child {
  gap: 4px;
  display: grid;
}

.scanner-manager-page.removed {
  opacity: .5;
}

@media (max-width: 760px) {
  .report-publication-settings {
    grid-template-columns: 1fr;
  }

  .report-publication-settings .grading-report-comment-option small {
    white-space: normal;
  }

  .report-preview-layout.batch {
    grid-template-columns: 180px minmax(420px, 1fr);
    overflow-x: auto;
  }
}

.paper-image-frame {
  isolation: isolate;
  background: #f0f3f0;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.paper-image-frame:before {
  z-index: 1;
  content: "";
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(104deg, #0000 26%, #ffffff94 48%, #0000 70%);
  position: absolute;
  inset: 0;
  transform: translateX(-115%);
}

.paper-image-frame[data-load-state="loading"]:before {
  opacity: 1;
  animation: 1.5s cubic-bezier(.45, 0, .55, 1) .12s infinite paper-image-soft-sweep;
}

.paper-image-frame > img {
  object-fit: contain;
  opacity: 0;
  filter: blur(3px);
  width: 100%;
  height: 100%;
  transition: opacity .22s, filter .22s;
  display: block;
}

.paper-image-frame[data-load-state="loaded"] > img {
  opacity: 1;
  filter: blur();
}

.paper-image-retry {
  z-index: 2;
  color: #66736c;
  cursor: pointer;
  background: #eef2ef;
  border: 0;
  align-content: center;
  place-items: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: grid;
  position: absolute;
  inset: 0;
}

.paper-image-retry:hover {
  color: #167b4b;
  background: #e8f3ec;
}

.paper-image-retry span {
  font-size: 12px;
  font-weight: 650;
}

.paper-image-retry small {
  align-items: center;
  gap: 3px;
  font-size: 10px;
  display: flex;
}

.paper-image-frame.compact .paper-image-retry {
  gap: 2px;
  padding: 3px;
}

.paper-image-frame.compact .paper-image-retry > svg {
  width: 14px;
  height: 14px;
}

.paper-image-frame.compact .paper-image-retry span {
  display: none;
}

.paper-image-frame.compact .paper-image-retry small {
  font-size: 9px;
}

.scan-group-options .paper-image-frame {
  width: 42px;
  height: 48px;
}

.report-preview-pages article .paper-image-frame {
  height: 150px;
}

.single-page-preview-workspace > .paper-image-frame, .report-page-lightbox-image > .paper-image-frame {
  max-width: 100%;
  height: auto;
}

.scanner-page-manager .scanner-manager-page {
  place-items: stretch stretch;
  min-width: 0;
  overflow: hidden;
}

.scanner-page-manager .scanner-manager-list {
  grid-auto-rows: max-content;
  align-content: start;
}

.scanner-manager-paper-viewport {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: #f5f5f2;
  width: 100%;
  min-width: 0;
  overflow: auto visible;
}

.scanner-manager-paper-viewport:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #55a87b;
}

.scanner-page-manager .scanner-manager-paper {
  justify-items: center;
  max-width: none;
  overflow: visible;
}

.scanner-workbench-name-row .scanner-name-edit {
  border-radius: 7px;
  width: 28px;
  height: 28px;
}

@keyframes paper-image-soft-sweep {
  from {
    transform: translateX(-115%);
  }

  to {
    transform: translateX(115%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .paper-image-frame[data-load-state="loading"]:before {
    opacity: 0;
    animation: none;
  }

  .paper-image-frame > img {
    filter: none;
    transition: none;
  }
}

.teacher-shell {
  transition: grid-template-columns .18s;
}

.teacher-sidebar-header {
  height: 52px;
  display: block;
  position: relative;
}

.teacher-sidebar-header .teacher-brand {
  width: 132px;
  height: 52px;
  padding: 0;
}

.teacher-brand-mark, .teacher-brand-collapsed {
  object-fit: contain;
  border-radius: 10px;
  flex: none;
  width: 36px;
  height: 36px;
  display: block;
}

.teacher-sidebar-toggle {
  z-index: 2;
  color: #5f7066;
  background: #ffffffbd;
  border: 1px solid #cfe5d8;
  border-radius: 8px;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  transition: border-color .16s, background-color .16s, color .16s;
  display: grid;
  position: absolute;
  top: 12px;
  right: -28px;
}

.teacher-sidebar-toggle:hover {
  color: #078f48;
  background: #fff;
  border-color: #9ed5b5;
}

.teacher-sidebar-toggle:focus-visible, .all-pages-collapsed-summary > button:focus-visible, .collapse-pages-button:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #07c16066;
}

.teacher-shell.is-sidebar-collapsed {
  grid-template-columns: 68px minmax(0, 1fr);
}

body:has(.exam-detail-page, .batch-detail-page) .teacher-shell.is-sidebar-collapsed {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}

.teacher-shell.is-sidebar-collapsed .teacher-sidebar {
  padding-inline: 12px !important;
}

.teacher-shell.is-sidebar-collapsed .teacher-sidebar-header {
  align-content: start;
  justify-items: center;
  gap: 10px;
  display: grid;
  height: 80px !important;
  margin-bottom: 0 !important;
}

.teacher-shell.is-sidebar-collapsed .teacher-sidebar-header .teacher-brand {
  justify-content: center;
  width: 44px;
  height: 42px;
  padding: 0;
}

.teacher-shell.is-sidebar-collapsed .teacher-sidebar nav a span, .teacher-shell.is-sidebar-collapsed .teacher-sidebar-account-name {
  display: none;
}

.teacher-shell.is-sidebar-collapsed .teacher-sidebar-toggle {
  position: static;
}

.teacher-shell.is-sidebar-collapsed .teacher-sidebar nav {
  margin-top: 18px;
}

.teacher-shell.is-sidebar-collapsed .teacher-sidebar nav a {
  justify-content: center;
  position: relative;
  padding: 0 !important;
}

.teacher-shell.is-sidebar-collapsed .teacher-sidebar nav a:hover {
  transform: none;
}

.teacher-shell.is-sidebar-collapsed .teacher-sidebar nav a small {
  border-radius: 8px;
  min-width: 15px;
  height: 15px;
  margin: 0;
  font-size: 8px;
  position: absolute;
  top: 4px;
  right: 3px;
}

.teacher-shell.is-sidebar-collapsed .teacher-sidebar-account {
  padding: 12px 0 0;
}

.teacher-shell.is-sidebar-collapsed .teacher-sidebar-account > a {
  width: 44px;
  padding: 0;
}

.teacher-shell.is-sidebar-collapsed .teacher-product-version-expanded {
  display: none;
}

.teacher-shell.is-sidebar-collapsed .teacher-product-version-collapsed {
  font-size: 9px;
  display: inline;
}

.grading-overview .submission-overview-layout {
  transition: grid-template-columns .18s;
}

.grading-overview .submission-overview-layout.is-all-pages-collapsed {
  grid-template-columns: 46px minmax(0, 1fr);
}

.grading-overview .all-pages-heading-actions {
  align-items: center;
  gap: 5px;
  display: flex;
}

.grading-overview .collapse-pages-button, .grading-overview .all-pages-collapsed-summary > button {
  color: #66736c;
  background: #fff;
  border: 1px solid #dde3df;
  border-radius: 9px;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.grading-overview .collapse-pages-button:hover, .grading-overview .all-pages-collapsed-summary > button:hover {
  color: #19a66a;
  background: #eaf8f0;
  border-color: #a8daba;
}

.grading-overview .all-pages-collapsed-summary {
  background: #fff;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  min-height: 100%;
  padding: 10px 6px;
  display: flex;
}

.grading-overview .all-pages-collapsed-summary[hidden] {
  display: none;
}

.grading-overview .all-pages-collapsed-count {
  color: #6d7972;
  justify-items: center;
  gap: 3px;
  display: grid;
}

.grading-overview .all-pages-collapsed-count svg {
  color: #19a66a;
}

.grading-overview .all-pages-collapsed-count strong {
  color: #27312b;
  font-size: 13px;
  line-height: 1;
}

.grading-overview .all-pages-collapsed-count span {
  font-size: 9px;
  line-height: 1;
}

.grading-overview .all-pages-collapsed-lock {
  color: #758079;
  background: #f2f6f3;
  border-radius: 7px;
  place-items: center;
  width: 26px;
  height: 26px;
  display: grid;
}

.grading-overview .all-pages-collapsed-lock.locked {
  color: #fff;
  background: #27372e;
}

.grading-overview .all-pages-collapsed-warning {
  color: #a76718;
  background: #fff0d6;
  border-radius: 11px;
  place-items: center;
  min-width: 22px;
  height: 22px;
  font-size: 9px;
  font-weight: 800;
  display: grid;
}

.grading-overview .submission-overview-layout.is-all-pages-collapsed .all-pages-heading, .grading-overview .submission-overview-layout.is-all-pages-collapsed .all-pages-list {
  display: none;
}

.grading-overview .grading-icon-button.grading-action-button, .grading-overview .submission-card-actions .grading-icon-button.grading-action-button {
  color: #19a66a;
  box-shadow: none;
  background: #eaf8f0;
  border-color: #dde3df;
}

.grading-overview .grading-icon-button.grading-action-button:hover:not(:disabled), .grading-overview .submission-card-actions .grading-icon-button.grading-action-button:hover:not(:disabled) {
  color: #118d59;
  background: #ddf5e7;
  border-color: #a8daba;
}

.grading-overview .submission-overview-card:has(.submission-student-picker.is-open) {
  content-visibility: visible;
  z-index: 10;
  contain: none;
  position: relative;
}

.grading-overview .submission-student-picker.is-open .submission-student-popover {
  z-index: 32;
}

.grading-overview .submission-card-area {
  padding-top: 0;
}

.grading-overview .batch-submission-toolbar {
  box-shadow: 0 1px #edf2ee, 0 5px 9px #273d3009;
}

.grading-overview .submission-card-grid {
  padding-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .teacher-shell, .grading-overview .submission-overview-layout {
    transition: none;
  }
}

.parent-commerce-admin {
  gap: 20px;
  display: grid;
}

.parent-commerce-heading {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.parent-commerce-heading h1 {
  align-items: center;
  gap: 10px;
  display: flex;
}

.parent-commerce-heading p {
  margin-top: 6px;
}

.parent-commerce-badge {
  color: #05904a;
  background: #e8f8ef;
  border-radius: 20px;
  padding: 7px 12px;
  font-size: 13px;
}

.parent-commerce-form fieldset {
  border: 0;
  margin: 16px 0 0;
  padding: 0;
}

.parent-commerce-modes {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  display: grid;
}

.parent-commerce-modes label {
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  display: flex;
}

.parent-commerce-modes label.selected {
  background: #e8f8ef;
  border-color: #07c160;
}

.parent-commerce-modes small, .parent-commerce-table small {
  color: var(--muted-foreground);
  margin-top: 5px;
  display: block;
}

.parent-commerce-products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 24px 0;
  display: grid;
}

.parent-commerce-products section {
  align-content: start;
  gap: 14px;
  display: grid;
}

.parent-commerce-products label {
  gap: 6px;
  display: grid;
}

.parent-commerce-products input {
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 100%;
  padding: 9px 12px;
}

.parent-commerce-policy {
  color: #52625a;
  background: #f6f8f7;
  border-left: 3px solid #07c160;
  margin-bottom: 18px;
  padding: 12px 16px;
  line-height: 1.7;
}

.parent-commerce-error {
  color: #a83428;
  background: #fff0ee;
  border-radius: 6px;
  padding: 12px 16px;
}

.parent-commerce-notice {
  color: #05904a;
  background: #e8f8ef;
  border-radius: 6px;
  padding: 12px 16px;
}

.parent-commerce-table {
  overflow-x: auto;
}

.parent-commerce-table table {
  border-collapse: collapse;
  width: 100%;
}

.parent-commerce-table th, .parent-commerce-table td {
  text-align: left;
  border-top: 1px solid var(--border);
  padding: 12px 18px;
  font-size: 13px;
}

.parent-commerce-table td:first-child {
  overflow-wrap: anywhere;
  max-width: 260px;
}

.parent-commerce-products .commerce-toggle {
  align-items: center;
  gap: 8px;
  display: flex;
}

.parent-commerce-products .commerce-toggle input {
  width: 16px;
  height: 16px;
  padding: 0;
}

.commerce-reward {
  gap: 8px;
  margin: 20px 0;
  display: grid;
}

.commerce-reward input {
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 200px;
  padding: 9px 12px;
}

.parent-admin {
  gap: 20px;
  display: grid;
}

.parent-admin h1 {
  margin: 0 0 8px;
  font-size: 24px;
}

.parent-admin h2 {
  margin: 0 0 16px;
  font-size: 18px;
}

.parent-admin-filter {
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 18px;
  display: flex;
}

.parent-admin-filter label {
  gap: 5px;
  font-size: 12px;
  display: grid;
}

.parent-admin-filter input, .parent-admin-filter select {
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 36px;
  padding: 6px 10px;
}

.parent-admin-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.parent-admin-metrics > div {
  gap: 8px;
  padding: 16px;
  display: grid;
}

.parent-admin-metrics span {
  color: var(--muted-foreground);
  font-size: 12px;
}

.parent-admin-metrics strong {
  font-size: 24px;
}

.parent-admin-table {
  overflow: auto;
}

.parent-admin table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  font-size: 13px;
}

.parent-admin td, .parent-admin th {
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  padding: 12px;
}

.parent-admin th {
  color: var(--muted-foreground);
  font-size: 12px;
}

.parent-admin small {
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
  margin-top: 4px;
  font-size: 11px;
  display: block;
}

.parent-admin-pager {
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 13px;
  display: flex;
}

.parent-admin-pager a[aria-disabled="true"] {
  opacity: .4;
  pointer-events: none;
}

.parent-admin-person {
  align-items: center;
  gap: 18px;
  margin: 20px 0;
  display: flex;
}

.parent-admin-person img {
  object-fit: cover;
  border-radius: 50%;
  width: 64px;
  height: 64px;
}

.parent-admin-link {
  border-top: 1px solid var(--border);
  padding: 14px 0;
  font-size: 13px;
}

@media (max-width: 1000px) {
  .parent-admin-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/*# sourceMappingURL=src_app_globals_162hn9o.css.map*/