:root{
  --bg:#f4f6f9;
  --card:#ffffff;
  --text:#0B0F19;
  --muted:#5B6475;
  --border:#E6EAF2;
  --primary:#1D4ED8;
}
body{background:var(--bg); color:var(--text);}
.admin-shell{min-height:100vh; display:flex;}
.admin-sidebar{
  width:260px; background:#0B1220; color:#e5e7eb; position:sticky; top:0; height:100vh;
  padding:18px 14px; border-right:1px solid rgba(255,255,255,.06);
}
.admin-brand{display:flex; align-items:center; gap:10px; padding:10px 10px 14px;}
.admin-brand{display:flex; align-items:center; gap:12px; padding:10px 10px 14px;}
.admin-logo-box{background:rgba(255,255,255,.92); border-radius:14px; padding:6px 10px; display:flex; align-items:center; justify-content:center;}
.admin-brand img{height:52px;width:auto;max-width:220px;object-fit:contain;display:block;}
.admin-brand .t{font-weight:800; letter-spacing:-.02em;}
.admin-nav{margin-top:8px;}
.admin-nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  color:#e5e7eb; text-decoration:none; font-weight:600;
}
.admin-nav a:hover{background:rgba(255,255,255,.08)}
.admin-nav a.active{background:rgba(29,78,216,.22); border:1px solid rgba(29,78,216,.35)}
.admin-main{flex:1; padding:22px;}
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(255,255,255,.65); backdrop-filter: blur(10px);
  border:1px solid rgba(230,234,242,.85);
  border-radius:16px; padding:12px 14px;
}
.kpi{border:none; border-radius:16px; background:var(--card); box-shadow:0 10px 22px rgba(15,23,42,.08);}
.kpi .n{font-weight:900; font-size:28px; letter-spacing:-.02em;}
.cardX{border:none; border-radius:16px; background:var(--card); box-shadow:0 10px 22px rgba(15,23,42,.08);}
.table{margin-bottom:0}
.table thead th{background:#f8fafc; color:#334155; font-weight:800; border-bottom:1px solid var(--border)}
.badge-soft{background:rgba(29,78,216,.12); color:var(--primary); border:1px solid rgba(29,78,216,.22)}
.muted{color:var(--muted)}



/* ===== Page Loader (safe, lightweight) ===== */
.hg-loader{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  z-index:99999;
  transition:opacity .25s ease, visibility .25s ease;
}
.hg-loader.is-hidden{ opacity:0; visibility:hidden; }
.hg-loader__box{
  display:flex; flex-direction:column; gap:10px; align-items:center;
  padding:18px 22px;
  border-radius:16px;
  border:1px solid rgba(2,6,23,.08);
  box-shadow:0 20px 60px rgba(2,6,23,.12);
  background:#fff;
}
.hg-loader__logo{ height:38px; width:auto; object-fit:contain; }
.hg-loader__bar{
  width:180px; height:6px; border-radius:999px;
  background:rgba(2,6,23,.08);
  overflow:hidden;
}
.hg-loader__bar > span{
  display:block; height:100%; width:45%;
  background:linear-gradient(90deg, #ff6a00, #ff8a3d);
  border-radius:999px;
  animation:hgLoad 1s infinite ease-in-out;
}
@keyframes hgLoad{
  0%{ transform:translateX(-120%); }
  100%{ transform:translateX(260%); }
}



/* ================= AUTH (Login/Forgot/Reset) ================= */
.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 12px;
  background:
    radial-gradient(900px 420px at 12% 18%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(900px 420px at 88% 24%, rgba(249,115,22,.10), transparent 60%),
    linear-gradient(180deg, #F6F2FF, #FFFFFF 55%, #FFFFFF);
}
.auth-card{
  width:min(1000px, 96vw);
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 30px 70px rgba(15,23,42,.14);
}
.auth-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height:560px;
}
.auth-left{
  padding:44px 44px 36px;
}
.auth-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.auth-brand img{
  height:42px;
  width:auto;
  display:block;
}
.auth-title{
  font-size:30px;
  font-weight:800;
  margin:6px 0 6px;
}
.auth-sub{
  color:#64748b;
  margin:0 0 22px;
}
.auth-right{
  position:relative;
  background:
    radial-gradient(600px 420px at 30% 20%, rgba(168,85,247,.38), transparent 60%),
    linear-gradient(135deg, rgba(168,85,247,.55), rgba(99,102,241,.28), rgba(249,115,22,.18));
}
.auth-right::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.28);
  pointer-events:none;
}
.auth-hero{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:24px;
}
.auth-hero img{
  width:min(420px, 92%);
  height:auto;
  border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.25);
}
.auth-input{
  border-radius:14px !important;
  padding:12px 14px !important;
}
.auth-btn{
  border-radius:14px !important;
  padding:12px 14px !important;
  font-weight:700 !important;
  background:#8b5cf6 !important;
  border-color:#8b5cf6 !important;
}
.auth-btn:hover{ filter:brightness(.95); }
.auth-link{ color:#8b5cf6; text-decoration:none; }
.auth-link:hover{ text-decoration:underline; }
@media (max-width: 900px){
  .auth-grid{ grid-template-columns: 1fr; }
  .auth-right{ display:none; }
  .auth-left{ padding:34px 22px 26px; }
}


/* ============== RESPONSIVE ADMIN (MOBILE) ============== */
@media (max-width: 992px){
  .admin-shell{display:block;}
  .admin-sidebar{
    position:fixed; left:0; top:0; bottom:0;
    width:min(85vw, 320px);
    transform:translateX(-110%);
    transition:transform .25s ease;
    z-index: 1040;
  }
  .admin-shell.sidebar-open .admin-sidebar{ transform:translateX(0); }
  .admin-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:1030; display:none;
  }
  .admin-shell.sidebar-open .admin-backdrop{ display:block; }
  .admin-main{padding:16px;}
  .admin-topbar{position:sticky; top:0; z-index:1020; background:var(--bg); padding-top:6px;}
  .admin-topbar .btn{white-space:nowrap;}
}