:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --bg-elevated: #eef4f8;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --panel-tint: #f1f8f8;
  --text: #111827;
  --text-strong: #0b1220;
  --muted: #64748b;
  --muted-strong: #475569;
  --line: #dbe4ee;
  --line-strong: #c8d4e2;
  --accent: #0f766e;
  --accent-strong: #0f5f59;
  --accent-soft: #e6f5f3;
  --blue: #2563eb;
  --blue-soft: #eff6ff;
  --danger: #b42318;
  --danger-soft: #fff1f0;
  --success: #027a48;
  --success-soft: #ecfdf3;
  --warning: #b54708;
  --warning-soft: #fffaeb;
  --nav: #101820;
  --nav-soft: #172330;
  --shadow: 0 24px 60px rgba(15, 23, 42, 0.09);
  --shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.07);
  --radius: 8px;
  --radius-sm: 6px;
  --focus: 0 0 0 3px rgba(15, 118, 110, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, var(--bg-elevated) 0, var(--bg) 260px, #f7f9fc 100%);
  color: var(--text);
  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
  line-height: 1.55;
}

a {
  color: var(--accent);
  font-weight: 760;
  text-decoration: none;
}

a:hover {
  color: var(--accent-strong);
}

.layout {
  min-height: 100vh;
}

