* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}
/* ??????? UA ? [hidden]??????? */
[hidden] {
  display: none !important;
}
/* ????????????????????? */
html[data-boot="session"] #login-view {
  display: none !important;
}
html[data-boot="session"] #main-view {
  display: grid !important;
}
html[data-boot="login"] #main-view {
  display: none !important;
}
.boot-placeholder {
  margin: 24px 0;
  font-size: 0.9rem;
}
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-panel {
  width: min(420px, 100%);
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.brand {
  margin: 0 0 8px;
  font-size: 1.55rem;
  letter-spacing: 0.02em;
}
.login-sub { margin: 0 0 24px; color: var(--text-muted); }
.login-panel label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.login-panel input, .theme-select {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  border-radius: 8px;
  font: inherit;
}
.captcha-row { display: flex; gap: 12px; align-items: end; margin-bottom: 14px; }
.captcha-row .grow { flex: 1; }
#captcha-img {
  width: 120px; height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface2);
}
.btn-primary, .btn-ghost {
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
  font: inherit;
  cursor: pointer;
}
.btn-primary {
  width: 100%;
  background: var(--primary);
  color: var(--btn-text);
  margin-top: 8px;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.error-text { color: var(--danger); margin-top: 12px; font-size: 0.9rem; }
.login-tenant {
  margin: -4px 0 16px;
  font-size: 0.9rem;
  color: var(--text-muted);
  word-break: break-all;
}
.login-gate {
  margin: 8px 0 4px;
  padding: 20px 18px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-align: left;
}
html[data-login-gate="1"] #login-form,
html[data-login-gate="checking"] #login-form,
html[data-login-gate="invalid"] #login-form {
  display: none !important;
}
html[data-login-gate="1"] #login-gate,
html[data-login-gate="invalid"] #login-gate {
  display: block !important;
}
html[data-login-gate="checking"] #login-gate {
  display: none !important;
}
.login-gate-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 650;
  color: var(--text, #0f172a);
}
.login-gate-desc {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.login-gate-example {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(11, 114, 133, 0.2);
  font-size: 0.85rem;
  color: #0b7285;
  word-break: break-all;
}
.login-panel .input,
.login-panel select {
  width: 100%;
  margin-top: 6px;
}
.tenant-chip {
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.35;
  word-break: break-all;
}
.tenant-switch-wrap {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
}
.tenant-switch-wrap .input {
  width: 100%;
  font-size: 0.8rem;
}

/* ?? ?? / ???? ?? */
.main-app {
  display: grid;
  grid-template-columns: 272px 1fr;
  min-height: 100dvh;
  height: 100dvh;
}
.sidebar {
  display: flex;
  flex-direction: column;
  width: 272px;
  min-width: 272px;
  height: 100dvh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
}
.sidebar-brand {
  flex-shrink: 0;
  padding: 18px 16px 12px;
}
.sidebar-brand-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
}
.tenant-chip {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  word-break: break-all;
  line-height: 1.35;
}
#nav-menu,
.nav-menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
}
.sidebar-theme {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 0.75rem 1rem 0.85rem;
}
.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 12px 12px 14px;
  display: grid;
  gap: 10px;
  background: color-mix(in srgb, var(--surface2) 35%, var(--surface));
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--btn-text);
  background: color-mix(in srgb, var(--primary) 85%, var(--primary-deep));
}
.sidebar-user-meta { min-width: 0; }
.sidebar-user-meta .user-chip {
  font-size: 0.88rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-meta .user-role {
  font-size: 0.75rem;
  margin-top: 2px;
}
.sidebar-footer-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.btn-footer {
  width: 100%;
  padding: 8px 6px;
  font-size: 0.78rem;
}

/* ?? ??? / ?? ?? */
.nav-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.9;
}
.nav-icon svg { display: block; }
.nav-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-item:hover {
  color: var(--primary-hover);
  background: color-mix(in srgb, var(--surface2) 55%, transparent);
}
.nav-item.active {
  color: var(--primary-hover);
  font-weight: 600;
  background: var(--sidebar-accent);
}
.nav-item .nav-label { min-width: 0; flex: 1; }
.nav-item .nav-count {
  flex-shrink: 0;
  min-width: 1.25rem;
  padding: 0 6px;
  margin-left: auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #2a6f6a) 18%, transparent);
  color: var(--primary-hover, #1f5652);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav-item .nav-count.is-zero {
  background: color-mix(in srgb, var(--surface2, #e8eceb) 80%, transparent);
  color: var(--muted, #6b7a78);
  font-weight: 500;
}
.nav-item.active .nav-count:not(.is-zero) {
  background: color-mix(in srgb, var(--primary-hover, #1f5652) 22%, transparent);
}

.nav-group { margin: 2px 0; }
.nav-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface2) 42%, var(--surface));
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-group-head:hover,
.nav-group.is-expanded > .nav-group-head {
  background: color-mix(in srgb, var(--surface2) 72%, var(--surface));
  color: var(--text);
}
.nav-group-title-text { flex: 1; min-width: 0; }
.nav-group-chevron {
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}
.nav-group.is-expanded > .nav-group-head .nav-group-chevron {
  transform: rotate(45deg);
}

.nav-group-body,
.nav-subgroup-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0.35;
  transition:
    grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}
.nav-group.is-expanded > .nav-group-body,
.nav-subgroup.is-expanded > .nav-subgroup-body,
.nav-subgroup.has-active-child > .nav-subgroup-body {
  grid-template-rows: 1fr;
  opacity: 1;
}
.nav-group-body-inner,
.nav-subgroup-body-inner {
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 2px 2px;
}
.nav-group.is-expanded > .nav-group-body > .nav-group-body-inner {
  margin: 4px 0 2px;
  padding: 4px 2px 4px 4px;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
}

.nav-item.nav-subitem {
  font-size: 0.86rem;
  padding: 8px 10px 8px 12px;
  background: color-mix(in srgb, var(--surface2) 22%, transparent);
  color: color-mix(in srgb, var(--text) 88%, var(--text-muted));
}
.nav-item.nav-subitem:hover {
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  color: var(--primary-hover);
}
.nav-item.nav-subitem.active {
  background: transparent;
  color: var(--primary-hover);
  font-weight: 600;
}

.nav-subgroup { margin: 2px 0 2px 4px; }
.nav-subgroup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.nav-subgroup-head:hover,
.nav-subgroup.is-expanded > .nav-subgroup-head,
.nav-subgroup.has-active-child > .nav-subgroup-head {
  color: var(--text);
  background: color-mix(in srgb, var(--surface2) 50%, transparent);
}
.nav-subgroup.has-active-child > .nav-subgroup-head {
  box-shadow: inset 2px 0 0 var(--primary);
}
.nav-subgroup-body-inner {
  margin-left: 6px;
  padding-left: 8px;
  border-left: 2px solid color-mix(in srgb, var(--primary) 55%, var(--border));
}
.nav-item.nav-subitem-l3 {
  font-size: 0.82rem;
  padding: 7px 10px;
}

/* ????? */
.nav-subitem-lens {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 0;
  height: 36px;
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translateY(0);
  background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, #fff 22%, transparent), transparent 55%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--sidebar-accent) 100%, transparent),
      color-mix(in srgb, var(--primary) 16%, transparent)
    );
  box-shadow:
    0 6px 14px color-mix(in srgb, var(--primary) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--primary) 12%, transparent);
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
  will-change: transform, height;
}
.nav-subitem-lens.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .nav-group-body,
  .nav-subgroup-body,
  .nav-group-chevron,
  .nav-subitem-lens,
  .nav-item {
    transition: none !important;
  }
}

