:root{
  --a:#C6E1EB;--y:#FAE7A5;--r:#E7473C;--v:#3B1A2D;--bg:#F7FAFB;
  --bd:#D9E5E9;--ok:#2E7D5B;--mut:#6c6670
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Arial;background:var(--bg);color:#302832}
.top{background:var(--v);color:#fff;padding:14px 20px;display:flex;justify-content:space-between;gap:15px}
.wrap{max-width:1180px;margin:auto;padding:24px}
.hero,.card,.role-card{background:#fff;border:1px solid var(--bd);border-radius:18px;padding:24px}
.hero{background:linear-gradient(135deg,var(--a),#fff)}
.auth-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;margin-top:20px}
.login-card label,.card label{display:block;font-weight:800;margin:13px 0 6px}
input,select{width:100%;padding:12px;border:1px solid var(--bd);border-radius:10px;font-size:1rem}
.btn{border:0;border-radius:10px;padding:11px 15px;font-weight:800;cursor:pointer;background:var(--v);color:#fff;margin-top:16px}
.btn.ok{background:var(--ok)}
.btn.red{background:var(--r)}
.btn.alt{background:var(--a);color:var(--v)}
.btn.small{padding:8px 10px;margin-top:0;font-size:.85rem}
.pill{display:inline-block;background:var(--y);padding:5px 9px;border-radius:999px;font-size:.8rem;font-weight:800}
.feedback{margin-top:14px;padding:12px;border-radius:10px;background:#f4f0e0}
.feedback.err{background:#fde6e1}
.feedback.ok{background:#e2f3e8}
.hidden{display:none!important}
.app-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0}
.role-card{margin-top:14px}
.status-ok{display:inline-block;background:#e2f3e8;color:#205c42;padding:9px 12px;border-radius:10px;font-weight:800}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.metric{font-size:2rem;font-weight:900;color:var(--v)}
.muted{color:var(--mut)}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top}
.status-chip{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.78rem;font-weight:800}
.status-active{background:#e2f3e8;color:#205c42}
.status-suspended{background:#fde6e1;color:#9c3327}
.status-expired{background:#ece7e9;color:#674b58}
.table-wrap{overflow:auto}
@media(max-width:800px){
  .auth-grid,.grid,.form-grid{grid-template-columns:1fr}
  .top{align-items:flex-start;flex-direction:column}
}