/* ===== Admin Panel Theme (scoped) ===== */
.admin-ui {
  --bg: #0b1020;
  --card: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #22D3EE;         /* violeta */
  --accent2: #22d3ee;        /* cian */
  --ring: rgba(124,58,237,.35);

  background: linear-gradient(180deg, var(--bg) 0%, #0b1226 100%);
  min-height: 100vh;
  padding: 24px;
  color: var(--text);
}

.admin-ui__header {
  background:
    radial-gradient(1100px 350px at 15% -20%, rgba(124,58,237,.22), transparent),
    radial-gradient(800px 300px at 120% 0%, rgba(34,211,238,.16), transparent);
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 20px;
  padding: 28px 24px;
  margin-bottom: 20px;
  box-shadow: inset 0 10px 30px rgba(2,6,23,.45);
}
.admin-ui__header h1 { margin: 0; font-size: 28px; font-weight: 700; }
.admin-ui__header p  { margin: 8px 0 0; color: var(--muted); }

.admin-ui__card {
  background: var(--card);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 18px;
  box-shadow: 0 10px 20px rgba(2,6,23,.45);
  padding: 16px;
}

.table-responsive { overflow-x: auto; }

/* Table */
.admin-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.admin-table thead th {
  position: sticky; top: 0;
  background: rgba(15,23,42,.92);
  color: #e5e7eb;
  text-align: left;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.admin-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  color: #cbd5e1;
}
.admin-table tbody tr { transition: background .18s ease; }
.admin-table tbody tr:hover { background: rgba(124,58,237,.07); }

.admin-id { color: #94a3b8; font-variant-numeric: tabular-nums; }

/* Role badge */
.role-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
}
.role-badge--admin { color: #22d3ee; background: rgba(34,211,238,.10); border-color: rgba(34,211,238,.25); }
.role-badge--user  { color: #1696a9; background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.25); }

/* Form controls */
.role-form { display: flex; gap: 10px; align-items: center; }

.role-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #0b1226;
  border: 1px solid rgba(148,163,184,.28);
  color: #e5e7eb;
  padding: 8px 12px;