.classroom-grade-page{max-width:1100px;margin-inline:auto}
.classroom-grade-hero{display:flex;justify-content:space-between;align-items:center;gap:1.3rem;margin-top:1rem;padding:1.5rem;border:1px solid #d4e2d8;border-radius:18px;background:linear-gradient(135deg,#f2f8f4,#fff)}
.classroom-grade-hero h1{margin:.45rem 0;font-size:var(--font-size-page-title)}
.classroom-grade-hero p{margin:0;color:var(--text-muted);font-size:var(--font-size-small)}
.classroom-grade-summary{display:flex;gap:.55rem}
.classroom-grade-summary>span{display:flex;flex-direction:column;min-width:105px;padding:.7rem .85rem;border:1px solid #d4e2d8;border-radius:10px;background:#fff}
.classroom-grade-summary small{color:var(--text-muted);font-size:var(--font-size-caption)}
.classroom-grade-summary strong{font-size:var(--font-size-heading-sm);font-variant-numeric:tabular-nums}
.classroom-grade-instructions{margin-top:1rem;padding:1rem 1.2rem;border:1px solid #dbe5dd;border-radius:12px;background:#fff}
.classroom-grade-instructions h2{margin:0 0 .4rem;font-size:var(--font-size-heading-sm)}
.classroom-grade-instructions p{margin:0;line-height:1.55}
.classroom-grade-note{display:flex;gap:.65rem;margin:1rem 0;padding:.8rem 1rem;border:1px solid #bcd6c4;border-radius:10px;background:#f2f9f4;color:#24563b}
.classroom-grade-note p{margin:0;font-size:var(--font-size-small);line-height:1.45}
.classroom-grade-locked{padding:.8rem 1rem;border-radius:10px;background:#fff5e9;color:#80501f}
.classroom-grade-list{display:grid;gap:.55rem}
.classroom-grade-row{display:grid;grid-template-columns:minmax(210px,1fr) 130px minmax(250px,1.3fr);align-items:center;gap:1rem;padding:.8rem 1rem;border:1px solid #dbe5dd;border-radius:11px;background:#fff}
.classroom-grade-student{display:flex;align-items:center;gap:.7rem;min-width:0}
.classroom-grade-student>div{min-width:0}
.classroom-grade-student strong,.classroom-grade-student small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.classroom-grade-student strong{font-size:var(--font-size-small)}
.classroom-grade-student small{color:var(--text-muted);font-size:var(--font-size-caption)}
.classroom-grade-field label{display:block;margin-bottom:.3rem;font-size:var(--font-size-meta);font-weight:750}
.classroom-grade-field label small{color:var(--text-muted);font-weight:500}
.classroom-grade-field input,.classroom-grade-field textarea{width:100%;min-height:40px;padding:.5rem .65rem;border:1px solid #cbd9cf;border-radius:8px;background:#fff;font:inherit}
.classroom-grade-field textarea{height:48px;min-height:48px;resize:vertical}
.classroom-grade-field .errorlist{margin:.25rem 0 0;padding-left:1rem;color:#a23b30;font-size:var(--font-size-caption)}
.classroom-grade-actions{position:sticky;bottom:.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;padding:.7rem .9rem;border:1px solid #bcd6c4;border-radius:11px;background:rgba(247,251,248,.97);box-shadow:0 8px 20px #173d2820}
.classroom-grade-actions span{color:var(--text-muted);font-size:var(--font-size-small)}
.classroom-grade-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem}
@media(max-width:750px){.classroom-grade-hero,.classroom-grade-footer{align-items:flex-start;flex-direction:column}.classroom-grade-row{grid-template-columns:minmax(0,1fr) 115px}.classroom-grade-field.feedback{grid-column:1/-1}.classroom-grade-actions{align-items:flex-start;flex-direction:column}}