:root{
 --navy:#06284f;--navy2:#0a3c73;--blue:#1677ff;--sky:#eef6ff;--green:#19b66a;--red:#ee4455;
 --amber:#f5a623;--purple:#7557e6;--ink:#142033;--muted:#68768a;--line:#e6ebf2;--card:#fff;
 --bg:#f4f7fb;--shadow:0 12px 30px rgba(15,45,80,.09)
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select{font:inherit}.hidden{display:none!important}
.demo-login{min-height:100vh;display:grid;grid-template-columns:1.2fr .8fr;background:
 radial-gradient(circle at 20% 15%,rgba(31,137,255,.18),transparent 34%),
 linear-gradient(135deg,#03172e,#073f79 60%,#0b6e78)}
.login-hero{padding:7vw;color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.login-hero:after{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-100px;bottom:-120px}
.brandline{display:flex;align-items:center;gap:18px;margin-bottom:34px}.brandline img{width:74px;height:74px;object-fit:contain;background:#fff;border-radius:20px;padding:8px}
.brandline b{font-size:31px}.brandline small{display:block;opacity:.8;margin-top:4px}
.login-hero h1{font-size:clamp(38px,5vw,72px);line-height:1.02;margin:0 0 18px;max-width:780px}.login-hero p{font-size:19px;line-height:1.6;max-width:700px;color:#d7e9ff}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.pill{padding:9px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);font-size:13px}
.login-side{background:#f8fbff;padding:6vw 5vw;display:flex;align-items:center}.login-card{width:100%;max-width:470px;margin:auto;background:#fff;border:1px solid #e8edf5;border-radius:26px;padding:36px;box-shadow:0 30px 80px rgba(0,28,65,.2)}
.demo-badge{display:inline-flex;gap:8px;align-items:center;background:#eef6ff;color:#0c66d6;padding:7px 11px;border-radius:999px;font-weight:700;font-size:12px}
.login-card h2{font-size:30px;margin:16px 0 8px}.login-card p{color:var(--muted);margin:0 0 26px}
.field{margin:14px 0}.field label{font-size:13px;font-weight:700;display:block;margin-bottom:7px}.field input{width:100%;height:48px;border:1px solid #dbe3ef;border-radius:12px;padding:0 14px;outline:none}.field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1677ff18}
.primary{border:0;background:linear-gradient(135deg,#0868ea,#1987ff);color:#fff;font-weight:800;border-radius:12px;padding:13px 18px;cursor:pointer;box-shadow:0 8px 20px rgba(22,119,255,.24)}.primary.full{width:100%;margin-top:10px}
.demo-creds{margin-top:18px;background:#f6f9fd;border:1px dashed #cdd9e8;border-radius:12px;padding:13px;color:#55657b;font-size:13px}
.app{min-height:100vh;display:grid;grid-template-columns:260px 1fr}
.sidebar{background:linear-gradient(180deg,#041d39,#063360 66%,#041a31);color:#fff;position:sticky;top:0;height:100vh;padding:16px 12px;overflow:auto}
.sidebrand{display:flex;align-items:center;gap:11px;padding:7px 8px 18px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:13px}.sidebrand img{width:46px;height:46px;background:#fff;border-radius:12px;padding:4px}.sidebrand b{display:block;font-size:16px}.sidebrand small{color:#9fc0e0}
.navgroup{color:#45da8c;font-size:11px;font-weight:800;letter-spacing:.09em;padding:16px 12px 7px}.navbtn{width:100%;display:flex;align-items:center;gap:11px;color:#dceafa;border:0;background:transparent;text-align:left;padding:11px 12px;border-radius:10px;cursor:pointer;margin:2px 0;font-size:14px}.navbtn:hover,.navbtn.active{background:linear-gradient(90deg,#0d68e4,#1686ff);color:#fff}.navbtn .ico{width:24px;text-align:center;font-size:18px}
.sidefoot{margin-top:28px;padding:12px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.04);font-size:11px;color:#aac3dc}.sidefoot b{color:#fff;display:block;margin-bottom:3px}
.main{min-width:0}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;gap:16px;position:sticky;top:0;z-index:20}.search{max-width:460px;flex:1;background:#f7f9fc;border:1px solid #e4e9f0;border-radius:12px;padding:11px 14px;color:#7b8796}.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.iconbtn{width:40px;height:40px;border:1px solid #e4e9f0;border-radius:11px;background:#fff;cursor:pointer}.userchip{display:flex;align-items:center;gap:9px;padding-left:8px}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0c69e8,#4eb1ff);color:#fff;font-weight:800}.userchip b{font-size:13px}.userchip small{display:block;color:#7b8794;font-size:10px;margin-top:2px}
.content{padding:22px}.page{display:none}.page.active{display:block}.headrow{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}.headrow h1{margin:0;font-size:25px}.headrow p{margin:4px 0 0;color:var(--muted);font-size:13px}
.demo-strip{background:linear-gradient(90deg,#fff8dc,#fff3c0);border:1px solid #f4d569;color:#72570d;padding:9px 14px;border-radius:11px;font-size:12px;margin-bottom:16px;display:flex;justify-content:space-between;gap:12px}
.grid6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.metric{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}.metric .top{display:flex;justify-content:space-between;align-items:center;color:#445267;font-size:12px;font-weight:700}.metric .num{font-size:25px;font-weight:850;margin:9px 0}.metric .delta{font-size:11px;color:var(--green)}.bubble{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px}.blue{background:#e7f2ff;color:#1573eb}.green{background:#e6f8ee;color:#13a45d}.red{background:#ffe9ec;color:#df3347}.amber{background:#fff2dd;color:#ee9014}.purple{background:#efeaff;color:#6d4bdb}
.layout3{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px;margin-top:14px}.card{background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);padding:17px}.card h3{margin:0 0 15px;font-size:15px;color:#0e64c8}.chart{height:210px;display:flex;align-items:flex-end;gap:16px;padding:18px 8px 26px;border-bottom:1px solid #dfe6ee;position:relative}.bar{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#1b82ff,#0d61d2);min-width:22px;position:relative}.bar:nth-child(2n){background:linear-gradient(180deg,#27c878,#119a55)}.bar label{position:absolute;bottom:-22px;width:100%;text-align:center;font-size:10px;color:#6f7d90}
.quickgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick{border:1px solid #e5eaf1;border-radius:12px;padding:14px;background:#fbfdff}.quick b{font-size:13px;display:block;margin-bottom:5px}.quick small{color:#7b8796}.alert{border-radius:12px;padding:13px;margin:9px 0;font-size:12px;border:1px solid}.alert.redish{background:#fff0f2;border-color:#ffd5da;color:#9f2f3d}.alert.yellow{background:#fff8e8;border-color:#ffe4aa;color:#8f6511}.alert.bluish{background:#eef6ff;border-color:#d7e9ff;color:#205e9e}
.tablewrap{overflow:auto}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:13px}.toolbar input,.toolbar select{height:39px;border:1px solid #dfe6ef;border-radius:10px;padding:0 11px;background:#fff}.secondary{border:1px solid #bcd1ec;color:#0d64ce;background:#fff;border-radius:10px;padding:9px 13px;font-weight:700;cursor:pointer}
table{border-collapse:collapse;width:100%;font-size:12px}th{text-align:left;background:#f5f8fc;color:#506078;padding:11px;border-bottom:1px solid #dde5ee}td{padding:11px;border-bottom:1px solid #edf1f5}.status{padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800}.ok{background:#e7f7ef;color:#11995a}.late{background:#fff0de;color:#d9790b}.bad{background:#ffeaed;color:#d52b43}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.formgrid .field input,.formgrid .field select{width:100%;height:43px;border:1px solid #dbe3ed;border-radius:10px;padding:0 11px;background:#fff}
.reportgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.report{padding:18px;border:1px solid var(--line);border-radius:15px;background:#fff;text-align:center}.report .ricon{font-size:28px}.report h4{margin:10px 0 6px}.report p{font-size:11px;color:var(--muted);min-height:32px}
.overlay{position:fixed;inset:0;background:#07192ccc;display:grid;place-items:center;z-index:99}.modal{background:#fff;border-radius:20px;max-width:480px;width:92%;padding:27px;box-shadow:0 30px 80px #0005}.modal h3{margin-top:0}.modal p{color:#617085}
@media(max-width:1180px){.grid6{grid-template-columns:repeat(3,1fr)}.layout3{grid-template-columns:1fr 1fr}.layout3 .card:first-child{grid-column:1/-1}.reportgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.demo-login{grid-template-columns:1fr}.login-hero{display:none}.app{grid-template-columns:1fr}.sidebar{position:fixed;left:-270px;z-index:40;width:260px;transition:.25s}.sidebar.open{left:0}.grid6{grid-template-columns:repeat(2,1fr)}.layout3{grid-template-columns:1fr}.layout3 .card:first-child{grid-column:auto}.formgrid{grid-template-columns:1fr}.content{padding:14px}.userchip div:last-child{display:none}}