.hw-roster-toolbar, .hw-roster-actions, .hw-roster-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.hw-roster-toolbar { justify-content: space-between; margin: 24px 0 16px; }
.hw-roster-toolbar h3 { margin: 0; }
.hw-roster-filters { margin-bottom: 16px; }
.hw-roster-filters label { display: flex; align-items: center; gap: 8px; }
.hw-roster-table { width: 100%; min-width: 0; border-collapse: collapse; }
.hw-roster-table th, .hw-roster-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); }
.hw-roster-form { display: grid; gap: 16px; }
.hw-roster-form label { display: grid; gap: 8px; }
.hw-roster-form p { margin: 0; }
.hw-roster-status { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.hw-roster-status--active { background: var(--success-bg); color: var(--success-text); }
.hw-roster-status--archived { background: var(--warning-bg); color: var(--warning-text); }
.hw-roster-status--deleted { background: var(--bg); color: var(--text-secondary); }
.hw-roster-delete-identity { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--danger-border); border-radius: var(--radius-sm); background: var(--danger-bg); }
.hw-roster-delete-identity strong { font-size: 20px; overflow-wrap: anywhere; }
.hw-roster-delete-identity span { font-variant-numeric: tabular-nums; }
.hw-roster-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
#roster-student-dialog { width: min(480px, calc(100vw - 32px)); overflow-y: auto; overscroll-behavior: contain; }
#roster-import-panel { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }