:root { --bg:#0e1116; --card:#171c24; --fg:#e8edf4; --dim:#8b98ab; --acc:#4da3ff; --err:#ff6b6b; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; min-height:100vh; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-bottom:1px solid #232b38; background:#12161d; }
.brand { font-weight:600; font-size:1.05rem; letter-spacing:.01em; }
.logout-form { margin:0; }
.btn-ghost { background:transparent; color:var(--dim); border:1px solid #2a3342; border-radius:8px; padding:7px 14px; cursor:pointer; font-size:.85rem; }
.btn-ghost:hover { color:var(--fg); border-color:var(--acc); }
.content { flex:1; display:flex; align-items:center; justify-content:center; padding:32px 16px; width:100%; }
.foot { text-align:center; color:var(--dim); font-size:.72rem; padding:14px; border-top:1px solid #1c232e; }
.login-card, .denied-card { background:var(--card); border:1px solid #232b38; border-radius:16px; padding:34px 30px; width:100%; max-width:380px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.login-logo { font-size:2.6rem; margin-bottom:6px; }
h1 { font-size:1.35rem; margin-bottom:6px; }
.sub { color:var(--dim); font-size:.85rem; margin-bottom:20px; line-height:1.4; }
.login-form { display:flex; flex-direction:column; gap:14px; text-align:left; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:.72rem; color:var(--dim); letter-spacing:.03em; }
input[type=email], input[type=password] { background:#0e1319; color:var(--fg); border:1px solid #2a3342; border-radius:9px; padding:11px 12px; font-size:.95rem; width:100%; }
input:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(77,163,255,.18); }
.remember { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--dim); }
.btn { background:var(--acc); color:#08121e; font-weight:600; border:none; border-radius:10px; padding:12px 18px; cursor:pointer; font-size:.95rem; }
.btn:hover { filter:brightness(1.08); }
a.btn { display:inline-block; text-decoration:none; margin-top:6px; }
.errors { background:#2e1717; border:1px solid #5a2b2b; border-radius:9px; padding:10px 12px; text-align:left; }
.error-item { color:#ff9c9c; font-size:.82rem; margin-top:4px; }
.denied-icon { font-size:2.6rem; margin-bottom:8px; }
.users-card { background:var(--card); border:1px solid #232b38; border-radius:16px; padding:34px 30px; width:100%; max-width:560px; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.users-table { width:100%; border-collapse:collapse; margin:18px 0 26px; text-align:left; font-size:.88rem; }
.users-table th { color:var(--dim); font-size:.72rem; letter-spacing:.03em; padding:8px 10px; border-bottom:1px solid #2a3342; }
.users-table td { padding:9px 10px; border-bottom:1px solid #1c232e; }
.role-badge { background:#232b38; border-radius:6px; padding:2px 8px; font-size:.75rem; color:var(--dim); white-space:nowrap; }
.role-badge.role-admin { background:#1d2f45; color:var(--acc); }
.del-form { margin:0; display:inline; }
.btn-danger { background:transparent; color:var(--err); border:1px solid #5a2b2b; border-radius:8px; padding:6px 12px; cursor:pointer; font-size:.8rem; }
.btn-danger:hover { background:#2e1717; }
.create-title { font-size:1rem; margin-bottom:14px; }
.create-form { display:flex; flex-direction:column; gap:14px; text-align:left; }
select { background:#0e1319; color:var(--fg); border:1px solid #2a3342; border-radius:9px; padding:11px 12px; font-size:.95rem; width:100%; }
.btn.back { display:inline-block; text-decoration:none; margin-top:18px; background:transparent; color:var(--dim); border:1px solid #2a3342; font-weight:400; }
.btn.back:hover { color:var(--fg); border-color:var(--acc); filter:none; }