:root {
  --line: #1d1d1d;
  --white: #ffffff;
  --green: #23a455;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Microsoft YaHei", sans-serif;
  background: #f5f5f5;
  color: #111;
}

.page {
  padding: 24px;
}

.sheet {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid #d8d8d8;
}

.page-tabs {
  display: flex;
  gap: 10px;
  padding: 16px 16px 0;
  flex-wrap: wrap;
}

.page-tab {
  border: 1px solid #cfd8e3;
  background: #f8fafc;
  color: #334155;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}

.page-tab.active {
  background: #1f7a43;
  color: #fff;
  border-color: #1f7a43;
}

.page-panel {
  display: none;
}

.page-panel.active {
  display: block;
}

#attendance-page.page-panel.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 84px);
  overflow: hidden;
}

.student-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--kpi-gap);
  padding: 14px 14px 0;
}

.stats-page-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding: 18px 14px 0;
}

.stats-page-head h2 {
  margin: 0;
  font-size: 24px;
}

.stats-page-head p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
}

#export-students {
  border: 0;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.billing-page-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding: 18px 14px 12px;
}

.students-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 14px 10px;
}

.students-head-left {
  min-width: 160px;
  flex-shrink: 0;
  padding-top: 4px;
}

.students-toolbar {
  padding: 0 14px 12px;
  display: grid;
  gap: 12px;
}

.students-filter-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.students-grade-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  padding: 8px 12px;
  border: 1px solid #dbe7f3;
  border-radius: 10px;
  background: #fff;
}

.students-grade-filter select {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  background: #f8fafc;
  cursor: pointer;
}

.students-search-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
}

.dir-search-input,
.dir-search-select {
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  background: #f8fafc;
  outline: none;
}

.dir-search-input {
  width: 150px;
}

.dir-search-input:focus,
.dir-search-select:focus {
  border-color: #22a455;
  background: #fff;
}

.students-search-clear {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  cursor: pointer;
}

.students-search-clear:hover {
  background: #e2e8f0;
}

.backup-status-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.backup-compact-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #bbf7d0;
  font-size: 13px;
}

.backup-compact-title {
  font-weight: 800;
  color: #166534;
}

.backup-compact-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.backup-compact-badge.is-ok {
  color: #166534;
  background: rgba(34, 197, 94, 0.16);
}

.backup-compact-badge.is-error {
  color: #b91c1c;
  background: rgba(248, 113, 113, 0.16);
}

.backup-compact-detail {
  color: #14532d;
  font-size: 12px;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.backup-compact-count {
  font-weight: 800;
  color: #15803d;
  background: #bbf7d0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
}

.backup-quick-btn {
  border: 0;
  min-height: 30px;
  padding: 4px 14px;
  border-radius: 999px;
  background: #15803d;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.backup-dir-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.backup-dir-fixed-label {
  color: #5f6b7a;
  font-size: 12px;
  font-weight: 700;
}

.backup-dir-fixed-value {
  max-width: 420px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #f6f8fb;
  color: #233044;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.students-forms-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
}

.students-page-head h2 {
  margin: 0;
  font-size: 24px;
}

.students-page-head p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
}

.backup-status-card {
  min-width: 360px;
  max-width: 520px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid #bbf7d0;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.08);
}

.backup-status-title {
  font-size: 18px;
  font-weight: 800;
  color: #166534;
  margin-bottom: 10px;
}

.backup-status-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
  color: #14532d;
  font-size: 14px;
}

.backup-status-row strong {
  color: #0f172a;
  word-break: break-all;
}

.backup-status-path {
  font-size: 12px;
  line-height: 1.45;
}

.backup-run-button {
  border: 0;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  border-radius: 12px;
  background: #15803d;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.backup-status-setting {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.backup-status-setting label {
  font-size: 13px;
  font-weight: 700;
  color: #166534;
}

.backup-status-setting input {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  font-size: 13px;
}

.billing-page-head h2 {
  margin: 0;
  font-size: 24px;
}

.billing-page-head p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
}

.billing-parent-sheet-button {
  border: 1px solid var(--app-border);
  min-height: 48px;
  padding: 10px 16px;
  border-radius: var(--app-radius-sm);
  background: #fff;
  color: var(--app-primary-d);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.billing-parent-sheet-button:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.billing-copy-sheet-button {
  border: 0;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: var(--app-radius-sm);
  background: #0f766e;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}

.billing-copy-sheet-button:hover {
  background: #0d6559;
}

/* 折扣锁定按键：放在名字后、复制收费图片之前，防止误改折扣 */
.billing-discount-lock-btn {
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--app-radius-sm);
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.billing-discount-lock-btn:hover {
  background: #eef2f7;
}
.billing-discount-lock-btn.locked {
  background: #fff7ed;
  border-color: #fb923c;
  color: #c2410c;
}
.billing-discount-lock-btn.locked:hover {
  background: #ffedd5;
}

.billing-copy-receipt-button {
  border: 0;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: var(--app-radius-sm);
  background: #16a34a;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}

.billing-copy-receipt-button:hover {
  background: #15803d;
}

.billing-board-wrap {
  padding: 0 14px 18px;
}

.refund-board-wrap {
  padding: 0 14px 18px;
}

.student-directory-wrap {
  padding: 0 14px 18px;
  display: grid;
  gap: 14px;
}

.directory-stats-bar {
  display: flex;
  gap: 20px;
  padding: 14px 20px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0f5ff 0%, #eef6ff 100%);
  border: 1px solid #c9daf8;
  align-items: center;
  font-size: 13px;
  color: #475569;
}
.directory-stats-bar .stat-item b {
  font-size: 22px;
  margin-right: 4px;
  color: #1e293b;
}
.directory-stats-bar .stat-active b { color: #15803d; }
.directory-stats-bar .stat-unassigned b { color: #b45309; }
.directory-stats-bar .stat-withdrawn b { color: #94a3b8; }
.directory-stats-bar .stat-paused b { color: #b45309; }

.directory-forms-row {
  display: contents;
}

/* 三列/多列卡片统一样式 */
.form-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #166534;
  margin-bottom: 10px;
}

.student-directory-form,
.student-import-form,
.assign-class-panel,
.directory-stats-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  height: 100%;
  box-sizing: border-box;
}

.student-directory-form,
.assign-class-panel {
  border: 1px solid #dbe7f3;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.student-import-form {
  border: 1px solid #fde68a;
  background: linear-gradient(180deg, #fffdf5 0%, #ffffff 100%);
}

.directory-stats-card {
  border: 1px solid #c9daf8;
  background: linear-gradient(135deg, #f0f5ff 0%, #eef6ff 100%);
}

.student-directory-form input,
.student-directory-form select,
.student-import-form input,
.student-import-form select,
.assign-class-panel input,
.assign-class-panel select {
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  padding: 9px 11px;
}

/* 学生分班：字号与间距加大，利用等高后的空间 */
.assign-class-panel input,
.assign-class-panel select {
  min-height: 42px;
}

.student-directory-form .student-directory-add,
.student-import-form .student-directory-add,
.assign-class-btn {
  width: 100%;
  margin-top: 4px;
  min-height: 44px;
  font-size: 15px;
}

/* 跨老师关联搜索 */
.student-link-search {
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.student-link-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 10px;
}
.student-link-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.student-link-hint {
  font-size: 12px;
  color: #64748b;
}
.student-link-row input#directory-link-search {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}
.student-link-results {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.student-link-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}
.student-link-name {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.student-link-meta {
  font-size: 12px;
  color: #64748b;
  flex: 1 1 200px;
}
.student-link-btn {
  border: 1px solid #0f6e56;
  color: #0f6e56;
  background: #ecfdf5;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
}
.student-link-btn:hover:not(:disabled) {
  background: #d1fae5;
}
.student-link-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.student-link-owned {
  font-size: 12px;
  color: #94a3b8;
  padding: 7px 12px;
}

/* ===== 添加学生合并面板 ===== */
.add-student-panel {
  border: 1px solid #c9daf8;
  background: linear-gradient(180deg, #f0f5ff 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.add-student-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}
.add-student-title {
  font-size: 16px;
  font-weight: 800;
  color: #1e3a8a;
}
.add-student-hint {
  font-size: 12px;
  color: #64748b;
}
.add-student-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.add-student-input-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.add-student-input-row input#add-student-name {
  flex: 1;
  min-height: 48px;
  padding: 0 16px;
  border: 2px solid #93c5fd;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.add-student-input-row input#add-student-name:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.add-student-status {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}
.add-student-status.is-info { color: #2563eb; }
.add-student-status.is-warn { color: #b45309; }
.add-student-status.is-error { color: #dc2626; }
.add-student-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.add-student-empty {
  padding: 10px 12px;
  background: #fff7ed;
  border: 1px dashed #fb923c;
  border-radius: 10px;
  color: #9a3412;
  font-size: 13px;
  font-weight: 600;
}
.add-student-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.add-student-item:hover {
  border-color: #93c5fd;
  background: #f8fbff;
}
.add-student-item.is-owned {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.add-student-item.is-withdrawn {
  background: #f8fafc;
  border-color: #e2e8f0;
  opacity: 0.85;
}
.add-student-item-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #0f172a;
}
.add-student-item-name b {
  font-size: 15px;
  font-weight: 700;
}
.add-student-item-meta {
  font-size: 12px;
  color: #64748b;
}
.add-student-item-action {
  display: flex;
  align-items: center;
}
.add-student-action-text {
  font-size: 12px;
  color: #16a34a;
  font-weight: 700;
  padding: 7px 12px;
}
.add-student-action-btn {
  border: 1px solid #0f6e56;
  color: #0f6e56;
  background: #ecfdf5;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.add-student-action-btn:hover:not(:disabled) {
  background: #d1fae5;
  transform: translateY(-1px);
}
.add-student-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.add-student-action-btn.is-revive {
  border-color: #b45309;
  color: #b45309;
  background: #fff7ed;
}
.add-student-action-btn.is-revive:hover:not(:disabled) {
  background: #fed7aa;
}
.add-student-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}
.add-student-tag.is-active {
  background: #dcfce7;
  color: #166534;
}
.add-student-tag.is-withdrawn {
  background: #f1f5f9;
  color: #64748b;
}
.add-student-fallback-new {
  border: 1px dashed #94a3b8;
  background: #fff;
  color: #475569;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.add-student-fallback-new:hover {
  background: #f1f5f9;
  border-color: #64748b;
}
.add-student-new-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #fed7aa;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
  border-radius: 10px;
  margin-top: 4px;
}
.add-student-new-form[hidden] { display: none; }
.add-student-new-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 10px;
}
.add-student-new-grid input,
.add-student-new-grid select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}
.add-student-new-form .form-card-title {
  color: #b45309;
}
#add-student-submit {
  width: 100%;
  min-height: 44px;
  font-size: 15px;
  font-weight: 800;
}

.directory-stats-card .stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: #475569;
  padding: 7px 0;
}
.directory-stats-card .stat-row b {
  font-size: 24px;
  color: #1e293b;
}
.directory-stats-card .stat-row.stat-active b { color: #15803d; }
.directory-stats-card .stat-row.stat-unassigned b { color: #b45309; }
.directory-stats-card .stat-row.stat-withdrawn b { color: #94a3b8; }
.directory-stats-card .stat-row.stat-paused b { color: #b45309; }
.student-import-left .student-import-head {
  display: block;
}
.student-import-left input[type="file"] {
  width: 100%;
  min-height: 40px;
}

.student-import-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  padding: 14px 16px;
  border: 1px solid #dbe7f3;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  align-items: center;
}
.student-import-right .student-directory-add { grid-column: 1 / -1; }

.forms-backup-slot {
  /* backup panel rendered here by JS */ }

.student-import-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: #475569;
  font-size: 13px;
}

.student-import-head strong {
  color: #92400e;
  font-size: 18px;
}

.student-directory-form input,
.student-directory-form select,
.student-import-form input,
.student-import-form select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  font-size: 14px;
}

.student-directory-add {
  border: 0;
  min-height: 40px;
  border-radius: 10px;
  background: #1f7a43;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.student-directory-table {
  width: max-content;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  border: 1px solid #dbe7f3;
}

/* 双列布局：左右两张表等宽，各自可横向滚动 */
.directory-single-table {
  display: block;
}

.student-directory-wrap {
  position: relative;
}

.dir-table-scroll {
  overflow-x: auto;
  min-width: 0;
  position: relative;
  border: 1px solid #dbe7f3;
  border-radius: 12px;
  background: #fff;
}

.student-directory-table th,
.student-directory-table td {
  padding: 11px 18px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: middle;
  font-size: 16px;
}

.student-directory-table th:first-child,
.student-directory-table td:first-child {
  text-align: center;
}

.student-directory-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-directory-table th {
  background: #f8fafc;
  color: #334155;
  font-weight: 800;
}

.student-directory-table .directory-index-cell,
.student-directory-table .directory-name-col {
  position: sticky;
  z-index: 5;
  background: #f8fbff;
  box-shadow: 1px 0 0 #dbe7f3;
}

.student-directory-table thead .directory-index-cell,
.student-directory-table thead .directory-name-col {
  z-index: 8;
  background: #eef6ff;
}

.student-directory-table .directory-index-cell {
  left: 0;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
}

.student-directory-table .directory-name-col {
  left: 64px;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
}

.student-directory-table tbody .directory-name-col {
  background: #f0f7ff;
}

.student-directory-table tr:last-child td {
  border-bottom: 0;
}

/* 顶部控制行：检索与翻页同一行（位于录入新生下方、表格上方） */
.directory-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

#directory-pagination-top {
  padding: 0;
}

/* 列宽可拖拽 */
.student-directory-table th.resizable {
  position: relative;
}

/* 拖拽热区：默认完全不可见，只有把鼠标移到列右边缘才会变成 col-resize 光标
   —— 外人看不出这里能拖动，只有你知道。
   视觉热区 6px（细），但 ::before 把命中区扩到 22px 方便精准点中 */
.student-directory-table th .col-resizer {
  position: absolute;
  top: 8px;
  right: 2px;
  width: 6px;
  height: calc(100% - 16px);
  cursor: col-resize;
  user-select: none;
  z-index: 12;
  border-radius: 999px;
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.12);
  opacity: 0.85;
  transition: opacity 0.15s, background 0.15s, box-shadow 0.15s;
}

.student-directory-table th .col-resizer::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  width: 22px;
  height: 100%;
}

.student-directory-table th:hover .col-resizer,
.student-directory-table th .col-resizer:hover,
.student-directory-table th .col-resizer:active {
  opacity: 1;
  background: linear-gradient(180deg, #4ade80 0%, #15803d 100%);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
}

/* 拖动时的线性提示竖线（仅拖动过程中可见） */
.col-resize-guide {
  position: fixed;
  top: 0;
  left: 0;
  width: 5px;
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 45%, #15803d 100%);
  pointer-events: none;
  z-index: 10000;
  display: none;
  border-radius: 999px;
  box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.18), 0 10px 26px rgba(22, 163, 74, 0.35);
}
.col-resize-guide.active {
  display: block;
}

.col-resize-guide span {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 76px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #15803d;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 8px 20px rgba(29, 78, 216, 0.25);
}

.directory-single-table.resizing,
.directory-single-table.resizing * {
  user-select: none;
  cursor: col-resize !important;
}

.student-directory-name-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
  align-items: center;
}

.student-directory-name-input {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #cfd8e3;
  border-radius: 9px;
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
}

.student-directory-save {
  border: 0;
  min-height: 42px;
  border-radius: 9px;
  background: #16a34a;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.student-directory-delete {
  border: 1px solid #fecaca;
  min-height: 42px;
  border-radius: 9px;
  background: #fff1f2;
  color: #b91c1c;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.student-directory-delete:hover {
  background: #ffe4e6;
  border-color: #fda4af;
}

.student-history-button {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.student-history-button:hover {
  border-color: #93c5fd;
  background: #eef6ff;
}

/* 退学/休学按钮组（同一行排布） */
.dir-action-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

/* 退学按钮（在读学生行内） */
.class-withdraw-button {
  border: 1px solid #fed7aa;
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  color: #9a3412;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.class-withdraw-button:hover {
  border-color: #fb923c;
  background: linear-gradient(180deg, #ffedd5 0%, #fed7aa 100%);
  color: #7c2d12;
}

/* 休学按钮（在读学生行内，天蓝系与退学橙色区分） */
.class-pause-button {
  border: 1px solid #bae6fd;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  color: #0369a1;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.class-pause-button:hover {
  border-color: #7dd3fc;
  background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
  color: #075985;
}

/* 恢复就读按钮（休学学生行内，绿色系） */
.class-resume-button {
  border: 1px solid #bbf7d0;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  color: #15803d;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.class-resume-button:hover {
  border-color: #4ade80;
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534;
}

.class-withdraw-modal {
  min-width: 360px;
  max-width: 460px;
}

.class-withdraw-modal .app-modal-field {
  display: block;
  margin-bottom: 14px;
}

.class-withdraw-modal .app-modal-field span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}

.student-directory-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
}

.student-directory-status.active {
  background: #dcfce7;
  color: #166534;
}

.student-directory-status.withdrawn {
  background: #fee2e2;
  color: #b91c1c;
}

.student-directory-status.paused {
  background: #fef3c7;
  color: #92400e;
}

.directory-empty-dash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 32px;
  color: #94a3b8;
  font-weight: 700;
}

.directory-health-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed #dbe7f3;
}

.directory-health-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.directory-health-chip.is-warn {
  background: #fef3c7;
  color: #92400e;
}

.directory-health-chip.is-alert {
  background: #fee2e2;
  color: #b91c1c;
}

.directory-health-chip.is-soft {
  background: #e0f2fe;
  color: #075985;
}

.directory-health-total {
  font-size: 13px;
  font-weight: 800;
  color: #475569;
}

.directory-health-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: #1769c2;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.directory-health-link:hover {
  filter: brightness(0.94);
}

.app-modal.app-modal-wide {
  width: min(920px, calc(100vw - 40px));
  max-width: 920px;
}

.student-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.student-grade-select,
.student-sex-select {
  width: 100%;
  min-width: 76px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 7px 8px;
  border: 1px solid #d6e4f0;
  border-radius: 6px;
  font-size: 15px;
  color: #0369a1;
  background: #f0f9ff;
  cursor: pointer;
}
.student-grade-select:focus,
.student-sex-select:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.4);
}

.student-text-input {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid #d6e4f0;
  border-radius: 6px;
  font-size: 15px;
  color: #0f172a;
  background: #fff;
}
.student-text-input:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.4);
}
.student-text-input::placeholder {
  color: #94a3b8;
}

.directory-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 14px 0 4px;
}

.dir-page-btn {
  border: 1px solid #dbe7f3;
  min-height: 42px;
  padding: 8px 22px;
  border-radius: 10px;
  background: #fff;
  color: #16a34a;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.dir-page-btn:hover:not(:disabled) {
  background: #f0fdf4;
  border-color: #93c5fd;
}

.dir-page-btn:disabled {
  background: #f8fafc;
  color: #cbd5e1;
  cursor: not-allowed;
  border-color: #e2e8f0;
}

.dir-page-info {
  font-size: 15px;
  font-weight: 600;
  color: #64748b;
}

.assign-class-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.assign-class-btn:hover {
  background: #15803d;
}

.assign-class-msg {
  margin-top: 10px;
  font-size: 13px;
  min-height: 18px;
  padding: 0;
  border-radius: 6px;
  transition: background .2s ease, color .2s ease, padding .2s ease, border-color .2s ease;
}
.assign-class-msg.show {
  padding: 8px 12px;
  margin-top: 10px;
  font-weight: 600;
}
.assign-class-msg.success.show {
  color: #14532d;
  background: #dcfce7;
  border: 1px solid #86efac;
}
.assign-class-msg.error.show {
  color: #7f1d1d;
  background: #fee2e2;
  border: 1px solid #fca5a5;
}
.parent-sheet-wrap {
  padding: 0 14px 18px;
}

.parent-sheet-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}

.parent-sheet-modal.open {
  display: flex;
}

.parent-sheet-modal-dialog,
.parent-sheet-dialog {
  width: min(980px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  position: relative;
}

.parent-sheet-modal-close {
  position: sticky;
  top: 0;
  margin-left: auto;
  display: block;
  border: 0;
  background: #0f172a;
  color: #fff;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
}

#parent-sheet-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

/* ===== 回执图片弹窗 ===== */
#receipt-image-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 8px 8px;
}

.receipt-image-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.receipt-image-canvas {
  width: 720px;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

.receipt-image-actions {
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
}

.receipt-image-copy-button {
  border: 0;
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
  color: #fff;
  min-height: 44px;
  padding: 10px 28px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(3, 105, 161, 0.28);
}

.receipt-image-copy-button:hover {
  filter: brightness(1.05);
}

.receipt-image-loading,
.receipt-image-error {
  padding: 40px 16px;
  color: #475569;
  font-size: 16px;
  text-align: center;
}

.natural-attendance-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1100;
}

.natural-attendance-modal.open {
  display: flex;
}

.natural-attendance-dialog {
  width: min(980px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dbe7f3;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
  display: grid;
  gap: 14px;
}

.natural-attendance-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.natural-attendance-head h3 {
  margin: 0;
  font-size: 26px;
  color: #0f172a;
}

.natural-attendance-head p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
}

.natural-attendance-close {
  border: 0;
  min-height: 42px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.natural-attendance-tools {
  display: grid;
  grid-template-columns: 1.5fr 160px;
  gap: 12px;
}

.natural-attendance-field {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #334155;
}

.natural-attendance-field select,
.natural-attendance-field input {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  font-size: 15px;
}

.natural-attendance-example {
  padding: 14px 16px;
  border: 1px solid #dbe7f3;
  border-radius: 16px;
  background: #f8fafc;
}

.natural-attendance-example strong {
  display: block;
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 16px;
}

.natural-attendance-example pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #475569;
}

.natural-attendance-input {
  width: 100%;
  min-height: 220px;
  padding: 14px;
  border: 1px solid #cfd8e3;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.7;
  resize: vertical;
}

.natural-attendance-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.natural-attendance-button {
  border: 0;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #16a34a;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.natural-attendance-button.secondary {
  background: #e2e8f0;
  color: #334155;
}

.natural-attendance-preview {
  display: grid;
  gap: 10px;
}

.natural-attendance-preview-item {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #dbe7f3;
  background: #fff;
}

.natural-attendance-preview-item.ok {
  border-color: #86efac;
  background: #f0fdf4;
}

.natural-attendance-preview-item.warn {
  border-color: #fdba74;
  background: #fff7ed;
}

.natural-attendance-preview-item.error {
  border-color: #fda4af;
  background: #fff1f2;
}

.natural-attendance-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.natural-attendance-preview-head strong {
  color: #0f172a;
  font-size: 17px;
}

.natural-attendance-preview-head span {
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.natural-attendance-preview-dates {
  display: grid;
  gap: 4px;
  color: #334155;
  font-size: 14px;
}

.natural-attendance-empty {
  padding: 16px;
  border-radius: 14px;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
}

.parent-sheet-card {
  border: 1px solid #d7e6f6;
  border-radius: 24px;
  background: #ffffff;
  padding: 24px;
  display: grid;
  gap: 20px;
}

.parent-sheet-banner {
  margin: -24px -24px 4px;
  padding: 26px 18px 28px;
  border-radius: 24px 24px 20px 20px;
  background: #ecfeff;
  text-align: center;
}

.parent-sheet-banner-title {
  color: #0f766e;
  font-size: 30px;
  font-weight: 900;
}

.parent-sheet-banner-subtitle {
  margin-top: 8px;
  color: #64748b;
  font-size: 17px;
  font-weight: 800;
}

.parent-sheet-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 18px 24px;
  border: 1px solid #dbe7f3;
  border-radius: 22px;
  background: #f8fafc;
}

.parent-sheet-kicker {
  color: #15803d;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
}

.parent-sheet-head h2 {
  margin: 8px 0 8px;
  font-size: 34px;
  color: #0f172a;
}

.parent-sheet-head p {
  margin: 0;
  color: #475569;
  font-size: 15px;
}

.parent-sheet-total {
  min-width: 220px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  display: grid;
  gap: 10px;
  text-align: center;
}

.parent-sheet-total span {
  color: #c2410c;
  font-size: 18px;
  font-weight: 900;
}

.parent-sheet-total strong {
  color: #ea580c;
  font-size: 34px;
  line-height: 1;
}

.parent-sheet-section {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.parent-sheet-label {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.parent-sheet-count {
  min-width: 156px;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid #fdba74;
  border-radius: 999px;
  background: #fff;
  color: #c2410c;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.parent-sheet-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #fffaf4;
  border-color: #fdba74;
}

.parent-sheet-summary-desc {
  margin-top: 6px;
  color: #64748b;
  font-size: 15px;
  font-weight: 800;
}

.parent-sheet-billing-lines {
  background: #fffaf4;
  border-color: #fdba74;
}

.parent-sheet-line {
  color: #334155;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
}

.parent-sheet-line.gift {
  color: #0f766e;
}

.parent-sheet-line.discount {
  color: #0e7490;
  font-weight: 800;
}

.parent-sheet-line.total {
  color: #ea580c;
  font-size: 20px;
  font-weight: 900;
}

.parent-sheet-calendar-section {
  background: #fffaf4;
  border-color: #fdba74;
}

.parent-sheet-calendars {
  display: grid;
  gap: 22px;
}

.parent-sheet-calendar-month {
  display: grid;
  gap: 10px;
  padding: 20px 22px 24px;
  border: 1px solid #f1c48d;
  border-radius: 20px;
  background: #fff;
}

.parent-sheet-calendar-title {
  text-align: center;
  color: #0f172a;
  font-size: 30px;
  font-weight: 900;
}

.parent-sheet-calendar-weekdays,
.parent-sheet-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.parent-sheet-calendar-weekdays span {
  text-align: center;
  color: #9a3412;
  font-size: 14px;
  font-weight: 900;
  padding-bottom: 6px;
}

.parent-sheet-calendar-grid {
  border: 1px solid #f1c48d;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.parent-sheet-calendar-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  border-right: 1px solid #f1c48d;
  border-bottom: 1px solid #f1c48d;
}

.parent-sheet-calendar-cell:nth-child(7n) {
  border-right: 0;
}

.parent-sheet-calendar-cell:nth-last-child(-n + 7) {
  border-bottom: 0;
}

.parent-sheet-calendar-cell.is-empty {
  background: #f8fafc;
}

.parent-sheet-calendar-cell.has-attend {
  background: #f0fdf4;
}

.parent-sheet-calendar-cell.has-leave {
  background: #fff1f2;
}

.parent-sheet-calendar-day {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.parent-sheet-calendar-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 22px;
  font-weight: 900;
}

.parent-sheet-calendar-mark.attend {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #16a34a;
}

.parent-sheet-calendar-mark.leave {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
}

.parent-sheet-table-section {
  background: #fffaf4;
  border-color: #fdba74;
}

.parent-sheet-table {
  display: grid;
  grid-template-columns: repeat(var(--parent-sheet-table-columns, 1), minmax(0, 1fr));
  border: 1px solid #f1c48d;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.parent-sheet-table.columns-1 {
  --parent-sheet-table-columns: 1;
}

.parent-sheet-table.columns-2 {
  --parent-sheet-table-columns: 2;
}

.parent-sheet-table.columns-4 {
  --parent-sheet-table-columns: 4;
}

.parent-sheet-table-column {
  display: grid;
  grid-template-rows: 46px repeat(var(--parent-sheet-table-rows, 1), 48px);
  background: #fffdf9;
  border-right: 1px solid #f0cc9e;
}

.parent-sheet-table-column:last-child {
  border-right: 0;
}

.parent-sheet-table-column.tinted {
  background: #fff7ed;
}

.parent-sheet-table-head,
.parent-sheet-table-row {
  display: grid;
  grid-template-columns: 66px minmax(120px, 1fr) 76px;
  align-items: center;
  text-align: center;
}

.parent-sheet-table-head {
  color: #9a3412;
  font-size: 14px;
  font-weight: 900;
  border-bottom: 1px solid #f0cc9e;
}

.parent-sheet-table-row {
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  border-bottom: 1px solid #f0cc9e;
}

.parent-sheet-table-row:last-child {
  border-bottom: 0;
}

.parent-sheet-table-head span,
.parent-sheet-table-row span {
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #f0cc9e;
}

.parent-sheet-table-head span:last-child,
.parent-sheet-table-row span:last-child {
  border-right: 0;
}

.parent-sheet-table-status.attend {
  color: #16a34a;
}

.parent-sheet-table-status.leave {
  color: #dc2626;
}

.parent-sheet-note {
  color: #475569;
  font-size: 14px;
  line-height: 1.7;
  padding: 14px 18px;
  border-radius: 16px;
  background: #f8fafc;
}

.billing-controls {
  display: grid;
  gap: 14px;
  padding: 16px 22px;
}

.billing-reward-panel {
  margin-bottom: 0;
  padding: 14px 16px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-card);
  box-shadow: var(--app-shadow);
}

.billing-reward-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  color: var(--app-muted);
  font-size: 13px;
}

