.page { padding: 32px; display: flex; flex-direction: column; gap: 20px; min-height: 100vh; }
.topBar { display: flex; justify-content: space-between; align-items: flex-start; }
.pageTitle { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--text-dark); }
.pageSub { color: var(--sage-300); font-size: 0.875rem; margin-top: 2px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--white); border: 1px solid var(--sage-100); border-radius: var(--radius-xl); padding: 20px; box-shadow: var(--shadow-sm); }
.cardInactive { opacity: 0.6; border-style: dashed; }
.cardTop { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--sage-500); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.125rem; flex-shrink: 0; }
.nameBlock { flex: 1; }
.name { font-weight: 700; color: var(--text-dark); font-size: 0.9375rem; }
.empId { font-size: 0.75rem; color: var(--sage-300); margin-top: 2px; }
.toggleBtn { background: none; border: none; cursor: pointer; display: flex; padding: 4px; }
.statusRow { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--sage-50); border-radius: var(--radius-md); padding: 12px; margin-bottom: 12px; }
.stat { display: flex; flex-direction: column; gap: 1px; }
.statVal { font-size: 1rem; font-weight: 700; color: var(--sage-500); display: flex; align-items: center; gap: 4px; }
.statLabel { font-size: 0.7rem; color: var(--sage-300); }
.contact { font-size: 0.78rem; color: var(--sage-300); display: flex; flex-direction: column; gap: 2px; }
.loading { text-align: center; padding: 40px; color: var(--sage-300); }
@media (max-width: 1280px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) {
  .page { padding: 20px; }
  .pageTitle { font-size: 1.5rem; }
}
@media (max-width: 768px) {
  .page { padding: 16px; }
  .grid { grid-template-columns: 1fr; }
  .pageTitle { font-size: 1.25rem; }
  .topBar { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 480px) { .page { padding: 12px; } }