/* ?1024????? */
@media (max-width: 1024px) {
  .main-app { grid-template-columns: 72px 1fr; }
  .sidebar { width: 72px; min-width: 72px; }
  .sidebar-brand-title,
  .tenant-chip,
  .nav-label,
  .nav-count,
  .nav-group-title-text,
  .nav-group-chevron,
  .sidebar-theme,
  .sidebar-user-meta,
  .nav-subgroup-head {
    display: none !important;
  }
  .sidebar-brand { padding: 14px 8px 8px; }
  .sidebar-avatar { margin: 0 auto; }
  .sidebar-user { justify-content: center; }
  .sidebar-footer-actions { grid-template-columns: 1fr; }
  .btn-footer {
    font-size: 0;
    padding: 10px 0;
  }
  .btn-footer::before {
    font-size: 0.75rem;
    color: var(--text-muted);
  }
  #btn-devices.btn-footer::before { content: '??'; font-size: 0.7rem; }
  #btn-change-password.btn-footer::before { content: '??'; font-size: 0.7rem; }
  #btn-logout.btn-footer::before { content: '??'; font-size: 0.7rem; }
  .nav-item,
  .nav-group-head {
    justify-content: center;
    padding: 10px 8px;
  }
  .nav-group-body,
  .nav-subgroup-body {
    /* ????????? */
  }
  .nav-item.nav-subitem { justify-content: center; padding: 8px; }
  .nav-subgroup-body-inner { margin-left: 0; padding-left: 0; border-left: 0; }
}

html[data-mp-embed] .sidebar,
html[data-mp-embed] .sidebar-theme,
html[data-mp-embed] .sidebar-footer {
  display: none !important;
}
html[data-mp-embed] .main-app {
  grid-template-columns: 1fr;
}

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.user-chip { color: var(--text-muted); font-size: 0.9rem; }
.page-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px 28px 40px;
  background: var(--bg);
}
.master-page[data-page="catalog"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.master-page[data-page="catalog"].is-semester-fill {
  flex: 1;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.master-page[data-page="catalog"].is-semester-fill > .toolbar,
.master-page[data-page="catalog"].is-semester-fill > .catalog-tabs {
  flex-shrink: 0;
}
.page-content:has(.is-semester-fill) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 16px;
}
.master-page[data-page="catalog"] .catalog-panel-semester:not([hidden]) {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.card-plain {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.muted { color: var(--text-muted); }
.stat-row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 16px; }
.stat-row strong { display: block; font-size: 1.6rem; color: var(--primary); }

/* ?? ??? ?? */
.dash-page {
  max-width: 1080px;
  animation: dash-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dash-page.dash-split {
  max-width: none;
  height: calc(100vh - 88px);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.dash-split .dash-top {
  flex: 4 1 0;
  min-height: 0;
  overflow: auto;
  padding-bottom: 8px;
}
.dash-split .dash-bottom {
  flex: 6 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  padding-top: 12px;
}
.dash-serve-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 10px;
  flex: 0 0 auto;
}
.dash-serve-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.dash-serve-qty {
  margin-left: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted, #6b7a78);
}
.dash-serve-table-wrap {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.dash-serve-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}
.dash-serve-table-wrap > .list-pager {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface2, var(--surface));
}
.dash-serve-table {
  width: 100%;
  margin: 0;
}
.dash-serve-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface2, var(--surface));
}
.dash-serve-table th,
.dash-serve-table td {
  white-space: nowrap;
}
@keyframes dash-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.dash-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 8px 4px 28px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  margin-bottom: 28px;
  background: transparent;
  border-radius: var(--radius);
}
.dash-hero-main {
  min-width: 0;
  flex: 1 1 auto;
}
.dash-stats-from {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  margin: 0;
}
.dash-stats-from-label {
  font-size: 0.78rem;
  color: var(--text-muted, #6b7a78);
  white-space: nowrap;
}
.dash-stats-from-input {
  width: auto;
  min-width: 9.5rem;
  max-width: 12rem;
  padding: 6px 10px;
  font-size: 0.9rem;
}
@media (max-width: 640px) {
  .dash-hero {
    flex-direction: column;
  }
  .dash-stats-from {
    align-items: flex-start;
  }
}
.dash-kicker {
  margin: 0 0 8px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.dash-title {
  margin: 0 0 10px;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}
.dash-lead {
  margin: 0;
  max-width: 36em;
  font-size: 0.95rem;
  line-height: 1.55;
}
.dash-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.dash-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 132px;
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--surface2) 55%, var(--surface)) 0%,
      var(--surface) 55%
    );
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s ease,
    box-shadow 0.22s ease,
    background 0.2s ease;
}
.dash-metric:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--primary) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
.dash-metric:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.dash-metric:active {
  transform: translateY(0);
}
.dash-metric-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.dash-metric-value {
  display: block;
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--primary-hover);
  letter-spacing: -0.02em;
  word-break: break-word;
}
.dash-metric.is-alert {
  border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--danger, #ef4444) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--danger, #ef4444) 14%, var(--surface2)) 0%,
      var(--surface) 60%
    );
}
.dash-metric-value.is-alert {
  color: var(--danger, #ef4444);
}
.dash-metric-hint {
  margin-top: auto;
  font-size: 0.75rem;
  opacity: 0.85;
}
.dash-page:not(.is-ready) .dash-metric-value {
  opacity: 0.45;
}
@media (max-width: 1400px) {
  .dash-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dash-metrics { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-page,
  .dash-metric,
  .cashier-page { animation: none; transition: none; }
  .dash-metric:hover { transform: none; }
}

/* ?? ????? ?? */
.cashier-page {
  max-width: none;
  width: 100%;
  animation: dash-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cashier-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 4px 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: transparent;
  border-radius: var(--radius);
}
.cashier-hero-text { min-width: 0; flex: 1; }
.cashier-hero-actions { flex-shrink: 0; }
.cashier-metrics {
  margin-bottom: 18px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cashier-metrics .dash-metric {
  min-height: 124px;
  padding: 16px 14px 14px;
}
.cashier-metrics .dash-metric-value {
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
}
@media (max-width: 1200px) {
  .cashier-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cashier-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .cashier-metrics { grid-template-columns: 1fr; }
}
.dash-metric.is-static {
  cursor: default;
}
.dash-metric.is-static:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}
.cashier-page:not(.is-ready) .dash-metric-value { opacity: 0.45; }

.cashier-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 22px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 40%, var(--surface));
}
.cashier-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}
.cashier-pill.is-ok {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
}
.cashier-pill.is-warn {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
}
.cashier-pill.is-muted {
  color: var(--text-muted);
}
.cashier-status-note {
  font-size: 0.8rem;
  flex: 1;
  min-width: 12rem;
}

