:root{
  --navy-900:#131E36;
  --navy-700:#1F3864;
  --navy-500:#2E4E86;
  --rust-600:#C1642C;
  --rust-700:#A34F20;
  --paper:#F6F4EF;
  --card:#FFFFFF;
  --border:#E3E0D6;
  --text:#1A1A1A;
  --text-secondary:#6B6A65;
  --success-bg:#E7F3EC; --success-text:#256A43; --success-border:#BEDDC9;
  --danger-bg:#FBEAE8; --danger-text:#9C2B22; --danger-border:#F0C4BE;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper);
  color:var(--text);
  background-image:
    linear-gradient(rgba(31,56,100,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,56,100,0.05) 1px, transparent 1px);
  background-size:28px 28px;
  min-height:100vh;
}
.stage{ padding:56px 20px 80px; }

.brand{ display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.brand-mark{ width:34px; height:34px; border-radius:8px; background:var(--navy-700); position:relative; flex:none; }
.brand-mark::before, .brand-mark::after{ content:""; position:absolute; background:var(--rust-600); border-radius:2px; }
.brand-mark::before{ width:14px; height:5px; top:9px; left:10px; transform:rotate(45deg); }
.brand-mark::after{ width:14px; height:5px; bottom:9px; left:10px; transform:rotate(45deg); }
.brand-name{ font-size:15px; font-weight:700; color:var(--navy-900); }

.authwrap{ max-width:400px; margin:0 auto; }
.card{
  background:var(--card); border:1px solid var(--border); border-top:3px solid var(--rust-600);
  border-radius:10px; padding:32px 32px 28px;
}
.card h1{ font-size:22px; margin:0 0 4px; }
.card p.sub{ margin:0 0 24px; color:var(--text-secondary); font-size:13.5px; }
label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--text); }
.field{ margin-bottom:16px; }
input[type=email], input[type=password], input[type=text]{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:6px;
  font-size:14px; background:#FBFAF7;
}
input:focus{ outline:2px solid var(--navy-500); outline-offset:1px; background:#fff; }
.row-between{ display:flex; align-items:center; justify-content:space-between; margin:2px 0 22px; }
.remember{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-secondary); }
.remember input{ width:15px; height:15px; }
.btn-primary{
  width:100%; background:var(--rust-600); color:#fff; border:none; padding:12px;
  border-radius:6px; font-size:14.5px; font-weight:700; cursor:pointer;
}
.btn-primary:hover{ background:var(--rust-700); }
.btn-primary:disabled{ opacity:0.6; cursor:default; }
.link{ color:var(--navy-700); font-size:13px; text-decoration:none; font-weight:600; }
.link:hover{ text-decoration:underline; }
.center-link{ text-align:center; margin-top:18px; }

.banner{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:7px; font-size:13px; margin-bottom:18px; }
.banner.danger{ background:var(--danger-bg); color:var(--danger-text); border:1px solid var(--danger-border); }
.banner.success{ background:var(--success-bg); color:var(--success-text); border:1px solid var(--success-border); }
.banner b{ display:block; margin-bottom:2px; }
.banner-icon{ font-weight:900; font-size:15px; line-height:1; }
.hidden{ display:none !important; }

/* app shell (client picker / manage users) */
.shell{ max-width:920px; margin:0 auto; }
.topbar{
  background:var(--navy-900); color:#fff; padding:14px 24px; border-radius:10px 10px 0 0;
  display:flex; align-items:center; justify-content:space-between;
}
.topbar .title{ font-size:14.5px; font-weight:700; }
.topbar .title span{ color:rgba(255,255,255,0.55); font-weight:400; margin:0 6px; }
.topbar-actions{ display:flex; gap:10px; align-items:center; }
.pill-btn{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:#fff;
  font-size:12.5px; padding:7px 14px; border-radius:20px; cursor:pointer;
}
.pill-btn:hover{ border-color:rgba(255,255,255,0.5); }
.avatar-chip{
  width:28px; height:28px; border-radius:50%; background:var(--rust-600); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; cursor:pointer;
}
.panel{ background:var(--card); border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px; padding:26px 28px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.panel-head h2{ font-size:17px; margin:0; }
.btn-secondary{
  background:var(--navy-700); color:#fff; border:none; padding:9px 16px; border-radius:6px;
  font-size:13px; font-weight:700; cursor:pointer;
}
.btn-secondary:hover{ background:var(--navy-500); }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-secondary); border-bottom:1px solid var(--border); padding:0 10px 10px; }
td{ padding:12px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
.badge{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:700; }
.badge.owner{ background:#EAE6F7; color:#5A3EA6; }
.badge.user{ background:#EEF1F5; color:#516073; }
.badge.active{ background:var(--success-bg); color:var(--success-text); }
.badge.revoked{ background:var(--danger-bg); color:var(--danger-text); }
.action-link{ font-size:12.5px; font-weight:700; cursor:pointer; border:none; background:none; padding:0; }
.action-link.revoke{ color:var(--danger-text); }
.action-link.restore{ color:var(--success-text); }
.muted-dash{ color:var(--text-secondary); }

.client-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.client-card{ border:1px solid var(--border); border-radius:8px; padding:18px; cursor:pointer; transition:border-color .15s; }
.client-card:hover{ border-color:var(--navy-500); }
.client-card .name{ font-weight:700; font-size:14.5px; margin-bottom:4px; }
.client-card .meta{ font-size:12px; color:var(--text-secondary); }

.topbar-user{ position:relative; }
.dropdown{
  position:absolute; top:38px; right:0; background:#fff; border:1px solid var(--border); border-radius:8px;
  min-width:170px; padding:6px; box-shadow:0 6px 18px rgba(0,0,0,0.12); z-index:5;
}
.dropdown .item{ padding:8px 10px; font-size:13px; border-radius:5px; color:var(--text); display:flex; align-items:center; gap:8px; cursor:pointer; }
.dropdown .item:hover{ background:#F5F4F0; }
.dropdown hr{ border:none; border-top:1px solid var(--border); margin:4px 2px; }

.modal-overlay{
  background:rgba(19,30,54,0.45); border-radius:0 0 10px 10px; display:flex;
  align-items:center; justify-content:center; padding:60px 20px;
}