:root{
  --royal:#155EEF;--royal-d:#1048B8;--cyan:#06B6D4;--indigo:#4338CA;--purple:#7C3AED;
  --navy:#070A14;--navy2:#0E1530;--navy3:#162038;--bg:#F4F7FC;--card:#fff;--line:#E4E9F2;
  --ink:#0F172A;--muted:#64748B;--ok:#12B76A;--warn:#F79009;--err:#F04438;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink);font-family:'Inter','Hind Siliguri',system-ui,sans-serif;font-size:14.5px}
a{color:var(--royal);text-decoration:none}
.sidebar{position:fixed;inset:0 auto 0 0;width:264px;background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%);color:#cbd5e1;overflow-y:auto;z-index:1040;transition:transform .25s}
.sidebar .brand{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar .brand img{width:42px;height:42px;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 22px rgba(21,94,239,.55)}
.sidebar .brand b{display:block;color:#fff;font-size:16px;letter-spacing:.3px}
.sidebar .brand small{color:#7C8BA8;font-size:11.5px}
.nav-group{padding:14px 14px 4px;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#5B6B8C;font-weight:600}
.sidebar a.nav-i{display:flex;align-items:center;gap:12px;margin:2px 10px;padding:9px 12px;border-radius:10px;color:#AAB6CE;font-weight:500;transition:.15s}
.sidebar a.nav-i i{font-size:17px;width:20px;text-align:center}
.sidebar a.nav-i:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar a.nav-i.active{background:linear-gradient(90deg,var(--royal),var(--indigo));color:#fff;box-shadow:0 6px 18px rgba(21,94,239,.35)}
.sidebar .badge-n{margin-left:auto;background:var(--err);color:#fff;border-radius:20px;font-size:11px;padding:1px 7px}
.main{margin-left:264px;min-height:100vh}
.topbar{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:12px 28px;display:flex;align-items:center;gap:14px}
.topbar h1{font-size:19px;margin:0;font-weight:700}
.topbar .sub{color:var(--muted);font-size:12.5px}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--royal),var(--purple));color:#fff;display:grid;place-items:center;font-weight:700}
.content{padding:26px 28px 60px}
.cardx{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.cardx .hd{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cardx .hd h5{margin:0;font-size:15.5px;font-weight:700}
.cardx .bd{padding:20px}
.stat{padding:18px 20px;display:flex;gap:16px;align-items:center;position:relative;overflow:hidden}
.stat .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:22px;color:#fff;flex:none}
.stat .n{font-size:24px;font-weight:800;line-height:1.1}
.stat .l{color:var(--muted);font-size:12.5px}
.g-blue{background:linear-gradient(135deg,#155EEF,#2E90FA)}.g-cyan{background:linear-gradient(135deg,#06B6D4,#22D3EE)}
.g-purple{background:linear-gradient(135deg,#7C3AED,#A78BFA)}.g-green{background:linear-gradient(135deg,#12B76A,#34D399)}
.g-amber{background:linear-gradient(135deg,#F79009,#FBBF24)}.g-red{background:linear-gradient(135deg,#F04438,#FB7185)}
.table-x{width:100%;border-collapse:separate;border-spacing:0}
.table-x th{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;padding:11px 14px;background:#F8FAFD;border-bottom:1px solid var(--line);white-space:nowrap}
.table-x td{padding:12px 14px;border-bottom:1px solid #EEF2F8;vertical-align:middle}
.table-x tr:hover td{background:#FAFCFF}
.table-wrap{overflow-x:auto}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.p-ok{background:#ECFDF3;color:#067647}.p-warn{background:#FFFAEB;color:#B54708}.p-err{background:#FEF3F2;color:#B42318}
.p-info{background:#EFF8FF;color:#175CD3}.p-gray{background:#F2F4F7;color:#475467}.p-purple{background:#F4F3FF;color:#5925DC}
.btn-royal{background:linear-gradient(90deg,var(--royal),var(--indigo));color:#fff;border:0;font-weight:600;border-radius:10px;padding:8px 18px}
.btn-royal:hover{color:#fff;filter:brightness(1.08)}
.btn-soft{background:#EEF4FF;color:var(--royal);border:0;border-radius:9px;font-weight:600}
.btn-soft:hover{background:#DDE9FF;color:var(--royal-d)}
.form-control,.form-select{border-radius:10px;border-color:#D5DCE8;padding:9px 12px}
.form-control:focus,.form-select:focus{border-color:var(--royal);box-shadow:0 0 0 4px rgba(21,94,239,.12)}
.form-label{font-weight:600;font-size:12.5px;color:#344054;margin-bottom:5px}
.form-text{font-size:11.5px}
.thumb{width:64px;height:36px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.swatch{display:inline-block;width:16px;height:16px;border-radius:5px;border:1px solid rgba(0,0,0,.15);vertical-align:-3px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.empty{text-align:center;color:var(--muted);padding:46px 10px}
.empty i{font-size:38px;display:block;margin-bottom:8px;opacity:.5}
.menu-btn{display:none;border:0;background:#EEF2F8;border-radius:10px;width:38px;height:38px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 14px;font-size:13.5px}.kv dt{color:var(--muted);font-weight:500}.kv dd{margin:0}
.timeline{list-style:none;margin:0;padding:0}.timeline li{position:relative;padding:0 0 14px 22px;border-left:2px solid var(--line);margin-left:6px}
.timeline li:before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--royal);box-shadow:0 0 0 3px #DCE8FF}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1000px 500px at 15% 10%,rgba(21,94,239,.35),transparent),radial-gradient(800px 500px at 90% 90%,rgba(124,58,237,.35),transparent),var(--navy)}
.login-card{width:100%;max-width:430px;background:rgba(255,255,255,.97);border-radius:22px;padding:36px 34px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.login-card .logo{width:74px;height:74px;border-radius:20px;margin:0 auto 14px;display:block;box-shadow:0 0 34px rgba(21,94,239,.55)}
@media(max-width:991px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:none}.main{margin-left:0}.menu-btn{display:grid;place-items:center}.content{padding:18px 14px 50px}.topbar{padding:10px 14px}}