.workspace-switcher {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem;
  border: 1px solid rgba(91, 43, 178, .1);
  border-radius: .9rem;
  background: rgba(246, 243, 251, .85);
}

.workspace-switcher-button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.25rem;
  padding: .48rem .78rem;
  border: 0;
  border-radius: .65rem;
  color: #746b80;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .74rem;
  font-weight: 800;
  transition: color .18s, background .18s, box-shadow .18s, transform .18s;
}

.workspace-switcher-button:hover { color: #4f288f; transform: translateY(-1px); }
.workspace-switcher-button.active {
  color: #54269b;
  background: #fff;
  box-shadow: 0 5px 15px rgba(69, 38, 113, .1);
}

.workspace-switcher-button:focus-visible {
  outline: 3px solid rgba(91, 43, 178, .16);
  outline-offset: 2px;
}

.teacher-management-view {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  overflow: auto;
  padding: clamp(1.3rem, 2.4vw, 2.4rem);
  background:
    radial-gradient(circle at 92% 7%, rgba(255, 190, 112, .14), transparent 25rem),
    radial-gradient(circle at 3% 98%, rgba(38, 190, 156, .09), transparent 24rem);
}

.teacher-view-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 88rem;
  margin: 0 auto 1.4rem;
}

.teacher-view-heading h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  line-height: 1.06;
  letter-spacing: -.04em;
}

.teacher-view-heading > div > p:last-child {
  margin: .55rem 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.class-overview {
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
  gap: 1.25rem;
  max-width: 88rem;
  margin: 0 auto;
}
.single-class-overview { grid-template-columns: minmax(0, 1fr); }

.classes-panel, .students-panel { min-height: 32rem; }
.classes-panel { padding: 1rem; }
.students-panel { padding: clamp(1rem, 2vw, 1.65rem); }
.class-panel-heading { margin-bottom: .85rem; }

.class-list {
  display: grid;
  gap: .55rem;
}

.class-list-empty {
  margin: 2.4rem 1rem;
  color: var(--muted);
  text-align: center;
  font-size: .82rem;
  line-height: 1.55;
}

.class-list-button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .7rem;
  border: 1px solid transparent;
  border-radius: .9rem;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}

