*{box-sizing:border-box}html,body{color:#10233f;background:#f2f6fb;min-height:100%;margin:0;font-family:Tahoma,Arial,sans-serif}button,input{font:inherit}.login-page{background:radial-gradient(circle at 20% 15%,#1678ca 0,#0000 28%),linear-gradient(135deg,#06182d,#0a315b 60%,#0e5a91);place-items:center;min-height:100vh;padding:22px;display:grid}.login-card{background:#fff;border-radius:32px;width:min(440px,100%);padding:34px;box-shadow:0 30px 80px #00142d77}.brand{align-items:center;gap:12px;display:flex}.brand>span{color:#fff;background:linear-gradient(145deg,#15a5ef,#063b82);border-radius:16px;place-items:center;width:50px;height:50px;font:700 20px Georgia;display:grid;box-shadow:0 8px 24px #1179bd55}.brand div{gap:3px;display:grid}.brand small{color:#728099}.welcome{margin:48px 0 28px}.welcome em{color:#1684ce;font-style:normal;font-weight:700}.welcome h1{margin:8px 0;font-size:38px}.welcome p{color:#67758c;line-height:1.8}.login-card form{gap:17px;display:grid}.login-card label{gap:8px;font-weight:700;display:grid}.login-card input{background:#f8fafc;border:1px solid #dbe4ee;border-radius:14px;outline:none;padding:15px}.login-card input:focus{border-color:#198bd2;box-shadow:0 0 0 4px #168bd21a}.login-card form button,.attendance-card button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#109fe5,#064486);border:0;border-radius:14px;padding:15px;font-weight:700;box-shadow:0 9px 20px #0874b945}.login-card footer{text-align:center;color:#9aa5b3;margin-top:28px;font-size:12px}.error{color:#b42318;text-align:center}.portal{min-height:100vh}.top{z-index:5;background:#fff;border-bottom:1px solid #e1e9f2;justify-content:space-between;align-items:center;height:76px;padding:0 4vw;display:flex;position:sticky;top:0}.top button{color:#56647a;background:#fff;border:1px solid #d7e0eb;border-radius:12px;padding:10px 16px}.shell{grid-template-columns:245px 1fr;max-width:1500px;min-height:calc(100vh - 76px);margin:auto;display:grid}aside{text-align:center;background:#fff;border-left:1px solid #e2eaf2;padding:35px 22px}.avatar{color:#fff;background:linear-gradient(145deg,#25b7eb,#075092);border-radius:24px;place-items:center;width:78px;height:78px;margin:auto;font-size:34px;display:grid;box-shadow:0 12px 30px #137bb34c}aside h2{margin:14px 0 5px;font-size:18px}aside p{color:#7b8799;font-size:13px}nav{gap:6px;margin-top:30px;display:grid}nav button{text-align:right;color:#59697f;cursor:pointer;background:0 0;border:0;border-radius:12px;padding:13px 18px}nav button.active{color:#0767a8;background:#e9f5fd;font-weight:700}.content{padding:36px 4vw}.hello{justify-content:space-between;align-items:center;gap:20px;display:flex}.hello h1{margin:8px 0;font-size:30px}.hello p,.hello small{color:#738198}.status{color:#a72b2b;background:#fff1f1;border-radius:22px;padding:11px 15px;font-size:13px}.status i{background:#dc4242;border-radius:50%;width:8px;height:8px;margin-left:7px;display:inline-block}.status.online{color:#137345;background:#e9f9f0}.status.online i{background:#24ad66}.stats{grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0;display:grid}.stats article,.list,.profile{background:#fff;border:1px solid #e2eaf3;border-radius:20px;padding:22px;box-shadow:0 8px 22px #0d31500a}.stats article{gap:9px;display:grid}.stats small{color:#77869a}.stats b{font-size:18px}.stats span{color:#0b80c8;font-size:13px}.attendance-card{color:#fff;background:linear-gradient(135deg,#073b70,#0d78b7);border-radius:24px;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px;padding:27px 30px;display:flex;box-shadow:0 15px 32px #075b8c34}.attendance-card h2{margin:7px 0}.attendance-card p{color:#cce9fa}.attendance-card button{color:#07578c;background:#fff;min-width:160px}.list{margin-top:20px}.list h2,.profile h2{margin:0 0 18px}.list article{border-top:1px solid #edf1f6;align-items:center;gap:14px;padding:15px 3px;display:flex}.list article:first-of-type{border-top:0}.icon{color:#0678bc;background:#e7f5fe;border-radius:12px;place-items:center;width:40px;height:40px;font-weight:700;display:grid}.list article div:nth-child(2){flex:1}.list p{color:#7a8798;margin:5px 0 0;font-size:13px}.list strong{color:#ed9c17}.empty{text-align:center;color:#8a96a6;padding:40px}.profile{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.profile h2{grid-column:1/-1}.profile div{background:#f6f9fc;border-radius:14px;gap:7px;padding:16px;display:grid}.profile small{color:#77859a}.notice{color:#076da9;background:#e8f5fc;border-radius:12px;margin:18px 0;padding:13px 18px}@media (width<=800px){.shell{grid-template-columns:1fr}aside{z-index:4;border-bottom:1px solid #e1e9f2;border-left:0;padding:16px;position:sticky;top:76px}.avatar,aside h2,aside p{display:none}nav{gap:4px;margin:0;display:flex;overflow:auto}nav button{white-space:nowrap;text-align:center}.content{padding:24px 16px}.hello{align-items:flex-start}.hello h1{font-size:24px}.stats{grid-template-columns:1fr}.attendance-card{flex-direction:column;align-items:stretch}.profile{grid-template-columns:1fr}.profile h2{grid-column:auto}}@media (width<=480px){.top{height:66px}.top .brand small{display:none}.brand>span{width:42px;height:42px}.top button{padding:8px 10px}.shell{min-height:calc(100vh - 66px)}aside{top:66px}.hello{display:block}.status{margin-top:10px;display:inline-block}.content{padding-top:20px}.login-card{border-radius:25px;padding:26px 22px}.welcome{margin:36px 0 24px}}