:root{
  --bg:#081120;
  --panel:#111b31;
  --panel-soft:#16223d;
  --panel-hover:#1a2948;
  --text:#f8fbff;
  --muted:#9eb0cb;
  --accent:#62e6f7;
  --accent-strong:#22c9df;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --info:#3b82f6;
  --border:#2a3959;
  --shadow:0 18px 50px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 85% 10%,rgba(34,201,223,.08),transparent 30%),
    linear-gradient(180deg,#07101e 0%,#0a1222 100%);
  color:var(--text);
}
button,input,textarea,select{font:inherit}
button{transition:.18s ease}
button:hover{transform:translateY(-1px)}
button:disabled{opacity:.55;cursor:not-allowed;transform:none}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1180px;margin:0 auto;padding:30px 24px 50px}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card,.card{
  background:rgba(17,27,49,.97);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.auth-card{width:min(460px,100%);padding:32px}
.brand{
  font-size:31px;
  font-weight:900;
  letter-spacing:-.7px;
  color:white;
}
.brand span{color:var(--accent)}
.brand small{font-size:14px;color:var(--muted);font-weight:700;margin-left:8px}
.subtitle{color:var(--muted);margin:8px 0 26px;line-height:1.55}
label{display:block;font-size:14px;margin:15px 0 8px;color:#dce8f8;font-weight:650}
input,textarea,select{
  width:100%;
  background:#0b1529;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:13px 14px;
  outline:none;
  transition:border-color .18s, box-shadow .18s;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(98,230,247,.10);
}
button{
  border:0;
  border-radius:11px;
  padding:12px 16px;
  font-weight:800;
  cursor:pointer;
}
.btn-primary{background:var(--accent);color:#04111a}
.btn-primary:hover{background:#80ebf8}
.btn-secondary{background:#223152;color:var(--text)}
.btn-secondary:hover{background:#2b3c62}
.btn-danger{background:var(--danger);color:white}
.btn-success{background:var(--success);color:white}
.btn-warning{background:var(--warning);color:#19130a}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.full{width:100%;margin-top:18px}
.small{padding:8px 11px;font-size:13px}
.link-btn{
  background:transparent;
  color:var(--accent);
  padding:0;
  margin-top:14px;
  font-weight:700;
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 24px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:rgba(8,17,32,.9);
  backdrop-filter:blur(12px);
  z-index:20;
}
.nav-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:8px}
.page-head h1,.page-head h2{margin:0}
.page-head p{margin:6px 0 0;color:var(--muted)}
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0}
.card{padding:19px}
.kpi .label{color:var(--muted);font-size:13px}
.kpi .value{font-size:27px;font-weight:900;margin-top:8px;letter-spacing:-.5px}
.kpi .sub{margin-top:5px;font-size:12px;color:var(--muted)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 26px}
.section-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin:28px 0 12px;
}
.section-title h3{margin:0}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:15px;background:var(--panel)}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{padding:13px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.018)}
th{
  font-size:12px;
  color:#9ebae1;
  text-transform:uppercase;
  letter-spacing:.45px;
}
.badge{
  display:inline-block;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  text-transform:capitalize;
}
.badge.pending{background:#f59e0b22;color:#fbbf24}
.badge.approved{background:#22c55e22;color:#4ade80}
.badge.denied{background:#ef444422;color:#f87171}
.badge.paid{background:#3b82f622;color:#60a5fa}
.badge.active{background:#22c55e22;color:#4ade80}
.badge.suspended{background:#ef444422;color:#f87171}
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:100;
}
.modal.open{display:flex}
.modal-card{
  width:min(560px,100%);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px;
  box-shadow:var(--shadow);
  max-height:90vh;
  overflow:auto;
}
.modal-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:8px}
.modal-head h3{margin:0}
.message{margin-top:12px;font-size:14px;color:var(--muted);line-height:1.45}
.error{color:#fca5a5}
.success{color:#86efac}
.info{color:#93c5fd}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}
.hidden{display:none!important}
.detail-box{
  border:1px solid var(--border);
  border-radius:12px;
  padding:13px;
  margin:12px 0;
  background:#0b1529;
}
.detail-row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:5px 0;
}
.detail-row span:first-child{color:var(--muted)}
.empty{padding:28px;text-align:center;color:var(--muted)}
.notice{
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#0b1529;
  color:var(--muted);
  line-height:1.5;
}
@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .page-head{align-items:flex-start;flex-direction:column}
}
@media (max-width:620px){
  .topbar{padding:14px 16px;align-items:flex-start}
  .brand{font-size:24px}
  .brand small{display:none}
  .container{padding:22px 14px 42px}
  .kpis{grid-template-columns:1fr}
  .kpi .value{font-size:25px}
  .auth-card{padding:24px 20px}
  .toolbar button{flex:1 1 100%}
  .nav-actions{font-size:13px}
  .section-title{align-items:flex-start;flex-direction:column}
}

/* Compact authentication screen */
.compact-auth{
  width:min(400px,100%);
  padding:26px 28px;
}
.compact-auth .subtitle{
  margin:6px 0 20px;
  font-size:14px;
}
.compact-auth label{
  margin:12px 0 6px;
  font-size:13px;
}
.compact-auth input{
  padding:11px 12px;
}
.compact-auth .full{
  margin-top:14px;
}
.auth-links{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
}
.text-link{
  background:transparent;
  color:var(--accent);
  padding:0;
  font-weight:700;
  font-size:13px;
}
.text-link:hover{
  transform:none;
  text-decoration:underline;
}
.auth-heading{
  margin:4px 0 12px;
}
.compact-copy{
  margin-bottom:14px!important;
}
@media (max-width:620px){
  .compact-auth{padding:22px 18px}
  .auth-links{flex-direction:column;align-items:flex-start}
}