.topbar {
  align-items: center;
  background:
    linear-gradient(135deg, #101820 0, #142434 58%, #17332f 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.16);
  color: #fff;
  display: flex;
  gap: 22px;
  justify-content: space-between;
  min-height: 76px;
  padding: 12px 28px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  align-items: center;
  color: #f8fbfd;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 12px;
  min-width: 236px;
}

.brand:hover {
  color: #fff;
}

.brand-mark {
  align-items: center;
  background: linear-gradient(135deg, #f7d774, #9ee6d8);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 10px 24px rgba(0, 0, 0, 0.18);
  color: #0d1b1d;
  display: inline-flex;
  font-size: 18px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.brand-title,
.brand-subtitle {
  display: block;
  line-height: 1.2;
  white-space: nowrap;
}

.brand-title {
  font-size: 18px;
  font-weight: 850;
}

.brand-subtitle {
  color: #aebfcb;
  font-size: 12px;
  font-weight: 650;
  margin-top: 3px;
}

.nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.nav-toggle {
  display: none;
}

.nav a,
.nav span {
  color: #e8f2f6;
  font-size: 13px;
}

.nav a {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.nav a:hover,
.nav a.is-active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.nav a.is-active {
  box-shadow: inset 0 -2px 0 #8ee7d7;
}

.nav-menu {
  position: relative;
}

.nav-menu summary {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: #e8f2f6;
  cursor: pointer;
  font-size: 13px;
  font-weight: 760;
  list-style: none;
  padding: 8px 10px;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary::after {
  content: "▾";
  font-size: 10px;
  margin-left: 6px;
}

.nav-menu summary:hover,
.nav-menu summary.is-active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.nav-menu-list {
  background: #132130;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
  display: grid;
  gap: 4px;
  min-width: 150px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
}

.nav-menu-list a {
  white-space: nowrap;
}

.nav-user {
  align-items: flex-end;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 4px;
  padding-left: 14px;
}

.nav-user-name {
  color: #fff;
  font-weight: 850;
  line-height: 1.1;
}

.nav-user-role {
  color: #aebfcb;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
}

.main {
  margin: 0 auto;
  max-width: 1320px;
  padding: 30px;
}

.main > .panel + .panel {
  margin-top: 18px;
}

.auth-main {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.panel {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  min-width: 0;
  overflow: hidden;
  padding: 26px;
}

.auth-panel {
  max-width: 440px;
  position: relative;
  width: 100%;
}

.auth-panel::before {
  background: linear-gradient(90deg, var(--accent), #e0b84b);
  content: "";
  display: block;
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

h1,
h2,
h3 {
  color: var(--text-strong);
}

h1 {
  font-size: 28px;
  line-height: 1.22;
  margin: 0 0 18px;
}

h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 14px;
}

h3 {
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 10px;
}

p {
  margin: 0 0 12px;
}

.stack > h1,
.stack > h2 {
  margin-bottom: 0;
}

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

.page-heading {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.page-heading h1 {
  margin-bottom: 6px;
}

.page-heading p {
  color: var(--muted);
  margin: 0;
}

.metric-strip {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 18px;
}

.metric {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.metric span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.metric strong {
  color: var(--text-strong);
  display: block;
  font-size: 22px;
  margin-top: 4px;
}

.form-grid {
  display: grid;
  gap: 14px;
}

.form-section-title {
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 850;
  margin-top: 4px;
}

.form-section {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 14px;
  padding: 16px;
}

.form-section h2,
.form-section h3 {
  margin: 0;
}

.form-row-3 {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

label {
  color: #334155;
  display: grid;
  font-size: 14px;
  font-weight: 780;
  gap: 7px;
}

input,
select,
textarea {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  min-height: 42px;
  min-width: 0;
  padding: 10px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  width: 100%;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #aebdcc;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus);
  outline: none;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
  min-height: 18px;
  min-width: 18px;
  padding: 0;
  width: auto;
}

input[type="file"] {
  background: var(--panel-soft);
  border-style: dashed;
}

.field-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  margin: -4px 0 0;
}

.visually-hidden {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.award-rule-set {
  border: 0;
  display: grid;
  gap: 12px;
  margin: 0;
  min-inline-size: 0;
  padding: 0;
}

.award-rule-set > legend {
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 850;
  padding: 0;
}

.award-rule {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 12px;
  margin: 0;
  min-inline-size: 0;
  padding: 14px;
}

.award-rule > legend {
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 850;
  padding: 0 4px;
}

.award-mode-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.award-mode-option {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  flex: 1 1 112px;
  font-size: 13px;
  gap: 8px;
  justify-content: center;
  min-height: 38px;
  padding: 8px 10px;
}

.award-mode-option:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.award-rule > [data-award-input] {
  max-width: 280px;
}

.award-rule > [data-award-none] {
  margin: 0;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

button,
.button {
  align-items: center;
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 850;
  justify-content: center;
  min-height: 42px;
  padding: 9px 15px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

button:hover,
.button:hover {
  background: var(--accent-strong);
  color: #fff;
  transform: translateY(-1px);
}

button:focus-visible,
.button:focus-visible {
  box-shadow: var(--focus);
  outline: none;
}

.button-secondary {
  background: #eef4f7;
  border-color: #d8e3eb;
  color: var(--accent-strong);
}

.button-secondary:hover {
  background: #dcebf0;
  color: var(--accent-strong);
}

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

.button-danger:hover {
  background: #8f1d14;
}

.nav-logout {
  min-height: 34px;
  padding: 7px 10px;
}

.button-small {
  min-height: 32px;
  padding: 6px 10px;
}

.inline-form {
  display: inline;
}

.actions .inline-form {
  display: inline-flex;
}

.toolbar {
  align-items: end;
  background: linear-gradient(180deg, #ffffff, var(--panel-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  margin-bottom: 18px;
  padding: 14px;
}

.actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.actions h1 {
  margin-bottom: 0;
  margin-right: auto;
}

.config-summary {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px;
}

.config-summary div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.config-summary strong {
  color: var(--text-strong);
  width: 100%;
}

.config-summary span,
.adjustment-note {
  color: var(--muted);
  font-size: 13px;
}

.quota-form {
  align-items: end;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(92px, 1fr)) auto;
  padding: 14px;
}

.quota-form label,
.adjust-form label {
  font-size: 13px;
}

.adjust-form {
  display: grid;
  gap: 8px;
  min-width: 220px;
}

.adjust-form input,
.adjust-form select {
  min-height: 38px;
}

.stack {
  display: grid;
  gap: 18px;
}

.split {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr);
}

.split > * {
  min-width: 0;
}

.side-panel {
  display: grid;
  gap: 22px;
}

.side-section {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  padding-top: 20px;
}

.side-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.detail-grid {
  display: grid;
  gap: 12px 18px;
  grid-template-columns: 150px minmax(0, 1fr);
  margin: 0;
}

.compact-detail {
  gap: 10px 14px;
  grid-template-columns: 112px minmax(0, 1fr);
}

.detail-grid dt {
  color: var(--muted);
  font-weight: 850;
}

.detail-grid dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 100%;
  overflow-x: auto;
}

.table-wrap table {
  min-width: 720px;
}

.compact-table table,
.side-panel .table-wrap table,
.side-table table {
  min-width: 100%;
}

.side-table td {
  white-space: normal;
}

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

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 12px 12px;
  text-align: left;
  vertical-align: top;
}

tbody tr:last-child td {
  border-bottom: 0;
}

td {
  background: rgba(255, 255, 255, 0.72);
  overflow-wrap: anywhere;
}

th {
  background: #f7fafc;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

tr:hover td {
  background: #fbfdff;
}

.alert {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  padding: 11px 12px;
}

.alert-error {
  background: var(--danger-soft);
  border-color: #ffd5d2;
  color: var(--danger);
}

.alert-success {
  background: var(--success-soft);
  border-color: #bfe8d0;
  color: var(--success);
}

.alert-warning {
  background: var(--warning-soft);
  border-color: #f9d49b;
  color: var(--warning);
  display: grid;
  gap: 6px;
}

.badge {
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  min-height: 26px;
  padding: 6px 10px;
  white-space: nowrap;
}

.badge-info,
.badge-status-draft,
.badge-status-generated {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.badge-status-submitted,
.badge-risk-needs_supplement {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-status-stale {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-status-returned,
.badge-risk-high_risk,
.badge-review-failed,
.badge-review-failed {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-status-reviewed,
.badge-status-published,
.badge-review-completed,
.badge-risk-pass_suggested,
.badge-success {
  background: var(--success-soft);
  color: var(--success);
}

.badge-status-archived {
  background: #f1f5f9;
  color: #475569;
}

.badge-review-pending,
.badge-review-running {
  background: var(--blue-soft);
  color: var(--blue);
}

.plain-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.plain-list li {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.review-list {
  display: grid;
  gap: 10px;
}

.review-item {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
}

.review-time {
  color: #334155;
  font-weight: 850;
  min-width: 0;
}

.review-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 1 / -1;
}

.empty-state {
  background: var(--panel-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  padding: 18px;
  text-align: center;
}

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

.type-card {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-strong);
  display: grid;
  gap: 10px;
  min-height: 130px;
  padding: 18px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.type-card:hover {
  border-color: rgba(15, 118, 110, 0.34);
  box-shadow: var(--shadow-soft);
  color: var(--text-strong);
  transform: translateY(-2px);
}

.type-card strong {
  font-size: 18px;
}

.type-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.agent-panel {
  background: linear-gradient(180deg, #ffffff, var(--panel-tint));
  border: 1px solid #cfe6e2;
  position: relative;
}

.agent-panel::before {
  background: linear-gradient(180deg, var(--accent), #e0b84b);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 4px;
}

.agent-panel h2,
.agent-panel .form-grid,
.agent-panel .stack,
.agent-panel .alert {
  position: relative;
}

.agent-status {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.model-settings-block {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.model-profile-grid,
.model-card-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.model-profile-option,
.model-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.model-profile-option {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 10px;
}

.model-profile-option.is-selected {
  border-color: var(--accent);
  box-shadow: var(--focus);
}

.model-profile-option small,
.model-card span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin-top: 3px;
}

.model-card {
  display: grid;
  gap: 12px;
}

.model-card-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.parse-summary {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.batch-upload {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) auto;
}

.batch-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.overall-progress,
.batch-task-card,
.batch-history-card {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.progress-label,
.batch-task-head,
.batch-task-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.progress-track {
  background: #d8e2ee;
  border-radius: 999px;
  height: 10px;
  margin-top: 12px;
  overflow: hidden;
}

.progress-fill {
  background: linear-gradient(90deg, var(--accent), #42a5f5);
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 8px;
  transition: none;
}

.progress-fill.is-failed {
  background: linear-gradient(90deg, #c2410c, #ef4444);
}

.batch-task-list,
.batch-history-list {
  display: grid;
  gap: 12px;
}

.batch-task-head strong {
  display: block;
  overflow-wrap: anywhere;
}

.batch-task-meta {
  color: var(--muted);
  font-size: 13px;
  justify-content: flex-start;
  margin-top: 10px;
}

.batch-error {
  color: #9f1239;
  overflow-wrap: anywhere;
}

.batch-task-actions {
  margin-top: 12px;
}

.batch-confirm-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.compact-heading h2 {
  margin: 0;
}

.batch-confirm-list {
  display: grid;
  gap: 8px;
}

.batch-confirm-row {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 10px 12px;
}

.batch-confirm-main {
  display: grid;
  min-width: 0;
}

.batch-confirm-main strong {
  overflow-wrap: anywhere;
}

.batch-history {
  margin-top: 18px;
}

.batch-file-list li {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.dashboard-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  margin: 18px 0;
}

.task-queue,
.return-note-list,
.status-summary-grid {
  display: grid;
  gap: 10px;
}

.task-item,
.return-note,
.status-summary,
.sync-preview,
.model-effective,
.submission-state {
  background: linear-gradient(180deg, #ffffff, var(--panel-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.task-item {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(0, 1fr);
}

.task-icon {
  align-items: center;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  display: inline-flex;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.task-item strong,
.task-item small,
.return-note strong,
.return-note span,
.model-effective span,
.model-effective small,
.identity-summary strong,
.identity-summary span {
  display: block;
}

.task-item small,
.return-note span,
.status-summary small,
.model-effective small,
.identity-summary span,
.table-subtitle {
  color: var(--muted);
  font-size: 12px;
}

.empty-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.status-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.status-summary strong {
  display: block;
  font-size: 24px;
}

.table-title {
  color: var(--text-strong);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.badge-stack,
.identity-summary,
.audit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.identity-summary {
  flex-direction: column;
}

.inline-warning {
  background: var(--warning-soft);
  border-radius: var(--radius-sm);
  color: var(--warning);
  font-size: 12px;
  font-weight: 760;
  margin-top: 8px;
  padding: 6px 8px;
}

.submission-state {
  min-width: 170px;
}

.submission-state strong {
  color: var(--accent-strong);
  font-size: 22px;
}

.parse-workbench {
  display: grid;
  gap: 16px;
}

.batch-current {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.batch-status-error {
  display: grid;
  gap: 10px;
  margin-bottom: 0;
}

.batch-status-error[hidden] {
  display: none;
}

.batch-status-error .actions {
  align-items: center;
}

.error-page {
  display: grid;
  gap: 12px;
  max-width: 560px;
}

.error-page h1,
.error-page p {
  margin: 0;
}

.workbench-empty {
  margin-top: 0;
}

.history-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
}

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

.history-summary::after {
  color: var(--muted);
  content: "展开";
  font-size: 12px;
  font-weight: 850;
}

details[open] > .history-summary::after {
  content: "收起";
}

.pagination {
  align-items: center;
  color: var(--muted);
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.raw-detail {
  margin-top: 8px;
}

.raw-detail summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.raw-detail code {
  background: #0f172a;
  border-radius: var(--radius-sm);
  color: #e2e8f0;
  display: block;
  margin-top: 6px;
  max-width: 360px;
  overflow-x: auto;
  padding: 8px;
  white-space: pre-wrap;
}

.sync-preview,
.model-effective {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.model-effective strong {
  color: var(--text-strong);
  display: block;
  font-size: 18px;
}

.flow-steps {
  counter-reset: flow;
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.flow-steps li {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  gap: 8px;
  padding: 8px 10px;
}

.flow-steps li::before {
  align-items: center;
  background: #e2e8f0;
  border-radius: 999px;
  color: #334155;
  content: counter(flow);
  counter-increment: flow;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.flow-steps .is-complete::before {
  background: var(--success-soft);
  color: var(--success);
  content: "✓";
}

.flow-steps .is-current {
  border-color: #8bded2;
}

@media (max-width: 1100px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav {
    justify-content: flex-start;
  }

  .nav-user {
    align-items: flex-start;
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 980px) {
  .split {
    grid-template-columns: 1fr;
  }

  .quota-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .metric-strip,
  .type-grid,
  .model-profile-grid,
  .model-card-grid,
  .dashboard-grid,
  .sync-preview,
  .model-effective {
    grid-template-columns: 1fr;
  }

  .dashboard-grid,
  .sync-preview,
  .model-effective {
    display: grid;
  }

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

@media (max-width: 760px) {
  .topbar {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 18px;
  }

  .brand {
    min-width: 0;
  }

  .brand-title {
    white-space: normal;
  }

  .nav-toggle {
    align-self: center;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: inline-flex;
    min-height: 38px;
    padding: 7px 12px;
  }

  .nav {
    display: none;
    grid-column: 1 / -1;
    justify-content: stretch;
    padding-top: 4px;
  }

  .topbar.is-nav-open .nav {
    display: grid;
    grid-template-columns: 1fr;
  }

  .nav a,
  .nav-menu,
  .nav-menu summary,
  .nav .inline-form,
  .nav-logout {
    width: 100%;
  }

  .nav-menu-list {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
    margin-top: 6px;
    position: static;
    width: 100%;
  }

  .nav a {
    padding: 9px 10px;
  }

  .nav-user {
    align-items: flex-start;
    border-left: 0;
    padding-left: 0;
  }

  .main {
    padding: 18px;
  }

  .panel {
    padding: 20px;
  }

  .toolbar {
    grid-template-columns: 1fr;
  }

  .detail-grid,
  .compact-detail {
    grid-template-columns: 1fr;
  }

  .config-summary,
  .form-row-3,
  .quota-form {
    grid-template-columns: 1fr;
  }

  .page-heading {
    display: grid;
  }

  .batch-upload,
  .batch-metrics {
    grid-template-columns: 1fr;
  }

  .award-mode-option {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .award-rule > [data-award-input] {
    max-width: none;
  }

  .table-wrap:not(.compact-table)::before {
    background: var(--blue-soft);
    border-bottom: 1px solid var(--line);
    color: var(--blue);
    content: "重点信息已汇总到每条记录";
    display: block;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 10px;
  }

  .table-wrap:not(.compact-table) {
    border: 0;
    overflow-x: visible;
  }

  .table-wrap:not(.compact-table) table {
    min-width: 0;
  }

  .table-wrap:not(.compact-table) thead {
    display: none;
  }

  .table-wrap:not(.compact-table) tbody {
    display: grid;
    gap: 12px;
  }

  .table-wrap:not(.compact-table) tr {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    display: block;
    overflow: hidden;
  }

  .table-wrap:not(.compact-table) td {
    align-items: start;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 8px;
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 10px 12px;
  }

  .table-wrap:not(.compact-table) td:last-child {
    border-bottom: 0;
  }

  .table-wrap:not(.compact-table) td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 12px;
    font-weight: 850;
  }

  .table-wrap:not(.compact-table) td[colspan] {
    display: block;
  }

  .table-wrap:not(.compact-table) td[colspan]::before {
    content: "";
    display: none;
  }

  .actions {
    align-items: stretch;
  }

  .actions .button,
  .actions button,
  .actions .inline-form {
    width: 100%;
  }
}

/* Task12 product UI redesign: shared visual system and responsive application shell. */
:root {
  color-scheme: light;
  --bg: #f5f8fb;
  --bg-elevated: #edf3f8;
  --panel: #ffffff;
  --panel-soft: #f7fafc;
  --panel-tint: #eef7fb;
  --text: #183149;
  --text-strong: #10263d;
  --muted: #5c7187;
  --muted-strong: #38546d;
  --line: #d8e2eb;
  --line-strong: #b8c8d7;
  --accent: #0b6eaa;
  --accent-strong: #075986;
  --accent-soft: #e8f5fb;
  --blue: #245fbd;
  --blue-soft: #eaf1ff;
  --danger: #b4232b;
  --danger-soft: #fff0f1;
  --success: #087a55;
  --success-soft: #e7f8f0;
  --warning: #9d6203;
  --warning-soft: #fff5df;
  --nav: #172538;
  --nav-soft: #20354d;
  --shadow: 0 2px 8px rgba(26, 52, 74, 0.1);
  --shadow-soft: 0 1px 3px rgba(26, 52, 74, 0.09);
  --radius: 8px;
  --radius-sm: 6px;
  --focus: 0 0 0 3px rgba(11, 110, 170, 0.22);
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  text-rendering: optimizeLegibility;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--accent-strong);
  font-weight: 750;
}

a:hover {
  color: #034a72;
}

a:focus-visible,
summary:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: var(--focus);
  outline: none;
}

.layout {
  background: var(--bg);
  min-height: 100dvh;
}

.topbar {
  background: var(--nav);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.brand {
  color: #f5f9fc;
}

.brand:hover {
  color: #ffffff;
}

.brand-mark {
  background: #dff2fb;
  border: 0;
  box-shadow: none;
  color: #0a4d73;
  font-size: 17px;
  height: 38px;
  width: 38px;
}

.brand-title {
  font-size: 16px;
  font-weight: 800;
}

.brand-subtitle {
  color: #a8c0d3;
  font-size: 11px;
  font-weight: 650;
}

.nav a,
.nav span,
.nav-menu summary {
  letter-spacing: 0;
}

.nav a {
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.nav a:hover,
.nav a.is-active,
.nav-menu summary:hover,
.nav-menu summary.is-active {
  background: rgba(125, 190, 228, 0.16);
  border-color: rgba(159, 211, 239, 0.22);
}

.nav a.is-active {
  box-shadow: inset 0 -2px 0 #8fd2f1;
}

.main {
  max-width: 1440px;
  padding: 28px 32px 44px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 24px;
}

.main > .panel + .panel {
  margin-top: 16px;
}

.auth-main {
  background: var(--bg-elevated);
}

.auth-panel {
  border-color: #cbd9e5;
  box-shadow: var(--shadow);
  max-width: 440px;
}

.auth-panel::before {
  display: none;
}

h1,
h2,
h3 {
  color: var(--text-strong);
  text-wrap: balance;
}

h1 {
  font-size: 27px;
  letter-spacing: 0;
  margin-bottom: 14px;
}

h2 {
  font-size: 19px;
  margin-bottom: 12px;
}

h3 {
  font-size: 15px;
}

.muted,
.field-hint,
.table-subtitle {
  color: var(--muted);
}

.page-heading {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  gap: 18px;
  margin-bottom: 20px;
  padding-bottom: 16px;
}

.page-heading h1 {
  margin-bottom: 5px;
}

.page-heading p {
  color: var(--muted);
  max-width: 72ch;
}

.metric-strip {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 20px;
  overflow: hidden;
}

.metric {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  min-width: 0;
  padding: 14px 16px;
}

.metric:last-child {
  border-right: 0;
}

.metric span {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
}

.metric strong {
  color: var(--text-strong);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

label {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 750;
  gap: 6px;
}

input,
select,
textarea {
  background: #ffffff;
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  min-height: 40px;
  padding: 9px 11px;
}

input::placeholder,
textarea::placeholder {
  color: #556f86;
  opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #8eabc2;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus);
}

input[type="file"] {
  background: var(--panel-soft);
  border-style: solid;
}

button,
.button {
  background: var(--accent);
  border-radius: var(--radius-sm);
  font-weight: 750;
  min-height: 40px;
  padding: 8px 13px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

button:hover,
.button:hover {
  background: var(--accent-strong);
  transform: none;
}

button:active,
.button:active {
  transform: translateY(1px);
}

button:disabled,
button[aria-disabled="true"],
.button[aria-disabled="true"] {
  background: #dce5ed;
  border-color: #dce5ed;
  color: #63788a;
  cursor: not-allowed;
}

button:focus-visible,
.button:focus-visible {
  box-shadow: var(--focus);
}

.button-secondary {
  background: #f0f5f8;
  border-color: #cad9e5;
  color: #16486a;
}

.button-secondary:hover {
  background: #e4eef5;
  border-color: #a9c0d1;
  color: #123f5d;
}

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

.button-danger:hover {
  background: #8e1620;
}

.button-small {
  min-height: 31px;
  padding: 5px 9px;
}

.toolbar {
  align-items: end;
  background: var(--panel-soft);
  border-color: var(--line);
  border-radius: var(--radius);
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  padding: 16px;
}

.toolbar > button,
.toolbar > .button {
  align-self: end;
}

.form-grid,
.stack {
  gap: 16px;
}

.form-section,
.award-rule,
.model-settings-block {
  background: var(--panel-soft);
  border-color: var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.award-rule {
  background: #ffffff;
}

.award-mode-option {
  background: #ffffff;
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
  min-height: 38px;
}

.award-mode-option:hover {
  border-color: #91b6d0;
}

.award-mode-option:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.config-summary {
  background: var(--panel-soft);
  border-color: var(--line);
  border-radius: var(--radius);
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.config-summary div {
  border-right: 1px solid var(--line);
  min-height: 88px;
  padding: 14px 16px;
}

.config-summary div:last-child {
  border-right: 0;
}

.table-wrap {
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

th,
td {
  border-bottom-color: var(--line);
  padding: 12px 14px;
}

th {
  background: #eef4f8;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 750;
}

td {
  background: #ffffff;
}

tr:hover td {
  background: #f5faff;
}

.table-title {
  color: var(--text-strong);
  font-weight: 780;
}

.badge {
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  min-height: 24px;
  padding: 5px 9px;
}

.alert {
  border-radius: var(--radius-sm);
  font-weight: 650;
}

.alert-error {
  border-color: #f0b7bc;
}

.alert-success {
  border-color: #a4dcc4;
}

.alert-warning {
  border-color: #ecd096;
}

.split {
  gap: 18px;
  grid-template-columns: minmax(0, 1.5fr) minmax(340px, 0.8fr);
}

.side-panel {
  gap: 18px;
}

.side-section {
  gap: 12px;
  padding-top: 18px;
}

.detail-grid {
  gap: 10px 20px;
}

.detail-grid dt {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 750;
}

.detail-grid dd {
  color: var(--text);
}

.dashboard-grid {
  gap: 16px;
  margin: 16px 0;
}

.task-queue,
.return-note-list,
.status-summary-grid {
  gap: 8px;
}

.task-item,
.return-note,
.status-summary,
.sync-preview,
.model-effective,
.submission-state {
  background: var(--panel-soft);
  border-color: var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.task-item:hover,
.return-note:hover {
  background: #eef7fb;
  border-color: #a9cfe4;
  color: var(--text-strong);
}

.task-icon {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.status-summary strong,
.submission-state strong {
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.empty-state {
  background: var(--panel-soft);
  border-color: #b7c9d8;
  border-radius: var(--radius-sm);
  color: var(--muted-strong);
}

.agent-callout {
  background: var(--panel-tint);
  border: 1px solid #b9d9eb;
  border-radius: var(--radius-sm);
  color: #25526f;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.agent-callout strong {
  color: #164a6d;
}

.model-profile-option,
.model-card {
  background: #ffffff;
  border-color: var(--line);
  border-radius: var(--radius);
}

.model-profile-option:hover,
.model-profile-option:has(input:checked) {
  border-color: #7fbbdd;
}

.model-profile-option:has(input:checked) {
  background: var(--accent-soft);
}

.progress-track {
  background: #d5e3ee;
  border-radius: 999px;
}

.progress-fill {
  background: var(--accent);
}

.progress-fill.is-failed {
  background: var(--danger);
}

.inline-warning {
  background: var(--warning-soft);
  border-radius: var(--radius-sm);
  color: var(--warning);
}

.history-summary {
  color: var(--text-strong);
}

@media (min-width: 1161px) {
  .topbar {
    align-items: stretch;
    bottom: 0;
    flex-direction: column;
    gap: 18px;
    justify-content: flex-start;
    left: 0;
    min-height: 100dvh;
    padding: 20px 14px;
    position: fixed;
    top: 0;
    width: 252px;
    z-index: 20;
  }

  .brand {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 8px;
  }

  .nav {
    align-items: stretch;
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 3px;
    justify-content: flex-start;
    overflow-y: auto;
    padding: 2px 0 6px;
  }

  .nav a,
  .nav-menu summary {
    align-items: center;
    display: flex;
    min-height: 38px;
    padding: 9px 10px;
    width: 100%;
  }

  .nav a.is-active {
    box-shadow: inset 3px 0 0 #8fd2f1;
  }

  .nav-menu {
    width: 100%;
  }

  .nav-menu summary::after {
    margin-left: auto;
  }

  .nav-menu-list {
    background: rgba(10, 26, 41, 0.38);
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: none;
    margin-top: 3px;
    min-width: 0;
    padding: 4px;
    position: static;
    width: 100%;
  }

  .nav-menu-list a {
    font-size: 12px;
    padding-left: 18px;
  }

  .nav-user {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.06);
    border-left: 0;
    border-radius: var(--radius-sm);
    margin: auto 0 0;
    padding: 11px 12px;
  }

  .nav .inline-form,
  .nav-logout {
    width: 100%;
  }

  .nav-logout {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.14);
    color: #f2f8fc;
  }

  .nav-logout:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
  }

  .main {
    margin-left: 252px;
    max-width: none;
    min-height: 100dvh;
    padding: 32px 40px 48px;
  }

  .main > * {
    margin-left: auto;
    margin-right: auto;
    max-width: 1420px;
  }
}

@media (max-width: 1160px) and (min-width: 961px) {
  .topbar {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    min-height: 64px;
    padding: 12px 22px;
  }

  .nav {
    flex: 1 1 640px;
    justify-content: flex-start;
  }

  .nav-user {
    align-items: flex-start;
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 960px) {
  .topbar {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 64px;
    padding: 12px 16px;
    position: sticky;
    top: 0;
  }

  .brand {
    min-width: 0;
  }

  .brand-title {
    white-space: normal;
  }

  .nav-toggle {
    align-self: center;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    display: inline-flex;
    min-height: 36px;
    padding: 6px 10px;
  }

  .nav {
    display: none;
    gap: 4px;
    grid-column: 1 / -1;
    justify-content: stretch;
    padding-top: 4px;
  }

  .topbar.is-nav-open .nav {
    display: grid;
    grid-template-columns: 1fr;
  }

  .nav a,
  .nav-menu,
  .nav-menu summary,
  .nav .inline-form,
  .nav-logout {
    width: 100%;
  }

  .nav a,
  .nav-menu summary {
    min-height: 38px;
    padding: 9px 10px;
  }

  .nav-menu-list {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    margin-top: 5px;
    position: static;
    width: 100%;
  }

  .nav-user {
    align-items: flex-start;
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
  }

  .main {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .main {
    padding: 16px 12px 28px;
  }

  .panel {
    padding: 18px;
  }

  .page-heading {
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
  }

  h1 {
    font-size: 23px;
  }

  h2 {
    font-size: 17px;
  }

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

  .metric:nth-child(2n) {
    border-right: 0;
  }

  .metric:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .toolbar {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .toolbar > button,
  .toolbar > .button {
    width: 100%;
  }

  .config-summary {
    grid-template-columns: 1fr;
  }

  .config-summary div {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    min-height: 0;
  }

  .config-summary div:last-child {
    border-bottom: 0;
  }

  .table-wrap:not(.compact-table)::before {
    display: none;
  }

  .table-wrap:not(.compact-table) tbody {
    gap: 10px;
  }

  .table-wrap:not(.compact-table) tr {
    border-color: var(--line);
    border-radius: var(--radius-sm);
    box-shadow: none;
  }

  .table-wrap:not(.compact-table) td {
    border-bottom-color: var(--line);
    gap: 10px;
    grid-template-columns: 88px minmax(0, 1fr);
    padding: 10px 12px;
  }

  .actions {
    gap: 8px;
  }

  .actions .button,
  .actions button,
  .actions .inline-form {
    width: 100%;
  }

  .split,
  .dashboard-grid {
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Structural layouts for the student, review, and evaluation workspaces. */
.student-workspace,
.review-workspace,
.evaluation-workspace {
  display: grid;
  gap: 22px;
}

.workspace-head,
.review-workspace-head,
.evaluation-workspace-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding-bottom: 17px;
}

.workspace-head h1,
.review-workspace-head h1,
.evaluation-workspace-head h1 {
  margin: 0 0 5px;
}

.workspace-head p,
.review-workspace-head p,
.evaluation-workspace-head p,
.section-intro p,
.review-register-head p {
  color: var(--muted);
  margin: 0;
  max-width: 68ch;
}

.workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.student-overview {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.overview-cell {
  border-right: 1px solid var(--line);
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 16px 18px;
}

.overview-cell:last-child {
  border-right: 0;
}

.overview-cell span,
.participation-item span {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 750;
}

.overview-cell strong,
.participation-item strong {
  color: var(--text-strong);
  font-size: 27px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.overview-cell small,
.participation-item small {
  color: var(--muted);
  font-size: 11px;
}

.student-workspace-grid {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
}

.student-task-board,
.student-identity,
.review-filter-panel,
.review-register,
.evaluation-register,
.evaluation-create,
.student-participation {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
}

.student-task-board,
.student-identity,
.evaluation-create {
  padding: 20px;
}

.section-intro {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.section-intro h2,
.review-register-head h2 {
  font-size: 17px;
  margin: 0 0 5px;
}

.student-task-list {
  border-top: 1px solid var(--line);
  display: grid;
  margin-top: 18px;
}

.student-task {
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  display: grid;
  gap: 13px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  min-height: 68px;
  padding: 12px 4px;
}

.student-task:last-child {
  border-bottom: 0;
}

.task-arrow:hover,
.task-arrow:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.task-index {
  align-items: center;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  transition: background 160ms ease, color 160ms ease;
  width: 30px;
}

.student-task strong,
.student-task small {
  display: block;
}

.student-task strong {
  color: var(--text-strong);
  font-size: 14px;
}

.student-task small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.task-arrow {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.student-identity {
  background: var(--panel-soft);
}

.identity-list {
  border-top: 1px solid var(--line);
  display: grid;
  margin: 18px 0 0;
}

.identity-list div {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 76px minmax(0, 1fr);
  padding: 10px 0;
}

.identity-list div:last-child {
  border-bottom: 0;
}

.identity-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.identity-list dd {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  overflow-wrap: anywhere;
}

.student-participation {
  background: #f1f7fb;
  border-color: #c4dbe9;
  padding: 20px;
}

.participation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.participation-item {
  border-right: 1px solid #c4dbe9;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 0 18px;
}

.participation-item:first-child {
  padding-left: 0;
}

.participation-item:last-child {
  border-right: 0;
}

.return-register {
  border-top: 1px solid #c4dbe9;
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
}

.return-register h3 {
  font-size: 13px;
  margin: 0 0 2px;
}

.return-note {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #d4e4ee;
  border-radius: var(--radius-sm);
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}

.review-filter-panel {
  background: var(--panel-soft);
  padding: 18px 20px;
}

.review-filter-intro {
  margin-bottom: 15px;
}

.review-toolbar {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.review-register {
  overflow: hidden;
}

.review-register-head {
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 18px 20px 15px;
}

.review-register .table-wrap,
.evaluation-register .table-wrap {
  border: 0;
  border-radius: 0;
}

.evaluation-workspace-grid {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
}

.evaluation-register {
  overflow: hidden;
}

.evaluation-register > .section-intro {
  border-bottom: 1px solid var(--line);
  padding: 19px 20px 15px;
}

.evaluation-create {
  background: #f1f7fb;
  border-color: #c4dbe9;
  position: sticky;
  top: 24px;
}

.evaluation-create .section-intro {
  border-bottom: 1px solid #c4dbe9;
  margin-bottom: 17px;
  padding-bottom: 14px;
}

.evaluation-create .award-rule-set {
  gap: 10px;
}

.evaluation-create .award-rule {
  background: rgba(255, 255, 255, 0.76);
}

@media (max-width: 980px) {
  .student-workspace-grid,
  .evaluation-workspace-grid {
    grid-template-columns: 1fr;
  }

  .evaluation-create {
    position: static;
  }
}

@media (max-width: 760px) {
  .student-workspace,
  .review-workspace,
  .evaluation-workspace {
    gap: 16px;
  }

  .workspace-head,
  .review-workspace-head,
  .evaluation-workspace-head,
  .section-intro,
  .review-register-head {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .workspace-actions .button {
    width: 100%;
  }

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

  .overview-cell:nth-child(2n) {
    border-right: 0;
  }

  .overview-cell:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .student-task-board,
  .student-identity,
  .student-participation,
  .review-filter-panel,
  .evaluation-create {
    padding: 16px;
  }

  .student-task {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .task-arrow {
    grid-column: 2;
  }

  .participation-grid {
    grid-template-columns: 1fr;
    margin-top: 16px;
  }

  .participation-item,
  .participation-item:first-child {
    border-bottom: 1px solid #c4dbe9;
    border-right: 0;
    padding: 12px 0;
  }

  .participation-item:last-child {
    border-bottom: 0;
  }

  .review-register-head,
  .evaluation-register > .section-intro {
    padding: 16px;
  }

  .review-register .table-wrap,
  .evaluation-register .table-wrap {
    border: 0;
  }
}

/* 2026 reference UI: shared application, public, and auth surfaces. */
:root {
  --ui-bg: #f3f7fb;
  --ui-panel: #ffffff;
  --ui-line: #d7e4ef;
  --ui-text: #102f49;
  --ui-muted: #68819a;
  --ui-blue: #2088c5;
  --ui-blue-dark: #0870ae;
  --ui-blue-soft: #eaf7ff;
  --ui-navy: #07334d;
  --ui-navy-deep: #05293f;
  --ui-success: #129c71;
  --ui-success-soft: #e8f8f1;
  --ui-warning: #c8830d;
  --ui-warning-soft: #fff5de;
  --ui-danger: #dc5a55;
  --ui-danger-soft: #fff0ee;
}

body {
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}

body a { color: var(--ui-blue-dark); }
body a:hover { color: var(--ui-blue); }

.layout { min-height: 100vh; }

.app-layout {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  background: var(--ui-bg);
}

.app-sidebar {
  background: var(--ui-navy);
  color: #d8ebf7;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 20px 14px 14px;
  position: sticky;
  top: 0;
}

.sidebar-brand {
  color: #ffffff;
  margin: 0 2px 32px;
  min-width: 0;
}

.brand-mark {
  background: var(--ui-blue);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: #fff;
  flex: 0 0 42px;
  height: 42px;
  width: 42px;
}

.brand-title { font-size: 17px; letter-spacing: 0; }
.brand-subtitle { color: #a9cae0; font-size: 11px; }

.sidebar-nav {
  align-items: stretch;
  display: grid;
  gap: 4px;
  justify-content: stretch;
}

.sidebar-nav .nav-section-label {
  color: #91b7cf;
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin: 4px 10px 8px;
}

.sidebar-nav a {
  align-items: center;
  border: 0;
  border-radius: 6px;
  color: #d5e8f4;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  min-height: 42px;
  padding: 10px 14px;
}

.sidebar-nav a::before {
  background: #95cce7;
  border-radius: 4px;
  content: "";
  height: 14px;
  margin-right: 15px;
  opacity: .85;
  width: 14px;
}

.sidebar-nav a:hover,
.sidebar-nav a.is-active {
  background: #1e607f;
  border: 0;
  box-shadow: none;
  color: #fff;
}

.sidebar-nav a.is-active::before { background: #65cef5; }

.sidebar-account {
  border: 1px solid rgba(165, 217, 242, .25);
  border-radius: 7px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  margin-top: auto;
  padding: 14px;
}

.account-avatar {
  align-items: center;
  background: #53b8e5;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 15px;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.account-copy { min-width: 0; }
.account-copy strong, .account-copy small { display: block; }
.account-copy strong { color: #fff; font-size: 14px; }
.account-copy small { color: #a9cae0; font-size: 10px; margin-top: 2px; }
.app-version { color: #8db8d0; font-size: 10px; grid-column: 1 / -1; }
.account-password, .sidebar-account form { grid-column: 1 / -1; }
.account-password { color: #8de0fc; font-size: 12px; font-weight: 700; }
.sidebar-logout { background: transparent; border: 0; color: #d5e8f4; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 0; }

.app-stage { min-width: 0; }
.app-mobilebar { display: none; }

.main {
  margin: 0 auto;
  max-width: 1320px;
  padding: 38px 40px 52px;
}

.workspace-page,
.student-workspace,
.review-workspace,
.evaluation-workspace { max-width: 1120px; }

.workspace-head,
.page-heading,
.review-workspace-head,
.evaluation-workspace-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--ui-line);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin: 0 0 26px;
  padding: 0 0 18px;
}

.workspace-head h1,
.page-heading h1,
.review-workspace-head h1,
.evaluation-workspace-head h1 {
  color: var(--ui-text);
  font-size: 30px;
  line-height: 1.2;
  margin: 0;
}

.workspace-head p,
.page-heading p,
.review-workspace-head p,
.evaluation-workspace-head p { color: var(--ui-muted); font-size: 14px; margin: 7px 0 0; }

.panel,
.student-task-board,
.student-identity,
.student-participation,
.review-filter-panel,
.evaluation-create {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  box-shadow: none;
}

.panel { padding: 26px; }
.main > .panel + .panel { margin-top: 20px; }

.button,
button,
input[type="submit"] {
  background: var(--ui-blue);
  border: 1px solid var(--ui-blue);
  border-radius: 7px;
  box-shadow: none;
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  min-height: 40px;
  padding: 8px 18px;
}

.button:hover,
button:hover,
input[type="submit"]:hover { background: var(--ui-blue-dark); border-color: var(--ui-blue-dark); color: #fff; }
.button-secondary { background: #fff; border-color: #9fcfee; color: #1277b3; }
.button-secondary:hover { background: var(--ui-blue-soft); border-color: var(--ui-blue); color: var(--ui-blue-dark); }
.button-danger { background: #fff3f2; border-color: #f1b6b1; color: var(--ui-danger); }
.button-danger:hover { background: var(--ui-danger); border-color: var(--ui-danger); color: #fff; }
.button-small { min-height: 34px; padding: 5px 11px; }
form[aria-busy="true"] button[type="submit"] { cursor: progress; opacity: .78; }

label { color: #5d7891; font-size: 13px; font-weight: 700; }
input, select, textarea {
  background: #fff;
  border: 1px solid #cfdfeb;
  border-radius: 7px;
  color: var(--ui-text);
  font: inherit;
  margin-top: 6px;
  min-height: 40px;
}

input:focus, select:focus, textarea:focus { border-color: var(--ui-blue); box-shadow: 0 0 0 3px rgba(32, 136, 197, .16); }
.field-hint, .muted { color: var(--ui-muted); }

.alert { border-radius: 7px; box-shadow: none; }
.alert-success { background: var(--ui-success-soft); border-color: #b5ead8; color: #087657; }
.alert-warning { background: var(--ui-warning-soft); border-color: #f4d38d; color: #94610b; }
.alert-error { background: var(--ui-danger-soft); border-color: #f3c3bf; color: #b3413d; }

.metric-grid,
.metric-strip,
.student-overview { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card,
.metric-strip .metric,
.student-overview .overview-cell {
  background: #fff;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  min-height: 100px;
  padding: 18px;
}
.metric-card span,
.metric-strip .metric span,
.student-overview .overview-cell span { color: #66839b; font-size: 13px; font-weight: 700; }
.metric-card strong,
.metric-strip .metric strong,
.student-overview .overview-cell strong { color: var(--ui-text); display: block; font-size: 26px; line-height: 1.2; margin-top: 7px; }
.metric-card small,
.metric-strip .metric small,
.student-overview .overview-cell small { color: #88a0b4; display: block; font-size: 11px; margin-top: 4px; }
.metric-danger strong { color: var(--ui-danger); }
.metric-warning strong { color: var(--ui-warning); font-size: 20px; }

.section-intro { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 17px; }
.section-intro h2 { color: var(--ui-text); font-size: 19px; margin: 0; }
.section-intro p { color: var(--ui-muted); font-size: 13px; margin: 5px 0 0; }
.section-actions, .actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }

.badge { border: 0; border-radius: 999px; font-size: 12px; font-weight: 800; padding: 5px 13px; }
.badge-info { background: #e8f5fd; color: #1481bd; }
.badge-success, .badge-status-reviewed, .badge-status-published { background: var(--ui-success-soft); color: var(--ui-success); }
.badge-danger { background: var(--ui-danger-soft); color: var(--ui-danger); }
.badge-status-draft, .badge-status-generated { background: #eaf5fd; color: #177eb9; }
.badge-status-stale, .badge-status-archived { background: var(--ui-warning-soft); color: var(--ui-warning); }

.toolbar { background: #fff; border: 1px solid var(--ui-line); border-radius: 8px; display: flex; gap: 12px; margin-bottom: 20px; padding: 15px; }
.toolbar label { flex: 1 1 160px; }
.toolbar input, .toolbar select { width: 100%; }

.table-wrap { border: 0; border-radius: 0; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
thead { background: #f5f9fc; }
th { color: #668099; font-size: 12px; font-weight: 800; padding: 12px 10px; text-align: left; }
td { border-bottom: 1px solid #e6eef4; color: #36556c; font-size: 13px; padding: 13px 10px; vertical-align: middle; }
td strong { color: var(--ui-text); }
td small { color: #89a0b3; display: block; font-size: 11px; margin-top: 3px; }
tbody tr:hover { background: #f4fbff; }

.cycle-banner {
  align-items: center;
  background: var(--ui-blue);
  border-radius: 8px;
  color: #fff;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 19px;
  padding: 18px 28px;
}
.cycle-banner .eyebrow { color: #cceeff; font-size: 12px; font-weight: 700; }
.cycle-banner h2 { color: #fff; font-size: 22px; margin: 4px 0; }
.cycle-banner p { color: #d6effc; font-size: 12px; margin: 0; }
.cycle-banner .badge { background: #fff2cb; color: #ad6b00; }
.cycle-banner-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.cycle-banner-actions .button-secondary { border-color: #d1e9f8; }
.evaluation-metrics { margin-bottom: 19px; }
.cycle-rule-caption { color: var(--ui-muted); font-size: 12px; margin: -7px 0 19px; }
.evaluation-register { padding: 0; }
.evaluation-register > .section-intro { padding: 22px 26px 0; }
.evaluation-register .table-wrap { padding: 0 16px 8px; }
.evaluation-register .is-adjusted { background: #f1fbff; }
.adjustment-note { color: #a26510; font-size: 11px; line-height: 1.5; margin: 0 0 7px; }
.adjust-form { align-items: center; display: flex; gap: 6px; min-width: 260px; }
.adjust-form input, .adjust-form select { margin: 0; min-height: 34px; padding: 4px 7px; }
.adjust-form input { min-width: 100px; width: 100%; }
.award-settings { border-top: 1px solid var(--ui-line); margin-top: 8px; padding: 16px 26px 26px; }
.award-settings summary { color: var(--ui-blue-dark); cursor: pointer; font-weight: 800; }
.award-config-form { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.award-config-form > button { grid-column: 1 / -1; justify-self: start; }
.award-rule { border: 1px solid var(--ui-line); border-radius: 7px; margin: 0; padding: 12px; }
.award-rule legend { color: var(--ui-text); font-size: 14px; font-weight: 800; }
.award-rule label { display: block; }
.award-mode-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.award-mode-options label { align-items: center; display: inline-flex; gap: 4px; }
.award-mode-options input { margin: 0; min-height: auto; }
.award-rule input[type="number"] { margin-top: 4px; width: 100%; }
.rule-summary-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 28px; }
.rule-summary-grid article { background: #f4fbff; border: 1px solid #cce8f8; border-radius: 7px; padding: 16px; }
.rule-summary-grid span { color: var(--ui-muted); display: block; font-size: 13px; }
.rule-summary-grid strong { color: var(--ui-text); display: block; font-size: 16px; margin-top: 6px; }

.student-workspace-grid { gap: 20px; grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr); }
.student-task-board, .student-identity, .student-participation { padding: 25px; }
.student-task { border-bottom-color: #e4edf4; }
.task-index { background: var(--ui-blue-soft); color: var(--ui-blue-dark); }
.student-participation { background: #eaf8ff; border-color: #bde3f6; }
.participation-item { border-color: #bfe0f0; }

.parse-workbench { gap: 18px; }
.batch-upload, .batch-current { background: #fff; border-color: var(--ui-line); box-shadow: none; }
.batch-upload { border-style: dashed; }
.progress-fill { background: var(--ui-blue); }

.public-layout { background: #f4f8fc; }
.public-header { align-items: center; background: #fff; border-bottom: 1px solid #dce8f1; display: flex; justify-content: space-between; min-height: 74px; padding: 12px max(32px, calc((100vw - 1350px) / 2)); }
.public-brand { color: var(--ui-text); min-width: 0; }
.public-brand .brand-subtitle { color: var(--ui-muted); }
.public-nav { align-items: center; display: flex; gap: 26px; }
.public-nav a { color: #38566f; font-size: 14px; font-weight: 750; padding: 8px 0; }
.public-nav a.is-active { color: var(--ui-blue-dark); }
.public-nav a:last-child { border: 1px solid #9dcced; border-radius: 7px; color: var(--ui-blue-dark); padding: 9px 18px; }
.public-main { margin: 0 auto; max-width: 1220px; padding: 0 26px 48px; }
.public-hero { background: var(--ui-blue); color: #fff; margin: 0 calc(610px - 50vw) 0; padding: 34px max(26px, calc((100vw - 1180px) / 2)); }
.public-hero span, .public-hero p, .public-hero small { color: #d7f0ff; display: block; }
.public-hero h1 { color: #fff; font-size: 28px; margin: 8px 0; }
.public-hero p { margin: 0 0 14px; }
.result-hero { align-items: center; display: flex; justify-content: space-between; min-height: 178px; }
.public-directory, .public-results-panel { margin-top: -16px; position: relative; }
.public-directory { margin: 24px 0; }
.public-results-panel { margin-top: -12px; }
.public-result-table td:first-child { font-weight: 800; }

.knowledge-hero { background: var(--ui-navy); color: #fff; margin: 0 calc(610px - 50vw); padding: 35px max(26px, calc((100vw - 1180px) / 2)) 28px; text-align: center; }
.knowledge-hero span, .knowledge-hero p { color: #b3d5e7; }
.knowledge-hero h1 { color: #fff; font-size: 28px; margin: 8px 0; }
.knowledge-hero p { margin: 0 0 20px; }
.knowledge-hero-search { align-items: center; display: flex; gap: 10px; margin: 0 auto; max-width: 660px; }
.knowledge-hero-search input { background: #fff; margin: 0; width: 100%; }
.knowledge-layout { display: grid; gap: 18px; grid-template-columns: 300px minmax(0, 1fr); margin-top: 28px; }
.knowledge-filter h2 { margin: 0; }
.knowledge-filter > p { color: var(--ui-muted); font-size: 13px; }
.knowledge-filter form { display: grid; gap: 13px; }
.knowledge-filter label { display: block; }
.knowledge-filter input, .knowledge-filter select { width: 100%; }
.knowledge-content { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.6fr) minmax(240px, .8fr); }
.knowledge-list { display: grid; gap: 10px; }
.knowledge-entry { background: #fff; border: 1px solid var(--ui-line); border-radius: 7px; color: var(--ui-text); display: grid; gap: 7px; padding: 16px; }
.knowledge-entry:hover, .knowledge-entry.is-selected { background: #eefaff; border-color: #7bc9ee; color: var(--ui-text); }
.knowledge-entry strong { font-size: 14px; }
.knowledge-entry small { color: var(--ui-muted); }
.knowledge-entry em { color: var(--ui-blue-dark); font-size: 12px; font-style: normal; }
.knowledge-detail { border-left: 1px solid var(--ui-line); padding-left: 20px; }
.knowledge-detail h3 { color: var(--ui-text); font-size: 17px; line-height: 1.5; }
.knowledge-detail dl { display: grid; gap: 11px; }
.knowledge-detail dl div { border-bottom: 1px solid #e9eff4; padding-bottom: 9px; }
.knowledge-detail dt { color: var(--ui-muted); font-size: 12px; }
.knowledge-detail dd { color: var(--ui-text); font-size: 13px; font-weight: 700; margin: 3px 0 0; }
.knowledge-detail p { color: #557087; font-size: 13px; line-height: 1.75; }

.auth-layout { background: #f5f8fc; }
.auth-main { align-items: stretch; display: block; min-height: 100vh; padding: 0; }
.login-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(480px, 1fr); min-height: 100vh; }
.login-intro { background: var(--ui-navy); color: #fff; display: flex; flex-direction: column; padding: 52px clamp(40px, 8vw, 112px); }
.login-brand { color: #fff; min-width: 0; }
.login-message { margin: auto 0; max-width: 460px; }
.login-message h1 { color: #fff; font-size: 42px; line-height: 1.35; margin: 0; }
.login-message em { color: #5bd2f7; font-style: normal; }
.login-message p { color: #b9d7e8; font-size: 15px; line-height: 1.9; margin: 16px 0 0; }
.login-features { display: grid; gap: 12px; max-width: 500px; }
.login-features span { background: rgba(255,255,255,.11); border-radius: 7px; color: #e3f4fc; font-size: 13px; font-weight: 700; padding: 15px 18px; }
.login-panel { align-self: center; border: 0; margin: auto; max-width: 440px; padding: 0; width: min(440px, calc(100% - 56px)); }
.auth-heading span { color: var(--ui-blue-dark); font-size: 12px; font-weight: 800; }
.auth-heading h1 { color: var(--ui-text); font-size: 28px; margin: 65px 0 4px; }
.auth-heading p { color: var(--ui-muted); font-size: 13px; margin: 0 0 26px; }
.login-panel .form-grid { gap: 16px; }
.login-panel .form-grid button { margin-top: 8px; width: 100%; }
.auth-note { color: #8ca1b3; font-size: 11px; margin-top: 20px; text-align: center; }
.auth-topbar { align-items: center; background: var(--ui-navy); color: #d4e7f3; display: flex; justify-content: space-between; min-height: 76px; padding: 12px 56px; }
.auth-topbar .brand { color: #fff; min-width: 0; }
.auth-topbar > span { font-size: 12px; font-weight: 700; }
.password-main { align-items: flex-start; display: flex; justify-content: center; min-height: calc(100vh - 76px); padding: 72px 24px; }
.password-card { max-width: 660px; width: 100%; }
.password-card .auth-heading h1 { margin-top: 8px; }
.password-form { gap: 16px; }
.password-form button { margin-top: 12px; width: 100%; }

.confirm-dialog { border: 0; border-radius: 8px; box-shadow: 0 20px 48px rgba(5, 41, 63, .28); color: var(--ui-text); max-width: min(460px, calc(100vw - 32px)); padding: 0; width: 100%; }
.confirm-dialog::backdrop { background: rgba(5, 41, 63, .46); }
.confirm-dialog-form { display: grid; gap: 14px; padding: 24px; }
.confirm-dialog h2 { color: var(--ui-text); font-size: 20px; margin: 0; }
.confirm-dialog p { color: var(--ui-muted); font-size: 14px; line-height: 1.65; margin: 0; }
.confirm-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 6px; }

@media (max-width: 980px) {
  .app-layout { display: block; }
  .app-sidebar { box-shadow: 10px 0 28px rgba(5, 41, 63, .26); height: 100vh; left: 0; overflow-y: auto; position: fixed; transform: translateX(-100%); transition: transform .2s ease; visibility: hidden; width: 252px; z-index: 50; }
  .app-layout.is-nav-open .app-sidebar { transform: translateX(0); visibility: visible; }
  .app-mobilebar { align-items: center; background: var(--ui-navy); color: #fff; display: flex; font-size: 14px; font-weight: 800; gap: 14px; min-height: 58px; padding: 8px 18px; position: sticky; top: 0; z-index: 40; }
  .app-mobilebar .nav-toggle { background: transparent; border: 1px solid rgba(255,255,255,.35); min-height: 34px; padding: 4px 10px; }
  .main { padding: 28px 24px 42px; }
  .metric-grid, .metric-strip, .student-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .award-config-form, .rule-summary-grid { grid-template-columns: 1fr; }
  .knowledge-layout { grid-template-columns: 1fr; }
  .knowledge-filter form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-filter form button, .knowledge-filter form a { align-self: end; }
}

@media (max-width: 700px) {
  .main { padding: 22px 14px 34px; }
  .workspace-head, .page-heading, .review-workspace-head, .evaluation-workspace-head, .cycle-banner, .section-intro, .result-hero { align-items: stretch; flex-direction: column; }
  .workspace-head h1, .page-heading h1, .review-workspace-head h1, .evaluation-workspace-head h1 { font-size: 25px; }
  .panel { padding: 18px; }
  .metric-grid, .metric-strip, .student-overview { grid-template-columns: 1fr; }
  .metric-card, .metric-strip .metric, .student-overview .overview-cell { min-height: 82px; }
  .cycle-banner { margin-left: 0; margin-right: 0; padding: 18px; }
  .cycle-banner-actions, .section-actions { align-items: stretch; flex-direction: column; }
  .cycle-banner-actions form, .cycle-banner-actions .button, .section-actions .button { width: 100%; }
  .cycle-banner-actions button, .section-actions .button { width: 100%; }
  .evaluation-register > .section-intro { padding: 18px 18px 0; }
  .evaluation-register .table-wrap { padding: 0; }
  .adjust-form { align-items: stretch; flex-direction: column; min-width: 0; }
  .public-header { padding: 10px 16px; }
  .public-brand .brand-title { font-size: 14px; }
  .public-brand .brand-subtitle { display: none; }
  .public-nav { gap: 13px; }
  .public-nav a { font-size: 12px; }
  .public-nav a:first-child { display: none; }
  .public-nav a:last-child { padding: 6px 9px; }
  .public-main { padding: 0 14px 32px; }
  .public-hero, .knowledge-hero { margin-left: -14px; margin-right: -14px; padding: 28px 20px; }
  .public-hero h1, .knowledge-hero h1 { font-size: 24px; }
  .public-results-panel { margin-top: 0; }
  .knowledge-hero-search { align-items: stretch; flex-direction: column; }
  .knowledge-filter form { grid-template-columns: 1fr; }
  .knowledge-content { grid-template-columns: 1fr; }
  .knowledge-detail { border-left: 0; border-top: 1px solid var(--ui-line); padding: 18px 0 0; }
  .login-shell { display: block; }
  .login-intro { min-height: 330px; padding: 28px 24px; }
  .login-message { margin: auto 0 20px; }
  .login-message h1 { font-size: 30px; }
  .login-features { display: none; }
  .login-panel { margin: 0; max-width: none; padding: 34px 24px 42px; width: 100%; }
  .auth-heading h1 { margin-top: 36px; }
  .auth-topbar { padding: 12px 18px; }
  .auth-topbar > span { display: none; }
  .password-main { padding: 36px 16px; }
  .confirm-dialog-form { padding: 20px; }
  .confirm-dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .confirm-dialog-actions button { width: 100%; }
}

/* Prototype-only transient feedback. Loaded markup is inert unless prototype-demo.js is present. */
.toast { background: #103d59; border-radius: 8px; bottom: 24px; box-shadow: 0 14px 32px rgba(4, 36, 58, .22); color: #fff; font-size: .8125rem; font-weight: 700; left: 50%; max-width: min(420px, calc(100vw - 32px)); opacity: 0; padding: 12px 18px; pointer-events: none; position: fixed; text-align: center; transform: translate(-50%, 14px); transition: opacity .18s ease, transform .18s ease; z-index: 30; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.prototype-link { background: transparent; border: 0; color: var(--ref-blue-strong, #0979b9); cursor: pointer; font: inherit; font-weight: 700; min-height: 0; padding: 0; }
.prototype-link:hover { color: var(--ref-blue, #208bca); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar { transition: none; }
}

/* Prototype design system: consolidated from reference-ui.css */

:root {
  --ref-canvas: #f3f7fb;
  --ref-surface: #ffffff;
  --ref-line: #d8e5ef;
  --ref-line-soft: #eaf0f5;
  --ref-ink: #0e304b;
  --ref-muted: #68829b;
  --ref-blue: #208bca;
  --ref-blue-strong: #0979b9;
  --ref-blue-pale: #eaf7ff;
  --ref-navy: #07334e;
  --ref-navy-2: #0a4363;
  --ref-green: #149e72;
  --ref-green-pale: #e6f8f0;
  --ref-amber: #c47d0a;
  --ref-amber-pale: #fff5dc;
  --ref-red: #dc5954;
  --ref-red-pale: #fff0ef;
  --ref-radius: 8px;
  --ref-space-1: 0.25rem;
  --ref-space-2: 0.5rem;
  --ref-space-3: 0.75rem;
  --ref-space-4: 1rem;
  --ref-space-5: 1.5rem;
  --ref-space-6: 2rem;
}

body {
  background: var(--ref-canvas);
  color: var(--ref-ink);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
  font-kerning: normal;
}

button,
.button,
input,
select,
textarea { font-family: inherit; }

button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible { outline: 3px solid rgba(32, 139, 202, .35); outline-offset: 2px; }

.app-layout { grid-template-columns: 252px minmax(0, 1fr); }
.app-sidebar { background: var(--ref-navy); height: 100vh; overflow-x: hidden; overflow-y: auto; padding: 20px 14px 14px; }
.sidebar-brand { margin: 0 2px 30px; padding: 0; }
.sidebar-nav { flex: 0 0 auto; gap: 5px; overflow: visible; padding: 0; }
.sidebar-nav .nav-section-label { margin: 7px 11px 8px; }
.sidebar-nav a { border-radius: 7px; min-height: 43px; padding: 10px 14px; }
.sidebar-nav a::before { height: 13px; margin-right: 15px; width: 13px; }
.sidebar-nav a.is-active { background: #1c5e7e; }
.sidebar-account { min-height: 100px; }
.sidebar-account .account-password { display: none; }
.main { margin: 0; max-width: none; padding: 40px clamp(40px, 7.5vw, 108px) 52px 40px; }
.sidebar-nav .nav-management-label { border-top: 1px solid rgba(148, 199, 226, .2); margin-top: 12px; padding-top: 20px; }

.workspace-page,
.student-workspace,
.review-workspace,
.evaluation-workspace,
.reference-page { max-width: none; }

.workspace-head,
.page-heading,
.review-workspace-head,
.evaluation-workspace-head {
  margin-bottom: 26px;
  padding-bottom: 18px;
}

.workspace-head h1,
.page-heading h1,
.review-workspace-head h1,
.evaluation-workspace-head h1 { font-size: 1.875rem; font-weight: 800; }

.workspace-head p,
.page-heading p,
.review-workspace-head p,
.evaluation-workspace-head p { font-size: .875rem; }

.panel,
.student-task-board,
.student-identity,
.student-participation,
.review-filter-panel,
.evaluation-create,
.review-register,
.evaluation-register {
  border-color: var(--ref-line);
  border-radius: var(--ref-radius);
}

.panel { padding: 24px; }
.reference-page > .page-heading:first-child { margin-top: -2px; }

.button,
button,
input[type="submit"] {
  align-items: center;
  border-radius: 7px;
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  padding: 8px 18px;
}

.button.is-placeholder,
button[aria-disabled="true"] { cursor: default; pointer-events: none; }
.button.is-placeholder { opacity: 1; }

.metric-strip,
.student-overview,
.metric-grid { gap: 13px; }
.metric-strip { background: transparent; border: 0; border-radius: 0; margin-bottom: 0; overflow: visible; }
.metric-strip .metric,
.student-overview .overview-cell,
.metric-card { border-radius: 8px; min-height: 98px; padding: 17px; }
.metric-strip .metric strong,
.student-overview .overview-cell strong,
.metric-card strong { font-size: 1.6rem; }

.toolbar { align-items: end; background: var(--ref-surface); padding: 14px 16px; }
.toolbar label { min-width: 126px; }
.toolbar input,
.toolbar select { min-height: 40px; }
thead { background: #f4f8fb; }
th { color: #668199; font-size: .75rem; padding: 12px 11px; }
td { font-size: .8125rem; padding: 13px 11px; }
.table-title { color: var(--ref-ink); font-size: .8125rem; font-weight: 800; }
.table-subtitle { color: #8aa1b5; font-size: .6875rem; margin-top: 4px; }

/* Student overview, archive, detail, and application */
.reference-achievements,
.reference-users,
.reference-knowledge-sync,
.reference-model-settings,
.reference-audit,
.reference-student-results { background: transparent; border: 0; box-shadow: none; }
.reference-achievements,
.reference-users,
.reference-knowledge-sync,
.reference-model-settings,
.reference-audit { gap: 0; }
.reference-achievements { padding: 0; }
.reference-achievements > .page-heading { padding: 0 0 18px; }
.reference-achievements > .metric-strip { padding: 0; }
.reference-achievements > .toolbar { margin: 18px 0; }
.reference-achievements > .table-wrap { background: var(--ref-surface); border: 1px solid var(--ref-line); border-radius: var(--ref-radius); padding: 14px 24px 12px; }
.reference-achievements .metric:nth-child(1) strong { color: var(--ref-blue-strong); }
.reference-achievements .metric:nth-child(2) strong { color: var(--ref-amber); }
.reference-achievements .metric:nth-child(3) strong { color: var(--ref-green); }
.reference-achievements .metric:nth-child(4) strong { color: #7659d6; }
.reference-achievements .badge-stack { align-items: flex-start; }

.reference-achievement-detail { align-items: start; gap: 18px; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); }
.reference-achievement-detail > .panel:first-child { padding: 24px; }
.reference-achievement-detail > .panel:first-child > h1 { font-size: 1.45rem; margin: 0 0 8px; }
.reference-achievement-detail .detail-grid { column-gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.reference-achievement-detail .detail-grid dt { font-size: .7rem; }
.reference-achievement-detail .detail-grid dd { font-size: .8125rem; }
.reference-achievement-detail .side-panel { padding: 0; }
.reference-achievement-detail .side-section { border-bottom: 1px solid var(--ref-line-soft); padding: 20px 22px; }
.reference-achievement-detail .side-section:last-child { border-bottom: 0; }
.reference-achievement-detail .side-section h2 { font-size: 1rem; }
.reference-achievement-detail .flow-steps { margin: 16px 0; }

.reference-scholarship-apply { border: 0; box-shadow: none; padding: 0; }
.reference-scholarship-apply > .page-heading { border: 1px solid var(--ref-line); border-radius: 8px; margin: 0 0 16px; padding: 22px 24px; }
.reference-scholarship-apply > .detail-grid { background: var(--ref-blue); border: 0; border-radius: 8px; color: #fff; display: grid; grid-template-columns: 1fr 1fr 2fr; margin: 0; padding: 20px 24px; }
.reference-scholarship-apply > .detail-grid dt { color: #d4efff; }
.reference-scholarship-apply > .detail-grid dd { color: #fff; font-weight: 800; }
.reference-scholarship-apply .badge { background: #e7f8ef; color: var(--ref-green); }
.reference-scholarship-results { margin-top: 18px; }
.reference-scholarship-results .compact-heading { align-items: center; }
.submission-state { color: var(--ref-blue-strong); text-align: right; }
.submission-state strong { display: block; font-size: 1.5rem; }
.reference-scholarship-results tr:has(input:checked) { background: #eefaff; }

.reference-student-results { padding: 0; }
.reference-student-results > h1 { border-bottom: 1px solid var(--ref-line); font-size: 1.875rem; margin: 0; padding: 0 0 18px; }
.reference-student-results .table-wrap { margin-top: 18px; }
.reference-student-results tbody tr:first-child { background: #effaff; }

/* Batch material intake and history are two full-page modes. */
.batch-page { background: transparent; border: 0; box-shadow: none; padding: 0; }
.batch-page > .page-heading { margin-bottom: 8px; padding: 0 0 18px; }
.batch-page > .page-heading .actions .button:last-child { display: none; }
.batch-page .parse-workbench { padding: 0 0 22px; }
.batch-page .batch-upload { align-items: stretch; background: transparent; border: 0; display: grid; gap: 18px; grid-template-columns: minmax(0, 1.9fr) minmax(310px, 1fr); padding: 0; }
.batch-upload-panel,
.batch-settings-panel { background: #fff; border: 1px solid var(--ref-line); border-radius: 8px; padding: 18px 24px 14px; }
.batch-panel-heading h2,
.batch-current-heading h2 { color: var(--ref-ink); font-size: 1.1rem; margin: 0 0 4px; }
.batch-panel-heading p,
.batch-current-heading p { color: var(--ref-muted); font-size: .75rem; margin: 0; }
.batch-dropzone { align-items: center; background: #f2fbff; border: 1px dashed #61c5f3; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; height: 142px; justify-content: center; margin-top: 14px; overflow: hidden; position: relative; }
.batch-dropzone input { cursor: pointer; height: 100%; inset: 0; opacity: 0; position: absolute; width: 100%; }
.batch-upload-plus { align-items: center; background: #fff; border: 1px solid #9dd8f6; border-radius: 50%; color: var(--ref-blue); display: inline-flex; font-size: 2rem; font-weight: 300; height: 54px; justify-content: center; line-height: 1; margin-bottom: 8px; width: 54px; }
.batch-dropzone strong { color: var(--ref-ink); font-size: .875rem; }
.batch-dropzone small { color: #8198ad; font-size: .7rem; margin-top: 7px; }
.batch-settings-panel { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; }
.batch-settings-panel .batch-panel-heading,
.batch-settings-panel label { grid-column: 1 / -1; }
.batch-settings-panel label { color: var(--ref-muted); font-size: .75rem; }
.batch-settings-panel select { font-size: .8125rem; font-weight: 700; margin-top: 8px; min-height: 42px; width: 100%; }
.batch-model-readout { align-self: end; display: grid; gap: 8px; min-width: 0; }
.batch-model-readout > div { min-width: 0; }
.batch-model-readout span { color: var(--ref-muted); display: block; font-size: .75rem; margin-bottom: 5px; }
.batch-model-readout strong { background: #eee8ff; border-radius: 999px; color: #7553d8; display: block; font-size: .75rem; overflow: hidden; padding: 6px 12px; text-overflow: ellipsis; white-space: nowrap; }
.batch-settings-panel > button { align-self: end; min-width: 110px; }
.batch-page .batch-current { background: #fff; border: 1px solid var(--ref-line); border-radius: 8px; gap: 0; margin-top: 18px; padding: 16px 24px 12px; }
.batch-current-heading { margin-bottom: 10px; }
.batch-page .batch-metrics { display: none; }
.batch-page .overall-progress { background: linear-gradient(90deg, #147cad, #1e9bd1); border: 0; border-radius: 8px; color: #fff; display: grid; grid-template-columns: minmax(270px, 360px) minmax(0, 1fr); min-height: 62px; padding: 18px 20px; }
.batch-page .overall-progress .progress-label { grid-column: 1 / -1; grid-row: 1; }
.batch-page .overall-progress .progress-label span { color: #fff; display: flex; font-size: .8rem; gap: 4px; padding-top: 10px; position: relative; }
.batch-page .overall-progress .progress-label span small { display: block; font-size: .65rem; font-weight: 700; left: 0; position: absolute; top: -7px; }
.batch-page .overall-progress .progress-label > strong { font-size: 1rem; }
.batch-page .overall-progress > .progress-track { align-self: center; grid-column: 2; grid-row: 1; margin: 0 110px 0 36px; }
.batch-page .overall-progress .progress-fill { background: var(--ref-green); }
.batch-page .batch-task-list { display: block; }
.batch-page .batch-task-card { align-items: center; background: #fff; border: 0; border-bottom: 1px solid var(--ref-line-soft); border-radius: 0; display: grid; gap: 14px; grid-template-columns: 32px minmax(250px, 1.65fr) 120px minmax(150px, 1fr) 86px 105px; min-height: 58px; padding: 9px 10px; }
.batch-file-icon { align-items: center; background: #e8f7ef; border-radius: 7px; color: var(--ref-green); display: inline-flex; font-size: .8rem; font-weight: 800; height: 32px; justify-content: center; width: 32px; }
.batch-file-icon.is-failed { background: var(--ref-red-pale); color: var(--ref-red); }
.batch-task-main { min-width: 0; }
.batch-page .batch-task-head { display: block; }
.batch-page .batch-task-head strong { font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-task-description { display: block; font-size: .65rem; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-task-type,
.batch-task-status { justify-self: start; white-space: nowrap; }
.batch-row-progress .progress-track { height: 6px; margin: 0; }
.batch-task-actions { justify-content: flex-end; }
.batch-task-actions .button { min-width: 105px; }
.batch-page .batch-confirm-panel { margin-top: 18px; }
.batch-page .batch-history { margin: 18px 0 0; }
.batch-mode-history .parse-workbench { display: none; }
.batch-mode-history > .page-heading { margin-bottom: 8px; }
.batch-history-dashboard { display: grid; gap: 18px; }
.batch-history-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.batch-history-metrics .metric { box-sizing: border-box; height: 98px; margin-top: 16px; min-height: 98px; }
.batch-history-metrics .metric:nth-child(1) strong { color: var(--ref-blue-strong); }
.batch-history-metrics .metric:nth-child(2) strong { color: var(--ref-amber); }
.batch-history-metrics .metric:nth-child(3) strong { color: var(--ref-green); }
.batch-history-metrics .metric:nth-child(4) strong { color: var(--ref-red); }
.batch-history-toolbar { border: 1px solid var(--ref-line); border-radius: 8px; display: grid; gap: 16px; grid-template-columns: 1.5fr 1fr 1fr auto auto; margin-bottom: 0; padding: 10px 16px; }
.batch-history-toolbar label { min-width: 0; }
.batch-history-register { background: #fff; border: 1px solid var(--ref-line); border-radius: 8px; padding: 16px 24px 10px; }
.batch-register-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 12px; }
.batch-register-heading h2 { color: var(--ref-ink); font-size: 1.1rem; margin: 0 0 4px; }
.batch-register-heading p { color: var(--ref-muted); font-size: .72rem; margin: 0; }
.batch-history-table { display: grid; }
.batch-history-table-head,
.batch-history-card { align-items: center; display: grid; gap: 12px; grid-template-columns: 108px minmax(230px, 1.65fr) 138px 122px 120px 170px; }
.batch-history-table-head { background: #f4f8fb; border-radius: 6px; color: var(--ref-muted); font-size: .7rem; font-weight: 700; min-height: 38px; padding: 0 12px; }
.batch-history-card { background: #fff; border: 0; border-bottom: 1px solid var(--ref-line-soft); border-radius: 0; min-height: 70px; padding: 8px 12px; }
.batch-number { color: var(--ref-blue-strong); font-size: .72rem; font-weight: 800; }
.batch-history-summary,
.batch-history-progress { min-width: 0; }
.batch-history-summary strong,
.batch-history-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-history-summary strong { color: var(--ref-ink); font-size: .75rem; }
.batch-history-summary span { color: #8298aa; font-size: .65rem; margin-top: 4px; }
.batch-history-progress strong { color: #385d79; display: block; font-size: .7rem; }
.batch-history-progress .progress-track { height: 6px; margin-top: 7px; }
.batch-history-progress .progress-fill.is-complete { background: var(--ref-green); }
.batch-history-card > .badge { justify-self: start; }
.batch-history-card time { color: #5e7890; font-size: .68rem; }
.batch-history-actions { flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.batch-history-actions .button,
.batch-history-actions .button-danger { min-width: 0; }
.batch-more { background: #050505; border: 0; border-radius: 7px; color: #8da5b7; height: 40px; min-height: 40px; padding: 0; width: 43px; }
.batch-history-register .pagination { border-top: 0; justify-content: flex-end; padding: 8px 0 0; }
.batch-history-register .pagination > span { margin-right: auto; }

/* Review, people, knowledge, model, and audit workspaces. */
.reference-review-detail,
.reference-review-detail-findings { max-width: 1040px; }
.reference-review-detail { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0 !important; }
.reference-review-detail-findings { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0; }
.reference-review-detail .actions { justify-content: flex-end; }
.reference-review-detail h1 { font-size: 1.8rem; margin: 8px 0 18px; }
.reference-review-detail .detail-grid { grid-template-columns: 180px 1fr; }
.reference-review-detail-findings h2 { font-size: 1.1rem; }

.reference-review-screen { max-width: 1040px; }
.review-screen-title { align-items: center; display: flex; justify-content: space-between; margin: -8px 0 18px; }
.review-screen-title > div:first-child { min-width: 0; }
.review-screen-title span:not(.badge) { color: var(--ref-muted); font-size: .75rem; }
.review-screen-title h2 { color: var(--ref-ink); font-size: 1.35rem; margin: 7px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-screen-title p { color: var(--ref-muted); font-size: .75rem; margin: 0; }
.review-screen-title > div:last-child { align-items: center; display: flex; gap: 8px; }
.review-screen-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.review-material-panel h3, .review-risk-panel h3 { font-size: 1rem; margin: 22px 0 12px; }
.review-check-list { display: grid; gap: 10px; }
.review-check-list > div { align-items: center; color: #30566e; display: flex; font-size: .8rem; gap: 9px; }
.check-mark { align-items: center; background: var(--ref-green-pale); border-radius: 50%; color: var(--ref-green); display: inline-flex; font-weight: 900; height: 20px; justify-content: center; width: 20px; }
.review-detail-grid { grid-template-columns: 1fr 1.5fr; }
.review-risk-panel > h2 { font-size: 1.1rem; margin: 0; }
.review-risk-panel > p { color: var(--ref-muted); font-size: .75rem; }
.risk-summary { border-radius: 8px; display: grid; gap: 5px; margin: 18px 0; padding: 16px; }
.risk-summary strong { font-size: 1.2rem; }
.risk-summary span { font-size: .75rem; }
.risk-low { background: var(--ref-green-pale); color: var(--ref-green); }
.risk-medium { background: var(--ref-amber-pale); color: var(--ref-amber); }
.risk-high { background: var(--ref-red-pale); color: var(--ref-red); }
.review-finding-list { display: grid; gap: 9px; }
.review-finding-list article { border: 1px solid var(--ref-line); border-radius: 7px; display: grid; gap: 5px; padding: 10px; }
.review-finding-list article strong { color: var(--ref-ink); font-size: .75rem; }
.review-finding-list article small { color: var(--ref-muted); font-size: .6875rem; }
.review-risk-panel > .button { margin-top: 18px; width: 100%; }

.user-metrics { padding: 0; }
.reference-users > .toolbar { margin-top: 18px; }
.knowledge-sync-banner { align-items: center; background: #effbfa; border: 1px solid #bdeade; border-radius: 8px; display: flex; justify-content: space-between; margin: 18px 0; padding: 18px; }
.knowledge-sync-banner span, .knowledge-sync-banner strong, .knowledge-sync-banner small { display: block; }
.knowledge-sync-banner span, .knowledge-sync-banner small { color: var(--ref-muted); font-size: .75rem; }
.knowledge-sync-banner strong { color: var(--ref-ink); font-size: 1rem; margin: 4px 0; }

.reference-users { padding: 0; }
.reference-users > .page-heading { padding: 0 0 18px; }
.reference-users > .toolbar { margin: 18px 0; }
.reference-users > .table-wrap { padding: 0 24px 14px; }
.reference-users .identity-summary strong { color: var(--ref-ink); display: block; font-size: .75rem; }
.reference-users .identity-summary span { color: var(--ref-muted); font-size: .6875rem; }

.reference-knowledge-sync > .page-heading,
.reference-model-settings > .page-heading,
.reference-audit > .page-heading { margin-bottom: 18px; }
.reference-knowledge-sync .sync-preview { background: #effbfa; border: 1px solid #b9eadf; border-radius: 8px; padding: 17px; }
.reference-knowledge-sync .actions { justify-content: flex-end; margin: 14px 0; }
.reference-knowledge-sync .toolbar { margin: 16px 0; }
.reference-knowledge-sync { padding: 0; }
.reference-knowledge-sync.is-previewing > .toolbar,
.reference-knowledge-sync.is-previewing > .actions { display: none; }
.knowledge-sync-metrics { margin: 0 0 18px; }
.knowledge-sync-metrics .metric small { color: var(--ref-muted); display: block; font-size: .68rem; margin-top: 4px; }
.knowledge-sync-metrics .metric:nth-child(1) strong { color: var(--ref-green); }
.knowledge-sync-metrics .metric:nth-child(2) strong,
.knowledge-sync-metrics .metric:nth-child(3) strong { color: var(--ref-blue-strong); }
.knowledge-sync-metrics .metric:nth-child(4) strong { color: var(--ref-red); }

.reference-model-settings { padding: 0; }
.reference-model-settings > .page-heading,
.reference-model-settings > .alert,
.reference-model-settings > .model-effective,
.reference-model-settings > .model-settings-layout { margin-left: 0; margin-right: 0; }
.reference-model-settings > .page-heading { padding-top: 0; }
.reference-model-settings .model-effective { background: #effaff; border: 1px solid #b7def2; border-radius: 8px; }
.reference-model-settings .model-settings-block { border-color: var(--ref-line); border-radius: 8px; }
.reference-model-settings .model-profile-option { border-color: var(--ref-line); border-radius: 7px; }
.reference-model-settings .model-profile-option.is-selected { border-color: var(--ref-blue); background: var(--ref-blue-pale); }
.model-settings-layout { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(0, 2.05fr) minmax(260px, 1fr); padding: 20px 0 24px; }
.model-settings-form { min-width: 0; }
.model-settings-form .model-provider-interface { order: 1; }
.model-settings-form .model-profile-picker { order: 2; }
.model-settings-form > details:not(.model-profile-picker) { order: 3; }
.model-settings-form > section:not(.model-provider-interface) { order: 4; }
.model-settings-form > .actions { order: 5; }
.model-settings-form .model-settings-block:first-of-type { margin-top: 0; }
.model-task-status { background: var(--ref-surface); border: 1px solid var(--ref-line); border-radius: 8px; padding: 20px; }
.model-task-status h2 { color: var(--ref-ink); font-size: 1.05rem; margin: 0; }
.model-task-status p { color: var(--ref-muted); font-size: .75rem; margin: 5px 0 0; }
.model-task-status-head { align-items: start; display: flex; gap: 10px; justify-content: space-between; }
.model-task-metrics { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 18px 0; }
.model-task-metrics > div { background: #f7fbfe; border: 1px solid var(--ref-line); border-radius: 7px; padding: 13px; }
.model-task-metrics span, .model-task-metrics small { color: var(--ref-muted); display: block; font-size: .7rem; }
.model-task-metrics strong { color: var(--ref-ink); display: block; font-size: 1.5rem; margin: 4px 0; }
.model-task-list { border-top: 1px solid var(--ref-line-soft); display: grid; gap: 10px; margin: 0 0 18px; padding-top: 16px; }
.model-task-list > div { display: grid; gap: 4px; }
.model-task-list > div:last-child { align-items: center; background: #f7fbfe; border: 1px solid var(--ref-line); border-radius: 7px; grid-template-columns: 1fr auto; padding: 11px; }
.model-task-list strong { color: var(--ref-ink); font-size: .78rem; }
.model-task-list small, .model-task-list span { color: var(--ref-muted); font-size: .7rem; }
.model-task-status > .button { width: 100%; }

.reference-audit { padding: 0; }
.reference-audit > .page-heading,
.reference-audit > .toolbar,
.reference-audit > .pagination { margin-left: 0; margin-right: 0; }
.reference-audit > .page-heading { padding-top: 0; }
.reference-audit > .table-wrap { border-top: 1px solid var(--ref-line-soft); padding: 14px 24px; }
.reference-audit .raw-detail { font-size: .7rem; }
.reference-users > .table-wrap,
.reference-knowledge-sync > .table-wrap,
.reference-audit > .table-wrap { background: var(--ref-surface); border: 1px solid var(--ref-line); border-radius: var(--ref-radius); }

/* Public result and research pages are deliberately wider than private tools. */
.public-header { min-height: 74px; }
.public-main { max-width: 1240px; }
.public-hero { box-sizing: border-box; height: 208px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 208px; padding-bottom: 34px; padding-top: 34px; }
.public-hero h1 { font-size: 1.875rem; }
.public-results-panel { border-radius: 10px; left: calc(50% - 50vw + 110px); margin-top: -35px; padding: 26px 30px; position: relative; width: calc(100vw - 220px); }
.public-result-table tbody tr:nth-child(3) { background: #effaff; }
.public-result-filters { align-items: end; display: grid; gap: 14px; grid-template-columns: 1.25fr .75fr .75fr auto auto minmax(148px, auto); margin: 18px 0 24px; }
.public-result-filters label { color: var(--ref-muted); display: grid; font-size: .7rem; gap: 6px; }
.public-result-filters input, .public-result-filters select { background: #fff; min-height: 40px; }
.public-result-filters input:disabled, .public-result-filters select:disabled { color: var(--ref-muted); opacity: 1; }
.public-result-filters .public-download { justify-self: end; }
.knowledge-hero { box-sizing: border-box; height: 220px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 220px; overflow: hidden; padding-top: 32px; position: relative; }
.knowledge-hero::after { background: rgba(55, 154, 207, .23); border-radius: 50%; content: ""; height: 380px; position: absolute; right: 30px; top: -145px; width: 380px; }
.knowledge-hero > * { position: relative; z-index: 1; }
.knowledge-hero-search { max-width: 764px; }
.knowledge-hero-search input { background: transparent; border: 0; box-shadow: none; color: #c4dbe8; min-height: 41px; padding: 0 7px; }
.knowledge-hero-search input::placeholder { color: #9db9ca; opacity: 1; }
.knowledge-hero-search button { min-height: 41px; width: 105px; }
.knowledge-hero-tabs { bottom: -8px; display: flex; gap: 0; left: calc(50% - 306px); position: absolute; white-space: nowrap; }
.knowledge-hero-tabs span { background: #f1f7fb; border-radius: 999px; color: var(--ref-muted); font-size: .75rem; font-weight: 800; min-width: 118px; padding: 7px 16px; text-align: center; }
.knowledge-hero-tabs span:nth-child(3) { min-width: 138px; }
.knowledge-hero-tabs span:nth-child(4) { min-width: 126px; }
.knowledge-hero-tabs .is-active { background: #e6f5ff; color: var(--ref-blue-strong); }
.knowledge-layout { grid-template-columns: 308px minmax(0, 1fr); left: calc(50% - 50vw + 66px); position: relative; width: calc(100vw - 132px); }
.knowledge-filter { align-self: start; padding: 22px; }
.knowledge-topics { display: grid; gap: 10px; }
.knowledge-topics > strong { color: var(--ref-muted); font-size: .75rem; }
.knowledge-topics > div { display: flex; flex-wrap: wrap; gap: 8px; }
.knowledge-topics span { background: #e8f6ff; border-radius: 999px; color: var(--ref-blue-strong); font-size: .7rem; font-weight: 700; padding: 6px 13px; }
.knowledge-topics span:nth-child(2) { background: #f0ebff; color: #7553d8; }
.knowledge-topics span:nth-child(3) { background: #e6f8f0; color: var(--ref-green); }
.knowledge-topics span:nth-child(4) { background: var(--ref-amber-pale); color: var(--ref-amber); }
.knowledge-results { padding: 20px 24px 24px; }
.knowledge-content { grid-template-columns: minmax(0, 594px) minmax(240px, 1fr); }
.knowledge-entry { min-height: 108px; padding: 14px 20px; }
.knowledge-entry .badge { justify-self: start; }
.knowledge-detail { display: flex; flex-direction: column; min-height: 460px; }
.knowledge-detail > h2 { color: var(--ref-ink); font-size: 1rem; margin: 6px 0 16px; }
.knowledge-detail > .badge { align-self: flex-start; }
.knowledge-detail dl { margin-top: 16px; }
.knowledge-detail dl div { border: 0; }
.knowledge-summary > span,
.knowledge-external > span { color: var(--ref-muted); display: block; font-size: .7rem; margin: 12px 0 8px; }
.knowledge-summary p { margin: 0; }
.knowledge-external strong { color: var(--ref-blue-strong); font-size: .72rem; }
.knowledge-detail-button { margin-top: auto; width: 100%; }

/* Login and first-password visuals use their own non-card composition. */
.login-shell { grid-template-columns: minmax(0, 43%) minmax(0, 1fr); }
.login-intro { background: #07334e; padding: 52px clamp(42px, 5vw, 112px); }
.login-message { margin: 116px 0 0; max-width: 510px; }
.login-message h1 { font-size: 2.55rem; }
.login-message p { max-width: 470px; }
.login-features { gap: 20px; margin: clamp(48px, 8vh, 82px) 0 0; max-width: 500px; }
.login-features span { align-items: center; background: rgba(126, 196, 232, .18); display: grid; gap: 2px 14px; grid-template-columns: 40px 1fr; min-height: 70px; padding: 12px 16px; }
.login-features i { align-items: center; background: #227ead; border-radius: 7px; color: #aee6ff; display: inline-flex; font-size: .8rem; font-style: normal; font-weight: 800; grid-row: 1 / 3; height: 36px; justify-content: center; width: 36px; }
.login-features b { color: #fff; font-size: .8rem; }
.login-features small { color: #a9c8d9; font-size: .66rem; font-weight: 400; }
.login-panel { align-self: stretch; background: transparent; border: 0; box-shadow: none; display: flex; flex-direction: column; justify-self: center; margin: 0; max-width: 380px; min-height: 100vh; padding: clamp(72px, 10vh, 112px) 0 clamp(32px, 5vh, 68px); width: min(380px, calc(100% - 48px)); }
.login-panel .auth-heading h1 { margin-top: 62px; }
.login-panel.panel { overflow: visible; }
.auth-topbar { background: #07334e; }
.password-card { background: transparent; border: 0; box-shadow: none; max-width: 660px; overflow: visible; padding: 0; }
.password-card::before { background: #e5f6ff; border-radius: 50%; content: ""; height: 280px; position: fixed; right: 5vw; top: 58px; width: 280px; z-index: -1; }
.password-card .auth-heading { border-bottom: 1px solid var(--ref-line); column-gap: 16px; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; min-height: 90px; padding-bottom: 18px; }
.password-card .auth-heading > span { align-items: center; align-self: start; background: #e8f6ff; border-radius: 7px; color: var(--ref-blue-strong); display: inline-flex; font-size: .75rem; grid-row: 1 / 3; height: 32px; justify-content: center; width: 32px; }
.password-card .auth-heading h1 { align-self: end; margin: 0 0 4px; }
.password-card .auth-heading p { align-self: start; margin: 0; }
.password-form { background: transparent; border: 0; border-radius: 0; padding: 0; }
.password-policy-panel { background: #fff; border: 1px solid var(--ref-line); border-radius: 8px; display: grid; gap: 12px 28px; grid-template-columns: 1fr 1fr; padding: 16px 20px; }
.password-policy-panel strong { color: var(--ref-ink); font-size: .75rem; grid-column: 1 / -1; }
.password-policy-panel span { color: var(--ref-muted); font-size: .7rem; }
.password-session-note { color: #9eb0be; font-size: .65rem; margin: 10px 0 0; text-align: center; }

@media (max-width: 980px) {
  .main { max-width: none; padding: 28px 24px 44px; }
  .reference-achievement-detail { grid-template-columns: 1fr; }
  .reference-achievement-detail .side-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-model-settings .form-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .main { padding: 20px 14px 32px; }
  .panel { padding: 18px; }
  .reference-achievements > .page-heading,
  .reference-achievements > .metric-strip,
  .reference-achievements > .toolbar,
  .reference-achievements > .table-wrap,
  .batch-page > .page-heading,
  .batch-page .parse-workbench,
  .reference-users > .page-heading,
  .reference-users > .toolbar,
  .reference-users > .table-wrap,
  .reference-model-settings > .page-heading,
  .reference-model-settings > .alert,
  .reference-model-settings > .model-effective,
  .reference-model-settings > .model-settings-layout,
  .reference-audit > .page-heading,
  .reference-audit > .toolbar,
  .reference-audit > .pagination,
  .reference-audit > .table-wrap { margin-left: 0; margin-right: 0; padding-left: 18px; padding-right: 18px; }
  .reference-achievement-detail .side-panel { display: block; }
  .reference-achievement-detail .detail-grid { grid-template-columns: 1fr; }
  .reference-scholarship-apply > .detail-grid { grid-template-columns: 1fr; }
  .reference-model-settings .form-row-3 { grid-template-columns: 1fr; }
  .model-settings-layout { grid-template-columns: 1fr; }
  .reference-review-detail .detail-grid { grid-template-columns: 1fr; }
  .review-screen-grid { grid-template-columns: 1fr; }
  .review-screen-title { align-items: flex-start; flex-direction: column; gap: 12px; }
  .review-screen-title h2 { white-space: normal; }
  .knowledge-sync-banner { align-items: stretch; flex-direction: column; gap: 14px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar label { min-width: 0; }
  .public-result-filters { grid-template-columns: 1fr; }
  .public-result-filters .public-download { justify-self: stretch; }
  .knowledge-hero-tabs { bottom: -10px; max-width: calc(100vw - 28px); overflow: auto; }
  .knowledge-hero-tabs span { min-width: auto; }
  .login-shell { grid-template-columns: 1fr; }
  .login-intro { padding: 28px 24px; }
  .login-message { margin: auto 0 20px; }
  .login-features { display: none; }
  .login-panel { margin: 0; max-width: none; padding: 34px 24px 42px; width: 100%; }
}

.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.login-role-grid { border: 0; display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 40px 0 22px; padding: 0; }
.login-role-grid legend { margin: 0; padding: 0; }
.login-role-option { background: #fff; border: 1px solid var(--ref-line); border-radius: 7px; color: var(--ref-ink); cursor: pointer; display: block; min-height: 66px; padding: 8px; position: relative; }
.login-role-option input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.login-role-option.is-current, .login-role-option:has(input:checked) { background: #eefaff; border-color: var(--ref-blue); color: var(--ref-blue-strong); }
.login-role-option:focus-within { outline: 3px solid rgba(32, 139, 202, .35); outline-offset: 2px; }
.login-role-grid strong, .login-role-grid small { display: block; font-size: .75rem; }
.login-role-grid small { color: var(--ref-muted); font-size: .625rem; margin-top: 3px; }
.login-security-note { background: #f1fbff; border: 1px solid #c9eafa; border-radius: 7px; color: var(--ref-blue-strong); display: grid; font-size: .7rem; gap: 3px; margin-top: 20px; padding: 12px; }
.login-form-meta { align-items: center; display: flex; justify-content: space-between; min-height: 24px; }
.login-form-meta label { align-items: center; display: inline-flex; font-size: .72rem; font-weight: 400; gap: 7px; }
.login-form-meta input { accent-color: var(--ref-blue); height: 18px; margin: 0; min-height: 18px; width: 18px; }
.login-form-meta span { color: var(--ref-blue-strong); font-size: .72rem; font-weight: 800; }
.login-copyright { color: #9fb1c1; font-size: .62rem; margin: auto 0 0; position: static; text-align: center; width: 100%; }

.batch-file-selection { background: #f8fcff; border: 1px solid #c7e6f5; border-radius: 7px; margin-top: 12px; padding: 12px; }
.batch-file-selection-heading { align-items: center; color: var(--ref-ink); display: flex; font-size: .75rem; justify-content: space-between; }
.batch-file-selection-heading span { color: var(--ref-muted); font-size: .7rem; }
.batch-file-selection-list { display: grid; gap: 7px; list-style: none; margin: 10px 0 0; padding: 0; }
.batch-file-selection-list li { align-items: center; background: #fff; border: 1px solid #d8eaf4; border-radius: 6px; display: flex; gap: 10px; justify-content: space-between; min-width: 0; padding: 8px 10px; }
.batch-file-selection-list li > span { min-width: 0; }
.batch-file-selection-list strong, .batch-file-selection-list small { display: block; }
.batch-file-selection-list strong { color: var(--ref-ink); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-file-selection-list small { color: var(--ref-muted); font-size: .68rem; margin-top: 2px; }
.batch-file-remove { align-items: center; background: transparent; border: 0; color: #637c90; display: inline-flex; font-size: 1.25rem; height: 28px; justify-content: center; min-height: 28px; min-width: 28px; padding: 0; width: 28px; }
.batch-file-remove:hover, .batch-file-remove:focus-visible { background: #eaf7ff; color: var(--ref-blue-strong); }
.batch-dropzone.has-files { border-color: #72c9a1; }
.batch-dropzone.is-dragging { background: #e6f8ff; border-color: var(--ref-blue-strong); }

@media (max-width: 980px) {
  .login-shell { display: block; min-height: 0; }
  .login-intro { min-height: 330px; padding: 28px 24px; }
  .login-message { margin: auto 0 20px; }
  .login-features { display: none; }
  .login-panel { margin: 0 auto; max-width: 560px; min-height: 0; padding: 42px 32px 34px; width: 100%; }
  .login-copyright { margin-top: 34px; }
}

@media (max-width: 480px) {
  .login-intro { padding: 28px 18px; }
  .login-panel { padding: 34px 18px 28px; }
}

/* Preserve the continuous dashboard statistics strip used by the approved prototype. */
.student-workspace .workspace-head { margin-bottom: 0; }
.student-overview { gap: 0; }
.student-overview .overview-cell { align-items: end; border: 0; border-radius: 0; border-right: 1px solid var(--ref-line); column-gap: 16px; grid-template-columns: auto minmax(0, 1fr); min-height: 112px; padding: 20px 24px; }
.student-overview .overview-cell > span { align-self: start; grid-column: 1 / -1; }
.student-overview .overview-cell > small { margin-bottom: 3px; }
.student-overview .overview-cell:last-child { border-right: 0; }
.student-workspace-grid { gap: 23px; grid-template-columns: minmax(0, 2.22fr) minmax(280px, 1fr); }
.student-workspace-grid { margin-top: 4px; }
.student-task { grid-template-columns: 42px minmax(0, 1fr) auto; min-height: 95px; padding: 16px 0; }
.task-index { height: 42px; width: 42px; }
.task-arrow { border: 1px solid #9fcfee; border-radius: 7px; min-width: 108px; padding: 10px 12px; text-align: center; }
.password-strength.is-prototype-strong i { background: var(--ref-green); }
.password-strength.is-prototype-strong strong { color: var(--ref-green); }
body:has(.password-card)::before,
body:has(.password-card)::after { border-radius: 50%; content: ""; pointer-events: none; position: fixed; z-index: 0; }
body:has(.password-card)::before { background: #e5f6ff; height: 280px; right: 5vw; top: 58px; width: 280px; }
body:has(.password-card)::after { background: #f1efff; bottom: -104px; height: 390px; left: -168px; width: 390px; }
body:has(.password-card) .layout { position: relative; z-index: 1; }
body:has(.password-card) .auth-layout { background: transparent; }
html:has(.password-card) { background: #f3f7fb; }
body:has(.password-card) { background: transparent; }

/* Approved desktop prototype frames remain a presentation layer only. The routed
   Jinja surface underneath keeps real forms, permissions, and demo actions live. */
.password-steps { align-items: center; display: flex; gap: 22px; list-style: none; margin: 20px 0; padding: 0; }
.password-steps li { align-items: center; color: var(--ref-muted); display: flex; font-size: .75rem; font-weight: 700; gap: 7px; }
.password-steps span { align-items: center; background: #e8f0f6; border-radius: 50%; display: inline-flex; height: 28px; justify-content: center; width: 28px; }
.password-steps .is-complete span, .password-steps .is-current span { background: var(--ref-blue); color: #fff; }
.password-steps .is-current { color: var(--ref-blue-strong); }
.password-account { background: #f1fbff; border: 1px solid #c4e9fa; border-radius: 8px; display: grid; gap: 3px; margin-bottom: 18px; padding: 13px 16px; }
.password-account span, .password-account small { color: var(--ref-muted); font-size: .7rem; }
.password-account strong { color: var(--ref-ink); font-size: .875rem; }
.password-strength { align-items: center; display: grid; gap: 8px; grid-template-columns: auto 1fr auto; }
.password-strength span, .password-strength strong { color: var(--ref-muted); font-size: .7rem; }
.password-strength i { background: #e4edf3; border-radius: 99px; height: 7px; }
.student-result-banner { align-items: center; background: var(--ref-blue); border-radius: 8px; color: #fff; display: flex; justify-content: space-between; margin: 0 0 20px; padding: 24px 30px; }
.student-result-banner span, .student-result-banner p, .student-result-numbers small { color: #d8f0fd; font-size: .75rem; }
.student-result-banner h2 { color: #fff; font-size: 1.75rem; margin: 7px 0; }
.student-result-banner p { margin: 0; }
.student-result-numbers { align-items: center; display: flex; gap: 30px; }
.student-result-numbers div { min-width: 88px; }
.student-result-numbers small, .student-result-numbers strong { display: block; }
.student-result-numbers strong { color: #fff; font-size: 1.8rem; }
.student-result-numbers .badge { background: #e6faf1; color: var(--ref-green); }

@media (max-width: 700px) {
  .login-role-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .login-copyright { display: none; }
  .password-steps { gap: 10px; justify-content: space-between; }
  .password-steps li { font-size: .625rem; }
  .student-result-banner { align-items: flex-start; flex-direction: column; gap: 18px; padding: 20px; }
  .student-result-numbers { gap: 18px; width: 100%; }
}