*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#17243c;font:14px Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.layout{display:flex;min-height:100vh}.side{width:250px;background:#101c31;color:#fff;padding:24px 14px;flex-shrink:0}.brand{font-size:19px;font-weight:800;padding:12px;margin-bottom:24px}.brand small{display:block;font-size:11px;color:#9cb3d3;margin-top:5px}.nav{display:block;width:100%;text-align:left;border:0;background:transparent;color:#bdcbe0;padding:13px 15px;border-radius:9px;margin:3px 0}.nav.active,.nav:hover{background:#283b5a;color:white}.main{flex:1 1;min-width:0;padding:26px;max-width:1700px}.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}h1{font-size:27px;margin:0 0 7px}h2{font-size:17px;margin:0 0 18px}p{color:#72809a;line-height:1.6}.demo{background:#e9f1ff;color:#3358a1;border-radius:18px;padding:8px 12px;font-size:11px;font-weight:700}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:14px;gap:14px}.card{background:#fff;border:1px solid #e5eaf3;border-radius:14px;padding:20px;box-shadow:0 3px 12px #15233a08;margin-bottom:16px}.metric small{color:#7b89a0}.metric strong{display:block;font-size:25px;margin:12px 0}.green{color:#149a78}.red{color:#d04d57}.grid{display:grid;grid-template-columns:1.3fr 1fr;grid-gap:16px;gap:16px;margin-top:16px}.bars{display:flex;align-items:end;gap:12px;height:190px;border-bottom:1px solid #e2e8f0;padding:15px 5px 0}.bar{flex:1 1;background:linear-gradient(#477af2,#c4d8ff);border-radius:5px 5px 0 0;min-width:9px}.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #edf0f5}.row:last-child{border:0}.row small{display:block;color:#7c8aa0;margin-top:5px}.pill{border-radius:20px;background:#fff1df;color:#9b6425;padding:6px 10px;font-size:11px}.pill.bad{background:#ffebed;color:#c04450}.pill.good{background:#e2f8ef;color:#158c6c}.btn{border:0;border-radius:8px;padding:10px 14px;background:#4d72e9;color:white}.btn.alt{background:#edf2fc;color:#3557ac}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.filter{padding:9px;border:1px solid #dfe5ef;border-radius:8px;background:white}.table{width:100%;border-collapse:collapse}.table td,.table th{text-align:left;padding:13px;border-bottom:1px solid #edf0f5}.table th{font-size:11px;color:#718099;background:#f9fbfd}.muted{color:#78869b}.banner{background:#eef3ff;border-left:4px solid #5476ee;padding:14px;border-radius:8px;margin:16px 0}.columns{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:14px;gap:14px}.input{border:1px solid #dce4ee;border-radius:7px;padding:10px;width:100%;margin-top:6px}.label{display:block;color:#63728c;margin:12px 0}.rank{font-size:23px;margin-right:10px}footer{color:#98a4b5;text-align:center;padding:20px}@media(max-width:900px){.side{width:205px}.grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.layout{display:block}.side{width:auto}.side nav{display:flex;overflow:auto}.nav{min-width:max-content}.main{padding:15px}.columns,.metrics{grid-template-columns:1fr}.table{font-size:11px}}