*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:#132b55;background:#fff}
a{text-decoration:none;color:inherit}
.header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid #e7edf6;background:#fff;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:11px}
.brand-icon{font-size:31px}
.brand strong{display:block;font-size:25px;line-height:1;color:#132b55}
.brand strong span,.footer strong span{color:#1677ee}
.brand small{display:block;color:#63738d;margin-top:5px;font-size:12px}
.nav{display:flex;gap:38px;height:100%;align-items:center}
.nav a{height:100%;display:flex;align-items:center;font-weight:600;color:#263b60;position:relative}
.nav a.active,.nav a:hover{color:#1475ee}
.nav a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:#1475ee;border-radius:3px}
.login-btn{background:#1475ee;color:#fff;padding:14px 24px;border-radius:15px;font-weight:700;box-shadow:0 7px 18px #1475ee33}
.hero{min-height:455px;display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center;padding:55px 7%;background:linear-gradient(120deg,#f8fbff,#eef6ff)}
.pill{display:inline-block;background:#e4f0ff;color:#1358aa;padding:9px 16px;border-radius:25px;font-weight:700}
.hero h1{font-size:56px;line-height:1.05;margin:20px 0 16px}
.hero h1 span{color:#1475ee}
.hero-description{max-width:640px;color:#526886;font-size:18px;line-height:1.65}
.benefits{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:26px;font-weight:700;color:#385174}
.benefits i{height:20px;width:1px;background:#bdc9d9}
.hero-art{height:360px;position:relative;overflow:hidden}
.board{position:absolute;right:7%;top:25px;width:58%;height:220px;background:#527c68;border:9px solid #a87955;border-radius:8px;box-shadow:0 10px 20px #173b3030}
.board-title{color:#fff;font-family:cursive;font-size:21px;text-align:center;line-height:1.25;margin-top:25px}
.teacher{position:absolute;right:31%;top:76px;font-size:120px;z-index:2}
.student{position:absolute;z-index:3;font-size:80px;bottom:20px}
.student-one{left:12%}.student-two{right:4%}
.speech{position:absolute;right:0;top:145px;background:#fff;padding:14px 22px;border-radius:30px;font-weight:800;text-align:center;box-shadow:0 8px 25px #16376220;z-index:4}
.book-stack{position:absolute;right:0;bottom:0;font-size:60px}
.access{padding:36px 7% 50px;text-align:center}
.access h2{font-size:38px;margin:0}
.underline{width:48px;height:4px;background:#1475ee;border-radius:4px;margin:11px auto}
.section-subtitle{color:#63738d;font-size:17px;margin-bottom:25px}
.profile-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.profile-card{background:#ff342f;color:#fff;border-radius:8px;padding:15px;box-shadow:0 10px 24px #ff342f26;transition:.2s}
.profile-card:hover{transform:translateY(-5px);box-shadow:0 16px 30px #ff342f40}
.card-image{height:145px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:62px}
.profile-card h3{color:#101010;font-size:24px;background:#fff;margin:0;padding:8px 4px 10px}
.card-label{font-size:18px;font-weight:800;padding:13px 0 5px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:60px 9%;background:#f5f9ff}
.about h2{font-size:32px;line-height:1.25;margin:15px 0}
.about p{color:#60728e;font-size:18px;line-height:1.7}
.footer{padding:28px 7%;display:flex;align-items:center;justify-content:space-between;background:#f0f6ff;border-top:1px solid #dce7f4}
.footer strong{font-size:21px}.footer p{margin:7px 0 0;color:#667994;font-size:14px}
.quote{font-style:italic}.socials{display:flex;gap:10px}.socials span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#1677ee;color:#fff;font-weight:800}
@media(max-width:900px){.nav{display:none}.hero{grid-template-columns:1fr}.hero-art{display:none}.profile-grid{grid-template-columns:1fr}.about{grid-template-columns:1fr}.footer{flex-direction:column;gap:18px;text-align:center}}
@media(max-width:600px){.header{padding:0 18px}.login-btn{padding:11px 15px}.hero{padding:42px 20px}.hero h1{font-size:42px}.access{padding:35px 18px}.access h2{font-size:30px}}

/* Forms */
.form-page{min-height:100vh;background:linear-gradient(135deg,#f3f8ff,#f8fcff);display:flex;align-items:center;justify-content:center;padding:30px}
.form-card{width:min(560px,100%);background:#fff;border:1px solid #e5ecf6;border-radius:22px;padding:32px;box-shadow:0 18px 55px rgba(24,62,110,.12)}
.small-card{width:min(470px,100%)}
.back-link{color:#1677ee;font-weight:700;text-decoration:none;display:inline-block;margin-bottom:20px}
.form-logo{font-size:22px;color:#142d55;margin-bottom:18px}
.form-logo span{color:#1677ee}
.form-card h1{font-size:34px;margin:8px 0}
.form-card .muted{color:#6a7b94;margin:0 0 22px}
.form-card label{display:block;font-weight:700;margin:14px 0 7px;color:#203657}
.form-card input,.form-card select{width:100%;padding:13px 14px;border:1px solid #d7e0ec;border-radius:10px;outline:none;font-size:15px;background:#fff}
.form-card input:focus,.form-card select:focus{border-color:#1677ee;box-shadow:0 0 0 3px #1677ee18}
.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.primary-btn{width:100%;border:0;border-radius:11px;background:#1677ee;color:#fff;font-size:16px;font-weight:800;padding:14px;margin-top:22px;cursor:pointer;box-shadow:0 8px 20px #1677ee30}
.primary-btn:hover{background:#0e68d8}
.bottom-text{text-align:center;color:#687991;margin:22px 0 0}
.bottom-text a{color:#1677ee;font-weight:800}
.error{color:#c62828;background:#fff0f0;border-radius:9px;padding:10px;margin:10px 0;display:none}
.success{color:#176b42;background:#ebfff4;border-radius:9px;padding:10px;margin:10px 0;display:none}
@media(max-width:600px){.form-page{padding:15px}.form-card{padding:23px}.two{grid-template-columns:1fr}.form-card h1{font-size:29px}}

/* Student dashboard v3 */
.student-body{margin:0;background:#f5f9ff;color:#14284b;font-family:Inter,Segoe UI,Arial,sans-serif}
.student-topbar{height:78px;background:#fff;border-bottom:1px solid #e2eaf4;display:flex;align-items:center;justify-content:space-between;padding:0 2.4%;position:sticky;top:0;z-index:20}
.student-topbar .brand{display:flex;align-items:center;gap:10px}.student-topbar .brand strong{font-size:25px}.student-topbar .brand small{display:block;color:#71839c;font-size:11px}
.top-actions{display:flex;align-items:center;gap:22px}.icon-btn{border:0;background:transparent;font-size:22px;position:relative;cursor:pointer}.icon-btn b{position:absolute;right:-6px;top:-5px;background:#ef3e43;color:#fff;border-radius:50%;font-size:10px;padding:3px 6px}
.user-mini{display:flex;gap:10px;align-items:center;background:#f5f9ff;border-radius:30px;padding:6px 15px 6px 7px}.avatar{width:42px;height:42px;border-radius:50%;background:#dff4ff;display:grid;place-items:center;font-size:25px}.user-mini strong{display:block}.user-mini small{display:block;color:#73839b;margin-top:3px}
.mobile-menu{display:none;border:0;background:#eaf3ff;border-radius:9px;padding:9px;font-size:20px}
.student-layout{display:flex;min-height:calc(100vh - 78px)}
.sidebar{width:285px;background:#fff;border-right:1px solid #e1e9f3;padding:24px 14px;display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0}
.side-link{width:100%;border:0;background:transparent;text-align:left;padding:13px 17px;border-radius:10px;margin:3px 0;font-size:15px;color:#243b5d;cursor:pointer;display:flex;gap:14px;align-items:center}.side-link:hover{background:#f0f6ff;color:#126ee4}.side-link.active{background:#ddebff;color:#0869e7;font-weight:800}.side-link em{font-style:normal;background:#ef3e43;color:#fff;border-radius:50%;font-size:10px;padding:3px 6px;margin-left:auto}
.sidebar-bottom{text-align:center;background:#f7fbff;border-radius:15px;padding:16px;color:#667b98;margin-top:20px}.edu-icon{font-size:42px}.sidebar-bottom p{font-size:12px;line-height:1.5}.sidebar-bottom strong{color:#1677ee}
.student-main{flex:1;padding:35px 3.2%;overflow:hidden}.app-section{display:none}.app-section.active{display:block}.welcome-row,.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:25px}.welcome-row h1,.page-head h1{font-size:32px;margin:12px 0 5px}.welcome-row p,.page-head p{color:#667b98;margin:0}.date{color:#71829a;margin-top:36px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat-card{background:#fff;border:1px solid #e7edf5;border-radius:13px;padding:18px;display:flex;gap:14px;box-shadow:0 6px 20px #23456b0b}.stat-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:24px}.stat-icon.blue{background:#e4f0ff}.stat-icon.green{background:#ddf7e8}.stat-icon.yellow{background:#fff2c9}.stat-icon.red{background:#ffe1e2}.stat-card b{display:block;font-size:26px}.stat-card small{display:block;color:#6c7e98;margin:3px 0 6px}.stat-card a{font-size:13px;color:#1677ee;cursor:pointer;font-weight:700}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0 23px}.quick{border:0;border-radius:11px;color:#fff;text-align:left;padding:20px;min-height:100px;cursor:pointer;box-shadow:0 8px 18px #123c6818}.quick b{display:block;font-size:16px;margin:9px 0 4px}.quick small{display:block;opacity:.9}.blue-bg{background:#2279ed}.green-bg{background:#14a85d}.purple-bg{background:#7650df}.orange-bg{background:#ee8b18}
.content-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:18px;margin-bottom:18px}.panel{background:#fff;border:1px solid #e5ecf5;border-radius:14px;padding:18px;box-shadow:0 6px 20px #23456b0b}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.panel-title h2{font-size:17px;margin:0}.panel-title a{color:#1677ee;font-size:13px;font-weight:700;cursor:pointer}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:13px 9px;border-bottom:1px solid #edf1f6;white-space:nowrap}th{color:#71829a;background:#f8fbff}.status{border-radius:7px;padding:6px 8px;font-size:11px;font-weight:700}.status.ok{background:#ddf8e9;color:#14834b}.status.wait{background:#fff1c8;color:#b47b00}.status.bad{background:#ffe1e2;color:#cf3034}
.message-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #edf1f6}.message-item:last-child{border-bottom:0}.mini-avatar{width:37px;height:37px;border-radius:50%;background:#dff3ff;display:grid;place-items:center;flex-shrink:0}.mini-avatar.group{background:#e7e0ff}.message-item div:nth-child(2){flex:1}.message-item p{margin:4px 0 0;color:#71829a;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-item>small{color:#8a98aa}
.notice{padding:11px 0 11px 17px;border-bottom:1px solid #edf1f6;position:relative}.notice:before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;border-radius:50%}.notice.green-dot:before{background:#19a962}.notice.blue-dot:before{background:#247bec}.notice.yellow-dot:before{background:#efb019}.notice small{float:right;color:#8492a6}
.friends{display:flex;justify-content:space-around;text-align:center}.friends div{display:flex;flex-direction:column;gap:6px}.friends i,.class-card i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#e8efff;color:#3f65bd;font-style:normal;font-weight:800;margin:auto}.friends small{font-size:11px;color:#667b98}
.form-panel{background:#fff;border:1px solid #e4ebf5;border-radius:15px;padding:25px;max-width:800px}.form-panel label{display:block;font-weight:700;margin:15px 0 7px}.form-panel input,.form-panel textarea{width:100%;padding:13px;border:1px solid #d8e2ee;border-radius:9px;font:inherit;box-sizing:border-box}.form-panel textarea{min-height:130px;resize:vertical}.primary-btn{border:0;border-radius:10px;background:#1677ee;color:#fff;padding:13px 20px;font-weight:800;cursor:pointer}.small-btn{white-space:nowrap}.grades-grid,.class-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grade-card,.class-card{background:#fff;border:1px solid #e5ecf5;border-radius:15px;padding:25px;box-shadow:0 6px 20px #23456b0b}.grade-card b{display:block;font-size:34px;color:#1677ee}.grade-card span,.grade-card small{display:block;margin-top:8px}.grade-card small{color:#68809e}.class-grid{grid-template-columns:repeat(4,1fr)}.class-card{text-align:center}.class-card b,.class-card span{display:block;margin-top:8px}.class-card span{font-size:13px;color:#71829a;min-height:35px}.table-btn{border:1px solid #cfe0f5;background:#f5f9ff;color:#126fe1;padding:7px 10px;border-radius:7px;cursor:pointer;font-weight:700}.profile-form{max-width:600px}
.toast{position:fixed;right:25px;bottom:25px;background:#142c50;color:#fff;padding:13px 18px;border-radius:10px;opacity:0;transform:translateY(15px);transition:.25s;z-index:50}.toast.show{opacity:1;transform:none}
@media(max-width:1100px){.sidebar{width:235px}.stat-grid,.quick-grid{grid-template-columns:repeat(2,1fr)}.class-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.mobile-menu{display:block}.student-topbar{gap:10px}.student-topbar>.brand{display:none}.sidebar{position:fixed;left:-290px;top:78px;bottom:0;z-index:30;transition:.25s}.sidebar.open{left:0}.student-main{padding:25px 16px}.content-grid{grid-template-columns:1fr}.date{display:none}}
@media(max-width:600px){.user-mini div:last-child{display:none}.stat-grid,.quick-grid,.grades-grid,.class-grid{grid-template-columns:1fr}.welcome-row,.page-head{display:block}.welcome-row h1,.page-head h1{font-size:28px}.page-head .small-btn{margin-top:15px}.panel{padding:13px}}