*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,Arial,sans-serif}
body{background:#f5f8fc;color:#071638;display:flex;min-height:100vh}
.sidebar{width:336px;background:#0e182d;color:white;position:fixed;top:0;bottom:0;left:0;padding:28px 20px;border-top-left-radius:18px;display:flex;flex-direction:column;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:flex-start}.spark{color:#2f6df6;font-size:28px}.brand p{font-size:14px;color:#5e93ff;font-weight:800;letter-spacing:1px}.brand h1{font-size:28px;margin:14px 0}.brand small{color:#7890b7;letter-spacing:1.5px;font-size:11px;line-height:1.5}
.menu{margin-top:-120px;display:flex;flex-direction:column;gap:14px}.menu a{color:#9eb0cc;text-decoration:none;padding:18px 20px;border-radius:14px;font-weight:700;display:flex;gap:16px;align-items:center}.menu a span{font-size:22px}.menu a.active,.menu a:hover{background:#2f69e8;color:white}
.mcp-card{border:1px solid #253554;background:#121e35;border-radius:16px;padding:18px;display:flex;gap:14px;align-items:center}.mcp-icon{background:#102d58;color:#3280ff;padding:14px;border-radius:12px}.mcp-card small{color:#8ea2c6}.mcp-card strong{display:block;font-size:22px;margin-top:5px}
.content{margin-left:336px;padding:42px 48px 60px;width:calc(100% - 336px)}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:44px}.company{display:flex;gap:14px;align-items:center;text-align:right}.company h2{font-size:18px}.company p{color:#1d63f1;font-size:13px;font-weight:800}.company img{width:54px;height:54px;border-radius:50%;background:#e4eaf3}
.notice{background:#edf5ff;border:1px solid #afd0ff;border-radius:18px;padding:28px;display:flex;gap:24px;margin-bottom:44px}.notice-icon{font-size:32px;color:#2468ee}.notice h3{font-size:18px;margin-bottom:8px}.notice p{color:#0a2b75;line-height:1.6;font-size:15px}
.hero h1{font-size:31px;margin-bottom:10px}.hero p{color:#60708e;font-size:17px;margin-bottom:38px}.student-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-bottom:30px}.student-card{background:white;border:1px solid #dde5f0;border-radius:18px;overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:space-between}.student-top{text-align:center;padding:28px 20px}.avatar-wrap{position:relative;width:98px;margin:0 auto 22px}.avatar{width:98px;height:98px;border-radius:50%;border:5px solid #eef2f8;object-fit:cover}.online{position:absolute;right:6px;bottom:8px;width:15px;height:15px;background:#22c865;border-radius:50%;border:2px solid white}.student-top h3{font-size:22px;margin-bottom:10px}.meta{color:#5d6680;margin-bottom:14px}.orphanage{color:#8998b6;font-size:14px;line-height:1.4}.progress-box{background:#f7faff;border-top:1px solid #e8edf5;padding:18px 26px}.progress-line{display:flex;justify-content:space-between;margin-bottom:8px;color:#163052}.progress-line b{color:#2866f0}.bar{height:7px;background:#e3ebf6;border-radius:20px;overflow:hidden}.fill{height:100%;background:#2866f0;border-radius:20px}.panel{background:white;border:1px solid #dde5f0;border-radius:18px;padding:28px;margin-top:30px}.panel h2{margin-bottom:15px}.module-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.module-list div{background:#f7faff;border:1px solid #e5edf8;border-radius:12px;padding:18px}.module-list b{display:block;color:#2866f0;margin-bottom:8px}.panel button{margin-top:16px;background:#2866f0;color:white;border:none;border-radius:12px;padding:13px 22px;font-weight:800;cursor:pointer}
@media(max-width:1100px){.sidebar{position:relative;width:100%;border-radius:0}.content{margin-left:0;width:100%;padding:24px}body{display:block}.menu{margin-top:30px}.student-grid,.module-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.student-grid,.module-list{grid-template-columns:1fr}.notice{flex-direction:column}.hero h1{font-size:25px}}