.home-shell{grid-template-columns:150px 1fr;background:#e9eef8;color:#101522}.home-shell .sidebar{background:#27324d;padding:20px 14px;color:#fff}.home-shell .sidebar .brand{color:#fff;font-size:25px;margin:0 6px 22px}.home-shell .sidebar .brand-mark{width:20px;height:25px;border:3px solid #fff;border-radius:0;transform:none;background:transparent}.home-shell .nav{gap:3px}.home-shell .nav button{color:#b9c1d4;font-size:16px;font-weight:400;padding:13px 12px}.home-shell .nav button.active{background:transparent;color:#fff}.home-shell .nav-icon,.home-shell .nav button.active .nav-icon{background:transparent;color:#d8deec;width:20px;height:20px;margin-right:6px}.home-shell .main{padding:0 20px 50px}.home-shell .topbar{display:none}.home-workbench{max-width:none;margin:0}.home-head{height:74px;display:flex;align-items:center;justify-content:space-between}.home-head h1{font-size:18px;margin:0;font-weight:500}.home-head>div{display:flex;gap:10px}.home-head input{width:240px;height:33px;border:1px solid #d7deeb;background:#fff;border-radius:4px;padding:0 10px}.home-head>div>button{border:1px solid #176fe4;background:#2e82ee;color:#fff;border-radius:3px;padding:0 16px;cursor:pointer}.home-students{display:grid;grid-template-columns:repeat(4,minmax(245px,1fr));gap:20px 16px}.home-student{height:130px;background:#fff;border-radius:10px;padding:15px 10px;display:flex;gap:10px;align-items:center}.student-avatar{flex:0 0 100px;height:100px;border-radius:10px;background:#e7edf8;display:grid;place-items:center;font-size:70px;overflow:hidden}.student-card-body{min-width:0}.student-card-body h2{font-size:18px;margin:0 0 15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.student-card-body p{font-size:14px;margin:0 0 14px;white-space:nowrap}.hour-plus{width:35px;height:27px;margin-left:7px;border:1px solid #1672f3;color:#1672f3;background:#fff;border-radius:3px;font-size:19px;line-height:20px;cursor:pointer}.student-card-body>div{display:flex;gap:10px}.student-card-body>div button{height:27px;min-width:60px;border-radius:3px;cursor:pointer}.class-btn{background:#2e82ee;color:#fff;border:1px solid #2e82ee}.detail-btn{background:#fff;color:#1672f3;border:1px solid #1672f3}.home-empty{grid-column:1/-1;text-align:center;padding:80px;color:#6d778d}.student-modal{width:600px}.student-modal h2{margin:0 0 22px}.student-form{display:grid;grid-template-columns:1fr 1fr;gap:17px 20px}.student-form label{margin:0;color:#566174;font-size:14px}.student-form input,.student-form select{display:block;width:100%;height:40px;margin-top:7px;border:1px solid #d9dfeb;border-radius:5px;padding:0 10px;background:#fff}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.lesson-summary{background:#f1f5fb;padding:12px;border-radius:6px;color:#566174}
@media(max-width:1250px){.home-students{grid-template-columns:repeat(3,1fr)}}
@media(max-width:950px){.home-students{grid-template-columns:repeat(2,1fr)}.home-head input{width:190px}}
@media(max-width:700px){.home-shell{grid-template-columns:76px 1fr}.home-head{height:auto;align-items:flex-start;gap:12px;padding:15px 0;flex-direction:column}.home-head>div{width:100%}.home-head input{flex:1}.home-students{grid-template-columns:1fr}.student-form{grid-template-columns:1fr}.home-shell .sidebar .brand span{display:none}}

/* Keep the workbench and learning content within the viewport. */
@media screen{
 .shell.content-scroll-shell{height:100vh;height:100dvh;min-height:0;overflow:hidden}
 .shell.content-scroll-shell>.sidebar{height:100%;min-height:0}
 .shell.content-scroll-shell>.main:not(:has(.feedback-report-scroll)){box-sizing:border-box;height:100%;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior-y:contain}
 .content-scroll-shell>.main{scrollbar-width:thin;scrollbar-color:#b8c4ca transparent}
 .content-scroll-shell>.main::-webkit-scrollbar{width:8px}
 .content-scroll-shell>.main::-webkit-scrollbar-thumb{background:#b8c4ca;border-radius:4px}
}

/* Fixed page headings and course tabs; scroll only the content below. */
@media screen{
 .shell.content-scroll-shell>.main:has(>.home-workbench,>.catalog-page,>.word-course-page){overflow:hidden;padding-bottom:0}
 .content-scroll-shell>.main>:is(.home-workbench,.catalog-page,.word-course-page){display:flex;flex-direction:column;height:100%;min-height:0}
 .content-scroll-shell :is(.home-head,.catalog-head,.word-course-head,.word-course-tabs){flex-shrink:0}
 .content-scroll-shell :is(.home-students,.catalog-grid,.word-course-content){flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior-y:contain;padding-bottom:40px;scrollbar-width:thin;scrollbar-color:#b8c4ca transparent}
 .content-scroll-shell :is(.home-students,.catalog-grid){align-content:start}
 .content-scroll-shell :is(.home-students,.catalog-grid,.word-course-content)::-webkit-scrollbar{width:8px}
 .content-scroll-shell :is(.home-students,.catalog-grid,.word-course-content)::-webkit-scrollbar-thumb{background:#b8c4ca;border-radius:4px}
}