.cashier-panel {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.cashier-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 35%, var(--surface));
}
.cashier-panel-head h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text);
}
.cashier-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cashier-panel-head-actions .input-sm {
  min-width: 8.5rem;
}
.cashier-pager,
.list-pager {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 22%, var(--surface));
}
.list-pager-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.list-pager-btn {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--text-muted));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface2) 55%, #ffffff) 0%,
      var(--surface2) 48%,
      color-mix(in srgb, var(--surface2) 88%, #000000) 100%
    );
  color: var(--text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent),
    0 1px 2px color-mix(in srgb, #000000 28%, transparent);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.12s ease, opacity 0.15s ease;
}
.list-pager-btn:hover:not(:disabled) {
  color: var(--primary-hover);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.list-pager-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px color-mix(in srgb, #000000 25%, transparent);
}
.list-pager-btn:disabled {
  opacity: 0.38;
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}
.list-pager-btn svg {
  display: block;
  flex-shrink: 0;
}
.list-pager-input {
  box-sizing: border-box;
  width: 42px;
  height: 30px;
  margin: 0;
  padding: 0 4px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 82%, var(--text-muted));
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.list-pager-input::-webkit-outer-spin-button,
.list-pager-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.list-pager-input:focus {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}
.list-pager-pages,
.list-pager-total {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.list-pager-total {
  margin-left: auto;
}
.cashier-pager .btn-ghost[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.cashier-table .amount-in { color: color-mix(in srgb, #22c55e 75%, var(--text)); font-weight: 600; }
.cashier-table .amount-out { color: color-mix(in srgb, #f97316 80%, var(--text)); font-weight: 600; }
.cashier-table {
  border-top: 0;
  margin: 0;
}
.cashier-table .data-table th {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  background: transparent;
}
.cashier-table .data-table td.mono,
.cashier-table .data-table .mono {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
  font-size: 0.86rem;
}
.cashier-empty {
  padding: 28px 10px !important;
  text-align: center;
}
.pay-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.pay-badge.is-ok {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}
.pay-badge.is-warn {
  color: color-mix(in srgb, var(--warning) 80%, var(--text));
  background: color-mix(in srgb, var(--warning) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}
.pay-badge.is-info {
  color: var(--primary-hover);
  background: var(--sidebar-accent);
  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
}
.pay-badge.is-muted {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface2) 70%, var(--surface));
  border-color: var(--border);
}

/* 成员审批：申请角色高亮（跟随主题色） */
.member-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary-hover);
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--primary) 12%, transparent);
}
.member-remark-cell {
  max-width: 220px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--primary-hover);
  font-weight: 500;
}
.cashier-sim-panel .cashier-sim-out {
  margin: 0;
  border: 0;
  border-radius: 0;
  max-height: 360px;
  background: color-mix(in srgb, var(--surface2) 55%, var(--surface));
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}
.cashier-sim-out.has-result {
  color: var(--text);
}

.cell-center { text-align: center; }

/* 钱包退款：等待微信回调遮罩 */
.wallet-refund-wait-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg, #0f1115) 52%, transparent);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}
.wallet-refund-wait-card {
  min-width: min(280px, 92vw);
  max-width: 360px;
  padding: 28px 24px 24px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border, #333) 80%, transparent);
  background: color-mix(in srgb, var(--surface, #1a1d24) 92%, transparent);
  box-shadow: 0 16px 40px color-mix(in srgb, #000 28%, transparent);
}
.wallet-refund-wait-card .app-loading-spinner {
  margin: 0 auto 14px;
}
.wallet-refund-wait-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #eee);
  margin-bottom: 8px;
}
.wallet-refund-wait-count {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--primary, #3b82f6);
  margin: 4px 0 10px;
}
.wallet-refund-wait-hint {
  font-size: 0.875rem;
  color: var(--text-muted, #99a);
}

/* ?? ??????????? ?? */
.settings-page {
  width: 100%;
  max-width: none;
  animation: dash-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.settings-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 4px 22px;
  margin-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: transparent;
  border-radius: var(--radius);
}
.settings-hero-text { min-width: 0; flex: 1; }
.logs-page .master-hint { margin: -4px 0 14px; }
.logs-tabs {
  width: 100%;
  max-width: none;
  margin-bottom: 12px;
  box-sizing: border-box;
}
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface2) 45%, var(--surface));
  border: 1px solid var(--border);
}
.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.settings-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.settings-tab.is-active {
  color: var(--primary-hover);
  background: var(--surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 80%, transparent);
}
.settings-tab-count {
  min-width: 1.25rem;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface2) 80%, transparent);
}
.settings-tab.is-active .settings-tab-count {
  color: var(--primary-hover);
  background: var(--sidebar-accent);
}
.settings-panels {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  min-height: 240px;
}
.settings-panel-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px 0;
}
.settings-panel-body {
  display: grid;
  gap: 14px;
  padding: 18px 18px 22px;
}
.settings-panel-body--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 16px;
}
@media (max-width: 900px) {
  .settings-panel-body--cols-2 {
    grid-template-columns: 1fr;
  }
}
.settings-item {
  display: grid;
  gap: 8px;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
  min-width: 0;
}
.settings-item--full {
  grid-column: 1 / -1;
}
.settings-item-label {
  display: grid;
  gap: 4px;
  font-weight: 600;
  color: var(--text);
}
.settings-panel-body--cols-2 .settings-item:not(.settings-item--textarea):not(.settings-item--staff-select):not(.settings-item--sensitive) .settings-item-label {
  /* 双列时预留一行说明高度，避免有/无 hint 导致输入框上下错位 */
  min-height: 2.6rem;
}
.settings-item-label small {
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.4;
}
.settings-sensitive-tip {
  display: block;
  width: 100%;
  max-width: 520px; /* ? .settings-item .input / textarea ?? */
  margin-top: 6px;
  padding: 4px 10px;
  box-sizing: border-box;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  color: #2f9e44;
  border: 1px solid #2f9e44;
  border-radius: 6px;
  background: color-mix(in srgb, #2f9e44 10%, transparent);
  word-break: break-word;
}
.settings-sensitive-tip--empty {
  color: var(--text-muted);
  border-color: color-mix(in srgb, var(--border) 80%, var(--text-muted));
  background: color-mix(in srgb, var(--surface2) 80%, transparent);
  font-weight: 400;
}
.settings-secret-wrap {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  width: 100%;
  max-width: 520px; /* ???+????????????? */
}
.settings-secret-wrap--textarea {
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  width: 100%;
  max-width: 520px;
  overflow: hidden;
}
.settings-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 120px;
  height: 38px;
  min-height: 38px;
  max-height: 80vh;
  box-sizing: border-box;
  resize: both;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.25;
  white-space: pre;
}
.settings-item--textarea .settings-secret-wrap--textarea,
.settings-item--textarea .settings-textarea.input {
  width: 100%;
  max-width: 520px;
}
.settings-item--sensitive .settings-item-label {
  max-width: 520px; /* ????????????????? */
}
.settings-secret-wrap--textarea .settings-textarea {
  resize: both;
}
.settings-secret-wrap .settings-input-sensitive {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-text-security: disc;
  letter-spacing: 0.06em;
}
.settings-secret-wrap--textarea .settings-input-sensitive {
  -webkit-text-security: none;
  letter-spacing: 0;
}
.settings-secret-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 3.2rem;
}
.settings-item--sensitive .settings-input-sensitive::placeholder {
  letter-spacing: 0;
  -webkit-text-security: none;
}
.settings-test-hint {
  font-size: 0.85rem;
  line-height: 1.4;
}
.settings-test-hint.is-ok { color: #2f9e44; }
.settings-test-hint.is-fail { color: #e03131; }
.settings-item .input {
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
}
.settings-item input.input:not([type="checkbox"]):not([type="radio"]),
.settings-item select.input {
  align-self: start;
  min-height: 38px;
  height: 38px;
  padding: 7px 10px;
  line-height: 1.25;
}
.settings-item input[type="number"].input {
  -moz-appearance: textfield;
  appearance: textfield;
}
.settings-item input[type="number"].input::-webkit-outer-spin-button,
.settings-item input[type="number"].input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.settings-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.settings-checkbox-wrap input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}
@media (max-width: 720px) {
  .settings-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .settings-tab { flex-shrink: 0; }
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.toolbar h3 { margin: 0; }
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  border-radius: 8px;
  font: inherit;
}
.btn-sm { width: auto; padding: 8px 12px; margin: 0; }
.table-wrap { overflow: auto; border-top: 1px solid var(--border); }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.data-table th, .data-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.data-table th.th-sortable {
  vertical-align: middle;
}
.data-table .th-label {
  margin-right: 4px;
}
.data-table .th-sort {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  line-height: 1;
  gap: 0;
}
.data-table .th-sort-btn {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.55rem;
  line-height: 0.85;
  cursor: pointer;
  opacity: 0.45;
}
.data-table .th-sort-btn:hover {
  opacity: 0.9;
  color: var(--primary);
}
.data-table .th-sort-btn.is-active {
  opacity: 1;
  color: var(--primary);
}
.data-table tbody tr:hover { background: var(--row-hover); }

/* ??????????? */
.catalog-dialog { max-width: 440px; width: calc(100% - 32px); }
.catalog-dialog-wide { max-width: 640px; }
.catalog-dialog-lead { margin: 0 0 8px; font-size: 0.85rem; line-height: 1.45; }
.semester-plan-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.semester-plan-label {
  font-size: 0.9rem;
  color: #334155;
  font-weight: 600;
}
.semester-plan-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #f8fafc;
}
.semester-plan-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.9rem;
  color: #0f172a;
  cursor: pointer;
}
.semester-plan-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}
.catalog-section { margin-top: 22px; }
.catalog-section-title {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 650;
}
.catalog-section-desc {
  margin: 0 0 12px;
  font-size: 0.84rem;
  line-height: 1.45;
}
.catalog-tabs { margin: 8px 0 16px; }
.catalog-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.catalog-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.week-plan-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.week-plan-empty {
  margin: 12px 0;
  padding: 20px;
  text-align: center;
}
.week-plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  color: var(--text);
}
.week-plan-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  margin: 0;
  border: 0;
  background: color-mix(in srgb, var(--surface2, var(--surface)) 70%, var(--surface));
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
}
.week-plan-head:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.week-plan-chevron {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.week-plan-card.is-open .week-plan-chevron {
  transform: rotate(90deg);
}
.week-plan-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text);
}
.week-plan-count {
  flex-shrink: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.week-plan-body {
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.week-plan-body .table-wrap {
  margin: 0;
  border-top: 0;
}
.week-plan-table {
  margin: 0;
}
.week-plan-table th {
  color: var(--text-muted);
  font-weight: 600;
  background: color-mix(in srgb, var(--surface2, var(--surface)) 55%, var(--surface));
}
.week-plan-table td {
  color: var(--text);
  vertical-align: middle;
}
.week-plan-table tbody tr:last-child th,
.week-plan-table tbody tr:last-child td {
  border-bottom: 0;
}
.week-plan-col-thumb {
  width: 64px;
}
.week-plan-ops {
  white-space: nowrap;
}
.week-plan-ops .link {
  margin-right: 8px;
}
.week-plan-ops .link:last-child {
  margin-right: 0;
}
.delivery-dish-summary {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface2) 55%, var(--surface));
  border: 1px solid var(--border);
  line-height: 1.55;
}
.delivery-detail-row > td {
  padding: 0 12px 14px;
  background: color-mix(in srgb, var(--surface2) 40%, var(--surface));
  border-bottom: 1px solid var(--border);
}
.delivery-detail-box {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--surface);
}
.delivery-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  margin-bottom: 10px;
}
.delivery-detail-table-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
}
.delivery-detail-table {
  margin: 0;
  font-size: 0.88rem;
}
.delivery-detail-table th,
.delivery-detail-table td {
  padding: 8px 10px;
}
.delivery-charge-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.delivery-charge-pill.is-ok {
  color: #087f5b;
  background: color-mix(in srgb, #087f5b 12%, transparent);
}
.delivery-charge-pill.is-fail {
  color: #c92a2a;
  background: color-mix(in srgb, #c92a2a 12%, transparent);
}
.delivery-charge-pill.is-warn {
  color: #e67700;
  background: color-mix(in srgb, #e67700 12%, transparent);
}
.delivery-charge-pill.is-muted {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface2) 80%, transparent);
}
.semester-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 16px;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  align-items: stretch;
  overflow: hidden;
}
.catalog-panel-semester {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.catalog-panel-semester .catalog-panel-head {
  flex-shrink: 0;
}
.semester-list-card,
.semester-detail-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.semester-card-list {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 2px;
}
.semester-tab-card {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, var(--primary) 4%);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}
.semester-tab-card:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.semester-tab-card.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  box-shadow: inset 3px 0 0 var(--primary);
}
.semester-tab-card.is-disabled {
  opacity: 0.72;
  background: color-mix(in srgb, var(--surface) 92%, #888 8%);
}
.semester-tab-card.is-disabled.is-active {
  opacity: 0.9;
}
.semester-tab-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.semester-tab-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text);
}
.semester-tab-total {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}
.semester-tab-meta,
.semester-tab-dates {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.semester-tab-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.semester-tab-ops {
  display: flex;
  gap: 12px;
  margin-top: 2px;
}
.semester-meta {
  margin: 10px 0 0;
  flex-shrink: 0;
}
.semester-empty {
  margin: 8px 4px;
}
.semester-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: baseline;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.semester-summary strong { font-size: 1.05rem; margin-right: 4px; }
.weekday-price-row {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  flex-shrink: 0;
}
.semester-detail-card .semester-days-wrap {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
}
.data-table tr.is-muted-row td { color: var(--text-muted); opacity: 0.85; }
@media (max-width: 900px) {
  .semester-layout {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .semester-list-card {
    max-height: 36vh;
    height: auto;
  }
  .semester-detail-card {
    min-height: 42vh;
    height: auto;
    flex: 1;
  }
}
.meal-photo-field, .meal-dish-pick { display: grid; gap: 8px; margin-top: 4px; }
.meal-photo-label { font-size: 0.85rem; color: var(--text-muted); }
.meal-photo-preview {
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 200px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--surface, #111) 90%, var(--primary) 10%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
/* 有图时铺满预览框并居中（避免懒加载包裹层高度塌缩导致贴左上） */
.meal-photo-preview.has-image > img,
.meal-photo-preview.has-image > .gm-lazy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
}
.meal-drop-zone {
  cursor: copy;
}
.meal-drop-zone.is-dragover {
  border-color: var(--primary);
  border-style: solid;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.meal-drop-hint {
  display: grid;
  gap: 6px;
  place-items: center;
  text-align: center;
  padding: 12px;
  pointer-events: none;
}
.meal-drop-hint strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text, inherit);
}
.meal-photo-preview img,
.meal-photo-preview .gm-lazy-target {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  pointer-events: none;
}
.meal-photo-preview.has-image.is-dragover::after {
  content: '???????';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 55%, transparent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  pointer-events: none;
}
.meal-photo-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.meal-upload-btn { display: inline-flex; cursor: pointer; margin: 0; width: auto; }
.meal-dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-height: 280px;
  overflow: auto;
  padding: 2px;
}
.meal-dish-card {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.meal-dish-card:hover { border-color: var(--primary); }
.meal-dish-card.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.meal-dish-card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.meal-dish-card-img.gm-lazy {
  display: block;
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface, #111) 88%, #666 12%);
}
.meal-dish-card-img.gm-lazy .gm-lazy-target {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}
.meal-dish-card-placeholder {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface, #111) 85%, #666 15%);
  color: var(--text-muted);
  font-size: 0.75rem;
}
.meal-dish-card-name {
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meal-dish-card-price { font-size: 0.8rem; color: var(--text-muted); }
.meal-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.meal-thumb.gm-lazy {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  background: color-mix(in srgb, var(--surface, #111) 88%, #666 12%);
}
.meal-thumb.gm-lazy .gm-lazy-target {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
}
.meal-thumb-empty {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface, #111) 85%, #666 15%);
  color: var(--text-muted);
  font-size: 0.7rem;
}

.link {
  background: none;
  border: 0;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  padding: 0 4px;
}
.link.danger { color: var(--danger); }
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface);
  white-space: nowrap;
}
.status-pill.is-warn {
  color: var(--warning, #b45309);
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 40%, var(--border));
  background: color-mix(in srgb, var(--warning, #f59e0b) 12%, var(--surface));
}
tr.is-pending-row td {
  background: color-mix(in srgb, var(--warning, #f59e0b) 6%, var(--surface));
}
/* ?? iOS ????????????????? ?? */
.edit-dialog,
.catalog-dialog {
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: #f2f3f5;
  color: #1c1c1e;
  width: min(560px, 94vw);
  max-height: min(90vh, 840px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.edit-dialog::backdrop,
.catalog-dialog::backdrop {
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
}
.edit-dialog.catalog-dialog-wide,
.catalog-dialog-wide {
  width: min(720px, 96vw);
}
.edit-form {
  display: grid;
  gap: 0;
  padding: 0;
  background: #f2f3f5;
}
.edit-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 10px;
}
.edit-form h4,
.edit-form-head h4 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1c1c1e;
}
.dialog-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #d1d1d6;
  color: #3a3a3c;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
}
.dialog-close:hover { background: #c7c7cc; }
.edit-form-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  padding: 8px 20px 8px;
  max-height: min(62vh, 560px);
  overflow: auto;
}
.edit-form-body.edit-form-body-single,
.edit-form-body-single {
  grid-template-columns: 1fr;
}
.edit-form-body .field-full,
.edit-form-body .span-2,
.edit-form-body .catalog-dialog-lead,
.edit-form-body .meal-photo-field,
.edit-form-body .meal-dish-pick {
  grid-column: 1 / -1;
}
.catalog-dialog-lead {
  margin: 0;
  font-size: 0.85rem;
  color: #8e8e93;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .edit-form-body { grid-template-columns: 1fr; }
}
.edit-form label {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #636366;
  margin: 0;
}
.edit-form .field-hint {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #8e8e93;
  opacity: 1;
}
.edit-form .input,
.edit-form input:not([type="checkbox"]):not([type="radio"]),
.edit-form select,
.edit-form textarea {
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: #e5e5ea;
  color: #1c1c1e;
  font: inherit;
  box-sizing: border-box;
}
.edit-form .input:focus,
.edit-form input:focus,
.edit-form select:focus,
.edit-form textarea:focus {
  outline: 2px solid color-mix(in srgb, #007aff 55%, transparent);
  outline-offset: 1px;
  background: #ebebf0;
}
.master-hint {
  margin: 0 0 12px;
  font-size: 0.85rem;
}
.edit-form label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-template-columns: none;
}
.dialog-actions {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 16px 20px 20px;
  align-items: center;
  justify-content: flex-end;
  background: #f2f3f5;
}
.dialog-actions .btn-primary,
.dialog-actions .btn-ghost,
.dialog-actions .btn-sm {
  width: auto;
  margin-top: 0;
  flex: 0 0 auto;
  min-width: 88px;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
}
.dialog-actions .btn-ghost,
.dialog-actions [data-role="cancel"] {
  background: #fff;
  color: #1c1c1e;
  border: 1px solid #c7c7cc;
}
.dialog-actions .btn-primary {
  background: linear-gradient(180deg, #3d9bff 0%, #007aff 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
.edit-form .error-text {
  margin: 0 20px 16px;
}
.settings-group { margin: 20px 0; padding-top: 8px; border-top: 1px solid var(--border); }
.settings-group h4 { margin: 0 0 12px; }
/* ?? ???? ?? */
.perm-page {
  max-width: 960px;
  animation: dash-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.perm-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 4px 20px;
  margin-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: transparent;
  border-radius: var(--radius);
}
.perm-hero-text { min-width: 0; flex: 1; }
.perm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.perm-app {
  margin: 0 0 12px;
  font-size: 0.82rem;
}
.perm-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 45%, var(--surface));
}
.perm-role-btn {
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  padding: 8px 14px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.perm-role-btn:hover { color: var(--text); }
.perm-role-btn.is-active {
  color: var(--primary-hover);
  background: var(--surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 80%, transparent);
}
.perm-section {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.perm-section-title {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 40%, var(--surface));
}
.perm-block {
  padding: 12px 16px 14px;
}
.perm-block + .perm-block {
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.perm-block-label {
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.perm-check-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 12px;
}
.perm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 28%, var(--surface));
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.perm-check:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--sidebar-accent) 55%, var(--surface));
}
.perm-check input {
  margin-top: 3px;
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
  flex-shrink: 0;
}
.perm-check-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.perm-check-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.perm-check-hint {
  font-size: 0.76rem;
  line-height: 1.4;
  word-break: break-all;
}
@media (max-width: 720px) {
  .perm-roles { flex-wrap: nowrap; overflow-x: auto; }
  .perm-role-btn { flex-shrink: 0; }
  .perm-check-list { grid-template-columns: 1fr; }
}
/* ?? ????? ?? */
.param-init-page {
  width: 100%;
  max-width: none;
  animation: dash-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.param-init-hero {
  padding: 8px 4px 22px;
  margin-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: transparent;
  border-radius: var(--radius);
}
.param-init-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 960px) {
  .param-init-layout { grid-template-columns: 1fr; }
}

/* 交付租户：四卡等高统一排版 */
.tenant-deliver-page .tenant-deliver-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.tenant-deliver-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 280px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px 18px 16px;
  box-sizing: border-box;
}
.tenant-deliver-card-head {
  flex: 0 0 auto;
  min-height: 4.6rem;
  margin-bottom: 4px;
}
.tenant-deliver-card-head .param-init-card-title {
  margin-bottom: 6px;
}
.tenant-deliver-card-head .param-init-card-desc {
  margin: 0;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tenant-deliver-card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tenant-deliver-card-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  min-height: 42px;
}
.tenant-deliver-hint {
  margin: 0;
  flex: 1;
  text-align: right;
  font-size: 0.85rem;
  line-height: 1.4;
}
.tenant-deliver-fields {
  grid-template-columns: 1fr;
}
.tenant-deliver-meta {
  display: grid;
  gap: 10px;
  margin: 0;
}
.tenant-deliver-meta > div {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  gap: 8px;
  align-items: baseline;
}
.tenant-deliver-meta dt {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 0.82rem;
}
.tenant-deliver-meta dd {
  margin: 0;
  font-size: 0.92rem;
  word-break: break-all;
}
.tenant-deliver-meta code {
  font-size: 0.82rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
}
.tenant-deliver-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tenant-deliver-avatar-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}
.tenant-deliver-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  pointer-events: none;
}
.tenant-deliver-avatar-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 12%, #e8eef5);
  color: #456;
  font-size: 14px;
  font-weight: 600;
}
.tenant-deliver-avatar-wrap .tenant-deliver-avatar-letter {
  position: absolute;
  inset: 0;
}
.tenant-deliver-person-text {
  min-width: 0;
}
.tenant-deliver-person-name {
  font-weight: 600;
  font-size: 0.95rem;
}
.tenant-deliver-person-sub {
  font-size: 0.82rem;
  line-height: 1.4;
  margin-top: 2px;
}
.tenant-deliver-wx {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 90%, transparent);
}
.tenant-deliver-wx-title {
  font-size: 0.85rem;
  font-weight: 650;
  margin-bottom: 6px;
}
.tenant-deliver-wx-line {
  margin: 0 0 4px;
  font-size: 0.82rem;
  line-height: 1.45;
}
.tenant-deliver-wx-list {
  margin: 6px 0 0;
  padding-left: 1.15em;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted, #64748b);
}
@media (max-width: 960px) {
  .tenant-deliver-page .tenant-deliver-grid { grid-template-columns: 1fr; }
  .tenant-deliver-card { min-height: 0; }
}

