:root { --pico-font-size: 90%; }
.container { max-width: 960px; }
.user-table { width: 100%; }
.user-table th, .user-table td { vertical-align: middle; }
.status-badge {
  display: inline-block; padding: 0.15em 0.5em; border-radius: 4px;
  font-size: 0.85em; font-weight: 600;
}
.status-active { background: #d4edda; color: #155724; }
.status-inactive { background: #f8d7da; color: #721c24; }
.status-pending { background: #fff3cd; color: #856404; }
.invite-form { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.invite-form label { flex: 1; min-width: 180px; }
.toolbar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar input { flex: 1; min-width: 200px; }
.pagination { display: flex; gap: 0.5rem; align-items: center; justify-content: center; margin-top: 1rem; }
.error-msg { color: var(--pico-del-color); }
.success-msg { color: var(--pico-ins-color); }
.header-bar { padding-top: 1.5rem; }
.login-prompt { text-align: center; margin-top: 3rem; }
.loading-spinner { text-align: center; padding: 2rem; }
.spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid #ccc; border-top-color: #333; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }