*{box-sizing:border-box}body{margin:0;font-family:system-ui;background:#f5f7f6;color:#173d2e}a{color:#0d7654}.auth{min-height:100vh;display:grid;place-items:center}.card,section,.metrics>div{background:#fff;border:1px solid #dfe9e4;border-radius:16px;padding:18px}.card{width:min(440px,92%)}label{display:block;margin-top:12px;font-weight:700}input,select{width:100%;padding:12px;border:1px solid #d5e2db;border-radius:10px}.btn{display:inline-block;margin-top:15px;width:100%;padding:12px;border:0;border-radius:10px;background:#0f865e;color:#fff;text-align:center;font-weight:800}.err,.ok{padding:10px;margin:10px 0;border-radius:10px}.err{background:#fff0f0}.ok{background:#edf9f2}.layout{display:grid;grid-template-columns:220px 1fr;min-height:100vh}aside{background:#153d2f;color:#fff;padding:20px}aside a{display:block;color:#dceae4;text-decoration:none;padding:10px;border-radius:9px}aside a.on{background:#ffffff17}main{padding:24px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metrics span{color:#6f7d76}.metrics b{display:block;font-size:28px}.two{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-top:12px}.bar{display:grid;grid-template-columns:55px 1fr 35px;gap:8px;align-items:center;margin:8px 0}.bar i{height:12px;background:#edf2ef;border-radius:99px;overflow:hidden}.bar em{display:block;height:100%;background:#0f865e}@media(max-width:800px){.layout{grid-template-columns:1fr}aside{display:flex;gap:8px;align-items:center}.metrics{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}main{padding:14px}}