/*
 * 醇语文后台 · Apple-inspired visual layer
 *
 * 这是纯视觉覆盖层：不隐藏功能、不修改 DOM、不接管点击事件。
 * 原页面的 id、name、onclick、fetch 与表单提交逻辑保持不变。
 */

:root {
  color-scheme: light dark;

  --apple-blue: #007aff;
  --apple-blue-pressed: #0062cc;
  --apple-green: #34c759;
  --apple-orange: #ff9500;
  --apple-red: #ff3b30;
  --apple-indigo: #5856d6;
  --apple-cyan: #32ade6;

  --apple-bg: #f2f2f7;
  --apple-surface: rgba(255, 255, 255, 0.86);
  --apple-surface-solid: #ffffff;
  --apple-fill: rgba(120, 120, 128, 0.12);
  --apple-fill-strong: rgba(120, 120, 128, 0.2);
  --apple-label: #1c1c1e;
  --apple-secondary: rgba(60, 60, 67, 0.66);
  --apple-tertiary: rgba(60, 60, 67, 0.4);
  --apple-separator: rgba(60, 60, 67, 0.12);
  --apple-focus: rgba(0, 122, 255, 0.18);

  --apple-radius-sm: 11px;
  --apple-radius: 16px;
  --apple-radius-lg: 22px;
  --apple-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.025),
    0 4px 16px rgba(0, 0, 0, 0.035);
  --apple-shadow-lg: 0 18px 60px rgba(0, 0, 0, 0.16);
  --apple-press: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* 覆盖旧页面的多套主题变量，统一为一套语义色。 */
  --bg: var(--apple-bg);
  --card: var(--apple-surface-solid);
  --text: var(--apple-label);
  --text2: var(--apple-secondary);
  --text-secondary: var(--apple-secondary);
  --t2: var(--apple-secondary);
  --bdr: var(--apple-separator);
  --border: var(--apple-separator);
  --c1: var(--apple-blue);
  --c2: var(--apple-cyan);
  --c3: rgba(0, 122, 255, 0.1);
  --c4: var(--apple-label);
  --primary: var(--apple-blue);
  --primary-dark: var(--apple-blue-pressed);
  --purple: var(--apple-indigo);
  --success: var(--apple-green);
  --warning: var(--apple-orange);
  --danger: var(--apple-red);
  --green: var(--apple-green);
  --orange: var(--apple-orange);
  --red: var(--apple-red);
  --blue: var(--apple-blue);
  --gold: var(--apple-orange);
  --radius: var(--apple-radius);
  --radius-sm: var(--apple-radius-sm);
  --r: var(--apple-radius);
  --rs: var(--apple-radius-sm);
}

html {
  background: var(--apple-bg);
  accent-color: var(--apple-blue);
}

body {
  background:
    radial-gradient(circle at 18% -8%, rgba(0, 122, 255, 0.075), transparent 27rem),
    var(--apple-bg) !important;
  color: var(--apple-label) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Segoe UI", sans-serif !important;
  font-optical-sizing: auto;
  letter-spacing: -0.008em;
}

main,
.content,
.homework-list,
.class-list,
.student-list {
  width: min(100%, 760px);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Floating navigation material */
.header,
.nav-top {
  min-height: 56px;
  background: rgba(248, 248, 250, 0.78) !important;
  color: var(--apple-label) !important;
  border-bottom: 0.5px solid var(--apple-separator) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

.header h1,
.nav-top h1 {
  color: var(--apple-label) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.header a,
.nav-top a,
.back-btn,
.header .back {
  width: 38px !important;
  min-width: 38px;
  height: 38px !important;
  min-height: 38px !important;
  margin-right: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--apple-fill) !important;
  color: var(--apple-blue) !important;
  text-decoration: none !important;
  font-size: 20px !important;
  line-height: 1;
  box-shadow: none !important;
  transition: transform 100ms ease-out, background-color 120ms ease-out !important;
}

.header a:active,
.nav-top a:active,
.back-btn:active,
.header .back:active {
  transform: scale(0.9);
  background: var(--apple-fill-strong) !important;
}

.header-row,
.header-left {
  align-items: center;
}

.btn-header {
  min-height: 38px;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 122, 255, 0.11) !important;
  color: var(--apple-blue) !important;
  box-shadow: none !important;
}

/* Bottom navigation stays visually connected to the system gesture area. */
.nav-bar {
  background: rgba(250, 250, 252, 0.84) !important;
  border-top: 0.5px solid var(--apple-separator) !important;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.035) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
}

