body{margin:0;background:#777;font-family:Arial}
.app{display:flex;padding:40px;gap:40px;height:100vh;box-sizing:border-box}
.sidebar{width:360px;background:#d2d2d2;padding:25px;display:flex;flex-direction:column;gap:18px}
.category{height:80px;width:230px;background:#5d5d5d;color:#fff;border:0;font-size:30px;
transition:.25s;text-align:left;padding-left:25px;cursor:pointer}
.category:hover{background:#6d6d6d;transform:translateX(4px)}
.category.active{background:#0050c8;width:100%;padding-left:35px}
#content{flex:1}
.progress{color:#fff;font-size:24px;font-weight:bold;margin-bottom:15px}
.bar{height:12px;background:#bbb;margin-bottom:20px}
.fill{height:100%;width:0;background:#fff;transition:.2s}
.cols{display:flex;gap:30px;height:calc(100vh - 150px)}
.panel{flex:1;background:#0050c8;padding:20px;overflow:auto}
.rule{display:flex;justify-content:space-between;color:#fff;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.3)}