.billing-unpaid-view-switch {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid #dcfce7;
  border-radius: 18px;
  background: #f8fbff;
}

.billing-unpaid-view-button {
  border: 1px solid #cbd5e1;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  background: #fff;
  color: #334155;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.billing-unpaid-view-button.active {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
}

.billing-reward-head strong {
  color: var(--app-primary-d);
  font-size: 13px;
  font-weight: 700;
}

.billing-collapsible-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #fff;
  color: var(--app-primary);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.billing-collapsible-toggle:hover {
  background: #f1f5ff;
}

.billing-reward-body {
  margin-top: 10px;
}

.billing-collapsible.is-collapsed .billing-reward-body {
  display: none;
}

.billing-collapsible.is-collapsed .billing-reward-head {
  margin-bottom: 0;
}

.billing-reward-bar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.billing-reward-bar .billing-reward-field {
  min-width: 0;
}

.billing-reward-bar .billing-input {
  width: auto;
  min-width: 170px;
  max-width: 220px;
}

.billing-reward-bar .billing-select {
  width: auto;
  min-width: 130px;
}

.billing-reward-submit {
  flex: 0 0 auto;
  align-self: flex-end;
  min-height: 42px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--app-radius);
  background: #16a34a;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.billing-reward-submit:hover {
  background: #15803d;
}

.billing-reward-person-card .billing-input,
.billing-reward-value-field .billing-input {
  max-width: 220px;
}

.billing-reward-action-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: #fff;
}

.billing-reward-person-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
}

.billing-reward-person-card.is-hidden {
  display: none;
}

.billing-reward-person-card-source {
  border: 1px solid #bbf7d0;
  background: #f5f9ff;
}

.billing-reward-person-card-target {
  border: 1px solid #fbcfe8;
  background: #fdf5fb;
}

.billing-reward-person-title {
  color: var(--app-text);
  font-size: 15px;
  font-weight: 800;
}

.billing-reward-person-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.billing-reward-field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: #334155;
  font-weight: 600;
}

.billing-reward-field.is-hidden {
  display: none;
}

.billing-reward-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 8px;
}

.billing-reward-type-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 240px;
}

.billing-reward-type-button {
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #475569;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.billing-reward-type-button.active {
  border-color: #16a34a;
  background: #dcfce7;
  color: #15803d;
  box-shadow: inset 0 0 0 1px #93c5fd;
}

.billing-reward-value-field {
  display: grid;
  gap: 6px;
}

.billing-reward-value-field span {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.billing-reward-action {
  display: flex;
  align-items: flex-end;
}

.billing-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-card);
  box-shadow: var(--app-shadow);
}

.billing-search-label,
.billing-cutoff-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--app-text);
}

.billing-search-label {
  min-width: 420px;
  padding: 8px 12px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: #f8fafc;
  flex-wrap: wrap;
}

.billing-search-label input,
.billing-cutoff-label input {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  font-size: 15px;
  background: #fff;
  outline: none;
}

.billing-search-label input:focus,
.billing-cutoff-label input:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}

.billing-search-label input {
  flex: 1 1 180px;
}

.billing-search-button,
.billing-search-clear {
  border: 0;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.billing-search-button {
  background: #16a34a;
  color: #fff;
}

.billing-search-clear {
  background: #e2e8f0;
  color: #334155;
}

.billing-student-pages {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #f8fbff;
}

.billing-student-page-button {
  border: 0;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.billing-student-page-button:disabled {
  background: #cbd5e1;
  color: #f8fafc;
  cursor: not-allowed;
}

.billing-student-page-text {
  min-width: 96px;
  text-align: center;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.billing-table-wrap {
  overflow-x: auto;
  border: 1px solid #d8d8d8;
  border-radius: 14px;
  background: #fff;
}

/* 固定表头行（sticky，滚动时钉在顶部） */
.billing-table-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  font-size: 15px;
  font-weight: 800;
  color: #475569;
  white-space: nowrap;
}
.billing-table-header .billing-th {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.billing-table-header .billing-th-index { width: 40px; }
.billing-table-header .billing-th-name { width: 100px; justify-content: flex-start; padding-left: 2px; }
.billing-table-header .billing-th-teacher { width: 70px; justify-content: flex-start; padding-left: 2px; }
.billing-table-header .billing-th-detail { width: 118px; }
.billing-table-header .billing-th-amount { width: 84px; }
.billing-table-header .billing-th-chargecol { width: 118px; }
.billing-table-header .billing-th-preview { width: 72px; }
.billing-table-header .billing-th-copyimg { width: 106px; }
.billing-table-header .billing-th-chargebtn { width: 106px; }
.billing-table-header .billing-th-copyreceipt { width: 106px; }

/* 姓名行对齐分组（与表头列对应：姓名 / 教师拆为两列） */
.billing-student-name {
  flex: 0 0 100px;
  min-width: 80px;
}
.billing-student-teacher {
  flex: 0 0 70px;
  min-width: 50px;
}

/* 列竖分隔线：让 姓名 / 教师 / 详情 三列区分更明显（空老师也保留列宽不塌） */
.billing-table-header .billing-th-name,
.billing-table-header .billing-th-teacher,
.billing-table-header .billing-th-detail,
.billing-student-title .billing-student-name,
.billing-student-title .billing-student-teacher,
.billing-student-title .billing-expand-toggle {
  border-right: 1px solid #dbe7f3;
  box-sizing: border-box;
}
/* 竖线后留一点呼吸，文本不贴线 */
.billing-student-title .billing-student-name,
.billing-student-title .billing-student-teacher {
  padding-right: 10px;
}

.billing-card-list {
  display: grid;
  gap: 18px;
}

.billing-empty-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 34px 24px;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  background: #f8fafc;
  text-align: center;
}

.billing-empty-title {
  color: #0f172a;
  font-size: 20px;
  font-weight: 900;
}

.billing-empty-desc {
  color: #64748b;
  font-size: 15px;
  font-weight: 700;
}

.billing-empty-clear {
  min-height: 42px;
  padding: 8px 18px;
}

.billing-student-card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-card);
  padding: 16px;
  display: grid;
  gap: 14px;
  box-shadow: var(--app-shadow);
}

.billing-student-card:nth-child(odd),
.billing-student-card:nth-child(even) {
  background: var(--app-card);
  border-color: var(--app-border);
}

.billing-student-card:nth-child(odd) .billing-student-index,
.billing-student-card:nth-child(even) .billing-student-index {
  background: #f0fdf4;
  color: #15803d;
}

.billing-student-card:nth-child(odd) .billing-card-block-title,
.billing-student-card:nth-child(odd) .billing-student-name,
.billing-student-card:nth-child(even) .billing-card-block-title,
.billing-student-card:nth-child(even) .billing-student-name {
  color: var(--app-text);
}


.billing-student-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.billing-student-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* 姓名行内联操作区（7/26 调整：应收金额 / 本次收费 / 四按钮 移入一行） */
.billing-title-amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 84px;
  width: 84px;
  padding: 7px 0;
  border: 1px solid #1677ff;
  border-left: 4px solid #1677ff;
  border-radius: 8px;
  background: #f0f7ff;
  color: #0958d9;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  min-height: 40px;
}

.billing-title-amount-label {
  font-size: 12px;
  font-weight: 700;
  color: #0958d9;
}

.billing-title-charge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 118px;
  white-space: nowrap;
}

.billing-title-charge .charge-count-input {
  width: 92px;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  text-align: right;
}

.billing-title-yuan {
  font-size: 17px;
  font-weight: 700;
  color: var(--app-muted);
}

.billing-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-left: 0;
}

.billing-title-actions .billing-action-btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}

.billing-title-actions .billing-charge-button-primary {
  background: #1677ff;
  border-color: #1677ff;
  color: #fff;
}

.billing-student-index {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #f0fdf4;
  color: #15803d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
}

.billing-student-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--app-text);
  letter-spacing: .5px;
  line-height: 1.1;
  padding: 4px 14px 6px;
  border-radius: 12px;
  background: #eef4ff;
  box-shadow: inset 0 0 0 1px #dcfce7;
}

.billing-student-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

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

/* 录入带：横向 flex，登记收费按钮紧跟应收金额，靠左自然排布 */
.billing-entry-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  grid-template-columns: none;
}

.billing-entry-layout {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 42px;
  grid-template-columns: none;
}

.billing-entry-layout .billing-entry-bar {
  flex: 0 0 auto;
  padding: 22px 26px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fbfdff;
}

.billing-entry-layout .billing-status-bar {
  flex: 1 1 540px;
  min-width: min(620px, 100%);
  margin-top: 0;
  padding: 14px 18px;
  border: 1px solid #dbe7f3;
  border-radius: 14px;
  background: #ffffff;
}

.billing-entry-bar .billing-card-field {
  flex: 0 0 auto;
  min-width: 92px;
}

.billing-entry-bar .tuition-input,
.billing-entry-bar .charge-count-input {
  width: 96px;
}

.billing-entry-bar .discount-select {
  width: 180px;
  max-width: none;
  min-height: 42px;
  height: 42px;
  box-sizing: border-box;
  padding: 8px 40px 8px 16px;
  border-radius: 12px;
  border: 1.5px solid #cbd8e6;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}

.billing-discount-picker {
  position: relative;
  width: 180px;
  height: 42px;
}

.billing-discount-picker.locked {
  opacity: 0.7;
}

.billing-discount-picker.locked .discount-select {
  background: #f8fafc;
  border-color: #fb923c;
  color: #c2410c;
}

.billing-discount-picker .discount-select {
  width: 100%;
  max-width: none;
}

.billing-save-badge {
  position: absolute;
  top: -22px;
  left: 0;
  font-size: 12px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  font-weight: 700;
}
.billing-save-badge.saving {
  color: #64748b;
  background: #f1f5f9;
}
.billing-save-badge.saved {
  color: #15803d;
  background: #dcfce7;
}
.billing-save-badge.failed {
  color: #b91c1c;
  background: #fee2e2;
  pointer-events: auto;
  cursor: pointer;
}


.billing-discount-arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 0 12px 12px 0;
  background: transparent;
  cursor: pointer;
}

.billing-discount-arrow:hover {
  background: #f8fbff;
}

.billing-discount-arrow::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 14px;
  width: 8px;
  height: 8px;
  border-right: 2.4px solid #15803d;
  border-bottom: 2.4px solid #15803d;
  transform: rotate(45deg);
}

.billing-discount-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  display: none;
  width: 100%;
  padding: 8px;
  border: 1px solid #dbe5ef;
  border-radius: var(--app-radius-sm);
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
}

.billing-discount-picker.open .billing-discount-menu {
  display: grid;
  gap: 4px;
}

.billing-discount-option {
  min-height: 34px;
  border: 0;
  border-radius: var(--app-radius-sm);
  background: #fff;
  color: #334155;
  font-size: 16px;
  font-weight: 900;
  text-align: left;
  padding: 6px 10px;
  cursor: pointer;
}

.billing-discount-option:hover {
  background: #f0fdf4;
  color: #15803d;
}

.billing-entry-bar .billing-card-value {
  min-width: 84px;
}

.billing-entry-bar .billing-receivable-field {
  min-width: 120px;
}

.billing-entry-bar .billing-receivable-field .billing-card-value {
  font-size: 17px;
  font-weight: 800;
  color: #b45309;
}

.billing-entry-charge {
  display: flex;
  align-items: flex-end;
  align-self: flex-end;
}

.billing-entry-charge .billing-charge-button {
  min-height: 42px;
}

.billing-charge-preview,
.refund-preview-text {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--app-radius-sm);
  border: 1px solid #dbe7f3;
  background: #f8fbff;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

/* 收费卡顶部：按最终确认方案压缩成左右两块，按钮固定靠右 */
.billing-student-card {
  gap: 14px;
}

.billing-student-head {
  align-items: flex-start;
  flex-wrap: nowrap;
}

.billing-student-title {
  flex: 0 0 auto;
}

.billing-student-index {
  width: 38px;
  height: 38px;
  font-size: 17px;
  font-weight: 900;
}

.billing-student-name {
  font-size: 22px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 3px 16px 5px;
  border-radius: var(--app-radius-sm);
}

.billing-student-actions {
  margin-left: auto;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: nowrap;
}

.billing-student-actions .billing-copy-sheet-button,
.billing-student-actions .billing-copy-receipt-button,
.billing-student-actions .billing-parent-sheet-button {
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--app-radius-sm);
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.billing-student-top.billing-entry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.86fr);
  gap: 24px;
  align-items: stretch;
}

.billing-entry-layout .billing-entry-bar,
.billing-entry-layout .billing-status-bar {
  min-height: 64px;
  border-radius: var(--app-radius);
  align-self: stretch;
}

.billing-entry-layout .billing-entry-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
  padding: 10px 16px;
  background: #fbfdff;
}

.billing-entry-layout .billing-status-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 10px 18px;
  background: #fbfdff;
}

.billing-entry-bar .billing-card-field {
  min-width: 0;
}

.billing-entry-bar .billing-card-field > span {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 900;
  color: #475569;
}

.billing-entry-bar .tuition-input,
.billing-entry-bar .charge-count-input,
.billing-entry-bar .discount-select {
  height: 40px;
  min-height: 40px;
  border-radius: var(--app-radius-sm);
  font-size: 18px;
  font-weight: 900;
}

.billing-entry-bar .tuition-input,
.billing-entry-bar .charge-count-input {
  width: 96px;
}

.billing-entry-bar .discount-select,
.billing-discount-picker {
  width: 120px;
}

.billing-discount-picker {
  height: 40px;
}

.billing-discount-arrow {
  width: 40px;
  height: 40px;
}

.billing-discount-arrow::before {
  top: 14px;
}

.billing-entry-bar .billing-card-value {
  min-width: 84px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #dbe5ef;
  border-radius: var(--app-radius-sm);
  background: #f8fafc;
  font-size: 18px;
  font-weight: 900;
}

.billing-entry-bar .billing-receivable-field {
  min-width: 112px;
}

.billing-entry-bar .billing-receivable-field > span {
  color: #c2410c;
}

.billing-entry-bar .billing-receivable-field .billing-card-value {
  min-width: 112px;
  border-color: #fdba74;
  background: #fff7ed;
  color: #ea580c;
}

.billing-entry-charge .billing-charge-button {
  min-height: 40px;
  padding: 0 20px;
  border-radius: var(--app-radius-sm);
  font-size: 16px;
  font-weight: 900;
}

.billing-status-label {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0;
  padding: 2px 12px;
  border: 1px solid #99f6e4;
  border-radius: 999px;
  background: #ecfeff;
  color: #0f766e;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.billing-balance-row {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 0;
}

.billing-balance-row .billing-card-field {
  min-width: 0;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--app-radius-sm);
  background: #fff;
}

.billing-balance-row .billing-card-field > span {
  font-size: 13px;
}

.billing-balance-row .billing-card-field .billing-card-value {
  font-size: 17px;
}

/* 状态带：inline chip 一行 */
.billing-balance-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

.billing-balance-row .billing-card-field {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 176px;
  padding: 8px 12px;
  border-radius: var(--app-radius-sm);
  border: 1px solid var(--app-border);
  background: #fff;
}

.billing-balance-row .billing-card-field > span {
  font-size: 14px;
  font-weight: 900;
}

.billing-balance-row .billing-card-field .billing-card-value {
  min-height: 0;
  padding: 0;
  border: 0;
  border-left: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
}

.billing-balance-row .billing-balance-field {
  border-color: #d9f2e3;
  border-left: 4px solid #22c55e;
  background: #fff;
}

.billing-balance-row .billing-gift-cash-field {
  border-color: #e2d9ff;
  border-left: 4px solid #8b5cf6;
  background: #fff;
}

.billing-balance-row .billing-gift-lesson-field {
  border-color: #c8f4f6;
  border-left: 4px solid #14b8a6;
  background: #fff;
}

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

.refund-summary-row .billing-card-field-small {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--app-radius-sm);
  padding: 10px 12px;
}

.refund-summary-row .billing-card-field-small > span {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.refund-summary-row .billing-card-value {
  min-height: 0;
  padding: 2px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 17px;
  font-weight: 800;
}

.refund-summary-row .billing-balance-field > span { color: #15803d; }
.refund-summary-row .billing-gift-cash-field > span { color: #a16207; }
.refund-summary-row .billing-gift-lesson-field > span { color: #16a34a; }
.refund-summary-row .billing-receivable-field > span { color: #e11d48; }



.billing-card-field {
  display: grid;
  gap: 6px;
}

.billing-card-field span {
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.billing-card-field-small {
  min-width: 0;
}

.billing-card-value {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: #f8fafc;
  font-size: 14px;
  color: #0f172a;
}

.billing-balance-field > span {
  color: #166534;
}

.billing-balance-field .billing-card-value {
  border-color: #86efac;
  border-left: 6px solid #22c55e;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.billing-balance-field .billing-prepaid-tip {
  color: #15803d;
}

.billing-gift-cash-field > span {
  color: #7c3aed;
}

.billing-gift-cash-field .billing-card-value {
  border-color: #c4b5fd;
  border-left: 6px solid #8b5cf6;
  background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%);
}

.billing-gift-lesson-field > span {
  color: #0f766e;
}

.billing-gift-lesson-field .billing-card-value {
  border-color: #99f6e4;
  border-left: 6px solid #14b8a6;
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
}

.billing-receivable-field > span {
  color: #b45309;
}

.billing-receivable-field .billing-card-value {
  border-color: #fdba74;
  border-left: 6px solid #f97316;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.billing-receivable-field .billing-prepaid-tip {
  color: #c2410c;
}

.billing-card-charge .billing-charge-button {
  min-height: 38px;
}

.billing-card-block {
  display: grid;
  gap: 14px;
}

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

.billing-card-block-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.billing-unpaid-board {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #fdba74;
  border-radius: 18px;
  background: #fffaf4;
}

.billing-unpaid-board.is-clear {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.billing-unpaid-count {
  font-size: 16px;
  font-weight: 700;
  color: #c2410c;
}

.billing-unpaid-board.is-clear .billing-unpaid-count {
  color: #166534;
}

.billing-unpaid-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.billing-unpaid-legend {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.billing-unpaid-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.billing-unpaid-legend i,
.billing-unpaid-calendar-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-style: normal;
  font-weight: 900;
}

.billing-unpaid-legend i {
  width: 22px;
  height: 22px;
  font-size: 14px;
}

.billing-unpaid-legend .attend,
.billing-unpaid-calendar-mark.attend {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #16a34a;
}

.billing-unpaid-legend .leave,
.billing-unpaid-calendar-mark.leave {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
}

.billing-unpaid-table {
  display: grid;
  grid-template-columns: repeat(var(--billing-unpaid-columns, 1), minmax(0, 1fr));
  border: 1px solid #f1c48d;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.billing-unpaid-table.columns-1 {
  --billing-unpaid-columns: 1;
  max-width: 520px;
}

.billing-unpaid-table.columns-2 {
  --billing-unpaid-columns: 2;
  max-width: 920px;
}

.billing-unpaid-table.columns-4 {
  --billing-unpaid-columns: 4;
}

.billing-unpaid-table-column {
  display: grid;
  grid-template-rows: 38px repeat(var(--billing-unpaid-rows, 1), 38px);
  background: #fffdf9;
  border-right: 1px solid #f0cc9e;
}

.billing-unpaid-table-column:last-child {
  border-right: 0;
}

.billing-unpaid-table-column.tinted {
  background: #fff7ed;
}

.billing-unpaid-table-head,
.billing-unpaid-table-row {
  display: grid;
  grid-template-columns: 64px minmax(130px, 1fr) 78px;
  align-items: center;
  text-align: center;
}

.billing-unpaid-table-head {
  color: #9a3412;
  font-size: 14px;
  font-weight: 900;
  border-bottom: 1px solid #f0cc9e;
}

.billing-unpaid-table-row {
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  border-bottom: 1px solid #f0cc9e;
}

.billing-unpaid-table-row:last-child {
  border-bottom: 0;
}

.billing-unpaid-table-head span,
.billing-unpaid-table-row span {
  min-width: 0;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #f0cc9e;
}

.billing-unpaid-table-head span:last-child,
.billing-unpaid-table-row span:last-child {
  border-right: 0;
}

.billing-unpaid-status.attend {
  color: #16a34a;
}

.billing-unpaid-status.leave {
  color: #dc2626;
}

.billing-unpaid-calendar-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.billing-unpaid-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.billing-unpaid-calendar-page-text {
  flex: 1;
  text-align: center;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.billing-unpaid-calendar-nav {
  min-width: 76px;
  min-height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #1e293b;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.billing-unpaid-calendar-nav:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.billing-unpaid-calendar-wrap.two-months {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.billing-unpaid-calendar-month {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #f1c48d;
  border-radius: 16px;
  background: #fff;
}

.billing-unpaid-calendar-month.is-placeholder {
  min-height: 100%;
  align-content: center;
  justify-items: center;
  border-style: dashed;
  background: #f8fafc;
  color: #94a3b8;
}

.billing-unpaid-calendar-placeholder-title {
  font-size: 17px;
  font-weight: 900;
  color: #64748b;
}

.billing-unpaid-calendar-placeholder-text {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #94a3b8;
  text-align: center;
}

.billing-unpaid-calendar-title {
  text-align: center;
  color: #0f172a;
  font-size: 24px;
  font-weight: 900;
}

.billing-unpaid-calendar-weekdays,
.billing-unpaid-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.billing-unpaid-calendar-weekdays span {
  text-align: center;
  color: #9a3412;
  font-size: 13px;
  font-weight: 900;
  padding-bottom: 4px;
}

.billing-unpaid-calendar-grid {
  border: 1px solid #f1c48d;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.billing-unpaid-calendar-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  padding: 6px;
  border-right: 1px solid #f1c48d;
  border-bottom: 1px solid #f1c48d;
  background: #fff;
}

.billing-unpaid-calendar-cell:nth-child(7n) {
  border-right: 0;
}

.billing-unpaid-calendar-cell:nth-last-child(-n + 7) {
  border-bottom: 0;
}

.billing-unpaid-calendar-cell.is-empty {
  background: #f8fafc;
}

.billing-unpaid-calendar-cell.has-attend {
  background: #f0fdf4;
}

.billing-unpaid-calendar-cell.has-leave {
  background: #fff1f2;
}

.billing-unpaid-calendar-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 18px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.billing-unpaid-calendar-mark {
  width: 30px;
  height: 30px;
  font-size: 22px;
  line-height: 1;
}

.billing-unpaid-calendar-more {
  color: #9a3412;
  font-size: 13px;
  font-weight: 800;
  padding: 2px 4px 0;
}

.billing-unpaid-empty {
  color: #166534;
  font-size: 13px;
  font-weight: 600;
}

.billing-input,
.billing-select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  font-size: 14px;
  background: #fff;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.billing-input:focus,
.billing-select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}

.billing-scroll-cell {
  max-height: none;
  overflow: visible;
  white-space: normal;
  line-height: 1.5;
  padding-right: 4px;
  display: grid;
  gap: 8px;
}

.billing-history-cell {
  min-width: 280px;
  color: #334155;
}

.billing-history-card {
  border: 1px solid #dbe7f3;
  border-radius: 12px;
  background: #f8fbff;
  padding: 8px 10px;
}

.billing-reward-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  background: #fffbeb;
  color: #92400e;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
}
.billing-reward-card-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.billing-reward-card-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.billing-reward-card-label {
  font-size: 13px;
  font-weight: 800;
  color: #92400e;
}
.billing-reward-card-time {
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.billing-reward-card-parties {
  font-size: 12px;
  font-weight: 600;
  color: #78350f;
  line-height: 1.4;
}
.billing-reward-card-note {
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 2px 8px;
  display: inline-block;
  align-self: flex-start;
}

.billing-history-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.billing-history-date {
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
}

.billing-history-meta {
  color: #15803d;
  font-size: 12px;
  font-weight: 600;
}

.billing-history-amount {
  color: #166534;
  font-size: 12px;
  font-weight: 700;
}

.billing-history-note {
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.billing-history-delete {
  border: 0;
  background: #fee2e2;
  color: #b91c1c;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.billing-history-delete.locked,
.billing-history-delete:disabled {
  background: #e5e7eb;
  color: #94a3b8;
  cursor: not-allowed;
}

.billing-history-empty {
  color: #94a3b8;
  font-size: 12px;
}

.billing-method-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

.billing-method-tag {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.billing-method-tag.selected {
  background: #dcfce7;
  border-color: #16a34a;
  color: #15803d;
}

.billing-lock-button {
  border: 1px solid #cbd5e1;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  min-width: 132px;
}

.billing-lock-button.lock {
  background: #f8fafc;
  color: #475569;
}

.billing-lock-button.unlock {
  background: #fff7ed;
  border-color: #fb923c;
  color: #c2410c;
}

.billing-compact-input,
.billing-compact-select {
  max-width: 110px;
}

.billing-prepaid-tip {
  display: inline-block;
  margin-top: 4px;
  color: #16a34a;
  font-size: 12px;
  font-weight: 600;
}

.billing-date-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border: 1px solid transparent;
  line-height: 1.2;
}

.billing-date-chip.unpaid {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.billing-count-col,
.billing-amount-col {
  min-width: 110px;
}

.billing-action-stack {
  display: grid;
  gap: 8px;
}

.billing-charge-button {
  border: 0;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: var(--app-radius-sm);
  background: #16a34a;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease;
}

.billing-charge-button:hover {
  background: #15803d;
}

.billing-charge-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ===== 统一 KPI 小卡片原语（各板块复用） ===== */
.kpi-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--kpi-pad);
  border-radius: var(--app-radius);
  border: 1px solid var(--app-border);
  background: var(--app-card);
  box-shadow: var(--app-shadow);
}

.kpi-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #516072;
}

.kpi-value {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--app-text);
}

.kpi-unit {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--app-muted);
}

/* 语义配色修饰类 */
.kpi-card--accent {
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  border-color: transparent;
}
.kpi-card--accent .kpi-label,
.kpi-card--accent .kpi-value,
.kpi-card--accent .kpi-unit { color: #f8fffe; }

.kpi-card--good {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #86efac;
}
.kpi-card--warn {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  border-color: #fdba74;
}
.kpi-card--info {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
}
.kpi-card--purple {
  background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%);
  border-color: #d8b4fe;
}

.kpi-card--danger {
  background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fca5a5;
}

.kpi-card--gray {
  background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
  border-color: #d1d5db;
}

.revenue-stats-wrap {
  padding: 0 14px 18px;
  display: grid;
  gap: 14px;
}

.ops-three-modules,
.ops-modules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.ops-modules-grid .ops-module-wide,
.ops-modules-grid .ops-module-narrow {
  grid-column: span 1;
}

@media (min-width: 1400px) {
  .ops-three-modules,
  .ops-modules-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ops-modules-grid .ops-module-wide {
    grid-column: span 2;
  }

  .ops-modules-grid .ops-module-narrow {
    grid-column: span 1;
  }
}

.trial-board-wrap {
  padding: 0 14px 18px;
  max-width: 1680px;
  margin: 0 auto;
}

.revenue-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.revenue-date-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.revenue-preset-btn {
  padding: 8px 14px;
  border: 1px solid #dbe7f3;
  border-radius: 10px;
  background: #f8fbff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.revenue-preset-btn:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0369a1;
}

.revenue-preset-btn--active,
.revenue-preset-btn--active:hover {
  background: #0ea5e9;
  border-color: #0284c7;
  color: #fff;
}

.ops-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--kpi-gap);
}

/* 运营统计总览卡已统一为 .kpi-card */

.ops-balance-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ops-balance-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eef6ff;
  border: 1px solid #c8dcff;
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 600;
}

.revenue-month-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #dbe7f3;
  border-radius: 14px;
  background: #f8fbff;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
}

