.roster-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin:1rem 0 1.5rem;padding:2rem;border-left:6px solid var(--subject-color,#3156d3);border-radius:18px;background:#fff;box-shadow:0 8px 30px rgba(28,43,74,.08)}
.roster-hero h1{margin:.5rem 0 .35rem}.roster-hero p{margin:0;color:#657086}.roster-hero>strong{white-space:nowrap;font-size:1.1rem;color:var(--subject-color,#3156d3)}
.roster-list{overflow:hidden;border:1px solid #e4e8f0;border-radius:16px;background:#fff}.roster-head,.roster-row{display:grid;grid-template-columns:minmax(260px,1.7fr) repeat(3,minmax(130px,1fr));align-items:center;gap:1rem;padding:1rem 1.25rem}.roster-head{background:#f6f8fc;color:#687389;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.roster-row{border-top:1px solid #edf0f5}.roster-row>div:not(.roster-student){display:flex;flex-direction:column;gap:.2rem}.roster-row small{color:#727d91}.roster-student{display:flex;align-items:center;gap:.8rem;min-width:0}.roster-student>div{display:flex;min-width:0;flex-direction:column}.roster-student strong,.roster-student small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.roster-avatar{display:grid;flex:0 0 42px;height:42px;place-items:center;border-radius:50%;background:#e9eefc;color:#3156d3;font-weight:800}.roster-empty{padding:3rem;text-align:center}.roster-empty p{color:#727d91}
@media(max-width:760px){.roster-hero{align-items:flex-start;flex-direction:column}.roster-head{display:none}.roster-row{grid-template-columns:1fr 1fr}.roster-student{grid-column:1/-1}.roster-list{border:0;background:transparent}.roster-row{margin-bottom:.75rem;border:1px solid #e4e8f0;border-radius:14px;background:#fff}.roster-row>div:last-child{grid-column:1/-1}}