*{box-sizing:border-box}body{margin:0;background:#0b1020;color:#edf2ff;font:15px system-ui;display:grid;grid-template-columns:234px minmax(0,1fr);min-height:100vh}aside{background:#11182a;border-right:1px solid #253047;padding:27px 16px}strong{font-size:23px;color:#71e6ce}small{font-size:11px;letter-spacing:.14em}aside p,header,footer{font-size:11px;letter-spacing:.13em;color:#a0aec9}aside p{margin:36px 0 12px}nav{display:grid;gap:4px}button,input,select,textarea{font:inherit}nav button{text-align:left;background:transparent;color:#aebbd4;border:0;padding:10px 12px}button{cursor:pointer;border:0;border-radius:8px;padding:10px 15px;background:#70e6ce;color:#09221e;font-weight:650}nav button.active,nav button:hover{background:#203c47;color:#83edd8}main{padding:0 32px}header{border-bottom:1px solid #253047;padding:25px 0;display:flex;justify-content:space-between;gap:10px}header span{color:#70e6ce}.intro{padding:30px 0 15px}.intro small{color:#70e6ce}h1{font-size:38px;margin:8px 0}p,li{color:#b0bdd6;line-height:1.6}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:14px}.card,form,article{background:#141d32;border:1px solid #28354f;border-radius:12px;padding:18px;margin-bottom:14px}.card b{font-size:30px;display:block;margin:8px 0;color:#70e6ce}h2{font-size:18px;margin-top:0}label{display:block;margin:10px 0}input,textarea,select{background:#0c1427;border:1px solid #384765;border-radius:7px;color:#fff;padding:10px;max-width:100%}input:not([type=checkbox]),textarea,select{display:block;width:100%;margin-top:5px}textarea{min-height:90px}footer{margin:35px 0}#notice:not(:empty){background:#233d49;padding:12px;border-radius:8px;margin-bottom:14px}.muted{color:#a0aec9}.row{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}@media(max-width:700px){body{display:block}aside{padding:16px}nav{display:flex;overflow:auto}nav button{white-space:nowrap}aside p{margin:12px 0}main{padding:0 16px}}

.logout{margin:0;padding:0;background:transparent;border:0}.logout button{padding:5px 12px}button:disabled{opacity:.55;cursor:wait}

body.login{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:24px;min-height:100vh}
.login main{width:min(100%,440px);padding:0}
.login .intro{padding:0 0 16px}
.login h1{font-size:clamp(26px,6vw,38px)}
.login form{padding:24px;margin:0}
.login button{width:100%;margin-top:10px}
.login [role=alert]{color:#ffb4ad}