*{box-sizing:border-box;font-family:Inter,Arial,sans-serif}
body{margin:0;background:#f8fafc;color:#0f172a}
.app{display:flex;min-height:100vh}
aside{width:250px;background:#0f172a;color:white;padding:25px}
aside h2{margin-bottom:35px}
aside a{display:block;padding:14px;border-radius:12px;margin:8px 0;color:#cbd5e1}
aside .active{background:#10b981;color:white}
main{flex:1;padding:35px}
.top{margin-bottom:25px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{padding:25px;border-radius:20px;color:white;font-size:16px;box-shadow:0 10px 25px #0001}
.card b{display:block;font-size:26px;margin-top:10px}
.green{background:#10b981}.blue{background:#2563eb}.red{background:#ef4444}.orange{background:#f59e0b}
.panel{margin-top:25px;background:white;border-radius:20px;padding:25px;box-shadow:0 5px 20px #0001}
@media(max-width:800px){
.app{display:block}
aside{width:100%;display:flex;gap:5px;overflow:auto}
aside h2{display:none}
aside a{white-space:nowrap}
main{padding:20px}
.cards{grid-template-columns:1fr}
}