.revenue-month-label select {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  font-size: 16px;
  background: #fff;
}

.revenue-range-label input {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  font-size: 16px;
  background: #fff;
}

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

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

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

/* 运营统计页内统一字号/间距收敛（不影响其他板块） */
.ops-overview-grid .kpi-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.ops-overview-grid .kpi-value {
  font-size: 28px;
  line-height: 1.15;
}
.ops-overview-grid .kpi-unit {
  font-size: 12.5px;
  font-weight: 600;
}
/* 模块内卡片更窄：缩小数值与内边距，避免拥挤 */
.ops-module-section .kpi-value {
  font-size: 20px;
}
.ops-module-section .kpi-label {
  font-size: 12px;
}
.ops-module-section .kpi-card {
  padding: 12px;
  gap: 4px;
}

/* 收费/出勤/学生模块卡已统一为 .kpi-card */

.revenue-meta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.revenue-meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #dbe3ef;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
}

.revenue-chart-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid #dbe7f3;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.revenue-chart-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ops-module-section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid #dbe7f3;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.ops-module-finance {
  border-color: #bbf7d0;
  background: linear-gradient(180deg, #f8fbff 0%, #f0fdf4 100%);
}

.ops-module-attendance {
  border-color: #bbf7d0;
  background: linear-gradient(180deg, #f7fff9 0%, #ecfdf5 100%);
}

.ops-module-students {
  border-color: #fdba74;
  background: linear-gradient(180deg, #fffaf5 0%, #fff7ed 100%);
}

.ops-module-trials {
  border-color: #f9a8d4;
  background: linear-gradient(180deg, #fff9fc 0%, #fdf2f8 100%);
}

.ops-module-classes {
  border-color: #c4b5fd;
  background: linear-gradient(180deg, #fbfaff 0%, #f5f3ff 100%);
}

.ops-module-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.ops-module-header h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  color: #0f172a;
}

.ops-module-header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.ops-module-chart {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #dbe7f3;
  background: #fff;
}

.ops-module-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.ops-module-chart-head strong {
  font-size: 16px;
  color: #0f172a;
}

.ops-module-chart-head span {
  color: #64748b;
  font-size: 12.5px;
  font-weight: 500;
}

.ops-module-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.ops-module-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 12.5px;
  font-weight: 600;
}

.ops-module-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.class-ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--kpi-gap);
}

.ops-class-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid #dbe7f3;
  background: #fff;
}

.ops-class-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.ops-class-table th,
.ops-class-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #e6edf6;
  font-size: 14px;
}

.ops-class-table th {
  background: #eff6ff;
  color: #24416b;
  font-size: 13px;
  font-weight: 800;
}

.ops-class-table tbody tr:nth-child(even) {
  background: #fafcff;
}

.ops-rank-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ops-rank-card {
  border-radius: 20px;
  border: 1px solid #dbe7f3;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 18px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.ops-rank-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.ops-rank-head strong {
  font-size: 18px;
  color: #162033;
}

.ops-rank-head span {
  font-size: 12px;
  color: #64748b;
}

.ops-rank-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ops-rank-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed #d8e3f0;
}

.ops-rank-row:last-child {
  border-bottom: 0;
}

.ops-rank-index {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e0ecff;
  color: #1d4ed8;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 900;
}

.ops-rank-name {
  font-size: 15px;
  font-weight: 800;
  color: #172033;
}

.ops-rank-meta {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}

.ops-rank-value {
  font-size: 16px;
  font-weight: 900;
  color: #b45309;
  white-space: nowrap;
}

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

.ops-metric-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #dbe7f3;
  background: #fff;
}

.ops-metric-head {
  display: grid;
  gap: 4px;
}

.ops-metric-head strong {
  font-size: 18px;
  color: #0f172a;
}

.ops-metric-head span {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

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

.ops-metric-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.ops-metric-label {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-metric-bar-wrap {
  height: 12px;
  border-radius: 999px;
  background: #edf2f7;
  overflow: hidden;
}

.ops-metric-bar {
  height: 100%;
  border-radius: 999px;
}

.ops-metric-value {
  font-size: 13px;
  font-weight: 800;
  color: #172033;
  white-space: nowrap;
}

.class-ops-card {
  display: grid;
  gap: 6px;
}

.class-ops-name {
  color: #4c1d95;
  font-size: 18px;
  font-weight: 800;
}

.class-ops-line {
  color: #475569;
  font-size: 14px;
  font-weight: 700;
}

.revenue-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.revenue-chart-head strong {
  font-size: 18px;
  color: #0f172a;
}

.revenue-chart-head span {
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
}

.revenue-chart-svg {
  width: 100%;
  height: 180px;
  display: block;
}

/* 试听趋势取消 compact 特殊宽度，与模块同宽 */
.ops-module-chart--compact .revenue-chart-svg {
  width: 100%;
  min-width: 0;
}

.revenue-grid-line {
  stroke: #e2e8f0;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.revenue-y-label {
  fill: #64748b;
  font-size: 10px;
  font-weight: 500;
}

.ops-student-change-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ops-student-change-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  border-radius: 16px;
  border: 1.5px solid;
  background: #fff;
}

.ops-student-change-label {
  font-size: 13px;
  font-weight: 700;
}

.ops-student-change-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}

.ops-student-change-unit {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.revenue-area {
  fill-opacity: 0.12;
  stroke: none;
}

.revenue-x-label {
  fill: #94a3b8;
  font-size: 10px;
  font-weight: 500;
}

.revenue-bar {
  fill: #2563eb;
  transition: opacity 0.15s;
}

.revenue-bar:hover {
  opacity: 0.82;
}

.revenue-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.revenue-line-money {
  stroke: #16a34a;
}

.revenue-line-lesson {
  stroke: #16a34a;
}

.revenue-line-trial {
  stroke: #ec4899;
}

.revenue-point {
  fill: #16a34a;
  stroke: #ffffff;
  stroke-width: 2;
}

.revenue-point-current {
  fill: #16a34a;
}

.revenue-point-peak {
  fill: #f59e0b;
}

.revenue-point-lesson {
  fill: #16a34a;
}

.revenue-point-trial {
  fill: #ec4899;
}

.revenue-point-label {
  fill: #0f172a;
  font-size: 11px;
  font-weight: 700;
}

.revenue-point-label.trial {
  fill: #9d174d;
}

.revenue-empty {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #f8fafc;
  color: #64748b;
  font-size: 16px;
  font-weight: 700;
}

.trial-layout {
  display: grid;
  gap: 16px;
}

/* === 页面顶部：标题 + 主操作 === */
.trial-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 12px;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 4px;
  gap: 14px;
  flex-wrap: wrap;
}
.trial-page-title {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.5px;
}
/* 试听页 KPI 值收敛：避免 28px 倒挂压过页标题，建立清晰层级 */
.trial-summary-grid .kpi-value {
  font-size: 24px;
}
.trial-fab-button {
  background: #16a34a;
  color: #fff;
  border: 0;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trial-fab-button:hover {
  background: #15803d;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35);
}
.trial-fab-button:active {
  transform: translateY(0);
}

/* === 概览区：KPI + 本周统计 并排 === */
.trial-overview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .trial-overview-row {
    grid-template-columns: 1fr;
  }
}

/* === 通用区块卡片 === */
.trial-section {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border: 1px solid #dbe7f3;
  border-radius: 18px;
  padding: 18px;
}
.trial-section-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.3px;
}
.trial-section-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  margin-left: auto;
}

/* === KPI 区块（4 卡 2×2） === */
.trial-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* === 列表区：筛选 + 时间线 === */
.trial-list-section {
  /* 继承 .trial-section */
}
.trial-filter-row {
  background: #f1f5f9;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* === 表单模态弹窗 === */
.trial-form-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.45);
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
}
.trial-form-modal[hidden] {
  display: none;
}
.trial-form-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid #dbe7f3;
  padding: 28px 32px;
  width: 100%;
  max-width: 1200px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}
.trial-form-card .trial-form {
  padding: 0;
  background: transparent;
  border: 0;
}
.trial-form-card .trial-field {
  font-size: 16px;
  gap: 12px;
}
.trial-form-card .trial-field input,
.trial-form-card .trial-field select {
  min-height: 50px;
  padding: 12px 14px;
  font-size: 17px;
  border-radius: 10px;
}
.trial-form-card .trial-submit-button {
  min-height: 52px;
  font-size: 17px;
  padding: 12px 28px;
}
.trial-form-card-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.trial-form-close {
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 24px;
  font-weight: 800;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}
.trial-form-close:hover {
  color: #0f172a;
}

.trial-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
  align-items: end;
  padding: 18px;
  border: 1px solid #dbe7f3;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

#trial-conflict-tip {
  grid-column: 1 / -1;
}

.trial-submit-button {
  grid-column: 1 / -1;
}

.trial-field {
  display: grid;
  gap: 6px;
  font-size: 15px;
  font-weight: 800;
  color: #334155;
}

.trial-field input,
.trial-field select {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  font-size: 16px;
}

.trial-field.hidden {
  display: none;
}

.trial-submit-button {
  border: 0;
  min-height: 44px;
  border-radius: 10px;
  background: #16a34a;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.trial-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--kpi-gap);
}

.trial-week-board {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dbe7f3;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.trial-week-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.trial-week-head strong {
  font-size: 20px;
  color: #0f172a;
}

.trial-week-head span {
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
}

.trial-week-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.trial-week-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  font-size: 14px;
  font-weight: 700;
}

.trial-week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.trial-week-card {
  display: grid;
  gap: 6px;
  padding: 12px 10px;
  border-radius: var(--app-radius-sm);
  border: 1px solid var(--app-border);
  background: var(--app-card);
  text-align: center;
}