.nav-item {
  position: relative;
  color: var(--apple-secondary) !important;
  font-size: 10px !important;
  font-weight: 550 !important;
  letter-spacing: 0;
  transition: color 140ms ease-out, transform 100ms ease-out !important;
}

.nav-item.active {
  color: var(--apple-blue) !important;
  font-weight: 650 !important;
}

.nav-item:active {
  transform: scale(0.94);
}

.nav-item .app-nav-icon {
  transition: transform 180ms var(--apple-press);
}

.nav-item.active .app-nav-icon {
  transform: translateY(-1px);
}

/* Surfaces */
.card,
.student-card,
.hw-card,
.class-card,
.hw-item,
.answer-bar,
.stat-card,
.share-box,
.q-table {
  background: var(--apple-surface) !important;
  color: var(--apple-label) !important;
  border: 0.5px solid rgba(60, 60, 67, 0.085) !important;
  border-radius: var(--apple-radius) !important;
  box-shadow: var(--apple-shadow-sm) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

.card {
  padding: 20px !important;
}

.card:active {
  transform: none !important;
}

.card h2,
.card h3,
.modal h2,
.modal h3 {
  color: var(--apple-label) !important;
  letter-spacing: -0.02em;
}

.card h2 {
  font-size: 20px !important;
}

.card h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
}

.quick-card,
.student-card,
.hw-card,
.class-card,
.hw-item,
.student-row,
.report-pick,
[role="button"] {
  transition: transform 100ms ease-out, background-color 140ms ease-out,
    border-color 140ms ease-out, box-shadow 180ms ease-out !important;
}

.quick-card:active,
.student-card:active,
.hw-card:active,
.class-card:active,
.hw-item:active,
.student-row:active,
.report-pick:active,
[role="button"]:active {
  transform: scale(0.985) !important;
}

/* Home */
.hero {
  padding: 34px 18px 26px !important;
  text-align: left !important;
}

.hero h1 {
  color: var(--apple-label) !important;
  font-size: clamp(32px, 8vw, 44px) !important;
  font-weight: 760 !important;
  line-height: 1.02;
  letter-spacing: -0.045em !important;
}

.hero p {
  margin-top: 8px;
  color: var(--apple-secondary) !important;
  font-size: 15px !important;
  line-height: 1.45;
}

.quick-actions {
  gap: 12px !important;
}