/* 新增租户：云相册全宽两栏，下方两卡并排等高 */
.tenant-create-layout {
  display: grid;
  gap: 18px;
}
.tenant-create-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px 18px 16px;
  box-sizing: border-box;
}
.tenant-create-card-cloud {
  width: 100%;
}
.tenant-create-card-head {
  flex: 0 0 auto;
  margin-bottom: 14px;
}
.tenant-create-card-head .param-init-card-title {
  margin-bottom: 6px;
}
.tenant-create-card-head .param-init-card-desc {
  margin: 0;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tenant-create-card-body {
  flex: 1 1 auto;
  min-height: 0;
}
.tenant-create-cloud-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  align-items: start;
}
.tenant-create-cloud-dirs {
  grid-column: 1 / -1;
}
.tenant-create-dirs-list {
  margin: 8px 0 0;
  padding-left: 1.2em;
  line-height: 1.6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}
.tenant-create-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.tenant-create-pair > .tenant-create-card {
  min-height: 100%;
}
.tenant-create-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tenant-create-hint {
  margin: 0;
  flex: 1;
  min-width: 8rem;
  font-size: 0.85rem;
}
.tenant-create-result-pre {
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  font-size: 0.85rem;
}
.tenant-create-result-actions {
  margin-top: 12px;
}
@media (max-width: 960px) {
  .tenant-create-cloud-grid,
  .tenant-create-dirs-list,
  .tenant-create-pair {
    grid-template-columns: 1fr;
  }
}

