:root {
  --ink: #24313a;
  --muted: #687984;
  --line: #dce5e7;
  --paper: #f7faf9;
  --white: #ffffff;
  --teal: #167d7f;
  --teal-dark: #0d5f62;
  --coral: #d95d4f;
  --gold: #b98221;
  --leaf: #5e8d47;
  --shadow: 0 18px 45px rgba(34, 49, 58, .12);
}

* { box-sizing: border-box; }

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px 1fr;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body.auth-locked {
  overflow: hidden;
}

button, input, select { font: inherit; }

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(247, 250, 249, .94);
}

.login-card {
  width: min(440px, 100%);
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-brand strong,
.login-brand span {
  display: block;
}

.login-brand span,
.login-card p,
.login-demo-list,
.login-message {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.login-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.login-card input {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
}

.login-message.error {
  color: var(--coral);
}

.login-demo-list {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 8px;
  background: #f7faf9;
}

.login-demo-list strong {
  color: var(--ink);
}

.sidebar {
  min-height: 100vh;
  padding: 24px 18px;
  background: #15333a;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f1c15c;
  color: #15333a;
  font-size: 26px;
  font-weight: 800;
}

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
  background: #fff;
  flex: 0 0 auto;
}

.brand strong, .brand span { display: block; }
.brand strong { font-size: 18px; }
.brand span { color: #b9ced0; font-size: 12px; margin-top: 3px; }

.nav {
  display: grid;
  gap: 8px;
}

.nav-item {
  border: 0;
  color: #d5e4e5;
  background: transparent;
  min-height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  cursor: pointer;
  text-align: left;
}

.nav-item span { width: 22px; text-align: center; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.12); color: #fff; }

.side-note {
  margin-top: auto;
  padding: 16px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
}

.side-note span, .side-note strong { display: block; }
.side-note span { color: #b9ced0; font-size: 12px; }
.side-note strong { margin-top: 6px; }

.shell {
  min-width: 0;
  padding: 26px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 28px; letter-spacing: 0; }
h2 { margin-bottom: 0; font-size: 18px; }

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

.prototype-sync-status {
  min-height: 42px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(35, 139, 126, 0.22);
  border-radius: 8px;
  padding: 0 12px;
  background: #eefaf6;
  color: #236f63;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.prototype-sync-status.warning {
  border-color: rgba(187, 122, 23, 0.35);
  background: #fff7e6;
  color: #8a5a0b;
}

.prototype-sync-status.pending {
  border-color: rgba(90, 109, 122, 0.24);
  background: #f4f7f8;
  color: var(--muted);
}

.role-switcher {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--white);
  color: var(--muted);
  font-size: 13px;
  flex: 0 0 auto;
}

.role-switcher select {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.role-switcher select:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
}

.account-switcher select {
  min-width: 160px;
}

.role-display {
  background: #f6f8f7;
}

.search {
  width: min(360px, 34vw);
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--white);
  flex: 1 1 260px;
}

.search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

button {
  border: 1px solid transparent;
  border-radius: 8px;
  min-height: 38px;
  padding: 0 14px;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.primary { background: var(--teal); color: #fff; }
.primary:hover { background: var(--teal-dark); }
.secondary { background: #edf4f3; color: var(--teal-dark); border-color: #cfe0df; }
.ghost { background: transparent; color: var(--teal); padding-inline: 8px; }
.warning { background: #fff3df; color: #8a570d; border-color: #f0cf95; }
.icon-btn { width: 36px; padding: 0; background: #edf4f3; color: var(--ink); }

.view { display: none; }
.view.active { display: block; }

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

.metrics article, .panel, .student-card, .teacher-card, .package-card, .lesson-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(36, 49, 58, .03);
}

.metrics article {
  padding: 18px;
  min-height: 126px;
}

.metrics span, .metrics small {
  display: block;
  color: var(--muted);
}

.metrics strong {
  display: block;
  margin: 10px 0 8px;
  font-size: 34px;
}

.analytics-panel {
  margin-bottom: 16px;
}

.analytics-toggle {
  flex: 0 0 auto;
}

.analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 16px 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.analytics-summary div {
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid var(--line);
}

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

.analytics-summary span,
.analytics-detail span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.analytics-summary strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

.analytics-chart {
  min-height: 280px;
  overflow-x: auto;
  padding: 4px 0;
}

.analytics-chart svg {
  width: 100%;
  min-width: 640px;
  height: auto;
  display: block;
}

.chart-grid {
  stroke: #dce5e7;
  stroke-width: 1;
}

.chart-axis-line {
  stroke: #b8c8ca;
  stroke-width: 1;
}

.chart-axis,
.chart-label,
.chart-legend,
.chart-value {
  fill: var(--muted);
  font-size: 12px;
}

.chart-value {
  fill: var(--ink);
  font-size: 10px;
  font-weight: 700;
}

.analytics-detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.analytics-detail strong {
  color: var(--coral);
  font-size: 13px;
}

.hq-panel {
  margin-top: 16px;
}

.care-panel {
  margin-bottom: 16px;
}

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

.operating-focus-section {
  min-width: 0;
}

.management-review-panel {
  margin: 16px 0;
}

.management-review-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.management-review-summary div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.management-review-summary span,
.management-review-summary small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.management-review-summary strong {
  display: block;
  margin: 5px 0;
  font-size: 22px;
}

.management-review-advice {
  display: grid;
  gap: 8px;
}

.management-review-advice article {
  padding: 10px 12px;
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: #f4f8f7;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

.care-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.care-summary div {
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  background: #f4f8f7;
}

.care-summary span,
.care-summary strong {
  display: block;
}

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

.care-summary strong {
  margin-top: 4px;
  font-size: 24px;
}

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

.care-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--leaf);
  border-radius: 8px;
  background: #fbfdfc;
}

.care-item.yellow {
  border-left-color: var(--gold);
  background: #fffaf0;
}

.care-item.red {
  border-left-color: var(--coral);
  background: #fff4f1;
}

.care-main {
  min-width: 0;
}

.care-main strong,
.care-main span,
.care-main p {
  display: block;
}

.care-main span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.care-main p {
  margin-top: 8px;
  color: var(--ink);
  line-height: 1.6;
}

.care-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.care-tags em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e7f3ec;
  color: #326a3f;
  font-size: 12px;
  font-style: normal;
}

.care-tags em.yellow {
  background: #fff1d2;
  color: #8a5e18;
}

.care-tags em.red {
  background: #ffe0d9;
  color: #a04435;
}

.care-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hq-campus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.hq-campus-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  background: #fbfdfc;
}

.hq-campus-card.warning {
  border-left-color: var(--coral);
}

.hq-campus-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.hq-campus-head strong,
.hq-campus-head span {
  display: block;
}

.hq-campus-head span,
.hq-campus-card p,
.hq-campus-metrics span {
  color: var(--muted);
  font-size: 12px;
}

.hq-campus-head em {
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef7f6;
  color: var(--teal-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.hq-campus-card.warning .hq-campus-head em {
  background: #fff0eb;
  color: var(--coral);
}

.hq-campus-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hq-campus-metrics div {
  min-width: 0;
  padding: 9px;
  border-radius: 8px;
  background: #f4f8f7;
}

.hq-campus-metrics strong,
.hq-campus-metrics span {
  display: block;
}

.hq-campus-metrics strong {
  margin-top: 4px;
  font-size: 18px;
}

.hq-campus-card p {
  margin: 0;
}

.split {
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 16px;
}

.panel {
  padding: 16px;
}

.panel-head, .toolbar, .dialog-head, .dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lesson-list, .renewal-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.lesson-card {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
}

.time {
  color: var(--teal);
  font-weight: 800;
}

.lesson-main strong, .lesson-main span, .lesson-main small { display: block; }
.lesson-main span { color: var(--muted); margin-top: 3px; }
.lesson-main small { color: var(--muted); margin-top: 4px; }

.status {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  white-space: nowrap;
}

.status.done { background: #eaf4e5; color: var(--leaf); }
.status.no-show { background: #f8e9e5; color: var(--coral); }
.status.cancelled { background: #fff3df; color: var(--gold); }
.status.deducted { background: #dff2e7; color: #246b49; font-weight: 800; }

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

.pending-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

.pending-select-all input,
.pending-deduction-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.pending-deduction-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.pending-deduction-summary article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf9;
}

.pending-deduction-summary span,
.pending-deduction-summary strong {
  display: block;
}

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

.pending-deduction-summary strong {
  margin-top: 4px;
  font-size: 22px;
}

.pending-deduction-summary small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.pending-deduction-section {
  margin-top: 18px;
}

.pending-deduction-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px;
}

.pending-deduction-section-head strong,
.pending-deduction-section-head span,
.pending-deduction-section-head em {
  display: block;
}

.pending-deduction-section-head strong {
  font-size: 15px;
}

.pending-deduction-section-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.pending-deduction-section-head em {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf6f5;
  color: #176e71;
  font-size: 13px;
  font-style: normal;
}

.pending-deduction-section.overdue .pending-deduction-section-head em {
  background: #fff1df;
  color: #a95b12;
}

.pending-deduction-list {
  display: grid;
  gap: 8px;
}

.pending-deduction-notice {
  display: none;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.pending-deduction-notice.success,
.pending-deduction-notice.warning,
.pending-deduction-notice.info {
  display: block;
}

.pending-deduction-notice.success {
  background: #e9f7ef;
  color: var(--leaf);
}

.pending-deduction-notice.warning {
  background: #fff3df;
  color: #8a570d;
}

.pending-deduction-notice.info {
  background: #edf4f3;
  color: var(--teal-dark);
}

.pending-deduction-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.pending-deduction-row.not-ready {
  background: #fffaf2;
}

.pending-deduction-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.pending-deduction-timeline {
  width: 18px;
  height: 18px;
  margin: 6px 0 0 3px;
  border: 2px solid #4b9b97;
  border-radius: 50%;
  box-sizing: border-box;
}

.pending-deduction-row strong,
.pending-deduction-row span,
.pending-deduction-row small {
  display: block;
}

.pending-deduction-row span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.pending-deduction-row small {
  margin-top: 4px;
  color: #8a5b00;
  font-size: 12px;
}

.locked-lesson-note {
  padding: 8px 10px;
  border-radius: 8px;
  background: #e9f7ef;
  color: #246b49;
}

.locked-lesson-note.pending {
  background: #fff7df;
  color: #8a5b00;
}

.empty-state {
  padding: 18px;
  border: 1px dashed #c8d6d7;
  border-radius: 8px;
  background: #fbfdfc;
  color: var(--muted);
  font-size: 13px;
}

.student-empty-state {
  display: grid;
  gap: 6px;
}

.student-empty-state strong {
  color: var(--ink);
  font-size: 14px;
}

.student-empty-state span {
  color: var(--muted);
}

.student-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.student-profile-tags span {
  padding: 5px 8px;
  border-radius: 8px;
  background: #eef5f4;
  color: var(--teal-dark);
  font-size: 12px;
}

.student-profile-summary {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.student-profile-summary span {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #eef5f4;
  color: var(--teal-dark);
  font-size: 12px;
  line-height: 1.4;
}

.student-profile-summary strong {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 12px;
}

.student-profile-summary .warning {
  background: #fff7e8;
  color: #8a5c13;
}

.student-profile-summary .danger {
  background: #fff0ed;
  color: var(--coral);
}

.student-archive-records {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.student-archive-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
}

.student-archive-row small {
  color: var(--muted);
  line-height: 1.5;
}

.student-archive-row strong {
  color: var(--teal-dark);
  font-size: 12px;
}

.student-archive-row.warning strong {
  color: var(--coral);
}

.student-archive-row.empty {
  display: block;
  color: var(--muted);
  line-height: 1.6;
}

.renewal-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.renewal-item strong, .renewal-item span { display: block; }
.renewal-item span { color: var(--muted); font-size: 13px; margin-top: 3px; }
.danger { color: var(--coral); font-weight: 800; }

.toolbar {
  margin-bottom: 14px;
}

.toolbar-title {
  display: grid;
  gap: 4px;
  min-width: 220px;
  margin-right: auto;
}

.toolbar-title strong {
  font-size: 16px;
}

.toolbar-title span {
  color: var(--muted);
  font-size: 13px;
}

.toolbar-title .success {
  color: var(--leaf);
  font-weight: 700;
}

.toolbar-title .warning {
  color: var(--coral);
  font-weight: 700;
}

.payroll-toolbar {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.payroll-toggle {
  flex: 0 0 auto;
}

.payroll-workspace-tabs {
  width: min(620px, 100%);
  margin: 14px 0;
}

.payroll-workspace-tabs button {
  min-height: 42px;
  font-weight: 800;
}

[data-payroll-panel][hidden],
.payroll-rule-change-preview[hidden] {
  display: none !important;
}

.payroll-rule-change-preview {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #b7d8d3;
  border-radius: 8px;
  background: #f7fbfa;
}

.payroll-rule-change-preview .form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.payroll-detail-grid {
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(420px, 1.15fr);
  gap: 16px;
  margin-top: 16px;
}

.payroll-section {
  min-width: 0;
}

.payroll-section .panel-head {
  margin-bottom: 10px;
}

.payroll-teacher-setting-panel .data-table {
  min-width: 1080px;
}

.payroll-teacher-setting-panel select,
.payroll-teacher-setting-panel input {
  width: 100%;
  min-width: 150px;
}

.payroll-teacher-setting-panel td:nth-child(3) {
  min-width: 230px;
}

.payroll-audit-panel {
  margin-top: 14px;
}

.payroll-automation-health {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #dbe6e5;
  border-radius: 8px;
  background: #fbfdfc;
}

.payroll-automation-health:empty {
  display: none;
}

.payroll-automation-health-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.payroll-automation-health-head strong {
  color: var(--ink);
  font-size: 14px;
}

.payroll-automation-health-head span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.payroll-automation-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.payroll-automation-health-grid article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.payroll-automation-health-grid article.warning {
  border-color: #f0d8a6;
  background: #fffaf0;
}

.payroll-automation-health-grid span,
.payroll-automation-health-grid small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.payroll-automation-health-grid strong {
  color: var(--teal);
  font-size: 20px;
  line-height: 1.2;
}

.payroll-automation-health-grid article.warning strong {
  color: #8a5e18;
}

.payroll-audit-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.payroll-rule-change-preview .payroll-audit-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.payroll-audit-summary article,
.payroll-audit-rows article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  padding: 12px;
}

.payroll-audit-summary span,
.payroll-audit-summary small,
.payroll-audit-rows span,
.payroll-audit-rows small {
  color: var(--muted);
  font-size: 12px;
}

.payroll-audit-summary strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 24px;
}

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

.payroll-audit-rows article.warning {
  border-color: rgba(217, 104, 86, 0.3);
  background: #fff8f6;
}

.payroll-audit-rows article.info {
  border-color: rgba(35, 139, 126, 0.22);
  background: #f4fbf8;
}

.payroll-audit-rows article div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.payroll-audit-rows strong {
  color: var(--teal);
  font-size: 13px;
}

.payroll-audit-rows article.warning strong {
  color: var(--coral);
}

.payroll-audit-rows p {
  margin: 8px 0 4px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.payroll-audit-rows small {
  display: block;
  line-height: 1.45;
}

.monthly-close-overview {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.monthly-close-overview-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.monthly-close-overview-summary article,
.monthly-close-overview-rows article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  padding: 12px;
}

.monthly-close-overview-summary span,
.monthly-close-overview-summary small,
.monthly-close-overview-rows span,
.monthly-close-overview-rows p {
  color: var(--muted);
  font-size: 12px;
}

.monthly-close-overview-summary strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 24px;
}

.monthly-close-overview-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.monthly-close-overview-rows article.warning {
  border-color: rgba(217, 104, 86, 0.3);
  background: #fff8f6;
}

.monthly-close-overview-rows article.info {
  border-color: rgba(196, 143, 34, 0.28);
  background: #fffaf0;
}

.monthly-close-overview-rows article.ok {
  border-color: rgba(35, 139, 126, 0.24);
  background: #f4fbf8;
}

.monthly-close-overview-rows article div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.monthly-close-overview-rows strong {
  color: var(--ink);
}

.monthly-close-overview-rows p {
  margin: 8px 0 0;
  line-height: 1.45;
}

.monthly-close-overview-rows em {
  display: inline-block;
  margin-right: 6px;
  color: var(--teal);
  font-style: normal;
  font-weight: 800;
}

.monthly-close-workspace {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.monthly-close-workspace:first-of-type {
  margin-top: 8px;
}

.monthly-close-blockers {
  display: grid;
  gap: 8px;
}

.monthly-close-blockers article {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.4fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(217, 104, 86, 0.32);
  border-radius: 8px;
  background: #fff8f6;
}

.monthly-close-blockers article.info {
  border-color: rgba(35, 139, 126, 0.24);
  background: #f4fbf8;
}

.monthly-close-blockers strong,
.monthly-close-blockers span,
.monthly-close-blockers small {
  min-width: 0;
}

.monthly-close-blockers span,
.monthly-close-blockers small {
  color: var(--muted);
}

.monthly-close-remark {
  display: grid;
  gap: 6px;
  max-width: 760px;
  font-weight: 800;
}

.monthly-close-remark textarea,
.monthly-adjustment-form textarea {
  width: 100%;
  resize: vertical;
}

.monthly-adjustment-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.monthly-adjustment-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.monthly-adjustment-reason {
  grid-column: span 2;
}

.monthly-close-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.monthly-close-version-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.monthly-close-legacy-note {
  color: #8a5e18;
  font-weight: 800;
}

@media (max-width: 900px) {
  .monthly-close-overview-summary,
  .monthly-close-overview-rows,
  .monthly-adjustment-form {
    grid-template-columns: 1fr;
  }

  .monthly-adjustment-reason {
    grid-column: auto;
  }

  .monthly-close-blockers article {
    grid-template-columns: 1fr;
  }

  .monthly-close-row-actions {
    justify-content: flex-start;
  }
}

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

.detail-table {
  min-width: 980px;
}

.segmented {
  display: inline-flex;
  padding: 4px;
  border-radius: 8px;
  background: #e9f0ef;
}

.segmented button {
  min-height: 32px;
  background: transparent;
  color: var(--muted);
}

.segmented .selected {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(36, 49, 58, .08);
}

.schedule-grid {
  display: grid;
  gap: 10px;
}

.schedule-workbench {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.schedule-readonly-mode .schedule-workbench {
  grid-template-columns: 1fr;
}

.schedule-form-panel,
.schedule-main {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.schedule-readonly-note {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #cfe0df;
  border-radius: 8px;
  background: #edf7f6;
  color: var(--teal-dark);
  font-size: 13px;
  line-height: 1.6;
}

.schedule-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(132px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.schedule-form .schedule-student-field {
  grid-column: span 2;
}

.schedule-form .schedule-hint {
  grid-column: span 2;
}

.schedule-form > .primary {
  align-self: end;
  min-height: 40px;
}

.schedule-form label,
.compact-filter {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.schedule-form input,
.schedule-form select,
.compact-filter select,
.compact-filter input {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--white);
  color: var(--ink);
}

.schedule-form select[multiple],
.form-grid select[multiple] {
  height: auto;
  min-height: 118px;
  padding: 7px 8px;
}

.schedule-form select[multiple] option,
.form-grid select[multiple] option {
  padding: 5px 6px;
  border-radius: 4px;
}

.schedule-student-field {
  min-width: 0;
}

.inline-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.schedule-hint {
  min-height: 92px;
  padding: 12px;
  border-radius: 8px;
  background: #f4f8f7;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.schedule-hint strong {
  color: var(--ink);
}

.schedule-hint-grid {
  display: grid;
  gap: 10px;
}

.schedule-hint-grid > div {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(31, 52, 51, 0.08);
}

.schedule-hint-grid > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.schedule-hint-grid span {
  display: block;
}

.schedule-time-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.schedule-time-presets button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.schedule-time-presets button:hover,
.schedule-time-presets button.selected {
  border-color: var(--teal);
  background: #e9f6f4;
  color: var(--teal);
}

.hint-warning {
  display: block;
  margin-top: 4px;
  color: var(--coral);
  font-weight: 700;
}

.hint-danger {
  display: block;
  margin-top: 4px;
  color: #b42318;
  font-weight: 700;
}

.hint-ok {
  display: block;
  margin-top: 4px;
  color: var(--teal);
  font-weight: 700;
}

.compact-filter {
  grid-template-columns: auto 160px;
  align-items: center;
}

.schedule-timeline {
  display: grid;
  gap: 10px;
}

.timeline-board-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf9;
  max-height: calc(100vh - 230px);
  min-height: 640px;
}

.timeline-board {
  width: max-content;
  min-width: 100%;
}

.timeline-header-row,
.timeline-row-board {
  display: grid;
  grid-template-columns: 116px auto;
  width: max-content;
  min-width: 100%;
}

.timeline-header-row {
  position: sticky;
  top: 0;
  z-index: 5;
}

.timeline-resource {
  position: sticky;
  left: 0;
  z-index: 4;
  width: 116px;
  min-height: 88px;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #edf4f3;
  color: var(--ink);
}

.timeline-resource-head {
  min-height: 52px;
  display: grid;
  place-items: center start;
  color: var(--teal-dark);
  font-weight: 800;
}

.timeline-resource strong,
.timeline-resource span {
  display: block;
}

.timeline-resource span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.timeline-time-axis {
  position: relative;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(to right, rgba(36, 49, 58, .13) 1px, transparent 1px),
    linear-gradient(to right, rgba(36, 49, 58, .055) 1px, transparent 1px),
    #edf4f3;
  background-size: var(--slot-width) 100%, var(--minor-slot-width) 100%, auto;
}

.timeline-time-axis span {
  position: absolute;
  top: 15px;
  padding-left: 8px;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
}

.timeline-track {
  position: relative;
  min-height: 88px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(to right, rgba(36, 49, 58, .09) 1px, transparent 1px),
    linear-gradient(to right, rgba(36, 49, 58, .04) 1px, transparent 1px),
    var(--white);
  background-size: var(--slot-width) 100%, var(--minor-slot-width) 100%, auto;
  cursor: pointer;
}

.timeline-track.drag-over {
  outline: 2px solid #91bfbd;
  outline-offset: -3px;
  background:
    linear-gradient(to right, rgba(36, 49, 58, .09) 1px, transparent 1px),
    linear-gradient(to right, rgba(36, 49, 58, .04) 1px, transparent 1px),
    #edf7f6;
  background-size: var(--slot-width) 100%, var(--minor-slot-width) 100%, auto;
}

.timeline-slot-guide {
  position: absolute;
  inset-block: 0;
  z-index: 0;
  pointer-events: none;
}

.timeline-action-banner {
  padding: 11px 12px;
  border: 1px solid #cfe0df;
  border-radius: 8px;
  background: #edf7f6;
  color: var(--teal-dark);
  font-size: 13px;
  line-height: 1.5;
}

.timeline-action-banner.warning {
  border-color: #f0cf95;
  background: #fff8e8;
  color: #8a570d;
}

.calendar-board-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf9;
  max-height: 720px;
}

.calendar-board {
  display: grid;
  min-width: 760px;
}

.calendar-head,
.calendar-time,
.calendar-slot {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.calendar-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 58px;
  padding: 10px;
  background: #edf4f3;
  color: var(--ink);
}

.calendar-head strong,
.calendar-head span {
  display: block;
}

.calendar-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.time-head {
  left: 0;
  z-index: 3;
}

.calendar-time {
  position: sticky;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: start center;
  min-height: 82px;
  padding-top: 12px;
  background: #f2f7f6;
  color: var(--teal-dark);
  font-weight: 800;
}

.calendar-slot {
  min-height: 82px;
  padding: 6px;
  background: var(--white);
  position: relative;
}

.calendar-slot.drag-over {
  outline: 2px solid #91bfbd;
  outline-offset: -3px;
  background: #edf7f6;
}

.calendar-slot.conflict {
  background: #fff7f5;
}

.calendar-card {
  position: absolute;
  top: 7px;
  z-index: 3;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 4px;
  min-height: 74px;
  margin: 0;
  padding: 7px 8px 8px 22px;
  border: 1px solid #cfe0df;
  border-left: 5px solid var(--card-border, var(--teal));
  border-radius: 8px;
  background: var(--card-bg, #fbfdfc);
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(36, 49, 58, .12);
}

.calendar-card::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #0f2025;
  transform: translateY(-50%);
}

.calendar-card.draggable {
  cursor: grab;
}

.calendar-card.deducted-locked {
  border-left-color: #2f8a61;
  background: #f4faf6;
  cursor: default;
  box-shadow: none;
}

.calendar-card.deducted-locked::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  background: #2f8a61;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.calendar-card.dragging {
  opacity: .5;
}

.schedule-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: .92;
  transform: rotate(-1deg);
}

.schedule-drag-ghost.snap-preview {
  opacity: .96;
  transform: none;
  outline: 2px solid #167d7f;
  outline-offset: 2px;
}

.calendar-card.done { border-left-color: var(--card-border, var(--leaf)); }
.calendar-card.no-show { border-left-color: var(--coral); }
.calendar-card.cancelled { border-left-color: var(--gold); opacity: .76; }
.calendar-card.grouped {
  border-color: #b9d8d5;
  box-shadow: 0 8px 18px rgba(36, 49, 58, .15);
}

.calendar-card.mixed-status {
  border-top-color: var(--coral);
}

.calendar-card strong,
.calendar-card span,
.calendar-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-card strong,
.calendar-card small,
.calendar-card-time {
  white-space: nowrap;
}

.calendar-card-time,
.calendar-card span,
.calendar-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.calendar-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.calendar-card-time {
  font-weight: 800;
  color: var(--teal-dark);
}

.calendar-deducted-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: #dff2e7;
  color: #246b49 !important;
  font-size: 11px !important;
  font-weight: 900;
}

.calendar-group-badge {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  min-width: auto !important;
  padding: 1px 5px;
  border: 1px solid #9fc7c3;
  border-radius: 4px;
  background: #f2fbfa;
  color: var(--teal-dark) !important;
  font-size: 11px !important;
  font-weight: 800;
}

.calendar-card strong {
  font-size: 13px;
  line-height: 1.2;
}

.calendar-card-students {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 4px;
  max-height: 68px;
  overflow: hidden;
}

.calendar-card-students span {
  display: inline-flex !important;
  width: auto;
  max-width: 100%;
  min-width: 0;
  padding: 1px 5px;
  border: 1px solid rgba(22, 125, 127, .18);
  border-radius: 4px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink) !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  white-space: nowrap;
}

.calendar-card-students.single {
  display: block;
  max-height: 22px;
}

.calendar-card-students.single span {
  display: block !important;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-card-course {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  line-height: 1.25;
  max-height: 2.5em;
  color: var(--ink) !important;
  font-weight: 700;
}

.slot-add-btn {
  width: 100%;
  min-height: 58px;
  border: 1px dashed #bfd0d1;
  border-radius: 8px;
  background: #f7faf9;
  color: var(--teal-dark);
  font-size: 22px;
  font-weight: 800;
}

.slot-add-btn:hover {
  border-color: #91bfbd;
  background: #edf7f6;
}

.audit-panel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.audit-filter-bar {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.audit-keyword {
  min-width: min(260px, 100%);
  flex: 1 1 240px;
}

.audit-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.audit-row {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.audit-row strong,
.audit-row span,
.audit-row small {
  display: block;
}

.audit-row span,
.audit-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.timeline-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: stretch;
}

.timeline-time {
  display: grid;
  place-items: center;
  min-height: 76px;
  border-radius: 8px;
  background: #edf4f3;
  color: var(--teal-dark);
  font-weight: 800;
}

.timeline-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.timeline-card strong,
.timeline-card span,
.timeline-card small {
  display: block;
}

.timeline-card span,
.timeline-card small {
  color: var(--muted);
  margin-top: 4px;
}

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

.students-toolbar,
.teachers-toolbar {
  margin-bottom: 14px;
}

.student-subnav {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.student-subnav button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.student-subnav button.selected {
  background: #dff0ed;
  color: var(--teal-dark);
  font-weight: 700;
}

.student-archive-workspace {
  display: grid;
  gap: 14px;
}

.student-archive-toolbar,
.student-archive-head,
.student-archive-assessment-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.student-archive-toolbar label {
  display: grid;
  min-width: min(100%, 360px);
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.student-archive-toolbar select,
.student-archive-toolbar input {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

.student-archive-profile,
.student-archive-grid {
  display: grid;
  gap: 14px;
}

.student-archive-profile {
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
}

.student-archive-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.student-archive-summary,
.student-archive-assessment,
.student-archive-process {
  padding: 16px;
}

.student-archive-summary h2,
.student-archive-assessment h2,
.student-archive-process h2 {
  margin: 0;
  font-size: 16px;
}

.student-archive-summary p,
.student-archive-assessment p,
.student-archive-process p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.student-archive-meta {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.student-archive-meta span,
.student-assessment-row,
.student-process-row {
  display: block;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfdfc;
}

.student-archive-meta strong,
.student-assessment-row strong,
.student-process-row strong,
.student-assessment-row small,
.student-process-row small {
  display: block;
}

.student-archive-meta small,
.student-assessment-row small,
.student-process-row small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.student-assessment-list,
.student-process-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.student-archive-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.student-archive-metrics article {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfdfc;
}

.student-archive-metrics span,
.student-archive-metrics strong {
  display: block;
}

.student-archive-metrics span {
  color: var(--muted);
  font-size: 12px;
}

.student-archive-metrics strong {
  margin-top: 5px;
  font-size: 18px;
}

.student-card, .teacher-card, .package-card {
  padding: 16px;
  min-height: 170px;
}

.student-name-chip {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  border-radius: 8px;
  padding: 5px 10px;
  color: #1f2d34;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.student-name-chip.tone-0 { background: #dff4ee; }
.student-name-chip.tone-1 { background: #fff0b8; }
.student-name-chip.tone-2 { background: #e7efff; }
.student-name-chip.tone-3 { background: #ffe3d8; }
.student-name-chip.tone-4 { background: #eadffc; }
.student-name-chip.tone-5 { background: #dff3ff; }

.student-card.inactive,
.teacher-card.inactive,
.package-card.inactive {
  background: #f6f8f8;
}

.student-priority-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.student-priority-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--leaf);
  border-radius: 8px;
  background: #fbfdfc;
}

.student-priority-card.yellow {
  border-left-color: var(--gold);
  background: #fffaf0;
}

.student-priority-card.red {
  border-left-color: var(--coral);
  background: #fff4f1;
}

.student-priority-card span,
.student-priority-card strong,
.student-priority-card small {
  display: block;
}

.student-priority-card span,
.student-priority-card small {
  color: var(--muted);
  font-size: 12px;
}

.student-priority-card strong {
  margin: 4px 0;
  font-size: 18px;
}

.student-risk-note {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f4f8f7;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.student-risk-note.yellow {
  background: #fff7e7;
  color: #8a5e18;
}

.student-risk-note.red {
  background: #fff0ec;
  color: #a04435;
}

.student-detail-sections {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.student-detail-section {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.student-detail-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.student-detail-section-head strong {
  color: var(--ink);
  font-size: 14px;
}

.student-detail-section-head span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.student-process-overview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe6e5;
  border-radius: 8px;
  background: #fbfdfc;
}

.student-process-overview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.student-process-overview-head strong {
  color: var(--ink);
  font-size: 14px;
}

.student-process-overview-head span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.student-process-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}

.student-process-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.student-process-metric span,
.student-process-metric small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.student-process-metric strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.student-process-metric.green {
  border-color: #cdebd8;
  background: #f3fbf6;
}

.student-process-metric.yellow {
  border-color: #f0d8a6;
  background: #fffaf0;
}

.student-process-metric.red {
  border-color: #efc4bd;
  background: #fff4f1;
}

.student-process-metric.green strong {
  color: #2d7a4f;
}

.student-process-metric.yellow strong {
  color: #8a5e18;
}

.student-process-metric.red strong {
  color: #a04435;
}

.student-profile-lines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.student-consumption-list {
  display: grid;
  gap: 6px;
}

.student-consumption-summary,
.student-package-audit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.student-consumption-summary span,
.student-package-audit span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef5f2;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.student-package-audit span.green {
  background: #eaf7ef;
  color: #2d7a4f;
}

.student-package-audit span.yellow,
.student-consumption-row strong.yellow {
  background: #fff7e7;
  color: #8a5e18;
}

.student-package-audit span.red {
  background: #fff0ec;
  color: #a04435;
}

.student-consumption-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12px;
}

.student-consumption-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.student-consumption-row strong {
  flex: 0 0 auto;
  color: var(--ink);
}

.student-consumption-row strong.green {
  color: #2d7a4f;
}

.student-consumption-row strong.muted {
  color: var(--muted);
}

.student-consumption-row small {
  color: var(--muted);
  line-height: 1.5;
}

.student-consumption-row.empty {
  color: var(--muted);
}

.student-process-signals {
  display: grid;
  gap: 7px;
}

.student-process-signals article {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #dbe6e5;
  border-radius: 8px;
  background: #fbfdfc;
}

.student-process-signals article.warning {
  border-color: #f1dcc0;
  background: #fffaf1;
}

.student-process-signals span {
  color: var(--muted);
  font-size: 12px;
}

.student-process-signals p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}

.student-process-timeline {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.student-process-timeline-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.student-process-timeline-head strong {
  color: var(--ink);
}

.student-process-timeline article {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.student-process-timeline time {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.student-process-timeline strong,
.student-process-timeline p {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.student-process-timeline p,
.student-process-empty {
  color: var(--muted);
}

.student-payment-records {
  display: grid;
  gap: 7px;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.student-package-records {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #dbe6e5;
  border-radius: 8px;
  background: #f7faf9;
}

.student-followup-records {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e4dfd0;
  border-radius: 8px;
  background: #fffaf0;
}

.student-followup-latest {
  display: grid;
  gap: 4px;
  padding-top: 7px;
  border-top: 1px dashed #e5d6ae;
}

.student-followup-latest span,
.student-followup-latest small,
.student-followup-list {
  color: var(--muted);
  font-size: 12px;
}

.student-followup-latest p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.student-followup-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
}

.student-followup-records button {
  justify-self: start;
}

.followup-status {
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef7f5;
  color: var(--teal);
  font-weight: 800;
}

.followup-status.overdue {
  background: #fff0ec;
  color: var(--coral);
}

.followup-status.done {
  background: #eef7ea;
  color: var(--leaf);
}

.student-payment-head,
.student-payment-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.student-payment-head strong,
.student-payment-row strong,
.student-payment-head span,
.student-payment-row span {
  display: block;
}

.student-payment-head span,
.student-payment-row span {
  color: var(--muted);
  font-size: 12px;
}

.student-payment-row {
  align-items: center;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
}

.student-package-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
}

.student-package-row > span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.student-package-row strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.student-package-row button {
  min-height: 30px;
  padding: 0 10px;
}

.student-payment-row > span {
  min-width: 0;
  line-height: 1.45;
}

.student-payment-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.student-payment-row strong {
  flex: 0 0 auto;
  text-align: right;
}

.student-payment-row button {
  min-height: 30px;
  padding: 0 10px;
}

.student-payment-row.empty {
  color: var(--muted);
  font-size: 12px;
}

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

.transfer-preview div {
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: #f4f8f7;
}

.transfer-preview span,
.transfer-preview strong {
  display: block;
}

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

.transfer-preview strong {
  margin-top: 4px;
  font-size: 18px;
}

.transfer-preview p {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.6;
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.status-stack {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.status-badge.active {
  background: #e7f3ec;
  color: #326a3f;
}

.status-badge.inactive {
  background: #eef1f1;
  color: var(--muted);
}

.avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e8f2f1;
  color: var(--teal-dark);
  font-weight: 800;
}

.card-title strong, .card-title span { display: block; }
.card-title span, .meta { color: var(--muted); font-size: 13px; }
.meta { margin-top: 12px; line-height: 1.8; }

.teacher-schedule-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.teacher-schedule-summary div,
.teacher-next-lesson,
.teacher-mini-lessons div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.teacher-schedule-summary div {
  padding: 10px;
}

.teacher-schedule-summary span,
.teacher-next-lesson span,
.teacher-next-lesson small,
.teacher-mini-lessons span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.teacher-schedule-summary strong {
  display: block;
  margin-top: 5px;
  font-size: 20px;
}

.teacher-next-lesson {
  margin-top: 10px;
  padding: 11px 12px;
  border-left: 4px solid var(--teal);
}

.teacher-next-lesson strong,
.teacher-next-lesson small {
  display: block;
  margin-top: 5px;
}

.teacher-mini-lessons {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.teacher-mini-lessons div {
  padding: 9px 10px;
}

.teacher-mini-lessons strong,
.teacher-mini-lessons span {
  display: block;
}

.teacher-mini-lessons span {
  margin-top: 3px;
}

.teacher-profile-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.teacher-profile-strip strong,
.teacher-profile-strip span {
  display: block;
}

.teacher-profile-strip span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.teacher-photo,
.teacher-photo-preview-img,
.portal-teacher-photo {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
  background: #e8f2f1;
}

.teacher-photo-placeholder {
  display: grid;
  place-items: center;
  color: var(--teal-dark);
  font-weight: 800;
}

.teacher-photo-preview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.teacher-radar-wrap {
  margin-top: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.teacher-radar {
  width: 100%;
  max-width: 150px;
  display: block;
}

.radar-grid {
  fill: none;
  stroke: #dce5e7;
  stroke-width: 1;
}

.radar-axis {
  stroke: #c5d3d5;
  stroke-width: 1;
}

.radar-label {
  fill: var(--muted);
  font-size: 11px;
}

.radar-shape {
  fill: rgba(48, 125, 122, 0.22);
  stroke: var(--teal);
  stroke-width: 2;
}

.progress {
  height: 8px;
  border-radius: 999px;
  background: #e9f0ef;
  overflow: hidden;
  margin-top: 14px;
}

.progress span {
  display: block;
  height: 100%;
  background: var(--teal);
}

.dialog {
  width: min(640px, calc(100vw - 28px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow);
}

.dialog::backdrop { background: rgba(14, 31, 37, .35); }
.dialog form { padding: 18px; }
.dialog-body { margin: 16px 0; color: var(--muted); line-height: 1.8; }
.dialog-body strong { color: var(--ink); }

.receipt-dialog {
  width: min(860px, calc(100vw - 28px));
}

.student-import-dialog {
  width: min(1080px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
}

.student-import-dialog > .dialog-head,
.student-import-dialog > .dialog-actions {
  position: sticky;
  z-index: 3;
  padding: 16px 18px;
  background: var(--white);
}

.student-import-dialog > .dialog-head {
  top: 0;
  border-bottom: 1px solid var(--line);
}

.student-import-dialog > .dialog-actions {
  bottom: 0;
  border-top: 1px solid var(--line);
}

.student-import-dialog .dialog-head h2,
.student-import-dialog .dialog-head p {
  margin: 0;
}

.student-import-dialog .dialog-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.student-import-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
  background: var(--line);
}

.student-import-steps li {
  min-width: 0;
  padding: 12px 10px;
  background: #f5f8f7;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.student-import-steps li.active {
  background: #dff0ed;
  color: var(--teal-dark);
}

.student-import-steps li.done {
  background: #edf6ef;
  color: #356b45;
}

.student-import-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.student-import-file-row,
.student-import-section-head,
.student-import-history-row,
.student-import-history-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.student-import-file-row {
  flex-wrap: wrap;
}

.student-import-file-row > span {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.student-import-message {
  min-height: 20px;
  padding: 10px 12px;
  border-left: 4px solid transparent;
  background: #f6f8f8;
  color: var(--muted);
}

.student-import-message:empty {
  display: none;
}

.student-import-message.success { border-left-color: var(--leaf); color: #356b45; }
.student-import-message.warning { border-left-color: var(--gold); color: #835c13; }
.student-import-message.error { border-left-color: var(--coral); color: #a33d34; }

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

.student-import-summary:empty {
  display: none;
}

.student-import-summary article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.student-import-summary span,
.student-import-summary strong {
  display: block;
}

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

.student-import-summary strong {
  margin-top: 4px;
  font-size: 22px;
}

.student-import-table-wrap {
  max-height: 380px;
  overflow: auto;
}

.student-import-table {
  min-width: 820px;
}

.student-import-table td {
  vertical-align: top;
}

.student-import-table td strong,
.student-import-table td small {
  display: block;
}

.student-import-table td small {
  max-width: 360px;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.student-import-table tr.ready td:last-child em { color: #356b45; }
.student-import-table tr.duplicate td:last-child em { color: #835c13; }
.student-import-table tr.error td:last-child em { color: #a33d34; }

.student-import-result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
  border: 1px solid #b8d7c1;
  border-radius: 8px;
  background: #edf6ef;
}

.student-import-result strong,
.student-import-result small {
  grid-column: 1 / -1;
}

.student-import-result span {
  font-weight: 700;
}

.student-import-history {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.student-import-section-head,
.student-import-history-row {
  justify-content: space-between;
}

.student-import-history-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.student-import-history-row strong,
.student-import-history-row span,
.student-import-history-row small {
  display: block;
}

.student-import-history-row span,
.student-import-history-row small {
  margin-top: 3px;
  color: var(--muted);
}

.student-import-history-actions {
  flex: 0 0 auto;
}

.student-import-history-actions em {
  padding: 4px 8px;
  border-radius: 6px;
  background: #edf6ef;
  color: #356b45;
  font-size: 12px;
}

.student-import-history-actions em.inactive {
  background: #eef1f1;
  color: var(--muted);
}

.student-import-empty {
  padding: 18px 0;
  color: var(--muted);
  text-align: center;
}

.receipt-dialog > .dialog-head,
.receipt-dialog > .dialog-actions {
  padding: 16px 18px;
}

.payment-receipt {
  padding: 0 18px 18px;
}

.receipt-paper {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.receipt-paper + .receipt-paper {
  margin-top: 18px;
}

.receipt-brand,
.receipt-title,
.receipt-total,
.receipt-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.receipt-brand {
  justify-content: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.receipt-brand img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
}

.receipt-brand strong,
.receipt-brand span,
.receipt-info-grid span,
.receipt-info-grid strong,
.receipt-note strong,
.receipt-note span {
  display: block;
}

.receipt-brand strong { font-size: 18px; }
.receipt-brand span,
.receipt-info-grid span,
.receipt-note strong,
.receipt-safe-note { color: var(--muted); font-size: 12px; }

.receipt-title {
  margin: 16px 0;
}

.receipt-title h3 {
  margin: 0;
  font-size: 22px;
}

.receipt-title span {
  color: var(--teal);
  font-weight: 800;
}

.receipt-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.receipt-info-grid div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfa;
}

.receipt-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 16px;
  font-size: 13px;
}

.receipt-table th,
.receipt-table td {
  padding: 10px;
  border: 1px solid var(--line);
  text-align: left;
}

.receipt-table th {
  background: #f4f8f7;
  color: var(--muted);
  font-size: 12px;
}

.receipt-total {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.receipt-total strong {
  font-size: 22px;
  color: var(--teal);
}

.receipt-note {
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 14px;
}

.receipt-safe-note {
  margin: 14px 0 0;
  line-height: 1.7;
}

.receipt-empty {
  padding: 24px;
  color: var(--muted);
}

.detail-audit {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.detail-audit strong,
.detail-audit span {
  display: block;
}

.detail-audit span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

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

.form-grid .wide-field {
  grid-column: 1 / -1;
}

.form-section {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf9;
}

.form-section strong,
.teacher-grade-group > strong {
  color: var(--ink);
  font-size: 14px;
}

.form-section span {
  color: var(--muted);
  font-size: 12px;
}

.form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.form-grid input, .form-grid select, .form-grid textarea {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--white);
  color: var(--ink);
}

.form-grid textarea {
  min-height: 96px;
  padding: 10px;
  resize: vertical;
  line-height: 1.5;
}

.purchase-package-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f7faf9;
}

.purchase-package-head,
.purchase-package-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.purchase-package-head strong {
  color: var(--ink);
}

.purchase-package-head span,
.purchase-package-row small {
  color: var(--muted);
}

.purchase-package-items {
  display: grid;
  gap: 8px;
}

.purchase-package-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--white);
}

.purchase-package-row > span {
  display: grid;
  gap: 3px;
}

.purchase-package-row strong {
  color: var(--ink);
}

.teacher-grade-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.teacher-grade-group > strong {
  grid-column: 1 / -1;
}

.form-grid input[type="range"] {
  padding: 0;
}

.form-grid input[readonly] {
  background: #f0f5f4;
  color: var(--muted);
}

.schedule-selection-note {
  grid-column: 1 / -1;
  margin-top: -6px;
  color: var(--muted);
  font-size: 12px;
}

.schedule-student-packages {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-height: 38px;
  padding: 10px;
  border: 1px solid #d8e6e2;
  border-radius: 8px;
  background: #f7fbfa;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.schedule-package-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d8e6e2;
  border-radius: 8px;
  background: var(--white);
}

.schedule-package-card > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.schedule-package-card strong,
.schedule-package-card span {
  display: block;
}

.schedule-package-card strong {
  color: var(--ink);
  font-size: 13px;
}

.schedule-package-card em {
  justify-self: start;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e7f3ec;
  color: var(--teal-dark);
  font-style: normal;
  font-weight: 800;
}

.schedule-package-card.warning em {
  background: #fff4d7;
  color: #8a5b00;
}

.schedule-package-card.danger em {
  background: #ffe7e2;
  color: #9b2f1c;
}

.schedule-package-card ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule-package-card li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 5px;
  border-top: 1px solid #edf2f0;
}

.helper-text {
  margin: -4px 0 16px;
  color: var(--muted);
  font-size: 13px;
}

.finance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.finance-grid span {
  display: block;
  padding: 8px;
  border-radius: 8px;
  background: #f4f8f7;
  color: var(--muted);
  font-size: 13px;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.finance-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.finance-summary article {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.finance-summary span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

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

.finance-data-panel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.finance-data-head {
  align-items: flex-start;
}

.finance-data-head .helper-text {
  margin: 4px 0 0;
}

.export-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.receipt-print-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.receipt-select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.finance-data-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
  margin: 14px 0;
}

.finance-data-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.finance-data-toolbar input,
.finance-data-toolbar select {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--white);
  color: var(--ink);
}

.finance-data-summary {
  margin-top: 0;
}

.finance-sync-note {
  min-height: 38px;
  margin: -2px 0 14px;
  padding: 10px 12px;
  border: 1px solid #cfe0df;
  border-radius: 8px;
  background: #edf7f6;
  color: var(--teal-dark);
  font-size: 13px;
}

.finance-data-grid {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr);
  gap: 16px;
  margin-top: 16px;
}

.finance-table-section {
  min-width: 0;
}

.finance-table-section.wide {
  grid-column: 1 / -1;
}

.finance-ledger-section {
  margin-top: 16px;
}

.finance-scroll-wrap {
  max-height: 420px;
  overflow: auto;
}

.finance-ledger-section .finance-scroll-wrap {
  max-height: 460px;
}

.finance-scroll-wrap .data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.finance-ledger-table {
  min-width: 1420px;
}

.finance-scroll-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.finance-scroll-wrap::-webkit-scrollbar-thumb {
  border: 2px solid var(--white);
  border-radius: 999px;
  background: #b8cbc8;
}

.finance-scroll-wrap::-webkit-scrollbar-track {
  background: #edf4f3;
}

.inventory-panel {
  display: grid;
  gap: 16px;
}

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

.inventory-summary div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.inventory-summary span,
.inventory-summary small,
.inventory-card-list span,
.inventory-card-list small {
  display: block;
  color: var(--muted);
}

.inventory-summary strong {
  display: block;
  margin: 4px 0;
  font-size: 24px;
}

.inventory-role-guide {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface-soft);
}

.inventory-role-guide div {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.inventory-role-guide span,
.inventory-role-guide small {
  color: var(--muted);
}

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

.inventory-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.inventory-alert.danger {
  border-color: #f0b5a7;
  background: #fff4f0;
}

.inventory-alert.warning {
  border-color: #ecd69e;
  background: #fff9e8;
}

.inventory-alert.ok {
  border-color: #cbe3da;
  background: #f3fbf8;
}

.inventory-alert strong,
.inventory-alert span {
  display: block;
}

.inventory-alert span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.inventory-alert button {
  flex: 0 0 auto;
}

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

.inventory-actions article {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.inventory-actions span,
.inventory-actions small {
  color: var(--muted);
}

.inventory-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 14px;
}

.inventory-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
}

.inventory-section.wide {
  grid-row: span 2;
}

.inventory-tab-action {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.inventory-tab-action article {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-soft);
}

.inventory-tab-action span {
  color: var(--muted);
}

.compact-inventory-close {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.compact-inventory-close button {
  grid-column: 1 / -1;
}

.inventory-close-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.inventory-close-summary article {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.inventory-close-summary span,
.inventory-close-summary strong,
.inventory-close-summary small {
  display: block;
}

.inventory-close-summary span,
.inventory-close-summary small {
  color: var(--muted);
  font-size: 12px;
}

.inventory-close-summary strong {
  margin: 5px 0;
  font-size: 18px;
}

.compact-head h3 {
  margin: 0;
  font-size: 16px;
}

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

.inventory-card-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-soft);
}

.product-sale-field {
  display: none;
}

.manual-cash-field {
  display: none;
}

.manual-cash-mode .manual-cash-field {
  display: grid;
}

.manual-cash-mode label:has([name="discountRate"]) {
  opacity: 0.72;
}

.product-sale-mode .product-sale-field {
  display: grid;
}

.product-sale-mode .course-sale-field,
.product-sale-mode label:has([name="packageSearch"]),
.product-sale-mode label:has([name="packageName"]),
.product-sale-mode label:has([name="total"]),
.product-sale-mode label:has([name="remain"]) {
  display: none;
}

@media (max-width: 980px) {
  .inventory-summary,
  .inventory-alerts,
  .inventory-actions,
  .inventory-grid,
  .inventory-tab-action {
    grid-template-columns: 1fr;
  }
}

.finance-table-section .panel-head {
  margin-bottom: 10px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.data-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.data-table th {
  color: var(--muted);
  background: #f2f7f6;
  font-size: 13px;
  font-weight: 700;
}

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

.data-table strong,
.data-table span {
  display: block;
}

.readonly-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #edf4f3;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.data-table span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.settings-card {
  min-height: 320px;
}

.settings-card-wide {
  grid-column: 1 / -1;
}

.settings-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.settings-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.settings-form input,
.settings-form select {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--white);
  color: var(--ink);
}

.settings-form .check-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-form .check-field input {
  width: 16px;
  height: 16px;
}

.role-editor-card {
  align-items: flex-start;
}

.role-permission-editor {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.role-permission-editor label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.role-permission-editor input[type="text"],
.role-permission-editor input:not([type]) {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--white);
}

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

.role-permission-grid .check-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfa;
}

.role-permission-grid .check-field input {
  width: 16px;
  height: 16px;
}

.settings-form button {
  align-self: end;
}

.settings-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

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

.data-summary-grid div {
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  background: #f4f8f7;
}

.data-summary-grid span,
.data-summary-grid strong {
  display: block;
}

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

.data-summary-grid strong {
  margin-top: 4px;
  font-size: 22px;
}

.data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.import-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.import-file input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.system-health {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.system-health-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf9;
}

.system-health-head strong,
.system-health-head span {
  display: block;
}

.system-health-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.health-counts {
  display: flex;
  gap: 6px;
}

.health-counts em {
  min-width: 30px;
  padding: 4px 7px;
  border-radius: 6px;
  text-align: center;
  font-style: normal;
  font-weight: 800;
}

.health-counts .error {
  background: #fff0ec;
  color: #a04435;
}

.health-counts .warning {
  background: #fff7e7;
  color: #8a5e18;
}

.health-counts .pass {
  background: #edf7f0;
  color: #2f7b55;
}

.system-health-list {
  display: grid;
  gap: 8px;
}

.health-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid #b8c8c7;
  border-radius: 8px;
  background: var(--white);
}

.health-row.error {
  border-left-color: var(--coral);
}

.health-row.warning {
  border-left-color: var(--gold);
}

.health-row.pass {
  border-left-color: var(--leaf);
}

.health-row > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.health-row strong,
.health-row small {
  display: block;
}

.health-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.health-more {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f4f8f7;
  color: var(--muted);
  font-size: 13px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.settings-row strong,
.settings-row span {
  display: block;
}

.settings-row span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.settings-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.inline-status {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  margin-left: 6px;
}

.inline-status.active {
  background: #e7f3ec;
  color: #326a3f;
}

.inline-status.inactive {
  background: #eef1f1;
  color: var(--muted);
}

.settings-row button:disabled {
  cursor: not-allowed;
  opacity: .56;
}

.package-category-groups {
  display: grid;
  gap: 12px;
}

.package-category-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf9;
  overflow: hidden;
}

.package-category-group.inactive {
  background: #f5f7f7;
}

.package-category-group-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #edf6f3;
}

.package-category-group-head strong,
.package-category-group-head span {
  display: block;
}

.package-category-group-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.package-category-package-list {
  padding: 10px;
}

.package-category-package-list .settings-row {
  background: #fff;
}

.package-empty-row {
  border-style: dashed;
  background: transparent;
}

.portal-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: start;
}

.teacher-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  align-items: start;
}

.portal-picker,
.teacher-picker,
.phone-frame {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.portal-picker,
.teacher-picker {
  padding: 16px;
}

.portal-picker label,
.teacher-picker label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 12px;
}

.portal-picker select,
.teacher-picker select,
.teacher-picker input {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--white);
  color: var(--ink);
}

.portal-mini {
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.8;
  font-size: 13px;
}

.portal-links {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.portal-links h2 {
  font-size: 15px;
  margin-bottom: 10px;
}

.portal-link {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 8px;
  background: #fbfdfc;
}

.portal-link.active {
  border-color: #91bfbd;
  background: #edf7f6;
}

.portal-link strong,
.portal-link span {
  display: block;
}

.portal-link span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.portal-sync-card {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdfc;
}

.portal-sync-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portal-sync-head span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
}

.portal-sync-list {
  display: grid;
  gap: 7px;
}

.portal-sync-row {
  display: grid;
  grid-template-columns: 72px 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
}

.portal-sync-row span,
.portal-sync-row small,
.portal-sync-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.portal-sync-row strong {
  color: var(--teal);
  font-size: 12px;
}

.portal-sync-row.warning strong {
  color: var(--coral);
}

.portal-sync-card p {
  margin: 0;
  overflow-wrap: anywhere;
}

.external-sync-panel {
  display: grid;
  gap: 14px;
}

.external-sync-health,
.external-sync-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.external-sync-health {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.external-sync-health article,
.external-sync-summary article,
.external-sync-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  padding: 12px;
}

.external-sync-health article.warning {
  border-color: #f3ca78;
  background: #fff8e8;
}

.external-sync-health span,
.external-sync-summary span,
.external-sync-item span,
.external-sync-item small {
  color: var(--muted);
  font-size: 12px;
}

.external-sync-health strong,
.external-sync-summary strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 24px;
}

.external-sync-health small,
.external-sync-summary small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

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

.external-sync-item {
  display: grid;
  gap: 8px;
  min-height: 132px;
}

.external-sync-item div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.external-sync-item strong {
  color: var(--teal);
  font-size: 24px;
  line-height: 1;
}

.external-sync-item.warning strong {
  color: var(--coral);
}

.external-sync-item p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.external-sync-item small {
  line-height: 1.45;
}

.external-sync-followups {
  display: grid;
  gap: 10px;
}

.external-sync-followup-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.external-sync-followup-list article {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.external-sync-followup-list article.pending {
  border-color: rgba(217, 104, 86, 0.28);
  background: #fff8f6;
}

.external-sync-followup-list article.done {
  border-color: rgba(35, 139, 126, 0.24);
  background: #f4fbf8;
}

.external-sync-followup-list article div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.external-sync-followup-list strong {
  color: var(--ink);
  font-size: 13px;
}

.external-sync-followup-list span {
  flex: 0 0 auto;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
}

.external-sync-followup-list article.pending span {
  color: var(--coral);
}

.external-sync-followup-list small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.portal-screen {
  display: flex;
  justify-content: center;
}

.phone-frame {
  width: min(420px, 100%);
  min-height: 720px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.teacher-screen {
  display: flex;
  justify-content: center;
}

.teacher-phone {
  width: min(720px, 100%);
  min-height: 720px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.portal-only {
  display: block;
  background: #edf4f3;
}

.teacher-only {
  display: block;
  background: #edf4f3;
}

.portal-only .sidebar,
.portal-only .topbar,
.portal-only .portal-picker,
.teacher-only .sidebar,
.teacher-only .topbar,
.teacher-only .teacher-picker {
  display: none;
}

.portal-only .shell,
.teacher-only .shell {
  padding: 10px;
}

.portal-only .view,
.teacher-only .view {
  display: none;
}

.portal-only #portal {
  display: block;
}

.teacher-only #teacherPortal {
  display: block;
}

.portal-only .portal-layout,
.teacher-only .teacher-layout {
  display: block;
}

.portal-only .portal-screen,
.teacher-only .teacher-screen {
  display: block;
}

.portal-only .phone-frame,
.teacher-only .teacher-phone {
  width: 100%;
  min-height: 100vh;
  border: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}

.teacher-hero {
  padding: 18px;
  border-radius: 8px;
  background: #15333a;
  color: #fff;
}

.teacher-schedule-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  background: #15333a;
  color: #fff;
}

.teacher-schedule-head span,
.teacher-schedule-head small,
.teacher-day-count span {
  display: block;
  color: #bdd2d4;
}

.teacher-schedule-head strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
}

.teacher-schedule-head small {
  margin-top: 6px;
}

.teacher-day-count {
  display: grid;
  place-items: center;
  min-width: 96px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  text-align: center;
}

.teacher-day-count strong {
  margin: 0;
  font-size: 30px;
}

.teacher-day-count span {
  margin-top: 2px;
  font-size: 12px;
}

.teacher-hero span,
.teacher-hero small {
  display: block;
  color: #bdd2d4;
}

.teacher-hero strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
}

.teacher-hero small {
  margin-top: 6px;
}

.teacher-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.teacher-stats article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.teacher-stats span,
.teacher-stats strong {
  display: block;
}

.teacher-stats span {
  color: var(--muted);
  font-size: 12px;
}

.teacher-stats strong {
  margin-top: 6px;
  font-size: 22px;
}

.teacher-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(86px, 1fr));
  gap: 8px;
  margin: 12px 0;
  overflow-x: auto;
}

.teacher-week-day {
  min-width: 86px;
  min-height: 86px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  color: var(--ink);
  text-align: left;
}

.teacher-week-day.selected {
  border-color: #91bfbd;
  background: #edf7f6;
  box-shadow: inset 0 0 0 1px #91bfbd;
}

.teacher-week-day strong,
.teacher-week-day span,
.teacher-week-day small {
  display: block;
}

.teacher-week-day strong {
  white-space: pre-line;
  font-size: 13px;
}

.teacher-week-day span {
  margin-top: 8px;
  color: var(--teal-dark);
  font-weight: 800;
}

.teacher-week-day small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.teacher-day-panel {
  margin-top: 12px;
}

.teacher-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.teacher-section-title strong,
.teacher-section-title span {
  display: block;
}

.teacher-section-title span {
  color: var(--muted);
  font-size: 13px;
}

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

.teacher-week-overview {
  margin-top: 18px;
}

.teacher-week-overview-list {
  display: grid;
  gap: 10px;
}

.teacher-week-overview-day {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.teacher-week-overview-day header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--ink);
}

.teacher-week-overview-day header span {
  color: var(--muted);
  font-size: 13px;
}

.teacher-week-overview-lesson {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 6px 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.teacher-week-overview-lesson time {
  color: var(--teal-dark);
  font-weight: 800;
}

.teacher-week-overview-lesson span,
.teacher-week-overview-lesson small {
  min-width: 0;
}

.teacher-week-overview-lesson small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
}

.teacher-week-overview-empty {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.teacher-lesson-card {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--leaf);
  border-radius: 8px;
  background: #fbfdfc;
}

.teacher-lesson-card.no-show {
  border-left-color: var(--coral);
}

.teacher-lesson-card.cancelled {
  border-left-color: var(--gold);
  opacity: .78;
}

.teacher-lesson-time {
  display: grid;
  place-items: center;
  min-height: 64px;
  border-radius: 8px;
  background: #edf4f3;
  color: var(--teal-dark);
}

.teacher-lesson-time strong,
.teacher-lesson-time span,
.teacher-lesson-main strong,
.teacher-lesson-main span,
.teacher-lesson-main small {
  display: block;
}

.teacher-lesson-time span,
.teacher-lesson-main span,
.teacher-lesson-main small {
  color: var(--muted);
  font-size: 13px;
}

.teacher-lesson-main {
  min-width: 0;
  align-self: center;
}

.teacher-lesson-main span,
.teacher-lesson-main small {
  margin-top: 5px;
}

.teacher-feedback-line {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.teacher-feedback-btn {
  margin-top: 10px;
  width: fit-content;
}

.teacher-sync-summary {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #dbe6e5;
  border-radius: 8px;
  background: #fbfdfc;
}

.teacher-sync-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.teacher-sync-summary-head strong {
  color: var(--ink);
  font-size: 14px;
}

.teacher-sync-summary-head span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.teacher-sync-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.teacher-sync-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.teacher-sync-metric span,
.teacher-sync-metric small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.teacher-sync-metric strong {
  color: var(--teal);
  font-size: 16px;
  line-height: 1.2;
}

.teacher-sync-metric.warning {
  border-color: #f0d8a6;
  background: #fffaf0;
}

.teacher-sync-metric.warning strong {
  color: #8a5e18;
}

.portal-hero {
  padding: 18px;
  border-radius: 8px;
  background: #15333a;
  color: #fff;
}

.portal-hero span,
.portal-hero small {
  display: block;
  color: #bdd2d4;
}

.portal-hero strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
}

.portal-hero small {
  margin-top: 6px;
}

.portal-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.portal-stats article,
.portal-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.portal-stats article {
  padding: 12px;
}

.portal-stats span,
.portal-section span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.portal-stats strong {
  display: block;
  margin-top: 6px;
  font-size: 20px;
}

.portal-tabbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.portal-tabbar button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.portal-tabbar button.selected {
  background: #dff0ed;
  color: var(--teal-dark);
  font-weight: 700;
}

.teacher-portal-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.teacher-payroll-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.teacher-payroll-totals article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf9;
}

.teacher-payroll-totals span,
.teacher-payroll-totals strong {
  display: block;
}

.teacher-payroll-totals span {
  color: var(--muted);
  font-size: 12px;
}

.teacher-payroll-totals strong {
  margin-top: 5px;
  color: var(--teal-dark);
  font-size: 20px;
}

.portal-risk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.portal-risk-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--leaf);
  border-radius: 8px;
  background: #fbfdfc;
}

.portal-risk-card.yellow {
  border-left-color: var(--gold);
  background: #fffaf0;
}

.portal-risk-card.red {
  border-left-color: var(--coral);
  background: #fff4f1;
}

.portal-risk-card span,
.portal-risk-card strong,
.portal-risk-card small {
  display: block;
}

.portal-risk-card span,
.portal-risk-card small {
  color: var(--muted);
  font-size: 12px;
}

.portal-risk-card strong {
  margin: 5px 0;
  font-size: 18px;
}

.portal-section {
  padding: 14px;
  margin-top: 12px;
}

.portal-section h2 {
  font-size: 16px;
  margin-bottom: 0;
}

.portal-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.portal-section-head span {
  text-align: right;
  line-height: 1.5;
}

.portal-match-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.portal-match-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.portal-match-form select {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 9px;
  background: var(--white);
  color: var(--ink);
}

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

.portal-teacher-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.portal-teacher-main {
  min-width: 0;
}

.portal-teacher-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.portal-teacher-head strong,
.portal-teacher-main p,
.portal-teacher-main small {
  display: block;
}

.portal-teacher-main p {
  margin: 4px 0;
  color: var(--muted);
  font-size: 12px;
}

.portal-teacher-resume {
  margin-bottom: 4px;
  line-height: 1.5;
}

.portal-teacher-main small {
  color: var(--teal-dark);
  line-height: 1.5;
}

.portal-account-grid,
.portal-payment-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.portal-account-grid div,
.portal-payment-card div {
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--line);
}

.portal-account-grid strong,
.portal-payment-card strong,
.portal-account-grid span,
.portal-payment-card span {
  display: block;
}

.portal-account-grid strong,
.portal-payment-card strong {
  margin-top: 5px;
  font-size: 15px;
}

.portal-lesson {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.portal-lesson:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.portal-lesson strong,
.portal-lesson small {
  display: block;
}

.portal-lesson small {
  color: var(--muted);
  margin-top: 4px;
}

.portal-lesson-card,
.portal-consumption-row {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.portal-lesson-card {
  grid-template-columns: 78px 1fr;
  align-items: center;
  padding: 10px;
  margin-top: 8px;
}

.portal-lesson-card.no-show,
.portal-consumption-row.no-show {
  border-color: #efc5bf;
  background: #fff7f5;
}

.portal-lesson-card.cancelled,
.portal-consumption-row.cancelled {
  border-color: #f0cf95;
  background: #fff8e8;
}

.portal-lesson-date {
  display: grid;
  place-items: center;
  min-height: 58px;
  border-radius: 8px;
  background: #edf4f3;
  color: var(--teal-dark);
}

.portal-lesson-date strong,
.portal-lesson-date span,
.portal-lesson-card strong,
.portal-lesson-card small,
.portal-consumption-row strong,
.portal-consumption-row span {
  display: block;
}

.portal-lesson-date span,
.portal-lesson-card small,
.portal-consumption-row span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.portal-consumption-row {
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px;
  margin-top: 8px;
}

.portal-consumption-row div:last-child {
  text-align: right;
}

.portal-note {
  color: var(--muted);
  line-height: 1.7;
}

.portal-interview-form {
  display: grid;
  gap: 10px;
}

.portal-interview-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.portal-interview-form select,
.portal-interview-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

.portal-interview-form select {
  height: 40px;
}

.portal-survey-status {
  display: grid;
  gap: 4px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf9;
}

.portal-survey-status span {
  color: var(--muted);
  font-size: 12px;
}

.portal-survey-status strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.portal-interview-result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.portal-interview-result div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.portal-interview-result strong,
.portal-interview-result span {
  display: block;
}

.portal-interview-result strong {
  margin-top: 4px;
  font-size: 13px;
}

.portal-interview-result p {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 980px) {
  body {
    width: 100%;
    overflow-x: hidden;
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    min-height: auto;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 12px;
  }
  .brand, .side-note { display: none; }
  .nav { display: flex; width: 100%; min-width: 0; overflow-x: auto; gap: 10px; }
  .nav-item { min-width: 108px; justify-content: center; min-height: 50px; font-size: 15px; }
  .shell, .topbar, .top-actions, .search, .view, .panel {
    min-width: 0;
    max-width: 100%;
  }
  .shell { width: 100%; padding: 18px; }
  .topbar { align-items: stretch; flex-direction: column; }
  .top-actions { width: 100%; }
  .search { width: 100%; }
  .metrics, .split, .card-grid, .finance-summary, .portal-layout, .teacher-layout, .schedule-workbench, .settings-grid, .payroll-detail-grid, .finance-data-toolbar, .finance-data-grid, .hq-campus-grid, .care-item, .operating-focus-grid { grid-template-columns: 1fr; }
  .student-archive-profile, .student-archive-grid { grid-template-columns: 1fr; }
  .student-import-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .management-review-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-form .schedule-student-field,
  .schedule-form .schedule-hint { grid-column: 1 / -1; }
  .analytics-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-summary div:nth-child(2) { border-right: 0; }
  .analytics-summary div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .portal-screen { justify-content: stretch; }
  .teacher-screen { justify-content: stretch; }
  .phone-frame { width: 100%; min-height: auto; box-shadow: none; }
  .teacher-phone { width: 100%; min-height: auto; box-shadow: none; }
  .lesson-card { grid-template-columns: 70px 1fr; }
  .lesson-card .status { grid-column: 2; width: fit-content; }
}

@media (max-width: 560px) {
  .top-actions, .toolbar, .dialog-actions { flex-wrap: wrap; }
  .primary, .secondary, .warning { flex: 1 1 auto; }
  .form-grid, .settings-form, .schedule-form { grid-template-columns: 1fr; }
  .teacher-grade-group { grid-template-columns: 1fr; }
  .student-profile-summary span { align-items: flex-start; flex-direction: column; gap: 4px; }
  .student-subnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .student-subnav button { width: 100%; }
  .student-archive-toolbar, .student-archive-head, .student-archive-assessment-head { align-items: stretch; flex-direction: column; }
  .student-archive-toolbar label { min-width: 0; width: 100%; }
  .student-archive-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-import-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-import-summary,
  .student-import-result { grid-template-columns: 1fr; }
  .student-import-result strong,
  .student-import-result small { grid-column: auto; }
  .student-import-history-row,
  .student-import-history-actions { align-items: stretch; flex-direction: column; }
  .inline-fields, .timeline-row { grid-template-columns: 1fr; }
  .teacher-stats { grid-template-columns: 1fr; }
  .analytics-summary { grid-template-columns: 1fr; }
  .data-summary-grid { grid-template-columns: 1fr; }
  .care-summary { grid-template-columns: 1fr; }
  .management-review-summary { grid-template-columns: 1fr; }
  .pending-deduction-summary { grid-template-columns: 1fr; }
  .pending-deduction-row { align-items: stretch; flex-direction: column; }
  .analytics-summary div,
  .analytics-summary div:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .analytics-summary div:last-child { border-bottom: 0; }
  .analytics-detail { grid-template-columns: 1fr; }
  .compact-filter { grid-template-columns: 1fr; width: 100%; }
  .timeline-card { align-items: flex-start; flex-direction: column; }
  .settings-row { align-items: stretch; flex-direction: column; }
  .export-actions { justify-content: stretch; }
  .export-actions button,
  .finance-data-toolbar button { width: 100%; }
  .student-priority-grid,
  .student-process-metric-grid,
  .student-package-row,
  .schedule-student-packages,
  .transfer-preview,
  .portal-account-grid,
  .portal-payment-card,
  .portal-interview-result,
  .portal-risk-grid,
  .portal-lesson-card,
  .portal-consumption-row { grid-template-columns: 1fr; }
  .teacher-schedule-head { flex-direction: column; }
  .teacher-day-count {
    min-width: 0;
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .teacher-lesson-card { grid-template-columns: 1fr; }
  .portal-section-head { align-items: stretch; flex-direction: column; }
  .portal-section-head span,
  .portal-consumption-row div:last-child { text-align: left; }
}

@media print {
  body.printing-receipt * {
    visibility: hidden;
  }

  body.printing-receipt #paymentReceiptContent,
  body.printing-receipt #paymentReceiptContent * {
    visibility: visible;
  }

  body.printing-receipt #paymentReceiptContent {
    position: fixed;
    inset: 0;
    padding: 0;
    background: #fff;
  }

  body.printing-receipt .receipt-paper {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.printing-receipt .receipt-paper + .receipt-paper {
    break-before: page;
    page-break-before: always;
  }
}