/* 后台布局。颜色和尺寸只用 Tide 令牌。 */
.shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh; }
.side { padding: var(--ui-space-6) var(--ui-space-4); display: flex; flex-direction: column; gap: var(--ui-space-6); }
.side .brand { display: flex; align-items: center; gap: var(--ui-space-2); font-size: var(--ui-text-lg); font-weight: 700; padding-inline: var(--ui-space-3); }
.side .brand svg { width: 26px; height: 26px; }
.side .spacer { flex: 1; }
.side .sidenav .count { margin-left: auto; }
.main { padding: var(--ui-space-8) clamp(16px, 4vw, 40px) var(--ui-space-12); max-width: 1120px; width: 100%; }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ui-space-3); margin-bottom: var(--ui-space-6); }
.head h3 { margin-top: var(--ui-space-1); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-space-4); margin-bottom: var(--ui-space-6); }
.section { margin-top: var(--ui-space-8); }
.section > h4 { margin-bottom: var(--ui-space-3); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); align-items: center; margin-bottom: var(--ui-space-4); }
.toolbar .input { max-width: 260px; }
.slot-list { display: grid; gap: var(--ui-space-4); }
.slot-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); }
.booking { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); padding-block: var(--ui-space-3); border-top: 1px solid var(--ui-border); }
.slot-head + .booking { margin-top: var(--ui-space-3); }
.table th, .table td { white-space: nowrap; }
.table td.wrap { white-space: normal; min-width: 180px; }
.booking .who { flex: 1; min-width: 180px; }
.clickable { cursor: pointer; }
.hours-cell { min-width: 120px; }
.hours-cell .progress { margin-top: var(--ui-space-1); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ui-space-5); }
.form-stack { display: grid; gap: var(--ui-space-5); }
.slot-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: var(--ui-space-3); align-items: end; }
.login { min-height: 100vh; display: grid; place-content: center; padding: var(--ui-space-4); }
.login .card { width: min(380px, calc(100vw - 32px)); }
.login svg.la { width: 160px; display: block; margin: 0 auto var(--ui-space-4); }
.msg { padding-block: var(--ui-space-3); border-top: 1px solid var(--ui-border); }
.msg:first-child { border-top: none; padding-top: 0; }
.msg:last-child { padding-bottom: 0; }
.modal-body .reasons { margin: var(--ui-space-2) 0 0; padding-left: var(--ui-space-5); }

@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4); }
  .side .sidenav { flex-direction: row; flex-wrap: wrap; }
  .side .spacer { display: none; }
  .slot-row { grid-template-columns: 1fr 1fr; }
}