.admin-body { background: #f4f6fb; }
.mute { color: var(--mute); }
.admin-login { max-width: 420px; margin: 48px auto; padding: 0 24px 48px; }
#desk { max-width: 1240px; margin: 0 auto; padding: 18px 24px 64px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stats article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
}
.stats b { display: block; font-size: 26px; }

.toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
.toolbar input, .toolbar select { max-width: none; }

.table-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: auto;
  box-shadow: var(--shadow);
}
.clients { width: 100%; border-collapse: collapse; font-size: 14px; }
.clients th, .clients td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.clients th { font-size: 12px; color: var(--mute); font-weight: 650; background: #f8fafc; }
.clients tr:last-child td { border-bottom: 0; }
.clients tbody tr { cursor: pointer; }
.clients tbody tr:hover { background: #f5f8ff; }
.clients tbody tr.on { background: var(--blue-soft); }
.clients .name { font-weight: 650; }
.empty { padding: 24px; }

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  background: #eef2f7;
}
.badge.pending { color: var(--warn); background: #fff4d6; }
.badge.active { color: var(--ok); background: #e7f7ee; }
.badge.blocked { color: var(--danger); background: #fdecee; }

.drawer { position: fixed; inset: 0; z-index: 30; }
.drawer-dim { position: absolute; inset: 0; border: 0; background: rgba(17, 24, 39, .35); cursor: pointer; }
.drawer-card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 100%);
  background: #fff;
  overflow: auto;
  padding: 22px 22px 40px;
  box-shadow: -16px 0 40px rgba(18, 24, 38, .12);
}
.drawer-card h2 { margin: 0 0 6px; font-size: 24px; }
.drawer-card h3 { margin: 22px 0 8px; font-size: 15px; }
.card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cred {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 8px 0;
  background: #f8fafc;
}
.cred b { display: block; font-size: 12px; color: var(--mute); font-weight: 650; }
.cred code { font-size: 13px; }
.cred button { flex: 0 0 auto; }
.staff-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.staff-table th, .staff-table td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line); }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
textarea { min-height: 88px; }

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