/* A compact class seal replaces the long school-year line in the header. */
.brand-hero .brand-copy { align-self:center; }
.header-account :is(#classSwitchButton,.preview-badge).class-switch-badge {
  box-sizing:border-box;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
  max-width:38px;
  margin:0;
  padding:0;
  border:1px solid color-mix(in srgb,var(--accent) 48%,var(--line));
  border-radius:50%;
  background:var(--surface);
  color:var(--accent);
  box-shadow:inset 0 0 0 2px var(--surface),inset 0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
  font-size:13px;
  font-weight:750;
  font-variant-numeric:tabular-nums;
  line-height:1;
  letter-spacing:-.04em;
  cursor:pointer;
}
.header-account :is(#classSwitchButton,.preview-badge).class-switch-badge.is-senior { font-size:10px;letter-spacing:-.06em; }
.header-account :is(#classSwitchButton,.preview-badge).class-switch-badge.is-unset { color:var(--muted);border-color:var(--line);box-shadow:none;font-size:14px; }
.header-account :is(#classSwitchButton,.preview-badge).class-switch-badge:hover { background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.header-account :is(#classSwitchButton,.preview-badge).class-switch-badge:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
.header-account :is(#teacherSyncStatusButton,#themeToggleBtn,#accountAvatarButton) {
  box-sizing:border-box;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
  max-width:38px;
  margin:0;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--surface);
  box-shadow:0 1px 3px rgb(20 30 45 / 8%),inset 0 1px 0 rgb(255 255 255 / 5%);
  overflow:hidden;
  transition:background .18s,border-color .18s,box-shadow .18s;
}
.header-account :is(#teacherSyncStatusButton,#themeToggleBtn,#accountAvatarButton):hover {
  border-color:color-mix(in srgb,currentColor 35%,var(--line));
  background:color-mix(in srgb,currentColor 5%,var(--surface));
  box-shadow:0 3px 9px rgb(20 30 45 / 12%);
}
.header-account :is(#teacherSyncStatusButton,#themeToggleBtn,#accountAvatarButton):focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.header-account #teacherSyncStatusButton { color:#b7444b; }
.header-account #teacherSyncStatusButton[data-state="saved"] { color:#218657;border-color:color-mix(in srgb,#218657 30%,var(--line)); }
.header-account #teacherSyncStatusButton.is-syncing { color:#497ca5; }
.header-account #teacherSyncStatusButton .sync-status-icon { display:block;width:22px;height:22px;flex:0 0 22px;stroke-width:1.8;transform-origin:50% 50%; }
.header-account #themeToggleBtn { color:var(--ink); }
.header-account #themeToggleBtn[data-icon="moon"] { color:#566f88; }
.header-account #themeToggleBtn[data-icon="sun"] { color:#d99d40; }
.header-account #themeToggleBtn .ui-icon { width:21px;height:21px;margin:0; }
.header-account #themeToggleBtn .ui-icon svg { stroke-width:1.7; }
.header-account #accountAvatarButton { border-color:color-mix(in srgb,var(--ink) 18%,var(--line)); }
.header-account #accountAvatarButton .account-avatar-frame,
.header-account #accountAvatarButton .account-avatar-frame img { border-radius:50%;object-fit:cover;object-position:center; }
@media (max-width:760px) {
  .brand-hero .header-account { gap:5px; }
  .header-account :is(#classSwitchButton,.preview-badge).class-switch-badge { flex-basis:38px;width:38px;height:38px;min-width:38px;min-height:38px;max-width:38px;font-size:13px; }
  .header-account :is(#classSwitchButton,.preview-badge).class-switch-badge.is-senior { font-size:10px; }
  .header-account :is(#teacherSyncStatusButton,#themeToggleBtn,#accountAvatarButton) { flex:0 0 38px;width:38px;height:38px;min-width:38px;min-height:38px;max-width:38px; }
}