.users-content{align-content:start}.users-panel{padding:1.25rem;
    border:1px solid var(--border);border-radius:var(--radius-md);
    background:var(--surface)}.users-header{display:flex;
        justify-content:space-between;gap:1rem;align-items:start}.users-header h2,.users-header p{margin:0 0 .4rem}.users-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1rem;margin-top:1.25rem}.user-card{border:1px solid var(--border);
        border-radius:var(--radius-sm);padding:1rem;background:var(--surface-soft);
        display:grid;gap:.75rem}.user-card h3,.user-card p{margin:0}.user-meta{color:var(--muted);font-size:.9rem}.user-actions{display:flex;
            flex-wrap:wrap;gap:.5rem}.status{font-weight:800}.status.active{color:#15803d}.status.inactive{color:#b91c1c}.users-message{padding:.75rem;border-radius:var(--radius-sm);background:var(--surface-soft)}
dialog {
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --text: #172033;
  --muted: #65758b;
  --border: #dce4ef;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --danger: #c24138;
  max-width: 32rem;
  width: calc(100% - 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  opacity: 1;
}

.theme-toggle-input:checked ~ dialog {
  color-scheme: dark;
  --surface: #182233;
  --surface-soft: #202c40;
  --text: #eef4ff;
  --muted: #a7b4c8;
  --border: #33445c;
  --primary: #7aa7ff;
  --primary-strong: #a9c4ff;
  --danger: #ff8f86;
}

dialog::backdrop {
  background-color: rgba(15, 23, 42, 0.68);
}

dialog form,
dialog label {
  display: grid;
  gap: 0.75rem;
  color: var(--text);
}

dialog input {
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface-soft);
  color: var(--text);
  opacity: 1;
}

dialog input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1rem}@media(max-width:640px){.users-header,.dialog-actions{flex-direction:column}.users-header .button,.dialog-actions .button{width:100%}}