.trial-weekday {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.trial-week-metric {
  font-size: 14px;
  color: #475569;
  font-weight: 700;
}

/* 本周日历 · B 方案热力矩阵（深色底 / 三色系） */
.trial-heatmap {
  margin-top: 14px;
  padding: 24px 28px;
  border-radius: 18px;
  background: #1f2937; /* 深灰底 */
  color: #e5e7eb;
}

/* 汇总大数字 */
.hm-summary {
  display: flex;
  gap: 20px;
  margin-bottom: 22px;
}

.hm-summary-item {
  min-width: 80px;
}

.hm-summary-label {
  font-size: 15px;
  font-weight: 600;
  color: #9ca3af;
  margin-bottom: 4px;
}

.hm-summary-value {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
}

.hm-summary--blue .hm-summary-value { color: #60a5fa; }
.hm-summary--green .hm-summary-value { color: #4ade80; }
.hm-summary--orange .hm-summary-value { color: #fb923c; }
.hm-summary--amber .hm-summary-value { color: #fbbf24; }

/* 矩阵网格 */
.hm-grid {
  display: grid;
  grid-template-columns: 72px repeat(7, 1fr);
  gap: 8px;
  min-width: 520px;
}

.hm-corner {
  height: 26px;
}

.hm-colhead {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #d1d5db;
  padding: 6px 0;
}

.hm-rowhead {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #9ca3af;
  padding-right: 10px;
}

.hm-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.hm-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.hm-unit {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
  margin-left: 1px;
}

/* Legend */
.hm-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  color: #9ca3af;
}

.hm-legend-text {
  font-weight: 500;
}

.hm-legend-swatch {
  width: 18px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.hm-leg-white  { background: #e5e7eb; }
.hm-leg-light  { background: #93c5fd; } /* 蓝浅 */
.hm-leg-mid    { background: #3b82f6; } /* 蓝中 */
.hm-leg-dark   { background: #1d4ed8; } /* 蓝深 */

@media (max-width: 768px) {
  .hm-grid { grid-template-columns: 58px repeat(7, 1fr); }
  .hm-cell { font-size: 17px; min-height: 48px; }
  .hm-summary-value { font-size: 26px; }
  .hm-summary { gap: 14px; }
}

/* 试听总览卡已统一为 .kpi-card */

.trial-filter-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.trial-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dbe7f3;
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  font-weight: 800;
}

.trial-filter-label select,
.trial-filter-label input {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  font-size: 15px;
}

.trial-filter-label input[type="date"] {
  width: auto;
}

.trial-list {
  display: grid;
  gap: 12px;
}

.trial-item-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #dbe7f3;
  border-radius: 18px;
  background: #fff;
}

.trial-item-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.trial-item-name {
  font-size: 24px;
  color: #0f172a;
}

.trial-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

/* 试听状态标签色 */
.status-已预约 { background: #ede9fe; color: #7c3aed; }
.status-已出勤 { background: #dcfce7; color: #166534; }
.status-已请假 { background: #ffedd5; color: #c2410c; }
.status-已爽约 { background: #fee2e2; color: #b91c1c; }
.status-已转化 { background: #fef3c7; color: #92400e; }
.status-已流失 { background: #f1f5f9; color: #475569; }
.status-已取消 { background: #e5e7eb; color: #475569; }

.trial-status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.trial-attendance-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.att-已到 { background: #dcfce7; color: #166534; }
.att-请假 { background: #ffedd5; color: #c2410c; }
.att-爽约 { background: #fee2e2; color: #b91c1c; }

.trial-action-button {
  border: 1px solid #cbd5e1;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  color: #334155;
}

.trial-action-button:hover { background: #f1f5f9; }
.trial-cancel-button { color: #c2410c; border-color: #fed7aa; background: #fff7ed; }
.trial-cancel-button:hover { background: #ffedd5; }
.trial-abandon-button { color: #c2410c; border-color: #fecaca; background: #fff; }
.trial-abandon-button:hover { background: #fef2f2; }
.trial-delete-button { color: #b91c1c; border-color: #fecaca; background: #fff; }
.trial-delete-button:hover { background: #fef2f2; }

.trial-item-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
}

.trial-item-note {
  color: #64748b;
  font-size: 14px;
}

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

.trial-status-button,
.trial-delete-button {
  border: 0;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.trial-status-button {
  background: #f0fdf4;
  color: #15803d;
}

.trial-status-seg .trial-status-button {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  border-radius: 0;
  border-right: 0;
}
.trial-status-seg .trial-status-button:first-child {
  border-radius: 8px 0 0 8px;
}
.trial-status-seg .trial-status-button:last-child {
  border-radius: 0 8px 8px 0;
  border-right: 1px solid #cbd5e1;
}
.trial-status-seg .trial-status-button.active {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}
.trial-status-seg .trial-status-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.trial-convert-button {
  border: 0;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  background: #dcfce7;
  color: #166534;
}

.trial-convert-button:disabled {
  background: #e5e7eb;
  color: #94a3b8;
  cursor: not-allowed;
}

.trial-convert-dialog {
  max-width: 860px;
}

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

.trial-delete-button {
  background: #fee2e2;
  color: #b91c1c;
}

.top-tools {
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) minmax(330px, 1.7fr) minmax(290px, 1.3fr) minmax(140px, 0.8fr);
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid #d8d8d8;
  align-items: start;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.top-tools > * {
  min-width: 0;
}

/* 第4列：自然语言批量签到（窄列，上下两行：提示符 + 按钮） */
.natural-attendance-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.natural-attendance-btn {
  flex: 1 1 auto;
  min-height: 64px;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(22, 163, 74, 0.25);
}

.natural-attendance-btn:hover {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%);
}

.inline-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dbe7f3;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(148, 163, 184, 0.08);
}

.tool-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(148, 163, 184, 0.08);
}

.tool-card-adjust {
  border: 1px solid #c7e6d0;
  background: linear-gradient(180deg, #f3fff7 0%, #ffffff 100%);
}

.tool-card-manage {
  border: 1px solid #d8e4f7;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

/* 班级管理 — 字体加大、行间距加宽 */
.tool-card-manage .inline-form {
  gap: 10px;
  padding: 14px;
}
.tool-card-manage .inline-form input,
.tool-card-manage .inline-form select {
  min-height: 46px;
  font-size: 16px;
  padding: 8px 12px;
}
.tool-card-manage .inline-form button {
  min-height: 46px;
  font-size: 16px;
  padding: 10px 16px;
}
.tool-card-manage .compact-student-actions {
  margin-top: 6px;
  padding-top: 10px;
}
.tool-card-manage .transfer-tools select {
  min-height: 42px;
  font-size: 15px;
  padding: 7px 10px;
}
.tool-card-manage .student-actions button {
  min-height: 40px;
  font-size: 16px;
  padding: 8px 14px;
}

/* 新增时间段 / 修改班级名称：强制一行，不换行 */
.tool-card-manage #class-time-form,
.tool-card-manage #class-edit-form {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 10px;
}
.tool-card-manage #class-cycle-form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 14px !important;
  border-top: 1px dashed #d8e4f7;
}
.tool-card-manage #class-time-form select,
.tool-card-manage #class-edit-form select {
  flex: 0 1 auto;
  min-width: 90px;
  width: auto !important;
}
.tool-card-manage #class-cycle-form select,
.tool-card-manage #class-cycle-form input[type="date"] {
  flex: 0 1 auto;
  min-width: 120px;
  width: auto !important;
}
.tool-card-manage #class-cycle-form .date-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 100%;
}
.tool-card-manage #class-cycle-form .date-range input[type="date"] {
  flex: 1 1 0;
}
.tool-card-manage #class-cycle-form .date-sep {
  font-size: 15px;
  font-weight: 900;
  color: #64748b;
}
.tool-card-manage #class-edit-form #class-edit-target {
  flex: 1 1 160px;
  min-width: 120px;
}
.tool-card-manage #class-time-form button,
.tool-card-manage #class-edit-form button {
  flex: 0 0 auto;
}
.tool-card-manage #class-cycle-form button {
  flex: 0 0 auto;
}
.time-sep {
  font-size: 15px;
  color: #64748b;
  padding: 0 2px;
}
.class-edit-form {
  margin-top: 12px;
  padding-top: 14px !important;
  border-top: 1px dashed #d8e4f7;
}
.class-cycle-title {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  margin-right: 4px;
  white-space: nowrap;
  color: #1e3a5f;
}
.class-cycle-form .weekday-picker {
  min-width: 220px;
}
.class-cycle-form .time-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.class-cycle-form .time-range select {
  min-width: 100px;
}
.class-edit-title {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  margin-right: 4px;
  white-space: nowrap;
}

.compact-edit-tools {
  margin-top: 2px;
}

.compact-student-actions {
  margin-top: 2px;
}

.student-entry-form.tool-card {
  border: 1px solid #bbf7d0;
  background: linear-gradient(180deg, #eefdf5 0%, #ffffff 100%);
  align-self: start;
  max-height: none;
}

/* 学生入班 — 字体加大、行间距加宽 */
.student-entry-form.tool-card {
  gap: 8px;
  padding: 14px;
}
.student-entry-form .tool-card-title {
  font-size: 19px;
}
.student-entry-form input,
.student-entry-form select {
  border-radius: var(--app-radius-sm);
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}
.student-entry-form input::placeholder {
  color: #94a3b8;
}
.student-entry-form input:focus,
.student-entry-form select:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
  outline: none;
}
.student-entry-form button[type="submit"] {
  border-radius: var(--app-radius-sm);
  background: linear-gradient(180deg, #15803d 0%, #16a34a 100%);
  border: 1.5px solid #166534;
  color: #fff;
}
.student-entry-form .secondary-action {
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
}
.tool-card-transfer {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(180, 83, 9, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffaf3 0%, #fff5e8 100%);
  box-shadow: 0 12px 28px rgba(180, 83, 9, 0.08);
  align-self: start;
}
.tool-card-transfer .tool-card-title {
  font-size: 19px;
  font-weight: 900;
  color: #9a3412;
  margin-bottom: 4px;
}

.import-tool-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #fef3c7;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf5 0%, #ffffff 100%);
  align-self: start;
}
.import-tool-card .tool-card-title {
  color: #92400e;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}
.import-hint {
  font-size: 11px;
  color: #a16207;
  line-height: 1.3;
}
.import-tool-card input[type="file"] {
  width: 100%;
  min-height: 32px;
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
}
.import-tool-card select,
.import-tool-card input[type="date"] {
  width: 100%;
  min-height: 32px;
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
}
.import-tool-card button {
  grid-column: 1 / -1;
  border: 0;
  min-height: 34px;
  border-radius: 8px;
  background: #d97706;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

#row-group-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

.student-entry-form {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  align-self: stretch;
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: stretch;
  min-width: 0;
  padding: 4px;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  background: linear-gradient(180deg, #eefdf5 0%, #ffffff 100%);
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.08);
}

.time-form {
  /* 不再强制 grid，由上面的 #class-time-form / #class-edit-form 的 flex 接管 */
}

.secondary-tools {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
  min-height: 0;
  padding: 0;
}

.tool-card-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

.inline-form input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  font-size: 15px;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
}

.inline-form select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  font-size: 15px;
  border: 1px solid #cfcfcf;
  background: #fff;
  border-radius: 10px;
}

.inline-form button {
  border: 0;
  background: #2f8f4e;
  color: #fff;
  min-height: 42px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.edit-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.edit-tools .tool-card-title {
  width: 100%;
  margin-bottom: 2px;
}

.edit-tools button {
  border: 0;
  background: #111827;
  color: #fff;
  min-height: 48px;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  flex: 1 1 0;
}

#delete-selected,
#delete-day-group {
  background: #991b1b;
}

.student-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid rgba(180, 83, 9, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffaf3 0%, #fff5e8 100%);
  box-shadow: 0 12px 28px rgba(180, 83, 9, 0.08);
}

.compact-edit-tools,
.compact-student-actions {
  padding-top: 10px;
  border-top: 1px solid rgba(180, 83, 9, 0.14);
}

.student-actions button {
  border: 0;
  background: #b45309;
  color: #fff;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
}

.student-entry-form .tool-card-title,
.student-actions .tool-card-title {
  margin-bottom: 4px;
}

.student-actions .tool-card-title {
  font-size: 19px;
  font-weight: 900;
  color: #9a3412;
  letter-spacing: 0.02em;
}

.transfer-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 14px;
  align-items: stretch;
}

.transfer-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.transfer-field-label {
  font-size: 14px;
  font-weight: 800;
  color: #7c2d12;
  line-height: 1.2;
}

.transfer-student-wrap {
  position: relative;
  min-width: 0;
}

.transfer-current-class-hint {
  grid-column: 1 / -1;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff 0%, #ffedd5 100%);
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  text-align: center;
}

.transfer-tools select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #fdba74;
  background: #fffdf8;
  border-radius: 12px;
  font-size: 15px;
  color: #431407;
}

.transfer-student-wrap input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #fdba74;
  background: #fffdf8;
  border-radius: 12px;
  font-size: 15px;
  color: #431407;
}

.transfer-student-wrap input[type="text"]:focus {
  outline: none;
  border-color: #f97316;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.14);
}

.transfer-student-wrap input[type="text"] {
  border-color: #fdba74;
  background: #fffdf8;
}

.transfer-tools button {
  grid-column: 1 / -1;
  white-space: nowrap;
  min-height: 48px;
  align-self: end;
  border-radius: 14px;
  font-size: 16px;
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
  box-shadow: 0 10px 24px rgba(194, 65, 12, 0.24);
}

.transfer-tools button:hover {
  background: linear-gradient(135deg, #9a3412 0%, #c2410c 100%);
}

.transfer-tools .name-suggestions {
  top: calc(100% + 6px);
  border: 1px solid #fdba74;
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(154, 52, 18, 0.14);
}

@media (max-width: 920px) {
  .transfer-tools {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1680px) {
  .time-form {
    grid-template-columns: minmax(84px, 100px) minmax(138px, 170px) minmax(140px, 1fr) auto;
  }
}

@media (max-width: 1440px) {
  .top-tools {
    grid-template-columns: repeat(2, 1fr);
  }

  .student-entry-form {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .secondary-tools {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
}

#transfer-student {
  background: #16a34a;
}

#delete-day-group {
  background: #7c2d12;
}

.student-entry-form input,
.student-entry-form select {
  min-height: 32px;
  font-size: 13.5px;
}

.student-entry-form .secondary-action {
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
  border-radius: var(--app-radius-sm);
}
.student-entry-form .secondary-action:hover {
  background: #fee2e2;
}

#move-selected-up,
#move-selected-down {
  background: #475569;
}

#delete-selected {
  background: #b91c1c;
}

.class-time-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px;
  flex-shrink: 0;
}

.class-time-band {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.class-time-band-label {
  font-size: 16px;
  font-weight: 800;
  color: #475569;
  margin: 2px 0 -4px 2px;
}

.class-time-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 150px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.class-time-col.selected-row {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.bar-label-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  background: #f1f5f9;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  cursor: pointer;
  width: 100%;
}

.bar-label-col.dragging-row {
  opacity: 0.5;
}

.class-time-col.selected-row .bar-label-col {
  background: #e8f7ee;
  outline: 3px solid #22c55e;
  outline-offset: -3px;
}

.class-time-col-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  flex: 1;
}

.class-time-item {
  display: block;
  min-height: 52px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.class-time-empty-cell {
  min-height: 52px;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
  background: repeating-linear-gradient(45deg, #fbfdff, #fbfdff 6px, #f4f8fc 6px, #f4f8fc 12px);
}

.class-time-item.active {
  outline: 3px solid var(--green);
  outline-offset: -3px;
}

.class-time-item.selected-item {
  background: #e8f7ee;
  outline: 3px solid #22c55e;
  outline-offset: -3px;
}

.class-time-item.dragging-item {
  opacity: 0.5;
}

.class-time-button {
  border: 0;
  background: transparent;
  font-size: 15px;
  cursor: pointer;
  padding: 10px 12px;
  text-align: left;
  line-height: 1.3;
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.class-time-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.class-time-main {
  font-size: 15px;
  font-weight: 600;
}

.class-time-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef3f8;
  color: #4b5563;
  font-size: 14px;
  line-height: 1;
}

.class-time-empty {
  padding: 18px 14px;
  color: #94a3b8;
  font-size: 14px;
}

.student-table-wrap {
  flex: 1 1 auto;
  min-height: 540px;
  overflow: visible;
  border-top: 1px solid #d8d8d8;
  background: #fff;
}

.student-table-scroll {
  height: auto;
  overflow-x: auto;
  overflow-y: visible;
}

.archive-head {
  padding: 16px 16px 8px;
}

.archive-head h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.archive-head p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

.withdrawn-student-wrap {
  padding: 0 16px 20px;
  overflow-x: auto;
}

/* 退学学生卡片网格：默认 4 列，中屏 3 列，小屏 2 列，超小屏 1 列 */
.withdrawn-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1400px) {
  .withdrawn-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .withdrawn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.withdrawn-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dbe7f3;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  transition: all 0.15s;
}

.withdrawn-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.08);
}

.withdrawn-card-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #dbe7f3;
}

.withdrawn-card-name {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}

.withdrawn-card-class {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

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

.withdrawn-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.withdrawn-card-label {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}

.withdrawn-card-value {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
}

.withdrawn-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.withdrawn-card-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.withdrawn-card-field select,
.withdrawn-card-field input {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  font-size: 14px;
}

.reenroll-button {
  border: 0;
  background: #16a34a;
  color: #fff;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.reenroll-button:hover {
  background: #15803d;
}

/* 保留旧表格样式以兼容可能存在的引用 */
.withdrawn-table {
  width: 100%;
  border-collapse: collapse;
}

.withdrawn-table th,
.withdrawn-table td {
  border: 1px solid #d8d8d8;
  padding: 12px 10px;
  text-align: left;
  font-size: 14px;
}

.withdrawn-table th {
  background: #f8fafc;
}

.reenroll-tools {
  display: grid;
  grid-template-columns: 120px minmax(220px, 1fr) 140px auto;
  gap: 8px;
  align-items: center;
}

.reenroll-tools select,
.reenroll-tools input {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
}

.student-table {
  width: max-content;
  border-collapse: collapse;
  min-width: max(100%, 1320px);
}

.locked-student-row {
  background: #eef4f8;
}

.locked-attendance-cell {
  background:
    repeating-linear-gradient(
      -45deg,
      #edf3f7,
      #edf3f7 10px,
      #e4edf3 10px,
      #e4edf3 20px
    ) !important;
}

.transfer-locked-cell {
  background:
    repeating-linear-gradient(
      -45deg,
      #edf3f7,
      #edf3f7 10px,
      #e4edf3 10px,
      #e4edf3 20px
    ) !important;
}

.locked-student-row td {
  background:
    repeating-linear-gradient(
      -45deg,
      #f1f5f9,
      #f1f5f9 10px,
      #e2e8f0 10px,
      #e2e8f0 20px
    ) !important;
  color: #64748b;
  pointer-events: auto;
}

.locked-student-row td:first-child,
.locked-student-row td:nth-child(2),
.locked-student-row td:last-child {
  background:
    repeating-linear-gradient(
      -45deg,
      #f1f5f9,
      #f1f5f9 10px,
      #e2e8f0 10px,
      #e2e8f0 20px
    ) !important;
}

/* 锁定行：强制条纹，禁止任何高亮/选中色覆盖 */
.locked-student-row td.selected-attendance-cell,
.locked-student-row .selected-attendance-cell,
.locked-student-row td.selected-student-row {
  background:
    repeating-linear-gradient(
      -45deg,
      #f1f5f9,
      #f1f5f9 10px,
      #e2e8f0 10px,
      #e2e8f0 20px
    ) !important;
  box-shadow: none !important;
}

.locked-student-row .student-name-button {
  color: #7b8794 !important;
  font-weight: normal !important;
}

.student-row-lock-tag {
  display: inline-flex;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #dbe7f1;
  color: #33506b;
  font-size: 12px;
  vertical-align: middle;
}

.student-row-lock-note {
  display: block;
  margin-top: 6px;
  color: #60758a;
  font-size: 12px;
  line-height: 1.4;
}

.table-tools {
  padding: 16px 18px;
  border-bottom: 1px solid #d8d8d8;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.table-tools-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.date-page-tools {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  padding-left: 8px;
}

.date-page-button {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.date-page-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.date-page-info {
  min-width: 100px;
  text-align: center;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
}

.date-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  white-space: nowrap;
}

.date-label input {
  min-height: 38px;
  padding: 6px 10px;
  font-size: 15px;
}

.table-action-button {
  border: 0;
  background: #16a34a;
  color: #fff;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.danger-button {
  background: #dc2626;
}

.student-table th,
.student-table td {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 12px 10px;
  font-size: 18px;
  height: auto;
  min-height: 52px;
  vertical-align: middle;
}

.student-table thead th {
  background: #fafafa;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 4;
}

.index-col {
  width: 72px;
  text-align: center;
  position: sticky;
  left: 0;
  z-index: 6;
}

.name-col {
  width: 180px;
  min-width: 180px;
  text-align: left;
  position: sticky;
  left: 72px;
  z-index: 6;
}

.date-col {
  min-width: 88px;
  text-align: center;
}

.blank-date-col {
  min-width: 88px;
  background: #fff;
}

.action-col {
  min-width: 232px;
  text-align: center;
  position: sticky;
  right: 0;
  z-index: 6;
}

.student-table td:first-child {
  text-align: center;
  position: sticky;
  left: 0;
  z-index: 3;
}

.student-table tbody td:nth-child(2) {
  position: sticky;
  left: 72px;
  z-index: 3;
}

.student-table tbody td:last-child {
  position: sticky;
  right: 0;
  z-index: 3;
}

.student-table thead .index-col,
.student-table thead .name-col,
.student-table thead .action-col {
  box-shadow: 0 1px 0 rgba(29, 29, 29, 0.12);
}

.student-table tbody td:first-child,
.student-table tbody td:nth-child(2) {
  box-shadow: 1px 0 0 rgba(29, 29, 29, 0.08);
}

.student-table tbody td:last-child {
  box-shadow: -1px 0 0 rgba(29, 29, 29, 0.08);
  padding-top: 8px;
  padding-bottom: 8px;
}

.today-col {
  background: transparent;
}

.selected-date-col {
  background: transparent !important;
}

.picked-date-col {
  box-shadow: none;
}

.date-head-button {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 14px 4px;
  font-size: 17px;
  cursor: pointer;
}

.blank-date-col .date-head-button {
  cursor: default;
}

.selected-date-col .date-head-button {
  font-weight: 800;
  color: #ea580c;
  border-bottom: 2px solid #ea580c;
}

.picked-date-col .date-head-button {
  font-weight: 800;
  color: #ea580c;
  border-bottom: 2px solid #ea580c;
}

.active-date-cell {
  background: transparent !important;
}

.locked-attendance-cell.active-date-cell,
.transfer-locked-cell.active-date-cell,
.locked-student-row td.active-date-cell,
.locked-student-row td.locked-attendance-cell,
.locked-student-row td.transfer-locked-cell,
.locked-student-row td.locked-attendance-cell.active-date-cell,
.locked-student-row td.transfer-locked-cell.active-date-cell {
  background:
    repeating-linear-gradient(
      -45deg,
      #f1f5f9,
      #f1f5f9 10px,
      #e2e8f0 10px,
      #e2e8f0 20px
    ) !important;
}

.attendance-cell-button {
  width: 100%;
  min-height: 48px;
  border: 0;
  background: transparent;
  font-size: 17px;
  cursor: pointer;
}

.attendance-cell-button.empty-cell-button {
  color: transparent;
}

.locked-attendance-cell .attendance-cell-button,
.transfer-locked-cell .attendance-cell-button {
  background: transparent !important;
}

.attendance-cell-button.empty-cell-button:hover {
  background: #f8fafc;
}

.attendance-cell-button.filled-cell {
  color: #111;
  font-weight: 500;
}

.blank-attendance-cell {
  min-width: 88px;
  background: #fff;
}

.blank-attendance-space {
  min-height: 56px;
}

.selected-attendance-cell {
  background: #fff7cc !important;
}

.attendance-cell-button.selected-attendance-cell {
  box-shadow: inset 0 0 0 3px #eab308;
  font-weight: 700;
}

.locked-attendance-cell.selected-attendance-cell,
.transfer-locked-cell.selected-attendance-cell,
.locked-attendance-cell .attendance-cell-button.selected-attendance-cell,
.transfer-locked-cell .attendance-cell-button.selected-attendance-cell {
  background: transparent !important;
}

.locked-attendance-cell.selected-attendance-cell,
.transfer-locked-cell.selected-attendance-cell,
.locked-attendance-cell.active-date-cell.selected-attendance-cell,
.transfer-locked-cell.active-date-cell.selected-attendance-cell {
  background:
    repeating-linear-gradient(
      -45deg,
      #edf3f7,
      #edf3f7 10px,
      #e4edf3 10px,
      #e4edf3 20px
    ) !important;
}

.student-name-button {
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-size: 17px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
  cursor: pointer;
}

.locked-student-row .student-name-button {
  color: #7b8794;
}

.selected-student-row td {
  background: transparent;
}

.selected-student-row td:first-child,
.selected-student-row td:nth-child(2),
.selected-student-row td:last-child {
  background: transparent;
}

.selected-student-row .student-name-button {
  font-weight: 800;
  color: #15803d;
}

.sign-button {
  border: 0;
  background: #2f8f4e;
  color: #fff;
  min-width: 74px;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
}

.sign-button:disabled,
.leave-button:disabled,
.clear-row-button:disabled {
  background: #cbd5e1;
  color: #f8fafc;
  cursor: not-allowed;
  opacity: 1;
}

.leave-button {
  border: 0;
  background: #d97706;
  color: #fff;
  min-width: 74px;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
}

.clear-row-button {
  border: 0;
  background: #dc2626;
  color: #fff;
  min-width: 0;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
}

.remove-class-button {
  border: 0;
  background: #fff;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  min-width: 0;
  padding: 9px 12px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
}

.remove-class-button:hover {
  background: #fef2f2;
}

.action-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  min-width: 420px;
}

.action-grid-button {
  flex: 0 0 auto;
  min-height: 42px;
  line-height: 1.15;
  white-space: nowrap;
  text-align: center;
}

.empty-cell {
  text-align: center;
}

.empty-tip {
  padding: 24px;
}

@media (max-width: 900px) {
  .page {
    padding: 12px;
  }

  .top-tools {
    grid-template-columns: 1fr;
  }

  .billing-reward-person-grid {
    grid-template-columns: 1fr;
  }

  .student-stats {
    grid-template-columns: 1fr;
  }

  .revenue-stats-grid {
    grid-template-columns: 1fr;
  }

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

  .revenue-chart-layout,
  .trial-summary-grid,
  .trial-week-grid {
    grid-template-columns: 1fr;
  }

  .table-tools {
    align-items: stretch;
  }

  .natural-attendance-tools {
    grid-template-columns: 1fr;
  }

  .trial-convert-grid,
  .class-ops-grid {
    grid-template-columns: 1fr;
  }

  .table-tools-main,
  .date-page-tools {
    width: 100%;
  }

  .date-page-tools {
    justify-content: flex-end;
  }

  .inline-form {
    grid-template-columns: 1fr;
  }

  .time-form,
  .student-entry-form,
  .reenroll-tools {
    grid-template-columns: 1fr;
  }

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

  .secondary-tools {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .class-time-band {
    flex-wrap: wrap;
  }

  .class-time-col {
    min-width: 160px;
  }

  .billing-student-top,
  .refund-summary-row,
  .refund-entry-grid {
    grid-template-columns: 1fr;
  }

  .billing-student-top.billing-entry-layout {
    grid-template-columns: 1fr;
  }

  .trial-form {
    grid-template-columns: 1fr;
  }

  .students-head-right {
    grid-template-columns: 1fr;
    min-width: unset;
    width: 100%;
  }

  .student-directory-name-cell,
  .billing-balance-row {
    grid-template-columns: 1fr;
  }

  .students-page-head {
    flex-direction: column;
  }

  .backup-status-card {
    min-width: 0;
    max-width: none;
  }

  .billing-balance-row {
    grid-template-columns: 1fr;
  }

  .billing-reward-person-grid {
    grid-template-columns: 1fr;
  }

  .billing-student-actions {
    width: 100%;
  }

  .billing-lock-button {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .top-tools {
    grid-template-columns: 1fr 1fr;
  }

  .student-entry-form {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .edit-tools {
    flex-direction: column;
  }

  .edit-tools button {
    flex: none;
  }

  .secondary-tools {
    grid-column: 1 / -1;
  }

  .billing-student-top.billing-entry-layout {
    grid-template-columns: 1fr;
  }

  .billing-balance-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

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

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

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

  .revenue-chart-layout {
    grid-template-columns: 1fr;
  }

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

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

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

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

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

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

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

@media (max-width: 1080px) {
  .time-form,
  .transfer-tools {
    grid-template-columns: 1fr;
  }

  #row-group-form {
    grid-template-columns: 1fr;
  }

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

  .top-tools {
    grid-template-columns: 1fr;
  }

  .student-entry-form,
  .secondary-tools {
    grid-column: 1 / -1;
  }

  .edit-tools {
    flex-direction: column;
  }

  .edit-tools button {
    flex: none;
  }
}

/* ===== 登录浮层 + 退出按钮 ===== */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}
.login-overlay.visible {
  display: flex;
}
.login-card {
  width: 340px;
  max-width: 90vw;
  background: #ffffff;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-title {
  margin: 0;
  font-size: 20px;
  color: #1f2937;
  text-align: center;
}
.login-sub {
  margin: 0 0 6px;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}
.login-input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
}
.login-input:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}
.login-submit {
  height: 44px;
  border: none;
  border-radius: 10px;
  background: #16a34a;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.login-submit:hover {
  background: #15803d;
}
.login-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.login-error {
  min-height: 18px;
  color: #dc2626;
  font-size: 13px;
  text-align: center;
}
.logout-button {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 5000;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #374151;
  font-size: 13px;
  cursor: pointer;
}
.logout-button:hover {
  background: #f3f4f6;
}

/* ============================================================
   界面重构：侧边栏布局 + 设计系统（追加层，覆盖默认皮肤）
   ============================================================ */
:root {
  --app-bg: #eef2f7;
  --app-sidebar: #0f172a;
  --app-sidebar-2: #111c33;
  --app-sidebar-fg: #cbd5e1;
  --app-sidebar-muted: #64748b;
  --app-primary: #16a34a;
  --app-primary-d: #15803d;
  --app-accent: #4ade80;
  --app-text: #1e293b;
  --app-muted: #64748b;
  --app-card: #ffffff;
  --app-border: #e5e9f0;
  --app-radius: 14px;
  --app-radius-sm: 9px;
  --app-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .06);
  --app-shadow-md: 0 10px 30px rgba(15, 23, 42, .12);
  --kpi-pad: 18px;
  --kpi-gap: 14px;
}

/* ===== 绿色主题润色（追加于重构层之后） ===== */
::selection { background: rgba(22, 163, 74, .18); color: #14532d; }
button:focus-visible,
a:focus-visible,
.page-tab:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }

/* 滚动条美化 */
.sidebar-nav::-webkit-scrollbar,
.sheet::-webkit-scrollbar,
.student-table-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.sidebar-nav::-webkit-scrollbar-thumb,
.sheet::-webkit-scrollbar-thumb,
.student-table-scroll::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .18); border-radius: 999px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover,
.sheet::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .32); }

/* 卡片悬浮微交互 */
.tool-card,
.refund-student-card,
.trial-item-card,
.revenue-card,
.directory-stats-card { transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.tool-card:hover,
.refund-student-card:hover,
.trial-item-card:hover,
.revenue-card:hover,
.directory-stats-card:hover { box-shadow: var(--app-shadow-md); transform: translateY(-2px); border-color: var(--app-primary); }

html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  color: var(--app-text);
  background: var(--app-bg);
}

/* 整体外壳：侧边栏 + 内容区 */
.page {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  padding: 0;
  background: var(--app-bg);
}
.sheet {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  background: var(--app-card);
  border: none;
  border-left: 1px solid var(--app-border);
  border-radius: 0;
  min-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* 侧边栏 */
.sidebar {
  flex: 0 0 268px;
  width: 268px;
  background: linear-gradient(180deg, var(--app-sidebar) 0%, var(--app-sidebar-2) 100%);
  color: var(--app-sidebar-fg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  box-shadow: 4px 0 24px rgba(15, 23, 42, .18);
  z-index: 1;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.brand-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--app-primary), var(--app-accent));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 21px;
  box-shadow: 0 6px 16px rgba(22, 163, 74, .4);
}
.brand-title { font-size: 16px; font-weight: 700; color: #f8fafc; line-height: 1.3; }
.brand-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; letter-spacing: .5px; }

.sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: 18px 14px; }
.nav-group { margin-bottom: 18px; }
.nav-group-label {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--app-sidebar-muted);
  padding: 7px 14px;
  font-weight: 700;
}
.sidebar .page-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  flex-wrap: nowrap;
}
.sidebar .page-tab {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: var(--app-sidebar-fg);
  padding: 13px 15px;
  border-radius: var(--app-radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}
.sidebar .page-tab:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar .page-tab:active { transform: scale(.99); }
.sidebar .page-tab.active {
  background: var(--app-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(22, 163, 74, .4);
}

.sidebar-footer {
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-link {
  font-size: 14px;
  color: #94a3b8;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--app-radius-sm);
  transition: background .15s ease, color .15s ease;
}
.sidebar-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-user {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border-radius: var(--app-radius-sm);
  background: rgba(255, 255, 255, .06);
}
.sidebar-user-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.sidebar-user-role {
  font-size: 11px;
  color: #94a3b8;
}
.class-time-owner-hint {
  margin: 8px 2px 0;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #0e7490;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: var(--app-radius-sm);
}
.logout-button {
  position: static;
  top: auto; right: auto; left: auto; bottom: auto;
  z-index: auto;
  width: 100%;
  height: auto;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--app-radius-sm);
  background: rgba(255, 255, 255, .06);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.logout-button:hover { background: rgba(255, 255, 255, .14); }

/* 面板通用 */
.page-panel.active { padding: 0 0 28px; }
#attendance-page.page-panel.active {
  min-height: 100vh;
  padding: 0;
  overflow-y: auto;
}
.class-time-bar { padding: 0 22px; }
.student-table-wrap,
.billing-board-wrap,
.refund-board-wrap,
.revenue-stats-wrap,
.trial-board-wrap,
.withdrawn-student-wrap,
.student-directory-wrap { padding: 18px 22px; }

/* 页面标题头（板块区分更明显） */
.students-page-head,
.billing-page-head,
.archive-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--app-border);
  background: linear-gradient(180deg, #f8fafc, #ffffff);
}
.students-page-head h2,
.billing-page-head h2,
.archive-head h2,
.stats-page-head h2 {
  margin: 0;
  font-size: 21px;
  color: var(--app-text);
}
.students-page-head p,
.billing-page-head p,
.archive-head p,
.stats-page-head p {
  margin: 5px 0 0;
  color: var(--app-muted);
  font-size: 13px;
}
.stats-page-head {
  padding: 20px 22px 4px;
  align-items: flex-end;
}

/* 顶部工具卡片（在读签到）更精致 */
.top-tools {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--app-border);
  border-radius: 0;
}
.tool-card {
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  padding: 14px 16px;
}
.tool-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--app-primary-d);
  margin-bottom: 10px;
  letter-spacing: .3px;
}

/* 弹窗层级确保高于侧边栏 */
.parent-sheet-modal,
.natural-attendance-modal {
  z-index: 8000;
}

/* 响应式：窄屏时侧边栏转为顶部横向导航 */
@media (max-width: 880px) {
  .page { flex-direction: column; }
  .sidebar {
    flex: none;
    width: 100%;
    height: auto;
    position: static;
    flex-direction: column;
  }
  .sidebar-nav { display: flex; gap: 16px; overflow-x: auto; }
  .nav-group { margin-bottom: 0; min-width: 160px; }
  .sidebar .page-tabs { flex-direction: column; }
  .sheet { border-left: none; }
  .sidebar-footer { flex-direction: row; }
}

/* ===== 收费系统优化 (?v=20260712y) ===== */

/* 字体整体加大（7/26 重设计：统一层级 + 输入框加大） */
.billing-card-field span { font-size: 15px; }
.billing-card-value { font-size: 16px; }
.billing-balance-row .billing-card-field > span { font-size: 15px; }
.billing-balance-row .billing-card-field .billing-card-value { font-size: 19px; }
.billing-card-block-title { font-size: 17px; }
.billing-student-name { font-size: 24px; }
.billing-input,
.billing-select { font-size: 16px; min-height: 44px; padding: 10px 12px; }
.billing-unpaid-count { font-size: 18px; }
.billing-charge-button,
.billing-copy-sheet-button,
.billing-copy-receipt-button,
.billing-parent-sheet-button { font-size: 17px; min-height: 50px; }
.billing-lock-button,
.billing-student-page-button { font-size: 15px; }
/* 历史收费明细与未收费日历：加大到 14px 更易读 */
.billing-history-date,
.billing-history-meta,
.billing-history-amount,
.billing-history-note { font-size: 14px; }
.billing-unpaid-calendar-more,
.billing-unpaid-empty { font-size: 14px; }

/* 收费卡片授课老师标签：同一学生被多位老师分别收费时，用于区分归属 */
.billing-student-teacher {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1f6feb;
  background: #e8f1ff;
  border: 1px solid #cfe0f4;
  border-radius: 999px;
  vertical-align: middle;
}

.billing-entry-bar .billing-discount-picker .discount-select {
  max-width: none;
  min-height: 42px;
  height: 42px;
  font-size: 18px;
}

/* 本次收费输入框：增减箭头始终显示 */
.billing-entry-bar .charge-count-input::-webkit-inner-spin-button,
.billing-entry-bar .charge-count-input::-webkit-outer-spin-button {
  opacity: 1;
  height: 32px;
  cursor: pointer;
}
.billing-entry-bar .charge-count-input:hover::-webkit-inner-spin-button,
.billing-entry-bar .charge-count-input:hover::-webkit-outer-spin-button {
  background: #dcfce7;
}

/* 赠课 / 转介绍：按确认后的预览比例统一字号、行高和控件高度 */
.billing-reward-panel {
  padding: 18px 26px 20px;
}

.billing-reward-head {
  gap: 14px;
  margin-bottom: 18px;
  font-size: 18px;
  line-height: 1.4;
}

.billing-reward-head strong {
  font-size: 23px;
  line-height: 1.2;
  font-weight: 900;
}

.billing-reward-head span {
  font-size: 18px;
  color: #52637a;
}

.billing-reward-head .billing-unpaid-view-switch {
  margin-left: auto;
}

.billing-collapsible-toggle {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 17px;
}

.billing-reward-bar {
  align-items: end;
  gap: 18px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}

.billing-reward-field {
  gap: 10px;
  font-size: 17px;
  line-height: 1.25;
  color: #1e293b;
  font-weight: 900;
}

.billing-reward-bar .billing-input,
.billing-reward-bar .billing-select,
.billing-reward-value-field .billing-input {
  min-height: 58px;
  border-radius: 14px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  padding: 12px 18px;
}

.billing-reward-bar .billing-select {
  min-width: 214px;
  font-size: 24px;
}

.billing-reward-bar #billing-reward-source,
.billing-reward-bar #billing-reward-target {
  min-width: 330px;
  max-width: 360px;
}

.billing-reward-type-toggle {
  gap: 12px;
  min-width: 250px;
}

.billing-reward-type-button {
  min-height: 58px;
  border-radius: 14px;
  font-size: 23px;
  line-height: 1.1;
  font-weight: 900;
}

.billing-reward-value-field {
  gap: 10px;
  min-width: 150px;
}

.billing-reward-value-field span {
  font-size: 19px;
  line-height: 1.25;
  color: #1e293b;
  font-weight: 900;
}

.billing-reward-value-field .billing-input {
  min-width: 150px;
  max-width: 170px;
  font-size: 25px;
}

.billing-reward-submit {
  min-height: 58px;
  padding: 12px 34px;
  border-radius: 18px;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
}

/* 状态模块：与上方收费模块做区分 */
.billing-status-bar {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px dashed var(--app-border);
}
.billing-status-label {
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 10px;
}

