*{box-sizing:border-box}body{margin:0;font:14px Arial;background:#eef2f5;color:#24313d}aside{position:fixed;width:230px;inset:0 auto 0 0;background:#17232c;color:white;padding:18px}aside h2{font-size:17px}.who{padding:15px 0;border-bottom:1px solid #40505b}.who small{display:block;color:#91a3ae;margin-top:5px}nav a,.logout{display:block;color:#d7e0e5;text-decoration:none;padding:11px;border-radius:6px;margin:4px 0}nav a:hover{background:#138ed1;color:white}.logout{position:absolute;bottom:15px}main{margin-left:230px;padding:18px}header{height:48px;display:flex;justify-content:space-between;align-items:center;background:white;padding:0 16px;margin:-18px -18px 18px;box-shadow:0 1px 4px #ccd}header span{font-size:12px;color:#d27a00}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{background:#fff;border-radius:7px;padding:20px;box-shadow:0 2px 8px #d7dfe4}.card strong{display:block;font-size:25px}.card span{color:#657580}.green{background:#45c96b;color:white}.red{background:#ff5252;color:white}.cyan{background:#24c6d9;color:white}.gold{background:#f4b72f}.green span,.red span,.cyan span{color:white}.grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}.panel{background:white;margin-top:14px;padding:16px;border-radius:7px;box-shadow:0 2px 8px #d7dfe4}.panel h3{margin-top:0}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid #e4eaee}.up{background:#34c97b;color:white;padding:4px 8px;border-radius:10px}.donut{width:130px;height:130px;border:18px solid #67ca57;border-radius:50%;margin:15px auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.donut b{font-size:25px}.formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}label{display:block;font-weight:bold}input,select{width:100%;padding:10px;margin-top:5px;border:1px solid #ccd5da;border-radius:5px}button,.btn{background:#138ed1;color:white;border:0;border-radius:5px;padding:11px 18px;text-decoration:none;cursor:pointer}.notice,.ok,.err{padding:12px;border-radius:5px;margin:12px 0}.notice{background:#fff4d8}.ok{background:#dcf7e5}.err{background:#ffe0e0;color:#a00}.loginbg{min-height:100vh;display:grid;place-items:center;background:#17232c}.loginbox{width:min(410px,92vw);background:white;padding:28px;border-radius:10px}.loginbox button{width:100%;margin-top:15px}.loginbox hr{border:0;border-top:1px solid #ddd;margin:20px 0}.scroll{overflow:auto}@media(max-width:850px){aside{position:relative;width:100%;height:auto}.logout{position:static}main{margin:0}.cards{grid-template-columns:repeat(2,1fr)}.grid,.formgrid{grid-template-columns:1fr}header span{display:none}}