*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#172033;font:14px Arial,sans-serif}aside{position:fixed;width:230px;top:0;bottom:0;background:#101a31;color:#cbd4e8;padding:22px 14px}.brand{font-size:19px;color:white;margin:0 8px 28px}.brand b{color:#7557ff}nav button{display:block;width:100%;text-align:left;border:0;background:none;color:#aebbd4;padding:11px 13px;border-radius:10px;margin:3px 0;cursor:pointer}nav button:hover,nav button.active{background:#243354;color:white}header{height:72px;margin-left:230px;background:white;border-bottom:1px solid #e5e9f2;display:flex;align-items:center;gap:14px;padding:0 28px}header input{max-width:520px;flex:1;padding:12px 15px;border:1px solid #e0e5ee;border-radius:12px}button{cursor:pointer}header button,.primary,.dialog button{border:0;background:linear-gradient(135deg,#6d4cff,#4776ff);color:white;padding:12px 18px;border-radius:11px;font-weight:700}main{margin-left:230px;padding:28px}.hero{display:flex;justify-content:space-between;align-items:center}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0}.card,.panel{background:white;border:1px solid #e7eaf2;border-radius:18px;padding:20px;box-shadow:0 8px 24px #1d2b4b0a}.metric{font-size:25px;font-weight:800;margin:12px 0}.up{color:#13a65a}.chart{height:230px;background:linear-gradient(180deg,#7257ff12,transparent);border-radius:14px;display:flex;align-items:end;padding:20px;gap:9px}.bar{flex:1;background:linear-gradient(#6b54ff,#3e8cff);border-radius:7px 7px 2px 2px}.grid2{display:grid;grid-template-columns:2fr 1fr;gap:16px}table{width:100%;border-collapse:collapse}td,th{padding:12px;border-bottom:1px solid #edf0f5;text-align:left}.modal{position:fixed;inset:0;background:#0b102066;display:grid;place-items:center}.hidden{display:none}.dialog{width:min(480px,90vw);background:white;border-radius:20px;padding:26px;position:relative}.dialog input{width:100%;padding:13px;margin:12px 0;border:1px solid #dfe4ed;border-radius:10px}.x{position:absolute;right:15px;top:12px;background:none!important;color:#333!important;font-size:22px}.placeholder{padding:55px;text-align:center;color:#71809d}@media(max-width:900px){aside{width:75px}.brand{font-size:0}.brand b{font-size:24px}nav button{font-size:0}header,main{margin-left:75px}.cards{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}}