/* 历史收费折叠 */
.billing-collapsible-title {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.billing-collapse-caret {
  font-size: 13px;
  color: var(--app-primary);
}
.billing-collapse-body {
  max-height: none;
  overflow: visible;
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fbfdff;
}
.billing-collapse-body.is-collapsed {
  display: none;
}

/* 自定义弹窗（替代原生 alert / confirm） */
.app-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.app-modal {
  width: 100%;
  max-width: 420px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  padding: 24px;
  font-size: 16px;
  color: var(--app-text);
}
.app-modal-message {
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.app-modal-prompt {
  display: grid;
  gap: 12px;
}
.app-modal-input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  font-size: 17px;
  color: var(--app-text);
  background: #fff;
  box-sizing: border-box;
}
.app-modal-input:focus {
  border-color: var(--app-primary);
  outline: 3px solid rgba(22, 163, 74, 0.14);
}
.app-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
.app-modal-ok,
.app-modal-cancel {
  min-height: 42px;
  padding: 10px 20px;
  border-radius: var(--app-radius-sm);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
.app-modal-ok {
  background: var(--app-primary);
  color: #fff;
}
.app-modal-ok:hover {
  background: var(--app-primary-d);
}
.app-modal-cancel {
  background: #fff;
  color: #475569;
  border-color: var(--app-border);
}
.app-modal-cancel:hover {
  background: #f1f5f9;
}

/* ===== 调整本节弹窗 ===== */
.adjust-lesson-modal .app-modal {
  max-width: 520px;
}
.app-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}
.app-modal-subtitle {
  font-size: 14px;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 18px;
}
.adjust-readonly-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.adjust-readonly-field {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adjust-readonly-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.2px;
}
.adjust-readonly-value {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.adjust-form-row {
  margin-bottom: 12px;
}
.adjust-form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.adjust-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adjust-form-label {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}
.adjust-input {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #d6e4f0;
  border-radius: 8px;
  font-size: 15px;
  color: #0f172a;
  background: #fff;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}
.adjust-input:focus {
  border-color: #16a34a;
  outline: 3px solid rgba(22, 163, 74, 0.14);
}
.adjust-preview {
  margin: 16px 0 4px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  font-size: 15px;
  color: #166534;
  min-height: 24px;
  line-height: 1.5;
}
.adjust-preview-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.adjust-preview-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.adjust-preview-badge.is-reschedule {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.adjust-preview-badge.is-move {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.adjust-preview-text {
  font-size: 15px;
  font-weight: 700;
  color: #166534;
  font-variant-numeric: tabular-nums;
}
.adjust-warning {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: #fff1f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 13px;
  color: #b91c1c;
  font-weight: 600;
}
.app-modal-ok:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
  opacity: 0.7;
}
.app-modal-ok:disabled:hover {
  background: #cbd5e1;
}

/* ===== 试听排课：标签 / 时间线 / 分组 ===== */
.trial-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.trial-tag-time {
  background: #e8f0fe;
  color: #15803d;
  border: 1px solid #c7dbff;
}
.trial-tag-teacher {
  background: #f3e8ff;
  color: #7c3aed;
  border: 1px solid #e3cdff;
}
.trial-tag-subject {
  background: #e0f7fb;
  color: #0e7490;
  border: 1px solid #b8ebf3;
}

.trial-timeline {
  display: grid;
  gap: 14px;
}

.trial-date-section {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.trial-date-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #f1f6ff, #eaf1fe);
  border-bottom: 1px solid #e2e8f0;
}
.trial-date-chip {
  font-weight: 800;
  font-size: 15px;
  color: #1e3a8a;
  background: #fff;
  border: 1px solid #c7dbff;
  border-radius: 999px;
  padding: 2px 12px;
}
.trial-date-weekday {
  font-weight: 800;
  color: #334155;
}
.trial-date-count {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  color: #16a34a;
  background: #e8f0fe;
  border-radius: 999px;
  padding: 2px 10px;
}

.trial-group-card {
  padding: 12px 14px;
  border-bottom: 1px dashed #eef2f7;
}
.trial-group-card:last-child {
  border-bottom: 0;
}
.trial-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.trial-group-count {
  margin-left: auto;
  font-size: 14px;
  font-weight: 800;
  color: #475569;
}
.trial-group-students {
  display: grid;
  gap: 10px;
}
.trial-student-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.trial-student-name {
  font-weight: 800;
  font-size: 16px;
  color: #0f172a;
}
.trial-student-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
}
.trial-status-seg {
  display: inline-flex;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  overflow: hidden;
}
.trial-student-tools {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-left: 10px;
  border-left: 1px dashed #e2e8f0;
}
.trial-student-actions .trial-status-button,
.trial-student-actions .trial-convert-button,
.trial-student-actions .trial-abandon-button,
.trial-student-actions .trial-delete-button {
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.trial-student-actions .trial-status-seg .trial-status-button {
  min-height: 34px;
  padding: 5px 11px;
  border: 0;
  border-radius: 0;
  border-right: 1px solid #cbd5e1;
  font-size: 13px;
}
.trial-student-actions .trial-status-seg .trial-status-button:last-child {
  border-right: 0;
}
.trial-student-actions .trial-status-seg .trial-status-button.active {
  background: #1d4ed8;
  color: #fff;
}
.trial-student-actions .trial-status-button:hover {
  background: #f1f5f9;
}
.trial-student-actions .trial-status-seg .trial-status-button.active:hover {
  background: #1e40af;
}
.trial-student-actions .trial-convert-button {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.trial-student-actions .trial-abandon-button {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.trial-student-actions .trial-delete-button {
  background: #fff;
  border-color: #fecaca;
  color: #b91c1c;
}
.trial-convert-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === 试听时间线 独立大卡片（方案 C） === */
.trial-date-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 4px;
}
.trial-timeline-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #fff5f9 0%, #fff 60%);
  border: 1.5px solid #f9a8d4;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(244, 114, 182, 0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.15s;
}
.trial-timeline-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #ec4899 0%, #be185d 100%);
}
.trial-timeline-card:hover {
  border-color: #ec4899;
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.15);
}
.trial-timeline-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.trial-timeline-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
  border-radius: 20px;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 4px rgba(190, 24, 93, 0.3);
}
.trial-timeline-name {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
  min-width: 0;
}
.trial-timeline-status {
  font-size: 14px;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 600;
  background: #fce7f3;
  color: #be185d;
  flex-shrink: 0;
}
.trial-timeline-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trial-timeline-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 18px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  border: 1px dashed #fbcfe8;
}
.trial-timeline-info-grid .info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.trial-timeline-info-grid .info-label {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.trial-timeline-info-grid .info-value {
  font-size: 16px;
  color: #1e293b;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trial-timeline-note {
  font-size: 14px;
  color: #475569;
  padding: 8px 12px;
  background: #fef3c7;
  border-radius: 8px;
  border-left: 3px solid #f59e0b;
  word-break: break-word;
}
.trial-timeline-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.trial-timeline-status-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #f9a8d4;
  border-radius: 999px;
  font-size: 14px;
  color: #be185d;
  font-weight: 600;
}
.trial-timeline-status-label {
  white-space: nowrap;
}
.trial-timeline-status-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  padding: 6px 28px 6px 8px;
  font-size: 14px;
  font-weight: 700;
  color: #be185d;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%23be185d' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}
.trial-timeline-status-select:focus {
  outline: 2px solid #ec4899;
  outline-offset: 1px;
  border-radius: 6px;
}
.trial-timeline-card-actions .trial-convert-button,
.trial-timeline-card-actions .trial-abandon-button,
.trial-timeline-card-actions .trial-delete-button {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
}
.trial-timeline-card-actions .trial-convert-button.primary {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
  color: #fff;
  border: 1.5px solid #be185d;
  box-shadow: 0 2px 6px rgba(190, 24, 93, 0.25);
  margin-left: auto;
}
.trial-timeline-card-actions .trial-convert-button.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #db2777 0%, #9d174d 100%);
  border-color: #9d174d;
  box-shadow: 0 3px 10px rgba(190, 24, 93, 0.35);
}
.trial-timeline-card-actions .trial-convert-button:disabled {
  background: #d1d5db;
  color: #6b7280;
  border-color: #d1d5db;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}
.trial-timeline-card-actions .trial-abandon-button {
  color: #ea580c;
  border-color: #fed7aa;
  background: #fff7ed;
}
.trial-timeline-card-actions .trial-abandon-button:hover {
  border-color: #ea580c;
  background: #ffedd5;
}
.trial-timeline-card-actions .trial-delete-button {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fff;
}
.trial-timeline-card-actions .trial-delete-button:hover {
  border-color: #b91c1c;
  background: #fef2f2;
}

.trial-conflict-tip {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  display: none;
}
.trial-conflict-tip.trial-conflict-warn {
  display: block;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309;
}
.trial-conflict-tip.trial-conflict-ok {
  display: block;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}

/* 转化档案页 */
.conversion-card {
  background: linear-gradient(135deg, #fffbeb 0%, #fff 60%);
  border-color: #fde68a;
}
.conversion-card::before {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}
.conversion-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.conversion-card-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.conversion-link-button {
  border: 1px solid #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.conversion-link-button:hover {
  background: #dbeafe;
}

.trial-week-range {
  font-size: 13px;
  font-weight: 800;
  color: #475569;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 4px 12px;
}
.trial-clear-button {
  min-height: 34px;
  padding: 4px 14px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font-weight: 800;
  cursor: pointer;
}

/* ===== 在读签到：时间条试听提示 ===== */
.class-time-item.has-trial .class-time-button {
  background: #f4fbf8;
  border: 1px solid #5dcaa5;
}
.class-time-trial-badge {
  position: absolute;
  top: -8px;
  left: 8px;
  background: #10b981;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  border-radius: 999px;
  padding: 1px 8px;
  z-index: 2;
}
.class-time-trial-info {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #0e7490;
  line-height: 1.5;
}
.class-time-item.has-trial {
  position: relative;
  min-height: 72px;
  overflow: visible;
  padding-bottom: 4px;
}

/* ===== 在读点名表：试听生行 ===== */
.trial-attend-info-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: #e0f7fb;
  border: 1px solid #b8ebf3;
  border-radius: 12px;
}
.tool-card-transfer #transfer-student {
  border-radius: var(--app-radius-sm);
  background: linear-gradient(180deg, #ea580c 0%, #c2410c 100%);
  border: 1.5px solid #9a3412;
  color: #fff;
  box-shadow: 0 2px 0 rgba(154,52,18,.25), 0 4px 10px rgba(194,65,12,.12);
}
.tool-card-transfer #transfer-student:hover {
  background: linear-gradient(180deg, #c2410c 0%, #9a3412 100%);
}
.trial-attend-capsule {
  font-weight: 900;
  font-size: 14px;
  color: #fff;
  background: #0e7490;
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}
.trial-attend-text {
  font-size: 13px;
  font-weight: 700;
  color: #155e75;
}

.trial-student-table-row td {
  background: #f0fbff;
  border-top: 2px solid #b8ebf3;
}
.trial-row-index {
  font-weight: 900;
  color: #0e7490;
  white-space: nowrap;
}
.trial-name-button {
  border: 0;
  background: transparent;
  font-weight: 800;
  font-size: 15px;
  color: #0f172a;
  cursor: pointer;
  padding: 0;
}
.trial-inline-tag {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 900;
  color: #0e7490;
  background: #cffafe;
  border-radius: 999px;
  padding: 1px 8px;
}
.trial-attend-button {
  border: 1px solid #5dcaa5;
  background: #fff;
  color: #0e7490;
  font-weight: 900;
  min-width: 34px;
  min-height: 34px;
  border-radius: 8px;
  cursor: pointer;
}
.trial-attend-button.filled-cell {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}
.trial-attend-next {
  border-color: #93c5fd;
  color: #15803d;
}

/* ===== 排课引擎 UI（20260712v） ===== */
.hidden { display: none !important; }
.link-button {
  background: none; border: none; color: #2b6cb0; cursor: pointer;
  font-size: 14px; text-decoration: underline; padding: 4px 6px; min-height: auto;
}
.tool-card-manage #class-time-form {
  flex-wrap: wrap !important;
  align-items: flex-start;
}
.weekday-picker {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  width: 100%;
}
.weekday-picker label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  margin: 0;
}
.weekday-picker label:hover {
  border-color: #6366f1;
  color: #4338ca;
  background: #eef2ff;
}
.weekday-picker label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.weekday-picker label input[type="checkbox"]:checked + span {
  color: #fff;
  font-weight: 800;
}
.weekday-picker label:has(input:checked),
.weekday-picker label.is-active {
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  border-color: #4f46e5;
  color: #fff;
  box-shadow: 0 2px 6px rgba(99,102,241,0.25);
}
.weekday-picker label:has(input:checked):hover,
.weekday-picker label.is-active:hover {
  background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%);
  color: #fff;
}
.weekday-picker.disabled-picker { opacity: .45; pointer-events: none; }
.single-class-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; width: 100%; }
.class-time-name-input { width: 160px; }
.schedule-drawer-body .class-time-name-input { width: 100% !important; }
.time-range { display: inline-flex; align-items: center; gap: 6px; }
.class-edit-hint {
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
  font-weight: 700;
  margin-top: -2px;
}
.class-edit-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.class-edit-range-label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}
.class-edit-range-label input {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  background: #f8fafc;
}

.schedule-settings-card .schedule-settings-btn {
  background: #2b6cb0; color: #fff; border: none; border-radius: 6px; cursor: pointer;
  min-height: 42px; font-size: 15px; padding: 8px 14px;
}
.schedule-page-actions .schedule-settings-btn {
  background: #2b6cb0; color: #fff; border: none; border-radius: 6px; cursor: pointer;
  min-height: 38px; font-size: 14px; padding: 6px 14px;
  white-space: nowrap;
}
.schedule-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 8000;
}
.schedule-dialog {
  background: #fff; border-radius: 12px; width: min(680px, 94vw); max-height: 88vh; overflow: auto;
  padding: 18px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.schedule-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.schedule-head h3 { margin: 0; }
.schedule-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #888; }
.schedule-subform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.schedule-subform input, .schedule-subform select { min-height: 40px; font-size: 15px; padding: 6px 10px; }
.schedule-subform button { min-height: 40px; padding: 8px 14px; background: #2b6cb0; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.schedule-list { list-style: none; margin: 0; padding: 0; }
.schedule-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.schedule-list li button { border: none; background: #f3d4d4; color: #b42318; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.adj-extra { display: inline-flex; align-items: center; gap: 4px; }
.adj-current-class {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: #eef6ff;
  border: 1px solid #cfe0f7;
  color: #1e3a5f;
  font-size: 14px;
  font-weight: 800;
}
.adj-field {
  display: grid;
  gap: 6px;
  min-width: 150px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}
.adj-field input,
.adj-field select {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 14px;
}

.lesson-banner {
  margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid #e1e8f2;
}
.lesson-banner-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.lesson-flag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #e8f0ff; color: #2b4a73; }
.lesson-flag-ok { background: #e6f7ec; color: #1f8a4c; }
.lesson-flag-none { background: #fff3e0; color: #b26a00; }
.lesson-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lesson-chip { display: inline-flex; align-items: center; gap: 6px; background: #f4f8ff; border: 1px solid #dbe6f7; border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.lesson-chip b { font-weight: 600; }
.lesson-time { color: #556; }
.lesson-tag { font-style: normal; background: #ffe8c2; color: #b26a00; border-radius: 4px; padding: 0 6px; font-size: 12px; }
.lesson-tag-adj { background: #e8d8ff; color: #6b3fa0; }
.lesson-adjust-btn { border: none; background: #2b6cb0; color: #fff; border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 13px; }

/* 班级管理：编辑已有班级下拉 */
.edit-class-row { display: none !important; gap: 8px; align-items: center; margin-bottom: 0; flex-wrap: wrap; }
.edit-class-row select { flex: 1; min-width: 180px; padding: 6px 8px; border: 1px solid #ccd4e0; border-radius: 8px; font-size: 14px; background: #fff; }
.edit-class-row .link-button { padding: 4px 8px; }
.class-time-edit-select { font-weight: 500; }

/* 排课块表单 */
.block-form { display: flex; flex-direction: column; gap: 10px; }
.block-dates { display: flex; gap: 12px; flex-wrap: wrap; }
.block-dates label { display: flex; flex-direction: column; font-size: 12px; color: #667; gap: 4px; }
.block-dates input { padding: 6px 8px; border: 1px solid #ccd4e0; border-radius: 8px; font-size: 14px; }
.block-weekdays-label, .block-slots-label { font-size: 13px; font-weight: 500; color: #2b4a73; margin-top: 4px; }
.block-weekdays { display: flex; gap: 6px; flex-wrap: wrap; }
.block-weekdays .wd { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid #ccd4e0; border-radius: 8px; cursor: pointer; font-size: 14px; background: #fff; color: #334; user-select: none; }
.block-weekdays .wd.on { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.block-slot-row { display: flex; align-items: center; gap: 8px; }
.block-slot-row input[type="time"] { padding: 5px 8px; border: 1px solid #ccd4e0; border-radius: 8px; font-size: 14px; }
.block-slot-sep { color: #667; }
.block-slot-del { border: 1px solid #e3a3a3; background: #fff; color: #c0392b; border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 16px; line-height: 1; }
.block-add-slot { align-self: flex-start; border: 1px dashed #2b6cb0; background: #fff; color: #2b6cb0; border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: 13px; }
.block-ignore { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #334; }
.block-submit { align-self: flex-start; background: #2f855a; color: #fff; border: none; border-radius: 8px; padding: 8px 18px; cursor: pointer; font-size: 14px; }
#block-list .block-actions { display: flex; gap: 6px; }
#block-list .block-extend { border: 1px solid #2b6cb0; background: #fff; color: #2b6cb0; border-radius: 6px; padding: 2px 10px; cursor: pointer; font-size: 13px; }

/* ===== 学生入班：跨老师姓名检索下拉 (?v=20260712z) ===== */
.student-name-wrap { position: relative; }
.name-suggestions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #fff;
  border: 1px solid #cbd5e0;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.name-suggestions[hidden] { display: none; }
.ns-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  color: #1a202c;
}
.ns-item:hover { background: #ebf4ff; }
.ns-hint { font-size: 12px; flex-shrink: 0; padding: 2px 8px; border-radius: 10px; }
.ns-merge { background: #fef3c7; color: #92651b; }

/* ===== 排课管理页 ===== */
.schedule-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: #f1f5fb;
}
.schedule-page-titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.schedule-page-head h2 { margin: 0; font-size: 22px; font-weight: 700; }
.schedule-page-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.schedule-hidden-anchor {
  display: none !important;
}
.schedule-layout {
  display: flex;
  gap: 0;
  padding: 14px 18px 16px;
  align-items: flex-start;
}
.schedule-left {
  flex: 0 0 0;
  max-width: 0;
  width: 0;
  overflow: hidden;
}
.schedule-left .top-tools {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  border-bottom: none;
  padding: 0;
}
.schedule-right {
  flex: 1;
  min-width: 0;
}
.schedule-tools-sections {
  display: none;
}
.schedule-tools-sections .top-tools.schedule-tools-grid {
  display: grid;
}
.schedule-tools-sections .tool-card {
  min-height: 0;
}
.schedule-overview-wrap {
  width: 100%;
  min-height: 400px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-card);
  padding: 16px 18px;
}
/* ===== 操作栏 + 右侧抽屉（替代旧卡片网格） ===== */
.schedule-action-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 4px;
}
.schedule-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 2px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-card);
  color: #1e293b;
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  user-select: none;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
.schedule-action-btn:hover {
  border-color: #4f46e5;
  color: #3730a3;
  background: #eef2ff;
  box-shadow: 0 3px 10px rgba(99,102,241,0.22);
  transform: translateY(-1px);
}
.schedule-action-btn--active,
.schedule-action-btn--active:hover {
  border-color: #4f46e5;
  background: #e0e7ff;
  color: #312e81;
  box-shadow: 0 2px 8px rgba(99,102,241,0.28);
}
.schedule-action-icon {
  font-size: 22px;
  line-height: 1;
}
/* 班级学生名册（周排课下方） */
.schedule-class-roster-wrap {
  margin-top: 18px;
  width: 100%;
}
.class-roster-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 24px;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  color: #64748b;
  font-size: 16px;
  font-weight: 600;
}
.class-roster-empty-icon {
  font-size: 22px;
}
.class-roster-card {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 16%);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 22px 22px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}
.class-roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.class-roster-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 800;
  color: #1e293b;
}
.class-roster-title-icon { font-size: 22px; }
.class-roster-title-date {
  font-size: 15px;
  font-weight: 600;
  color: #64748b;
  padding: 3px 10px;
  background: #eef2ff;
  border-radius: 8px;
}
.class-roster-stats {
  display: flex;
  gap: 8px;
}
.class-roster-stat {
  font-size: 14px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
}
.class-roster-stat b { font-size: 16px; margin-left: 2px; }
.class-roster-stat--active { background: #4f46e5; }
.class-roster-stat--trial { background: #ec4899; }
.class-roster-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-height: 56px;
  align-items: center;
}
.class-roster-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  border: 2px solid transparent;
  transition: all 0.15s;
  cursor: default;
  user-select: none;
}
.class-roster-chip--active {
  background: linear-gradient(180deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #312e81;
  border-color: #818cf8;
  box-shadow: 0 2px 4px rgba(99,102,241,0.18);
}
.class-roster-chip--active:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(99,102,241,0.32);
  background: linear-gradient(180deg, #c7d2fe 0%, #a5b4fc 100%);
}
.class-roster-chip--trial {
  background: linear-gradient(180deg, #fce7f3 0%, #fbcfe8 100%);
  color: #9d174d;
  border-color: #f472b6;
  box-shadow: 0 2px 4px rgba(236,72,153,0.22);
}
.class-roster-chip--trial:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(236,72,153,0.36);
  background: linear-gradient(180deg, #fbcfe8 0%, #f9a8d4 100%);
}
.class-roster-trial-tag {
  font-size: 13px;
  font-weight: 800;
  padding: 2px 8px;
  background: #ec4899;
  color: #fff;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.class-roster-no-student {
  color: #94a3b8;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 0;
}

/* 抽屉遮罩 */
.schedule-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.18);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s, visibility 0.22s;
}
.schedule-drawer-backdrop.open {
  opacity: 1;
  visibility: visible;
}
/* 抽屉面板 — 从右侧滑入 */
.schedule-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 520px;
  max-width: 94vw;
  height: 100vh;
  background: #fff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -4px 0 24px rgba(15,23,42,0.15);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.schedule-drawer.open {
  transform: translateX(0);
}
.schedule-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  background: #f8fafc;
}
.schedule-drawer-title {
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: 0.02em;
}
.schedule-drawer-close {
  width: 34px;
  height: 34px;
  border: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.schedule-drawer-close:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}
.schedule-drawer-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: #fff;
}
/* 抽屉内的分组卡片 */
.schedule-drawer-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.schedule-drawer-section:last-child {
  margin-bottom: 0;
}
.schedule-drawer-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  margin: 0 0 16px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.schedule-drawer-subsection-title {
  font-size: 13px;
  font-weight: 700;
  color: #6366f1;
  margin: 0 0 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  background: #eef2ff;
  border-radius: 6px;
  display: inline-block;
}
/* 抽屉内的表单适配 */
.schedule-drawer-body .schedule-form-content,
.schedule-drawer-body .schedule-subsection,
.schedule-drawer-body .student-entry-form,
.schedule-drawer-body .student-actions,
.schedule-drawer-body .class-remove-body,
.schedule-drawer-body .class-delete-body {
  margin: 0;
  max-width: none;
}
.schedule-drawer-body .tool-card-title {
  margin-top: 0;
  font-size: 15px;
}
/* 抽屉内的 select / input 美化 */
.schedule-drawer-body select,
.schedule-drawer-body input[type="text"],
.schedule-drawer-body input[type="date"],
.schedule-drawer-body input[type="time"],
.schedule-drawer-body input[type="number"] {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 15px;
  padding: 11px 14px;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.schedule-drawer-body select:focus,
.schedule-drawer-body input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.schedule-drawer-body label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 7px;
}
.schedule-drawer-body button[type="submit"],
.schedule-drawer-body button.primary-btn {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(99,102,241,0.25);
}

/* ===== 抽屉表单统一字段布局 ===== */
.drawer-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  min-width: 0;
}
.drawer-field:last-child {
  margin-bottom: 0;
}
/* 分组卡片 — 把相关字段包在一个卡片里 */
.drawer-section-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.drawer-section-card:last-child {
  margin-bottom: 0;
}
.drawer-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.drawer-section-title::before {
  content: "";
  width: 3px;
  height: 14px;
  background: #6366f1;
  border-radius: 2px;
}
/* 字段提示文字 */
.drawer-hint {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
  margin-top: 4px;
  padding-left: 2px;
}
/* 双列字段行：日期范围、时间范围 */
.drawer-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.drawer-field-row:last-child {
  margin-bottom: 0;
}
.drawer-field--half {
  margin-bottom: 0;
}
.drawer-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  margin: 0;
  letter-spacing: 0.02em;
}
.drawer-label::before {
  content: "";
  width: 3px;
  height: 12px;
  background: #6366f1;
  border-radius: 2px;
}
.drawer-submit {
  width: 100%;
  min-height: 50px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(99,102,241,0.25);
  letter-spacing: 0.04em;
}
.drawer-submit:hover:not(:disabled) {
  background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%);
  box-shadow: 0 4px 12px rgba(99,102,241,0.35);
  transform: translateY(-1px);
}
.drawer-submit:disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}
/* 抽屉内的 date-range 占满宽度 */
.schedule-drawer-body .date-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
}
/* 抽屉内的表单：强制块级布局，覆盖 .inline-form 的 grid 1fr auto */
.schedule-drawer-body form,
.schedule-drawer-body .student-actions {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.schedule-drawer-body form > * {
  margin-bottom: 0;
}
.schedule-drawer-body .date-range .date-sep {
  justify-self: center;
  font-size: 16px;
  font-weight: 700;
  color: #94a3b8;
}
.schedule-drawer-body .time-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
}
.schedule-drawer-body .time-range .time-sep {
  justify-self: center;
  font-size: 16px;
  font-weight: 700;
  color: #94a3b8;
}
.schedule-drawer-body button[type="submit"]:hover,
.schedule-drawer-body button.primary-btn:hover {
  background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%);
  box-shadow: 0 3px 10px rgba(99,102,241,0.35);
}
/* 入班·出班在抽屉内：左右分栏（抽屉够宽了） */
.schedule-drawer-body .enroll-remove-body {
  display: flex;
  flex-direction: row;
  gap: 18px;
  align-items: stretch;
}
.schedule-drawer-body .enroll-remove-body .enroll-section,
.schedule-drawer-body .enroll-remove-body .remove-section {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.schedule-drawer-body .enroll-remove-body .remove-section {
  border-left: 1px dashed #cbd5e1;
  padding-left: 18px;
}
.schedule-drawer-body .enroll-remove-body .remove-section .class-remove-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}
.schedule-drawer-body .remove-class-btn {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 2px 6px rgba(245,158,11,0.25);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  min-height: 48px;
  margin-top: auto;
  cursor: pointer;
  transition: all 0.15s;
}
.schedule-drawer-body .remove-class-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 3px 10px rgba(245,158,11,0.35);
}
.schedule-drawer-body .remove-class-btn:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
}
.schedule-drawer-body .remove-class-select,
.schedule-drawer-body .remove-student-select,
.schedule-drawer-body .remove-class-date {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
.schedule-drawer-body .remove-class-select:focus,
.schedule-drawer-body .remove-student-select:focus,
.schedule-drawer-body .remove-class-date:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}
.schedule-drawer-body .remove-class-hint {
  font-size: 12px;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0;
  line-height: 1.5;
}

.schedule-create-sections {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  width: 100%;
  align-items: stretch;
}
/* ===== 统一卡片弹性列布局：标题固定 / 内容撑满 / 按钮沉底 ===== */
.schedule-create-card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-card);
  padding: 14px 14px 16px;
  box-shadow: var(--app-shadow);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.schedule-create-card[data-form-slot="single"] {
  border-top: 6px solid #0ea5e9;
}
.schedule-create-card[data-form-slot="cycle"] {
  border-top: 6px solid #2563eb;
}
.schedule-create-card[data-form-slot="delete"] {
  border-top: 6px solid #dc2626;
}
/* 表单作为卡片直接内容：轻量内边框块 */
.schedule-create-card .schedule-form-content {
  margin: 0;
  border: 1px solid #e8eef5;
  border-radius: var(--app-radius-sm);
  background: #fff;
  padding: 14px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* ── 按卡片内容密度差异化放大（空白多的卡片字号/间距更大） ── */

/* 学员入班卡片变量 — 合并后改为嵌套在 enroll-remove 卡片内 */
.schedule-create-card[data-form-slot="enroll-remove"] .enroll-section .schedule-form-content {
  gap: 18px;
  padding: 18px 16px;
}
.schedule-create-card[data-form-slot="enroll-remove"] .enroll-section .student-entry-form input {
  min-height: 46px !important;
  font-size: 17px !important;
  padding: 10px 14px !important;
}
.schedule-create-card[data-form-slot="enroll-remove"] .enroll-section .student-entry-form.tool-card {
  gap: 16px !important;
}
.schedule-create-card[data-form-slot="enroll-remove"] > .schedule-create-card-title {
  font-size: 17px;
}

/* 单次排课 — 有一定空白 */
.schedule-create-card[data-form-slot="single"] .schedule-form-content {
  gap: 14px;
  padding: 16px 14px;
}
.schedule-create-card[data-form-slot="single"] #class-time-form input,
.schedule-create-card[data-form-slot="single"] #class-time-form select {
  min-height: 43px !important;
  font-size: 16px !important;
}
/* 单次时间行加大间距 */
.schedule-create-card[data-form-slot="single"] .time-range {
  gap: 14px;
}

/* 学员转班 — 中等空白 */
.schedule-create-card[data-form-slot="transfer"] .transfer-tools {
  gap: 16px !important;
  padding: 8px 0;
}
.schedule-create-card[data-form-slot="transfer"] .transfer-tools select {
  min-height: 42px !important;
  font-size: 15px !important;
  padding: 9px 12px !important;
}
.schedule-create-card[data-form-slot="transfer"] > .schedule-create-card-title {
  font-size: 16px;
}

/* 删除班级 — 中等空白 */
.schedule-create-card[data-form-slot="delete"] .class-delete-body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1 1 auto;
}
.class-delete-select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #f1b0b8;
  border-radius: var(--app-radius-sm);
  background: #fff7f8;
  color: #881337;
  font-size: 15px;
  padding: 9px 12px;
}
.class-delete-date {
  min-height: 42px;
  border: 1px solid #f1b0b8;
  border-radius: var(--app-radius-sm);
  background: #fff7f8;
  color: #881337;
  font-size: 15px;
  padding: 9px 10px;
}
/* 删除班级提示文字（已在上方差异化区块中放大到 13px/15px） */
.class-delete-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.class-delete-range .class-delete-date {
  flex: 1 1 0;
  min-width: 0;
}
.class-delete-range-sep {
  color: #be123c;
  font-weight: 700;
  flex: 0 0 auto;
}
.class-delete-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #9f1239;
}
.class-delete-btn {
  width: 100%;
  min-height: 42px;
  border: 1px solid #fca5a5;
  border-radius: var(--app-radius-sm);
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  margin-top: auto;
}
.class-delete-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
}
.class-delete-btn:disabled {
  cursor: not-allowed;
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #94a3b8;
}
/* 学员出班卡片 — 合并到 enroll-remove 卡片内 */
.schedule-create-card[data-form-slot="enroll-remove"] .remove-section .class-remove-body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1 1 auto;
}
/* 合并卡片：左右分栏布局 */
.enroll-remove-body {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex: 1 1 auto;
  align-items: stretch;
}
.enroll-remove-body .enroll-section,
.enroll-remove-body .remove-section {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.enroll-remove-body .remove-section {
  border-left: 1px dashed #e9d5ff;
  padding-left: 16px;
}
.remove-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.remove-field-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--app-text-secondary, #64748b);
}
.remove-class-select,
.remove-student-select,
.remove-class-date {
  width: 100%;
  min-height: 42px;
  border: 1px solid #fcd34d;
  border-radius: var(--app-radius-sm);
  background: #fffbeb;
  color: #92400e;
  font-size: 15px;
  padding: 9px 12px;
  box-sizing: border-box;
}
.remove-class-select:focus,
.remove-student-select:focus,
.remove-class-date:focus {
  outline: 2px solid #f59e0b;
  border-color: #f59e0b;
}
.remove-student-select:disabled {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}
.remove-class-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #b45309;
}
.remove-class-btn {
  width: 100%;
  min-height: 42px;
  border: 1px solid #fcd34d;
  border-radius: var(--app-radius-sm);
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  margin-top: auto;
}
.remove-class-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
}
.remove-class-btn:disabled {
  cursor: not-allowed;
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #94a3b8;
}
/* 修改班级 — 内容适中，微调放大 */
.schedule-create-card[data-form-slot="edit"] .schedule-form-content {
  gap: 13px;
  padding: 15px 14px;
}
.schedule-create-card[data-form-slot="edit"] #class-edit-form select {
  min-height: 41px !important;
  font-size: 15px !important;
}
/* 修改班级时间行加大间距 */
.schedule-create-card[data-form-slot="edit"] .time-range {
  gap: 13px;
}

