:root { --bg:#0b0b0f; --panel:#141420; --muted:#9aa0a6; --text:#eaeef1; --border:#2b2b39; --accent:#7c9cff; --danger:#ff6b6b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 980px; margin: 24px auto; padding: 0 16px; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;}
.brand { font-weight:700; letter-spacing:0.5px; }
.topbar nav a { margin-left:12px; }

.card-ui { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:20px; max-width:560px; margin: 20px auto; }
.centered { display:flex; min-height:100vh; align-items:center; justify-content:center; }
h1 { margin: 0 0 12px 0; }
label { display:block; margin-top:12px; font-weight:600; }
input[type="text"], input[type="email"], input[type="password"] { width:100%; padding:10px 12px; background:#0f0f16; border:1px solid var(--border); border-radius:10px; color:var(--text); }
input[type="file"] { margin-top:8px; }

.btn { display:inline-block; padding:8px 12px; background:#101522; color:var(--text); border:1px solid var(--border); border-radius:10px; text-decoration:none; cursor:pointer; }
.btn:hover { filter: brightness(1.1); }
.btn.sm { padding:6px 10px; font-size:14px; }
.btn.danger { border-color:#5b2b2b; background:#201214; color:#ffdede; }

.error { margin:12px 0; color:#ffdede; background:#2a1013; padding:8px 12px; border:1px solid #61343a; border-radius:10px; }

.grid { width:100%; border-collapse: collapse; background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.grid th, .grid td { padding:10px; border-bottom:1px solid var(--border); vertical-align: middle; }
.grid th { text-align:left; color:var(--muted); background:#11111a; }
.grid .nowrap { white-space:nowrap; }
.muted { color: var(--muted); }

.avatar { height:48px; width:48px; object-fit:cover; border-radius:10px; border:1px solid var(--border); }
.avatar-lg { height:120px; width:120px; object-fit:cover; border-radius:16px; border:1px solid var(--border); display:block; margin-bottom:12px; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
}
.status-badge.active {
  border-color: #2c6b3f;
  background: rgba(44, 107, 63, 0.18);
  color: #bbffcf;
}
.status-badge.inactive {
  border-color: var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
}

.banner {
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  margin: 12px 0;
}
.banner.warning {
  border-color: #5c3b1a;
  background: #23160b;
  color: #f6d7a7;
}
.banner.error {
  border-color: #61343a;
  background: #2a1013;
  color: #ffdede;
}
.banner.success {
  border-color: #245534;
  background: #112317;
  color: #bbffcf;
}

.logo {
  height: 32px;
  vertical-align: middle;
  margin-right: 8px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
}