* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: #f0f0f0;
  min-height: 100vh;
  padding: 1rem;
}
.wrap { max-width: 1100px; margin: 0 auto; }
.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.header h1 { margin: 0; font-size: 1.5rem; color: #111; }
.subtitle { margin: 0; font-size: 0.9rem; color: #666; flex: 1; }
.btn {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  border: none;
}
.btn-primary { background: #07c; color: #fff; }
.btn-primary:hover { background: #06b; }

.tabs { display: flex; gap: 0; margin-bottom: 0; }
.tab {
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 500;
  border: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  background: #e0e0e0;
  color: #555;
}
.tab:hover { background: #d0d0d0; }
.tab.active { background: #fff; color: #07c; box-shadow: 0 -1px 2px rgba(0,0,0,0.06); }

.panel { display: block; }
.panel.hidden { display: none; }
.panel .table-wrap { border-radius: 0 8px 8px 8px; }

.loading, .error { padding: 1rem; margin-bottom: 1rem; border-radius: 8px; }
.loading { background: #e3f2fd; color: #1565c0; }
.error { background: #ffebee; color: #c62828; }
.table-wrap { overflow-x: auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #eee; }
.table th { background: #f5f5f5; font-weight: 600; color: #333; font-size: 0.85rem; }
.table tbody tr:hover { background: #fafafa; }
.badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}
.badge-active { background: #e8f5e9; color: #2e7d32; }
.badge-deactive { background: #f5f5f5; color: #616161; }
.badge-rejected { background: #ffebee; color: #c62828; }
.badge-accepted { background: #e3f2fd; color: #1565c0; }
.badge-awake { background: #e8f5e9; color: #2e7d32; }
.badge-drowsy { background: #fff3e0; color: #e65100; }
.badge-sleeping { background: #fce4ec; color: #c2185b; }
.badge-calibrating { background: #e3f2fd; color: #1565c0; }
.badge-no-face { background: #f5f5f5; color: #616161; }
.meta { margin-top: 1rem; font-size: 0.85rem; color: #666; }