*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f6f8fc;color:#172033}button,input{font:inherit}.hidden{display:none!important}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eef4ff,#f8fbff)}.login-card{width:min(92%,390px);background:#fff;padding:38px;border-radius:26px;box-shadow:0 24px 70px #2b5bb01c}.brand-mark{width:62px;height:62px;border-radius:18px;background:#315ee8;color:white;display:grid;place-items:center;font-weight:800;font-size:22px}.login-card h1{margin:18px 0 5px}.login-card p{color:#748096;margin:0 0 25px}.login-card label{display:block;font-size:13px;font-weight:700;margin:14px 0 7px}.login-card input{width:100%;padding:14px;border:1px solid #dce3ef;border-radius:12px;outline:none}.login-card button{width:100%;margin-top:20px;padding:14px;border:0;border-radius:12px;background:#315ee8;color:#fff;font-weight:800;cursor:pointer}.login-card small{display:block;text-align:center;color:#8a94a8;margin-top:14px}.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}aside{background:#fff;border-right:1px solid #e9edf4;padding:24px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.logo{display:flex;gap:10px;align-items:center;margin:0 7px 30px}.logo span{width:38px;height:38px;border-radius:12px;background:#315ee8;color:#fff;display:grid;place-items:center;font-weight:900}.logo b{font-size:15px}nav{display:grid;gap:7px}nav button{border:0;background:transparent;text-align:left;padding:13px 14px;border-radius:12px;color:#68748a;cursor:pointer;font-weight:650}nav button.active{background:#edf2ff;color:#315ee8}.student-mini{margin-top:auto;background:#f6f8fc;border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px;color:#315ee8;font-weight:800}.student-mini div{display:grid;color:#172033;font-size:12px}.student-mini small{color:#8b95a7;font-weight:500}main{padding:28px 4vw 60px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}header small{color:#315ee8;font-weight:800;letter-spacing:.08em}header h2{margin:5px 0;font-size:27px}.header-actions{display:flex;gap:12px;align-items:center}.bell{color:#ff9d36}.avatar{border:0;background:#172033;color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer}.hero{background:linear-gradient(120deg,#315ee8,#6f8cf3);color:#fff;border-radius:24px;padding:27px;display:grid;grid-template-columns:1fr 180px;align-items:center}.hero h3{font-size:25px;margin:0 0 8px}.hero p{opacity:.9;max-width:600px}.hero .big-progress{display:grid;place-items:center}.ring{width:120px;height:120px;border-radius:50%;background:conic-gradient(#fff 0 68%,#ffffff38 68%);display:grid;place-items:center}.ring:after{content:'68%';width:90px;height:90px;background:#5576ec;border-radius:50%;display:grid;place-items:center;font-size:23px;font-weight:900}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.stat,.card{background:#fff;border:1px solid #edf0f5;border-radius:18px;padding:18px;box-shadow:0 8px 30px #30466b08}.stat b{font-size:25px;display:block}.stat small{color:#7f899c}.section-title{display:flex;justify-content:space-between;align-items:center;margin:28px 0 14px}.section-title h3{margin:0}.section-title button{border:0;background:none;color:#315ee8;font-weight:800}.subjects{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.subject-icon{font-size:25px;width:50px;height:50px;border-radius:15px;background:#eef3ff;display:grid;place-items:center}.subject h4{margin:14px 0 6px}.subject p{font-size:13px;color:#7d8798;min-height:36px}.bar{height:8px;background:#edf0f5;border-radius:99px;overflow:hidden;margin:12px 0 7px}.bar i{display:block;height:100%;background:#315ee8;border-radius:99px}.subject small{color:#7f899c}.list{display:grid;gap:12px}.task{display:flex;align-items:center;gap:14px}.task .ico{width:45px;height:45px;border-radius:13px;background:#eef3ff;display:grid;place-items:center}.task .grow{flex:1}.task h4{margin:0 0 4px}.task p{margin:0;color:#8791a3;font-size:13px}.badge{padding:7px 10px;border-radius:99px;background:#eaf8ef;color:#24854a;font-size:12px;font-weight:800}.badge.pending{background:#fff4e6;color:#b36a0a}.quiz label{display:block;padding:12px;border:1px solid #e6eaf1;border-radius:12px;margin:8px 0;cursor:pointer}.primary{border:0;background:#315ee8;color:#fff;padding:12px 18px;border-radius:12px;font-weight:800;cursor:pointer}.forum-post{display:flex;gap:13px}.forum-post .face{width:42px;height:42px;border-radius:50%;background:#edf2ff;color:#315ee8;display:grid;place-items:center;font-weight:800;flex:none}.forum-post h4{margin:0}.forum-post p{color:#667286}.progress-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}@media(max-width:850px){.app{grid-template-columns:1fr}aside{height:auto;position:fixed;z-index:5;bottom:0;top:auto;left:0;right:0;border:0;border-top:1px solid #e9edf4;padding:8px}.logo,.student-mini{display:none}nav{display:flex;justify-content:space-around;gap:2px}nav button{padding:9px;font-size:18px;text-align:center}nav button span{display:none}main{padding:20px 16px 90px}.hero{grid-template-columns:1fr}.big-progress{margin-top:15px}.stats{grid-template-columns:repeat(2,1fr)}.subjects{grid-template-columns:1fr}.progress-grid{grid-template-columns:1fr}header h2{font-size:22px}}