*{box-sizing:border-box}body{margin:0;font-family:Tahoma,Arial,sans-serif;background:#f4f7fa;color:#17202a}.app{display:flex;min-height:100vh}aside{width:240px;background:#123f5c;color:white;padding:28px 18px;position:fixed;right:0;top:0;bottom:0}.logo{font-size:24px;font-weight:900;margin:0 10px 35px}.logo span{font-weight:400}nav{display:grid;gap:8px}nav button{background:transparent;color:white;border:0;text-align:right;padding:13px 12px;border-radius:10px;font-size:15px;cursor:pointer}nav button:hover{background:rgba(255,255,255,.1)}.side-note{position:absolute;bottom:28px;font-size:12px;opacity:.7;line-height:1.8}main{margin-right:240px;width:calc(100% - 240px);padding:0 5%}header{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e3e8ee}header h2{margin:3px 0}small{color:#64748b}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#dfeaf0;color:#123f5c;font-weight:bold}.big{width:75px;height:75px;font-size:24px;margin:auto}.page{display:none;padding:42px 0;max-width:1050px;margin:auto}.page.active{display:block}.hero{background:white;border:1px solid #e1e7ec;border-radius:22px;padding:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}.hero h1{font-size:38px;margin:15px 0 8px}.hero p{color:#64748b}.pill{background:#e8f1f6;color:#123f5c;border-radius:30px;padding:7px 13px;font-size:13px}.primary{background:#123f5c;color:#fff;border:0;border-radius:11px;padding:14px 22px;font-size:15px;cursor:pointer}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:18px}.card{background:#fff;border:1px solid #e1e7ec;border-radius:17px;padding:22px;margin-top:18px}.grid .card{margin-top:0}.card strong{display:block;font-size:23px;margin:10px 0}.card em{font-style:normal;font-size:12px;color:#8b98a5}.section-title h1{font-size:31px;margin-bottom:5px}.section-title p{color:#64748b}.form{max-width:700px;display:grid;gap:14px}.form label{font-weight:bold;display:grid;gap:8px}.form input,.form select{padding:13px;border:1px solid #ccd6df;border-radius:10px;font-size:15px;background:#fff}.bar{height:12px;background:#e4ebf0;border-radius:20px;margin:7px 0 17px;overflow:hidden}.fill{height:100%;background:#123f5c}.notice{background:#fff5e9;color:#9a4d00;padding:16px;border-radius:12px;margin-top:18px}.table div{padding:15px 0;border-bottom:1px solid #edf1f4;display:flex;justify-content:space-between}.table div:last-child{border:0}.table span{color:#64748b;font-size:12px}.profile{text-align:center;max-width:450px}.profile p{color:#64748b}footer{text-align:center;color:#8b98a5;padding:25px 0;font-size:12px}@media(max-width:800px){aside{width:100%;height:auto;position:relative;padding:15px;display:flex;align-items:center;justify-content:space-between}.logo{margin:0}.side-note{display:none}nav{display:flex;overflow:auto}nav button{white-space:nowrap}.app{display:block}main{margin:0;width:100%;padding:0 18px}header{height:70px}.grid{grid-template-columns:1fr 1fr}.hero{display:block}.hero h1{font-size:30px}}@media(max-width:500px){.grid{grid-template-columns:1fr}.page{padding:25px 0}}