body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; background: #0f172a; color: #e2e8f0; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; background: #1e293b; border-bottom: 1px solid #334155; }
.topbar .brand { color: #f8fafc; font-weight: 600; text-decoration: none; font-size: 1.1rem; }
.topbar nav { display: flex; align-items: center; gap: 1rem; }
.topbar nav a, .topbar nav .user { color: #cbd5e1; text-decoration: none; }
.topbar nav .link { background: none; border: none; color: #cbd5e1; cursor: pointer; padding: 0; font: inherit; }
.topbar nav .inline { display: inline; margin: 0; }
main { padding: 2rem 1.5rem; max-width: 960px; margin: 0 auto; }
.card { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1.5rem; }
.card h1 { margin-top: 0; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.25rem; }
.form-group input[type=text], .form-group input[type=email], .form-group input[type=password] { width: 100%; box-sizing: border-box; padding: 0.5rem; border-radius: 4px; border: 1px solid #475569; background: #0f172a; color: #e2e8f0; }
.btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 4px; background: #2563eb; color: #fff; border: none; cursor: pointer; }
.btn:hover { background: #1d4ed8; }
.errors { color: #fca5a5; }
.errors ul { margin: 0; padding-left: 1.25rem; }
table.grid { width: 100%; border-collapse: collapse; margin-top: 1rem; }
table.grid th, table.grid td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #334155; text-align: left; }
table.grid th { color: #94a3b8; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
table.grid tr:hover td { background: #243049; }
table.grid td.right, table.grid th.right { text-align: right; }
.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: #334155; color: #e2e8f0; }
.badge.online { background: #166534; color: #dcfce7; }
.badge.offline { background: #991b1b; color: #fee2e2; }
.badge.disabled { background: #475569; color: #cbd5e1; }
.badge.role { background: #1e3a8a; color: #dbeafe; }
.btn-secondary { background: #475569; }
.btn-secondary:hover { background: #334155; }
.btn-danger { background: #b91c1c; }
.btn-danger:hover { background: #991b1b; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.page-header h1 { margin: 0; }
.muted { color: #94a3b8; }
.pre { background: #0f172a; border: 1px solid #334155; border-radius: 4px; padding: 0.75rem; font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
.alert { padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
.alert-success { background: #064e3b; color: #d1fae5; border: 1px solid #065f46; }
.alert-error { background: #7f1d1d; color: #fee2e2; border: 1px solid #991b1b; }