:root{font-family:Arial,sans-serif;color:#26364a;background:#f5f7fa}*{box-sizing:border-box}body{margin:0;display:flex}aside{width:240px;min-height:100vh;background:#17232b;color:#fff;padding:28px 18px}aside h1{margin:0;color:#35c77a}aside p{color:#b8c4cc;margin-top:4px}nav{margin-top:42px;display:grid;gap:8px}nav a{padding:13px;border-radius:7px;color:#dce5ea}nav .active{background:#159957;color:white}main{flex:1;padding:22px 34px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:38px}header input{width:520px;padding:13px 18px;border:1px solid #dbe3ea;border-radius:8px}.title{display:flex;justify-content:space-between;align-items:center}.title h2{font-size:30px;margin:0}.title p{color:#697b8b}button{background:#159957;border:0;color:white;padding:13px 20px;border-radius:7px;font-size:15px}.filters{display:grid;grid-template-columns:1fr 1fr 1fr 2fr;gap:14px;background:white;padding:16px;border:1px solid #e0e7ed;border-radius:10px;margin:24px 0}.filters input,.filters select{padding:12px;border:1px solid #dbe3ea;border-radius:7px;background:white;color:#4c5d6d}.card{background:#fff;border:1px solid #e0e7ed;border-radius:10px;overflow:auto}table{width:100%;border-collapse:collapse;min-width:850px}th,td{text-align:left;padding:17px;border-bottom:1px solid #edf1f4}th{background:#eef3f7;color:#405365}small{color:#718292}.pill{display:inline-block;padding:7px 13px;border-radius:16px;font-weight:bold;font-size:13px}.gray{background:#e9eef3;color:#526273}.green{background:#d9f5e5;color:#16824b}@media(max-width:800px){aside{width:70px}aside h1,aside p,nav a{font-size:0}main{padding:16px}.filters{grid-template-columns:1fr}}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.metrics>div{background:#fff;border:1px solid #e0e7ed;border-radius:10px;padding:18px 20px;box-shadow:0 2px 12px rgba(25,45,75,.05)}.metrics small{display:block;color:#697b8b;margin-bottom:10px}.metrics strong{font-size:28px;color:#24364b}.green-text{color:#159957!important}.blue-text{color:#2f80ed!important}
@media(max-width:900px){.metrics{grid-template-columns:repeat(2,1fr)}}