.class-list-button:hover { background: #faf8fd; transform: translateX(2px); }
.class-list-button.active {
  border-color: rgba(91, 43, 178, .14);
  background: #fff;
  box-shadow: 0 8px 22px rgba(60, 36, 95, .08);
}

.class-list-icon {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: .78rem;
  color: #fff;
  background: linear-gradient(140deg, #7650c6, #51268f);
  font-weight: 900;
}

.class-list-copy { min-width: 0; display: grid; gap: .2rem; }
.class-list-copy strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.class-list-copy small { color: var(--muted); font-size: .67rem; }
.class-student-count { min-width: 1.8rem; padding: .25rem .45rem; border-radius: 99px; color: #5b2bb2; background: #f0e8fc; text-align: center; font-size: .68rem; font-weight: 850; }

.class-empty-state {
  min-height: 28rem;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 2rem;
  text-align: center;
}

.class-empty-state h2 { margin: 1rem 0 .45rem; }
.class-empty-state p { max-width: 30rem; margin: 0; color: var(--muted); line-height: 1.55; }
.class-empty-icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.4rem;
  color: #5b2bb2;
  background: linear-gradient(145deg, #f4edff, #e7dbfa);
  box-shadow: 0 14px 34px rgba(91, 43, 178, .12);
  font-size: 2rem;
}

.student-register-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.student-register-heading h2 { margin: 0; font-size: 1.5rem; }
.student-count-label { margin: .3rem 0 0; color: var(--muted); font-size: .75rem; }
.student-register-actions { display: flex; flex-wrap: wrap; gap: .55rem; }

.student-search {
  position: relative;
  display: block;
  max-width: 26rem;
  margin: 1rem 0;
}

.student-search > span:first-child { position: absolute; left: .85rem; top: .63rem; color: #938ba0; font-size: 1.1rem; transform: rotate(-15deg); }
.student-search input {
  width: 100%;
  min-height: 2.55rem;
  padding: .65rem .85rem .65rem 2.35rem;
  border: 1px solid var(--line);
  border-radius: .78rem;
  outline: none;
  background: #fbfafc;
}
.student-search input:focus { border-color: rgba(91, 43, 178, .35); box-shadow: 0 0 0 3px rgba(91, 43, 178, .07); }

.student-table-wrap { overflow-x: auto; }
.student-table { width: 100%; border-collapse: collapse; }
.student-table th { padding: .65rem .8rem; color: #837a8e; text-align: left; font-size: .66rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.student-table th:last-child { width: 6rem; }
.student-table td { padding: .7rem .8rem; border-top: 1px solid #eeeaf1; vertical-align: middle; }
.student-table tr { transition: background .18s; }
.student-table tbody tr:hover { background: #fbf9fd; }

.student-identity { display: flex; align-items: center; gap: .75rem; }
.student-avatar-small {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  border-radius: .72rem;
  color: hsl(var(--pictogram-hue, 220) 62% 27%);
  background: linear-gradient(145deg, hsl(var(--pictogram-hue, 220) 92% 94%), hsl(var(--pictogram-hue, 220) 72% 72%));
  box-shadow: 0 5px 11px hsl(var(--pictogram-hue, 220) 55% 36% / 18%);
  font-size: .9rem;
  font-weight: 900;
  user-select: none;
}
.student-identity span:last-child { display: grid; gap: .1rem; }
.student-identity strong { font-size: .82rem; }
.student-identity small { color: var(--muted); font-size: .66rem; }
.student-pin-group { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.pin-reset-button { padding: .25rem .35rem; border: 0; color: #5b2bb2; background: transparent; cursor: pointer; font-size: .66rem; font-weight: 850; }
.pin-reset-button:hover { text-decoration: underline; }

.pin-status-chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  width: max-content;
  padding: .32rem .55rem;
  border-radius: 99px;
  color: #087f6b;
  background: #e2f8f1;
  font-size: .68rem;
  font-weight: 800;
}
.pin-status-chip::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.pin-status-chip.unset { color: #83798f; background: #f1eef3; }
.student-row-actions { display: flex; justify-content: flex-end; gap: .35rem; }
.student-action-button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: .62rem;
  color: #695b79;
  background: #fff;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s, transform .18s;
}
.student-action-button:hover { color: #54269b; border-color: rgba(91, 43, 178, .25); background: #f7f2fd; transform: translateY(-1px); }
.student-empty-state { margin: 2rem 0; color: var(--muted); text-align: center; }

.account-modal .modal-card { overflow: hidden; }
.teacher-form-fields { display: grid; gap: 1rem; }
.teacher-form-fields > label, .student-name-fields label { display: grid; gap: .42rem; color: #544a60; font-size: .75rem; font-weight: 800; }
.teacher-form-fields small { color: var(--muted); font-weight: 600; }
.student-name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.student-pin-fieldset { display: grid; justify-items: center; gap: .55rem; margin: .3rem 0 0; padding: 1rem; border: 1px solid rgba(91, 43, 178, .12); border-radius: .9rem; background: #faf8fd; }
.student-pin-fieldset legend { padding: 0 .45rem; color: #544a60; font-size: .75rem; font-weight: 800; }
.student-pin-fieldset p { margin: 0; color: var(--muted); font-size: .7rem; text-align: center; }
.student-editor-actions { flex-wrap: wrap; }
.field-optional { color: var(--muted); font-weight: 600; }
.session-class-hint { margin-top: -.6rem; }
.student-identity-hint { margin: -.3rem 0 0; padding: .65rem .75rem; border-radius: .7rem; background: #f5f2fa; line-height: 1.45; }
.teacher-confirm-password { display: grid; width: 100%; gap: .42rem; margin-top: .25rem; color: #544a60; font-size: .75rem; font-weight: 800; text-align: left; }
.teacher-confirm-password[hidden] { display: none; }
#sensitive-action-message { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }

.second-factor-body { display: grid; gap: 1rem; text-align: center; }
.second-factor-body > p { margin: 0; color: var(--muted); line-height: 1.55; }
.security-symbol {
  display: grid;
  place-items: center;
  width: 3.7rem;
  height: 3.7rem;
  margin: 0 auto;
  border-radius: 1.2rem;
  color: #fff;
  background: linear-gradient(145deg, #7350c0, #482183);
  box-shadow: 0 14px 30px rgba(91, 43, 178, .2);
  font-size: 1.45rem;
  font-weight: 900;
}
.security-code-label { display: block; margin: .2rem 0 .45rem; color: #544a60; font-size: .75rem; font-weight: 800; text-align: center; }
.security-code-input { max-width: 13rem; margin: 0 auto; text-align: center; font-size: 1.35rem; font-weight: 850; letter-spacing: .3em; }
.full-button { width: 100%; margin-top: .7rem; }
.factor-separator { display: flex; align-items: center; gap: .6rem; margin: .9rem 0 .15rem; color: #9a91a4; font-size: .65rem; }
.factor-separator::before, .factor-separator::after { content: ""; height: 1px; flex: 1; background: var(--line); }

.security-center-card { width: min(42rem, calc(100vw - 2rem)); }
.security-center-body { display: grid; gap: .75rem; }
.security-account-summary { display: flex; align-items: center; gap: .8rem; padding: .75rem; border-radius: .9rem; background: #f8f5fb; }
.security-account-avatar { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: .85rem; color: white; background: linear-gradient(145deg, #7650c6, #4e238f); font-weight: 900; }
.security-account-summary > span:last-child { display: grid; gap: .15rem; }
.security-account-summary strong { font-size: .84rem; }
.security-account-summary small { color: var(--muted); font-size: .69rem; }
.security-method-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .9rem; border: 1px solid var(--line); border-radius: .95rem; background: #fff; }
.security-method-card h3 { margin: 0 0 .18rem; font-size: .84rem; }
.security-method-card p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.security-method-icon { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border-radius: .8rem; font-weight: 900; }
.security-method-icon.violet { color: #5b2bb2; background: #efe7fb; letter-spacing: -.12em; }
.security-method-icon.mint { color: #087f6b; background: #ddf7ef; }
.security-method-icon.orange { color: #a05a1d; background: #fff0df; }
.passkeys-card { grid-template-rows: auto auto; }
.passkey-list { grid-column: 2 / -1; display: grid; gap: .45rem; margin: .15rem 0 0; padding: 0; list-style: none; }
.passkey-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .65rem; border-radius: .65rem; background: #f8f6fa; }
.passkey-item-copy { display: grid; gap: .1rem; }
.passkey-item-copy strong { font-size: .73rem; }
.passkey-item-copy small { color: var(--muted); font-size: .62rem; }
.passkey-remove { border: 0; color: #a82f4b; background: transparent; cursor: pointer; font-size: .69rem; font-weight: 800; }
.passkey-empty { color: var(--muted); font-size: .7rem; }

.totp-setup-card { width: min(35rem, calc(100vw - 2rem)); }
.totp-setup-body { display: grid; justify-items: center; gap: .8rem; }
.setup-steps { width: 100%; margin: 0; padding-left: 1.4rem; color: #5d526a; font-size: .76rem; line-height: 1.55; }
.totp-qr-placeholder { display: grid; place-items: center; width: 10.5rem; height: 10.5rem; padding: .65rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; }
.totp-qr-placeholder img { display: block; width: 100%; height: 100%; object-fit: contain; }
.totp-qr-placeholder > span { color: #6e42bb; font-size: 4rem; }
.totp-secret-label { width: 100%; display: grid; gap: .35rem; color: #544a60; font-size: .7rem; font-weight: 800; }
.totp-secret-label input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; text-align: center; }

@media (max-width: 980px) {
  .dashboard { grid-template-rows: auto minmax(0, 1fr); }
  .topbar { min-height: 4.75rem; flex-wrap: wrap; gap: .5rem; padding-block: .55rem; }
  .workspace-switcher { order: 3; width: 100%; }
  .workspace-switcher-button { flex: 1; justify-content: center; }
  .class-overview { grid-template-columns: 1fr; }
  .classes-panel, .students-panel { min-height: auto; }
  .class-list { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .teacher-management-view { grid-row: 2; }
}

@media (max-width: 700px) {
  .teacher-view-heading, .student-register-heading { align-items: stretch; flex-direction: column; }
  .teacher-view-heading > button, .student-register-actions, .student-register-actions > button { width: 100%; }
  .student-name-fields { grid-template-columns: 1fr; }
  .student-table, .student-table tbody { display: block; }
  .student-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .student-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .8rem 0; border-top: 1px solid #eeeaf1; }
  .student-table td { padding: 0; border: 0; }
  .student-table td:nth-child(2) { grid-column: 1; padding-left: 3.1rem; }
  .student-table td:last-child { grid-column: 2; grid-row: 1 / span 2; }
  .security-method-card { grid-template-columns: auto minmax(0, 1fr); }
  .security-method-card > button { grid-column: 1 / -1; width: 100%; }
  .passkey-list { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .dashboard-brand small { display: none; }
  .topbar-actions .back-home-link { display: none; }
  .teacher-management-view { padding: 1rem .7rem; }
  .classes-panel, .students-panel { padding: .8rem; }
}