/* ===== edit / enroll-remove / transfer：内容撑满 + 按钮沉底对齐 ===== */
.schedule-create-card[data-form-slot="edit"],
.schedule-create-card[data-form-slot="enroll-remove"],
.schedule-create-card[data-form-slot="transfer"] {
  grid-column: span 1;
}
.schedule-create-card[data-form-slot="enroll-remove"] {
  grid-column: span 2;
  background: linear-gradient(180deg, #faf7ff 0%, #ffffff 24%);
  border-top: 6px solid #7c3aed;
}
.schedule-create-card[data-form-slot="enroll-remove"] > .schedule-create-card-title {
  color: #6d28d9;
}
.schedule-create-card[data-form-slot="edit"] {
  background: linear-gradient(180deg, #f2fffd 0%, #ffffff 24%);
  border-top: 6px solid #0f766e;
}
.schedule-create-card[data-form-slot="transfer"] {
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 24%);
  border-top: 6px solid #ea580c;
}
/* 标题固定不拉伸 */
.schedule-create-card[data-form-slot="edit"] > .schedule-create-card-title,
.schedule-create-card[data-form-slot="enroll-remove"] > .schedule-create-card-title,
.schedule-create-card[data-form-slot="transfer"] > .schedule-create-card-title {
  flex: 0 0 auto;
}
/* 内容区弹性填充 */
.schedule-create-card[data-form-slot="edit"] .schedule-subsection-edit,
.schedule-create-card[data-form-slot="enroll-remove"] .enroll-remove-body,
.schedule-create-card[data-form-slot="transfer"] .student-actions {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.schedule-create-card[data-form-slot="edit"] .schedule-subsection-edit {
  justify-content: space-between;
}
.schedule-create-card[data-form-slot="enroll-remove"] .enroll-section .student-entry-form.tool-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 10px;
  max-height: none;
}
/* 入班/转班卡片内：隐藏内部重复标题（卡片已有外部标题） */
.schedule-create-card[data-form-slot="enroll-remove"] .enroll-section .student-entry-form .tool-card-title,
.schedule-create-card[data-form-slot="transfer"] .student-actions .tool-card-title {
  display: none;
}
/* 入班卡片内：班级选择下拉（必须可见，否则无法指定入班班级） */
.schedule-create-card[data-form-slot="enroll-remove"] .enroll-section .student-entry-form #student-class-time {
  display: block;
  width: 100%;
  margin: 0;
}
/* 入班卡片内：隐藏次要的"办理退学"按钮（低频操作，释放空间让主按钮沉底） */
.schedule-create-card[data-form-slot="enroll-remove"] .enroll-section .student-entry-form #withdraw-student {
  display: none;
}
/* 入班的提交按钮沉底，退学按钮紧跟其后 */
.schedule-create-card[data-form-slot="enroll-remove"] .enroll-section .student-entry-form.tool-card > button[type="submit"] {
  margin-top: auto !important;
}
.schedule-create-card[data-form-slot="enroll-remove"] .enroll-section .student-entry-form.tool-card > button.secondary-action {
  margin-top: 0 !important;
}
/* 入班卡：内层容器去多余装饰，让按钮真正沉到卡片底部 */
.schedule-create-card[data-form-slot="enroll-remove"] .enroll-section .student-entry-form.tool-card {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.schedule-create-card[data-form-slot="transfer"] .transfer-tools {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding-bottom: 0 !important;
}
/* 转班确认按钮沉底兜底 */
.schedule-create-card[data-form-slot="transfer"] #transfer-student {
  margin-top: auto !important;
}
/* 转班卡：内层容器去多余装饰，让按钮沉到卡片底部 */
.schedule-create-card[data-form-slot="transfer"] .student-actions {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.schedule-create-card[data-form-slot="transfer"] .tool-card-transfer {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.schedule-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.schedule-create-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px;
  text-align: center;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
}
.schedule-create-card-title--single { color: #1d4ed8; }
.schedule-create-card-title--edit { color: #0f766e; }
.schedule-create-card-title--enroll { color: #6d28d9; }
.schedule-create-card-title--transfer { color: #c2410c; }
.schedule-create-card #class-time-form,
.schedule-create-card #class-cycle-form,
.schedule-create-card #class-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  border: 0;
  flex: 1 1 auto;
}
.schedule-create-card .schedule-subsection {
  border-radius: var(--app-radius-sm);
  padding: 10px;
  border: 1px solid #e8eef5;
  background: #fff;
}
.schedule-create-card .schedule-subsection + .schedule-subsection {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed #cbd5e1;
}
.schedule-subsection-heading {
  display: flex;
  align-items: center;
  min-height: 34px;
  font-size: 14px;
  font-weight: 700;
  margin: -10px -10px 10px;
  padding: 6px 10px 8px;
  letter-spacing: 0.02em;
  border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0;
}
.schedule-create-card .schedule-subsection-single {
  border-color: #cfe2f5;
}
.schedule-create-card .schedule-subsection-cycle {
  border-color: #cfe2f5;
}
.schedule-create-card .schedule-subsection-edit {
  border-color: #f2d6ba;
}
.schedule-create-card .schedule-subsection-heading-single {
  color: #166534;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  border-bottom: 1px solid #bbf7d0;
}
.schedule-create-card .schedule-subsection-heading-cycle {
  color: #1e40af;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border-bottom: 1px solid #bfdbfe;
}
.schedule-create-card .schedule-subsection-heading-edit {
  color: #9a3412;
  background: linear-gradient(180deg, #fff7ed 0%, #fed7aa 100%);
  border-bottom: 1px solid #fdba74;
}
.schedule-create-card #class-time-form .tool-card-title,
.schedule-create-card #class-cycle-form .tool-card-title,
.schedule-create-card #class-edit-form .tool-card-title {
  display: none;
}
.schedule-create-card #class-time-form input,
.schedule-create-card #class-time-form select,
.schedule-create-card #class-cycle-form input,
.schedule-create-card #class-cycle-form select,
.schedule-create-card #class-edit-form input,
.schedule-create-card #class-edit-form select {
  min-height: 40px;
  font-size: 16px;
  padding: 8px 12px;
  border: 1px solid #cfd9e4;
  border-radius: 14px;
  background: #fff;
}
.schedule-tools-sections .tool-card-adjust {
  border: 1px solid #c9ebd6;
  background: linear-gradient(180deg, #f0fff6 0%, #ffffff 100%);
}
.schedule-tools-sections .tool-card-manage {
  border: 1px solid #cfe0ff;
  background: linear-gradient(180deg, #f2f7ff 0%, #ffffff 100%);
}
.schedule-tools-sections #student-form {
  border: 1px solid #e7d7ff;
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
  grid-column: auto;
  grid-row: auto;
}
.schedule-tools-sections .tool-card-title {
  font-size: 20px;
  font-weight: 900;
}
.schedule-tools-sections .student-entry-form,
.schedule-tools-sections .tool-card-manage,
.schedule-tools-sections .tool-card-adjust {
  padding: 10px 12px 12px;
  border-radius: 18px;
}
.schedule-tools-sections #student-form button,
.schedule-tools-sections .tool-card-adjust button,
.schedule-tools-sections .tool-card-manage button,
.schedule-tools-sections .tool-card-manage select,
.schedule-tools-sections .tool-card-manage input,
.schedule-tools-sections #student-form input,
.schedule-tools-sections #student-form select {
  min-height: 38px;
  font-size: 14px;
}
.schedule-tools-sections .tool-card-title,
.schedule-create-card .tool-card-title {
  font-size: 19px;
  margin-bottom: 6px;
}
.schedule-tools-sections .tool-card-manage .inline-form {
  gap: 8px;
  padding: 10px;
}
.schedule-tools-sections .tool-card-manage .student-actions,
.schedule-tools-sections #student-form {
  gap: 8px;
}
.schedule-tools-sections .tool-card-adjust #schedule-class-bar {
  min-height: 220px;
  max-height: 260px;
  overflow: auto;
}

@media (max-width: 1500px) {
  .schedule-create-sections {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1040px) {
  .schedule-create-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .schedule-create-sections {
    grid-template-columns: 1fr;
  }
  /* 窄屏时卡片不再强制等高，按内容自然收缩 */
  .schedule-create-card {
    align-self: stretch;
  }
}
.schedule-create-card #class-time-form button,
.schedule-create-card #class-cycle-form button,
.schedule-create-card #class-edit-form button {
  min-height: 40px;
  font-size: 14.5px;
  padding: 8px 12px;
}
.schedule-create-card .time-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.class-cycle-inline-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: center;
}
.class-cycle-date-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.class-cycle-date-range input[type="date"] {
  width: 100%;
  min-width: 0;
}
.class-cycle-date-range .date-sep,
.schedule-create-card .date-range .date-sep {
  justify-self: center;
  font-size: 18px;
  font-weight: 900;
  color: #64748b;
}
.schedule-create-card .single-class-toggle {
  width: auto;
}
.schedule-create-card .weekday-picker {
  width: 100%;
  gap: 10px;
}
.schedule-create-card #class-cycle-form .time-sep,
.schedule-create-card #class-time-form .time-sep,
.schedule-create-card #class-edit-form .time-sep {
  justify-self: center;
  font-size: 18px;
  font-weight: 900;
  color: #64748b;
}
.schedule-create-card #class-cycle-form .class-time-name-input,
.schedule-create-card #class-time-form .class-time-name-input,
.schedule-create-card #class-edit-form .class-time-name-input {
  width: 100%;
}
.schedule-create-card #class-cycle-form {
  border-top: 0;
  margin-top: 0;
  padding-top: 0 !important;
}
.schedule-create-card #class-edit-form {
  border-top: 0;
  margin-top: 0;
  padding-top: 0 !important;
}
.schedule-create-card #class-time-form {
  align-items: stretch;
}
/* 创建卡内按钮 —— 全宽 + 沉底对齐 */
.schedule-create-card button,
.student-entry-form button[type="submit"],
.student-entry-form .secondary-action,
.tool-card-transfer #transfer-student {
  width: 100%;
  min-height: 40px;
  border-radius: var(--app-radius-sm);
  font-size: 15px;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .15s, border-color .15s, opacity .15s, box-shadow .15s;
  margin-top: auto;
}

.schedule-create-card #class-time-form #class-time-submit-btn {
  order: 20;
  margin: auto 0 0;
  border-radius: var(--app-radius-sm);
  background: linear-gradient(180deg, #15803d 0%, #16a34a 100%);
  border: 1.5px solid #166534;
  color: #fff;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 0 rgba(22,101,52,.25), 0 4px 10px rgba(22,163,74,.12);
  align-self: stretch;
}
.schedule-create-card #class-time-form #class-time-submit-btn:hover {
  background: linear-gradient(180deg, #166534 0%, #15803d 100%);
}
.schedule-create-card #class-cycle-form #class-cycle-submit-btn {
  order: 20;
  margin: auto 0 0;
  align-self: stretch;
  border-radius: var(--app-radius-sm);
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border: 1.5px solid #1e40af;
  color: #fff;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 0 rgba(30,64,175,.25), 0 4px 10px rgba(37,99,235,.12);
}
.schedule-create-card #class-cycle-form #class-cycle-submit-btn:hover {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
}
.schedule-cycle-delete-btn {
  margin: 2px 0 0;
  align-self: stretch;
  width: 100%;
  border-radius: var(--app-radius-sm);
  border: 1px solid #fecdd3;
  background: #fff1f2;
  color: #be123c;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.schedule-cycle-delete-btn:hover {
  background: #ffe4e6;
  border-color: #fda4af;
}
.schedule-cycle-delete-btn:disabled {
  cursor: not-allowed;
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
  opacity: 1;
}
.schedule-cycle-delete-select {
  margin-top: 4px;
  width: 100%;
  min-height: 42px;
  border: 1px solid #fda4af !important;
  background: #fff7f8 !important;
  color: #881337;
  font-weight: 800;
}
/* 周期调整卡：把「删除周期班级」隔离成独立警示分区，与上方「修改」区明确区分 */
.class-edit-delete-zone {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  padding: 12px 12px 14px;
  border: 1px solid #fecdd3;
  border-left: 4px solid #f43f5e;
  border-radius: 14px;
  background: #fff7f8;
}
.class-edit-delete-zone-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #be123c;
}
.class-edit-delete-zone-heading::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f43f5e;
}
.schedule-create-card #class-edit-form button[type="submit"] {
  margin: auto 0 0;
  align-self: stretch;
  border-radius: var(--app-radius-sm);
  background: linear-gradient(180deg, #c2410c 0%, #ea580c 100%);
  border: 1.5px solid #9a3412;
  color: #fff;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 0 rgba(154,52,18,.25), 0 4px 10px rgba(234,88,12,.12);
}
.schedule-create-card #class-edit-form button[type="submit"]:hover {
  background: linear-gradient(180deg, #9a3412 0%, #c2410c 100%);
}
.schedule-create-card #class-cycle-form select,
.schedule-create-card #class-cycle-form input[type="date"],
.schedule-create-card #class-time-form select,
.schedule-create-card #class-edit-form select,
.schedule-create-card #class-edit-form input[type="date"] {
  min-width: 0;
  width: 100% !important;
  flex: none;
}
.schedule-create-card #class-time-form #class-time-edit-select,
.schedule-create-card #class-time-form #class-time-cancel-edit {
  display: none;
}