.quick-card {
  min-height: 138px;
  padding: 18px !important;
  border: 0.5px solid rgba(60, 60, 67, 0.08) !important;
  border-radius: 19px !important;
  background: var(--apple-surface) !important;
  color: var(--apple-label) !important;
  box-shadow: var(--apple-shadow-sm) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

.quick-card .icon {
  width: 38px !important;
  height: 38px !important;
  padding: 8px;
  border-radius: 11px;
  color: #fff !important;
  background-color: var(--apple-blue);
}

.quick-card:nth-child(2) .icon { background-color: var(--apple-orange); }
.quick-card:nth-child(3) .icon { background-color: var(--apple-indigo); }
.quick-card:nth-child(4) .icon { background-color: var(--apple-green); }

.quick-card .label {
  font-size: 16px !important;
  font-weight: 680 !important;
  letter-spacing: -0.018em !important;
}

.quick-card .sub {
  color: var(--apple-secondary) !important;
  font-size: 12px !important;
}

.stat-row,
.stats-bar,
.stats-grid {
  gap: 10px !important;
}

.stat-box,
.stat-card {
  background: rgba(255, 255, 255, 0.62) !important;
  border: 0.5px solid rgba(60, 60, 67, 0.07) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.stat-box .val,
.stat-num {
  color: var(--apple-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}

.stat-box .lbl,
.stat-label {
  color: var(--apple-secondary) !important;
}

.hw-item {
  min-height: 64px;
  padding: 14px 16px !important;
}

/* Login */
.login-card {
  width: min(100%, 390px) !important;
  padding: 34px 28px 30px !important;
  border: 0.5px solid rgba(60, 60, 67, 0.1) !important;
  border-radius: 24px !important;
  background: var(--apple-surface) !important;
  color: var(--apple-label) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.11) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}

.login-card .logo {
  width: 76px;
  height: 76px;
  margin: 0 auto 16px !important;
  border-radius: 18px;
  background: url("../icons/app-icon-192.png") center / cover no-repeat;
  box-shadow: 0 10px 28px rgba(28, 57, 75, 0.2);
  font-size: 0 !important;
}

.login-card h1 {
  color: var(--apple-label) !important;
  font-size: 26px !important;
  font-weight: 750 !important;
  letter-spacing: -0.035em !important;
}

.login-card .sub {
  color: var(--apple-secondary) !important;
  margin: 6px 0 26px !important;
}

.login-card input {
  margin-bottom: 12px;
}

.login-card button {
  width: 100%;
  min-height: 48px;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--apple-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}

.login-card button:active {
  background: var(--apple-blue-pressed) !important;
}

/* Buttons respond immediately, without decorative gradients. */
.btn,
button,
.report-pick-action,
.q-edit,
.sheet-item,
.sheet-cancel {
  font-family: inherit;
  transition: transform 100ms ease-out, filter 120ms ease-out,
    background-color 140ms ease-out, opacity 140ms ease-out !important;
}

.btn:active,
button:active,
.report-pick-action:active,
.q-edit:active,
.sheet-item:active,
.sheet-cancel:active {
  transform: scale(0.97) !important;
}

.btn {
  border-radius: var(--apple-radius-sm) !important;
  box-shadow: none !important;
  letter-spacing: -0.01em;
}

.btn-primary,
.btn-blue {
  border-color: transparent !important;
  background: var(--apple-blue) !important;
  color: #fff !important;
}

.btn-primary:active,
.btn-blue:active {
  background: var(--apple-blue-pressed) !important;
}

.btn-green,
.btn-success {
  border-color: transparent !important;
  background: var(--apple-green) !important;
  color: #fff !important;
}

.btn-purple {
  border-color: transparent !important;
  background: var(--apple-indigo) !important;
  color: #fff !important;
}

.btn-correct {
  border-color: transparent !important;
  background: var(--apple-orange) !important;
  color: #fff !important;
}

.btn-danger,
.btn-red {
  border-color: transparent !important;
  background: rgba(255, 59, 48, 0.11) !important;
  color: var(--apple-red) !important;
}

.btn-outline,
.btn-cancel {
  border: 0.5px solid var(--apple-separator) !important;
  background: var(--apple-fill) !important;
  color: var(--apple-label) !important;
}

.btn:disabled,
button:disabled {
  opacity: 0.38 !important;
  transform: none !important;
}

.fab {
  width: 58px !important;
  height: 58px !important;
  border: 0.5px solid rgba(255, 255, 255, 0.45) !important;
  background: var(--apple-blue) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(0, 122, 255, 0.3) !important;
}

/* Inputs use a grouped-form feel. */
input,
textarea,
select,
.field-input,
.field-select,
.form-input,
.form-select {
  min-height: 46px;
  border: 0.5px solid transparent !important;
  border-radius: var(--apple-radius-sm) !important;
  background-color: rgba(118, 118, 128, 0.095) !important;
  color: var(--apple-label) !important;
  box-shadow: none !important;
}

textarea,
textarea.form-input {
  line-height: 1.55;
}

input:focus,
textarea:focus,
select:focus,
.field-input:focus,
.field-select:focus,
.form-input:focus,
.form-select:focus {
  border-color: var(--apple-blue) !important;
  background-color: var(--apple-surface-solid) !important;
  box-shadow: 0 0 0 4px var(--apple-focus) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--apple-tertiary) !important;
}

.field-label,
.form-label,
.modal label,
.share-box h4 {
  color: var(--apple-secondary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
}

.checkbox-item {
  min-height: 44px;
  border: 0.5px solid var(--apple-separator) !important;
  border-radius: var(--apple-radius-sm) !important;
  background: var(--apple-fill) !important;
}

/* Segmented controls */
.filter-bar,
.tab-bar {
  padding: 4px !important;
  gap: 3px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--apple-fill) !important;
  box-shadow: none !important;
}

.filter-tag,
.tab {
  min-height: 38px !important;
  padding: 8px 13px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--apple-secondary) !important;
  box-shadow: none !important;
}