.tenant-finance-page .tenant-finance-layout {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
.tenant-finance-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tenant-finance-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--surface2) 55%, var(--surface)) 0%,
      var(--surface) 55%
    );
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s ease,
    box-shadow 0.22s ease,
    background 0.2s ease;
}
.tenant-finance-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--primary) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
.tenant-finance-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.tenant-finance-card:active {
  transform: translateY(0);
}
.tenant-finance-card.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--primary) 10%, var(--surface)) 0%,
      var(--surface) 60%
    );
}
.tenant-finance-card.is-income .tenant-finance-card-amount { color: var(--primary-hover); }
.tenant-finance-card.is-refund .tenant-finance-card-amount { color: var(--warning); }
.tenant-finance-card-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.tenant-finance-card-amount {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
.tenant-finance-card-meta {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.tenant-finance-chart-panel {
  min-height: 420px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.tenant-finance-chart-head h4 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--text);
}
.tenant-finance-chart-head p {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.tenant-finance-chart-empty,
.tenant-finance-loading {
  padding: 48px 12px;
  text-align: center;
  color: var(--text-muted);
}
.tf-chart-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.tf-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tf-legend-bar,
.tf-legend-line {
  display: inline-block;
  width: 14px;
  height: 8px;
  border-radius: 2px;
}
.tf-legend-bar { background: var(--primary); }
.tf-legend-line {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--warning);
}
.tf-pareto-wrap {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  align-items: stretch;
  min-height: 240px;
}
.tf-pareto-y {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 4px;
}
.tf-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  min-height: 220px;
}
.tf-bar-col {
  flex: 1 0 42px;
  max-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tf-bar-stack {
  position: relative;
  width: 100%;
  height: 190px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tf-bar {
  width: 70%;
  max-width: 36px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary-hover) 85%, var(--surface)) 0%,
    var(--primary) 100%
  );
  border-radius: 6px 6px 2px 2px;
}
.tf-pareto-dot {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 55%, transparent);
  z-index: 2;
}
.tf-bar-label {
  font-size: 0.72rem;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}
