:root{--navy:#0f172a;--navy2:#172033;--blue:#2563eb;--bg:#f4f7fb;--card:#fff;--line:#e5eaf1;--text:#111827;--muted:#667085;--green:#16a34a;--amber:#d97706;--red:#dc2626;--shadow:0 8px 24px rgba(15,23,42,.06)}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}a{color:inherit}.topbar{height:70px;background:linear-gradient(135deg,#0b1220,#172033);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 4%;box-shadow:0 2px 12px rgba(0,0,0,.12)}.brand{display:flex;align-items:center;gap:12px}.brandmark{width:38px;height:38px;border-radius:11px;background:#fff;color:var(--navy);display:grid;place-items:center;font-weight:900}.brand strong{font-size:16px}.brand small{display:block;color:#aeb8c8;margin-top:2px}.version{font-size:12px;padding:6px 10px;border:1px solid #344055;border-radius:20px;color:#d8deea}.layout{width:92%;max-width:1500px;margin:24px auto 40px}.navtabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px}.navtabs a{padding:10px 14px;border-radius:9px;text-decoration:none;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;color:#344054}.navtabs a:hover{border-color:#aeb8c8;box-shadow:0 4px 12px rgba(15,23,42,.05)}.pagehead{display:flex;justify-content:space-between;align-items:flex-end;margin:0 0 20px}.pagehead h1{font-size:24px;margin:0 0 5px}.pagehead p{margin:0;color:var(--muted);font-size:14px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.metric{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}.metric:after{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;background:#f0f4ff}.metric .label{color:var(--muted);font-size:13px}.metric .value{font-size:28px;font-weight:750;margin-top:10px}.metric .sub{font-size:12px;color:#98a2b3;margin-top:6px}.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);margin-top:18px}.panelhead{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}.panel h2{font-size:17px;margin:0}.muted{color:var(--muted)}.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--navy);color:#fff;border:0;border-radius:8px;padding:9px 13px;text-decoration:none;cursor:pointer;font-weight:650;font-size:13px}.btn.secondary,button.secondary{background:#fff;color:#344054;border:1px solid #d0d5dd}.btn.danger,button.danger{background:#fff;color:var(--red);border:1px solid #fecaca}.btn.warn,button.warn{background:#fff;color:var(--amber);border:1px solid #fed7aa}.formgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.field label{display:block;font-size:12px;font-weight:700;color:#475467;margin-bottom:6px}.field input,.field select,.field textarea,input,select,textarea{width:100%;padding:10px 11px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:#101828;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#84adff;box-shadow:0 0 0 3px #eff4ff}.span2{grid-column:span 2}.span4{grid-column:span 4}table{width:100%;border-collapse:collapse;font-size:13px}th{color:#667085;font-weight:650;background:#f8fafc;text-align:left}th,td{padding:12px 11px;border-bottom:1px solid #edf0f4;vertical-align:middle}tr:last-child td{border-bottom:0}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:750;text-transform:capitalize}.badge.active{background:#ecfdf3;color:#027a48}.badge.suspended{background:#fff7ed;color:#c2410c}.badge.revoked{background:#fef2f2;color:#b42318}.notice{padding:12px 14px;border-radius:9px;margin-bottom:15px;background:#eff6ff;color:#1d4ed8;border:1px solid #dbeafe}.notice.error{background:#fef2f2;color:#b42318;border-color:#fee2e2}.twocol{display:grid;grid-template-columns:2fr 1fr;gap:18px}.empty{padding:34px;text-align:center;color:#98a2b3}.footer{margin-top:34px;border-top:1px solid #dde3eb;padding:22px 0;color:#7b8494;font-size:12px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}.footer strong{color:#475467}.progress{height:7px;background:#eef2f6;border-radius:20px;overflow:hidden;margin-top:9px}.progress span{display:block;height:100%;background:#2563eb;border-radius:20px}.actions{display:flex;gap:5px;flex-wrap:wrap}.kpi-green .value{color:#15803d}.kpi-amber .value{color:#c2410c}.kpi-red .value{color:#b91c1c}.loginwrap{min-height:100vh;display:grid;place-items:center;padding:25px;background:radial-gradient(circle at top right,#dbeafe,transparent 35%),var(--bg)}.loginbox{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:0 24px 60px rgba(15,23,42,.12)}.loginbox h1{font-size:23px;margin:18px 0 6px}.loginbox p{color:var(--muted);font-size:13px;margin:0 0 22px}.loginbox input{margin-bottom:12px}.loginbox button{width:100%;padding:11px}.loginbrand{display:flex;align-items:center;gap:10px}.loginbrand .brandmark{background:var(--navy);color:#fff}@media(max-width:1000px){.grid,.formgrid{grid-template-columns:repeat(2,1fr)}.twocol{grid-template-columns:1fr}.span4{grid-column:span 2}}@media(max-width:650px){.layout{width:94%}.grid,.formgrid{grid-template-columns:1fr}.span2,.span4{grid-column:span 1}.topbar{padding:0 3%}.panel{padding:15px}.tablewrap{overflow:auto}.pagehead{align-items:flex-start;flex-direction:column;gap:10px}}