.filter-tag.active,
.tab.active {
  background: var(--apple-surface-solid) !important;
  color: var(--apple-label) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

.grade-subfilter,
.class-filter,
.filter-bar,
.stats-bar,
.answer-bar {
  width: min(calc(100% - 32px), 728px);
  margin-left: auto !important;
  margin-right: auto !important;
}

.grade-tag {
  min-height: 34px;
  padding: 7px 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 122, 255, 0.09) !important;
  color: var(--apple-blue) !important;
}

.grade-tag.active {
  background: var(--apple-blue) !important;
  color: #fff !important;
}

/* Classroom correction progress */
.steps {
  padding: 12px 16px 14px !important;
  gap: 8px !important;
  border-bottom: 0.5px solid var(--apple-separator) !important;
  background: rgba(248, 248, 250, 0.78) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.step-num {
  width: 30px !important;
  height: 30px !important;
  background: var(--apple-fill) !important;
  color: var(--apple-secondary) !important;
}

.step.active .step-num {
  background: var(--apple-blue) !important;
  color: #fff !important;
}

.step.done .step-num {
  background: var(--apple-green) !important;
  color: #fff !important;
}

.step-label {
  color: var(--apple-secondary) !important;
  font-size: 11px !important;
}

.upload-area,
.slot-upload {
  border: 1.5px dashed rgba(0, 122, 255, 0.3) !important;
  border-radius: 15px !important;
  background: rgba(0, 122, 255, 0.055) !important;
}

.upload-area:active,
.slot-upload:active {
  border-color: var(--apple-blue) !important;
  background: rgba(0, 122, 255, 0.1) !important;
}

.slot {
  border: 0.5px solid var(--apple-separator) !important;
  border-radius: 18px !important;
  background: var(--apple-surface) !important;
  box-shadow: var(--apple-shadow-sm);
}

.slot.ready {
  border-color: rgba(0, 122, 255, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.08) !important;
}

.slot.correcting {
  border-color: var(--apple-blue) !important;
}

.slot.done-good {
  border-color: rgba(52, 199, 89, 0.45) !important;
  background: rgba(52, 199, 89, 0.055) !important;
}

.slot.done-weak {
  border-color: rgba(255, 149, 0, 0.5) !important;
  background: rgba(255, 149, 0, 0.06) !important;
}

.slot-num,
.avatar,
.st-avatar {
  background: rgba(0, 122, 255, 0.11) !important;
  color: var(--apple-blue) !important;
  box-shadow: none !important;
}

.profile-header .avatar {
  background: linear-gradient(145deg, var(--apple-blue), var(--apple-indigo)) !important;
  color: #fff !important;
}

/* Status and feedback */
.alert {
  border: 0.5px solid transparent !important;
  border-radius: 14px !important;
}

.alert-info {
  background: rgba(0, 122, 255, 0.08) !important;
  color: #005fc7 !important;
  border-color: rgba(0, 122, 255, 0.12) !important;
}

.alert-success {
  background: rgba(52, 199, 89, 0.09) !important;
  color: #18853a !important;
  border-color: rgba(52, 199, 89, 0.14) !important;
}

.alert-error {
  background: rgba(255, 59, 48, 0.085) !important;
  color: #c5221a !important;
  border-color: rgba(255, 59, 48, 0.13) !important;
}

.badge {
  padding: 5px 9px !important;
  border-radius: 999px !important;
}

.badge-done,
.tag-status-active {
  background: rgba(52, 199, 89, 0.11) !important;
  color: #218942 !important;
}

.badge-none,
.badge-pending,
.tag-archived {
  background: rgba(255, 149, 0, 0.11) !important;
  color: #b56500 !important;
}

.hw-tag {
  border-radius: 999px !important;
  border: 0 !important;
}

.tag-date { background: rgba(0, 122, 255, 0.09) !important; color: #0068d8 !important; }
.tag-class { background: rgba(52, 199, 89, 0.1) !important; color: #218942 !important; }
.tag-type { background: rgba(88, 86, 214, 0.1) !important; color: var(--apple-indigo) !important; }
.tag-status-ended { background: var(--apple-fill) !important; color: var(--apple-secondary) !important; }

.hw-card::before,
.class-card::before {
  width: 3px !important;
  background: var(--apple-blue) !important;
}

.hw-card.status-ended::before {
  background: var(--apple-tertiary) !important;
}

/* Reports and details */
.student-row {
  border-bottom: 0.5px solid var(--apple-separator) !important;
}

.student-row:hover {
  background: transparent !important;
}

@media (hover: hover) and (pointer: fine) {
  .student-row:hover,
  .hw-item:hover,
  .hw-card:hover,
  .class-card:hover {
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 7px 24px rgba(0, 0, 0, 0.07) !important;
  }
}

.ai-analysis {
  border: 0 !important;
  border-radius: 15px !important;
  background: rgba(88, 86, 214, 0.075) !important;
  color: var(--apple-label) !important;
}

.report-pick {
  border: 0.5px solid var(--apple-separator) !important;
  border-radius: 13px !important;
  background: rgba(118, 118, 128, 0.055) !important;
}

.report-pick.selected {
  border-color: rgba(0, 122, 255, 0.38) !important;
  background: rgba(0, 122, 255, 0.075) !important;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.055) !important;
}

.report-pick-action,
.q-edit {
  min-height: 34px;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(0, 122, 255, 0.09) !important;
  color: var(--apple-blue) !important;
}

.report-source {
  border-radius: 999px !important;
  background: rgba(0, 122, 255, 0.1) !important;
  color: var(--apple-blue) !important;
}

.report-source.after-class {
  background: rgba(52, 199, 89, 0.11) !important;
  color: #218942 !important;
}

.report-focus {
  color: var(--apple-secondary) !important;
}

.q-row,
.q-line,
td,
th {
  border-color: var(--apple-separator) !important;
}

.q-row.header,
th {
  background: rgba(118, 118, 128, 0.07) !important;
  color: var(--apple-secondary) !important;
}

/* Result pages */
.overview {
  border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 20px !important;
  background: var(--apple-blue) !important;
  box-shadow: 0 16px 38px rgba(0, 122, 255, 0.2) !important;
}

.overview-num,
.overview-stat-num,
.rank-score-num {
  font-variant-numeric: tabular-nums;
}

.rank-card,
.question-card,
.result-card,
.detail-q {
  border: 0.5px solid rgba(60, 60, 67, 0.09) !important;
  border-radius: var(--apple-radius) !important;
  background: var(--apple-surface) !important;
  color: var(--apple-label) !important;
  box-shadow: var(--apple-shadow-sm) !important;
}

.rank-title,
.student-detail {
  border-color: var(--apple-separator) !important;
  background: rgba(118, 118, 128, 0.055) !important;
}

.rank-item {
  border-color: var(--apple-separator) !important;
}

.rank-item:active {
  background: var(--apple-fill) !important;
}

.rank-bar-bg {
  background: var(--apple-fill) !important;
}

.detail-q-idx {
  border-radius: 8px !important;
  background: var(--apple-blue) !important;
}

.tag-excellent { background: rgba(255, 149, 0, 0.11) !important; color: #b56500 !important; }
.tag-good { background: rgba(0, 122, 255, 0.1) !important; color: #0068d8 !important; }
.tag-pass { background: rgba(52, 199, 89, 0.11) !important; color: #218942 !important; }
.tag-weak { background: rgba(255, 59, 48, 0.1) !important; color: #c5221a !important; }

/* Essay detail uses Tailwind utilities; these targeted rules keep content intact. */
.glass {
  border-color: rgba(60, 60, 67, 0.1) !important;
  background: var(--apple-surface) !important;
  color: var(--apple-label) !important;
  box-shadow: var(--apple-shadow-sm);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}

.gradient-text {
  background: none !important;
  color: var(--apple-blue) !important;
  -webkit-text-fill-color: currentColor !important;
}

.section-title {
  color: var(--apple-label) !important;
  letter-spacing: -0.02em;
}

.section-title::before {
  width: 3px !important;
  background: var(--apple-blue) !important;
}

.essay-text {
  color: var(--apple-label) !important;
}

.annotate-side,
.annotate-good {
  border-left-width: 3px !important;
  border-radius: 0 10px 10px 0;
}

/* Sheets and modals */
.modal-overlay,
.overlay {
  background: rgba(0, 0, 0, 0.32) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.modal,
.sheet {
  border: 0.5px solid rgba(255, 255, 255, 0.4) !important;
  background: rgba(250, 250, 252, 0.96) !important;
  color: var(--apple-label) !important;
  box-shadow: var(--apple-shadow-lg) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  backdrop-filter: blur(32px) saturate(180%);
}

.modal-handle {
  background: rgba(60, 60, 67, 0.25) !important;
}

.sheet-item {
  color: var(--apple-label) !important;
}

.sheet-item:active,
.sheet-cancel:active {
  background: var(--apple-fill) !important;
}

.sheet-cancel {
  color: var(--apple-red) !important;
  border-top-color: var(--apple-separator) !important;
}

.bottom-bar {
  background: linear-gradient(to top, var(--apple-bg) 72%, transparent);
}

.spinner {
  border-color: var(--apple-fill-strong) !important;
  border-top-color: var(--apple-blue) !important;
}

.empty,
.empty-state {
  color: var(--apple-secondary) !important;
}

/* Desktop keeps the same information architecture, with calmer spacing. */
@media (min-width: 768px) {
  body {
    padding-bottom: 94px !important;
  }

  main,
  .content {
    padding-top: 22px !important;
  }

  .quick-actions {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .nav-bar {
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    width: min(560px, calc(100% - 32px));
    transform: translateX(-50%);
    padding: 5px 8px !important;
    border: 0.5px solid rgba(60, 60, 67, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
  }

  .nav-item {
    min-height: 50px;
    border-radius: 13px;
  }

  .nav-item.active {
    background: rgba(0, 122, 255, 0.09);
  }

  .modal {
    margin-bottom: 24px;
    border-radius: var(--apple-radius-lg) !important;
  }
}

/* Accessibility: motion and transparency remain user-controlled. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .header,
  .nav-top,
  .nav-bar,
  .card,
  .student-card,
  .hw-card,
  .class-card,
  .hw-item,
  .modal,
  .sheet {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--apple-surface-solid) !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --apple-secondary: rgba(28, 28, 30, 0.82);
    --apple-separator: rgba(28, 28, 30, 0.35);
  }

  .card,
  .student-card,
  .hw-card,
  .class-card,
  .hw-item,
  input,
  textarea,
  select {
    border-width: 1px !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --apple-bg: #000000;
    --apple-surface: rgba(28, 28, 30, 0.9);
    --apple-surface-solid: #1c1c1e;
    --apple-fill: rgba(120, 120, 128, 0.2);
    --apple-fill-strong: rgba(120, 120, 128, 0.32);
    --apple-label: #f5f5f7;
    --apple-secondary: rgba(235, 235, 245, 0.68);
    --apple-tertiary: rgba(235, 235, 245, 0.4);
    --apple-separator: rgba(84, 84, 88, 0.58);
    --apple-focus: rgba(10, 132, 255, 0.24);
    --apple-blue: #0a84ff;
    --apple-blue-pressed: #409cff;
    --apple-green: #30d158;
    --apple-orange: #ff9f0a;
    --apple-red: #ff453a;
    --apple-indigo: #5e5ce6;
  }

  body {
    background:
      radial-gradient(circle at 18% -8%, rgba(10, 132, 255, 0.13), transparent 26rem),
      #000 !important;
  }

  .header,
  .nav-top {
    background: rgba(18, 18, 20, 0.82) !important;
  }

  .nav-bar {
    background: rgba(28, 28, 30, 0.86) !important;
  }

  .stat-box,
  .stat-card {
    background: rgba(44, 44, 46, 0.72) !important;
  }

  input,
  textarea,
  select,
  .field-input,
  .field-select,
  .form-input,
  .form-select {
    background-color: rgba(118, 118, 128, 0.19) !important;
  }

  input:focus,
  textarea:focus,
  select:focus,
  .field-input:focus,
  .field-select:focus,
  .form-input:focus,
  .form-select:focus {
    background-color: #2c2c2e !important;
  }

  .filter-tag.active,
  .tab.active {
    background: #3a3a3c !important;
  }

  .alert-info { color: #66b5ff !important; }
  .alert-success { color: #59d978 !important; }
  .alert-error { color: #ff6961 !important; }

  .modal,
  .sheet {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(36, 36, 38, 0.97) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .student-row:hover,
    .hw-item:hover,
    .hw-card:hover,
    .class-card:hover {
      background: rgba(44, 44, 46, 0.96) !important;
    }
  }
}