@media (max-width: 1500px) {
  .schedule-create-sections {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1040px) {
  .schedule-create-sections {
    grid-template-columns: repeat(2, 1fr);
  }
  .schedule-create-card[data-form-slot="enroll-remove"] {
    grid-column: span 2;
  }
}

@media (max-width: 680px) {
  .schedule-create-sections {
    grid-template-columns: minmax(0, 1fr);
  }
  .class-cycle-inline-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .schedule-create-card[data-form-slot="enroll-remove"] {
    grid-column: span 1;
  }
  .enroll-remove-body {
    flex-direction: column;
  }
  .enroll-remove-body .remove-section {
    border-left: none;
    border-top: 1px dashed #e9d5ff;
    padding-left: 0;
    padding-top: 14px;
  }
}
.schedule-create-card #class-time-form #class-time-weekdays[hidden] {
  display: none !important;
}
.schedule-create-card #class-cycle-form .weekday-picker,
.schedule-create-card #class-time-form .weekday-picker {
  min-width: 0;
}
.schedule-class-bar { max-height: 260px; overflow-y: auto; margin: 4px 0 10px; }
.schedule-class-bar .class-time-band { padding: 0; }
.schedule-class-bar .class-time-item { margin-bottom: 6px; }
.schedule-overview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #94a3b8;
  text-align: center;
}
.schedule-overview-empty-icon {
  font-size: 48px;
  font-weight: 300;
  color: #cbd5e0;
  margin-bottom: 12px;
}
.schedule-overview-empty p { margin: 4px 0; font-size: 14px; }
.schedule-overview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.schedule-overview-title-block {
  min-width: 0;
}
.schedule-overview-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.schedule-overview-subtitle {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 600;
  color: #475569;
}
.schedule-overview-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.schedule-overview-tools > :nth-child(3) {
  margin-left: auto;
}
.schedule-tool-btn {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.schedule-tool-btn:hover {
  background: #f0fdf4;
  border-color: #93c5fd;
}
.schedule-tool-btn.warn {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}
.schedule-tool-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.schedule-delete-history {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid #d8e2ec;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #f2f7fd 100%);
}
.schedule-delete-history-title {
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 8px;
  text-align: center;
}
.schedule-delete-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.schedule-delete-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: 14px;
  color: #334155;
  font-weight: 700;
}
.schedule-delete-history-empty {
  padding: 12px 0;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 800;
}
.schedule-history-restore {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.schedule-history-restore:hover {
  background: #f0fdf4;
  border-color: #93c5fd;
}
.schedule-week-nav {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.schedule-week-nav:hover {
  background: #f0fdf4;
  border-color: #93c5fd;
}
#schedule-week-date {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}
.schedule-overview-loading {
  padding: 40px 12px;
  text-align: center;
  color: #64748b;
  font-size: 15px;
  font-weight: 700;
}
.schedule-overview-loading-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(2px);
  z-index: 10;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  color: #1e40af;
  animation: schedule-loading-fade 0.18s ease-out;
}
@keyframes schedule-loading-fade { from { opacity: 0; } to { opacity: 1; } }
#schedule-overview-wrap { position: relative; }
.schedule-week-nav:disabled { opacity: 0.5; cursor: not-allowed; }
.schedule-overview-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.schedule-overview-grid--matrix {
  grid-template-columns: 100px repeat(7, 1fr);
  gap: 10px;
  align-items: start;
  overflow-x: auto;
}
.schedule-overview-time-head,
.schedule-overview-time-cell {
  border-radius: var(--app-radius);
  border: 1px solid var(--app-border);
  background: #f1f5fb;
  text-align: center;
  color: #334155;
  font-weight: 600;
}
.schedule-overview-time-head {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  padding: 0 8px;
}
.schedule-overview-time-cell {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  font-size: 15px;
}
.schedule-time-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  white-space: nowrap;
}
.schedule-time-block--axis {
  gap: 4px;
}
.schedule-time-start,
.schedule-time-end {
  display: block;
}
.schedule-time-sep {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 800;
  line-height: 1;
}
.schedule-overview-col-head--matrix {
  min-height: 62px;
}
/* 列交替色：周一/三/五/日（A组）浅蓝调，周二/四/六（B组）浅紫调 */
.schedule-overview-col-head--matrix.col-group-a {
  background: #e8f1fb;
}
.schedule-overview-col-head--matrix.col-group-b {
  background: #f0ecf9;
}
.schedule-overview-matrix-cell.col-group-a {
  background: #fbfdff;
}
.schedule-overview-matrix-cell.col-group-b {
  background: #f8f6fd;
}
.schedule-overview-matrix-cell {
  min-height: 100px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.schedule-overview-cell-empty {
  flex: 1;
  min-height: 100px;
  border: 1px dashed #e6ebf2;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0;
  background: #f8fafc;
}
.schedule-overview-matrix-empty {
  grid-column: 1 / -1;
  min-height: 180px;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 15px;
  font-weight: 800;
  background: #f8fbff;
}
.schedule-overview-col {
  background: #f8fafc;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  overflow: hidden;
  min-height: 260px;
}
.schedule-overview-col-head {
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #334155;
  background: #eef4fb;
}
.schedule-overview-col-head strong {
  font-size: 17px;
  color: #0f172a;
}
.schedule-overview-col-body {
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.schedule-overview-col-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  padding: 34px 0;
  font-weight: 700;
}
.schedule-overview-card {
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-left: 4px solid #22a455;
  border-radius: var(--app-radius-sm);
  padding: 6px 8px 7px;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  box-shadow: var(--app-shadow);
}
/* 周期课：绿色系（默认） */
.schedule-overview-card.is-cycle {
  border-left-color: #22a455;
  background: linear-gradient(180deg, #f6fff9 0%, #ffffff 70%);
}
/* 单次课：琥珀/橙色系，让少数单次课一眼可分 */
.schedule-overview-card.is-once {
  border-left-color: #f59e0b;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 70%);
}
.schedule-overview-card:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}
.schedule-overview-card.is-selected {
  border-color: #15803d;
  border-left-color: #15803d;
  background: linear-gradient(180deg, #dcfce7 0%, #f0fdf4 100%);
  box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.22), 0 10px 24px rgba(21, 128, 61, 0.16);
  transform: translateY(-1px);
}
/* 试听班级被选中：让绿色选中状态覆盖粉色 has-trial（CSS 优先级补救） */
.schedule-overview-card.is-selected.has-trial {
  border-color: #15803d;
  border-left-color: #15803d;
  background: linear-gradient(180deg, #dcfce7 0%, #f0fdf4 100%);
  box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.22), 0 10px 24px rgba(21, 128, 61, 0.16);
  transform: translateY(-1px);
}
.schedule-overview-card.is-canceled {
  border-left-color: #ef4444;
  background: linear-gradient(180deg, #fff7f7 0%, #fff1f2 100%);
}
.schedule-card-name {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 5px;
  line-height: 1.2;
  text-align: center;
}
.schedule-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 6px;
}
.schedule-card-teacher,
.schedule-card-grade,
.schedule-card-count {
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-weight: 600;
}
.schedule-card-trial-count {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fdf2f8;
  color: #be185d;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid #fbcfe8;
}
.schedule-card-trial-list {
  font-size: 12px;
  color: #be185d;
  background: #fdf2f8;
  border: 1px dashed #fbcfe8;
  border-radius: 8px;
  padding: 4px 8px;
  margin: 0 0 6px;
  text-align: center;
  line-height: 1.4;
  word-break: break-all;
}
.schedule-overview-card.has-trial {
  border-color: #f9a8d4;
  background: linear-gradient(180deg, #fef6fb 0%, #fff 100%);
  box-shadow: 0 2px 8px rgba(244, 114, 182, 0.12);
}
.schedule-overview-card.has-trial .schedule-card-name::after {
  content: "🎧";
  margin-left: 4px;
  font-size: 14px;
}
.schedule-card-once,
.schedule-card-cycle,
.schedule-card-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.schedule-card-once {
  background: #ede9fe;
  color: #6d28d9;
}
.schedule-card-cycle {
  background: #dcfce7;
  color: #166534;
}
.schedule-card-state.canceled {
  background: #fee2e2;
  color: #b91c1c;
}
.schedule-card-state.changed {
  background: #fef3c7;
  color: #b45309;
}
.schedule-card-state.normal {
  background: #e0f2fe;
  color: #0369a1;
}
.schedule-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 0;
}
.schedule-card-btn {
  flex: 1;
  min-height: 36px;
  border: 1px solid #d5deea;
  border-radius: 11px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #334155;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}
.schedule-card-btn:hover {
  background: #f0fdf4;
  border-color: #93c5fd;
}
.schedule-card-btn.warn {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}
.schedule-card-btn.warn:hover {
  background: #ffe4e6;
}
.schedule-card-btn.ghost {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #15803d;
}
.schedule-roster-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 2400;
}
.schedule-roster-modal.open {
  display: flex;
}
.schedule-roster-dialog {
  width: min(760px, 100%);
  max-height: min(88vh, 900px);
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius: 22px;
  border: 1px solid #dbe4ee;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
  display: flex;
  flex-direction: column;
}
.schedule-roster-close {
  min-width: 84px;
  min-height: 40px;
  border: 1px solid #d5deea;
  border-radius: 12px;
  background: #f8fafc;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.schedule-roster-close:hover {
  background: #eef6ff;
  border-color: #93c5fd;
}
.schedule-roster-panel {
  padding: 8px 18px 18px;
  overflow: auto;
}
.schedule-roster-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 8px 4px 14px;
}
.schedule-roster-title {
  font-size: 26px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.15;
}
.schedule-roster-subtitle {
  margin-top: 6px;
  font-size: 15px;
  color: #64748b;
  font-weight: 700;
}
.schedule-roster-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.schedule-roster-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}
.schedule-roster-chip.current {
  background: #dcfce7;
  color: #166534;
}
.schedule-roster-chip.history {
  background: #e2e8f0;
  color: #475569;
}
.schedule-roster-chip.trial {
  background: #fdf2f8;
  color: #be185d;
  border: 1px solid #fbcfe8;
}
.schedule-roster-section-trial {
  background: linear-gradient(180deg, #fdf2f8 0%, #fce7f3 100%);
  border-color: #f9a8d4;
}
.schedule-roster-row-trial {
  background: linear-gradient(90deg, #fdf2f8 0%, #ffffff 100%);
  border-left: 3px solid #ec4899;
}
.schedule-roster-row-trial:hover {
  background: linear-gradient(90deg, #fce7f3 0%, #fdf2f8 100%);
}
.schedule-roster-badge.trial {
  background: #fbcfe8;
  color: #be185d;
  border: 1px solid #f9a8d4;
}
.schedule-roster-trial-status {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.schedule-roster-trial-status.present {
  background: #dcfce7;
  color: #16a34a;
}
.schedule-roster-trial-status.leave {
  background: #ffedd5;
  color: #ea580c;
}
.schedule-roster-trial-status.pending {
  background: #fef3c7;
  color: #ca8a04;
}
.schedule-roster-trial-status.absent {
  background: #fee2e2;
  color: #dc2626;
}
.schedule-roster-trial-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}
.schedule-roster-trial-contact,
.schedule-roster-trial-teacher,
.schedule-roster-trial-subject {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  border: 1px solid #fbcfe8;
}
.schedule-roster-sections {
  display: grid;
  gap: 14px;
}
.schedule-roster-section {
  border: 1px solid #dbe4ee;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  overflow: hidden;
}
.schedule-roster-section-title {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #eef4fa;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}
.schedule-roster-list {
  display: grid;
}
.schedule-roster-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid #edf2f7;
}
.schedule-roster-row:first-child {
  border-top: 0;
}
.schedule-roster-row:not(.is-history) {
  background: linear-gradient(180deg, #ffffff 0%, #f8fffb 100%);
}
.schedule-roster-row.is-history {
  background: #f8fafc;
}
.schedule-roster-index {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f0fdf4;
  color: #15803d;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.schedule-roster-student-main {
  min-width: 0;
}
.schedule-roster-name-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.schedule-roster-name {
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
}
.schedule-roster-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.schedule-roster-badge.current {
  background: #dcfce7;
  color: #166534;
}
.schedule-roster-badge.history {
  background: #e2e8f0;
  color: #475569;
}
.schedule-roster-period {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  color: #64748b;
  font-weight: 700;
}
.schedule-roster-empty {
  padding: 22px 16px 24px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 700;
}
.class-edit-hint {
  margin-top: -4px;
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
  font-weight: 700;
}
.class-edit-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.class-edit-range-label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #334155;
}
.class-edit-range-label input {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 14px;
  color: #0f172a;
}
.class-edit-form .weekday-picker {
  margin-top: 2px;
}
@media (max-width: 1280px) {
  .schedule-overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .schedule-overview-grid--matrix {
    grid-template-columns: 92px repeat(7, minmax(180px, 1fr));
    overflow-x: auto;
  }
}
@media (max-width: 900px) {
  .schedule-overview-head {
    flex-direction: column;
    align-items: stretch;
  }
  .schedule-overview-tools {
    justify-content: flex-start;
  }
  .schedule-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .schedule-overview-grid--matrix {
    grid-template-columns: 86px repeat(7, minmax(180px, 1fr));
  }
  .class-edit-range {
    grid-template-columns: 1fr;
  }
  .schedule-roster-head {
    flex-direction: column;
  }
  .schedule-roster-summary {
    justify-content: flex-start;
  }
}

/* ===== 签到页双标签 ===== */
.attendance-tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 2px solid #e2e8f0;
}
.attendance-tab {
  padding: 14px 28px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 18px;
  color: #64748b;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
}
.attendance-tab:hover { color: #22a455; }
.attendance-tab.active {
  color: #22a455;
  border-bottom-color: #22a455;
  font-weight: 600;
}
.attendance-tab-panel { display: none; padding: 16px 20px; }
.attendance-tab-panel.active { display: block; }

/* ===== 今日签到面板 ===== */
.today-att-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.today-att-date-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.today-att-lock-tip {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #fdba74;
  background: #fff7ed;
  color: #9a3412;
  font-size: 16px;
  font-weight: 800;
}
.today-att-date-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #475569;
}
.today-att-date-label input {
  padding: 8px 12px;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-size: 16px;
}
.today-att-weekday {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}
.today-att-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #94a3b8;
  text-align: center;
}
.today-att-empty-icon {
  font-size: 48px;
  color: #cbd5e0;
  margin-bottom: 12px;
}
.today-att-empty p { margin: 4px 0; font-size: 14px; }
.today-att-empty-hint { font-size: 13px; color: #cbd5e0; }

.today-att-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.today-att-left {
  flex: 0 0 380px;
  max-width: 380px;
}
.today-att-class-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.today-att-class-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #cbd5e0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.today-att-class-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.1);
}
.today-att-class-card.active {
  border-left-color: #22a455;
  border-left-width: 4px;
  background: #f0fdf4;
  border-color: #bbf7d0;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.08);
}
.today-att-class-card.has-trial {
  border-color: #f9a8d4;
  background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 100%);
}
.today-att-class-card.has-trial.active {
  border-left-color: #ec4899;
  background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%);
  border-color: #f9a8d4;
  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.15);
}
.today-att-stat-trial {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 2px 8px;
  background: #fdf2f8;
  color: #be185d;
  border: 1px solid #fbcfe8;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}
.today-att-class-time {
  font-size: 14px;
  color: #94a3b8;
  letter-spacing: 0.2px;
}
.today-att-class-name {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
}
.today-att-class-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}
.today-att-stat-present {
  color: #16a34a;
  font-weight: 600;
}
.today-att-stat-leave { color: #ea580c; font-weight: 600; }
.today-att-stat-pending {
  color: #64748b;
  font-weight: 600;
}
.today-att-stat-total { color: #94a3b8; }

/* ===== 补签班级列表：待补签/已完成分组 ===== */
.bf-class-summary {
  font-size: 13px;
  color: #64748b;
  font-weight: 700;
  padding: 0 4px 6px;
  border-bottom: 1px dashed #e2e8f0;
  margin-bottom: 4px;
}
.bf-class-summary b { color: #1e293b; }
.today-att-class-card.is-done {
  opacity: 0.5;
  border-color: #e2e8f0;
  border-left-color: #cbd5e0;
  background: #f8fafc;
}
.today-att-class-card.is-done:hover {
  opacity: 0.75;
  background: #f1f5f9;
}
.today-att-class-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bf-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: #dc2626;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.28);
  animation: bf-badge-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             bf-badge-pulse 2.2s ease-in-out 0.5s infinite;
}
.bf-pending-num {
  display: inline-block;
  min-width: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.bf-pending-num--roll { color: #fde68a; }
.bf-done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #16a34a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  border-radius: 50%;
  line-height: 1;
}
@keyframes bf-badge-in {
  0% { transform: scale(0.3) translateY(-4px); opacity: 0; }
  60% { transform: scale(1.12) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes bf-badge-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(220, 38, 38, 0.28); }
  50% { box-shadow: 0 3px 12px rgba(220, 38, 38, 0.5); transform: scale(1.04); }
}

.today-att-right {
  flex: 1;
  min-width: 0;
}
.today-att-class-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}
.today-att-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.today-att-title-row .today-att-class-title {
  flex: 0 0 auto;
  min-width: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 22px;
}

/* ===== 一键全到按钮（标题行右侧，紧跟标题拉开距离） ===== */
.today-att-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  margin-left: 32px;
}
.today-att-title-actions .today-att-batch-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.35);
  animation: today-att-pulse 1.8s ease-in-out infinite;
}
@keyframes today-att-pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.55);
    transform: scale(1.04);
  }
}
.today-att-title-actions .today-att-batch-info.is-done {
  color: #64748b;
  background: #f1f5f9;
  box-shadow: none;
  animation: none;
}
.today-att-title-actions .today-att-batch-info-icon {
  font-size: 20px;
  line-height: 1;
}
.today-att-title-actions .today-att-batch-info strong {
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.today-att-title-actions .today-att-batch-info.is-done strong {
  color: #475569;
  text-shadow: none;
}
.today-batch-present-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid #15803d;
  /* 用 !important 锁定：.today-att-btn 后面会覆盖 background 为 #fff */
  background: #16a34a !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.2);
  transition: all 0.15s;
}
.today-batch-present-btn:hover {
  border-color: #166534;
  background: #15803d !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}
.today-batch-present-btn:disabled {
  cursor: not-allowed;
  border-color: #cbd5e1;
  background: #cbd5e1 !important;
  color: #64748b !important;
  box-shadow: none;
}
.today-batch-present-btn .batch-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 13px;
  font-weight: 700;
}
.today-att-no-students {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
  font-size: 15px;
}
.today-att-student-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.today-att-student-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.today-att-student-row:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}
.today-att-student-row .today-att-student-index {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 13px;
  color: #cbd5e0;
  font-weight: 600;
}
.today-att-student-name {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 22px;
}
.today-att-student-grade {
  font-size: 14px;
  color: #94a3b8;
  flex-shrink: 0;
}
.today-att-student-status {
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 10px;
  flex-shrink: 0;
  font-weight: 600;
  align-self: flex-start;
}
.today-att-student-status.present { background: #dcfce7; color: #16a34a; }
.today-att-student-status.leave { background: #ffedd5; color: #ea580c; }
.today-att-student-status.pending { background: #e0e7ff; color: #4f46e5; }

/* 状态卡片着色 */
.today-att-student-row[data-status="present"],
.today-att-student-row:has(.today-att-student-status.present) {
  border-left: 3.5px solid #22c55e;
  background: linear-gradient(135deg, #fafff5 0%, #fff 60%);
}
.today-att-student-row:has(.today-att-student-status.leave) {
  border-left: 3.5px solid #f97316;
  background: linear-gradient(135deg, #fff8f2 0%, #fff 60%);
}
.today-att-student-row:has(.today-att-student-status.pending) {
  border-left: 3.5px solid #818cf8;
}

/* 试听生卡片状态着色 */
.today-att-trial-card[data-status="present"],
.today-att-trial-card:has(.today-att-trial-status.present) {
  border-left: 3.5px solid #22c55e;
  background: linear-gradient(135deg, #fafff5 0%, #fff 60%);
  border-color: #86efac;
}
.today-att-trial-card[data-status="present"]::before,
.today-att-trial-card:has(.today-att-trial-status.present)::before {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
}
.today-att-trial-card[data-status="leave"],
.today-att-trial-card:has(.today-att-trial-status.leave) {
  border-left: 3.5px solid #f97316;
  background: linear-gradient(135deg, #fff8f2 0%, #fff 60%);
  border-color: #fdba74;
}
.today-att-trial-card[data-status="leave"]::before,
.today-att-trial-card:has(.today-att-trial-status.leave)::before {
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
}
.today-att-trial-card[data-status="pending"],
.today-att-trial-card:has(.today-att-trial-status.pending) {
  border-left: 3.5px solid #a5b4fc;
  background: linear-gradient(135deg, #fff 0%, #f5f7ff 60%);
  border-color: #f9a8d4;
}
.today-att-trial-card[data-status="pending"]::before,
.today-att-trial-card:has(.today-att-trial-status.pending)::before {
  background: linear-gradient(180deg, #a5b4fc 0%, #818cf8 100%);
}
.today-att-student-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.today-att-btn {
  flex: 1;
  padding: 9px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  background: #fff;
  transition: all 0.15s;
  text-align: center;
  white-space: nowrap;
}
.today-att-btn:hover { border-color: #93c5fd; }
.today-att-btn.present-btn.active { background: #16a34a; color: #fff; border-color: #16a34a; }
.today-att-btn.leave-btn.active { background: #ea580c; color: #fff; border-color: #ea580c; }
.today-att-btn.clear-btn.active { background: #f1f5f9; color: #64748b; border-color: #cbd5e0; }
.today-att-btn.trial-attended-btn { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
.today-att-btn.trial-attended-btn.active { background: #be185d; color: #fff; border-color: #be185d; }
.today-att-trial-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
  margin: 16px 0 8px;
  padding: 8px 14px;
  background: linear-gradient(90deg, #fdf2f8 0%, #fce7f3 100%);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #be185d;
  border: 1px dashed #f9a8d4;
}
.today-att-trial-divider::before,
.today-att-trial-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #fbcfe8;
}
.today-att-trial-row {
  background: transparent;
  border-left: 3px solid #e2e8f0;
}
.today-att-trial-row:hover {
  background: #f8fafc;
}
.today-att-trial-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 800;
  color: #be185d;
  background: #fbcfe8;
  border-radius: 4px;
  vertical-align: 1px;
}

/* === 试听生独立大卡片（方案 C） === */
.today-att-trial-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #fff5f9 0%, #fff 60%);
  border: 1.5px solid #f9a8d4;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(244, 114, 182, 0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.15s;
}
.today-att-trial-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #ec4899 0%, #be185d 100%);
}
.today-att-trial-card:hover {
  border-color: #ec4899;
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.15);
}
.today-att-trial-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.today-att-trial-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
  border-radius: 20px;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 4px rgba(190, 24, 93, 0.3);
}
.today-att-trial-name {
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
  min-width: 0;
}
.today-att-trial-status {
  font-size: 14px;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 700;
  flex-shrink: 0;
}
.today-att-trial-status.present { background: #dcfce7; color: #15803d; }
.today-att-trial-status.leave { background: #ffedd5; color: #c2410c; }
.today-att-trial-status.absent { background: #fee2e2; color: #b91c1c; }
.today-att-trial-status.pending { background: #fce7f3; color: #be185d; }

.today-att-trial-card[data-status="absent"],
.today-att-trial-card:has(.today-att-trial-status.absent) {
  border-left: 3.5px solid #ef4444;
  background: linear-gradient(135deg, #fff5f5 0%, #fff 60%);
  border-color: #fca5a5;
}
.today-att-trial-card[data-status="absent"]::before,
.today-att-trial-card:has(.today-att-trial-status.absent)::before {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

.today-att-btn.absent-btn.active { background: #dc2626; color: #fff; border-color: #dc2626; }
.today-att-trial-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.today-att-trial-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 18px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  border: 1px dashed #fbcfe8;
}
.today-att-trial-info-grid .info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.today-att-trial-info-grid .info-label {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.today-att-trial-info-grid .info-value {
  font-size: 15px;
  color: #1e293b;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-att-trial-note {
  font-size: 14px;
  color: #475569;
  padding: 8px 12px;
  background: #fef3c7;
  border-radius: 8px;
  border-left: 3px solid #f59e0b;
  word-break: break-word;
}
.today-att-trial-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.today-att-trial-card-actions .today-att-btn {
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
}
.today-att-btn:disabled,
.today-att-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.today-att-summary {
  display: flex;
  gap: 18px;
  padding: 14px 18px;
  margin-top: 14px;
  background: #f8fafc;
  border-radius: 12px;
  font-size: 15px;
  color: #475569;
  grid-column: 1 / -1;
}
.today-att-summary-present { color: #16a34a; font-weight: 600; }
.today-att-summary-leave { color: #ea580c; font-weight: 600; }
.today-att-summary-pending { color: #94a3b8; font-weight: 600; }

/* 签到卡片响应式 */
@media (max-width: 1100px) {
  .today-att-student-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .today-att-title-row { flex-wrap: wrap; }
  .today-att-title-actions { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 800px) {
  .today-att-layout { flex-direction: column; }
  .today-att-left { flex: none; max-width: 100%; }
  .today-att-student-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .today-att-title-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .today-att-title-actions { width: 100%; justify-content: flex-start; }
  .today-batch-present-btn { flex: 1; }
}

/* 历史补签工具栏 */
.history-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.ns-own { background: #e2e8f0; color: #4a5568; }

/* ===== 恢复补回：aw 版补签批量/修改/清除/一键全到课按钮样式（从损坏文件提取） ===== */
.today-att-student-actions.is-backfill { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.backfill-batch-bar { margin: 10px 0 4px; display: flex; justify-content: flex-start; }
.backfill-range-tip {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}
.batch-present-btn {
  flex: 0 0 auto;        /* 覆盖 .today-att-btn 的 flex:1，避免按钮被拉满整行 */
  width: auto;
  background: #16a34a;
  color: #fff;
  border: 1px solid #15803d;
  border-radius: 9px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(22, 163, 74, .18);
  transition: all 0.15s;
}
.batch-present-btn:hover { background: #15803d; border-color: #15803d; box-shadow: 0 4px 10px rgba(22, 163, 74, .25); transform: translateY(-1px); }
.today-att-btn.modify-btn { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.today-att-btn.modify-btn:hover { border-color: #6366f1; }
.today-att-btn.clear-btn { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* ===== 补签页日历样式（恢复重建：原追加层在 7/14 ao/ap/aq 版本添加，绿色版快照早于该次，故此前缺失） ===== */
.backfill-calendar-card {
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 16px;
  margin-bottom: 16px;
}
.backfill-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.bf-cal-nav {
  width: 38px; height: 38px;
  border: 1px solid var(--app-border);
  background: var(--app-bg);
  border-radius: var(--app-radius-sm);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--app-text);
  display: flex; align-items: center; justify-content: center;
}
.bf-cal-nav:hover { border-color: var(--app-primary); color: var(--app-primary); }
.bf-cal-head-center { display: flex; align-items: center; gap: 14px; }
.bf-cal-title-stack { display: grid; gap: 4px; }
.bf-cal-title { font-size: 18px; font-weight: 600; color: var(--app-text); }
.bf-cal-range-tip { color: #64748b; font-size: 12px; font-weight: 800; }
.bf-cal-months-switch { display: inline-flex; gap: 6px; }
.bf-cal-months-btn {
  border: 1px solid var(--app-border);
  background: var(--app-bg);
  color: var(--app-text);
  border-radius: var(--app-radius-sm);
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}
.bf-cal-months-btn:hover { border-color: var(--app-primary); }
.bf-cal-months-btn.active {
  background: var(--app-primary);
  color: #fff;
  border-color: var(--app-primary-d);
}
.bf-cal-months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.backfill-calendar {
  display: block;
}
.bf-cal-month { min-width: 0; }
.bf-cal-month-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--app-text);
  text-align: center;
  margin-bottom: 8px;
}
.bf-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.bf-cal-weekdays span {
  text-align: center;
  font-size: 12px;
  color: var(--app-muted);
  padding: 4px 0;
}
.bf-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.bf-cal-cell {
  height: 52px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: var(--app-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--app-text);
  cursor: pointer;
  position: relative;
}
.bf-cal-cell:hover { border-color: var(--app-primary); }
.bf-cal-cell.empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.bf-cal-cell.disabled {
  color: var(--app-muted);
  background: var(--app-bg);
  cursor: not-allowed;
}
.bf-cal-cell.disabled:hover { border-color: var(--app-border); }
.bf-cal-cell.has-missing {
  background: rgba(22, 163, 74, .12);
  border-color: var(--app-primary);
  font-weight: 600;
}
.bf-cal-cell.has-missing::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--app-primary);
}
.bf-cal-cell.disabled.has-missing {
  background: #e2e8f0;
  border-color: #cbd5e1;
}
.bf-cal-cell.disabled.has-missing::after { background: #94a3b8; }
.bf-cal-cell.selected {
  background: var(--app-primary);
  color: #fff;
  border-color: var(--app-primary-d);
}
.bf-cal-cell.selected.has-missing::after { background: #fff; }
.bf-cal-dot { display: none; }

@media (max-width: 1180px) {
  .bf-cal-months {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .bf-cal-months {
    grid-template-columns: minmax(0, 1fr);
  }
}

.backfill-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 6px;
  background: var(--app-primary);
  color: #fff;
  vertical-align: middle;
}
.backfill-reason-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.backfill-reason-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

/* ============================================================
   收费系统统一布局优化 (?v=20260719223000)
   字号加大 + 间距拉开 + 标题框美化，一次到位
   ============================================================ */

/* ---- 顶部赠课 / 转介绍面板 ---- */
.billing-controls {
  gap: 16px;
  padding: 18px 22px;
}
.billing-reward-panel {
  padding: 16px 18px;
}
.billing-reward-head {
  gap: 12px;
  margin-bottom: 12px;
  font-size: 17px;
}
.billing-reward-head strong {
  font-size: 17px;
}
/* 覆盖 6537 行的 .billing-reward-head span 18px，提示文字降级到辅助档 */
.billing-reward-head span {
  font-size: 14px;
  color: #52637a;
}
.billing-collapsible-toggle {
  width: 32px;
  height: 32px;
  font-size: 15px;
}
.billing-reward-body {
  margin-top: 12px;
}
.billing-reward-bar {
  gap: 18px;
}
.billing-reward-field {
  font-size: 15px;
  gap: 7px;
}
.billing-reward-value-field span {
  font-size: 14px;
}
.billing-reward-submit {
  min-height: 44px;
  padding: 10px 22px;
  font-size: 17px;
}
.billing-reward-type-button {
  min-height: 44px;
  font-size: 17px;
}
.billing-reward-person-title {
  font-size: 16px;
}

/* ---- 工具栏 ---- */
.billing-toolbar {
  padding: 16px 18px;
  gap: 14px;
}
.billing-search-label,
.billing-cutoff-label {
  gap: 12px;
  font-size: 17px;
}
.billing-search-label input,
.billing-cutoff-label input {
  min-height: 42px;
  padding: 8px 14px;
  font-size: 17px;
}
.billing-search-button,
.billing-search-clear {
  min-height: 44px;
  padding: 8px 16px;
  font-size: 17px;
}
.billing-student-page-button {
  min-height: 42px;
  padding: 8px 16px;
  font-size: 17px;
}
.billing-student-page-text {
  font-size: 14px;
}

/* ---- 学生卡片整体 ---- */
.billing-card-list {
  gap: 20px;
}
.billing-student-card {
  padding: 18px;
  gap: 16px;
}

/* ---- 卡片顶部：序号 / 姓名 / 操作按钮 ---- */
.billing-student-index {
  width: 40px;
  height: 40px;
  font-size: 18px;
}
.billing-student-name {
  font-size: 24px;
  min-height: 40px;
  padding: 4px 18px 6px;
}
.billing-student-teacher {
  font-size: 14px;
}
.billing-student-actions .billing-copy-sheet-button,
.billing-student-actions .billing-copy-receipt-button,
.billing-student-actions .billing-parent-sheet-button {
  min-height: 50px;
  padding: 0 20px;
  font-size: 17px;
}

/* ---- 收费板块撑满 sheet（跟随视口自适应，1920 视口=1651px，更大视口自动加宽）---- */
#billing-board-wrap {
  max-width: none;
  margin: 0;
}

/* 赠课/转介绍切换控件加大 */
.billing-reward-type-button {
  min-height: 46px;
  font-size: 19px;
  font-weight: 900;
}

/* ---- 页面标题头：修复 .page-section-head 样式缺失（HTML 用此 class，CSS 原来定义的 .billing-page-head 不匹配）---- */
.page-section-head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 20px 56px;
  border-bottom: 1px solid var(--app-border);
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  flex: 0 0 auto;
}
.page-section-head h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  color: var(--app-text);
  letter-spacing: 2px;
}
.page-section-head p {
  margin: 0;
  font-size: 16px;
  color: #475569;
  font-weight: 700;
}

/* ---- 收费板块：标题固定，赠课面板+工具栏合并为一个 sticky 组固定顶端 ---- */
#billing-page.page-panel.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
#billing-board-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---- 学生清单页面：标题+工具栏固定，学生表格可滚动 ---- */
#students-page.page-panel.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
#students-page.page-panel.active > .students-page-head,
#students-page.page-panel.active > .students-toolbar {
  flex: 0 0 auto;
}
#student-directory-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 56px;
}
/* thead 滚动时固定在表格顶部 */
.student-directory-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f8fafc;
}

/* ---- 录入新生卡片紧凑化 + 网格布局 ---- */
.student-directory-form {
  padding: 14px !important;
  gap: 10px !important;
}
.student-directory-form .form-card-title {
  font-size: 16px !important;
  margin-bottom: 4px !important;
}
/* 字段网格：3列布局，让字段并排显示，节省垂直空间 */
.student-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
/* 姓名占满一行（2列宽） */
.student-directory-grid #directory-student-name {
  grid-column: span 2;
}
/* 日期 + 备注 + 按钮占满整行 */
.student-directory-grid #directory-student-enrolled-at,
.student-directory-grid #directory-student-note {
  grid-column: span 1;
}
.student-directory-grid .student-directory-add {
  grid-column: 1 / -1;
  margin-top: 4px;
}
.student-directory-form input,
.student-directory-form select {
  padding: 7px 10px !important;
  font-size: 14px !important;
  min-height: 38px !important;
}
.student-directory-form .student-directory-add {
  min-height: 40px !important;
  font-size: 15px !important;
  margin-top: 2px !important;
}
#billing-board-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* 赠课面板 sticky 在 board-wrap 顶部 */
#billing-board-wrap > .billing-controls {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #f0fdf4;
  margin-left: -22px;
  margin-right: -22px;
  padding-left: 22px;
  padding-right: 22px;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.04);
}
/* 工具栏 sticky 紧跟赠课面板下方（top = 赠课面板高度，由 JS 动态设置） */
#billing-board-wrap > .billing-toolbar {
  position: sticky;
  top: var(--reward-h, 0px);
  z-index: 19;
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  margin-left: -22px;
  margin-right: -22px;
  padding-left: 22px;
  padding-right: 22px;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.04);
}
.billing-reward-bar .billing-input,
.billing-reward-bar .billing-select,
.billing-reward-value-field .billing-input {
  min-height: 46px;
  border-radius: var(--app-radius-sm);
  font-size: 19px;
  line-height: 1.2;
  font-weight: 800;
  padding: 8px 14px;
}
.billing-reward-bar .billing-select {
  min-width: 220px;
  font-size: 19px;
}

/* 名字回左侧标题位置+加大字号，操作按钮紧跟名字，剩余空间靠右留白 */
.billing-student-head {
  justify-content: flex-start;
  gap: 16px;
  align-items: center;
}
.billing-student-actions {
  margin-left: 0;
  margin-right: auto;
  order: 0;
}
.billing-student-name {
  font-size: 28px;
  font-weight: 900;
  min-height: 44px;
  padding: 4px 20px 6px;
  letter-spacing: 1px;
}

/* ---- 中部主体：录入带跨满 + 预览/状态带并排（消除右下空白） ---- */
.billing-student-top.billing-entry-layout {
  gap: 20px;
  grid-template-columns: minmax(300px, 0.38fr) minmax(0, 1fr);
}
.billing-entry-layout .billing-entry-bar {
  grid-column: 1 / -1;
  padding: 14px 18px;
  gap: 22px;
  align-items: end;
  justify-content: flex-start;
}
.billing-entry-layout .billing-entry-charge {
  margin-left: 14px;
  margin-right: 0;
}
.billing-entry-layout .billing-status-bar {
  padding: 14px 20px;
  gap: 16px;
}

/* ---- 录入带字段 ---- */
.billing-entry-bar .billing-card-field > span {
  font-size: 15px;
}
.billing-entry-bar .billing-card-value {
  height: 42px;
  padding: 8px 14px;
  font-size: 18px;
}
.billing-entry-bar .tuition-input,
.billing-entry-bar .charge-count-input,
.billing-entry-bar .discount-select {
  height: 42px;
  min-height: 42px;
  font-size: 18px;
}
.billing-discount-picker {
  height: 42px;
}
.billing-discount-arrow {
  width: 42px;
  height: 42px;
}
.billing-discount-arrow::before {
  top: 15px;
}
.billing-discount-option {
  min-height: 38px;
  font-size: 17px;
}
/* 应收金额：与余额数值统一为 L2 档（19px），不再单独 20px */
.billing-entry-bar .billing-receivable-field > span {
  font-size: 15px;
}
.billing-entry-bar .billing-receivable-field .billing-card-value {
  min-width: 120px;
  height: 42px;
  font-size: 19px;
  font-weight: 900;
}
.billing-entry-charge .billing-charge-button {
  min-height: 42px;
  padding: 0 22px;
  font-size: 17px;
}

/* ---- 确认前预览 ---- */
.billing-charge-preview {
  padding: 12px 14px;
  font-size: 14px;
}

/* ---- 状态带：账户余额标签 + 余额行 ---- */
.billing-status-label {
  min-height: 30px;
  padding: 3px 14px;
  font-size: 15px;
}
.billing-balance-row {
  gap: 16px;
}
.billing-balance-row .billing-card-field {
  min-width: 260px;
  padding: 12px 18px;
  gap: 16px;
}
.billing-balance-row .billing-card-field > span {
  font-size: 15px;
}
.billing-balance-row .billing-card-field .billing-card-value {
  font-size: 20px;
}

/* 赠课面板"登记赠送"按钮靠右 */
.billing-reward-action {
  margin-left: auto;
}

/* ---- 通用字段名 / 数值 ---- */
.billing-card-field span {
  font-size: 14px;
}
.billing-card-value {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 15px;
}

/* ---- 未收费 / 历史收费区块标题 ---- */
.billing-card-block {
  gap: 12px;
}
.billing-card-block-head {
  gap: 14px;
}
.billing-card-block-title {
  font-size: 17px;
  font-weight: 800;
}

/* ---- 未收费面板 ---- */
.billing-unpaid-board {
  gap: 14px;
  padding: 16px;
}
.billing-unpaid-count {
  font-size: 18px;
}
.billing-unpaid-headline {
  gap: 14px;
}
.billing-unpaid-legend {
  gap: 14px;
  font-size: 14px;
}

/* ---- 历史收费折叠标题 ---- */
.billing-collapsible-title {
  font-size: 17px;
}
.billing-collapse-caret {
  font-size: 15px;
}
.billing-lock-button {
  min-height: 40px;
  font-size: 15px;
}

/* ---- 操作日志弹窗 ---- */
.audit-log-link {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 6px 8px;
  border-radius: 8px;
}
.audit-log-link:hover {
  background: #eef2f7;
}
.audit-modal {
  max-width: 880px;
  width: 92%;
}
.audit-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
}
.audit-modal-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}
.audit-modal-body {
  max-height: 64vh;
  overflow: auto;
  padding: 0;
}
.audit-loading,
.audit-empty {
  padding: 24px;
  color: #64748b;
  font-size: 14px;
  text-align: center;
}
.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.audit-table th,
.audit-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: top;
}
.audit-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 800;
  position: sticky;
  top: 0;
}
.audit-table tbody tr:hover {
  background: #f8fafc;
}
.audit-table td:first-child {
  white-space: nowrap;
  color: #64748b;
}

/* ==================== 7/23 退费操作页 UI（从损坏备份恢复） ==================== */

/* ==================== 退费操作页 UI ==================== */

/* 页面整体：标题固定，内容区可滚动 */
#refund-page.page-panel.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

#refund-page.page-panel.active > .page-section-head {
  flex: 0 0 auto;
}

#refund-board-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  display: block;
}

/* 两栏布局：左侧卡片列表（约 65%），右侧明细表格（约 35%） */
.refund-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 35%;
  gap: 24px;
  padding: 16px 22px 32px;
  align-items: start;
}

.refund-layout-empty {
  grid-template-columns: minmax(0, 1fr) 35%;
}

/* 工具栏 */
.refund-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.refund-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 280px;
}

.refund-toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 搜索区 */
.refund-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.refund-search-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 4px 4px 12px;
}

.refund-search-label > span {
  white-space: nowrap;
}

.refund-search-label input {
  width: 340px;
  height: 36px;
  padding: 0 10px;
  font-size: 16px;
  color: #0f172a;
  border: 1px solid #d6e4f0;
  border-radius: 6px;
  background: #ffffff;
  box-sizing: border-box;
}

.refund-search-label input:focus {
  outline: none;
  border-color: #1677ff;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
}

.refund-search button {
  height: 36px;
  padding: 0 16px;
  border: 1px solid #d6e4f0;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.refund-search button:hover {
  background: #f0f9ff;
  border-color: #d6e4f0;
}

.refund-search-button {
  background: #f0f9ff;
  color: #0369a1;
  border-color: #d6e4f0;
}

.refund-search-button:hover {
  background: #e0f2fe;
}

/* KPI */
.refund-kpi {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.refund-kpi-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.refund-kpi-label {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.refund-kpi-value {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.refund-kpi-amount {
  font-size: 18px;
  font-weight: 800;
  color: #0369a1;
}

/* 分页 */
.refund-student-pages {
  display: flex;
  align-items: center;
  gap: 10px;
}

.refund-student-page-button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #d6e4f0;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.refund-student-page-button:hover:not(:disabled) {
  background: #f0f9ff;
}

.refund-student-page-button:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

.refund-student-page-text {
  font-size: 14px;
  color: #64748b;
  white-space: nowrap;
}

/* 主区域 */
.refund-layout-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.refund-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 退费卡片 */
.refund-student-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.refund-student-card:hover {
  border-color: #d6e4f0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* 卡片头部 */
.refund-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: #f0f9ff;
  border: 1px solid #d6e4f0;
  border-radius: 10px;
  flex-wrap: wrap;
}

.refund-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.refund-student-index {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #0369a1;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex: 0 0 auto;
}

.refund-student-name {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
}

.refund-student-teacher {
  padding: 3px 10px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
  font-weight: 600;
}

.refund-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.refund-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.refund-meta-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.refund-meta-value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.refund-meta-remaining .refund-meta-value {
  color: #16a34a;
}

.refund-meta-refunded .refund-meta-value {
  color: #0369a1;
}

/* 退费录入区 */
.refund-card-entry {
  display: grid;
  grid-template-columns: 160px 160px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.refund-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.refund-field > span {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.2;
}

.refund-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 16px;
  color: #0f172a;
  border: 1px solid #d6e4f0;
  border-radius: 8px;
  background: #ffffff;
  box-sizing: border-box;
}

.refund-input:focus {
  outline: none;
  border-color: #1677ff;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
}

.refund-input::placeholder {
  color: #94a3b8;
}

.refund-submit-button {
  height: 40px;
  min-height: 40px;
  padding: 0 22px;
  border: none;
  border-radius: 8px;
  background: #1677ff;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  align-self: flex-start;
}

.refund-submit-button:hover {
  background: #4096ff;
}

/* 退费预览文本 */
.refund-preview-text {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px dashed #d6e4f0;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

/* 退费历史折叠按钮 */
.refund-history-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.refund-history-toggle:hover {
  background: #f0f9ff;
  border-color: #d6e4f0;
  color: #0369a1;
}

.billing-collapse-caret {
  font-size: 12px;
}

/* 退费历史折叠内容 */
.refund-history-body.is-collapsed {
  display: none;
}

.refund-history-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.refund-history-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.refund-history-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.refund-history-block-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.refund-lock-button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #d6e4f0;
  border-radius: 6px;
  background: #ffffff;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.refund-lock-button.unlock {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fecaca;
}

.refund-lock-button:hover {
  background: #f0f9ff;
}

/* 历史列表 */
.refund-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.refund-history-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.refund-history-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.refund-history-date {
  font-size: 14px;
  color: #475569;
  font-variant-numeric: tabular-nums;
}

.refund-history-amount {
  font-size: 16px;
  font-weight: 700;
  color: #0369a1;
  flex: 1 1 auto;
}

.refund-history-delete {
  height: 30px;
  padding: 0 12px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fee2e2;
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.refund-history-delete:hover:not(:disabled) {
  background: #fecaca;
}

.refund-history-delete.locked {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
  cursor: not-allowed;
}

.refund-history-note {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

.refund-history-empty {
  padding: 14px;
  text-align: center;
  font-size: 14px;
  color: #94a3b8;
  background: #ffffff;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
}

/* 右侧明细面板 */
.refund-layout-side {
  position: sticky;
  top: 16px;
  align-self: start;
}

.refund-detail-board {
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.refund-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.refund-detail-board .billing-card-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.refund-detail-title,
.refund-detail-board .billing-card-block-title {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.refund-detail-tip,
.refund-detail-board .refund-history-tip,
.refund-detail-board .billing-card-block-head .refund-history-tip {
  font-size: 12px;
  color: #94a3b8;
}

.refund-detail-empty,
.refund-detail-board .billing-history-empty {
  padding: 14px;
  text-align: center;
  font-size: 14px;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
}

.refund-detail-table-wrap {
  overflow: auto;
  max-height: calc(100vh - 220px);
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.refund-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.refund-detail-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.refund-detail-table th,
.refund-detail-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: middle;
}

.refund-detail-table th {
  background: #f0f9ff;
  color: #0369a1;
  font-size: 14px;
  font-weight: 700;
}

.refund-detail-table td {
  color: #334155;
}

.refund-detail-table tbody tr:last-child td {
  border-bottom: none;
}

.refund-detail-table tbody tr:hover {
  background: #f8fafc;
}

.refund-detail-amount {
  font-size: 16px;
  font-weight: 700;
  color: #0369a1;
  white-space: nowrap;
}

.refund-detail-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #475569;
}

/* 响应式：<1200px 右侧表格移到下方 */
@media (max-width: 1200px) {
  .refund-layout,
  .refund-layout-empty {
    grid-template-columns: 1fr;
  }

  .refund-layout-side {
    position: static;
    align-self: auto;
  }

  .refund-detail-table-wrap {
    max-height: 360px;
  }
}

/* 响应式：<768px 操作区垂直堆叠 */
@media (max-width: 768px) {
  .refund-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .refund-toolbar-left,
  .refund-toolbar-right {
    width: 100%;
    justify-content: flex-start;
  }

  .refund-search {
    width: 100%;
  }

  .refund-search-label {
    flex: 1;
  }

  .refund-search-label input {
    width: 100%;
  }

  .refund-card-entry {
    grid-template-columns: 1fr;
  }

  .refund-submit-button {
    width: 100%;
  }

  .refund-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .refund-card-meta {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ==================== 退费页面 UI 改造覆盖（第二阶段） ==================== */

/* 1. 清爽白底：去掉彩色斑马纹，统一白底 */
.refund-student-card,
.refund-student-card:nth-child(4n+1),
.refund-student-card:nth-child(4n+2),
.refund-student-card:nth-child(4n+3),
.refund-student-card:nth-child(4n+4) {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

.refund-student-card:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* 卡片头部也改为清爽白底 */
.refund-card-header {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

/* 2. 对齐输入框：退费日期、退费金额、备注、登记退费按钮在同一行网格布局 */
.refund-card-entry.refund-entry-grid {
  grid-template-columns: 0.9fr 0.9fr 2fr auto;
  gap: 14px;
  align-items: end;
}

@media (max-width: 1280px) {
  .refund-card-entry.refund-entry-grid {
    grid-template-columns: 1fr 1fr;
  }

  .refund-card-entry.refund-entry-grid .refund-note-field,
  .refund-card-entry.refund-entry-grid .refund-submit-button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .refund-card-entry.refund-entry-grid {
    grid-template-columns: 1fr;
  }

  .refund-card-entry.refund-entry-grid .refund-note-field,
  .refund-card-entry.refund-entry-grid .refund-submit-button {
    grid-column: auto;
  }
}

/* 3. 统一字体 */
.refund-field > span,
.refund-entry-grid .refund-field > span,
.refund-entry-grid .billing-card-field > span {
  font-size: 15px;
  font-weight: 600;
  color: #475569;
}

.refund-input,
.refund-entry-grid .refund-input,
.refund-entry-grid .billing-input {
  font-size: 16px;
}

.refund-student-name {
  font-size: 20px;
}

/* 4. 右侧明细表格：只调字体和间距 */
.refund-detail-board {
  gap: 14px;
}

.refund-detail-board .billing-card-block-title,
.refund-detail-title {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.refund-detail-board .refund-history-tip,
.refund-detail-tip {
  font-size: 13px;
  color: #94a3b8;
}

.refund-detail-table th,
.refund-detail-table td {
  padding: 10px 12px;
  font-size: 14px;
}

.refund-detail-table th {
  background: #f0f9ff;
  color: #0369a1;
  font-size: 14px;
  font-weight: 700;
}

/* 5. 历史默认折叠保持已实现 */
.refund-history-body.is-collapsed {
  display: none;
}

/* 工具栏 sticky 背景也改清爽 */
#refund-board-wrap > .refund-toolbar {
  background: #ffffff;
  border-color: #e2e8f0;
}

.refund-search-label {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #475569;
}


/* ==================== 7/23 收费页应收金额蓝框 #1677ff（从损坏备份无法恢复，按需求补回） ==================== */

.billing-summary-item .billing-summary-amount {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid #1677ff;
  border-left: 5px solid #1677ff;
  border-radius: 8px;
  background: #f0f7ff;
  color: #0958d9;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.billing-summary-item .billing-summary-label + .billing-summary-amount {
  margin-top: 4px;
}


/* ==================== 签到页试听按钮 grid 布局恢复（7/23 改动） ==================== */

.today-att-trial-card-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.today-att-trial-card-actions .today-att-btn {
  flex: none;
  min-width: 0;
}


/* ==================== QA 修复：退费登记按钮底部对齐 ==================== */

.refund-card-entry.refund-entry-grid .refund-submit-button {
  align-self: end;
}

/* ==================== Phase 03：退费状态标签与收费冲正样式 ==================== */

/* 退费状态标签 */
.refund-status-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.refund-status-pending {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.refund-status-approved {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.refund-status-rejected {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* 退费审批/拒绝操作按钮 */
.refund-action-button {
  height: 28px;
  padding: 0 12px;
  border: 1px solid;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.refund-approve-button {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}

.refund-approve-button:hover {
  background: #dcfce7;
  border-color: #4ade80;
}

.refund-reject-button {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.refund-reject-button:hover {
  background: #fee2e2;
  border-color: #f87171;
}

/* 收费冲正记录 */
.charge-correction-block {
  padding: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.charge-correction-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.charge-correction-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  border-left: 4px solid #f59e0b;
}

.charge-correction-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.charge-correction-date {
  font-size: 14px;
  color: #475569;
  font-variant-numeric: tabular-nums;
}

.charge-correction-amount {
  font-size: 16px;
  font-weight: 700;
  color: #d97706;
  flex: 1 1 auto;
}

.charge-correction-operator {
  font-size: 13px;
  color: #64748b;
}

.charge-correction-note {
  font-size: 13px;
  color: #94a3b8;
  word-break: break-all;
}

/* 收费冲正弹窗 */
.charge-correction-modal {
  max-width: 520px;
}

.charge-correction-select-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
  margin: 16px 0;
}

.charge-correction-select-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.charge-correction-select-item:hover {
  border-color: #1677ff;
  background: #f0f7ff;
}

.charge-correction-select-item input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #1677ff;
  flex-shrink: 0;
}

.charge-correction-select-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: #475569;
}

.charge-correction-select-meta strong {
  font-size: 15px;
  color: #0f172a;
}

/* 响应式：移动端操作按钮纵向排列 */
@media (max-width: 768px) {
  .charge-correction-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .charge-correction-select-item {
    align-items: flex-start;
  }
}

/* ==================== Toast 弹窗（自动消失/手动关闭，居中浮层，不阻塞用户操作） ==================== */
.app-toast {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  min-width: 280px;
  max-width: 480px;
  padding: 18px 28px;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  animation: app-toast-in 0.22s ease-out;
}
.app-toast-success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.app-toast-error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.app-toast-leave {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.25s ease-in, transform 0.25s ease-in;
}
@keyframes app-toast-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ===== 收费系统美化（2026-07-26，仅视觉，功能不变） ===== */
:root {
  --bc-primary: #185FA5;
  --bc-primary-soft: #E6F1FB;
  --bc-primary-edge: #B5D4F4;
  --bc-amber: #BA7517;
  --bc-amber-soft: #FAC775;
  --bc-green: #3B6D11;
  --bc-green-soft: #EAF3DE;
  --bc-line: #e2e8f0;
  --bc-page: #F1F5F9;
  --bc-muted: #64748b;
  --bc-text: #0f172a;
}

/* 字号阶梯收敛为 7 档：28 页标题 / 24 姓名 / 18 区块·应收 / 16 字段·数值 / 15 常规 / 14 次要 / 13 极次要 */
.billing-card-block-title { font-size: 18px; }
.billing-student-name { font-size: 24px; }
.billing-balance-row .billing-card-field .billing-card-value { font-size: 18px; }
.billing-unpaid-count { font-size: 18px; }
.billing-card-field span { font-size: 15px; }
.billing-card-value { font-size: 16px; }
.billing-input,
.billing-select { font-size: 16px; min-height: 44px; }
.billing-history-date,
.billing-history-meta,
.billing-history-amount,
.billing-history-note { font-size: 14px; }
.billing-unpaid-calendar-more,
.billing-unpaid-empty { font-size: 14px; }

/* 卡片外框：更舒展留白 + 柔和阴影 + hover 反馈（不改布局） */
.billing-student-card {
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.06);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.billing-student-card:hover {
  box-shadow: 0 6px 18px rgba(15,23,42,.12);
  border-color: var(--bc-primary-edge);
}

/* 姓名行：修复蓝绿撞色，统一蓝系；逻辑三段分组（身份 | 金额 | 操作） */
.billing-student-name {
  background: var(--bc-primary-soft);
  box-shadow: none;
  color: #0C447C;
}
.billing-student-card:nth-child(n) .billing-student-index {
  background: var(--bc-primary-soft) !important;
  color: var(--bc-primary) !important;
  border: 1px solid var(--bc-primary-edge) !important;
}
.billing-student-title { gap: 10px; }
.billing-title-amount { margin-left: 0; }
.billing-title-actions {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

/* 按钮三档体系 + hover/active（不改功能） */
.billing-title-actions .billing-action-btn {
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.billing-title-actions .billing-action-btn:hover {
  border-color: var(--bc-primary);
  color: var(--bc-primary);
}
.billing-title-actions .billing-charge-button-primary {
  background: var(--bc-primary);
  border-color: var(--bc-primary);
  color: #fff;
  transition: background .15s ease;
}
.billing-title-actions .billing-charge-button-primary:hover {
  background: #0C447C;
  border-color: #0C447C;
}
.billing-expand-toggle {
  color: var(--bc-primary);
  border: 1px solid transparent;
  background: transparent;
  font-weight: 700;
  font-size: 17px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  flex: 0 0 118px;
  justify-content: center;
}
.billing-expand-toggle:hover { text-decoration: underline; }

/* 折叠区：子卡片化 + 标题左色条 */
.billing-collapse-body {
  background: var(--bc-page);
  padding: 20px 22px;
}
.billing-collapse-body .billing-card-block {
  background: #fff;
  border: 1px solid var(--bc-line);
  border-left: 3px solid var(--bc-primary);
  border-radius: 12px;
  padding: 14px 16px;
}
.billing-collapse-body .billing-reward-block {
  border-left-color: var(--bc-green);
}
.billing-collapse-body .billing-card-block-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--bc-text);
}

/* 历史收费行：状态点 + 方式 pill + 右对齐金额 */
.billing-history-card {
  position: relative;
  padding: 10px 12px 10px 18px;
  border-radius: 10px;
}
.billing-history-card::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #639922;
}
.billing-history-amount { font-size: 15px; font-weight: 700; }
.billing-method-tag {
  border-radius: 999px;
  padding: 2px 10px;
  background: var(--bc-primary-soft);
  color: var(--bc-primary);
  border: 1px solid var(--bc-primary-edge);
  font-size: 12px;
}

/* 顶部工具栏：输入框/筛选统一高度与圆角 + 聚焦蓝环 */
.billing-toolbar select,
.billing-toolbar input {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--bc-line);
}
.billing-toolbar select:focus,
.billing-toolbar input:focus {
  outline: none;
  border-color: var(--bc-primary);
  box-shadow: 0 0 0 3px rgba(24,95,165,.15);
}

/* ===== 收费页顶部汇总指标卡（2026-07-26） ===== */
.billing-overview-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 18px 28px 20px;
}
.billing-overview-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px;
  border-radius: 12px;
  border-left: 4px solid transparent;
}
.billing-overview-item:nth-child(1) {
  background: #E6F1FB;
  border-left-color: #185FA5;
}
.billing-overview-item:nth-child(2) {
  background: #FAEEDA;
  border-left-color: #BA7517;
}
.billing-overview-item:nth-child(3) {
  background: #F1F5F9;
  border-left-color: #94a3b8;
}
.billing-overview-label {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  margin: 0;
}
.billing-overview-value {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin: 0;
  line-height: 1.1;
}
.billing-overview-item:nth-child(1) .billing-overview-value { color: #185FA5; }
.billing-overview-item:nth-child(2) .billing-overview-value { color: #BA7517; }
.billing-overview-item:nth-child(3) .billing-overview-value { color: #334155; font-size: 20px; font-weight: 800; }
.billing-overview-amount { }

/* ============================================================
   录入赠课 / 转介绍：触发按钮 + 右侧抽屉
   （原结构已存在但缺样式：按钮是浏览器默认小按钮、抽屉无右侧滑入）
   ============================================================ */

/* ---- 触发按钮（工具栏内，与搜索/翻页按钮协调，但用青色区分"奖励"动作） ---- */
.billing-fab-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 18px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: #ffffff;
  background: linear-gradient(135deg, #0e7490, #0891b2);
  border: 1px solid #0e7490;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.22);
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.billing-fab-inline:hover {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  box-shadow: 0 4px 14px rgba(8, 145, 178, 0.32);
}
.billing-fab-inline:active {
  transform: translateY(1px);
}

/* ---- 遮罩 ---- */
.billing-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 1100;
}
.billing-drawer-backdrop.is-open {
  opacity: 1;
}

/* ---- 右侧抽屉外壳 ---- */
.billing-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 444px;
  max-width: 92vw;
  background: #ffffff;
  box-shadow: -12px 0 36px rgba(15, 23, 42, 0.18);
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1101;
  display: flex;
  flex-direction: column;
}
.billing-drawer.is-open {
  transform: translateX(0);
}
/* hidden 属性必须压过上面的 display:flex，否则关闭后仍有残留 */
.billing-drawer[hidden],
.billing-drawer-backdrop[hidden] {
  display: none !important;
}

/* ---- 抽屉头部 ---- */
.billing-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #e6edf5;
  background: #f0f9ff;
  flex: 0 0 auto;
}
.billing-drawer-head strong {
  font-size: 19px;
  font-weight: 800;
  color: #0e7490;
  letter-spacing: 0.5px;
}
.billing-drawer-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #475569;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.billing-drawer-close:hover {
  background: #e2e8f0;
}

/* ---- 抽屉主体 ---- */
.billing-drawer-body {
  flex: 1 1 auto;
  padding: 20px 22px;
  overflow-y: auto;
}
.billing-drawer-placeholder {
  margin: 0;
  color: #64748b;
  font-size: 15px;
}
.billing-drawer-tip {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

/* ---- 表单布局 ---- */
.billing-drawer-bar {
  display: grid;
  gap: 16px;
}
.billing-drawer-field {
  display: grid;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  color: #334155;
}
.billing-drawer-field > label {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}
/* 修复：原 .is-hidden 只对 .billing-reward-* 生效，导致赠课模式下转介绍字段漏显 */
.billing-drawer-target-group.is-hidden {
  display: none;
}
/* 赠送类型切换按钮容器（原无样式，按钮会错位堆叠） */
.billing-reward-type-toggle {
  display: inline-flex;
  gap: 8px;
}