.tf-bar-amt {
  font-size: 0.68rem;
  text-align: center;
  color: var(--text-muted);
}
.tf-chart-foot {
  margin: 12px 0 0;
  font-size: 0.82rem;
  text-align: right;
  color: var(--text-muted);
}
@media (max-width: 960px) {
  .tenant-finance-page .tenant-finance-layout {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tenant-finance-card {
    transition: none;
  }
  .tenant-finance-card:hover {
    transform: none;
  }
}

.biz-entity-page {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.biz-entity-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.biz-cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 12px;
  width: 100%;
}
.biz-cert-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 92%, #f8fafc);
  min-width: 0;
}
.biz-cert-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text, #0f172a);
}
.biz-cert-preview {
  height: 120px;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  background: #f8fbfc;
}
.biz-cert-preview.small { height: 72px; min-width: 96px; }
.biz-cert-preview.has-image { border-style: solid; }
.biz-cert-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.biz-cert-ops {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  font-size: 13px;
}
.biz-extra-block { margin-top: 18px; }
.biz-extra-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.biz-extra-head h5 { margin: 0; font-size: 14px; }
.biz-extra-row {
  display: grid;
  grid-template-columns: 1fr 110px auto auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
@media (max-width: 720px) {
  .biz-extra-row { grid-template-columns: 1fr 1fr; }
}
.param-init-field-full { grid-column: 1 / -1; }
.param-init-field-full textarea.input {
  min-height: 96px;
  resize: vertical;
}
.param-init-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px 20px 22px;
  min-width: 0;
}
.param-init-actions-span {
  grid-column: 1 / -1;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.param-init-card-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 650;
}
.param-init-card-title-sub {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.param-init-field input[readonly] {
  opacity: 0.92;
  cursor: default;
}
.param-init-card-desc {
  margin: 0 0 18px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.param-init-fields {
  display: grid;
  gap: 16px;
}
.param-init-field {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 0.9rem;
}
.param-init-label {
  font-weight: 600;
  color: var(--text);
}
.param-init-field small {
  font-size: 0.78rem;
  line-height: 1.4;
}
.param-init-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.param-init-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.param-init-status {
  font-size: 0.82rem;
}
.param-init-status.is-ok { color: #2f9e44; }
.param-init-status.is-fail { color: #e03131; }
.param-init-status.is-busy { color: var(--primary); }
.param-init-out {
  margin: 0;
  padding: 14px 16px;
  min-height: 280px;
  max-height: min(62vh, 560px);
  overflow: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 70%, var(--surface));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-muted);
}
.param-init-out.is-error {
  color: #e03131;
  border-color: color-mix(in srgb, #e03131 45%, var(--border));
}

.code-out {
  margin-top: 16px;
  padding: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  max-height: 420px;
  font-size: 0.8rem;
  white-space: pre-wrap;
}
@media (max-width: 860px) {
  .main-app { grid-template-columns: 1fr; height: auto; min-height: 100dvh; }
  .sidebar {
    width: 100%;
    min-width: 0;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  #nav-menu { max-height: 42vh; }
}

/* ???????dialog ???????? open ????????? UA ??? */
.gm-busy-mask {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  margin: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100vh;
  border: none;
  background: transparent;
  box-sizing: border-box;
  pointer-events: auto;
}
.gm-busy-mask:not([open]) {
  display: none !important;
}
.gm-busy-mask[open] {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.gm-busy-mask::backdrop {
  background: color-mix(in srgb, #0b1220 62%, transparent);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
.gm-busy-panel {
  min-width: min(280px, 86vw);
  max-width: 360px;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: var(--surface);
  box-shadow: 0 18px 48px color-mix(in srgb, #000 28%, transparent);
  text-align: center;
  pointer-events: none;
  user-select: none;
}
.gm-busy-spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-top-color: var(--primary);
  animation: gm-busy-spin 0.8s linear infinite;
}
.gm-busy-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
}
.gm-busy-progress {
  margin-top: 14px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}
.gm-busy-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 0.15s ease-out;
}
.gm-busy-sub {
  margin: 10px 0 0;
  font-size: 0.82rem;
}
body.is-gm-busy {
  overflow: hidden !important;
  touch-action: none;
}
body.is-gm-busy #app,
body.is-gm-busy .app-shell,
body.is-gm-busy .layout,
body.is-gm-busy dialog.edit-dialog[open],
body.is-gm-busy #alert-modal:not(.hidden) {
  pointer-events: none !important;
}
/* ????????????? */
body.is-gm-busy #gm-busy-mask {
  pointer-events: auto !important;
}
@keyframes gm-busy-spin {
  to { transform: rotate(360deg); }
}

/* ??????GIF ?????????? */
.gm-lazy {
  position: relative;
  box-sizing: border-box;
}
.gm-lazy-fill {
  display: block;
  width: 100%;
  height: 100%;
}
.gm-lazy-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.gm-lazy.is-loaded .gm-lazy-spinner,
.gm-lazy.is-error .gm-lazy-spinner {
  display: none;
}
.gm-lazy-target {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.18s ease-out;
  pointer-events: none;
}
.gm-lazy.is-loaded .gm-lazy-target {
  opacity: 1;
}
.gm-lazy.is-error::after {
  content: '????';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface, #111) 88%, #666 12%);
  z-index: 1;
}
.meal-photo-preview .gm-lazy-spinner {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
}
.meal-thumb.gm-lazy .gm-lazy-spinner {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
}
.meal-dish-card-img.gm-lazy .gm-lazy-spinner {
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
}

/* ?? ?????? Toast??????????? + ???? ?? */
.toast {
  position: fixed;
  top: calc(1.25rem + var(--safe-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 13100;
  display: flex;
  align-items: stretch;
  min-width: 18rem;
  max-width: min(92vw, 32rem);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 4px;
  background: color-mix(in srgb, #fff 92%, var(--surface, #f8fafc) 8%);
  box-shadow: 0 8px 28px color-mix(in srgb, #0b1220 16%, transparent);
  font-size: 0.875rem;
  line-height: 1.45;
  pointer-events: auto;
}
.toast[hidden] {
  display: none !important;
}
.toast:not([hidden]) {
  animation: toastSlideDown 0.32s ease-out;
}
.toast-icon {
  flex: 0 0 3rem;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
.toast-body {
  flex: 1 1 auto;
  padding: 0.7rem 0.85rem;
  text-align: left;
  word-break: break-word;
}
.toast-close {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 2.25rem;
  margin: 0;
  padding: 0 0.65rem;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.toast-close:hover {
  opacity: 0.9;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.toast-close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 50%, transparent);
  outline-offset: -2px;
}

.toast-success {
  border: 1px solid color-mix(in srgb, var(--success, #22c55e) 42%, var(--primary, #0891b2) 18%);
  color: #067647;
}
.toast-success .toast-icon {
  background: var(--success, #22c55e);
  background-color: #22c55e;
}

.toast-error {
  border: 1px solid color-mix(in srgb, #ef4444 48%, var(--primary, #0891b2) 12%);
  color: #b91c1c;
}
.toast-error .toast-icon {
  background: #ef4444;
}

.toast-warning {
  border: 1px solid color-mix(in srgb, var(--warning, #f97316) 48%, var(--primary, #0891b2) 12%);
  color: #b45309;
}
.toast-warning .toast-icon {
  background: var(--warning, #f97316);
  background-color: #f97316;
}

.toast-info {
  border: 1px solid color-mix(in srgb, #3b82f6 48%, var(--primary, #0891b2) 12%);
  color: #1d4ed8;
}
.toast-info .toast-icon {
  background: #3b82f6;
}

@keyframes toastSlideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-0.65rem);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast:not([hidden]) {
    animation: none;
  }
}

/* 送餐列表：指派餐厅职员 */
.delivery-staff-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding: 2px;
}
.delivery-staff-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 92%, #f8fafc);
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.delivery-staff-item:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.delivery-staff-item:disabled {
  opacity: 0.55;
  cursor: wait;
}
.operator-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 160px;
  vertical-align: middle;
}
.operator-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary) 18%, #e8f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.operator-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.operator-avatar-letter {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary, #0b7285);
}
.operator-name {
  font-size: 0.86rem;
  color: var(--text, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.student-user-cell {
  max-width: 180px;
}
.student-user-cell .parent-user-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.86rem;
  color: var(--primary, #0b7285);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  text-align: left;
}
.student-user-cell .parent-user-link:hover {
  color: color-mix(in srgb, var(--primary, #0b7285) 80%, #000);
}
.parent-ledger-modal .form-modal-body {
  max-height: min(78vh, 720px);
  overflow: auto;
}
.parent-ledger {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.parent-ledger-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.parent-ledger-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.parent-ledger-avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary, #0b7285) 16%, #e8f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--primary, #0b7285);
}
.parent-ledger-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.parent-ledger-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.parent-ledger-who strong {
  font-size: 1.05rem;
}
.parent-ledger-child {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted, #64748b);
}
.parent-ledger-child .input {
  min-width: 180px;
  max-width: 260px;
}
.parent-ledger-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.parent-ledger-metric {
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary, #0b7285) 6%, #f8fafc);
  border: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 70%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.parent-ledger-metric .pl-label {
  font-size: 0.78rem;
  color: var(--muted, #64748b);
}
.parent-ledger-metric strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.parent-ledger-section h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 650;
}
.parent-ledger-tabs {
  margin-bottom: 10px;
}
.parent-ledger-tab-panel.hidden {
  display: none;
}
.parent-ledger-table-wrap {
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
}
.parent-ledger-table {
  margin: 0;
  font-size: 0.84rem;
}
.parent-ledger-table th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
}
@media (max-width: 720px) {
  .parent-ledger-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .parent-ledger-child {
    width: 100%;
  }
  .parent-ledger-child .input {
    flex: 1;
    max-width: none;
  }
}
.delivery-staff-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary) 18%, #e8f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.delivery-staff-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.delivery-staff-avatar-letter {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary, #0b7285);
}
.delivery-staff-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.delivery-staff-name {
  font-size: 14px;
  font-weight: 650;
  color: var(--text, #0f172a);
}
.delivery-staff-role {
  font-size: 12px;
  color: var(--muted, #64748b);
}
.delivery-staff-pick {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--primary, #0b7285);
  font-weight: 600;
}

/* 班级管理：班主任 / 家委选择 */
.class-staff-pick {
  position: relative;
  margin-top: 6px;
}
.class-staff-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 92%, #f8fafc);
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.class-staff-trigger:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.class-staff-trigger.is-selected {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.class-staff-placeholder {
  color: var(--muted, #64748b);
  font-size: 14px;
}
.class-staff-clear {
  margin-left: auto;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  color: var(--muted, #64748b);
  font-size: 16px;
}
.class-staff-clear:hover {
  background: color-mix(in srgb, #ef4444 12%, transparent);
  color: #b91c1c;
}
.class-staff-menu {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: min(40vh, 280px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.class-staff-menu[hidden] {
  display: none !important;
}
.class-staff-empty {
  margin: 8px;
  font-size: 13px;
}
.class-staff-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.class-staff-option:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.class-staff-option--clear {
  color: var(--muted, #64748b);
  font-size: 13px;
}
.class-staff-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary) 18%, #e8f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.class-staff-avatar--sm {
  flex-basis: 28px;
  width: 28px;
  height: 28px;
}
.class-staff-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.class-staff-avatar-letter {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary, #0b7285);
}
.class-staff-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.class-staff-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0f172a);
}
.class-staff-sub {
  font-size: 12px;
  color: var(--muted, #64748b);
}
.class-staff-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 160px;
}

/* 多位家委：表单标签 + 列表展开浮动层 */
.class-staff-pick--multi .class-staff-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.class-staff-pick--multi .class-staff-tags[hidden] {
  display: none !important;
}
.class-staff-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 160px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  vertical-align: middle;
}
.class-staff-chip-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 96px;
}
.class-staff-chip-x {
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #64748b);
  cursor: pointer;
  font-size: 14px;
}
.class-staff-chip-x:hover {
  background: color-mix(in srgb, #ef4444 14%, transparent);
  color: #b91c1c;
}
.class-staff-option.is-on {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.class-staff-check {
  margin-left: auto;
  color: var(--primary, #0b7285);
  font-weight: 700;
  width: 1.2em;
  text-align: center;
}
.class-committee-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 220px;
}
.class-committee-more {
  margin: 0;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--primary, #0b7285);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
}
.class-committee-more:hover,
.class-committee-more.is-open {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.class-committee-float {
  position: absolute;
  z-index: 30;
  left: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  max-width: 280px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}
.class-committee-float[hidden] {
  display: none !important;
}

/* 系统设置 · 消息接收者 */
.settings-item--staff-select {
  grid-column: 1 / -1;
}
.settings-staff-pick {
  width: 100%;
  max-width: 420px;
}
.class-staff-role-tag {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary, #0b7285);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}