.class-management-modal{width:min(1040px,100%)}.class-management-tabs{background:#f2f3f1;border-radius:11px;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:-3px 0 20px;padding:5px;display:grid}.class-management-tabs button{color:#7d8592;background:0 0;border:0;border-radius:8px;min-height:42px;font-size:13px;font-weight:700}.class-management-tabs button[aria-selected=true]{color:var(--ink);background:#fff;box-shadow:0 3px 10px #27304712}.class-management-modal .modal-actions{background:#fff;margin-inline:-30px;padding:17px 30px 0;position:sticky;bottom:-30px}.class-roles-editor>header{justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px;display:flex}.class-roles-editor>header>div{gap:3px;display:grid}.class-roles-editor>header b{font-size:15px}.class-roles-editor>header small{color:var(--muted);font-size:11px}.class-roles-editor>header>span{color:#5f8a6a;background:#eef6f0;border-radius:14px;padding:5px 9px;font-size:10px}.class-roles-body{gap:24px;display:grid}.class-roles-body section{min-width:0}.class-roles-body section>header{justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:11px;display:flex}.class-roles-body section>header div,.role-group>header{align-items:baseline;gap:9px;display:flex}.class-roles-body section>header b{font-size:13px}.class-roles-body section>header small{color:var(--muted);font-size:10px}.synced-roles{background:#f5f9fa;border:1px solid #dfe9ee;border-radius:12px;padding:15px}.synced-roles header>span{color:#557f93;background:#e1eef2;border-radius:20px;padding:4px 8px;font-size:10px}.synced-roles>div{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:8px;display:grid}.synced-roles article{background:#fff;border:1px solid #e1e9eb;border-radius:9px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px;padding:10px 11px;display:grid}.synced-roles article span{color:#66818e;font-size:10px}.synced-roles article b{font-size:12px}.synced-roles article small{color:var(--muted);grid-column:1/-1;font-size:9px}.synced-roles>p{color:var(--muted);margin:0;font-size:11px}.role-group{display:grid}.role-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;display:grid}.role-grid>article{background:#fbfbf9;border:1px solid #e9e9e5;border-radius:10px;grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:14px;min-width:0;padding:12px 13px;display:grid}.role-grid>article>div{gap:3px;min-width:0;display:grid}.role-grid>article>div b{font-size:12px}.role-grid>article>div small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:10px;overflow:hidden}.role-grid .custom-select summary{background:#fff;min-height:38px;padding:8px 10px;font-size:11px}.role-grid .custom-select-options{z-index:15}@media (max-width:1180px){.role-grid{grid-template-columns:1fr}}.student-name-cell{flex-wrap:wrap;align-items:center;gap:8px;max-width:360px;display:flex}.student-name-cell .avatar{flex:none;margin-right:1px!important}.student-name-cell>b{flex:none}.student-role-tags{flex-wrap:wrap;gap:4px;min-width:0;display:flex}.student-role-tags span{color:#bb6257;background:#fbe8e3;border-radius:10px;padding:3px 6px;font-size:9px;font-weight:700;line-height:1}.student-role-tags span.group{color:#557f94;background:#e9f2f6}.class-role-roster{background:#fafaf7;border:1px solid #e4e6e2;border-radius:13px;margin-top:24px;padding:18px}.class-role-roster>header{justify-content:space-between;align-items:end;gap:16px;margin-bottom:13px;display:flex}.class-role-roster>header>div{gap:3px;display:grid}.class-role-roster>header b{font-size:14px}.class-role-roster>header small,.class-role-roster>header>span,.class-role-roster>p{color:var(--muted);font-size:10px}.class-role-roster>div{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}.class-role-roster article{background:#fff;border:1px solid #e5e6e2;border-radius:9px;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;padding:10px 11px;display:grid}.class-role-roster article span{color:#b76559;font-size:10px}.class-role-roster article b{font-size:12px}.class-role-roster article small{color:var(--muted);grid-column:1/-1;font-size:9px}.class-role-roster>p{text-align:center;border:1px dashed #dfe1dd;border-radius:9px;margin:0;padding:14px}@media (max-width:760px){.class-management-modal{padding:22px}.class-management-modal .modal-actions{margin-inline:-22px;padding-inline:22px;bottom:-22px}.role-grid>article{grid-template-columns:1fr}}