@import url("./player/player-core.css?v=20260701-course-menu-scores-shortcut-v3");
@import url("./player/design/layouts/standard-lms/shell.css");

/* Prevent first-paint FOUC until runtime design tokens are applied. */
body.design-pending .dev-shell {
  visibility: hidden;
}

/* Consistent keyboard focus visibility across interactive controls. */
button:focus-visible,
a[href]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--nls-color-primary, #2563eb);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--nls-color-primary-bg, #dbeafe) 78%, transparent);
}

/* Slightly larger hit targets for key navigation toggles. */
.dev-sidebar .dev-nav-icon,
.panel-toggle,
.dev-section-toggle,
.brand-builder-toggle {
  min-height: 2.5rem;
}

/* Improve readability of dynamic status and message copy. */
.panel-message,
.auth-meta,
#player-status {
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.course-launch-feedback {
  display: grid;
  gap: 0.7rem;
  margin: 0.4rem 0 0;
  padding: 0.95rem 1rem;
  border: 1px solid color-mix(in srgb, var(--nls-color-border-soft, #cbd5e1) 78%, transparent);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--nls-color-surface, #ffffff) 92%, #eff6ff 8%);
}

.course-launch-feedback__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.course-launch-feedback__spinner {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, 0.22);
  border-top-color: rgba(37, 99, 235, 0.92);
  animation: support-capture-spin 0.72s linear infinite;
  flex-shrink: 0;
}

.course-launch-feedback__heading {
  margin: 0;
  font-weight: 700;
  color: var(--nls-color-text, #0f172a);
}

.course-launch-feedback__secondary,
.course-launch-feedback__detail {
  margin: 0;
  min-height: 1.2rem;
  color: var(--nls-color-text-muted, #475569);
}

.course-launch-feedback__detail.is-error {
  color: var(--nls-color-danger-ink, #b91c1c);
}

.course-launch-feedback__actions {
  min-height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.panel-message[hidden] {
  display: none !important;
}

.adaptive-connected-outcomes {
  margin-top: 1rem;
  border: 1px solid var(--nls-color-border-soft, rgba(148, 163, 184, 0.35));
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.75),
    rgba(248, 250, 252, 0.96)
  );
}

.adaptive-connected-outcomes__unit {
  margin-top: -0.35rem;
}

.adaptive-connected-outcomes__list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adaptive-connected-outcomes__item {
  display: block;
  padding-top: 0.6rem;
  border-top: 1px solid var(--nls-color-border-soft, rgba(148, 163, 184, 0.25));
}

.adaptive-connected-outcomes__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.adaptive-connected-outcomes__label {
  color: var(--nls-color-text, #0f172a);
}

.adaptive-connected-outcomes__value {
  display: inline;
  color: var(--nls-color-text-muted, #475569);
}

.adaptive-connected-outcomes__value p {
  display: inline;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.landing-auth-panel[hidden] {
  display: none !important;
}

body.is-logged-out .dev-sidebar {
  display: none !important;
}

body.is-logged-out .dev-shell {
  grid-template-columns: 1fr;
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

body.is-logged-out .player-region {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
}

body.is-logged-out #layout-shell-region {
  display: none !important;
}

body.is-logged-out #player-panel {
  order: 1;
  width: 100%;
  min-height: 100vh;
}

/* Remove inherited panel card chrome for pre-auth login surface. */
body.is-logged-out #landing-auth-panel.panel {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Logged-out shell (option 1): single column — login only; no duplicate player/placeholder. */
body.is-logged-out #player-container {
  display: grid;
  grid-template-columns: minmax(0, 420px);
  grid-template-areas: "auth";
  column-gap: 0;
  row-gap: 0.75rem;
  align-items: start;
  justify-content: center;
  max-width: min(100%, 420px);
  margin: 0 auto;
  width: 100%;
}

body.is-logged-out .legacy-player__status {
  display: none;
}

body.is-logged-out .legacy-player__workspace {
  display: none !important;
}

body.is-logged-out .legacy-player__layout {
  display: none !important;
}

body.is-logged-out #player-nav {
  display: none !important;
}

body.is-logged-out .player-fallback {
  display: none !important;
}

.landing-auth-panel {
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
}

.landing-auth-slot {
  display: flex;
  justify-content: center;
  padding: 0 16px 12px;
}

.landing-auth-slot[hidden] {
  display: none !important;
}

/* Prevent empty shell mount point from showing a top sliver. */
#layout-shell-region {
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 0;
}

#layout-shell-region:empty {
  display: none !important;
}

/* Standard LMS/GME runtime: suppress legacy status rail to avoid top gap shifts. */
body[data-layout="standard-lms"]:not(.is-logged-out) #player-status,
body[data-layout="gme-platform"]:not(.is-logged-out) #player-status {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
}

body.is-logged-out .landing-auth-slot {
  grid-area: auth;
  justify-content: stretch;
  align-self: start;
  padding: 0;
  width: 100%;
  max-width: 420px;
  height: auto;
}

.landing-auth-panel--in-fallback {
  margin: 0.75rem auto 0.65rem;
  padding: 0;
  width: min(100%, 420px);
  border-radius: 18px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 72%, #d1d5db 28%);
  background: linear-gradient(180deg, #fafbff 0%, #f2f4fa 100%);
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.is-logged-out .landing-auth-panel--in-fallback {
  width: 100%;
  margin: 0;
  height: auto;
  box-sizing: border-box;
}

/* Option 2 (visible logged-out player): restore two-column grid and
   optional `body.is-logged-out[data-theme="dev-view"] .player-placeholder` rules. */

@media (max-width: 900px) {
  body.is-logged-out #player-container {
    grid-template-columns: 1fr;
    grid-template-areas: "auth";
    max-width: 100%;
    margin: 0 auto;
  }

  body.is-logged-out .landing-auth-slot {
    max-width: 100%;
    height: auto;
  }

  body.is-logged-out .landing-auth-panel--in-fallback {
    height: auto;
    border-radius: 0;
    padding: 0;
  }
}

@media (min-width: 901px) {
  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-shell {
    transition: grid-template-columns 220ms ease;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar {
    transition:
      width 220ms ease,
      min-width 220ms ease,
      border-color 180ms ease;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar__rail {
    transition:
      width 220ms ease,
      padding 220ms ease,
      gap 220ms ease;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon {
    transition:
      width 220ms ease,
      min-width 220ms ease,
      max-width 220ms ease,
      padding 220ms ease,
      gap 220ms ease,
      justify-content 220ms ease,
      background-color 140ms ease,
      color 140ms ease;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon__label {
    opacity: 1;
    transform: translateX(0);
    transition:
      opacity 140ms ease,
      transform 220ms ease;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed .dev-nav-icon__label {
    opacity: 0;
    transform: translateX(-4px);
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__menu-icon svg {
    transition: transform 220ms ease;
    transform-origin: center;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"]:has(.dev-sidebar.collapsed)
    .dev-top-header__menu-icon
    svg {
    transform: rotate(-90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-shell,
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar,
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar__rail,
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon,
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon__label,
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__menu-icon svg {
    transition: none !important;
  }
}

/* Enforced final mode behavior (kept last for precedence). */
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-expanded"] .dev-shell {
  grid-template-columns: 240px minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) !important;
  grid-template-areas:
    "top top"
    "sidebar player" !important;
}

/* Top header is fixed at 56px; keep player viewport inside remaining screen height. */
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .player-region {
  height: calc(100dvh - 56px) !important;
  min-height: calc(100dvh - 56px) !important;
  max-height: calc(100dvh - 56px) !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-expanded"] .dev-sidebar {
  width: 240px !important;
  min-width: 240px !important;
  position: relative !important;
  transform: none !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-expanded"] .dev-nav-icon__label {
  display: inline !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-shell {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) !important;
  grid-template-areas:
    "top top"
    "sidebar player" !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-sidebar {
  width: 76px !important;
  min-width: 76px !important;
  position: relative !important;
  transform: none !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-nav-icon__label {
  display: none !important;
}

body.assessment-focus-mode:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) !important;
  grid-template-areas:
    "top"
    "player" !important;
}

body.assessment-focus-mode:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar,
body.assessment-focus-mode:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] #top-header-menu-toggle,
body.assessment-focus-mode:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .mobile-sidebar-backdrop {
  display: none !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) !important;
  grid-template-areas:
    "top"
    "player" !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-sidebar {
  position: fixed !important;
  top: 56px !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 76px !important;
  min-width: 76px !important;
  transform: translateX(0) !important;
  z-index: 1401 !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-sidebar.collapsed {
  transform: translateX(-100%) !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .mobile-sidebar-backdrop:not([hidden]) {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(15, 23, 42, 0.08) !important;
  z-index: 1400 !important;
}

/* Mode-driven layout overrides (fit-based, not fixed-breakpoint only). */
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-expanded"]
  .dev-shell {
  grid-template-columns: 240px minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) !important;
  grid-template-areas:
    "top top"
    "sidebar player";
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-expanded"]
  .dev-sidebar {
  width: 240px !important;
  min-width: 240px !important;
  height: calc(100dvh - 56px) !important;
  min-height: calc(100dvh - 56px) !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  transform: none !important;
  border-right: 1px solid #e4e7ec !important;
  box-shadow: none !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-expanded"]
  .dev-sidebar__rail {
  width: 240px !important;
  height: calc(100dvh - 56px) !important;
  min-height: calc(100dvh - 56px) !important;
  max-height: calc(100dvh - 56px) !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-expanded"]
  .dev-nav-icon__label {
  display: inline !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"]
  .dev-shell {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) !important;
  grid-template-areas:
    "top top"
    "sidebar player";
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"]
  .dev-sidebar {
  width: 76px !important;
  min-width: 76px !important;
  height: calc(100dvh - 56px) !important;
  min-height: calc(100dvh - 56px) !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  transform: none !important;
  border-right: 1px solid #e4e7ec !important;
  box-shadow: none !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"]
  .dev-sidebar__rail {
  width: 76px !important;
  height: calc(100dvh - 56px) !important;
  min-height: calc(100dvh - 56px) !important;
  max-height: calc(100dvh - 56px) !important;
  padding: 10px 8px 10px !important;
  align-items: center !important;
  gap: 8px !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"]
  .dev-nav-icon {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  min-height: 48px !important;
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
  text-align: center !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"]
  .dev-nav-icon__label {
  display: none !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"]
  .dev-nav-icon[data-panel="announcements"]::before,
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"]
  #sidebar-admin2-btn::before,
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"]
  #sidebar-store::before {
  display: none !important;
  content: none !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"]
  .dev-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) !important;
  grid-template-areas:
    "top"
    "player";
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"]
  .dev-sidebar {
  position: fixed !important;
  top: 56px !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 1401 !important;
  width: 76px !important;
  min-width: 76px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-y: hidden !important;
  scrollbar-gutter: unset !important;
  transform: translateX(0) !important;
  border-right: 1px solid #d0d5dd !important;
  box-shadow: inset -1px 0 0 #d0d5dd !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"]
  .dev-sidebar.collapsed {
  transform: translateX(-100%) !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"]
  .mobile-sidebar-backdrop:not([hidden]) {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(15, 23, 42, 0.08) !important;
  z-index: 1400 !important;
  cursor: pointer !important;
  appearance: none;
}

body.assessment-focus-mode:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "top"
    "player" !important;
}

body.assessment-focus-mode:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar,
body.assessment-focus-mode:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] #top-header-menu-toggle,
body.assessment-focus-mode:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .mobile-sidebar-backdrop {
  display: none !important;
}

/* Uniandes surface: action/menu + overview metric palette tune. */
body.is-uniandes-branding-surface[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon.active {
  background: #040f72 !important;
  border-color: #040f72 !important;
  color: #ffffff !important;
}

body.is-gme-connected-branding-surface[data-theme="dev-view"][data-layout="standard-lms"] {
  --nls-color-primary: #89a3b4;
  --nls-color-primary-ink: #5e7686;
  --nls-color-primary-strong: #4f6777;
  --nls-color-primary-bg: #dfe8ee;
  --nls-color-primary-bg-light: #edf2f5;
  --nls-color-primary-border-strong: #6f899a;
  --nls-brand-cta: #728c9d;
  --nls-brand-cta-hover: #5e7686;
  --nls-brand-cta-active: #4f6777;
  --nls-brand-accent: #5e7686;
}

body.is-gme-united-branding-surface[data-theme="dev-view"][data-layout="standard-lms"] {
  --nls-color-primary: #0d3f62;
  --nls-color-primary-ink: #0d3f62;
  --nls-color-primary-strong: #0a3250;
  --nls-color-primary-bg: #d7e4ef;
  --nls-color-primary-bg-light: #eaf1f6;
  --nls-color-primary-border-strong: #0a3654;
  --nls-brand-cta: #0d3f62;
  --nls-brand-cta-hover: #0a3250;
  --nls-brand-cta-active: #08263d;
  --nls-brand-accent: #0d3f62;
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon.active {
  background: var(--nls-brand-cta) !important;
  border-color: var(--nls-brand-cta) !important;
  color: #ffffff !important;
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface) .courses-add-button,
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface) .account-editor-actions > button[id*="save" i],
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface) .account-editor-actions > button[data-action*="save" i],
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface) .account-editor-actions > button.account-action--primary,
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .admin2-users-search-toolbar
  .admin2-users-search-toolbar__search-btn,
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .admin2-shell
  .admin2-actions
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled),
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .admin2-shell
  .classes-action-bar
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled) {
  background: var(--nls-brand-cta) !important;
  border-color: var(--nls-brand-cta) !important;
  color: #ffffff !important;
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface) .courses-add-button:is(:hover, :focus-visible):not(:disabled),
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .account-editor-actions
  > button[id*="save" i]:is(:hover, :focus-visible):not(:disabled),
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .account-editor-actions
  > button[data-action*="save" i]:is(:hover, :focus-visible):not(:disabled),
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .account-editor-actions
  > button.account-action--primary:is(:hover, :focus-visible):not(:disabled),
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .admin2-users-search-toolbar
  .admin2-users-search-toolbar__search-btn:is(:hover, :focus-visible):not(:disabled),
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .admin2-shell
  .admin2-actions
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):is(
    :hover,
    :focus-visible
  ),
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .admin2-shell
  .classes-action-bar
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):is(
    :hover,
    :focus-visible
  ) {
  background: var(--nls-brand-cta-hover) !important;
  border-color: var(--nls-brand-cta-hover) !important;
  color: #ffffff !important;
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface) .courses-add-button:active:not(:disabled),
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface) .account-editor-actions > button[id*="save" i]:active:not(:disabled),
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface) .account-editor-actions > button[data-action*="save" i]:active:not(:disabled),
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface) .account-editor-actions > button.account-action--primary:active:not(:disabled),
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .admin2-users-search-toolbar
  .admin2-users-search-toolbar__search-btn:active:not(:disabled),
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .admin2-shell
  .admin2-actions
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):active,
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .admin2-shell
  .classes-action-bar
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):active {
  background: var(--nls-brand-cta-active) !important;
  border-color: var(--nls-brand-cta-active) !important;
  color: #ffffff !important;
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface).is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-form
  #login-btn {
  border-color: var(--nls-brand-cta) !important;
  background: var(--nls-brand-cta) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--nls-brand-cta) 30%, transparent 70%) !important;
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface).is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-form
  #login-btn:is(:hover, :focus-visible) {
  border-color: var(--nls-brand-cta-hover) !important;
  background: var(--nls-brand-cta-hover) !important;
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface).is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-form
  #login-btn:active:not(:disabled) {
  border-color: var(--nls-brand-cta-active) !important;
  background: var(--nls-brand-cta-active) !important;
}

body.is-uniandes-branding-surface .courses-add-button,
body.is-uniandes-branding-surface .account-editor-actions > button[id*="save" i],
body.is-uniandes-branding-surface .account-editor-actions > button[data-action*="save" i],
body.is-uniandes-branding-surface .account-editor-actions > button.account-action--primary,
body.is-uniandes-branding-surface .admin2-users-search-toolbar .admin2-users-search-toolbar__search-btn,
body.is-uniandes-branding-surface
  .admin2-shell
  .admin2-actions
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled),
body.is-uniandes-branding-surface
  .admin2-shell
  .classes-action-bar
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled) {
  background: #040f72 !important;
  border-color: #040f72 !important;
  color: #ffffff !important;
}

body.is-uniandes-branding-surface .courses-add-button:is(:hover, :focus-visible):not(:disabled),
body.is-uniandes-branding-surface
  .account-editor-actions
  > button[id*="save" i]:is(:hover, :focus-visible):not(:disabled),
body.is-uniandes-branding-surface
  .account-editor-actions
  > button[data-action*="save" i]:is(:hover, :focus-visible):not(:disabled),
body.is-uniandes-branding-surface
  .account-editor-actions
  > button.account-action--primary:is(:hover, :focus-visible):not(:disabled),
body.is-uniandes-branding-surface
  .admin2-users-search-toolbar
  .admin2-users-search-toolbar__search-btn:is(:hover, :focus-visible):not(:disabled),
body.is-uniandes-branding-surface
  .admin2-shell
  .admin2-actions
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):is(
    :hover,
    :focus-visible
  ),
body.is-uniandes-branding-surface
  .admin2-shell
  .classes-action-bar
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):is(
    :hover,
    :focus-visible
  ),
body.is-uniandes-branding-surface .courses-add-button:active:not(:disabled),
body.is-uniandes-branding-surface .account-editor-actions > button[id*="save" i]:active:not(:disabled),
body.is-uniandes-branding-surface .account-editor-actions > button[data-action*="save" i]:active:not(:disabled),
body.is-uniandes-branding-surface .account-editor-actions > button.account-action--primary:active:not(:disabled),
body.is-uniandes-branding-surface
  .admin2-users-search-toolbar
  .admin2-users-search-toolbar__search-btn:active:not(:disabled),
body.is-uniandes-branding-surface
  .admin2-shell
  .admin2-actions
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):active,
body.is-uniandes-branding-surface
  .admin2-shell
  .classes-action-bar
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):active {
  background: #040f72 !important;
  border-color: #040f72 !important;
}

body.is-uniandes-branding-surface .teacher-class-overview-metric__ring {
  background:
    radial-gradient(circle at center, #ffffff 52%, transparent 53%),
    conic-gradient(
      #040f72 var(--metric-ring-progress),
      color-mix(in srgb, var(--nls-color-primary) 13%, #dce8fb 87%) 0
    ) !important;
}

body.is-uniandes-branding-surface .teacher-class-overview-metric__bar {
  background: color-mix(in srgb, var(--nls-color-primary) 13%, #dce8fb 87%) !important;
}

body.is-uniandes-branding-surface .teacher-class-overview-metric__bar-fill {
  background: #040f72 !important;
}

body.is-uniandes-branding-surface .admin-home-cockpit .progress-node__bar,
body.is-uniandes-branding-surface .teacher-class-view .progress-node__bar,
body.is-uniandes-branding-surface .classes-hub-class-row__panel .progress-node__bar,
body.is-uniandes-branding-surface .teacher-course-progress__bar {
  background: var(--nls-color-border-soft) !important;
}

body.is-uniandes-branding-surface .admin-home-cockpit .progress-node__bar-fill,
body.is-uniandes-branding-surface .teacher-class-view .progress-node__bar-fill,
body.is-uniandes-branding-surface .classes-hub-class-row__panel .progress-node__bar-fill,
body.is-uniandes-branding-surface .teacher-course-progress__bar-fill {
  background: #040f72 !important;
}

body.is-uniandes-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-form
  #login-btn {
  border-color: #040f72 !important;
  background: #040f72 !important;
  box-shadow: 0 8px 22px rgba(4, 15, 114, 0.26) !important;
}

body.is-uniandes-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-form
  #login-btn:is(:hover, :focus-visible) {
  border-color: #030b57 !important;
  background: #030b57 !important;
}

body.is-uniandes-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-form
  #login-btn:active:not(:disabled) {
  border-color: #020844 !important;
  background: #020844 !important;
}

/* Edukasindo surface: primary action + menu palette tune. */
body.is-edukasindo-branding-surface .dev-nav-icon.active,
body:not(.is-logged-out):has(.dev-top-header__brand-logo[src*="edukasindo"]) .dev-nav-icon.active {
  background: #1b62a0 !important;
  border-color: #1b62a0 !important;
  color: #ffffff !important;
}

body.is-edukasindo-branding-surface .courses-add-button,
body.is-edukasindo-branding-surface .account-editor-actions > button[id*="save" i],
body.is-edukasindo-branding-surface .account-editor-actions > button[data-action*="save" i],
body.is-edukasindo-branding-surface .account-editor-actions > button.account-action--primary,
body.is-edukasindo-branding-surface
  .admin2-shell
  .admin2-actions
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled),
body.is-edukasindo-branding-surface
  .admin2-shell
  .classes-action-bar
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled) {
  background: #1b62a0 !important;
  border-color: #1b62a0 !important;
  color: #ffffff !important;
}

body.is-edukasindo-branding-surface .courses-add-button:is(:hover, :focus-visible):not(:disabled),
body.is-edukasindo-branding-surface
  .account-editor-actions
  > button[id*="save" i]:is(:hover, :focus-visible):not(:disabled),
body.is-edukasindo-branding-surface
  .account-editor-actions
  > button[data-action*="save" i]:is(:hover, :focus-visible):not(:disabled),
body.is-edukasindo-branding-surface
  .account-editor-actions
  > button.account-action--primary:is(:hover, :focus-visible):not(:disabled),
body.is-edukasindo-branding-surface
  .admin2-shell
  .admin2-actions
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):is(
    :hover,
    :focus-visible
  ),
body.is-edukasindo-branding-surface
  .admin2-shell
  .classes-action-bar
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):is(
    :hover,
    :focus-visible
  ) {
  background: #175389 !important;
  border-color: #175389 !important;
  color: #ffffff !important;
}

body.is-edukasindo-branding-surface .courses-add-button:active:not(:disabled),
body.is-edukasindo-branding-surface .account-editor-actions > button[id*="save" i]:active:not(:disabled),
body.is-edukasindo-branding-surface .account-editor-actions > button[data-action*="save" i]:active:not(:disabled),
body.is-edukasindo-branding-surface .account-editor-actions > button.account-action--primary:active:not(:disabled),
body.is-edukasindo-branding-surface
  .admin2-shell
  .admin2-actions
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):active,
body.is-edukasindo-branding-surface
  .admin2-shell
  .classes-action-bar
  > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):active {
  background: #134777 !important;
  border-color: #134777 !important;
}

body.is-edukasindo-branding-surface.is-logged-out
  .landing-auth-form
  #login-btn,
body.is-logged-out:has(
    .landing-auth-panel__header .dev-login-brand-environment__logo[src*="edukasindo"]
  )
  .landing-auth-form
  #login-btn {
  border-color: #1b62a0 !important;
  background: #1b62a0 !important;
  box-shadow: 0 8px 22px rgba(27, 98, 160, 0.26) !important;
}

body.is-edukasindo-branding-surface.is-logged-out
  .landing-auth-form
  #login-btn:is(:hover, :focus-visible),
body.is-logged-out:has(
    .landing-auth-panel__header .dev-login-brand-environment__logo[src*="edukasindo"]
  )
  .landing-auth-form
  #login-btn:is(:hover, :focus-visible) {
  border-color: #175389 !important;
  background: #175389 !important;
}

body.is-edukasindo-branding-surface.is-logged-out
  .landing-auth-form
  #login-btn:active:not(:disabled),
body.is-logged-out:has(
    .landing-auth-panel__header .dev-login-brand-environment__logo[src*="edukasindo"]
  )
  .landing-auth-form
  #login-btn:active:not(:disabled) {
  border-color: #134777 !important;
  background: #134777 !important;
}

body.is-edukasindo-branding-surface:not(.is-logged-out) .dev-top-header__menu,
body:not(.is-logged-out):has(.dev-top-header__brand-logo[src*="edukasindo"]) .dev-top-header__menu {
  color: #1b62a0 !important;
}

body.is-edukasindo-branding-surface:not(.is-logged-out) .dev-top-header__menu:hover,
body:not(.is-logged-out):has(.dev-top-header__brand-logo[src*="edukasindo"]) .dev-top-header__menu:hover {
  background: rgba(27, 98, 160, 0.12) !important;
  color: #1b62a0 !important;
}

body.is-edukasindo-branding-surface
  #player-nav
  :is(#nav-prev, #nav-menu, #nav-next).is-active,
body.is-edukasindo-branding-surface
  #player-nav
  :is(#nav-prev, #nav-menu, #nav-next):active:not(:disabled),
body:not(.is-logged-out):has(.dev-top-header__brand-logo[src*="edukasindo"])
  #player-nav
  :is(#nav-prev, #nav-menu, #nav-next).is-active,
body:not(.is-logged-out):has(.dev-top-header__brand-logo[src*="edukasindo"])
  #player-nav
  :is(#nav-prev, #nav-menu, #nav-next):active:not(:disabled) {
  background: #1b62a0 !important;
  color: #ffffff !important;
}

/* Edukasindo: align quick-access + class header gradients to primary blue. */
body.is-edukasindo-branding-surface .admin-home-cockpit,
body:not(.is-logged-out):has(.dev-top-header__brand-logo[src*="edukasindo"]) .admin-home-cockpit {
  background:
    linear-gradient(to bottom, rgba(27, 98, 160, 0.08), transparent 200px),
    #f8fafc;
}

body.is-edukasindo-branding-surface .admin-home-cockpit__header,
body.is-edukasindo-branding-surface
  .classes-hub-class-row
  .classes-hub-class-row__titles
  .classes-hub-class-row__node-band,
body:not(.is-logged-out):has(.dev-top-header__brand-logo[src*="edukasindo"]) .admin-home-cockpit__header,
body:not(.is-logged-out):has(.dev-top-header__brand-logo[src*="edukasindo"])
  .classes-hub-class-row
  .classes-hub-class-row__titles
  .classes-hub-class-row__node-band {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.18), transparent 40%),
    linear-gradient(135deg, #2b78bb 0%, #1b62a0 52%, #134777 100%) !important;
}
.track-activity-dashboard {
  display: grid;
  gap: 0.85rem;
}

.track-activity-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.track-activity-metric-card {
  background: #fff;
  border: 1px solid #dbe5f4;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  padding: 0.85rem 0.95rem 0.6rem;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0.04rem;
}

.track-activity-metric-card__label {
  margin: 0;
  font-size: 0.86rem;
  color: #4e5b72;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.25;
}

.track-activity-metric-card__icon {
  width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #95a7c4;
}

.track-activity-metric-card__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.track-activity-metric-card__value {
  margin: 0;
  font-size: 1.42rem;
  font-weight: 700;
  color: #122136;
  line-height: 1.05;
  letter-spacing: -0.01em;
  align-self: start;
  margin-top: 0;
}

.track-activity-metric-card__sub {
  margin: 0;
  font-size: 0.8rem;
  color: #5a6880;
  line-height: 1.25;
}

.track-activity-metric-card--primary .track-activity-metric-card__value,
.track-activity-value--accent {
  color: #1b61ff;
}

.track-activity-classes-stack {
  display: grid;
  gap: 0.8rem;
}

.track-activity-class-card,
.track-activity-timeline-card {
  background: #fff;
  border: 1px solid #dbe5f4;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.track-activity-class-card__header,
.track-activity-timeline-card__header {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 0.95rem;
  text-align: left;
  cursor: pointer;
}

.track-activity-class-card__left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.track-activity-class-card__icon {
  width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6682a8;
  flex: 0 0 auto;
}

.track-activity-class-card__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.track-activity-class-card__name,
.track-activity-timeline-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #152641;
}

.track-activity-timeline-card__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.track-activity-timeline-card__title-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5f7ca6;
}

.track-activity-timeline-card__title-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.track-activity-status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
}

.track-activity-status-chip--active {
  background: #eaf2ff;
  color: #1b61ff;
}

.track-activity-status-chip--ended {
  background: #eff3f8;
  color: #5e6c84;
}

.track-activity-class-card__right {
  text-align: right;
  min-width: 7rem;
  margin-left: auto;
}

.track-activity-class-card__label {
  margin: 0;
  font-size: 0.75rem;
  color: #64748b;
}

.track-activity-class-card__value {
  margin: 0.08rem 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a2c46;
}

.track-activity-class-card__body {
  border-top: 1px solid #e4ebf7;
  padding: 0.75rem 0.95rem 0.9rem;
  display: grid;
  gap: 0.65rem;
}

.track-activity-class-card__enrolled {
  margin: 0;
  color: #44546d;
  font-size: 0.92rem;
}

.track-activity-class-card__summary {
  border: 1px solid #d7e5ff;
  background: #f7faff;
  border-radius: 10px;
  padding: 0.48rem 0.62rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.65rem;
  color: #274878;
  font-size: 0.9rem;
  font-weight: 700;
}

.track-activity-class-card__summary span:last-child {
  color: #1b61ff;
}

.track-activity-course-table {
  border: 1px solid #e3ebf7;
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  display: grid;
  gap: 0.25rem;
}

.track-activity-course-table__head,
.track-activity-course-table__row,
.track-activity-course-table__footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.8rem;
  align-items: center;
}

.track-activity-course-table__head {
  font-size: 0.82rem;
  color: #5a6b85;
  padding-bottom: 0.3rem;
}

.track-activity-course-table__row {
  font-size: 0.95rem;
  color: #1c2d46;
  padding: 0.42rem 0;
  border-top: 1px solid #edf2fb;
}

.track-activity-course-table__time {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.track-activity-course-table__footer {
  margin-top: 0.2rem;
  padding-top: 0.55rem;
  border-top: 1px solid #dfe8f7;
  font-weight: 700;
  color: #1a2d48;
}

.track-activity-class-card__chevron,
.track-activity-timeline-card__chevron {
  margin-left: 0.4rem;
  color: #4f6280;
}

.track-activity-timeline-card__header {
  padding: 0.82rem 0.95rem;
}

.track-activity-timeline-card__toggle {
  font-size: 0.9rem;
  color: #2a3a54;
  margin-left: auto;
}

.track-activity-timeline-card__body {
  border-top: 1px solid #e4ebf7;
  padding: 0.65rem 0.95rem 0.9rem;
}

.track-activity-timeline-table {
  display: grid;
}

.track-activity-timeline-table__head,
.track-activity-timeline-table__row {
  display: grid;
  grid-template-columns: 1.1fr 0.95fr 0.95fr 0.95fr 1fr;
  gap: 0.7rem;
  align-items: center;
}

.track-activity-timeline-table__head {
  color: #5f7089;
  font-size: 0.82rem;
  padding: 0.2rem 0 0.45rem;
}

.track-activity-timeline-table__row {
  color: #1d2e48;
  font-size: 0.9rem;
  padding: 0.42rem 0;
  border-top: 1px solid #edf2fb;
}

.track-activity-note {
  margin: 0;
  border: 1px solid #d6e6ff;
  background: #f6faff;
  color: #355075;
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  font-size: 0.88rem;
}

@media (max-width: 768px) {
  .track-activity-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .track-activity-metric-card {
    min-height: 114px;
  }

  .track-activity-class-card__header {
    padding: 0.75rem 0.8rem;
  }

  .track-activity-class-card__name {
    font-size: 0.96rem;
  }

  .track-activity-class-card__right {
    min-width: 5.6rem;
  }

  .track-activity-class-card__value {
    font-size: 1rem;
  }

  .track-activity-class-card__body {
    padding: 0.65rem 0.8rem 0.8rem;
  }

  .track-activity-course-table {
    padding: 0.5rem 0.55rem;
  }

  .track-activity-course-table__head {
    font-size: 0.78rem;
  }

  .track-activity-course-table__row {
    font-size: 0.92rem;
  }

  .track-activity-timeline-card__body {
    padding: 0.55rem 0.8rem 0.75rem;
  }

  .track-activity-timeline-table__head,
  .track-activity-timeline-table__row {
    grid-template-columns: 1fr 0.92fr 0.92fr 0.9fr 0.95fr;
    gap: 0.5rem;
    font-size: 0.82rem;
  }
}

/* Final guard: logged-out mobile must never inherit 76px sidebar-rail layout. */
@media (max-width: 900px) {
  body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .dev-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, auto) !important;
    grid-template-areas:
      "top"
      "player" !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
  }

  body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }

  body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .player-region,
  body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #player-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #player-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: center !important;
  }

  body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-slot {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #landing-auth-panel,
  body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #landing-auth-panel.landing-auth-panel--in-fallback {
    width: min(100%, 420px) !important;
    max-width: min(100%, 420px) !important;
    margin-inline: auto !important;
  }
}

.landing-auth-panel--in-fallback .panel-header {
  margin-bottom: 0;
}

.landing-auth-panel__header {
  display: grid;
  gap: 0.62rem;
}

.landing-auth-panel--in-fallback .panel-title {
  width: min(100%, 400px);
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0;
  box-sizing: border-box;
  padding-left: 0.35rem;
  text-align: left;
  font-size: 0.92rem;
  color: color-mix(
    in srgb,
    var(--nls-color-text-soft, #64748b) 88%,
    #334155 12%
  );
  letter-spacing: 0.01em;
  font-weight: 650;
}

.dev-brand-module {
  width: min(100%, 400px);
  margin-inline: auto;
  border-radius: 12px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 75%, #d1d5db 25%);
  background: linear-gradient(180deg, #f8f9fc 0%, #f0f3fa 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 20px rgba(15, 23, 42, 0.06);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 0.7rem;
}

.dev-brand-module__logo {
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #3671bc 0%, #24508f 100%);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(36, 80, 143, 0.28);
}

.dev-brand-module__logo svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

/* Full-width hero strip (GME Connected webp); no title/chip row */
.dev-brand-module--image-only {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding: 0;
  gap: 0;
  grid-template-columns: unset;
  overflow: hidden;
  background: color-mix(in srgb, var(--nls-color-surface-alt, #f8fafc) 92%, #e2e8f0 8%);
}

.dev-brand-module--image-only .dev-brand-module__media {
  display: block;
  width: 100%;
  line-height: 0;
}

.dev-brand-module--image-only .dev-brand-module__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  vertical-align: top;
}

/* Pre-auth login panel: same max width as inset fields + Login title */
.landing-auth-panel__header .dev-brand-module--image-only {
  width: min(100%, 400px);
  max-width: min(100%, 400px);
  margin-inline: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.landing-auth-panel__header .dev-brand-module--compact-books {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.landing-auth-panel__header .dev-brand-module--localhost-auth {
  width: 100%;
  max-width: min(100%, 400px);
  margin-inline: auto;
  margin-bottom: -0.28rem;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.landing-auth-panel__header .dev-brand-module--environment-auth {
  width: 100%;
  max-width: min(100%, 400px);
  margin-inline: auto;
  margin-bottom: -0.28rem;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.landing-auth-panel__header .dev-login-brand-localhost {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: flex-start;
  gap: 0.87rem;
  box-sizing: border-box;
  padding: 0.525rem 0;
  color: #2f6fed;
}

.landing-auth-panel__header .dev-login-brand-environment {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: flex-start;
  gap: 0.87rem;
  box-sizing: border-box;
  padding: 0.525rem 0;
  color: #2f6fed;
}

.landing-auth-panel__header .dev-login-brand-environment__media {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
}

.landing-auth-panel__header .dev-login-brand-environment__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  background-color: currentColor;
  -webkit-mask-image: var(--nls-action-placeholder-icon);
  mask-image: var(--nls-action-placeholder-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.landing-auth-panel__header .dev-login-brand-environment__logo {
  width: min(100%, 69px);
  height: auto;
  display: block;
}

.landing-auth-panel__header .dev-login-brand-environment__logo-combo {
  width: min(100%, 430px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.3rem, 0.8vw, 0.7rem);
}

.landing-auth-panel__header .dev-login-brand-environment__logo--combo-primary {
  width: auto;
  height: clamp(44px, 4.8vw, 64px);
  max-width: 44%;
  object-fit: contain;
}

.landing-auth-panel__header .dev-login-brand-environment__logo--combo-secondary {
  width: auto;
  height: clamp(40px, 4.6vw, 58px);
  max-width: 54%;
  object-fit: contain;
}

.landing-auth-panel__header .dev-login-brand-environment--with-logo {
  color: #0057b8;
}

.landing-auth-panel__header .dev-login-brand-environment--with-logo .dev-login-brand-environment__media {
  width: 69px;
  height: 42px;
  flex: 0 0 69px;
}

.landing-auth-panel__header .dev-login-brand-environment--with-logo.dev-login-brand-environment--gme .dev-login-brand-environment__media {
  width: 69px;
  height: 42px;
  flex: 0 0 69px;
}

.landing-auth-panel__header .dev-login-brand-environment--logo-only {
  grid-template-columns: 1fr;
  justify-items: center;
  width: 100%;
  max-width: 100%;
}

.landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__media {
  width: 100%;
  max-width: 100%;
  height: auto;
  flex: 1 1 auto;
}

.landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__logo {
  width: 100%;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
}

.landing-auth-panel__header .dev-login-brand-environment--logo-only.dev-login-brand-environment--gme .dev-login-brand-environment__media {
  width: 100%;
}

.landing-auth-panel__header .dev-login-brand-environment--logo-only.dev-login-brand-environment--gme .dev-login-brand-environment__logo {
  max-height: none;
}

body.is-gme-connected-united-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-panel__header
  .dev-login-brand-environment--logo-only.dev-login-brand-environment--gme
  .dev-login-brand-environment__media {
  justify-content: center;
}

body.is-gme-connected-united-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-panel__header
  .dev-login-brand-environment--logo-only.dev-login-brand-environment--gme
  .dev-login-brand-environment__logo {
  width: min(100%, 390px);
  max-width: 100%;
  max-height: clamp(84px, 10.4vw, 122px);
  object-fit: contain;
  margin-inline: auto;
}

body.is-gme-connected-united-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-panel__header
  .dev-login-brand-environment__logo-combo {
  width: min(100%, 560px);
  max-width: 100%;
  justify-content: center;
  gap: clamp(0.34rem, 0.95vw, 0.8rem);
}

body.is-gme-connected-united-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-panel__header
  .dev-login-brand-environment__logo--combo-primary {
  width: min(36%, 200px);
  max-width: 36%;
  height: auto;
  max-height: none;
  object-fit: contain;
  flex: 0 0 auto;
  margin-inline: 0;
}

body.is-gme-connected-united-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-panel__header
  .dev-login-brand-environment__logo--combo-secondary {
  width: min(64%, 360px);
  max-width: 64%;
  height: auto;
  max-height: none;
  object-fit: contain;
  flex: 0 0 auto;
  margin-inline: 0;
}

.landing-auth-panel__header .dev-login-brand-environment--gme-platforms {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  width: 100%;
  gap: 0;
}

.landing-auth-panel__header .dev-login-brand-environment__powered-by {
  display: block;
  font-size: 0.76rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4f647d;
  white-space: nowrap;
}

.landing-auth-panel__header .dev-login-brand-environment__media--gme-platforms {
  width: 100%;
  height: clamp(52px, 6.4vw, 78px);
  min-height: clamp(52px, 6.4vw, 78px);
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(88px, 21%) minmax(0, 1fr);
  align-items: stretch;
  justify-content: stretch;
  gap: clamp(0.35rem, 1.1vw, 0.7rem);
}

.landing-auth-panel__header .dev-login-brand-environment__gme-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  min-width: 0;
}

.landing-auth-panel__header .dev-login-brand-environment__wordmark-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}

.landing-auth-panel__header .dev-login-brand-environment__logo--gme-platforms-icon {
  width: 100%;
  height: auto;
  flex: 0 1 auto;
  max-height: calc(100% - 1.2rem);
  max-width: 100%;
  object-fit: contain;
  object-position: left top;
}

.landing-auth-panel__header .dev-login-brand-environment__logo--gme-platforms-wordmark {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: right bottom;
}

.landing-auth-panel__header .dev-login-brand-environment--gme-cobrand-stack {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  width: 100%;
  gap: 0;
}

.landing-auth-panel__header .dev-login-brand-environment__media--gme-cobrand-stack {
  width: 100%;
  min-height: clamp(128px, 13.4vw, 170px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.12rem, 0.5vw, 0.32rem);
}

.landing-auth-panel__header .dev-login-brand-environment__logos-row {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.38rem, 1vw, 0.6rem);
  width: min(100%, 390px);
}

.landing-auth-panel__header .dev-login-brand-environment__logo--gme-cobrand-stack-logo {
  width: auto;
  height: clamp(68px, 9vw, 112px);
  max-width: min(88%, 210px);
  object-fit: contain;
}

.landing-auth-panel__header .dev-login-brand-environment__logo--gme-cobrand-stack-partner {
  width: auto;
  height: clamp(68px, 9vw, 112px);
  max-width: min(88%, 210px);
  object-fit: contain;
}

.landing-auth-panel__header .dev-login-brand-environment--gme-cobrand-stack-uniandes .dev-login-brand-environment__media--gme-cobrand-stack {
  min-height: clamp(96px, 10.2vw, 132px);
  gap: clamp(0.12rem, 0.5vw, 0.28rem);
}

.landing-auth-panel__header .dev-login-brand-environment--gme-cobrand-stack-uniandes .dev-login-brand-environment__logos-row {
  justify-content: space-between;
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
  padding-inline: clamp(0.2rem, 0.8vw, 0.45rem);
  box-sizing: border-box;
}

.landing-auth-panel__header .dev-login-brand-environment--gme-cobrand-stack-uniandes .dev-login-brand-environment__logo--gme-cobrand-stack-logo-uniandes,
.landing-auth-panel__header .dev-login-brand-environment--gme-cobrand-stack-uniandes .dev-login-brand-environment__logo--gme-cobrand-stack-partner {
  height: clamp(52px, 6vw, 72px);
  max-width: min(47%, 190px);
}

.landing-auth-panel__header .dev-login-brand-environment__powered-by--stack {
  display: block;
  width: min(100%, 390px);
  text-align: left;
  font-size: clamp(0.62rem, 1vw, 0.8rem);
  line-height: 1.2;
  letter-spacing: 0.07em;
}

.landing-auth-panel__header .dev-login-brand-environment__logo--gme-cobrand-stack-wordmark {
  width: min(100%, 390px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.landing-auth-panel__header
  .dev-login-brand-environment--with-logo
  .dev-login-brand-environment__logo {
  width: min(100%, 69px);
}

.landing-auth-panel__header
  .dev-login-brand-environment--with-logo.dev-login-brand-environment--gme
  .dev-login-brand-environment__logo {
  width: min(100%, 69px);
}

.landing-auth-panel__header
  .dev-login-brand-environment--with-logo
  .dev-login-brand-environment__label {
  font-size: 45px;
}

.landing-auth-panel__header .dev-login-brand-environment__label {
  font-size: 45px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #2f6fed;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landing-auth-panel__header .dev-login-brand-localhost__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  background-color: currentColor;
  -webkit-mask-image: var(--nls-action-placeholder-icon);
  mask-image: var(--nls-action-placeholder-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.landing-auth-panel__header .dev-login-brand-localhost__label {
  font-size: 45px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #2f6fed;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landing-auth-panel__header .dev-brand-logo-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.landing-auth-panel__header .dev-brand-logo-row--dual {
  justify-content: space-between;
}

.landing-auth-panel__header .dev-brand-logo-row--platforms {
  justify-content: space-between;
  gap: 0.32rem;
}

.landing-auth-panel__header .dev-brand-logo-row__item {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-auth-panel__header .dev-brand-logo-row__item--platforms-books {
  flex: 1.2 1 0;
}

.landing-auth-panel__header
  .dev-brand-logo-row__item--platforms-books
  .dev-united-books-anim {
  width: 100%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.18rem;
}

.landing-auth-panel__header
  .dev-brand-logo-row__item--platforms-books
  .dev-united-book {
  border-radius: 6px;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--nls-shadow-color, #0f172a) 16%, transparent 84%);
}

.landing-auth-panel__header .dev-brand-logo-row__image {
  max-width: 100%;
  height: auto;
  display: block;
}

.landing-auth-panel__header .dev-brand-logo-row__image--gme {
  width: min(100%, 15.5rem);
}

.landing-auth-panel__header .dev-brand-logo-row__image--uniandes {
  width: min(100%, 15.5rem);
}

.landing-auth-panel__header .dev-brand-logo-row__image--connected-wordmark {
  width: 100%;
  max-width: 100%;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-books-anim {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book {
  display: block;
  border-radius: 9px;
  border: 1px solid var(--nls-cover-border-color, #d1d5db);
  overflow: hidden;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--nls-shadow-color, #0f172a) 24%, transparent 76%);
  opacity: 0;
  animation-duration: 760ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-fill-mode: both;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book img {
  width: 100%;
  height: auto;
  display: block;
}

/* Global compact-books fallback: keep pre-auth strips responsive across
   host variants even when wrapper/context classes differ. */
.dev-brand-module--compact-books {
  width: 100%;
  max-width: 100%;
}

.dev-brand-module--compact-books .dev-united-books-anim {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.12rem, 1.2vw, 0.4rem);
}

.dev-brand-module--compact-books .dev-united-book {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dev-brand-module--compact-books .dev-united-book img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--1,
.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--2,
.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--3 {
  animation-name: dev-compact-book-drop;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--4,
.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--5,
.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--6 {
  animation-name: dev-compact-book-rise;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--1 {
  animation-delay: 40ms;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--2 {
  animation-delay: 120ms;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--3 {
  animation-delay: 200ms;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--4 {
  animation-delay: 70ms;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--5 {
  animation-delay: 150ms;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--6 {
  animation-delay: 230ms;
}

.landing-auth-panel__header .dev-brand-module--compact-uniandes {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.landing-auth-panel__header .dev-brand-module--compact-uniandes .dev-brand-logo-row {
  gap: 0.32rem;
}

.landing-auth-panel__header .dev-brand-module--compact-platforms .dev-brand-logo-row {
  gap: 0.26rem;
}

/* Legacy login hero image guard for cached/older markup variants. */
.landing-auth-panel__header .dev-brand-module__hero-image {
  display: none !important;
}

/* Global GME guard: hide legacy hero/media logo blocks regardless active theme. */
.dev-placeholder--gme-connected-surface .dev-brand-module__hero-image,
.dev-placeholder--gme-connected-surface .dev-brand-module__media {
  display: none !important;
}

.landing-auth-panel__header .dev-brand-module--compact-platforms .dev-platforms-books-row {
  width: 100%;
  display: block;
}

.landing-auth-panel__header .dev-brand-module--compact-platforms .dev-platforms-books-row--third {
  margin-top: 0.34rem;
}

.landing-auth-panel__header
  .dev-brand-module--compact-platforms
  .dev-platforms-books-row--third
  .dev-united-book--1 {
  animation-delay: 230ms;
}

.landing-auth-panel__header
  .dev-brand-module--compact-platforms
  .dev-platforms-books-row--third
  .dev-united-book--2 {
  animation-delay: 150ms;
}

.landing-auth-panel__header
  .dev-brand-module--compact-platforms
  .dev-platforms-books-row--third
  .dev-united-book--3 {
  animation-delay: 70ms;
}

.landing-auth-panel__header
  .dev-brand-module--compact-platforms
  .dev-platforms-books-row--third
  .dev-united-book--4 {
  animation-delay: 200ms;
}

.landing-auth-panel__header
  .dev-brand-module--compact-platforms
  .dev-platforms-books-row--third
  .dev-united-book--5 {
  animation-delay: 120ms;
}

.landing-auth-panel__header
  .dev-brand-module--compact-platforms
  .dev-platforms-books-row--third
  .dev-united-book--6 {
  animation-delay: 40ms;
}

@keyframes dev-compact-book-drop {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.97);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes dev-compact-book-rise {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book {
    opacity: 1;
    animation: none;
    transform: none;
    filter: none;
  }
}

.dev-brand-module__copy {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.dev-brand-module__copy strong {
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--nls-color-text-mid, #334155);
}

.dev-brand-module__copy span {
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--nls-color-text-soft, #64748b);
}

.dev-env-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  min-height: 1.35rem;
  padding: 0 0.5rem;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 76%, #d1d5db 24%);
  background: color-mix(in srgb, var(--nls-color-surface-alt) 70%, #eef2ff 30%);
  font-size: 0.69rem;
  line-height: 1;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.landing-auth-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.82rem;
}

.landing-auth-form .auth-grid {
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

/* Inset fields: idle = large centered caption; stacked when focused, filled, or autofill.
   ~3.5rem (56px) min height follows common “comfortable” single-line + floating-label density
   (e.g. Material default outlined field) and ≥44px touch guidance; fields may exceed Login height. */
.landing-inset-field {
  width: min(100%, 400px);
  margin-inline: auto;
}

.landing-inset-field__shell {
  --landing-inset-idle-pad-block: 0.875rem;
  --landing-inset-stacked-pad-top: 1.45rem;
  --landing-inset-stacked-pad-bottom: 0.92rem;
  position: relative;
  border-radius: 12px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft, #cbd5e1) 75%, #d1d5db 25%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nls-color-surface-alt, #f8fafc) 92%, #e2e8f0 8%) 0%,
    color-mix(in srgb, var(--nls-color-surface-soft, #f1f5f9) 88%, #e2e8f0 12%)
      100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  box-sizing: border-box;
  min-height: 3.5rem;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.landing-inset-field:focus-within .landing-inset-field__shell {
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary, #2563eb) 42%,
    var(--nls-color-border-soft, #cbd5e1) 58%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--nls-color-primary-bg-soft, #e0e7ff) 55%,
        transparent
      );
}

.landing-inset-field:has(.landing-inset-field__input:user-invalid)
  .landing-inset-field__shell {
  border-color: color-mix(
    in srgb,
    var(--nls-color-danger-strong, #dc2626) 45%,
    var(--nls-color-border-soft, #cbd5e1) 55%
  );
}

body[data-theme="dev-view"] .landing-auth-form .landing-inset-field__label {
  display: block;
  margin: 0;
  padding: 0;
  min-height: 3.5rem;
  cursor: text;
  font-size: inherit;
  color: inherit;
  flex-direction: unset;
  gap: 0;
}

.landing-inset-field__caption {
  position: absolute;
  left: 1.05rem;
  z-index: 1;
  line-height: 1.3;
  pointer-events: none;
  letter-spacing: 0.01em;
  font-weight: 500;
  transition:
    top 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    font-size 200ms cubic-bezier(0.4, 0, 0.2, 1),
    color 180ms ease;
}

/* Remembered credentials: skip idle→stacked tween */
.landing-inset-field:has(.landing-inset-field__input:-webkit-autofill)
  .landing-inset-field__caption,
.landing-inset-field--prefill-no-caption-motion .landing-inset-field__caption {
  transition: none;
}

.landing-inset-field:not(.landing-inset-field--password)
  .landing-inset-field__caption {
  right: 1.05rem;
}

.landing-inset-field--password .landing-inset-field__caption {
  right: 2.95rem;
}

.landing-inset-field:not(:focus-within):not(.landing-inset-field--filled):not(
    :has(.landing-inset-field__input:-webkit-autofill)
  )
  .landing-inset-field__caption {
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: color-mix(
    in srgb,
    var(--nls-color-text-soft, #64748b) 82%,
    #111827 18%
  );
}

.landing-inset-field:focus-within .landing-inset-field__caption,
.landing-inset-field.landing-inset-field--filled .landing-inset-field__caption,
.landing-inset-field:has(.landing-inset-field__input:-webkit-autofill)
  .landing-inset-field__caption {
  top: 0.38rem;
  transform: translateY(0);
  font-size: 0.625rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  font-weight: 500;
  color: color-mix(
    in srgb,
    var(--nls-color-text-soft, #64748b) 88%,
    #111827 12%
  );
}

.landing-inset-field:focus-within .landing-inset-field__caption {
  color: color-mix(
    in srgb,
    var(--nls-color-text-soft, #64748b) 82%,
    #111827 18%
  );
}

body[data-theme="dev-view"] .landing-auth-form .landing-inset-field__input,
.landing-inset-field__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  background: transparent;
  min-height: 3.5rem;
  padding: var(--landing-inset-idle-pad-block, 0.875rem) 1.05rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--nls-color-text-mid, #334155);
  outline: none;
  box-shadow: none;
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
}

.landing-inset-field:focus-within .landing-inset-field__input,
.landing-inset-field.landing-inset-field--filled .landing-inset-field__input,
.landing-inset-field:has(.landing-inset-field__input:-webkit-autofill)
  .landing-inset-field__input {
  padding-top: var(--landing-inset-stacked-pad-top, 1.45rem);
  padding-bottom: var(--landing-inset-stacked-pad-bottom, 0.92rem);
}

.landing-inset-field--password .landing-inset-field__input {
  padding-right: 2.95rem;
}

@keyframes landing-inset-autofill {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

.landing-inset-field__input:-webkit-autofill,
.landing-inset-field__input:-webkit-autofill:hover,
.landing-inset-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--nls-color-text-mid, #334155);
  caret-color: var(--nls-color-text-mid, #334155);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  transition: background-color 9999s ease-out;
  animation-name: landing-inset-autofill;
  animation-duration: 0.001s;
}

.landing-inset-field__input:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.landing-inset-field__reveal {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: color-mix(
    in srgb,
    var(--nls-color-text-soft, #64748b) 72%,
    var(--nls-color-text-subtle, #94a3b8) 28%
  );
  cursor: pointer;
  transition:
    color 120ms ease,
    background-color 120ms ease;
}

.landing-inset-field__reveal:hover {
  color: var(--nls-color-text-mid, #334155);
  background: color-mix(
    in srgb,
    var(--nls-color-surface-soft, #f1f5f9) 88%,
    transparent
  );
}

.landing-inset-field__reveal:focus-visible {
  outline: 2px solid var(--nls-color-primary, #2563eb);
  outline-offset: 2px;
}

.landing-inset-field__reveal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-inset-field__reveal-icon--on[hidden],
.landing-inset-field__reveal-icon--off[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .landing-inset-field__shell,
  .landing-inset-field__caption {
    transition-duration: 0.01ms !important;
  }
}

.landing-auth-form .auth-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  width: 100%;
}

.landing-auth-form .auth-actions button,
.account-summary button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.landing-auth-form .auth-actions button {
  width: 100%;
  min-width: 0;
}

/* OAuth divider + buttons: same max width as primary controls; hidden when no providers */
.landing-auth-oauth-block {
  display: none;
  flex-direction: column;
  gap: 0.62rem;
  width: 100%;
  margin-top: 0.12rem;
}

.landing-auth-oauth-block:has(#social-auth-actions:not(:empty)) {
  display: flex;
}

.landing-auth-oauth-divider {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: min(100%, 400px);
  margin-inline: auto;
}

.landing-auth-oauth-divider__rule {
  flex: 1 1 0;
  min-width: 0;
  height: 1px;
  background: color-mix(in srgb, var(--nls-color-border-soft) 72%, #e5e7eb 28%);
}

.landing-auth-oauth-divider__label {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--nls-color-text-soft) 82%, #111827 18%);
  white-space: nowrap;
}

.landing-auth-form .auth-actions--social {
  display: grid;
  gap: 0.52rem;
}

.landing-auth-form .auth-actions--social:empty {
  display: none;
}

.landing-auth-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 0.75rem;
  row-gap: 0.45rem;
  width: min(100%, 400px);
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: 0.35rem;
}

.landing-auth-options #landing-auth-remember-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.landing-auth-options:has(#landing-auth-remember-wrap[hidden]) {
  justify-content: flex-end;
}

/* Override dev-view `label { flex-direction: column }` so checkbox + copy stay on one line */
.landing-auth-form .landing-auth-remember {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--nls-color-text-soft) 82%, #111827 18%);
}

.landing-auth-form .landing-auth-remember input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: #2b5ea5;
  border-radius: 4px;
}

.landing-auth-form .auth-actions > button:only-child {
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  .landing-auth-form .auth-actions {
    grid-template-columns: 1fr;
  }
}

.landing-auth-form #login-btn {
  order: 1;
  width: min(100%, 400px);
  margin-inline: auto;
  min-height: 2.95rem;
  border-radius: 12px;
  border: 1px solid #1f57a5;
  background: linear-gradient(180deg, #3d78c4 0%, #2b5ea5 100%);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.landing-auth-form #register-btn {
  order: 2;
  width: min(100%, 400px);
  margin-inline: auto;
  min-height: 2.95rem;
  border-radius: 12px;
  border: 1px solid #d18a29;
  background: linear-gradient(180deg, #f6b04c 0%, #e8942f 100%);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.landing-auth-form #register-btn[hidden] {
  display: none !important;
}

.landing-auth-recovery-notice {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 400px);
  margin-inline: auto;
  padding: 0.4rem;
  border-radius: 16px;
  background: color-mix(in srgb, #ffffff 94%, #eff6ff 6%);
  box-shadow:
    0 18px 48px rgba(15, 23, 42, 0.18),
    0 0 0 1px color-mix(in srgb, var(--nls-color-primary, #2563eb) 24%, transparent);
  box-sizing: border-box;
}

.landing-auth-recovery-notice[hidden] {
  display: none !important;
}

.landing-auth-recovery-notice__card {
  display: grid;
  justify-items: center;
  gap: 0.62rem;
  width: 100%;
  padding: 1.1rem 1rem;
  text-align: center;
}

.landing-auth-recovery-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nls-color-primary-bg-light, #eff6ff) 82%, #ffffff 18%);
  color: var(--nls-color-primary, #2563eb);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nls-color-primary, #2563eb) 24%, transparent);
}

.landing-auth-recovery-notice__icon svg {
  width: 1.28rem;
  height: 1.28rem;
  fill: currentColor;
}

.landing-auth-recovery-notice__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--nls-color-text, #0f172a);
}

.landing-auth-recovery-notice__copy {
  max-width: 18rem;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.42;
  font-weight: 600;
  color: var(--nls-color-text-muted, #475569);
}

.landing-auth-recovery-notice__button {
  min-height: 2.35rem;
  margin-top: 0.1rem;
  padding: 0.48rem 0.92rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--nls-color-primary, #2563eb) 50%, #ffffff 50%);
  background: color-mix(in srgb, var(--nls-color-primary, #2563eb) 88%, #1e40af 12%);
  color: #ffffff;
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.2;
  font-weight: 750;
  cursor: pointer;
}

.landing-auth-recovery-notice__button:hover,
.landing-auth-recovery-notice__button:focus-visible {
  filter: brightness(1.04);
}

.landing-auth-form #register-btn:hover,
.landing-auth-form #login-btn:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.landing-auth-form #register-btn:active,
.landing-auth-form #login-btn:active {
  transform: translateY(0);
}

.landing-auth-forgot {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: color-mix(in srgb, var(--nls-color-text-soft) 82%, #111827 18%);
  text-decoration: underline;
  text-decoration-color: color-mix(
    in srgb,
    var(--nls-color-border-soft) 88%,
    transparent 12%
  );
  text-underline-offset: 0.18em;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
}

.landing-auth-forgot[hidden] {
  display: none !important;
}

.landing-auth-forgot:hover {
  color: #1f57a5;
  text-decoration-color: color-mix(in srgb, #1f57a5 50%, transparent 50%);
}

.landing-auth-forgot:focus-visible {
  outline: 2px solid color-mix(in srgb, #1f57a5 65%, transparent 35%);
  outline-offset: 2px;
}

.landing-auth-form #auth-message {
  width: min(100%, 400px);
  margin-inline: auto;
  text-align: center;
}

.social-auth-btn {
  min-height: 40px;
  border-radius: 6px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 140ms ease;
}

/* Match primary Login / Register (12px radius); modest min-height vs inset fields. */
.landing-auth-form .auth-actions .social-auth-btn,
.landing-auth-form #social-auth-actions .social-auth-btn {
  width: min(100%, 400px);
  margin-inline: auto;
  border-radius: 12px;
  min-height: 2.95rem;
  box-sizing: border-box;
  padding-inline: 14px;
}

.social-auth-btn .social-auth-btn__label {
  flex: 1 1 auto;
  text-align: left;
  line-height: 1;
}

.social-auth-btn:hover:not(:disabled) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.social-auth-btn:active:not(:disabled) {
  box-shadow: none;
}

.social-auth-btn:disabled {
  cursor: not-allowed;
}

.social-auth-btn.is-coming-soon {
  opacity: 0.72;
}

.social-auth-btn__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.social-auth-btn__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.social-auth-btn--google {
  background: #ffffff;
  color: #3c4043;
  border-color: #dadce0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
}

.social-auth-btn--google:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #d2d6da;
}

.social-auth-btn--facebook {
  background: #1877f2;
  color: #ffffff;
  border-color: #1877f2;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  border-radius: 6px;
}

.social-auth-btn--facebook:hover:not(:disabled) {
  background: #166fe5;
  border-color: #166fe5;
}

.social-auth-btn--apple {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
  font-family:
    "SF Pro Text",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-weight: 600;
  border-radius: 6px;
}

.social-auth-btn--apple:hover:not(:disabled) {
  background: #111111;
  border-color: #111111;
}

.social-auth-sdk {
  width: 100%;
}

.social-auth-sdk.is-disabled {
  opacity: 0.65;
  pointer-events: none;
}

.social-auth-sdk__mount {
  width: min(100%, 400px);
  margin-inline: auto;
  min-height: 40px;
}

.social-auth-sdk__mount > div {
  width: 100% !important;
}

.social-auth-sdk__mount iframe {
  width: 100% !important;
  max-width: 100%;
}

.notices-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

#messages-tools > button {
  width: 100%;
}

#messages-tools {
  display: grid;
  grid-template-columns: 1fr;
}

#messages-tools > button.is-active {
  border-color: var(--nls-color-primary);
  background: var(--nls-color-primary-bg);
  color: var(--nls-color-primary-strong);
}

.messages-tools {
  display: grid;
  gap: 0.4rem;
}

.messages-tools > button.is-active {
  border-color: var(--nls-color-primary);
  background: var(--nls-color-primary-bg);
  color: var(--nls-color-primary-strong);
}

.notices-compose {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.65rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 12px;
}

.notices-compose label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.notices-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.notices-card {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 12px;
  padding: 0.65rem;
  background: var(--nls-color-surface);
}

.notices-card__meta {
  font-size: 0.78rem;
  color: var(--nls-color-text-soft);
  display: grid;
  gap: 0.2rem;
}

.notices-card__sender {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--nls-color-text);
  font-weight: 600;
}

.notices-card__sender-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.notice-inline-action {
  font-size: 0.68rem;
  line-height: 1;
  padding: 0.12rem 0.36rem;
  min-height: 1.1rem;
  border-radius: 999px;
}

.notices-card__details {
  color: var(--nls-color-text-soft);
}

.notices-card__body {
  margin: 0.4rem 0 0.55rem;
  line-height: 1.35;
}

.notices-card__body > :first-child {
  margin-top: 0;
}

.notices-card__body > :last-child {
  margin-bottom: 0;
}

.notices-card__actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

/* Unified inbox selected-detail card (announcement + support). */
.admin2-shell--unified-inbox .inbox-unified-card {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 12px;
  padding: 0.65rem;
  background: var(--nls-color-surface);
  display: grid;
  gap: 0.55rem;
}

.admin2-shell--unified-inbox .inbox-unified-card__title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.32;
}

.admin2-shell--unified-inbox .inbox-unified-card--notice .inbox-unified-card__title {
  color: #0f172a;
  font-weight: 700;
}

.admin2-shell--unified-inbox .inbox-unified-card__meta {
  margin: 0.35rem 0 0;
  color: var(--nls-color-text-soft);
}

.admin2-shell--unified-inbox .inbox-unified-card__meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.72rem;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--nls-color-border-soft, #d0d5dd) 75%, #c6d6ec 25%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--nls-color-surface, #fff) 96%, #f3f8ff 4%);
}

.admin2-shell--unified-inbox .inbox-unified-card--notice .inbox-unified-card__meta-strip {
  margin-bottom: 0.15rem;
}

.admin2-shell--unified-inbox .inbox-unified-card__meta-strip--action {
  border-color: color-mix(in srgb, var(--nls-color-primary, #2563eb) 32%, #cbd5e1 68%);
  background: color-mix(in srgb, #eef4ff 34%, #ffffff 66%);
}

.admin2-shell--unified-inbox .inbox-unified-card__meta-group {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  position: relative;
}

.admin2-shell--unified-inbox .inbox-unified-card__meta-group:not(:last-child)::after {
  content: "";
  width: 1px;
  align-self: stretch;
  background: color-mix(in srgb, var(--nls-color-border-soft, #d0d5dd) 72%, #b9c7dd 28%);
  margin-left: 0.2rem;
}

.admin2-shell--unified-inbox .inbox-unified-card__meta-label {
  font-size: 0.78rem;
  line-height: 1.2;
  color: var(--nls-color-text-soft, #667085);
  font-weight: 600;
  white-space: nowrap;
}

.admin2-shell--unified-inbox .inbox-unified-card__meta-values {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.admin2-shell--unified-inbox .inbox-unified-card__meta-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--nls-color-primary, #2563eb) 25%, var(--nls-color-border-soft, #d0d5dd) 75%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--nls-color-primary-bg-light, #eef4ff) 34%, #ffffff 66%);
  color: color-mix(in srgb, var(--nls-color-primary, #2563eb) 74%, #1d4ed8 26%);
  font-size: 0.74rem;
  line-height: 1.2;
  font-weight: 650;
  padding: 0.12rem 0.46rem;
  max-width: 420px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin2-shell--unified-inbox .inbox-unified-card__meta-pill--sentto {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: unset;
  max-width: min(520px, 100%);
}

.admin2-shell--unified-inbox .inbox-unified-card__meta-avatar {
  flex: 0 0 auto;
}

.admin2-shell--unified-inbox .inbox-unified-card__meta-text {
  font-size: 0.8rem;
  line-height: 1.24;
  color: var(--nls-color-text, #0f172a);
  overflow-wrap: anywhere;
}

.admin2-shell--unified-inbox .inbox-unified-card__meta-text--strong {
  font-weight: 650;
}

.admin2-shell--unified-inbox .inbox-unified-card__meta-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-size: 0.68rem;
  line-height: 1.2;
  font-weight: 620;
  color: var(--nls-color-text-soft, #667085);
  background: color-mix(in srgb, var(--nls-color-surface, #fff) 88%, #eff4fb 12%);
  border: 1px solid color-mix(in srgb, var(--nls-color-border-soft, #d0d5dd) 76%, #bfd1eb 24%);
  border-radius: 999px;
  padding: 0.14rem 0.44rem;
  overflow-wrap: anywhere;
}

.admin2-shell--unified-inbox .inbox-unified-card__meta-chip--action {
  color: #1d4ed8;
  border-color: color-mix(in srgb, #2563eb 36%, #bfdbfe 64%);
  background: color-mix(in srgb, #eff6ff 72%, #ffffff 28%);
  font-weight: 700;
}

.admin2-shell--unified-inbox .inbox-unified-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.45rem 0 0;
}

.admin2-shell--unified-inbox .inbox-unified-card__body {
  margin: 0;
  line-height: 1.5;
  padding: 0.58rem 0.66rem;
  border: 1px solid color-mix(in srgb, var(--nls-color-border-soft, #d0d5dd) 72%, #c9d7ec 28%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--nls-color-surface, #fff) 94%, #f8fbff 6%);
}

.admin2-shell--unified-inbox .inbox-support-session-summary {
  margin: 0.72rem 0 0;
  padding: 0.58rem 0.66rem;
  border: 1px solid color-mix(in srgb, var(--nls-color-border-soft, #d0d5dd) 72%, #d5dfef 28%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--nls-color-surface, #fff) 95%, #f4f8ff 5%);
}

.admin2-shell--unified-inbox .inbox-support-session-summary__title {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--nls-color-text-soft, #667085);
}

.admin2-shell--unified-inbox .inbox-support-session-summary__intro {
  margin: 0.22rem 0 0;
  font-size: 0.74rem;
  color: var(--nls-color-text, #0f172a);
}

.admin2-shell--unified-inbox .inbox-support-session-summary__list {
  margin: 0.36rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.24rem;
  font-size: 0.73rem;
  color: var(--nls-color-text, #0f172a);
}

.admin2-shell--unified-inbox .inbox-support-session-summary__clicks {
  margin: 0.22rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.18rem;
}

.admin2-shell--unified-inbox .inbox-support-reply-quote {
  margin: 0.5rem 0 0;
  padding: 0.52rem 0.66rem;
  border-left: 3px solid color-mix(in srgb, var(--nls-color-primary, #2563eb) 44%, #cbd5e1 56%);
  border-radius: 8px;
  background: color-mix(in srgb, #eef4ff 45%, #ffffff 55%);
}

.admin2-shell--unified-inbox .inbox-support-reply-quote__label {
  margin: 0 0 0.18rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--nls-color-text-soft, #667085);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.admin2-shell--unified-inbox .inbox-support-reply-quote__meta-inline {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--nls-color-text-soft, #667085);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.admin2-shell--unified-inbox .inbox-support-reply-quote__body p {
  margin: 0.15rem 0 0;
}

.admin2-shell--unified-inbox .inbox-unified-card__attachments {
  display: grid;
  gap: 0.38rem;
  margin: 0;
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-label-wrap {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.56rem;
  border: 1px solid color-mix(in srgb, var(--nls-color-border-soft, #d0d5dd) 76%, #c6d7f0 24%);
  border-radius: 11px;
  background: color-mix(in srgb, var(--nls-color-surface, #fff) 97%, #f7faff 3%);
  padding: 0.5rem 0.6rem;
  text-decoration: none;
  color: inherit;
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--nls-color-border-soft, #d0d5dd) 72%, #d6e0ef 28%);
  background: color-mix(in srgb, var(--nls-color-surface, #fff) 90%, #f3f6fb 10%);
  color: color-mix(in srgb, var(--nls-color-text-soft, #64748b) 88%, #334155 12%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.admin2-shell--unified-inbox
  .inbox-unified-card__attachment-icon.inbox-unified-card__attachment-icon--loading::after {
  content: "";
  position: absolute;
  width: 0.86rem;
  height: 0.86rem;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--nls-color-border-soft, #d0d5dd) 70%, transparent);
  border-top-color: color-mix(in srgb, var(--nls-color-primary, #2563eb) 70%, #0f172a 30%);
  animation: support-capture-spin 0.75s linear infinite;
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-icon svg {
  width: 1.14rem;
  height: 1.14rem;
  display: block;
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-row--pdf .inbox-unified-card__attachment-icon {
  color: #dc2626;
  background: color-mix(in srgb, #fef2f2 78%, #ffffff 22%);
  border-color: color-mix(in srgb, #fecaca 64%, #e5e7eb 36%);
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-row--image .inbox-unified-card__attachment-icon {
  color: #0f766e;
  background: color-mix(in srgb, #ecfeff 74%, #ffffff 26%);
  border-color: color-mix(in srgb, #99f6e4 52%, #d1d5db 48%);
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-row--video .inbox-unified-card__attachment-icon {
  color: #1d4ed8;
  background: color-mix(in srgb, #eff6ff 72%, #ffffff 28%);
  border-color: color-mix(in srgb, #bfdbfe 56%, #d1d5db 44%);
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0b1220;
  border-radius: inherit;
  pointer-events: none;
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-image-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-video-play {
  position: absolute;
  inset: auto auto 2px 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, #0f172a 74%, #111827 26%);
  border: 1px solid color-mix(in srgb, #cbd5e1 58%, transparent 42%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-video-play svg {
  width: 0.62rem;
  height: 0.62rem;
  display: block;
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-label {
  min-width: 0;
  font-size: 0.74rem;
  line-height: 1.28;
  color: var(--nls-color-text, #0f172a);
  overflow-wrap: anywhere;
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-meta {
  font-size: 0.66rem;
  line-height: 1.2;
  color: var(--nls-color-text-soft, #667085);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-action {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--nls-color-primary, #2563eb) 28%, var(--nls-color-border-soft, #d0d5dd) 72%);
  background: color-mix(in srgb, var(--nls-color-primary-bg-light, #eef4ff) 48%, #ffffff 52%);
  color: color-mix(in srgb, var(--nls-color-primary, #2563eb) 76%, #1d4ed8 24%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin2-shell--unified-inbox .inbox-unified-card__attachment-action svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}

.admin2-shell--unified-inbox .inbox-unified-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.1rem 0 0;
  justify-content: flex-end;
}

.admin2-shell--unified-inbox .inbox-unified-card__inline {
  margin-top: 0.65rem;
}

.admin2-shell--unified-inbox .inbox-unified-card__inline-actions {
  margin-top: 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}

.admin2-shell--unified-inbox
  .inbox-unified-card__inline-actions
  .support-thread-reply-footer-row__actions {
  width: 100%;
  justify-content: flex-end;
}

.support-filters {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-bottom: 0.15rem;
}

.support-filters > button {
  position: relative;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #f8fafc;
  color: #667085;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  min-height: 0;
  justify-content: flex-start;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.support-filters > button:hover:not(:disabled) {
  background: #f2f4f7;
  border-color: #98a2b3;
  color: #344054;
}

.support-filters > button[aria-pressed="true"],
.support-filters > button[data-active="true"],
.support-filters > button.is-active {
  border-color: color-mix(in srgb, #2f6fed 28%, #d0d5dd);
  background: color-mix(in srgb, #2f6fed 12%, #ffffff);
  color: #2f6fed;
  font-weight: 600;
}

.support-filters > button.support-filter-btn--disabled:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  color: var(--nls-color-text-muted);
}

.support-filter-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin: 0.35rem 0 0.2rem;
}

.support-thread-card {
  padding: 0;
  overflow: hidden;
}

.support-thread-card--resolved {
  opacity: 0.92;
}


.support-thread-head {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0.65rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.support-thread-select {
  display: inline-flex;
  align-items: center;
  padding-top: 0.22rem;
}

.support-thread-select input {
  margin: 0;
}

.support-thread-head__main {
  min-width: 0;
  display: grid;
  gap: 0.35rem;
  flex: 1 1 auto;
}

.support-thread-head__controls {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.support-thread-head:hover {
  background: var(--nls-color-surface-soft);
}

.support-thread-status {
  display: inline-flex;
  justify-self: start;
  position: relative;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 999px;
  padding: 0.1rem 0.65rem 0.1rem 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--nls-color-text-soft);
  background: var(--nls-color-surface-soft);
}

.support-thread-status.has-alert::after {
  content: "";
  position: absolute;
  top: 0.1rem;
  right: 0.18rem;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 1.5px var(--nls-color-surface, #fff);
}

.support-thread-card:not(.support-thread-card--resolved)
  .support-thread-status {
  color: var(--nls-color-primary-strong);
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary) 48%,
    var(--nls-color-border-soft)
  );
  background: color-mix(in srgb, var(--nls-color-primary-bg) 55%, transparent);
}

.support-thread-status.support-thread-status--own {
  color: var(--nls-color-primary-strong);
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary) 48%,
    var(--nls-color-border-soft)
  );
  background: color-mix(in srgb, var(--nls-color-primary-bg) 55%, transparent);
}

.support-reply-block {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--nls-color-border-soft);
}

.support-reply-block__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.support-reply-block__heading-wrap {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.support-reply-block__title {
  margin: 0;
  font-weight: 700;
  color: var(--nls-color-text);
}

.support-reply-block__meta {
  margin: 0.2rem 0 0.35rem;
  font-size: 0.76rem;
  color: var(--nls-color-text-soft);
}

.support-reply-block__body {
  margin: 0;
  line-height: 1.35;
}

.support-reply-block__body p {
  margin: 0 0 0.55rem;
}

.support-reply-block__body p:last-child {
  margin-bottom: 0;
}

.support-reply-block__body ul,
.support-reply-block__body ol {
  margin: 0.35rem 0 0.55rem 1.15rem;
  padding: 0;
}

.support-reply-block__body ul {
  list-style: disc;
}

.support-reply-block__body ol {
  list-style: decimal;
}

.support-reply-block__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.support-thread-preview {
  margin: 0;
  color: var(--nls-color-text);
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-thread-head__main .notices-card__meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-thread-meta-line {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-thread-head__main .support-thread-meta-line .inline-user-identity {
  min-width: 0;
  max-width: 100%;
}

.support-thread-head__main
  .support-thread-meta-line
  .inline-user-identity__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}

.support-thread-status-toggle {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 999px;
  background: var(--nls-color-surface-soft);
  color: var(--nls-color-text-soft);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.16rem 0.5rem;
  white-space: nowrap;
}

.support-thread-body {
  border-top: 1px solid var(--nls-color-border-soft);
  padding: 0.2rem 0.65rem 0.65rem;
}

.support-thread-body.support-thread-body--inline {
  border-top: 0;
  padding: 0;
}

.support-thread-body.support-thread-body--inline .support-reply-block:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Support video embeds: match player `asset-video` / `asset-video__player` (player-core.css) */
.support-thread-body .support-thread-video-figure.asset-video {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 12px;
  max-width: min(100%, 280px);
}

.support-thread-body .support-thread-video-figure--course-player .support-thread-video-player {
  width: 100%;
}

.support-thread-body .support-thread-video-figure--course-player {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.admin2-shell--unified-inbox .support-thread-video-player.compact-audio-player,
.admin2-shell--unified-inbox .support-thread-video-player--plain.compact-audio-player {
  border: 0 !important;
}

.admin2-shell--unified-inbox
  .support-thread-video-player
  .compact-audio-player__video-shell::before,
.admin2-shell--unified-inbox
  .support-thread-video-player
  .compact-audio-player__video-shell::after,
.admin2-shell--unified-inbox
  .support-thread-video-player--plain
  .compact-audio-player__video-shell::before,
.admin2-shell--unified-inbox
  .support-thread-video-player--plain
  .compact-audio-player__video-shell::after {
  content: none;
  display: none;
}

.admin2-shell--unified-inbox .support-thread-video-player .compact-audio-player__video-desc,
.admin2-shell--unified-inbox
  .support-thread-video-player--plain
  .compact-audio-player__video-desc {
  display: none !important;
}

.support-thread-body .support-thread-video-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a0a;
}

.support-thread-body .support-thread-video-fs {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 4;
  padding: 0.2rem 0.45rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition:
    background 0.15s ease,
    transform 0.12s ease;
}

.support-thread-body .support-thread-video-fs:hover {
  background: rgba(0, 0, 0, 0.72);
}

.support-thread-body .support-thread-video-fs:active {
  transform: scale(0.97);
}

.support-thread-body .support-thread-video-fs__label {
  pointer-events: none;
}

.support-thread-body .support-thread-video:fullscreen,
.support-thread-body .support-thread-video:-webkit-full-screen {
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.support-thread-body .support-thread-video.asset-video__player,
.support-thread-body .asset-video__player.support-thread-video {
  display: block;
  max-width: 260px;
  width: 100%;
  vertical-align: middle;
}

.support-thread-body .support-thread-video-caption {
  margin: 0.35rem 0 0;
  padding: 0 0.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--nls-color-text, #111);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.support-thread-body
  .support-thread-video-figure--staff
  .support-thread-video-caption {
  color: var(--nls-color-text-soft, #555);
}

.support-thread-body
  .support-thread-video-figure--placeholder
  .support-thread-video-caption {
  font-weight: 500;
  color: var(--nls-color-text-soft, #555);
}

.support-thread-section-label {
  margin: 0.1rem 0 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--nls-color-text-soft);
  position: relative;
  width: fit-content;
  padding-right: 0.75rem;
}

/* Support video library modal (dev-app) */
.support-video-upload-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--nls-color-border-soft, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
  background: var(--nls-color-surface-soft, rgba(0, 0, 0, 0.03));
}

.support-video-upload-card .writing-input {
  width: 100%;
}

/**
 * Upload + file picker: WebKit/Safari often ignores programmatic input.click() when the
 * input is clipped to 1px. Overlay the real file input on the Upload button so the user
 * activates the picker directly (same gesture the browser trusts).
 */
.support-video-save-area {
  position: relative;
  display: block;
  width: 100%;
}

.support-video-save-area:not(.has-file) .support-video-save-btn {
  pointer-events: none;
}

.support-video-file-input.support-video-file-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  font-size: 1rem;
}

.support-video-save-area.has-file
  .support-video-file-input.support-video-file-overlay {
  display: none;
}

.support-video-file-hint {
  margin: 0;
  min-height: 1.15em;
  font-size: 0.72rem;
  word-break: break-all;
}

.support-video-save-btn {
  width: 100%;
  margin: 0;
  padding: 0.62rem 1rem;
  border: none;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(165deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.35);
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.support-video-save-btn:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.45);
}

.support-video-save-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.support-video-save-btn:disabled {
  cursor: not-allowed;
  opacity: 0.88;
}

.support-video-save-btn.is-loading {
  opacity: 0.92;
}

.support-video-upload-status {
  margin: 0;
  font-size: 0.72rem;
  min-height: 1.15em;
}

.support-video-upload-status.is-error {
  color: var(--nls-color-danger, #b00020);
}

.support-video-picker-list {
  max-height: 220px;
  overflow: auto;
  display: grid;
  gap: 0.35rem;
}

.support-resolve-composer {
  width: 100%;
  display: grid;
  gap: 0.5rem;
  margin-top: 0.45rem;
  padding: 0.6rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-soft);
}

.support-resolve-composer.support-resolve-composer--inline-actions {
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.support-resolve-composer--inline-actions .support-thread-action-section {
  margin: 0;
}

.support-resolve-composer--inline-actions .support-thread-action-section__panel {
  padding-inline: 0;
}

.support-resolve-composer--inline-actions
  .support-thread-action-section
  .courses-hub-expandable__toggle.admin2-hierarchy-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  column-gap: 0.45rem;
}

.support-resolve-composer--inline-actions
  .support-thread-action-section
  .courses-hub-expandable__toggle
  .admin2-hierarchy-row__title {
  grid-column: 1;
  grid-row: 1;
}

.support-resolve-composer--inline-actions
  .support-thread-action-section
  .courses-hub-expandable__toggle
  .admin2-hierarchy-row__meta {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}

.support-thread-inline-row > .courses-hub-row-expand {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.support-resolve-composer__field {
  display: grid;
  gap: 0.25rem;
}

.support-resolve-composer__field[hidden] {
  display: none !important;
}

.support-resolve-composer__field > span {
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
}

.support-resolve-composer__field > textarea,
.support-resolve-composer__field > .support-thread-editor-wrap {
  width: 100%;
}

.support-resolve-composer__field > textarea {
  min-height: 5.2rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface);
  color: var(--nls-color-text);
  padding: 0.52rem 0.56rem;
  font: inherit;
  line-height: 1.35;
  resize: vertical;
}

.support-resolve-composer__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.support-resolve-composer__media-toolbar {
  flex-wrap: wrap;
}

.notices-card__body .notice-embed-image-wrap,
.notice-embed-image-wrap {
  margin: 0.4rem 0;
}

.notices-card__body .notice-embed-image,
.notice-embed-image {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--nls-color-border-soft);
}

.support-resolve-composer--locked textarea[readonly] {
  resize: none;
  cursor: default;
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text);
}

.support-thread-entry-edit-actions {
  margin-top: 0.45rem;
}

.support-thread-editor-wrap {
  display: grid;
  gap: 0.32rem;
}

.support-thread-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.support-thread-editor-wrap > .writing-note__toolbar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.support-thread-editor-video-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
}

.support-thread-editor-video-picker__select {
  min-width: 12.5rem;
  max-width: min(18rem, 100%);
}

.support-thread-rich-editor {
  width: 100%;
  min-height: 5.2rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface);
  color: var(--nls-color-text);
  padding: 0.52rem 0.56rem;
  font: inherit;
  font-weight: 400;
  line-height: 1.35;
  overflow: auto;
}

.support-thread-rich-editor b,
.support-thread-rich-editor strong {
  font-weight: 700 !important;
}

.support-thread-rich-editor:focus {
  outline: 2px solid
    color-mix(in srgb, var(--nls-color-primary, #2563eb) 45%, white);
  outline-offset: 1px;
}

.support-thread-rich-editor[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--nls-color-text-soft);
  pointer-events: none;
}

.support-thread-rich-editor ul {
  margin: 0.35rem 0 0.35rem 1.1rem;
  padding: 0;
}

.support-thread-rich-editor ol {
  margin: 0.35rem 0 0.35rem 1.1rem;
  padding: 0;
}

.support-modal-form-shell .support-thread-rich-editor--modal {
  min-height: 6.75rem;
}

.notice-composer-player .account-editor-grid {
  align-items: end;
  width: 100%;
  max-width: 100%;
}

.notice-composer-player {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
}

.notice-composer-player > .account-editor-grid,
.notice-composer-player > .admin2-announce-compose__meta-row,
.notice-composer-player > .support-form-field,
.notice-composer-player > .notice-compose__message-field,
.notice-composer-player > .support-modal-actions,
.notice-composer-player > .panel-message {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.support-composer-player {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

.progress-player-detail:has(.notice-composer-player:not([hidden])),
.progress-player-detail:has(.support-composer-player:not([hidden])) {
  width: min(100%, 760px);
  max-width: 760px;
}

.progress-player-detail:has(.notice-composer-player:not([hidden]))
  > .progress-player-detail__inline-back-row,
.progress-player-detail:has(.support-composer-player:not([hidden]))
  > .progress-player-detail__inline-back-row {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

.notice-composer-player .account-editor-grid .notice-compose__meta-field {
  grid-column: auto;
}

.notice-composer-player .account-editor-grid__full {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.notice-composer-player .account-editor-grid__full .support-resolve-composer__field,
.notice-composer-player .account-editor-grid__full .support-thread-editor-wrap,
.notice-composer-player .account-editor-grid__full .support-thread-rich-editor {
  width: 100%;
  max-width: none;
}

.notice-composer-player .admin2-announce-compose__role-row {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 0.45rem 0.8rem;
}

.notice-composer-player
  .account-editor-grid
  .account-editor-grid__full.notice-compose__scope-required {
  border: 1px solid #f59e0b;
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  background: color-mix(in srgb, #f59e0b 10%, transparent);
}

.notice-compose__toolbar {
  margin: 0.3rem 0 0.45rem;
}

.notice-compose__input {
  width: 100%;
  min-height: 8.2rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 12px;
  background: #ffffff;
  color: var(--nls-color-text);
  padding: 0.65rem 0.7rem;
  font: inherit;
  line-height: 1.35;
  resize: vertical;
}

.notice-compose__input--title {
  min-height: 2.85rem;
  height: 2.85rem;
  resize: none;
}

.notice-compose__input--reason {
  min-height: 6.5rem;
}

.notice-composer-player .support-form-field > span {
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
}

.notice-composer-player select.notice-compose__input--inline {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.2rem;
  margin: 0;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: #ffffff;
  color: var(--nls-color-text) !important;
  -webkit-text-fill-color: var(--nls-color-text) !important;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.25;
  cursor: pointer;
}

.notice-composer-player
  :is(input.notice-compose__input--title, textarea.notice-compose__input--reason) {
  background: #ffffff;
}

.notice-composer-player .support-thread-rich-editor {
  min-height: 6.5rem;
  background: #ffffff;
}

.notice-composer-player .notice-compose__message-field,
.notice-composer-player .notice-compose__message-field .support-resolve-composer__field,
.notice-composer-player .notice-compose__message-field .support-thread-editor-wrap,
.notice-composer-player .notice-compose__message-field .support-thread-rich-editor,
.notice-composer-player .notice-compose__message-field .writing-note__toolbar {
  width: 100%;
  max-width: 100%;
}

.notice-compose-students__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem 0 0.45rem;
}

.notices-card__manage {
  display: inline-block;
  position: relative;
}

.notices-card__title {
  margin: 0 0 0.35rem;
  text-align: left;
}

.notices-card__manage-summary {
  cursor: pointer;
  list-style: none;
}

.notices-card__manage-summary::-webkit-details-marker {
  display: none;
}

.notices-card__manage-panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface-soft);
  min-width: 11.5rem;
}

.notices-card__manage-action {
  width: 100%;
  justify-content: center;
}

.notices-card__manage-action--danger {
  color: #b91c1c;
}

.notices-card__edit-meta {
  margin: -0.2rem 0 0.45rem;
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
}

.notices-card__edit-history {
  margin: 0.15rem 0 0.55rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-soft);
  padding: 0.35rem 0.45rem;
}

.notices-card__edit-history > summary {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nls-color-text-soft);
}

.notices-card__edit-history-row {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--nls-color-border-soft);
  display: grid;
  gap: 0.28rem;
}

.notices-card__edit-history-head,
.notices-card__edit-history-reason {
  margin: 0;
  font-size: 0.72rem;
  color: var(--nls-color-text-soft);
}

.notices-card__edit-history-body {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface);
  padding: 0.34rem 0.45rem;
  font-size: 0.76rem;
  line-height: 1.3;
}

.notices-card__edit-history-body--previous::before {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nls-color-text-soft);
  margin-bottom: 0.18rem;
}

.notices-card__edit-history-body--previous::before {
  content: "Previous version";
}

.notice-compose-students__list {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-soft);
  max-height: 10rem;
  overflow: auto;
  padding: 0.35rem 0.45rem;
  display: grid;
  gap: 0.2rem;
}

.notice-compose-students__option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.84rem;
}

.notice-compose-students__option input[type="checkbox"] {
  margin: 0;
}

.notice-compose-students__option label {
  margin: 0;
  cursor: pointer;
}

.notice-composer-player .account-editor-grid > button {
  width: 100%;
}

.notice-modal-host[hidden] {
  display: none !important;
}

.notice-modal-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;
}

.notice-modal-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 4rem 1rem 2rem;
  background: rgba(0, 0, 0, 0.36);
  pointer-events: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.notice-modal-card {
  width: min(540px, calc(100% - 2rem));
  background: var(--nls-color-surface);
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 14px;
  padding: 0.9rem;
  box-shadow: 0 16px 36px var(--nls-shadow-color-soft);
  margin: 0 auto;
}

.notice-modal-card p {
  margin: 0.45rem 0 0.8rem;
  white-space: pre-wrap;
}

.notice-modal-card .notice-modal-body {
  margin: 0.45rem 0 0.8rem;
  white-space: normal;
  overflow: visible;
  max-height: none;
}

.notice-modal-card .notice-modal-info {
  margin: 0.4rem 0 0.5rem;
  font-size: 0.8rem;
  color: var(--nls-color-text-soft);
}

.notice-modal-card .notice-modal-footer-copy {
  margin: 0.1rem 0 0.7rem;
  font-size: 0.75rem;
  color: var(--nls-color-text-soft);
}

.notice-modal-actions {
  display: flex;
  justify-content: flex-end;
}

.richtext-table-scroll {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #e2e8f0;
}

.richtext-table-scroll__controls {
  display: none !important;
}

.richtext-table-scroll > table {
  display: table;
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  table-layout: auto;
}

.richtext-table-scroll :is(th, td) {
  white-space: nowrap !important;
}

.richtext-table-scroll::-webkit-scrollbar {
  height: 8px;
}

.richtext-table-scroll::-webkit-scrollbar-track {
  background: #e2e8f0;
  border-radius: 999px;
}

.richtext-table-scroll::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 999px;
}

.richtext-table-scroll.is-overflowing::after {
  display: none;
}

/* Desktop parity with mobile info-page table scrolling behavior. */
.activity.info-page {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.activity.info-page .info-page-body,
.activity.info-page .info-page-lead,
.activity.info-page .info-page-footer {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.activity.info-page .info-page-body table,
.activity.info-page .info-page-lead table,
.activity.info-page .info-page-footer table {
  display: table;
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
}

.activity.info-page table {
  display: table;
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
}

.activity.info-page :is(.read-panel th, .read-panel td, .readpanel-popup__text th, .readpanel-popup__text td, .activity th, .activity td) {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .richtext-table-scroll {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
  }

  .richtext-table-scroll__controls {
    display: none !important;
  }

  .richtext-table-scroll__btn {
    border: 1px solid #cbd5e1;
    background: rgba(248, 250, 252, 0.96);
    color: #334155;
    border-radius: 999px;
    min-width: 1.55rem;
    height: 1.55rem;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0;
  }

  .richtext-table-scroll:not(.can-scroll-left) .richtext-table-scroll__btn--left {
    opacity: 0.35;
  }

  .richtext-table-scroll:not(.can-scroll-right) .richtext-table-scroll__btn--right {
    opacity: 0.35;
  }

  .richtext-table-scroll > table {
    display: table;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none;
  }

  .notices-card__body table,
  .notice-modal-body table,
  .panel-message table {
    width: 100%;
  }

  .richtext-table-scroll::-webkit-scrollbar {
    height: 8px;
  }

  .richtext-table-scroll::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 999px;
  }

  .richtext-table-scroll::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
  }

  .richtext-table-scroll.is-overflowing::after {
    display: none;
  }

  .notices-card__body th,
  .notices-card__body td,
  .notice-modal-body th,
  .notice-modal-body td,
  .panel-message th,
  .panel-message td {
    white-space: nowrap;
  }
}

:root {
  --dev-overlay-top-safe: 0px;
  --autotest-live-panel-top: 0px;
  --autotest-live-panel-left: 0px;
  /* Mobile: bottom of rail + swipe handle; Support/Dev overlays start below this. */
  --mobile-shell-top-chrome: var(--mobile-rail-anchor-height, 0px);
}

/*
 * Rail chrome: tall strip uses a vertical gradient; the thin swipe row under the rail must
 * use the gradient *bottom* as a solid — reusing the full gradient on a ~0.9rem bar mostly
 * shows the lighter top stop (Background A lighter than Background B).
 */
body[data-layout="standard-lms"] {
  --dev-rail-chrome-surface: var(--nls-color-surface-rail);
  --dev-rail-chrome-seam: var(--nls-color-surface-rail);
}

/* Match top rail / swipe seam to the active page canvas (design tokens). */
body[data-theme="dev-view"][data-layout="standard-lms"] {
  --dev-rail-chrome-surface: var(--nls-color-surface);
  --dev-rail-chrome-seam: color-mix(
    in srgb,
    var(--nls-color-border) 40%,
    var(--nls-color-surface)
  );
}

.support-modal-host[hidden] {
  display: none !important;
}

.support-modal-host {
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
}

/* Mobile standard LMS: keep top nav rail + handle visible above Support / Dev overlays. */
@media (max-width: 900px) {
  body:not(.is-logged-out)[data-layout="standard-lms"] .support-modal-host {
    top: var(--mobile-shell-top-chrome, 0px);
  }
}

.support-modal-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: calc(0.75rem + var(--dev-overlay-top-safe)) 0.75rem 0.75rem 0.75rem;
  pointer-events: none;
}

.support-modal-overlay.support-modal-overlay--capture-minimized {
  background: transparent;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.support-modal-card {
  position: relative;
  width: min(460px, 100%);
  height: auto;
  max-height: calc(100vh - 1.5rem);
  overflow: auto;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 96%,
    var(--nls-color-primary-bg-light) 4%
  );
  box-shadow: 0 8px 20px color-mix(in srgb, var(--nls-shadow-color-soft) 42%, transparent);
  padding: 0.85rem 0.9rem;
  display: grid;
  gap: 0.7rem;
  pointer-events: auto;
  align-self: flex-start;
}

.support-modal-card.support-modal-card--capture-minimized {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  gap: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.support-modal-card--capture-minimized > :not(.support-capture-chip) {
  display: none !important;
}

.support-capture-chip {
  display: none;
}

.support-modal-card--capture-minimized .support-capture-chip {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-primary) 35%, transparent);
  background: color-mix(in srgb, var(--nls-color-primary-bg) 78%, #ffffff 22%);
  color: var(--nls-color-primary-ink);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(8, 12, 22, 0.28);
}

.support-modal-card--capture-minimized .support-capture-chip__icon {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-primary) 38%, transparent);
  background: color-mix(in srgb, var(--nls-color-primary-bg) 82%, #ffffff 18%);
  box-shadow: 0 6px 16px rgba(8, 12, 22, 0.2);
}

.support-capture-chip__icon,
.support-capture-chip__spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.support-capture-chip__spinner {
  animation: support-capture-spin 0.9s linear infinite;
}

@keyframes support-capture-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.support-modal-title {
  margin: 0;
  padding-right: 2.75rem;
  font-size: 0.96rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--nls-color-primary-ink);
}

/* Match Groups announcement compose: soft primary-tint panel + compose-like controls */
.support-modal-card .support-modal-form-shell.support-resolve-composer {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}

.support-modal-form-shell .support-form-grid--modal {
  gap: 0.72rem;
}

.support-modal-form-shell .support-form-grid--modal label {
  gap: 0.3rem;
}

.support-modal-form-shell .support-form-field > span,
.support-modal-form-shell .support-resolve-composer__field > span,
.support-modal-form-shell .support-form-screenshot-field > span:first-child {
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
}

.support-modal-form-shell .support-form-grid select {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.2rem;
  margin: 0;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface);
  color: var(--nls-color-text) !important;
  -webkit-text-fill-color: var(--nls-color-text) !important;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.25;
  cursor: pointer;
}

.support-modal-form-shell .support-form-grid select:hover:not([disabled]) {
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary) 35%,
    var(--nls-color-border-soft)
  );
}

.support-modal-form-shell .support-form-grid select:focus-visible {
  border-color: var(--nls-color-primary, #2563eb);
}

.support-modal-form-shell .support-form-grid select[disabled] {
  color: var(--nls-color-text-muted) !important;
  -webkit-text-fill-color: var(--nls-color-text-muted) !important;
  background: var(--nls-color-surface-alt);
  cursor: not-allowed;
  opacity: 1;
}

.support-modal-card .support-modal-actions.admin2-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  box-sizing: border-box;
}

.support-modal-card .support-modal-actions .course-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

.support-modal-card .support-form-context-message[hidden] {
  display: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.support-form-screenshot-field {
  display: grid;
  gap: 0.35rem;
}

.support-form-screenshot-preview:not([hidden]) {
  margin-top: 0.35rem;
}

.support-form-attachment-actions-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.support-form-attachment-actions-row .support-form-screenshot-preview {
  margin-top: 0;
  flex: 1 1 16rem;
  min-width: min(100%, 12rem);
}

.support-form-attachment-actions-row .support-modal-actions {
  margin-left: auto;
  flex: 0 0 auto;
}

.support-thread-reply-footer-row {
  align-items: center;
}

.support-thread-reply-footer-row__attachments {
  margin-top: 0;
  flex: 1 1 16rem;
  min-width: min(100%, 12rem);
}

.support-thread-reply-footer-row__attachments[hidden] {
  display: none !important;
}

.support-thread-reply-footer-row__actions {
  margin-left: auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
}

.support-modal-screenshot-actions {
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.support-attachment-strip {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.support-attachment-strip[hidden] {
  display: none !important;
}

.support-attachment-strip__count {
  margin: 0;
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
}

.support-attachment-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.support-attachment-chip {
  position: relative;
  width: min(31%, 6rem);
  min-width: 4rem;
  max-width: 6rem;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  overflow: hidden;
  background: var(--nls-color-surface-soft);
}

.support-attachment-chip__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.support-attachment-chip__video-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0f172a;
}

.support-attachment-chip__video-badge {
  position: absolute;
  left: 0.24rem;
  bottom: 0.24rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: color-mix(in srgb, #0f172a 76%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 35%, transparent);
  pointer-events: none;
}

.support-attachment-chip__video-badge svg {
  width: 0.78rem;
  height: 0.78rem;
  fill: currentColor;
  display: block;
}

.support-attachment-chip__video-fallback {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  color: #ffffff;
}

.support-attachment-chip__video-fallback svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor;
  display: block;
}

.support-attachment-chip__video-fallback-label {
  position: absolute;
  left: 0.24rem;
  right: 0.24rem;
  bottom: 0.2rem;
  font-size: 0.6rem;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.support-attachment-chip__remove {
  position: absolute;
  top: 0.22rem;
  right: 0.22rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #7f1d1d 55%, transparent);
  background: color-mix(in srgb, #ef4444 86%, #7f1d1d 14%);
  color: #fff;
  font-size: 0.86rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.support-attachment-chip__remove svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: currentColor;
  display: block;
}

.support-attachment-chip__remove:hover {
  background: color-mix(in srgb, #dc2626 88%, #7f1d1d 12%);
}

.support-attachment-chip--composer {
  width: min(100%, 18rem);
  max-width: 18rem;
  min-width: 12rem;
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.45rem;
  padding: 0.42rem;
  align-items: start;
}

.support-attachment-chip--composer .support-attachment-chip__image {
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  border: 1px solid var(--nls-color-border-soft);
}

.support-attachment-chip__meta {
  min-width: 0;
}

.support-attachment-chip__label {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.25;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.support-attachment-chip__status {
  margin: 0.12rem 0 0;
  font-size: 0.64rem;
  line-height: 1.2;
}

.support-attachment-chip__actions {
  grid-column: 1 / -1;
  margin-top: 0.2rem;
}

.support-attachment-chip--composer .support-attachment-chip__remove {
  position: static;
}

.notice-compose__attachment-strip {
  margin-top: 0.45rem;
}

.support-attachment-chip--readonly {
  margin-top: 0.3rem;
}

.support-thread-body .notice-embed-image-wrap.support-attachment-chip--readonly,
.support-thread-body
  .support-attachment-chip.support-attachment-chip--readonly {
  display: inline-block;
  margin: 0.25rem 0.4rem 0.15rem 0;
  vertical-align: top;
}

.support-attachment-chip__action {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #1f2937 55%, transparent);
  background: color-mix(in srgb, #111827 86%, #0f172a 14%);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.support-attachment-chip__action svg {
  width: 0.76rem;
  height: 0.76rem;
  fill: currentColor;
  display: block;
}

.support-attachment-chip__action--expand {
  top: 0.22rem;
  right: 0.22rem;
}

.support-attachment-chip__action--download {
  bottom: 0.22rem;
  right: 0.22rem;
}

.support-attachment-chip__action:hover {
  background: color-mix(in srgb, #1f2937 88%, #111827 12%);
}

.support-resolve-composer.admin2-announce-compose__composer
  > .panel-message:empty {
  display: none;
  margin: 0;
  min-height: 0;
  padding: 0;
}

.notice-composer-player > .panel-message:empty {
  display: none;
  margin: 0;
  min-height: 0;
  padding: 0;
}

.support-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: start;
}

.support-form-grid label {
  display: grid;
  gap: 0.25rem;
  align-content: start;
}

.support-form-grid .support-form-field > select,
.support-form-grid .support-form-field > input {
  min-height: 2.78rem;
}

.support-form-grid .support-form-field--error > select,
.support-form-grid .support-form-field--error > input,
.support-form-grid .support-form-field--error .support-thread-rich-editor,
.support-form-grid .support-form-field--error .support-thread-editor {
  border-color: color-mix(in srgb, #ef4444 72%, var(--nls-color-border-soft)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 35%, transparent);
}

.support-form-grid .support-form-field--error > span:first-child {
  color: color-mix(in srgb, #ef4444 85%, var(--nls-color-text-soft));
}

.support-form-grid .support-form-field--error > select,
.support-form-grid .support-form-field--error > input,
.support-form-grid .support-form-field--error .support-thread-rich-editor,
.support-form-grid .support-form-field--error .support-thread-editor {
  border-color: color-mix(in srgb, #ef4444 72%, var(--nls-color-border-soft)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 35%, transparent);
}

.support-form-grid .support-form-field--error > span:first-child {
  color: color-mix(in srgb, #ef4444 85%, var(--nls-color-text-soft));
}

.support-form-grid .support-form-grid__full {
  grid-column: 1 / -1;
}

.support-form-grid textarea {
  min-height: 6.5rem;
}

/* Support modal message uses same field styling as thread compose; override generic grid min-height. */
.support-form-grid .support-resolve-composer__field > textarea {
  min-height: 5.2rem;
}

.support-screenshot-preview {
  width: 100%;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  display: block;
}

.support-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}

.dev-tools-overlay-host[hidden] {
  display: none !important;
}

.dev-tools-overlay-host {
  position: fixed;
  inset: auto;
  left: var(--dev-tools-overlay-left, 84px);
  top: var(--dev-tools-overlay-top, 84px);
  width: var(--dev-tools-overlay-width, min(300px, 40vw));
  height: var(--dev-tools-overlay-height, 70vh);
  z-index: 1525;
  pointer-events: none;
}

@media (max-width: 900px) {
  body:not(.is-logged-out)[data-layout="standard-lms"] .dev-tools-overlay-host {
    top: var(--mobile-shell-top-chrome, 0px);
  }
}

.dev-tools-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dev-tools-overlay__card {
  width: fit-content;
  max-width: min(300px, calc(100vw - 16px));
  max-height: 100%;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 999px;
  background: var(--nls-color-surface);
  box-shadow: 0 18px 44px var(--nls-shadow-color-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

.dev-tools-overlay__header {
  position: relative;
  padding: 0;
}

.dev-tools-overlay__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.34rem;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nls-color-primary-ink);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.dev-tools-overlay__toggle:active {
  cursor: grabbing;
}

.dev-tools-overlay__toggle-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dev-tools-overlay__toggle-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.dev-tools-overlay__title {
  margin: 0;
  font-size: 0.66rem;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--nls-color-primary-ink);
  text-align: left;
}

.dev-tools-overlay__toggle-caret {
  margin-left: auto;
  width: 0.48rem;
  height: 0.48rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 140ms ease;
}

.dev-tools-overlay-host.is-expanded .dev-tools-overlay__card {
  width: min(var(--dev-tools-overlay-width, 300px), calc(100vw - 16px));
  max-height: min(var(--dev-tools-overlay-height, 70vh), calc(100vh - 16px));
  border-radius: 14px;
}

.dev-tools-overlay-host.is-expanded .dev-tools-overlay__toggle {
  border-bottom: 1px solid var(--nls-color-border-soft);
  border-radius: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.dev-tools-overlay-host.is-expanded .dev-tools-overlay__toggle-caret {
  transform: rotate(-135deg);
}

.dev-tools-overlay-host:not(.is-expanded) .dev-tools-overlay__content {
  display: none;
}

.dev-tools-overlay-host.is-expanded .dev-tools-overlay__content {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.03rem 0.1rem 0.14rem;
}

.dev-tools-overlay__content .module-body {
  display: block !important;
}

.dev-tools-overlay__content .dev-tools {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0.05rem;
  gap: 0.14rem;
}

.dev-tools-overlay__content .module-body,
.dev-tools-overlay__content .module-body * {
  font-size: 0.68rem;
}

.dev-tools-overlay__content .dev-build-line {
  margin: 0 0 0.06rem;
  font-size: 0.58rem;
  line-height: 1.2;
}

.dev-tools-overlay__content .dev-section-toggle {
  padding: 0.15rem 0.22rem;
  min-height: 1.24rem;
  border-radius: 7px;
}

.dev-tools-overlay__content .dev-section-title {
  font-size: 0.68rem;
  gap: 0.14rem;
}

.dev-tools-overlay__content .dev-section-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-1px);
}

.dev-tools-overlay__content .dev-section-toggle__icon svg {
  width: 0.5rem;
  height: 0.5rem;
}

.dev-tools-overlay__content .dev-section-body {
  padding: 0.12rem 0.2rem;
  gap: 0.14rem;
  overflow-x: hidden;
}

.dev-tools-overlay__content .dev-launch-subtitle,
.dev-tools-overlay__content .dev-section-subtitle {
  margin: 0.05rem 0 0.02rem;
  font-size: 0.58rem;
}

.dev-tools-overlay__content .dev-mobile-console-card {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface-muted);
  padding: 0.2rem;
  display: grid;
  gap: 0.12rem;
}

.dev-tools-overlay__content .dev-mobile-console-card__actions {
  display: flex;
  gap: 0.12rem;
  flex-wrap: wrap;
}

.dev-tools-overlay__content button,
.dev-tools-overlay__content .ghost,
.dev-tools-overlay__content .course-action,
.dev-tools-overlay__content input,
.dev-tools-overlay__content select,
.dev-tools-overlay__content textarea {
  font-size: 0.68rem;
}

.dev-tools-overlay__content input,
.dev-tools-overlay__content select,
.dev-tools-overlay__content textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 1.2rem;
  padding: 0.08rem 0.2rem;
}

.dev-tools-overlay__content .toggle {
  gap: 0.08rem;
}

.dev-tools-overlay__content .toggle.toggle--nls {
  color: #2563eb !important;
}

.dev-tools-overlay__content .toggle.toggle--nls.is-on {
  color: #16a34a !important;
}

.toggle--nls__state {
  color: inherit;
  font-weight: 700;
}

.dev-tools-overlay__content .toggle--nls.dev-mobile-console-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
}

.dev-tools-overlay__content .toggle--nls .dev-mobile-console-state {
  display: inline-block;
  margin-left: 0.2rem;
  color: inherit;
}

.toggle--nls > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 2.1rem;
  height: 1.2rem;
  border-radius: 999px;
  border: 1px solid #1d4ed8;
  background: #2563eb;
  cursor: pointer;
  position: relative;
  transition: background 140ms ease, border-color 140ms ease;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.toggle--nls > input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 140ms ease;
}

.toggle--nls > input[type="checkbox"]:checked {
  border-color: #15803d;
  background: #16a34a;
}

.toggle--nls > input[type="checkbox"]:checked::before {
  transform: translateX(0.88rem);
}

.toggle--nls > input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 1px;
}

.teacher-class-scores-toggle.toggle--nls {
  color: #64748b;
}

.teacher-class-scores-toggle.toggle--nls > input[type="checkbox"] {
  border-color: #94a3b8;
  background: #cbd5e1;
}

.teacher-class-scores-toggle.toggle--nls.is-on {
  color: #16a34a;
}

.teacher-class-scores-toggle.toggle--nls.is-on > input[type="checkbox"] {
  border-color: #15803d;
  background: #16a34a;
}

.dev-tools-overlay__content .dev-autotest-subtoggles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
}

.dev-tools-overlay__content .dev-toggle-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label label"
    "counter toggle";
  align-items: center;
  row-gap: 0.08rem;
  column-gap: 0.16rem;
  padding: 0.02rem 0;
}

.dev-tools-overlay__content .dev-toggle-inline__label {
  grid-area: label;
  font-size: 0.62rem;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
}

.dev-tools-overlay__content .dev-toggle-inline__counter-wrap {
  grid-area: counter;
  display: grid;
  grid-template-columns: minmax(2.8rem, 1fr) auto;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 0.14rem;
  row-gap: 0.08rem;
  min-width: 0;
}

.dev-tools-overlay__content .dev-toggle-counter {
  width: 100%;
  min-width: 2.8rem;
  max-width: none;
  text-align: center;
  min-height: 1.08rem;
  padding: 0.02rem 0.06rem;
  font-size: 0.68rem;
  line-height: 1.1;
  appearance: textfield;
  grid-column: 1;
  grid-row: 1 / span 2;
}

.dev-tools-overlay__content .dev-toggle-counter::-webkit-outer-spin-button,
.dev-tools-overlay__content .dev-toggle-counter::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dev-tools-overlay__content .dev-toggle-step-btn {
  min-width: 1.02rem;
  min-height: 0.5rem;
  padding: 0 0.16rem;
  border-radius: 7px;
  border: 1px solid var(--nls-color-border);
  background: var(--nls-color-surface);
  color: var(--nls-color-text);
  font-size: 0.68rem;
  line-height: 1;
  cursor: pointer;
}

.dev-tools-overlay__content .dev-toggle-inline__counter-wrap .dev-toggle-step-btn:nth-of-type(1) {
  grid-column: 2;
  grid-row: 1;
}

.dev-tools-overlay__content .dev-toggle-inline__counter-wrap .dev-toggle-step-btn:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2;
}

/* Dev Tools counters: keep + on top, - on bottom. */
.dev-tools-overlay__content #dev-autotest-page-wait-plus,
.dev-tools-overlay__content #dev-autotest-audio-plus {
  grid-column: 2;
  grid-row: 1;
}

.dev-tools-overlay__content #dev-autotest-page-wait-minus,
.dev-tools-overlay__content #dev-autotest-audio-minus {
  grid-column: 2;
  grid-row: 2;
}

.dev-tools-overlay__content .dev-toggle-step-btn:hover {
  background: var(--nls-color-surface-muted);
}

.dev-tools-overlay__content .dev-toggle-inline > input[type="checkbox"] {
  grid-area: toggle;
}

.dev-tools-overlay__content #dev-autotest-pause {
  justify-self: start;
  min-height: 1.05rem;
  padding: 0.04rem 0.3rem;
  border-radius: 7px;
  font-size: 0.62rem;
  line-height: 1.05;
}

.dev-tools-overlay__content #dev-page-id-go,
.dev-tools-overlay__content #dev-page-id-display {
  min-height: 1.05rem;
  padding: 0.04rem 0.26rem;
  border-radius: 7px;
  font-size: 0.62rem;
  line-height: 1.05;
}

.dev-tools-overlay__content .dev-id-viewer-header-toggle {
  margin-left: auto;
  margin-right: 0.25rem;
  min-height: 1.05rem;
  padding: 0.02rem 0;
  gap: 0;
}

.dev-tools-overlay__content .dev-id-viewer-header-toggle > input[type="checkbox"] {
  width: 22px;
  min-width: 22px;
  height: 13px;
}

@media (min-width: 901px) {
  body[data-layout="standard-lms"] .dev-tools-overlay-host {
    left: var(--dev-tools-overlay-left, 0px);
    top: var(--dev-tools-overlay-top, 0px);
    width: var(--dev-tools-overlay-width, min(300px, 40vw));
    height: var(--dev-tools-overlay-height, 70vh);
  }
}

.overlay-close-icon {
  border: none;
  background: transparent;
  color: var(--nls-color-primary-ink);
  border-radius: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 120ms ease,
    color 120ms ease;
  box-shadow: none;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.overlay-close-icon:hover {
  color: #1d4ed8;
}

.overlay-close-icon:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.overlay-close-icon svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}

.overlay-close-icon svg path {
  fill: #2563eb !important;
}

.overlay-close-icon__glyph {
  display: inline-block;
  color: var(--nls-color-primary-ink);
  font-size: 1em;
  line-height: 1;
  transform: translateY(-1px);
}

.support-modal-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
}

@media (max-width: 900px) {
  .support-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-modal-overlay {
    justify-content: center;
    align-items: flex-start;
    padding: calc(0.55rem + var(--dev-overlay-top-safe)) 0.55rem 0.55rem 0.55rem;
  }

  .support-modal-card {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - var(--mobile-shell-top-chrome, 0px) - 1.1rem);
    padding: 0.72rem 0.74rem;
  }

  .support-modal-screenshot-actions {
    flex-wrap: wrap;
  }

  .dev-tools-overlay-host {
    left: var(--dev-tools-overlay-left, 10px);
    top: var(--dev-tools-overlay-top, calc(var(--mobile-shell-top-chrome, 0px) + 8px));
    width: min(var(--dev-tools-overlay-width, 280px), calc(100vw - 16px));
    height: min(var(--dev-tools-overlay-height, 72vh), calc(100dvh - var(--mobile-shell-top-chrome, 0px) - 12px));
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]
    .support-modal-card--capture-minimized
    .support-capture-chip__icon {
    top: calc(0.5rem + var(--mobile-shell-top-chrome, 0px));
  }
}

.messages-tools__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.2rem;
}

button[data-panel="messages"] {
  position: relative;
}

button[data-panel="announcements"] {
  position: relative;
}

#sidebar-support-report-btn {
  position: relative;
}

#messages-support-btn {
  position: relative;
}

#messages-announcements-btn {
  position: relative;
}

.support-screenshot-media {
  position: relative;
  display: inline-block;
  width: min(100%, 320px);
  max-width: 100%;
  margin-top: 0.2rem;
}

.support-screenshot-control {
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid #ffffff !important;
  background: #000000 !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  opacity: 1 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.48);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  font-family:
    "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2",
    "Noto Sans Symbols", system-ui, sans-serif;
  text-indent: 0;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.support-screenshot-control svg {
  width: 16px;
  height: 16px;
  display: block;
}

.support-screenshot-control__fallback {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

/* Use actual button text glyphs; disable pseudo overlays */
.support-screenshot-control::before,
.support-image-preview-close::before {
  content: none !important;
}

/* Shared utility sets text glyphs; keep pseudo overlays off by default. */
.support-screenshot-control--enlarge::before,
.support-screenshot-control--download::before,
.support-image-preview-close::before {
  content: none !important;
}

.support-screenshot-control--enlarge {
  top: 0.4rem;
  right: 0.4rem;
}

.support-screenshot-control--download {
  bottom: 0.4rem;
  right: 0.4rem;
}

/* Backward-compatible placement for earlier control-wrapper markup */
.support-screenshot-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.support-screenshot-controls .support-screenshot-control {
  position: absolute;
  pointer-events: auto;
}

.support-screenshot-controls .support-screenshot-control:first-child {
  top: 0.4rem;
  right: 0.4rem;
}

.support-screenshot-controls .support-screenshot-control:last-child {
  bottom: 0.4rem;
  right: 0.4rem;
}

.support-image-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(9, 12, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.support-image-preview-overlay[hidden] {
  display: none !important;
}

.support-image-preview-card {
  position: relative;
  width: calc(100vw - 1rem);
  height: calc(100vh - 1rem);
  border-radius: 12px;
  overflow: hidden;
  background: var(--nls-color-surface);
  border: 1px solid var(--nls-color-border-soft);
  box-shadow: 0 18px 44px var(--nls-shadow-color-soft);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-image-preview-card img,
.support-image-preview-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: contain;
}


@media (max-width: 900px) {
  .support-image-preview-card {
    overflow: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
  }

  .support-image-preview-card img,
  .support-image-preview-image {
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    object-fit: initial;
  }
}

.support-image-preview-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  background: rgba(15, 23, 42, 0.78) !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
  z-index: 20;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.support-image-preview-close svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  display: block;
}

.support-image-preview-close:hover {
  background: rgba(15, 23, 42, 0.92) !important;
}

.support-image-preview-close:active {
  transform: translateY(1px);
}

.support-image-preview-close:focus-visible {
  outline: 2px solid var(--nls-color-text);
  outline-offset: 2px;
}

.app-popup-host[hidden] {
  display: none !important;
}

.app-popup-host {
  position: fixed;
  inset: 0;
  z-index: 1600;
}

.app-popup-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: color-mix(in srgb, #0f172a 42%, transparent);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}

.app-popup-dialog {
  width: min(580px, calc(100% - 1rem));
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--nls-color-border-soft) 86%, #cbd5e1 14%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nls-color-surface, #ffffff) 96%, #f8fafc 4%) 0%,
    color-mix(in srgb, var(--nls-color-surface, #ffffff) 90%, #f1f5f9 10%) 100%
  );
  box-shadow:
    0 24px 44px rgba(15, 23, 42, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.75) inset;
  padding: 1rem 1.05rem;
  display: grid;
  gap: 0.72rem;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.app-popup-dialog__title {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.28;
  color: var(--nls-color-text, #0f172a);
  letter-spacing: 0.01em;
}

.app-popup-dialog__message {
  margin: 0;
  white-space: pre-wrap;
  color: color-mix(in srgb, var(--nls-color-text-soft, #475569) 88%, #0f172a 12%);
  line-height: 1.36;
}

.app-popup-dialog__content {
  display: grid;
  gap: 0.72rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.15rem;
}

.app-popup-export-courses {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.35rem;
}

.app-popup-export-courses__label {
  font-size: 0.8rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
  min-width: 0;
  line-height: 1.2;
}

.app-popup-export-course-option {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.app-popup-export-course-option input[type="checkbox"] {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.app-popup-export-course-option span {
  display: inline !important;
  text-align: left !important;
  line-height: 1.25 !important;
  word-break: break-word;
}

.app-popup-dialog__input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--nls-color-border-soft) 88%, #cbd5e1 12%);
  background: color-mix(in srgb, var(--nls-color-surface) 96%, #f8fafc 4%);
  color: var(--nls-color-text, #0f172a);
  min-height: 2.4rem;
  padding: 0.58rem 0.74rem;
  box-sizing: border-box;
}

.app-popup-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.1rem;
}

.app-popup-dialog__actions .app-popup-btn {
  min-height: 40px;
  border-radius: 10px;
  padding: 8px 14px;
  border: 1px solid #d0d5dd;
  background: #ffffff;
  color: #344054;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.05s ease;
}

.app-popup-dialog__actions .app-popup-btn--cancel {
  border-color: #d0d5dd;
  background: #ffffff;
  color: #344054;
}

.app-popup-dialog__actions .app-popup-btn--cancel:is(:hover, :focus-visible) {
  border-color: #98a2b3;
  background: #f2f4f7;
  color: #1d2939;
}

.app-popup-dialog__actions .app-popup-btn--cancel:active:not(:disabled) {
  background: #e4e7ec;
}

.app-popup-dialog__actions .app-popup-btn--confirm {
  border-color: #2f6fed;
  background: #2f6fed;
  color: #ffffff;
  font-weight: 600;
}

.app-popup-dialog__actions .app-popup-btn--confirm:is(:hover, :focus-visible) {
  border-color: #2557c8;
  background: #2557c8;
  color: #ffffff;
}

.app-popup-dialog__actions .app-popup-btn--confirm:active:not(:disabled) {
  border-color: #1f4aa8;
  background: #1f4aa8;
}

.app-popup-dialog__actions .app-popup-btn:disabled {
  background: #f2f4f7;
  border-color: #e4e7ec;
  color: #98a2b3;
  cursor: not-allowed;
  pointer-events: none;
}

body[data-theme="dev-view"] .app-popup-dialog {
  border-color: color-mix(in srgb, var(--nls-color-border-soft) 86%, #cbd5e1 14%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nls-color-surface, #ffffff) 96%, #f8fafc 4%) 0%,
    color-mix(in srgb, var(--nls-color-surface, #ffffff) 90%, #f1f5f9 10%) 100%
  );
}

.app-popup-dialog__choices {
  display: grid;
  gap: 0.5rem;
  max-height: min(46vh, 360px);
  overflow: auto;
  padding-right: 0.2rem;
}

.app-popup-dialog__choice {
  width: 100%;
  display: grid;
  gap: 0.2rem;
  text-align: left;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  padding: 0.62rem 0.72rem;
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 92%,
    var(--nls-color-text) 8%
  );
  color: var(--nls-color-text);
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    transform 120ms ease,
    box-shadow 120ms ease;
}

.app-popup-dialog__choice:hover,
.app-popup-dialog__choice:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary) 58%,
    var(--nls-color-border-soft)
  );
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 86%,
    var(--nls-color-primary) 14%
  );
  box-shadow: 0 8px 16px var(--nls-shadow-color-soft);
}

.app-popup-dialog__choice:active {
  transform: translateY(1px);
}

.app-popup-dialog__choice.is-selected {
  border-color: var(--nls-color-primary);
  background: color-mix(
    in srgb,
    var(--nls-color-primary) 16%,
    var(--nls-color-surface) 84%
  );
}

.app-popup-dialog__choice-label {
  font-weight: 600;
}

.app-popup-dialog__choice-description {
  font-size: 0.86rem;
  color: var(--nls-color-text-soft);
}

@media (max-width: 700px) {
  .app-popup-overlay {
    padding: 0.7rem;
  }

  .app-popup-dialog {
    width: min(440px, calc(100% - 0.5rem));
    max-height: calc(100vh - 1.4rem);
    max-height: calc(100dvh - 1.4rem);
    padding: 0.85rem;
    gap: 0.58rem;
    border-radius: 14px;
  }

  .app-popup-dialog__title {
    font-size: 0.98rem;
  }

  .app-popup-dialog__message {
    font-size: 0.9rem;
  }

  .app-popup-dialog__actions {
    width: 100%;
    justify-content: stretch;
    gap: 0.35rem;
  }

  .app-popup-dialog__actions .app-popup-btn {
    flex: 1 1 0;
    justify-content: center;
    min-height: 2.2rem;
    font-size: 0.86rem;
    padding: 0.35rem 0.62rem;
  }
}

button.danger {
  background: var(--nls-color-danger-strong, #b91c1c);
  color: var(--nls-color-surface, #fff);
  border-color: var(--nls-color-danger-strong, #b91c1c);
}

button.danger:hover,
button.danger:focus-visible {
  background: color-mix(
    in srgb,
    var(--nls-color-danger-strong, #b91c1c) 86%,
    var(--nls-color-text) 14%
  );
  border-color: color-mix(
    in srgb,
    var(--nls-color-danger-strong, #b91c1c) 86%,
    var(--nls-color-text) 14%
  );
}

button.warning {
  background: var(--nls-color-warning-bg, #fef3c7);
  color: var(--nls-color-warning-text, #8a6500);
  border-color: var(--nls-color-warning, #c48f00);
}

button.warning:hover,
button.warning:focus-visible {
  background: color-mix(
    in srgb,
    var(--nls-color-warning-bg, #fef3c7) 82%,
    var(--nls-color-warning, #c48f00) 18%
  );
  border-color: color-mix(
    in srgb,
    var(--nls-color-warning, #c48f00) 88%,
    var(--nls-color-text) 12%
  );
}

.account-action__icon {
  width: 0.95rem;
  height: 0.95rem;
  display: inline-flex;
}

.account-action__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.account-summary {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.account-summary__identity {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.account-summary__name {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.28;
  color: var(--nls-color-text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.account-role-line {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.76rem;
  line-height: 1.2;
}

.account-role-line__type {
  color: var(--nls-color-primary-strong, #1d4ed8);
  font-weight: 700;
}

.account-role-line__sep {
  color: var(--nls-color-text-soft, #64748b);
  font-weight: 700;
}

.account-role-line__value {
  color: var(--nls-color-text, #0f172a);
  font-weight: 700;
}

.account-profile-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding-bottom: 0.2rem;
}

.account-profile-header > .account-summary__identity {
  flex: 1 1 auto;
  min-width: 0;
}

.account-profile-scores-panel {
  width: 100%;
  display: grid;
  gap: 0.6rem;
}

.account-profile-scores-panel__mount {
  display: block !important;
  width: 100%;
}

.account-profile-scores-panel .teacher-class-view__tabs {
  display: none;
}

.account-profile-scores-panel .teacher-class-view__tab-row {
  display: none !important;
}

.account-profile-scores-panel .teacher-class-info-line {
  display: none !important;
}

.account-profile-scores-panel .progress-player-detail__payload {
  max-height: none !important;
  overflow: visible !important;
}

.account-profile-scores-panel .courses-hub-detail__body {
  max-height: none !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  padding-right: 0 !important;
}

.account-profile-logout {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  width: auto;
  max-width: none;
  margin-top: 0;
}

/* Log out (right) vs archive / hard-archive (left column), spaced below profile image */
.account-danger-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--nls-color-border-soft);
}

.account-danger-actions__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.account-danger-actions__left > button,
.account-danger-actions__left > .course-action {
  border-color: color-mix(in srgb, var(--nls-color-danger-border, #fca5a5) 72%, transparent);
  background: color-mix(in srgb, var(--nls-color-danger-bg, #fef2f2) 62%, white);
  color: var(--nls-color-danger-ink, #b91c1c);
}

.account-danger-actions__left > button:is(:hover, :focus-visible):not(:disabled),
.account-danger-actions__left > .course-action:is(:hover, :focus-visible):not(:disabled) {
  border-color: color-mix(
    in srgb,
    var(--nls-color-danger-strong, #ef4444) 42%,
    var(--nls-color-danger-border, #fca5a5)
  );
  background: color-mix(in srgb, var(--nls-color-danger-bg-alt, #fee2e2) 60%, white);
  color: var(--nls-color-danger-ink, #991b1b);
}

.account-danger-actions__right {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 520px) {
  .account-danger-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .account-danger-actions__right {
    margin-left: 0;
    align-self: flex-end;
  }
}

.inline-user-identity {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.inline-user-identity__name {
  overflow-wrap: anywhere;
}

.account-summary button {
  width: fit-content;
  max-width: 100%;
  min-width: fit-content;
  margin-top: 0.12rem;
}

@media (max-width: 900px) {
  .account-profile-logout__label {
    display: inline;
    font-size: 0.78rem;
  }
}

.account-groups {
  border-top: 1px solid var(--nls-color-border-soft);
  padding-top: 0.5rem;
  display: grid;
  gap: 0.35rem;
}

.account-groups__title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--nls-color-text);
}

.account-groups__list {
  font-size: 0.75rem;
  line-height: 1.35;
}

.account-groups__tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.account-groups__tree ul {
  list-style: none;
  margin: 0.25rem 0 0 0.85rem;
  padding: 0 0 0 0.55rem;
  border-left: 1px solid var(--nls-color-border-soft);
  display: grid;
  gap: 0.22rem;
}

.account-groups__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.account-groups__name {
  color: var(--nls-color-text);
  overflow-wrap: anywhere;
}

.account-groups__meta {
  font-size: 0.68rem;
  color: var(--nls-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.role-tools {
  display: grid;
  gap: 0.6rem;
}

/* Tighten side-panel vertical rhythm uniformly across tabs. */
.panel.side-panel .module-body[data-panel-body] {
  margin-top: 0;
  padding-top: 0.2rem;
  gap: 0.45rem;
  padding-bottom: 0.2rem;
}

.panel.side-panel .module-body[data-panel-body] > section {
  margin: 0;
}

.dev-build-line {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--nls-color-text-muted);
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.panel.side-panel .panel-header {
  margin-bottom: 0;
}

.panel.side-panel .panel-title {
  line-height: 1.2;
}

.panel.side-panel .panel-toggle {
  min-height: 2.1rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.panel.side-panel .panel-message {
  min-height: 0;
}

.panel.side-panel .panel-message:empty {
  display: none;
}

.role-tools .dev-section-title {
  margin: 0.35rem 0 0;
}

.admin-tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.panel.side-panel[data-panel-content="admin"] .admin-tools-grid > button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

/* Standardize sidebar button alignment across all panels. */
.panel.side-panel .module-body .course-action {
  justify-content: flex-start;
  text-align: left;
}

.panel.side-panel .module-body .course-action__icon {
  order: -1;
  margin-left: 0;
  margin-right: 0.35rem;
}

/* Non-Dev-Tools sidebar actions: smaller card-like button language. */
.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  .course-action,
.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  button.secondary,
.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  button.ghost {
  border: 1px solid var(--nls-color-border-strong, #cbd5e1);
  border-radius: 10px;
  padding: 0.4rem 0.75rem;
  min-height: 2rem;
  font-size: 0.76rem;
  line-height: 1.2;
  justify-content: flex-start;
  text-align: left;
  background: var(--nls-color-surface, #ffffff);
  color: var(--nls-color-text, #0f172a);
}

.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  .course-action__icon {
  order: -1;
  margin-left: 0;
  margin-right: 0.35rem;
}

.course-action__icon {
  display: inline-flex;
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
}

.course-action__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  .course-action:is(:hover, :focus-visible),
.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  button.secondary:is(:hover, :focus-visible),
.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  button.ghost:is(:hover, :focus-visible) {
  border-color: var(--nls-color-border-strong, #94a3b8);
  background: color-mix(in srgb, var(--nls-color-surface-alt, #f8fafc) 72%, white);
  color: var(--nls-color-text, #0f172a);
}

/* Dev Tools primary actions only (not utility controls). */
.panel.side-panel[data-panel-content="developer"] .dev-actions > button,
.panel.side-panel[data-panel-content="developer"]
  .progress-devtools-actions
  > button {
  border: 1px solid var(--nls-color-primary-border-strong);
  border-radius: 10px;
  padding: 0.28rem 0.62rem;
  min-height: 1.9rem;
  font-size: 0.76rem;
  line-height: 1.15;
  justify-content: flex-start;
  text-align: left;
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 82%,
    var(--nls-color-surface) 18%
  );
  color: var(--nls-color-primary-ink);
}

.panel.side-panel[data-panel-content="developer"]
  .dev-actions
  > button:is(:hover, :focus-visible),
.panel.side-panel[data-panel-content="developer"]
  .progress-devtools-actions
  > button:is(:hover, :focus-visible) {
  border-color: var(--nls-color-primary);
  background: var(--nls-color-primary-bg);
  color: var(--nls-color-primary-strong);
}

/* Dev tools sections use the same expandable row language as Admin2 node view. */
.panel.side-panel[data-panel-content="developer"] .dev-tools {
  display: grid;
  gap: 0.45rem;
}

.panel.side-panel[data-panel-content="developer"] .dev-tools__section {
  display: grid;
  gap: 0;
}

.panel.side-panel[data-panel-content="developer"] .dev-section-toggle {
  width: 100%;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 9px;
  background: var(--nls-color-surface);
  padding: 0.42rem 0.55rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  text-align: left;
}

.panel.side-panel[data-panel-content="developer"]
  .dev-section-toggle[aria-expanded="true"] {
  border-color: var(--nls-color-primary-border-strong);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.panel.side-panel[data-panel-content="developer"] .dev-section-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
}

.panel.side-panel[data-panel-content="developer"] .dev-section-toggle__icon {
  color: var(--nls-color-text-soft);
}

.panel.side-panel[data-panel-content="developer"] .dev-section-body {
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-primary-border-strong) 40%,
      var(--nls-color-border-soft) 60%
    );
  border-top: 0;
  border-radius: 0 0 9px 9px;
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 32%,
    var(--nls-color-surface) 68%
  );
  padding: 0.45rem 0.5rem;
  display: grid;
  gap: 0.45rem;
}

.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-warning, #d97706) 62%, var(--nls-color-border-soft) 38%);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--nls-color-warning-bg, #fff7ed) 88%,
    var(--nls-color-surface) 12%
  );
  margin: 0.5rem 0.75rem 0;
}

.impersonation-banner[hidden] {
  display: none !important;
}

.impersonation-banner--ghost {
  border-color: color-mix(
    in srgb,
    var(--nls-color-info, #2563eb) 58%,
    var(--nls-color-border-soft) 42%
  );
  background: color-mix(in srgb, var(--nls-color-info-bg, #eff6ff) 88%, var(--nls-color-surface) 12%);
}

.maintenance-mode-banner {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  left: 50%;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: min(calc(100vw - 1.5rem), 840px);
  border: 1px solid rgba(180, 83, 9, 0.38);
  border-radius: 1rem;
  background: #fff7ed;
  color: #7c2d12;
  box-shadow: 0 18px 50px rgba(124, 45, 18, 0.22);
  padding: 0.85rem 1rem;
  margin: 0;
  transform: translateX(-50%);
}

.maintenance-mode-banner[hidden] {
  display: none !important;
}

.maintenance-mode-banner__text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.3;
}

.maintenance-mode-banner__text span {
  overflow-wrap: anywhere;
}

.impersonation-banner__text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--nls-color-text);
}

#impersonation-banner-label {
  color: var(--nls-color-text-soft);
  overflow-wrap: anywhere;
}

.panel.side-panel[data-panel-content="developer"] #dev-impersonation-results {
  width: 100%;
  min-height: 8.4rem;
}

.panel.side-panel[data-panel-content="developer"] #dev-impersonation-status {
  margin: 0;
}

/* Prevent label truncation when button copy is long in narrow sidebars. */
.panel.side-panel .module-body button {
  white-space: normal;
  overflow-wrap: anywhere;
}

.admin-tool-group {
  display: grid;
  gap: 0.35rem;
}

.teacher-classes-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.classes-action-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.35rem 0 0.55rem;
}

.classes-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--nls-text-muted, #6b7280);
}

.admin2-search-checkbox-row[hidden] {
  display: none !important;
}

.classes-inline-check input[type="checkbox"] {
  margin: 0;
}

.manage-groups-archive-filters {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 82%, #ffffff 18%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--nls-color-surface-alt) 82%, #ffffff 18%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}

.manage-groups-archive-filters .account-editor-note {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--nls-color-text);
}

.manage-groups-archive-filters .panel-message {
  margin: 0;
  max-width: 65ch;
}

.manage-groups-archive-filters__controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.5rem;
}

.manage-groups-archive-filters .classes-inline-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.1rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 80%, #ffffff 20%);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 92%,
    var(--nls-color-primary-bg-light) 8%
  );
  color: var(--nls-color-text-soft);
  font-size: 0.82rem;
  line-height: 1.2;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    color 120ms ease;
}

.manage-groups-archive-filters .classes-inline-check:hover {
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary) 42%,
    var(--nls-color-border-soft)
  );
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 28%,
    var(--nls-color-surface) 72%
  );
}

.manage-groups-archive-filters .classes-inline-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--nls-color-primary);
}

.manage-groups-archive-filters
  .classes-inline-check
  input[type="checkbox"]:checked
  + span {
  color: var(--nls-color-primary-strong);
  font-weight: 700;
}

.manage-groups-archive-filters .classes-inline-check.is-forced-context {
  border-style: dashed;
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary-strong) 50%,
    transparent
  );
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 52%,
    var(--nls-color-surface) 48%
  );
}

.allowed-domains-dashboard {
  display: grid;
  gap: 0.6rem;
}

.allowed-domains-dashboard .dev-section-title {
  margin: 0;
}

.allowed-domains-dashboard .panel-message {
  margin: 0;
  max-width: 65ch;
}

.allowed-domains-dashboard__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  align-items: center;
}

.allowed-domains-dashboard__option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--nls-color-text-soft);
  font-size: 0.82rem;
  line-height: 1.2;
  transition: color 120ms ease;
}

.allowed-domains-dashboard__option input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--nls-color-primary);
}

.allowed-domains-dashboard__option input[type="checkbox"]:checked + span {
  color: var(--nls-color-primary-strong);
  font-weight: 700;
}

.classes-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  font-size: 0.78rem;
  padding: 0.24rem 0.45rem;
  text-align: left;
  white-space: normal;
}

.classes-action-bar .classes-action-btn {
  justify-content: flex-start !important;
  text-align: left !important;
}

.classes-action-bar .course-action {
  justify-content: flex-start !important;
  text-align: left !important;
}

.classes-action-bar .course-action__icon {
  order: -1;
  margin-left: 0;
  margin-right: 0.35rem;
}

:root {
  --nls-action-placeholder-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22M480-80%20120-280v-400l360-200%20360%20200v400L480-80ZM364-590q23-24%2053-37t63-13q33%200%2063%2013t53%2037l120-67-236-131-236%20131%20120%2067Zm76%20396v-131q-54-14-87-57t-33-98q0-11%201-20.5t4-19.5l-125-70v263l240%20133Zm96.5-229.5Q560-447%20560-480t-23.5-56.5Q513-560%20480-560t-56.5%2023.5Q400-513%20400-480t23.5%2056.5Q447-400%20480-400t56.5-23.5ZM520-194l240-133v-263l-125%2070q3%2010%204%2019.5t1%2020.5q0%2055-33%2098t-87%2057v131Z%22/%3E%3C/svg%3E");
}

/* Default placeholder icon for action buttons when no icon exists/supplied. */
.course-action:not(:has(svg)):not(:has([class*="icon"])):not(.action-button--no-placeholder)::before,
.courses-add-button:not(:has(svg)):not(:has([class*="icon"])):not(.action-button--no-placeholder)::before,
.account-editor-actions > button:not(:has(svg)):not(:has([class*="icon"])):not(.action-button--no-placeholder)::before,
.admin2-actions > button:not(:has(svg)):not(:has([class*="icon"])):not(.action-button--no-placeholder)::before,
.classes-action-bar > button:not(:has(svg)):not(:has([class*="icon"])):not(.action-button--no-placeholder)::before {
  content: "";
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: var(--nls-action-placeholder-icon);
  mask-image: var(--nls-action-placeholder-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  margin-right: 0.35rem;
}

.class-teacher-assignment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.class-teacher-assignment-row__label {
  font-weight: 600;
}

.class-teacher-assignment-row__select {
  min-width: min(26rem, 100%);
  max-width: 100%;
}

.class-teacher-assignment-row__status {
  font-size: 0.76rem;
}

#classes-hub-message:empty {
  display: none;
}

#classes-hub-message {
  min-height: 1.15rem;
  margin: 0 0 0.3rem;
  transition: opacity 140ms ease;
}

#progress-courses-message:empty {
  display: none;
}

.teacher-class-btn {
  width: 100%;
  text-align: left;
}

.teacher-class-btn--class-hierarchy {
  display: grid;
  justify-items: start;
  gap: 0;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15), transparent 40%),
    linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
}

.teacher-class-btn--class-hierarchy .class-hierarchy-row:first-child {
  width: 100%;
  height: clamp(2.2rem, 4.5vw, 3rem);
  min-height: clamp(2.2rem, 4.5vw, 3rem);
  display: flex;
  align-items: center;
  padding: 0.22rem 0.62rem;
}

.teacher-class-btn--class-hierarchy .class-hierarchy-row--class {
  width: 100%;
  padding: 0.24rem 0.62rem 0.48rem;
}

.class-hierarchy-row {
  display: block;
  width: 100%;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.class-hierarchy-row--level-1 {
  font-size: 0.69rem;
  font-weight: 700;
  color: color-mix(
    in srgb,
    var(--nls-color-primary-strong) 68%,
    var(--nls-color-text) 32%
  );
}

.class-hierarchy-row--level-2 {
  font-size: 0.68rem;
  font-weight: 650;
  color: color-mix(in srgb, #117b95 62%, var(--nls-color-text) 38%);
}

.class-hierarchy-row--level-3 {
  font-size: 0.67rem;
  font-weight: 650;
  color: color-mix(in srgb, #6b7280 70%, var(--nls-color-text) 30%);
}

.class-hierarchy-row--level-4 {
  font-size: 0.66rem;
  font-weight: 640;
  color: color-mix(in srgb, #8b5cf6 66%, var(--nls-color-text) 34%);
}

/* Classes hub uses neutral hierarchy labels (avoid legacy Admin purple faculty cue). */
.admin2-shell--classes-hub .class-hierarchy-row--level-1,
.admin2-shell--classes-hub .class-hierarchy-row--level-2,
.admin2-shell--classes-hub .class-hierarchy-row--level-3,
.admin2-shell--classes-hub .class-hierarchy-row--level-4 {
  color: var(--nls-color-text-soft);
}

.class-hierarchy-row--parent-distributor {
  font-size: 0.69rem;
  font-weight: 700;
  color: color-mix(
    in srgb,
    var(--nls-color-primary-strong) 68%,
    var(--nls-color-text) 32%
  );
}

.class-hierarchy-row--parent-customer {
  font-size: 0.68rem;
  font-weight: 650;
  color: color-mix(in srgb, #117b95 62%, var(--nls-color-text) 38%);
}

.class-hierarchy-row--parent-campus {
  font-size: 0.67rem;
  font-weight: 650;
  color: color-mix(in srgb, #6b7280 70%, var(--nls-color-text) 30%);
}

.class-hierarchy-row--parent-faculty {
  font-size: 0.66rem;
  font-weight: 640;
  color: color-mix(in srgb, #8b5cf6 66%, var(--nls-color-text) 34%);
}

.class-hierarchy-row--parent-default {
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--nls-color-text-soft);
}

.class-hierarchy-row--class {
  margin-top: 0.06rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--nls-color-text);
}

.teacher-class-btn--class-hierarchy .class-hierarchy-row--level-1,
.teacher-class-btn--class-hierarchy .class-hierarchy-row--level-2,
.teacher-class-btn--class-hierarchy .class-hierarchy-row--level-3,
.teacher-class-btn--class-hierarchy .class-hierarchy-row--level-4,
.teacher-class-btn--class-hierarchy .class-hierarchy-row--parent-distributor,
.teacher-class-btn--class-hierarchy .class-hierarchy-row--parent-customer,
.teacher-class-btn--class-hierarchy .class-hierarchy-row--parent-campus,
.teacher-class-btn--class-hierarchy .class-hierarchy-row--parent-faculty,
.teacher-class-btn--class-hierarchy .class-hierarchy-row--parent-default,
.teacher-class-btn--class-hierarchy .class-hierarchy-row--teacher {
  color: rgba(255, 255, 255, 0.88);
}

.teacher-class-btn--class-hierarchy .class-hierarchy-row--class {
  color: #ffffff;
}

.class-hierarchy-row--rollup {
  margin-top: 0.06rem;
  font-size: 0.67rem;
  font-weight: 650;
  color: var(--nls-color-text-soft);
}

.class-hierarchy-row--teacher {
  display: inline-flex;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.67rem;
  font-weight: 600;
  line-height: 1;
  color: var(--nls-color-text-soft);
}

.class-hierarchy-row--archived {
  width: fit-content;
  margin-top: 0.08rem;
  padding: 0.08rem 0.34rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #d4a83a 46%, transparent);
  background: color-mix(in srgb, #fff1a8 78%, #ffffff 22%);
  color: color-mix(in srgb, #7a5a00 82%, var(--nls-color-text) 18%);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.class-hierarchy-row--metaid {
  font-size: 0.63rem;
  font-weight: 560;
  color: color-mix(in srgb, var(--nls-color-text-soft) 84%, #ffffff 16%);
}

.manage-user-bulk-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

.manage-user-bulk-row input[type="checkbox"] {
  margin: 0;
  align-self: center;
}

.manage-user-bulk-row .teacher-class-btn {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.manage-user-bulk-row.is-inactive .teacher-class-btn {
  background: #fff8db;
  border-color: #e6d58a;
}

.manage-user-bulk-row.is-hard-archived .teacher-class-btn {
  background: #fee2e2;
  border-color: #fca5a5;
}

.manage-user-bulk-row .teacher-class-btn.is-archived {
  background: #fff8db;
  border-color: #e6d58a;
}

.manage-user-bulk-row .teacher-class-btn.is-hard-archived {
  background: #fee2e2;
  border-color: #fca5a5;
}

.manage-user-bulk-row.is-selected .teacher-class-btn {
  outline: 2px solid var(--nls-color-primary, #2563eb);
  outline-offset: 1px;
}

.manage-user-status-chip {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.15;
  padding: 0.09rem 0.35rem;
  border-radius: 999px;
  border: 1px solid #e6d58a;
  background: #fff8db;
  color: #7a4a00;
}

.manage-user-status-chip--hard-archived {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #7f1d1d;
}

.manage-groups-bulk-row {
  --hierarchy-indent-step: 0.62rem;
  --hierarchy-indent: calc(
    var(--hierarchy-depth, 0) * var(--hierarchy-indent-step)
  );
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.42rem;
  width: calc(100% - var(--hierarchy-indent));
  margin-left: var(--hierarchy-indent);
}

.manage-groups-bulk-row__checkbox {
  margin: 0;
  align-self: center;
}

.manage-groups-bulk-row.is-selected .teacher-class-btn--hierarchy {
  outline: 2px solid var(--nls-color-primary, #2563eb);
  outline-offset: 1px;
}

.manage-groups-bulk-row.is-inactive .teacher-class-btn--hierarchy {
  background: #fff8db;
  border-color: #e6d58a;
}

.manage-groups-announce-audience-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.manage-groups-announce-audience {
  margin-top: 0.25rem;
}

.admin2-announce-compose {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: none;
  overflow: visible;
  padding-right: 0;
  margin-top: 0.25rem;
}

.admin2-announce-compose__composer {
  margin-top: 0;
}

.admin2-announce-compose__audience-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.admin2-announce-compose__anchor-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

/* Match “Everyone in scope” lozenge: filled primary pill, one per selected scope root. */
.admin2-announce-compose__scope-pill {
  flex: 0 1 auto;
  max-width: min(100%, 16rem);
  overflow-wrap: anywhere;
  font-size: 0.68rem;
  line-height: 1.2;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--nls-color-primary, #2563eb);
  background: var(--nls-color-primary, #2563eb);
  color: var(--nls-color-on-primary, #fff);
}

.admin2-announce-compose__role-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-soft);
}

.admin2-announce-compose__role-row .notice-compose-students__option {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  grid-template-columns: unset;
}

.inactive-user-avatar {
  background: #f5f0d2;
  color: #8a7b2d;
}

.inactive-user-avatar__icon {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.inactive-user-avatar__icon svg {
  width: 72%;
  height: 72%;
  fill: currentColor;
}

.manage-user-section-label {
  margin: 0.25rem 0 0.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--nls-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-groups__item--class-detail {
  display: grid;
  justify-items: start;
  gap: 0.12rem;
}

.account-class-line {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.account-class-line--parent-1 {
  font-size: 0.68rem;
  font-weight: 700;
  color: color-mix(
    in srgb,
    var(--nls-color-primary-strong) 66%,
    var(--nls-color-text) 34%
  );
}

.account-class-line--parent-2 {
  font-size: 0.67rem;
  font-weight: 650;
  color: color-mix(in srgb, #117b95 62%, var(--nls-color-text) 38%);
}

.account-class-line--parent-3 {
  font-size: 0.66rem;
  font-weight: 640;
  color: color-mix(in srgb, #6b7280 72%, var(--nls-color-text) 28%);
}

.account-class-line--parent-4 {
  font-size: 0.65rem;
  font-weight: 630;
  color: color-mix(in srgb, #8b5cf6 64%, var(--nls-color-text) 36%);
}

.account-class-line--class {
  margin-top: 0.05rem;
  font-size: 0.8rem;
  font-weight: 760;
  color: var(--nls-color-text);
}

.account-class-line--teacher {
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--nls-color-text-soft);
}

.account-class-line__teacher-icon {
  width: 0.78rem;
  height: 0.78rem;
  display: inline-flex;
  flex: 0 0 auto;
}

.account-class-line__teacher-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.teacher-class-btn--hierarchy {
  --hierarchy-indent-step: 0.62rem;
  --hierarchy-indent: calc(
    var(--hierarchy-depth, 0) * var(--hierarchy-indent-step)
  );
  width: calc(100% - var(--hierarchy-indent));
  margin-left: var(--hierarchy-indent);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.32rem 0.46rem;
  white-space: normal;
  border-radius: 10px;
  border-color: color-mix(
    in srgb,
    var(--nls-color-border-soft) 70%,
    #ffffff 30%
  );
  background: color-mix(in srgb, var(--nls-color-surface) 84%, #ffffff 16%);
}

.teacher-class-btn--hierarchy-selectable {
  width: 100%;
  margin-left: 0;
}

.teacher-class-btn--hierarchy.teacher-class-btn--archived {
  border-color: color-mix(
    in srgb,
    #d4a83a 42%,
    var(--nls-color-border-soft) 58%
  );
  background: color-mix(in srgb, #fff3bf 68%, var(--nls-color-surface) 32%);
}

.teacher-classes-list--hierarchy {
  gap: 0.3rem;
}

@media (max-width: 900px) {
  .panel.side-panel .module-body[data-panel-body] {
    padding-top: 0.16rem;
    gap: 0.4rem;
    padding-bottom: 0.12rem;
  }
}

.teacher-class-btn--hierarchy:hover {
  border-color: var(--nls-color-primary-border-strong);
  background: color-mix(in srgb, var(--nls-color-primary-bg) 40%, #ffffff 60%);
}

.teacher-class-btn--hierarchy.teacher-class-btn--archived:hover {
  border-color: color-mix(
    in srgb,
    #c58b12 58%,
    var(--nls-color-primary-border-strong) 42%
  );
  background: color-mix(in srgb, #ffe08a 72%, var(--nls-color-surface) 28%);
}

.teacher-class-btn--hierarchy.is-active {
  border-color: var(--nls-color-border-strong, #94a3b8);
  background: color-mix(
    in srgb,
    var(--nls-color-surface-alt, #f8fafc) 78%,
    var(--nls-color-surface, #ffffff)
  );
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--nls-color-border-strong, #94a3b8) 20%, transparent);
}

.teacher-class-btn--hierarchy.teacher-class-btn--archived.is-active {
  border-color: color-mix(
    in srgb,
    #c58b12 54%,
    var(--nls-color-primary-border-strong) 46%
  );
  background: color-mix(in srgb, #f8d96a 64%, var(--nls-color-primary-bg) 36%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d4a83a 24%, transparent);
}

.hierarchy-row {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: min-content;
  align-items: start;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
}

.hierarchy-row__main {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
}

.hierarchy-row__type-inline {
  color: var(--nls-color-primary-ink);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.hierarchy-row__name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--nls-color-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
}

.hierarchy-row__meta {
  min-width: 0;
  color: var(--nls-color-text-soft);
  font-size: 0.72rem;
  font-weight: 550;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.hierarchy-row__status {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  width: fit-content;
  padding: 0.08rem 0.34rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.hierarchy-row__status--archived {
  border-color: color-mix(in srgb, #d4a83a 46%, transparent);
  background: color-mix(in srgb, #fff1a8 78%, #ffffff 22%);
  color: color-mix(in srgb, #7a5a00 82%, var(--nls-color-text) 18%);
}

.hierarchy-row__status--context {
  border-color: color-mix(in srgb, #5f6f85 40%, transparent);
  background: color-mix(in srgb, #e8edf3 80%, #ffffff 20%);
  color: color-mix(in srgb, #31455d 84%, var(--nls-color-text) 16%);
}

.hierarchy-row__status-icon {
  width: 0.78rem;
  height: 0.78rem;
  fill: currentColor;
  flex: 0 0 auto;
}

.hierarchy-row__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.22rem;
  border-radius: 6px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 80%, #ffffff 20%);
  color: var(--nls-color-text-muted);
  background: color-mix(in srgb, var(--nls-color-surface-alt) 70%, #ffffff 30%);
  font-size: 0.66rem;
  font-weight: 700;
}

.hierarchy-row__count:empty {
  display: none;
}

@media (max-width: 900px) {
  .teacher-class-btn--hierarchy {
    --hierarchy-indent-step: 0.45rem;
    padding: 0.3rem 0.42rem;
  }

  .manage-groups-bulk-row {
    --hierarchy-indent-step: 0.45rem;
  }

  .hierarchy-row__name {
    font-size: 1rem;
  }
}

.teacher-roster-list {
  display: grid;
  gap: 0.4rem;
}

.teacher-roster-list--expanded {
  gap: 0.34rem;
}

.teacher-roster-btn {
  width: 100%;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text);
  text-align: left;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
}

.teacher-roster-btn:is(:hover, :focus-visible) {
  border-color: var(--nls-color-primary-border-strong);
}

.teacher-roster-btn__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.teacher-roster-btn__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.teacher-roster-btn__meta {
  font-size: 0.74rem;
  color: var(--nls-color-text-muted);
}

.teacher-roster-btn__sub {
  margin-top: 0.2rem;
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
}

.teacher-course-list {
  display: grid;
  gap: 0.35rem;
}

.teacher-course-btn {
  width: 100%;
  text-align: left;
}

.teacher-student-node {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-alt);
  overflow: hidden;
}

/* Match class-row expand/collapse chrome: toggle + panel own the shape. */
.teacher-student-node.teacher-student-node-expandable {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.teacher-student-node__summary {
  list-style: none;
  cursor: pointer;
  padding: 0.42rem 0.48rem;
  display: grid;
  gap: 0.14rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.teacher-student-node-expandable__toggle.teacher-student-node__summary {
  box-sizing: border-box;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface-alt);
  overflow: hidden;
}

.teacher-student-node:not(.is-expanded)
  .teacher-student-node-expandable__toggle.teacher-student-node__summary {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

.teacher-student-node.is-expanded .teacher-student-node-expandable__toggle.teacher-student-node__summary {
  border-color: var(--nls-color-primary-border-strong);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.teacher-student-node__summary::-webkit-details-marker {
  display: none;
}

.teacher-student-node__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--nls-color-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.teacher-student-node__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-width: 0;
}

.teacher-student-node__meta {
  font-size: 0.75rem;
  color: var(--nls-color-text-muted);
}

.teacher-student-node__sub {
  font-size: 0.73rem;
  color: var(--nls-color-text-soft);
}

.teacher-student-node__metrics {
  justify-self: start;
  margin-left: 0;
  justify-content: flex-start;
}

.progress-history-toggle__stats--loading {
  --class-scores-loader-width: 24rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  width: min(var(--class-scores-loader-width), 100%);
  max-width: 100%;
  justify-content: flex-start;
}

.progress-history-toggle__stats--loading
  > :not(.class-scores-inline-loader) {
  opacity: 0;
}

.teacher-student-node__summary
  .progress-history-toggle__stats--loading
  > :not(.class-scores-inline-loader) {
  opacity: 0;
}

.class-scores-inline-loader {
  width: min(var(--class-scores-loader-width), 100%);
  height: 1.05rem;
  border-radius: 999px;
  border: 2px solid
    color-mix(in srgb, var(--nls-color-primary, #514b82) 55%, transparent);
  color: var(--nls-color-primary, #514b82);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  background: color-mix(
    in srgb,
    var(--nls-color-surface, #ffffff) 82%,
    var(--nls-color-primary, #514b82) 18%
  );
}

.teacher-student-node__summary .class-scores-inline-loader {
  height: 1.18rem;
  border-width: 3px;
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--nls-color-primary, #514b82) 35%, transparent);
}

.class-scores-inline-loader::before {
  content: "";
  position: absolute;
  margin: 2px;
  inset: 0 100% 0 0;
  border-radius: inherit;
  background: currentColor;
  animation: class-scores-inline-loader-fill 1.4s linear infinite;
}

.class-scores-inline-loader.is-determinate::before {
  animation: none;
  inset: 0 calc(100% - var(--class-scores-loader-progress, 0%)) 0 0;
  transition: inset 140ms linear;
}

@keyframes class-scores-inline-loader-fill {
  100% {
    inset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .class-scores-inline-loader::before {
    animation: none;
    inset: 0 38% 0 0;
  }
}

.teacher-student-node__status {
  justify-self: start;
}

.teacher-class-scores-loading-list {
  margin-top: 0.12rem;
}

.teacher-class-scores-tab-loading {
  margin: 0 0 0.35rem;
}

.teacher-class-scores-tab-loading__line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

.teacher-class-scores-tab-loading__note {
  font-size: 0.78rem;
  color: var(--nls-color-text-muted, #64748b);
  white-space: nowrap;
}

.teacher-class-scores-tab-loading__loader {
  position: relative;
  display: inline-block;
  top: auto;
  left: auto;
  transform: none;
  flex: 1 1 auto;
  min-width: 9rem;
  width: auto;
  max-width: none;
  z-index: auto;
}

@media (max-width: 520px) {
  .teacher-class-view__pane--scores .teacher-class-scores-tab-loading__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.26rem;
    width: 100%;
  }

  .teacher-class-view__pane--scores .teacher-class-scores-tab-loading__note {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .teacher-class-view__pane--scores .teacher-class-scores-tab-loading__loader {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

.teacher-class-scores-loading-row__body {
  cursor: default;
}

.teacher-class-scores-loading-row__label {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.teacher-class-scores-loading-dots {
  display: inline-flex;
  min-width: 1.1em;
}

.teacher-class-scores-loading-dots span {
  opacity: 0.18;
  animation: teacher-class-scores-loading-dot 1.2s infinite;
}

.teacher-class-scores-loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.teacher-class-scores-loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes teacher-class-scores-loading-dot {
  0%,
  20% {
    opacity: 0.18;
  }
  45%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0.18;
  }
}

.classes-student-courses-eyebrow {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nls-color-text-soft);
  margin: 0 0 0.35rem;
}

.teacher-student-node__courses {
  border-top: 1px solid var(--nls-color-border-soft);
  padding: 0.18rem 0.6rem 0.16rem;
  display: grid;
  gap: 0.12rem;
}

.teacher-student-node-expandable__panel .teacher-student-node__courses {
  border-top: 0;
  padding: 0;
}

/* Remove inherited inner gutter so course rows align with student row edges. */
.teacher-student-node-expandable__panel {
  padding: 0;
}

.teacher-student-node-expandable__panel .progress-history-list {
  gap: 0.12rem;
}

.teacher-student-node-expandable__panel .progress-history-item {
  margin: 0;
}

.teacher-course-progress {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 9px;
  background: var(--nls-color-surface);
  padding: 0.4rem 0.5rem;
  display: grid;
  gap: 0.32rem;
  position: relative;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.teacher-course-progress--pending-remove {
  border-color: #fca5a5 !important;
  background: #fee4e2 !important;
  box-shadow: 0 0 0 1px rgba(180, 35, 24, 0.08) inset;
}

.teacher-course-progress--recent-add {
  border-color: #86efac !important;
  background: #dcfce7 !important;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.12) inset;
}

.teacher-social-post-flag-btn {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 7px;
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.teacher-social-post-flag-btn--danger {
  color: #dc2626;
}

.teacher-social-post-flag-btn > svg {
  width: 0.88rem;
  height: 0.88rem;
  fill: currentColor;
}

.support-social-context {
  display: grid;
  gap: 0.35rem;
}

.support-social-context__audio {
  width: 100%;
}

.teacher-class-summary {
  margin-bottom: 0.35rem;
}

.teacher-class-view > .progress-player-detail__title {
  margin-bottom: 0.45rem;
}

.tabs {
  display: inline-flex;
  width: auto;
  max-width: 100%;
}

.tabs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

.tabs--segmented {
  background: var(--nls-color-surface);
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-primary) 24%,
      var(--nls-color-border) 76%
    );
  border-radius: var(--nls-radius-lg, 12px);
  padding: 4px;
}

.tabs--segmented .tabs__list {
  gap: 4px;
}

.tabs--underline {
  border-bottom: 1px solid color-mix(in srgb, var(--nls-color-border) 82%, transparent);
}

.tabs--underline .tabs__list {
  gap: 18px;
  padding-bottom: 8px;
}

.tabs__item {
  appearance: none;
  border: none;
  border-radius: var(--nls-radius-md, 10px);
  background: transparent;
  color: var(--nls-color-text-muted);
  padding: 6px 12px;
  margin: 0;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  transition:
    color 120ms ease,
    background-color 120ms ease,
    border-color 120ms ease;
  position: relative;
}

.tabs__item:hover {
  color: var(--nls-color-text);
}

@media (hover: hover) and (pointer: fine) {
  .tabs--segmented .tabs__item:hover {
    background: color-mix(in srgb, var(--nls-color-border) 30%, transparent);
  }
}

.tabs--segmented .tabs__item--active {
  background: var(--nls-color-primary);
  color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  .tabs--segmented .tabs__item--active:hover {
    background: color-mix(in srgb, var(--nls-color-border) 30%, transparent);
    color: var(--nls-color-text);
  }
}

.tabs--underline .tabs__item {
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 2px 0 8px;
  min-height: 0;
}

.tabs--underline .tabs__item:hover {
  color: var(--nls-color-text);
}

.tabs--underline .tabs__item--active {
  color: var(--nls-color-text);
  font-weight: 700;
  border-bottom-color: var(--nls-color-primary);
}

.tabs__icon {
  width: 0.95rem;
  height: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 0.95rem;
}

.tabs__icon > svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.tabs__item:focus-visible {
  outline: 2px solid var(--nls-color-primary);
  outline-offset: 2px;
}

.inbox-view-tabs .tabs__item .tabs__item-unread-dot {
  position: absolute;
  top: 0.18rem;
  right: -0.32rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--nls-color-danger, #ef4444);
  border: 2px solid var(--nls-color-surface, #fff);
  pointer-events: none;
}

.inbox-view-tabs .tabs__item--active .tabs__item-unread-dot {
  background: var(--nls-color-primary, #1f3fbf);
}

.teacher-class-header-shell {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  margin: 0;
}

.teacher-class-view__tab-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.55rem;
  margin: 0 0 0.14rem;
  padding: 0.24rem 0.65rem 0.2rem;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background: transparent;
}

.teacher-class-view__tab-row .teacher-class-view__class-admin-action {
  background: var(--nls-color-surface);
  color: var(--nls-color-text);
  border-color: var(--nls-color-border);
  font-weight: 600;
  font-size: 0.84rem;
  line-height: 1.2;
  min-height: 2rem;
  padding: 6px 12px;
  border-radius: var(--nls-radius-md, 10px);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  margin-left: auto;
  flex: 0 0 auto;
  align-self: flex-start;
}

.teacher-class-view__tab-row .teacher-class-view__class-admin-action:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--nls-color-surface) 90%, var(--nls-color-border) 10%);
  color: var(--nls-color-text);
}

.teacher-class-view__tab-row .tabs__item {
  min-height: 2rem;
  font-size: 0.84rem;
}

.teacher-class-container {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  padding: 0.28rem 0.32rem 0.34rem;
}

.teacher-class-view .teacher-class-container {
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary) 20%,
    var(--nls-color-border) 80%
  );
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  padding: 0.48rem 0.58rem 0.6rem;
}

.teacher-schedule-builder-container {
  border: 1px solid
    color-mix(in srgb, var(--nls-color-primary) 28%, var(--nls-color-border) 72%);
  border-radius: 12px;
  background: color-mix(in srgb, #ffffff 90%, var(--nls-color-primary) 10%);
  padding: 0.72rem 0.78rem;
}

.teacher-schedule-feedback {
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 0.42rem 0.58rem;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.teacher-schedule-feedback.is-error {
  color: var(--nls-color-danger-ink, #991b1b);
  border-color: color-mix(in srgb, var(--nls-color-danger, #dc2626) 48%, #ffffff 52%);
  background: color-mix(in srgb, var(--nls-color-danger, #dc2626) 10%, #ffffff 90%);
}

.teacher-schedule-feedback.is-success {
  color: var(--nls-color-success-ink, #14532d);
  border-color: color-mix(in srgb, var(--nls-color-success, #16a34a) 48%, #ffffff 52%);
  background: color-mix(in srgb, var(--nls-color-success, #16a34a) 11%, #ffffff 89%);
}

.teacher-schedule-feedback.is-flashing {
  animation: teacher-schedule-feedback-flash 900ms ease-out 1;
}

@keyframes teacher-schedule-feedback-flash {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  35% {
    box-shadow: 0 0 0 4px
      color-mix(in srgb, currentColor 16%, transparent 84%);
  }
}

.teacher-class-view .teacher-class-info {
  margin-top: 0.25rem;
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-primary) 20%,
      var(--nls-color-border) 80%
    );
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  padding: 0.5rem 0.62rem;
  display: grid;
  gap: 0.35rem;
}

.teacher-class-view .teacher-class-info--class-meta {
  margin-top: 0.08rem;
  padding: 0.28rem 0.5rem;
  gap: 0.18rem;
}

.teacher-class-view .teacher-class-info--class-meta .class-teacher-assignment-row {
  gap: 0.26rem;
}

.teacher-class-view .teacher-class-info--class-meta .teacher-class-info-line {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.teacher-class-view .teacher-class-info--archive-actions .classes-action-bar {
  justify-content: flex-end;
  margin: 0;
}

.teacher-class-view .teacher-class-info--archive-actions {
  margin-top: 0.34rem;
  padding-top: 0.62rem;
}

.classes-hub-header-image {
  display: none;
}

.teacher-class-overview-hero {
  position: relative;
  margin-top: 0;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  background-clip: padding-box;
}

.teacher-class-overview-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  z-index: 0;
}

.teacher-class-overview-hero__banner {
  display: none;
}

.teacher-class-overview-hero__body {
  display: block;
  padding: 0.72rem 0.82rem 0.82rem;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.teacher-class-overview-hero__identity {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  align-self: stretch;
  min-height: 0;
  padding: 0.42rem 0.52rem 0.46rem;
  box-sizing: border-box;
}

.teacher-class-overview-hero__identity-main-row {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.teacher-class-overview-hero__identity-primary {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.teacher-class-overview-hero__comparison-row {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.16rem;
  text-align: right;
}

.teacher-class-overview-hero__comparison-row .panel-message {
  margin: 0;
}

.teacher-class-overview-hero__icon {
  width: 4.75rem;
  height: 4.75rem;
  min-width: 4.75rem;
  min-height: 4.75rem;
  max-width: 4.75rem;
  max-height: 4.75rem;
  flex: 0 0 4.75rem;
  border-radius: 50% !important;
  border: 3px solid #ffffff;
  box-shadow: 0 5px 13px rgba(15, 23, 42, 0.12);
  object-fit: cover;
  overflow: hidden;
  background: var(--nls-color-surface);
  aspect-ratio: 1 / 1;
  clip-path: circle(50%);
  align-self: flex-start;
}

.teacher-class-overview-hero__icon--self-study {
  border-color: rgba(30, 58, 138, 0.22);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 5px 13px rgba(8, 20, 47, 0.22);
}

.teacher-class-overview-hero__icon--self-study svg {
  width: 72%;
  height: 72%;
  color: #1e3a8a;
}

.teacher-class-overview-hero__icon.profile-avatar-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  overflow: hidden;
}

.teacher-class-overview-hero__icon img {
  width: 100%;
  height: 100%;
  border-radius: 50% !important;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  clip-path: circle(50%);
}

.teacher-class-overview-hero__text {
  min-width: 0;
  display: grid;
  align-self: center;
  justify-content: center;
  gap: 0.2rem;
}

.teacher-class-overview-hero__faculty {
  margin: 0;
  font-size: 0.73rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--nls-color-text-soft);
}

.teacher-class-overview-hero__title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--nls-color-text);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.teacher-class-overview-hero__meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--nls-color-text-soft);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.teacher-class-overview-hero__dates {
  margin: 0;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--nls-color-text-soft) 86%, #fff 14%);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.teacher-class-overview-hero__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
  justify-items: stretch;
  margin-top: 0;
}

.teacher-class-overview-hero__metrics .teacher-class-overview-metric {
  width: 100%;
  max-width: 100%;
  min-height: 0;
}

.teacher-class-overview-hero__identity,
.teacher-class-overview-hero__metrics .teacher-class-overview-metric {
  min-height: 7.05rem;
}

.teacher-class-overview-hero__metrics .teacher-class-overview-metric:last-child {
  margin-bottom: 0;
}

.teacher-class-overview-metric {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  padding: 0.42rem 0.52rem 0.46rem;
  display: grid;
  gap: 0.32rem;
}

.teacher-class-overview-metric__label {
  margin: 0;
  font-size: 0.73rem;
  font-weight: 560;
  color: var(--nls-color-text-soft);
}

.teacher-class-overview-metric__head {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.5rem;
}

.teacher-class-overview-metric__meta-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}

.teacher-class-overview-metric__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.68rem;
}

.teacher-class-overview-metric__flat-wrap {
  min-width: 0;
  display: grid;
  gap: 0.3rem;
}

.teacher-class-overview-metric__value {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1;
  font-weight: 700;
  color: var(--nls-color-text);
  white-space: nowrap;
  text-align: right;
}

.teacher-class-overview-metric__count {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.1;
  color: var(--nls-color-text-soft);
}

.teacher-class-overview-metric__bar {
  display: block;
  height: 0.68rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nls-color-primary) 13%, #dce8fb 87%);
  overflow: hidden;
}

.teacher-class-overview-metric__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--nls-color-primary) 76%, #8ab2ff 24%);
}

.teacher-class-overview-metric__subcaption {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.1;
  color: var(--nls-color-text-soft);
  white-space: pre-line;
}

.teacher-class-overview-metric__ring-wrap {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 0.2rem;
}

.teacher-class-overview-metric__ring {
  --metric-ring-progress: 0%;
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #ffffff 52%, transparent 53%),
    conic-gradient(
      color-mix(in srgb, var(--nls-color-primary) 76%, #8ab2ff 24%)
        var(--metric-ring-progress),
      color-mix(in srgb, var(--nls-color-primary) 13%, #dce8fb 87%) 0
    );
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.teacher-class-overview-metric__ring-value {
  font-size: 0.76rem;
  font-weight: 720;
  color: var(--nls-color-text);
}

.teacher-class-view__tab-row .tabs {
  flex: 1 1 auto;
  min-width: 0;
}

.teacher-class-view__tab-row .tabs--segmented {
  border: 0;
  background: transparent;
  padding: 0;
}

.teacher-class-view__tab-row .tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.42rem;
  width: 100%;
  min-width: 0;
  overflow-x: visible;
  scrollbar-width: auto;
}

.teacher-class-view__tab-row .tabs--underline {
  border-bottom: 0;
}

.teacher-class-view__tab-row .tabs--segmented .tabs__list {
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.teacher-class-view__tab-row .tabs--segmented .tabs__item {
  border-radius: 8px;
}

.teacher-class-view .teacher-class-view__pane {
  margin-top: 0;
}

.class-reports-footer-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.65rem;
}

.class-reports-footer-actions .panel-message {
  flex: 1 1 auto;
  min-width: 0;
}

.class-reports-footer-actions__buttons {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.class-reports-form {
  gap: 0.36rem !important;
}

.class-reports-form .class-reports-form__detail > span,
.class-reports-form .panel-message {
  font-size: 0.76rem;
}

.class-reports-form .class-reports-form__select {
  font-size: 0.82rem;
  min-height: 2rem;
  line-height: 1.2;
}

.class-reports-form__checkbox {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.42rem !important;
  margin: 0 !important;
  width: 100%;
  text-align: left !important;
  font-size: 0.82rem !important;
  line-height: 1.2;
}

.class-reports-form__checkbox input[type="checkbox"] {
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.class-reports-form__checkbox span {
  display: inline !important;
  margin: 0 !important;
  text-align: left !important;
}

.class-reports-form__toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem 1rem;
}

.class-reports-form__toggles .class-reports-form__checkbox {
  width: auto;
  flex: 0 1 auto;
}

.classes-hub-class-row__panel .teacher-class-view__pane--overview {
  margin-top: 0 !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  .classes-hub-header-image {
    min-height: 88px;
  }

  .teacher-class-header-shell {
    margin-bottom: 0;
  }

  .teacher-class-overview-hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
    padding: 0.68rem 0.75rem 0.74rem;
    row-gap: 0.62rem;
  }

  .teacher-class-overview-hero__icon {
    width: 3.95rem;
    height: 3.95rem;
    min-width: 3.95rem;
    min-height: 3.95rem;
    max-width: 3.95rem;
    max-height: 3.95rem;
    flex-basis: 3.95rem;
  }

  .teacher-class-overview-hero__identity-main-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .teacher-class-overview-hero__comparison-row {
    margin-left: 0;
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .teacher-class-overview-hero__metrics {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    margin-top: 0;
    margin-left: 0;
  }

  .teacher-class-view__tab-row {
    flex-wrap: wrap;
    padding: 0.3rem 0.52rem 0.24rem;
    gap: 0.45rem;
    position: relative;
    align-items: flex-start;
  }

  .teacher-class-view__tab-row .tabs {
    width: 100%;
    flex: 1 1 100%;
    padding-right: 2.6rem;
  }

  .teacher-class-view__tab-row .tabs__list {
    overflow-x: visible;
    display: flex;
    flex-wrap: wrap;
    gap: 0.36rem;
    width: 100%;
    scrollbar-width: auto;
  }

  .teacher-class-view__tab-row .tabs__item {
    flex: 0 0 auto;
  }

  .teacher-class-view__tab-row .teacher-class-view__class-admin-action {
    position: absolute;
    top: 0.3rem;
    right: 0.52rem;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    border-radius: 999px;
    justify-content: center;
    gap: 0;
    z-index: 2;
  }

  .teacher-class-view__tab-row .teacher-class-view__class-admin-action .teacher-class-view__class-admin-label {
    display: none;
  }

  .class-reports-footer-actions {
    align-items: flex-end;
  }

  .class-reports-footer-actions__buttons {
    flex-wrap: wrap;
  }

  .class-reports-form__toggles .class-reports-form__checkbox {
    width: 100%;
    flex: 1 1 100%;
  }
}

@media (max-width: 640px) {
  .teacher-class-overview-hero__body {
    margin-top: 0;
    padding: 0.58rem 0.62rem 0.62rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.58rem;
  }

  .teacher-class-overview-hero__text {
    gap: 0.16rem;
  }

  .teacher-class-overview-hero__title {
    font-size: 1.02rem;
  }

  .teacher-class-overview-hero__meta {
    font-size: 0.78rem;
  }

  .teacher-class-overview-hero__metrics {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
  }

  .teacher-class-overview-metric__body {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
  }
}

.teacher-class-overview-metric__icon {
  display: none;
  width: 0;
  height: 0;
  align-items: center;
  justify-content: center;
  color: transparent;
  opacity: 0;
}

.teacher-class-overview-metric__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.teacher-class-view .teacher-class-info-line {
  margin: 0;
  color: var(--nls-color-text-muted);
  font-size: 0.87rem;
  line-height: 1.35;
}

.teacher-class-view .teacher-class-info-line .class-teacher-assignment-row__label {
  color: var(--nls-color-text);
  font-weight: 650;
  display: block;
}

.teacher-class-view .class-enrollment-policy-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.55rem;
}

.teacher-class-view .class-enrollment-policy-row .class-teacher-assignment-row__label {
  display: inline-flex;
  margin: 0;
}

.bulk-registration-enrollment-policy-row {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.bulk-registration-enrollment-policy-row .class-teacher-assignment-row__label {
  display: inline-flex;
  margin: 0;
  color: var(--nls-color-text);
  font-weight: 650;
}

.bulk-registration-enrollment-policy-row .class-enrollment-policy-options {
  flex-wrap: wrap;
  gap: 0.8rem;
}

.bulk-registration-enrollment-policy-row .class-enrollment-policy-options .admin2-tree-checkbox {
  align-items: center;
}

/* Keep checkbox controls from inheriting full-width text-input sizing rules. */
.bulk-registration-enrollment-policy-row input[type="checkbox"] {
  width: auto !important;
  max-width: none !important;
}

.class-enrollment-policy-options {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
}

.class-enrollment-policy-options .admin2-tree-checkbox {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  white-space: nowrap;
}

.class-enrollment-policy-options .admin2-tree-checkbox input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

.teacher-class-view .teacher-class-info-line--courses {
  color: var(--nls-color-text);
  font-weight: 500;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  row-gap: 0.18rem;
}

.teacher-class-info-line--courses {
  display: block;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.teacher-class-assigned-courses-block {
  display: block;
  width: 100%;
}

.teacher-class-info-line--courses > .class-teacher-assignment-row__label {
  display: block;
  width: 100%;
  margin-bottom: 0.14rem;
}

.teacher-class-info-line--courses > .teacher-class-assigned-courses-list {
  display: block;
  width: 100%;
}

.teacher-class-info-line--courses
  > .teacher-class-assigned-courses-list
  > .teacher-class-assigned-courses-item {
  width: 100%;
}

.teacher-class-assigned-courses-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.55rem;
  column-gap: 0;
  margin-top: 0.22rem;
  padding: 0;
}

.teacher-class-assigned-courses-item {
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.58rem;
  min-height: 3.35rem;
}

.teacher-class-assigned-courses-item--hidden .teacher-class-assigned-courses-item__cover {
  filter: grayscale(1);
  opacity: 0.58;
}

.teacher-class-assigned-courses-item__cover {
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 9px;
  object-fit: cover;
  display: block;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft, #d0d5dd) 82%, var(--nls-color-primary, #2f6fed) 18%);
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light, #eff6ff) 30%,
    var(--nls-color-surface, #ffffff) 70%
  );
}

.teacher-class-assigned-courses-item--hidden .teacher-class-assigned-courses-item__cover {
  filter: grayscale(1) saturate(0);
  opacity: 0.58;
}

.teacher-class-assigned-courses-item__cover--hidden {
  filter: grayscale(1) saturate(0);
  opacity: 0.58;
}

.teacher-class-assigned-courses-item__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.teacher-class-assigned-courses-item__title {
  margin: 0;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--nls-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teacher-class-assigned-courses-item--hidden .teacher-class-assigned-courses-item__title {
  color: var(--nls-color-text-muted, #667085);
}

.teacher-class-assigned-courses-item__title-row {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
}

.teacher-class-assigned-courses-item__hidden-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.2rem;
  padding: 0.06rem 0.42rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #d97706 52%, transparent);
  background: color-mix(in srgb, #fff7ed 88%, #ffffff 12%);
  color: color-mix(in srgb, #9a3412 88%, var(--nls-color-text) 12%);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.teacher-class-assigned-courses-item__visibility-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  width: fit-content;
  font-size: 0.72rem;
  color: var(--nls-color-text-muted, #475467);
}

.teacher-class-assigned-courses-item__visibility-toggle input[type="checkbox"] {
  margin: 0;
}

.teacher-class-assigned-courses-item__visibility-controls {
  display: grid;
  gap: 0.18rem;
  width: fit-content;
}

.teacher-class-assigned-courses-item__visibility-toggle.is-disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.teacher-class-assigned-courses-item__visibility-toggle.is-disabled input[type="checkbox"] {
  cursor: not-allowed;
}

.teacher-class-assigned-courses-item__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.teacher-class-assigned-courses-item__primary-action,
.teacher-class-assigned-courses-item__whiteboard-action {
  align-self: flex-start;
  width: fit-content;
  min-height: 1.8rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.74rem;
}

.teacher-class-assigned-courses-item__primary-action:not(:disabled) {
  background: #2f6fed !important;
  border-color: #2f6fed !important;
  color: #ffffff !important;
}

.teacher-class-assigned-courses-item__primary-action:not(:disabled):is(:hover, :focus-visible) {
  background: #2557c8 !important;
  border-color: #2557c8 !important;
  color: #ffffff !important;
}

.teacher-class-assigned-courses-item__primary-action:not(:disabled):active {
  background: #1f4aa8 !important;
  border-color: #1f4aa8 !important;
  color: #ffffff !important;
}

@media (max-width: 900px) {
  .teacher-class-overview-hero__metrics {
    width: 100%;
    min-width: 0;
  }

  .teacher-class-assigned-courses-item {
    grid-template-columns: 3.05rem minmax(0, 1fr);
    column-gap: 0.48rem;
    min-height: 3.05rem;
  }

  .teacher-class-assigned-courses-item__cover {
    width: 3.05rem;
    height: 3.05rem;
  }

  .teacher-class-assigned-courses-item__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 0.18rem;
  }

  .teacher-class-assigned-courses-item__title {
    flex: 0 0 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .teacher-class-assigned-courses-item__hidden-chip {
    flex: 0 1 auto;
  }

  .teacher-class-container {
    padding: 0.2rem 0.22rem 0.26rem;
  }

  .teacher-class-view .teacher-class-container {
    padding: 0.38rem 0.44rem 0.46rem;
  }

  .teacher-class-view .teacher-class-info {
    padding: 0.42rem 0.5rem;
  }

  .teacher-student-node__summary {
    padding: 0.38rem 0.42rem;
  }
}

.manage-group-archived-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
  padding: 0.45rem 0.58rem;
  border: 1px solid color-mix(in srgb, #d4a83a 52%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, #fff1a8 82%, #ffffff 18%);
  color: color-mix(in srgb, #6f5100 82%, var(--nls-color-text) 18%);
}

.manage-group-archived-banner--hard {
  border-color: color-mix(in srgb, #991b1b 48%, transparent);
  background: color-mix(in srgb, #fee2e2 80%, #ffffff 20%);
  color: color-mix(in srgb, #7f1d1d 84%, var(--nls-color-text) 16%);
}

.manage-group-archived-banner__icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  margin-top: 0.08rem;
  display: inline-flex;
}

.manage-group-archived-banner__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.manage-group-archived-banner__text {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  line-height: 1.2;
}

.manage-group-archived-banner__text strong {
  font-size: 0.76rem;
}

.manage-group-archived-banner__text span {
  font-size: 0.7rem;
}

.teacher-course-progress--student {
  margin-bottom: 0.35rem;
}

.teacher-course-progress__title {
  font-weight: 700;
  color: var(--nls-color-text);
}

.teacher-social-feed-hint {
  margin-bottom: 0.35rem;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.teacher-social-question-title-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  min-width: 0;
}

.teacher-social-course-label {
  font-size: 0.66rem;
  line-height: 1.15;
  color: var(--nls-color-text-soft);
  font-weight: 500;
}

.teacher-social-question-title {
  line-height: 1.22;
}

.teacher-course-progress--social-post .question-media-inline--audio-only {
  display: block;
  margin: 0;
}

.teacher-course-progress--social-post .question-media-inline__audio {
  display: block;
  margin: 0;
}

.teacher-course-progress--social-post .custom-audio-player.compact-audio-player--inline {
  margin: 0;
}

.teacher-course-progress--social-post {
  position: relative;
  gap: 0.08rem;
}

.teacher-course-progress--social-post .teacher-course-progress__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-right: 2.35rem;
}

.teacher-course-progress--social-post .teacher-course-progress__stats {
  margin-left: auto;
  white-space: nowrap;
  flex: 0 0 auto;
}

.teacher-course-progress--social-post.teacher-course-progress--social-post-dev
  .teacher-course-progress__title {
  padding-right: 4.7rem;
}

.teacher-social-post-dev-actions {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  z-index: 9999;
}

.teacher-social-post-dev-action {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nls-color-text-muted);
  background: var(--nls-color-surface-alt);
  cursor: pointer;
  line-height: 1;
  box-shadow: none;
  transition:
    color 120ms ease,
    border-color 120ms ease,
    background-color 120ms ease;
}

.teacher-social-post-dev-action:hover {
  border-color: color-mix(in srgb, var(--nls-color-primary) 40%, var(--nls-color-border-soft));
}

.teacher-social-post-dev-action--danger {
  color: #dc2626;
}

.teacher-social-post-dev-action--danger:hover {
  border-color: color-mix(in srgb, #dc2626 45%, var(--nls-color-border-soft));
}

.teacher-social-post-dev-action > svg {
  width: 0.88rem;
  height: 0.88rem;
  display: block;
  fill: currentColor;
}

.teacher-social-post-dev-action > svg path {
  fill: currentColor;
}

.teacher-social-post-dev-action--danger > svg,
.teacher-social-post-dev-action--danger > svg path {
  fill: currentColor;
}

.teacher-social-post-interactions {
  margin-top: 0.08rem;
  display: grid;
  gap: 0.2rem;
}

.teacher-social-post-interactions--with-audio {
  margin-top: 0.1rem;
}

.teacher-social-post-reactions-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.teacher-social-post-reaction-chip {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 999px;
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text);
  font-size: 0.72rem;
  padding: 0.08rem 0.42rem;
  cursor: pointer;
}

.teacher-social-post-reaction-chip.is-active {
  border-color: var(--nls-color-primary);
  background: color-mix(in srgb, var(--nls-color-primary) 14%, #fff 86%);
}

.teacher-social-post-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 999px;
  padding: 0.2rem 0.3rem;
  background: var(--nls-color-surface-alt);
  width: fit-content;
}

.teacher-social-post-reaction-picker-btn {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 999px;
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text);
  font-size: 0.9rem;
  width: 1.95rem;
  height: 1.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.teacher-social-post-reaction-picker-btn.is-active {
  border-color: var(--nls-color-primary);
  background: color-mix(in srgb, var(--nls-color-primary) 14%, #fff 86%);
}

.teacher-social-post-reactions--picker {
  display: none;
  position: absolute;
  right: 0.1rem;
  bottom: calc(100% + 0.34rem);
  z-index: 3;
  padding: 0.14rem 0.22rem;
  background: color-mix(in srgb, var(--nls-color-surface-alt) 90%, transparent);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
}

.teacher-social-post-reactions--picker.is-open {
  display: flex;
}

.teacher-social-post-replies {
  display: grid;
  gap: 0.24rem;
}

.teacher-social-post-reply {
  border-left: 2px solid var(--nls-color-border-soft);
  padding-left: 0.42rem;
}

.teacher-social-post-reply--pinned {
  border-left-color: var(--nls-color-primary);
}

.teacher-social-post-reply-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  font-size: 0.69rem;
  color: var(--nls-color-text-soft);
}

.teacher-social-post-reply-time {
  font-size: 0.66rem;
  color: var(--nls-color-text-subtle);
  white-space: nowrap;
}

.teacher-social-post-role-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 999px;
  font-size: 0.62rem;
  line-height: 1;
  padding: 0.12rem 0.34rem;
  white-space: nowrap;
  margin-left: 0.26rem;
}

.teacher-social-post-role-badge--teacher {
  background: color-mix(in srgb, #2563eb 10%, var(--nls-color-surface-alt) 90%);
  color: #1d4ed8;
}

.teacher-social-post-role-badge--admin {
  background: color-mix(in srgb, #7c3aed 12%, var(--nls-color-surface-alt) 88%);
  color: #6d28d9;
}

.teacher-social-post-reply-body {
  margin: 0;
  white-space: pre-wrap;
}

.teacher-social-post-reply-body-row {
  margin-top: 0.12rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.24rem;
}

.teacher-social-post-reply-actions {
  display: flex;
  gap: 0.22rem;
  flex-shrink: 0;
}

.teacher-social-post-icon-action {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 7px;
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.teacher-social-post-icon-action--danger {
  color: #dc2626;
}

.teacher-social-post-icon-action > svg {
  width: 0.88rem;
  height: 0.88rem;
  fill: currentColor;
}

.teacher-social-post-reply-composer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.16rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 12px;
  background: var(--nls-color-surface-alt);
  padding: 0.16rem 0.2rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.teacher-social-post-reply-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.1rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--nls-color-text);
  padding: 0 0.62rem;
  outline: none;
  line-height: 1.3;
}

.teacher-social-post-reply-composer:focus-within {
  border-color: color-mix(in srgb, var(--nls-color-primary) 65%, #cbd5e1 35%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nls-color-primary) 20%, transparent);
}

.teacher-social-post-quick-action {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 999px;
  background: var(--nls-color-surface);
  color: var(--nls-color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.teacher-social-post-quick-action.is-active {
  border-color: var(--nls-color-primary);
  background: color-mix(in srgb, var(--nls-color-primary) 12%, #fff 88%);
}

.teacher-social-post-quick-action > svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.teacher-course-progress__stats {
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
}

.teacher-review-modal__section {
  text-align: left;
}

.teacher-review-modal__section + .teacher-review-modal__section {
  margin-top: 0.35rem;
}

.teacher-review-modal__title {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.teacher-review-modal__section-title {
  display: block;
  margin: 0 0 0.3rem;
  color: var(--nls-color-text);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.32;
}

.teacher-review-modal__body {
  color: var(--nls-color-text);
  font-size: 0.9rem;
  line-height: 1.4;
}

.teacher-review-modal__meta {
  font-size: 0.82rem;
  line-height: 1.35;
}

.teacher-review-modal__score-line {
  color: var(--nls-color-text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.15rem;
}

.teacher-review-modal__teacher-name {
  color: var(--nls-color-text);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.3;
}

.teacher-review-modal__error {
  font-size: 0.9rem;
  line-height: 1.35;
}

.teacher-review-modal__learner-answer .asset-wrap {
  margin-top: 0.35rem !important;
}

.teacher-review-modal__learner-answer .asset-audio,
.teacher-review-modal__learner-answer .custom-audio-player.compact-audio-player--inline {
  margin-left: 0;
  margin-right: auto;
}

.teacher-review-modal__learner-answer .compact-audio-player__controls {
  justify-content: flex-start;
}

.teacher-review-modal__learner-answer .compact-audio-player__range {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  flex: 0 0 92px;
}

.teacher-review-modal__ai-feedback .panel-message,
.teacher-review-modal__ai-feedback div {
  margin: 0;
  color: var(--nls-color-text);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
}

.teacher-review-modal__ai-feedback strong {
  font-weight: 700;
}

.teacher-review-reason-field {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.teacher-review-reason-wrap {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface);
  padding: 0.45rem 0.5rem;
}

.teacher-review-reason-wrap > .writing-note__toolbar {
  margin-bottom: 0.35rem;
}

.teacher-review-reason-wrap .teacher-review-reason-editor {
  min-height: 5rem;
}

.teacher-course-progress__metrics {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.teacher-course-progress .progress-open-inline {
  justify-self: start;
}

.teacher-course-progress__expanded {
  margin-top: 0.15rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--nls-color-border-soft);
}

.teacher-course-progress__expanded .progress-player-detail__tree {
  margin: 0;
}

.teacher-course-progress__bar {
  width: 120px;
  height: 0.44rem;
  border-radius: 999px;
  background: var(--nls-color-border-soft);
  overflow: hidden;
}

.teacher-course-progress__bar-fill {
  display: block;
  height: 100%;
  background: var(--nls-color-primary);
}

.teacher-activity-list {
  display: grid;
  gap: 0.28rem;
}

.teacher-activity-row {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface-alt);
  padding: 0.35rem 0.45rem;
  display: flex;
  justify-content: space-between;
  gap: 0.45rem;
}

.teacher-activity-row__id {
  overflow-wrap: anywhere;
  color: var(--nls-color-text);
}

.teacher-activity-row__score {
  color: var(--nls-color-text-muted);
  white-space: nowrap;
}

.design-sources-toggle {
  margin-top: 0.25rem;
}

.design-sources-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}

.design-sources-copy-all {
  white-space: nowrap;
  flex: 0 0 auto;
}

.design-sources {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.design-sources[hidden] {
  display: none !important;
}

.design-sources__section {
  border: 1px solid var(--nls-color-border);
  border-radius: 10px;
  overflow: hidden;
}

.design-sources__heading {
  background: var(--nls-color-surface-muted);
  color: var(--nls-color-text);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
}

.design-sources__row {
  padding: 0.35rem 0.6rem;
  background: var(--nls-color-surface);
  border-top: 1px solid var(--nls-color-border-soft);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.design-sources__text {
  flex: 1;
}

.design-sources__copy {
  appearance: none;
  border: 1px solid var(--nls-color-border);
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text-muted);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.62rem;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
}

.design-sources__copy:hover {
  border-color: var(--nls-color-primary-border-strong);
  color: var(--nls-color-text);
}

#auth-message {
  color: var(--nls-color-text);
}

#auth-message.is-error,
.courses-hub-status.is-error {
  color: var(--nls-color-danger-strong);
}

.progress-dashboard {
  margin-top: 0;
}

.courses-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.courses-add-button {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  gap: 0.42rem;
  min-height: 2rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--nls-color-surface, #ffffff);
  border-color: var(--nls-color-primary-border-strong);
  border-style: solid;
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  background: var(--nls-color-primary, #2563eb);
}

.courses-add-button:hover {
  border-color: var(--nls-color-primary-alt, #1d4ed8);
  color: var(--nls-color-surface, #ffffff);
  background: var(--nls-color-primary-alt, #1d4ed8);
}

.courses-add-button__icon {
  width: 0.9rem;
  height: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.courses-add-button .courses-add-button__icon {
  order: -1;
  margin-left: 0;
  margin-right: 0.35rem;
}

.courses-add-button__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.dev-section-subtitle {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--nls-color-text);
}

.progress-courses-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.progress-history-button {
  width: fit-content;
  max-width: 100%;
  margin-top: 0.55rem;
}

.progress-history-button[hidden] {
  display: none !important;
}

.progress-history-button .courses-add-button__icon {
  order: -1;
}

.course-actions--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.courses-player-view {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.courses-catalog-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.courses-catalog-section {
  display: grid;
  gap: 0.45rem;
}

.courses-catalog-section-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--nls-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.courses-catalog-section-list {
  display: grid;
  gap: 0.5rem;
}

.courses-my-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.courses-my-row .progress-chip {
  flex-shrink: 0;
}

.courses-my-course-button {
  flex: 1;
}

.courses-my-resume-btn {
  min-width: 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
}

.courses-my-resume-btn svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.courses-catalog-item {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-alt);
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  align-items: stretch;
  gap: 0.45rem;
}

.courses-catalog-media-column {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 100%;
}

.courses-catalog-head {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: #ffffff;
  padding: 0.6rem 0.75rem;
}

.courses-catalog-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nls-color-text);
}

.courses-catalog-media {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--nls-color-border-soft);
  background: color-mix(in srgb, var(--nls-color-surface) 88%, #fff 12%);
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.courses-catalog-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: #ffffff;
  padding: 0.25rem;
}

.courses-catalog-item > .courses-catalog-pushdown {
  grid-column: 1 / -1;
}

.courses-catalog-media-column > .course-actions {
  margin-top: auto;
}

.courses-catalog-kicker {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nls-color-primary, #1d4ed8);
}

.courses-draft-meta {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
}

.courses-catalog-pushdown {
  margin-top: 0.45rem;
  border: 1px dashed var(--nls-color-border-soft);
  border-radius: 8px;
  padding: 0.5rem;
  background: var(--nls-color-surface);
}

.courses-catalog-pushdown[hidden] {
  display: none !important;
}

.courses-catalog-pushdown--purchase {
  padding: 0.55rem;
}

.courses-payment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

.courses-payment-tile {
  min-height: 124px;
  border-radius: 10px;
  border: 1px solid var(--nls-color-border-soft);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nls-color-surface) 80%, #fff 20%),
    var(--nls-color-surface-alt)
  );
  padding: 0.5rem;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  opacity: 0.96;
  filter: none;
  position: relative;
  overflow: hidden;
}

.courses-payment-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  pointer-events: none;
}

.courses-payment-tile__brand {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--nls-color-text);
}

.courses-payment-tile__logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.courses-payment-tile__logo {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 54px;
  object-fit: contain;
  border-radius: 10px;
  background: #ffffff;
}

.courses-payment-tile__flag {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-height: 32px;
  object-fit: contain;
}

.courses-payment-tile--qris .courses-payment-tile__logo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: center;
  column-gap: 0.45rem;
}

.courses-payment-tile--qris .courses-payment-tile__flag {
  height: 54px;
  max-height: 54px;
  max-width: 82px;
  justify-self: center;
  align-self: center;
}

.courses-payment-tile__sub {
  font-size: 0.7rem;
  color: var(--nls-color-text-muted);
  margin-bottom: 0.1rem;
}

.courses-payment-tile__meta {
  font-size: 0.62rem;
  line-height: 1.2;
  color: var(--nls-color-text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.courses-payment-tile--gpay {
  border-color: color-mix(in srgb, #5f6368 28%, var(--nls-color-border-soft));
}

.courses-payment-tile--card {
  border-color: color-mix(in srgb, #1a73e8 22%, var(--nls-color-border-soft));
}

.courses-payment-tile--paypal {
  border-color: color-mix(in srgb, #003087 22%, var(--nls-color-border-soft));
}

.courses-payment-tile--qris {
  border-color: color-mix(in srgb, #00a86b 28%, var(--nls-color-border-soft));
}

.courses-payment-tile--unavailable {
  opacity: 0.78;
}

.courses-payment-tile--unavailable .course-action {
  opacity: 0.9;
  cursor: not-allowed;
}

.courses-payment-tile--unavailable::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(243, 244, 246, 0.42);
  pointer-events: none;
  z-index: 1;
}

.courses-payment-tile--unavailable > * {
  position: relative;
  z-index: 2;
}

.courses-payment-tile__watermark {
  position: absolute;
  left: -32px;
  right: -32px;
  top: 50%;
  transform: translateY(-50%) rotate(-18deg);
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, #111827 72%, transparent);
  background: color-mix(in srgb, #f3f4f6 85%, transparent);
  border-top: 1px dashed color-mix(in srgb, #111827 35%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, #111827 35%, transparent);
  padding: 0.18rem 0;
  pointer-events: none;
  z-index: 4;
}

.courses-payment-tile .course-action {
  width: 100%;
  justify-content: center;
}

.courses-payment-tile__qr {
  display: grid;
  gap: 0.35rem;
  align-items: start;
}

.courses-payment-tile__qr-code {
  width: 100%;
  aspect-ratio: 1;
  max-width: 96px;
  border-radius: 8px;
  border: 1px solid
    color-mix(in srgb, #111827 18%, var(--nls-color-border-soft));
  background:
    linear-gradient(
      90deg,
      #111827 0 12%,
      transparent 12% 18%,
      #111827 18% 30%,
      transparent 30% 36%,
      #111827 36% 52%,
      transparent 52% 58%,
      #111827 58% 70%,
      transparent 70% 76%,
      #111827 76% 100%
    ),
    linear-gradient(
      #111827 0 12%,
      transparent 12% 18%,
      #111827 18% 30%,
      transparent 30% 36%,
      #111827 36% 52%,
      transparent 52% 58%,
      #111827 58% 70%,
      transparent 70% 76%,
      #111827 76% 100%
    ),
    linear-gradient(135deg, rgba(0, 168, 107, 0.08), rgba(17, 24, 39, 0.03));
  background-size:
    18px 18px,
    18px 18px,
    auto;
  background-position:
    0 0,
    0 0,
    center;
  background-color: #ffffff;
  box-shadow: inset 0 0 0 6px #ffffff;
}

.courses-payment-tile__qr-label {
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--nls-color-text-soft);
}

.course-action.is-active {
  border-color: var(--nls-color-border-strong, #94a3b8);
  background: color-mix(
    in srgb,
    var(--nls-color-surface-alt, #f8fafc) 78%,
    var(--nls-color-surface, #ffffff)
  );
  color: var(--nls-color-text, #0f172a);
  font-weight: 600;
  box-shadow:
    inset 0 0 0 1px var(--nls-color-border-strong, #94a3b8),
    0 1px 0 rgba(0, 0, 0, 0.03);
}

.courses-hub-inline-actions .course-action.is-active {
  background: color-mix(
    in srgb,
    var(--nls-color-surface-alt, #f8fafc) 82%,
    var(--nls-color-surface, #ffffff)
  );
}

@media (max-width: 560px) {
  .courses-catalog-item {
    grid-template-columns: 1fr;
  }

  .courses-catalog-media-column > .course-actions {
    margin-top: 0;
  }

  .courses-catalog-media__image {
    height: 100%;
    max-height: none;
  }

  .courses-payment-grid {
    grid-template-columns: 1fr;
  }
}

.course-action--muted {
  color: var(--nls-color-text-muted);
  border-color: var(--nls-color-border-soft);
}

.courses-info-html,
.courses-info-lead,
.courses-info-bullets,
.courses-info-images {
  margin: 0;
}

.courses-info-html {
  color: var(--nls-color-text);
}

.courses-info-html img,
.courses-info-images img {
  max-width: 100%;
  border-radius: 8px;
  display: block;
}

.courses-info-bullets {
  padding-left: 1.2rem;
  color: var(--nls-color-text);
}

.courses-info-images {
  display: grid;
  gap: 0.5rem;
}

.courses-player-back {
  display: flex;
  width: fit-content;
  align-self: flex-start;
  margin-left: 0 !important;
  margin-right: auto;
  margin-top: 0.3rem;
}

.courses-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.courses-progress-label {
  font-size: 0.82rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
}

.courses-progress-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.courses-progress-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--nls-color-border);
  background: var(--nls-color-surface-alt);
}

.courses-progress-dot.is-filled {
  border-color: var(--nls-color-primary-border-strong, #1d4ed8);
  background: var(--nls-color-primary, #1d4ed8);
}

.course-action:disabled {
  opacity: 1;
  color: var(--nls-color-text-muted);
  border-color: var(--nls-color-border-soft);
  background: var(--nls-color-surface-muted, var(--nls-color-surface-alt));
  cursor: not-allowed;
}

.course-action[hidden] {
  display: none !important;
}

.progress-devtools-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem;
}

.progress-devtools-stack[hidden] {
  display: none !important;
}

.progress-devtools-stack.account-profile-scores-panel__mount {
  display: block !important;
}

.progress-devtools-grid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
}

.admin-manage-user-filter-row {
  margin: 0;
  align-items: flex-end;
}

.admin-manage-user-filter-row .progress-field {
  flex: 1 1 10rem;
  min-width: 9rem;
}

.progress-devtools-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.progress-devtools-actions button {
  width: 100%;
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  border-radius: 7px;
  border-width: 1px;
  white-space: nowrap;
}

.classes-manage-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.classes-manage-toolbar > .secondary {
  flex: 0 0 auto;
  width: auto;
}

.classes-manage-toolbar__search {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1 1 280px;
  min-width: 220px;
}

.flush-tools-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dev-hard-archive-inline {
  margin-top: 1.25rem;
}

.dev-hard-archive-panel .dev-hard-archive-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dev-hard-archive-output {
  margin-top: 0.75rem;
  max-height: 14rem;
  overflow: auto;
  font-size: 0.75rem;
}

.dev-hard-archive-revert {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.bulk-row-tools-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
}

.bulk-row-tools-inline .progress-inline-input {
  width: 5.5rem;
  flex: 0 0 5.5rem;
}

.bulk-row-tools-inline button {
  width: auto;
  flex: 0 0 auto;
}

.add-users-csv-tools .add-users-csv-tools__field {
  min-width: 30ch;
  width: 30ch;
  flex: 0 0 30ch;
}

.admin-bulk-registration-view .progress-field.account-editor-grid__full {
  width: 100%;
  max-width: 100%;
}

.admin-bulk-registration-view .add-users-csv-tools {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

.admin-bulk-scope-pill-row {
  margin: 0.2rem 0 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.admin-bulk-scope-pill {
  display: inline-flex;
  align-items: center;
}

.admin-bulk-scope-pill-copy {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--nls-color-text-soft);
}

.admin-bulk-scope-pill-copy--hint {
  font-weight: 500;
}

.admin-bulk-notes {
  margin-top: 0.25rem;
}

.admin-bulk-notes__heading {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--nls-color-text-soft);
}

.admin-bulk-notes__list {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.2rem;
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
}

.add-users-receipt-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.add-users-receipt-label-note {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--nls-color-warning, #c48f00);
  background: var(--nls-color-warning-bg, rgba(196, 143, 0, 0.12));
  color: var(--nls-color-warning-text, #8a6500);
  border-radius: 999px;
  padding: 0.12rem 0.52rem;
  font-size: 0.74rem;
  font-weight: 600;
}

.add-users-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.add-users-table-scroll-content {
  display: inline-block;
  min-width: max-content;
  padding-right: 14rem;
  box-sizing: content-box;
}

.add-users-table {
  display: table;
  width: max-content !important;
  min-width: 100% !important;
  max-width: none;
  table-layout: auto;
}

.add-users-table th,
.add-users-table td {
  white-space: nowrap;
  vertical-align: middle;
}

.add-users-table td input[data-key="identifier"] {
  min-width: 13rem;
}

.add-users-table td input[data-key="password"] {
  min-width: 8rem;
}

.add-users-table td input[data-key="firstName"] {
  min-width: 8.5rem;
}

.add-users-table td input[data-key="lastName"] {
  min-width: 8.5rem;
}

.add-users-table td select[data-key="role"] {
  width: 6.75rem;
  min-width: 6.75rem;
}

.add-users-table td input[data-key="className"] {
  min-width: 16rem;
}

.add-users-table tbody tr.add-users-row--warning td {
  background: var(--nls-color-warning-bg, rgba(196, 143, 0, 0.16));
}

.add-users-table tbody tr.add-users-row--error td {
  background: color-mix(in srgb, #e53935 10%, transparent);
}

.add-users-table tbody tr.add-users-row--focus td {
  outline: 1px solid color-mix(in srgb, var(--nls-color-primary, #3b82f6) 75%, white 25%);
  outline-offset: -1px;
}

.add-users-field-warning {
  border-color: var(--nls-color-warning, #c48f00) !important;
  background: var(--nls-color-warning-bg, rgba(196, 143, 0, 0.12));
}

.add-users-field-error {
  border-color: #d93025 !important;
  background: color-mix(in srgb, #d93025 12%, transparent);
}

.bulk-row-index-cell--error {
  color: #d93025;
  font-weight: 700;
}

.bulk-row-index-cell--warning {
  color: var(--nls-color-warning-text, #8a6500);
  font-weight: 700;
}

.add-users-validation-list {
  margin-top: 0.35rem;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.5rem;
}

.add-users-validation-list--error {
  border-color: color-mix(in srgb, #d93025 45%, transparent);
  background: color-mix(in srgb, #d93025 10%, transparent);
}

.add-users-validation-list--warning {
  border-color: var(--nls-color-warning, #c48f00);
  background: var(--nls-color-warning-bg, rgba(196, 143, 0, 0.14));
}

.add-users-validation-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.add-users-validation-list__item {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  background: transparent;
  cursor: pointer;
}

.add-users-validation-list__item--error {
  border-color: color-mix(in srgb, #d93025 40%, transparent);
  background: color-mix(in srgb, #d93025 8%, transparent);
  color: color-mix(in srgb, #8b1a12 84%, black 16%);
}

.add-users-validation-list__item--warning {
  border-color: var(--nls-color-warning, #c48f00);
  background: var(--nls-color-warning-bg, rgba(196, 143, 0, 0.12));
  color: var(--nls-color-warning-text, #8a6500);
}

.add-users-validation-list__badge {
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.08);
}

@media (max-width: 900px) {
  .admin-bulk-registration-view .add-users-csv-tools .course-action {
    flex: 1 1 calc(50% - 0.45rem);
  }

  .add-users-csv-tools {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  .add-users-csv-tools .add-users-csv-tools__field {
    min-width: 100%;
    width: 100%;
    flex: 1 1 100%;
  }

  .add-users-table-scroll-content {
    padding-right: 30rem;
  }

  .add-users-table th:last-child,
  .add-users-table td:last-child {
    padding-right: 10rem;
  }
}

.bulk-row-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c0392b;
  cursor: pointer;
}

.bulk-row-delete-btn:hover {
  color: #962d22;
}

.bulk-row-delete-btn:active {
  color: #7c241b;
}

.bulk-row-delete-btn .course-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}

.bulk-row-delete-btn .course-action__icon svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.bulk-row-delete-cell {
  text-align: center;
  vertical-align: middle;
  width: 2.2rem;
}

.teacher-progress-table tbody tr:only-child .bulk-row-delete-btn {
  display: none !important;
}

.progress-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.35rem;
}

.progress-field span {
  font-size: 0.8rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
  min-width: 0;
  line-height: 1.2;
}

.progress-field--readonly-pill {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.progress-field .admin-bulk-mode-pill {
  font-size: 0.74rem;
}

.progress-field input,
.progress-field select {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  min-width: 0;
}

.progress-course-card.add-users-card--warning {
  border-color: var(--nls-color-warning, #c48f00);
  box-shadow: 0 0 0 1px var(--nls-color-warning, #c48f00) inset;
}

.create-class-course-list {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  padding: 0.45rem;
  max-height: none;
  overflow: visible;
  display: grid;
  gap: 0.35rem;
  background: var(--nls-color-surface-alt);
}

.create-class-course-group-title {
  margin: 0.2rem 0 0.05rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--nls-color-text-soft);
}

.create-class-course-group-title:first-child {
  margin-top: 0;
}

.create-class-course-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.create-class-course-group-header .create-class-course-group-title {
  margin: 0;
}

.create-class-course-group-toggle {
  margin: 0;
  white-space: nowrap;
}

.create-class-course-group-toggle--master {
  justify-self: end;
}

.create-class-course-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--nls-color-text-soft);
  text-align: left;
}

.create-class-course-option input[type="checkbox"] {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.create-class-course-option span {
  display: inline !important;
  line-height: 1.35;
}

.progress-maintenance {
  margin-top: 0.25rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--nls-color-border-soft);
}

.progress-maintenance-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.progress-maintenance-actions button {
  width: 100%;
  border-radius: 7px;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 0.2rem 0.45rem;
  border-width: 1px;
}

.domain-mapping-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.domain-mapping-toolbar button {
  width: 100%;
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  border-radius: 7px;
  border-width: 1px;
}

.domain-mapping-results {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  padding: 0.5rem;
  background: var(--nls-color-surface-alt);
  display: grid;
  gap: 0.5rem;
}

.domain-mapping-results__summary {
  display: grid;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--nls-color-text-soft);
}

.domain-mapping-history h4 {
  margin: 0;
  font-size: 0.78rem;
  color: var(--nls-color-text-soft);
}

.domain-mapping-history ul {
  margin: 0.35rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--nls-color-text-soft);
}

.progress-toggle {
  margin-top: 0.35rem;
}

.progress-toggle span {
  font-size: 0.84rem;
  line-height: 1.2;
}

@media (max-width: 520px) {
  .progress-devtools-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-devtools-actions button:nth-child(3) {
    grid-column: 1 / -1;
  }

  .progress-maintenance-actions {
    grid-template-columns: 1fr;
  }
}

.progress-course-card {
  border: 1px solid var(--nls-color-primary-border-strong);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 82%,
    var(--nls-color-surface) 18%
  );
  padding: 0.28rem 0.62rem;
}

.progress-course-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--nls-color-primary-ink);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  cursor: pointer;
  padding: 0;
  min-height: 1.25rem;
  font-size: 0.76rem;
  line-height: 1.15;
}

.progress-course-button:is(:hover, :focus-visible) .progress-course-title {
  color: var(--nls-color-primary-strong);
  text-decoration: none;
}

.progress-course-title {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.progress-course-meta {
  font-size: 0.75rem;
  color: var(--nls-color-text-muted);
}

.progress-course-stats {
  font-size: 0.72rem;
  color: var(--nls-color-text-soft);
}

.progress-node {
  border: 1px solid var(--nls-color-border);
  border-radius: 10px;
  background: var(--nls-color-surface);
  margin-top: 0;
  padding: 0.4rem 0.55rem;
}

.progress-player-detail__tree .progress-node[data-depth="0"] {
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 18%,
    var(--nls-color-surface) 82%
  );
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--nls-color-border-soft);
}

.progress-player-detail__tree > .progress-node[data-depth="0"]:first-child {
  border-top: 1px solid var(--nls-color-border-soft);
}

.progress-player-detail__tree .progress-node[data-depth="1"] {
  background: color-mix(in srgb, #eef6ff 45%, var(--nls-color-surface) 55%);
}

.progress-player-detail__tree .progress-node[data-depth="2"] {
  background: color-mix(in srgb, #eef8f1 38%, var(--nls-color-surface) 62%);
}

.progress-player-detail__tree .progress-node[data-depth="3"],
.progress-player-detail__tree .progress-node[data-depth="4"] {
  background: color-mix(in srgb, #fff8ec 35%, var(--nls-color-surface) 65%);
}

.progress-node--expandable {
  padding: 0;
  overflow: hidden;
}

.progress-node__details.menu-expandable-item {
  border: none;
  border-radius: inherit;
  background: transparent;
  padding: 0;
  overflow: visible;
}

.progress-node__summary {
  cursor: pointer;
  list-style: none;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 0.4rem 0.55rem 0.4rem 1.28rem;
  position: relative;
}

.progress-node__summary::-webkit-details-marker {
  display: none;
}

.progress-node__summary::before {
  content: "▸";
  position: absolute;
  left: 0.48rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: color-mix(
    in srgb,
    var(--nls-color-primary-strong) 65%,
    var(--nls-color-text) 35%
  );
  text-shadow: 0 0 0.01px currentColor;
  transition: color 140ms ease;
}

.progress-node__details[open] > .progress-node__summary {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.progress-node__details[open] > .progress-node__summary::before {
  content: "▾";
  color: var(--nls-color-primary-strong);
}

@media (max-width: 900px) {
  .progress-node__summary::before {
    font-size: 1.08rem;
    left: 0.44rem;
  }
}

.progress-node__panel.menu-expandable-panel {
  margin-top: 0;
  border: 0;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 0.12rem 0 0 0.7rem;
  background: transparent;
  position: relative;
}

.progress-node__panel.menu-expandable-panel::before {
  display: none;
}

.progress-node__panel.menu-expandable-panel > .progress-node:first-child {
  margin-top: 0;
}

.progress-node__panel.menu-expandable-panel > .progress-node {
  position: relative;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
}

.progress-node__panel.menu-expandable-panel > .progress-node::before {
  content: "";
  position: absolute;
  left: -0.48rem;
  top: -0.12rem;
  bottom: -0.12rem;
  border-left: 1px solid color-mix(in srgb, var(--nls-color-border-soft) 88%, var(--nls-color-primary) 12%);
  opacity: 0.95;
}

.progress-node__panel.menu-expandable-panel > .progress-node::after {
  content: "";
  position: absolute;
  left: -0.48rem;
  top: 0.98rem;
  width: 0.42rem;
  border-top: 1px solid color-mix(in srgb, var(--nls-color-border-soft) 88%, var(--nls-color-primary) 12%);
  opacity: 0.95;
}

.progress-node__panel.menu-expandable-panel > .progress-node:last-child::before {
  bottom: calc(50% - 0.02rem);
}

/* Start the page connector a little below the chevron for cleaner hierarchy. */
.progress-node--kind-activity
  > .progress-node__details[open]
  > .progress-node__panel.menu-expandable-panel
  > .progress-node::before {
  top: 0.18rem;
}

.progress-node__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

.progress-node__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex: 0 0 auto;
  align-self: flex-start;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}

.progress-attempt-timeline-btn {
  width: 1.42rem;
  height: 1.42rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--nls-color-border-soft) 82%, var(--nls-color-primary) 18%);
  background: color-mix(in srgb, var(--nls-color-surface) 92%, var(--nls-color-primary-bg-light) 8%);
  color: var(--nls-color-text-soft, #64748b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.progress-attempt-timeline-btn:is(:hover, :focus-visible),
.progress-attempt-timeline-btn.is-active {
  border-color: var(--nls-color-primary-border-strong);
  color: var(--nls-color-primary-strong);
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 65%,
    var(--nls-color-surface) 35%
  );
}

.progress-attempt-timeline-btn:disabled {
  opacity: 0.45;
  cursor: default;
  border-color: color-mix(in srgb, var(--nls-color-border-soft) 92%, #d1d5db 8%);
  color: var(--nls-color-text-soft, #94a3b8);
  background: color-mix(in srgb, var(--nls-color-surface-alt) 86%, #f8fafc 14%);
}

.progress-attempt-timeline-btn__icon {
  width: 0.82rem;
  height: 0.82rem;
  display: inline-flex;
}

.progress-attempt-timeline-btn__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.progress-hidden-score-reveal {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.progress-hidden-score-reveal__value {
  display: inline-flex;
  align-items: center;
  min-height: 1.32rem;
  border: 1px solid color-mix(in srgb, var(--nls-color-primary, #2563eb) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nls-color-primary-bg-light, #dbeafe) 62%, #ffffff);
  color: var(--nls-color-primary-strong, #1d4ed8);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.1rem 0.44rem;
  white-space: nowrap;
}

.progress-attempt-timeline-popover {
  margin: 0.25rem 0 0 0.72rem;
  width: min(430px, calc(100vw - 2.4rem));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--nls-color-text, #0f172a);
}

.progress-attempt-timeline-popover__context {
  margin: 0;
  font-size: 0.67rem;
  line-height: 1.25;
  color: var(--nls-color-text-soft, #667085);
}

.progress-attempt-timeline-popover__heading {
  margin: 0.3rem 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--nls-color-text, #0f172a);
}

.progress-attempt-timeline-popover__list {
  margin: 0.34rem 0 0;
  padding-left: 0;
  display: grid;
  gap: 0.2rem;
  font-size: 0.71rem;
  list-style: none;
}

.progress-attempt-timeline-popover__line {
  display: inline;
}

.progress-attempt-timeline-popover__toggle {
  appearance: none;
  border: 1px solid var(--nls-color-border, #d0d5dd);
  border-radius: 999px;
  background: var(--nls-color-surface, #ffffff);
  color: var(--nls-color-text, #0f172a);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  min-width: 1.1rem;
  min-height: 1.1rem;
  padding: 0 0.24rem;
  cursor: pointer;
}

.progress-attempt-timeline-popover__best-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--nls-color-success, #16a34a) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nls-color-success, #16a34a) 10%, #ffffff);
  color: var(--nls-color-success, #15803d);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.1rem 0.48rem;
  white-space: nowrap;
}

.progress-attempt-timeline-popover__breakdown {
  margin: 0.16rem 0 0.16rem 0.2rem;
  padding-left: 1.05rem;
  display: grid;
  gap: 0.12rem;
  font-weight: 400;
}

.progress-attempt-timeline-popover__breakdown[hidden] {
  display: none;
}

.progress-attempt-timeline-popover__state {
  margin: 0.36rem 0 0;
  font-size: 0.72rem;
}

.progress-attempt-timeline-popover__state.is-error {
  color: var(--nls-color-danger, #b42318);
}

.progress-node__label .progress-attempt-timeline-btn {
  margin-left: 0.3rem;
  transform: translateY(-0.02rem);
}

@media (max-width: 900px) {
  .teacher-class-view__pane--scores
    .progress-attempt-timeline-btn.progress-attempt-timeline-btn--stats-inline {
    margin-left: 0;
    transform: none;
  }
}

.progress-node__stats {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  align-self: flex-start;
  min-width: 0;
}

.progress-open-inline {
  border: 1px solid var(--nls-color-border-soft);
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text);
  border-radius: 999px;
  padding: 0.08rem 0.52rem;
  font-size: 0.68rem;
  cursor: pointer;
}

.progress-open-inline:is(:hover, :focus-visible) {
  border-color: var(--nls-color-primary-border-strong);
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 72%,
    var(--nls-color-surface) 28%
  );
}

.progress-schedule-status-pill--mobile {
  display: none;
}

.progress-node__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.45rem;
  row-gap: 0.2rem;
  flex: 1 1 auto;
  min-width: 0;
}

.progress-node__kind {
  display: none;
}


.progress-node__label {
  font-size: 1rem;
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.34rem;
  flex-wrap: wrap;
  font-weight: 600;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.progress-node__label-text {
  display: inline;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.progress-node__grade-controls {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 0.06em;
}

.progress-node__grade-shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
}

.progress-player-detail__tree > .progress-node + .progress-node {
  margin-top: 0;
}

.progress-node__panel.menu-expandable-panel > .progress-node + .progress-node {
  margin-top: 0;
  border-top: 1px solid var(--nls-color-border-soft);
}

.progress-node:not(.progress-node--expandable) .progress-node__title {
  padding-left: 0.73rem;
}

.progress-node__main .progress-open-inline {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

@media (min-width: 901px) {
  .progress-node__main {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    flex-wrap: wrap;
  }

  .progress-node__main .progress-open-inline {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    margin-left: 0;
  }

  .progress-attempt-timeline-popover {
    margin-left: 1.1rem;
  }
}

.progress-node__bar-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.progress-node__bar-label {
  font-size: 0.68rem;
  color: var(--nls-color-text-muted);
}

.progress-node__bar {
  width: 110px;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--nls-color-border-soft);
  overflow: hidden;
}

.teacher-class-view__pane--scores .progress-node__bar {
  width: 55px;
}

.progress-node__bar-fill {
  display: block;
  height: 100%;
  background: var(--nls-color-primary, #1d4ed8);
}

.progress-node__bar-text {
  font-size: 0.68rem;
  color: var(--nls-color-text-muted);
}

.progress-node__attempt-meta {
  font-size: 0.66rem;
}

.progress-hidden-score-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  border: 1px solid color-mix(in srgb, #f59e0b 58%, var(--nls-color-border-soft) 42%);
  border-radius: 999px;
  background: color-mix(in srgb, #fef3c7 72%, var(--nls-color-surface) 28%);
  color: #b45309;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.18rem 0.42rem;
  white-space: nowrap;
  cursor: pointer;
}

.progress-hidden-score-chip--teacher-only {
  border-color: color-mix(in srgb, #dc2626 58%, var(--nls-color-border-soft) 42%);
  background: color-mix(in srgb, #fee2e2 72%, var(--nls-color-surface) 28%);
  color: #b91c1c;
}

.progress-hidden-score-chip:hover,
.progress-hidden-score-chip:focus-visible {
  border-color: #f59e0b;
  background: color-mix(in srgb, #fde68a 76%, var(--nls-color-surface) 24%);
  outline: none;
}

.progress-hidden-score-chip--teacher-only:hover,
.progress-hidden-score-chip--teacher-only:focus-visible {
  border-color: #dc2626;
  background: color-mix(in srgb, #fecaca 76%, var(--nls-color-surface) 24%);
}

.progress-hidden-score-chip:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 24%, transparent);
}

.progress-hidden-score-chip--teacher-only:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, #dc2626 22%, transparent);
}

.progress-hidden-score-chip__icon {
  display: inline-flex;
  width: 0.82rem;
  height: 0.82rem;
  color: currentColor;
}

.progress-hidden-score-chip__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.progress-node__metrics {
  font-size: 0.72rem;
  color: var(--nls-color-text-soft);
  white-space: nowrap;
}

.progress-node__meta {
  margin-top: 0.2rem;
  font-size: 0.74rem;
  color: var(--nls-color-text-muted);
}

.progress-score-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  border: 1px solid color-mix(in srgb, var(--nls-color-primary) 50%, var(--nls-color-border-soft) 50%);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  font-size: 0.68rem;
  color: var(--nls-color-primary-strong);
  background: color-mix(in srgb, var(--nls-color-primary-bg-light) 32%, var(--nls-color-surface) 68%);
  white-space: nowrap;
  box-sizing: border-box;
  width: 3.85rem;
  min-height: 1.35rem;
  justify-content: center;
  font-weight: 500;
}

.progress-score-chip__icon {
  display: inline-flex;
  width: 0.72rem;
  height: 0.72rem;
  color: currentColor;
}

.progress-score-chip__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.progress-score-chip--in-progress {
  border-color: color-mix(in srgb, #2f6fed 52%, var(--nls-color-border-soft) 48%);
  color: #2f6fed;
  background: color-mix(in srgb, #dbeafe 56%, var(--nls-color-surface) 44%);
}

.progress-score-chip--completed {
  border-color: color-mix(in srgb, #12b76a 52%, var(--nls-color-border-soft) 48%);
  color: #12b76a;
  background: color-mix(in srgb, #dcfce7 58%, var(--nls-color-surface) 42%);
}

.progress-score-chip--attempt-muted {
  border-color: var(--nls-color-border-soft, #cbd5e1);
  color: var(--nls-color-text-muted, #64748b);
  background: color-mix(in srgb, var(--nls-color-surface-alt, #f8fafc) 84%, #ffffff 16%);
}

.progress-score-chip--empty {
  border-color: var(--nls-color-border-soft, #cbd5e1);
  color: var(--nls-color-text-subtle, #94a3b8);
  background: color-mix(in srgb, var(--nls-color-surface-alt, #f8fafc) 82%, #ffffff 18%);
}

.progress-score-chip--not-started {
  border-color: var(--nls-color-border-soft, #cbd5e1);
  color: var(--nls-color-text-muted, #64748b);
  background: color-mix(in srgb, var(--nls-color-surface-alt, #f8fafc) 84%, #ffffff 16%);
}

.progress-score-chip--tick {
  border-color: color-mix(in srgb, #12b76a 52%, var(--nls-color-border-soft) 48%);
  color: #12b76a;
  background: color-mix(in srgb, #dcfce7 58%, var(--nls-color-surface) 42%);
}

.progress-score-chip--pending {
  border-color: color-mix(in srgb, #f59e0b 58%, var(--nls-color-border-soft) 42%);
  color: #b45309;
  background: color-mix(in srgb, #fef3c7 72%, var(--nls-color-surface) 28%);
}

.progress-score-chip--teacher-only {
  border-color: color-mix(in srgb, #dc2626 58%, var(--nls-color-border-soft) 42%);
  color: #b91c1c;
  background: color-mix(in srgb, #fee2e2 72%, var(--nls-color-surface) 28%);
}

.progress-score-chip__check {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #12b76a;
}

.progress-score-chip__check svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.progress-score-chip__pending-icon {
  width: 0.9rem;
  height: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.progress-score-chip__pending-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.progress-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 999px;
  border: 1px solid var(--nls-color-border);
  padding: 0.1rem 0.5rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: nowrap;
  box-sizing: border-box;
  width: 15ch;
  text-align: center;
  overflow: hidden;
  font-weight: 500;
}

.progress-chip__label {
  position: relative;
  z-index: 1;
}

.progress-chip--completed {
  border-color: var(--nls-color-success-strong, #16803b);
  color: var(--nls-color-success-strong, #16803b);
  background: color-mix(in srgb, #dcfce7 58%, var(--nls-color-surface) 42%);
}

.progress-chip--in-progress {
  border-color: var(--nls-color-primary, #2563eb);
  color: var(--nls-color-primary, #2563eb);
  background: color-mix(in srgb, #dbeafe 32%, var(--nls-color-surface, #fff) 68%);
}

.progress-chip--in-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--progress-chip-fill, 0%);
  background: color-mix(in srgb, #bfdbfe 82%, #93c5fd 18%);
  pointer-events: none;
}

.progress-chip--not-started,
.progress-chip--info {
  color: var(--nls-color-text-muted);
  border-color: var(--nls-color-border-soft, #cbd5e1);
  background: color-mix(in srgb, var(--nls-color-surface-alt, #f8fafc) 84%, #ffffff 16%);
}

.progress-chip--lessons {
  text-transform: none;
  letter-spacing: 0;
  color: var(--nls-color-text-muted, #475569);
  border-color: var(--nls-color-border-soft, #cbd5e1);
  background: color-mix(in srgb, var(--nls-color-surface-alt, #f8fafc) 84%, #ffffff 16%);
}

.progress-chip--score {
  text-transform: none;
  letter-spacing: 0;
  color: #2563eb;
  border-color: color-mix(in srgb, #2f6fed 52%, var(--nls-color-border-soft) 48%);
  background: color-mix(in srgb, #dbeafe 56%, var(--nls-color-surface) 44%);
}

.progress-chip--score.progress-chip--score-not-started {
  color: var(--nls-color-text-muted, #64748b);
  border-color: var(--nls-color-border-soft, #cbd5e1);
  background: color-mix(in srgb, var(--nls-color-surface-alt, #f8fafc) 84%, #ffffff 16%);
}

.progress-chip--score .progress-chip__label {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

@media (min-width: 521px) {
  .teacher-class-view__pane--scores .progress-chip,
  .teacher-class-view__pane--scores .progress-open-inline,
  .teacher-class-view__pane--scores .progress-score-chip {
    flex: 0 0 auto;
    max-width: none;
    white-space: nowrap;
  }

  .teacher-class-view__pane--scores .progress-chip {
    width: auto;
    min-width: max-content;
    overflow: hidden;
  }
}

@media (min-width: 521px) and (max-width: 1180px) {
  .teacher-class-view__pane--scores .teacher-course-progress__bar {
    width: 90px;
  }

  .teacher-class-view__pane--scores .progress-node__bar {
    width: 44px;
  }
}

@media (min-width: 521px) and (max-width: 1040px) {
  .teacher-class-view__pane--scores .teacher-course-progress__bar {
    width: 70px;
  }

  .teacher-class-view__pane--scores .progress-node__bar {
    width: 34px;
  }

  .teacher-class-view__pane--scores .progress-node__bar-wrap {
    gap: 0.24rem;
  }
}

@media (max-width: 900px) {
  .teacher-class-view .progress-node__actions .progress-chip,
  .teacher-class-view .progress-node__stats .progress-chip {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .teacher-class-view__pane--scores .teacher-student-node__summary,
  .teacher-class-view__pane--scores .teacher-student-node__head,
  .teacher-class-view__pane--scores .progress-history-toggle,
  .teacher-class-view__pane--scores .progress-history-toggle__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
    align-items: start;
  }

  .teacher-class-view__pane--scores .teacher-student-node__name,
  .teacher-class-view__pane--scores .progress-history-toggle__title {
    max-width: 100%;
    min-width: 0;
    line-height: 1.18;
    overflow-wrap: anywhere;
  }

  .teacher-class-view__pane--scores .teacher-student-node__summary {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    column-gap: 0.45rem;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__summary
    > .teacher-student-node__name {
    grid-column: 1;
    grid-row: 1;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__summary
    > .teacher-student-node__metrics {
    width: auto !important;
    max-width: 46vw !important;
    min-width: 6.8rem;
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    align-items: center !important;
    justify-self: end !important;
    justify-content: flex-end !important;
    margin-top: 0.02rem;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__summary
    > .teacher-student-node__metrics.progress-history-toggle__stats--loading {
    width: 46vw !important;
    min-height: 1.32rem;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__summary
    > .teacher-student-node__metrics
    > .class-scores-inline-loader {
    width: 100%;
    min-width: 0;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__summary
    > .teacher-student-node__metrics
    > .progress-chip {
    max-width: 100%;
  }

  .teacher-class-view__pane--scores .teacher-student-node__metrics,
  .teacher-class-view__pane--scores .progress-history-toggle__stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-left: 0;
    justify-content: stretch;
    gap: 0.22rem;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__metrics
    .progress-node__metrics,
  .teacher-class-view__pane--scores
    .progress-history-toggle__stats
    .progress-node__metrics {
    grid-row: 1;
    justify-self: start;
    white-space: normal;
    line-height: 1.2;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__metrics
    .progress-node__bar-wrap,
  .teacher-class-view__pane--scores
    .progress-history-toggle__stats
    .progress-node__bar-wrap {
    grid-row: 2;
    display: grid;
    grid-template-columns: auto minmax(28%, 42%) minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    align-items: center;
    gap: 0.32rem;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__metrics
    .progress-node__bar-wrap
    .progress-node__bar-text,
  .teacher-class-view__pane--scores
    .progress-history-toggle__stats
    .progress-node__bar-wrap
    .progress-node__bar-text {
    white-space: normal;
    line-height: 1.2;
  }

  .teacher-class-view__pane--scores .teacher-course-progress__bar {
    width: 100%;
    min-width: 0;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__course-toggle
    .progress-history-toggle__title::before {
    font-size: 1.08rem;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__course-toggle
    .progress-history-toggle__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__course-toggle
    .progress-history-toggle__title {
    grid-column: 1;
    grid-row: 1;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__course-toggle
    .progress-node__grade-shield {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__course-toggle
    .progress-history-toggle__stats {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.28rem 0.36rem;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__course-toggle
    .progress-history-toggle__stats
    > .progress-chip--lessons {
    min-width: max-content;
  }

  .teacher-class-view__pane--scores
    .teacher-student-node__course-toggle
    .progress-history-toggle__stats
    > .progress-chip--score {
    flex: 0 0 3.85rem;
    width: 3.85rem;
    min-width: 3.85rem;
    margin-left: auto;
  }

  .teacher-class-view__pane--scores .progress-node,
  .teacher-class-view__pane--scores .progress-node__summary,
  .teacher-class-view__pane--scores .progress-node__panel {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .teacher-class-view__pane--scores .progress-node__title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.24rem;
  }

  .teacher-class-view__pane--scores .progress-node__main {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.24rem;
    width: 100%;
  }

  .teacher-class-view__pane--scores .progress-node__label,
  .teacher-class-view__pane--scores .progress-node__label-text {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .teacher-class-view__pane--scores .progress-node__label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    width: 100%;
  }

  .teacher-class-view__pane--scores .progress-node__label-text {
    grid-column: 1;
  }

  .teacher-class-view__pane--scores .progress-node__label > .progress-node__grade-shield {
    grid-column: 2;
    justify-self: end;
  }

  .teacher-class-view__pane--scores .progress-node__main .progress-open-inline,
  .teacher-class-view__pane--scores .progress-node__bar-text,
  .teacher-class-view__pane--scores .progress-hidden-score-chip {
    grid-column: 1;
    justify-self: start;
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
  }

  .teacher-class-view__pane--scores
    .progress-node__main
    > .progress-node__bar-text:not(.progress-hidden-score-chip) {
    grid-row: 2;
    justify-self: start;
    white-space: normal;
  }

  .teacher-class-view__pane--scores .progress-node__main > .progress-open-inline {
    grid-row: 4;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
  }

  .teacher-class-view__pane--scores .progress-schedule-status-pill--title {
    display: none;
  }

  .teacher-class-view__pane--scores .progress-schedule-status-pill--mobile {
    display: inline-flex;
  }

  .teacher-class-view__pane--scores .progress-node__actions,
  .teacher-class-view__pane--scores .progress-node__stats {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.32rem 0.4rem;
  }

  .teacher-class-view__pane--scores .progress-node__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    align-items: center;
  }

  .teacher-class-view__pane--scores .progress-node__stats > .progress-chip {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    width: auto;
    max-width: 100%;
  }

  .teacher-class-view__pane--scores
    .progress-node__stats
    > .progress-chip--lessons {
    min-width: max-content;
  }

  .teacher-class-view__pane--scores
    .progress-node__stats
    > .progress-attempt-timeline-btn {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
  }

  .teacher-class-view__pane--scores .progress-node__stats > .progress-score-chip {
    margin-left: auto;
  }

  .teacher-class-view__pane--scores
    .progress-node__stats
    > .progress-node__bar-text {
    grid-row: 2;
    grid-column: 3 / 5;
    align-self: center;
    white-space: normal;
    line-height: 1.2;
  }

  .teacher-class-view__pane--scores
    .progress-node__stats
    > .progress-open-inline {
    grid-row: 4;
    grid-column: 1 / 5;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
  }

  .teacher-class-view__pane--scores .progress-node__bar-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-row: 2;
    grid-column: 1 / 3;
    width: 100%;
    max-width: 100%;
    align-items: center;
  }

  .teacher-class-view__pane--scores .progress-node__bar {
    width: 100%;
    min-width: 0;
  }

  .teacher-class-view__pane--scores .progress-score-chip {
    width: auto;
    min-width: 3.85rem;
  }
}

.progress-chip--not-enrolled {
  color: var(--nls-color-text-muted);
  border-color: var(--nls-color-border-soft);
  background: color-mix(in srgb, var(--nls-color-surface-alt) 75%, #fff 25%);
}

/* Courses hub: teaching access — icon + label, not a pill/button */
.courses-hub-access-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--nls-color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.courses-hub-access-label__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--nls-color-text-muted);
}

.courses-hub-access-label__icon svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.courses-hub-access-label__text {
  min-width: 0;
}

.progress-target {
  margin-top: 0.25rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface-alt);
  padding: 0.3rem 0.45rem;
  width: 100%;
  text-align: left;
  color: var(--nls-color-text);
}

.progress-target:is(:hover, :focus-visible) {
  border-color: var(--nls-color-primary-border-strong);
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 68%,
    var(--nls-color-surface) 32%
  );
}

.progress-tree {
  margin-top: 0.35rem;
}

.progress-dashboard--devtools {
  margin-top: 0.9rem;
  border-top: 1px solid var(--nls-color-border-soft);
  padding-top: 0.55rem;
}

.progress-player-detail {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.75rem;
}

/* Inline Add Users: always allow horizontal table scrolling (desktop + mobile). */
.progress-player-detail--add-users-inline {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  min-width: 0;
}

.admin2-inline-add-user-host {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: visible;
}

body[data-theme="dev-view"] #player-main {
  overflow-x: hidden;
  max-width: 100%;
}

@media (min-width: 900px) {
  .admin2-shell--groups:has(.admin2-inline-add-user-host:not([hidden]))
    .admin2-grid--player-hub {
    width: min(100%, 72rem);
    max-width: 72rem;
  }
}

/* Hub/list content envelope: centered column that can shrink when side menus take space. */
.progress-player-detail.courses-player-view {
  width: min(100%, 760px);
  max-width: 760px;
  margin-inline: auto;
}

.progress-player-detail.progress-player-detail--admin-bulk-full-width.courses-player-view {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Player views run without title/subtitle header strip. */
.progress-player-detail__title,
.progress-player-detail__subtitle-row,
.progress-player-detail__subtitle {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.progress-player-detail__title {
  margin: 0;
  font-size: 1.1rem;
}

.progress-player-detail__subtitle {
  margin: 0.35rem 0 0.8rem;
  color: var(--nls-color-text-muted);
  font-size: 0.78rem;
}

.progress-player-detail__subtitle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.2rem 0 0.8rem;
}

.progress-player-detail__subtitle-row .progress-player-detail__subtitle {
  margin: 0;
}

.progress-player-detail__subtitle-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

@media (max-width: 900px) {
  .progress-player-detail__subtitle-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.progress-player-detail--admin2-compact .progress-player-detail__title {
  font-size: 0.92rem;
  line-height: 1.15;
  color: var(--nls-color-text-soft);
  font-weight: 600;
  margin-bottom: 0.18rem;
}

.progress-player-detail--admin2-compact .progress-player-detail__subtitle {
  margin-top: 0.12rem;
  margin-bottom: 0.46rem;
  font-size: 0.74rem;
}

.progress-player-detail__subtitle--meta {
  margin-top: 0.18rem;
  margin-bottom: 0.46rem;
  color: var(--nls-color-text-soft);
  font-size: 0.72rem;
}

.progress-player-detail__course-rollup {
  margin: 0 0 0.55rem;
  display: flex;
  justify-content: flex-end;
}

.progress-player-detail__tree {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.progress-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.progress-history-item {
  display: grid;
  gap: 0;
  margin: 0 0 0.35rem;
}

.progress-history-toggle {
  width: 100%;
  border: 1px solid var(--nls-color-border-soft);
  background: var(--nls-color-surface);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  box-sizing: border-box;
}

.progress-history-toggle:hover {
  border-color: var(--nls-color-primary-border-strong);
}

.progress-history-toggle__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--nls-color-text);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.teacher-student-node__course-toggle .progress-history-toggle__title {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.teacher-student-node__course-toggle .progress-history-toggle__title::before {
  content: "▸";
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: color-mix(
    in srgb,
    var(--nls-color-primary-strong) 65%,
    var(--nls-color-text) 35%
  );
  text-shadow: 0 0 0.01px currentColor;
  transition: color 140ms ease;
  flex: 0 0 auto;
}

.teacher-student-node__course-toggle[aria-expanded="true"]
  .progress-history-toggle__title::before {
  content: "▾";
  color: var(--nls-color-primary-strong);
}

.progress-history-toggle__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.progress-history-toggle__meta {
  font-size: 0.76rem;
  color: var(--nls-color-text-soft);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.progress-history-toggle__stats {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  flex: 0 1 auto;
  align-self: flex-start;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}

@media (max-width: 900px) {
  .progress-history-toggle__stats {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}

.progress-history-panel {
  margin-top: 0;
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-primary-border-strong) 42%,
      var(--nls-color-border-soft) 58%
    );
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 0.45rem 0.55rem;
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 24%,
    var(--nls-color-surface) 76%
  );
}

.progress-history-toggle[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#progress-output {
  max-height: 260px;
  overflow: auto;
}

.progress-player-detail__payload {
  margin: 0;
  max-height: min(70vh, 760px);
  overflow: auto;
}

.progress-player-detail__actions {
  margin-top: 0.55rem;
  display: flex;
  justify-content: flex-start;
}

.progress-player-detail__copy {
  min-width: 88px;
}

.admin2-shell {
  display: grid;
  gap: 0.75rem;
}

.admin-home-cockpit {
  display: grid;
  gap: 0.7rem;
  background:
    linear-gradient(to bottom, rgba(59, 130, 246, 0.05), transparent 200px),
    #f8fafc;
  border-radius: 14px;
  padding: 0.7rem;
}

.admin-home-cockpit__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  border-radius: 14px;
  padding: 0.86rem 1rem;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15), transparent 40%),
    linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
}

.admin-home-cockpit__title {
  margin: 0;
  font-size: 1rem;
  color: #ffffff;
}

.admin-home-cockpit__diagnostics {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.9);
}

.admin-home-cockpit__diagnostics[data-state="error"] {
  color: var(--nls-color-danger-text, #b42318);
}

.admin-home-cockpit__section {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  padding: 0.72rem;
  display: grid;
  gap: 0.52rem;
}

.admin-home-cockpit__section-title {
  margin: 0;
  font-size: 0.9rem;
}

.admin-home-cockpit__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.46rem;
}

.admin-home-cockpit__item {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  padding: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.admin-home-cockpit__item-title {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.28;
}

.admin-home-cockpit__item-meta {
  margin: 0.18rem 0 0;
  font-size: 0.75rem;
  color: var(--nls-color-text-soft);
}

.admin-home-cockpit__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem;
}

.admin-home-cockpit__cards--snapshot {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0.32rem;
  align-items: start;
}

.admin-home-cockpit__card {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  padding: 0.55rem;
  display: grid;
  gap: 0.35rem;
}

.admin-home-cockpit__cards--snapshot .admin-home-cockpit__card {
  padding: 0.4rem 0.46rem;
  gap: 0;
  align-content: start;
}

.admin-home-cockpit__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.3rem;
}

.admin-home-cockpit__card-title {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.22;
  font-weight: 680;
}

.admin-home-cockpit__card-lines {
  display: grid;
  gap: 0;
  align-content: start;
}

.admin-home-cockpit__card-line {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.admin-home-cockpit__card-line-label {
  font-size: 0.72rem;
  line-height: 1.23;
  color: var(--nls-color-text-soft);
}

.admin-home-cockpit__card-line-value {
  font-size: 0.74rem;
  line-height: 1.2;
  font-weight: 700;
  text-align: right;
  color: color-mix(in srgb, var(--nls-color-text, #1e293b) 92%, #0f172a 8%);
}

.admin-home-cockpit__card-actions-inline {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0.02rem;
}

.admin-home-cockpit__card-action-btn {
  min-width: auto;
  padding: 0.18rem 0.42rem;
  font-size: 0.67rem;
  opacity: 0.74;
}

.admin-home-cockpit__card-action-btn .course-action__icon {
  width: 0.78rem;
  height: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-home-cockpit__card-action-btn .course-action__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.admin-home-cockpit__card-action-btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.admin-home-cockpit__card-action-dev-tag {
  margin-left: 0.22rem;
  font-size: 0.52rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.admin-home-cockpit__ring-wrap .teacher-class-overview-metric__ring {
  width: 2.2rem;
  height: 2.2rem;
}

.admin-home-cockpit__ring-wrap .teacher-class-overview-metric__ring-value {
  font-size: 0.56rem;
}

.admin-home-cockpit__card--ring {
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: 0.58rem 0.46rem;
}

.admin-home-cockpit__card--ring .admin-home-cockpit__card-top {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.24rem;
}

.admin-home-cockpit__card--ring .admin-home-cockpit__card-title {
  text-align: left;
}

.admin-home-cockpit__card--ring .admin-home-cockpit__card-lines {
  width: 100%;
  text-align: left;
}

.admin-home-cockpit__card--ring .admin-home-cockpit__card-line-label {
  text-align: left;
}

.admin-home-cockpit__ring-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.admin-home-cockpit__ring-node-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--nls-color-text-soft);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-home-cockpit__card--ring .admin-home-cockpit__ring-wrap .teacher-class-overview-metric__ring {
  width: 4rem;
  height: 4rem;
}

.admin-home-cockpit__card--ring
  .admin-home-cockpit__ring-wrap
  .teacher-class-overview-metric__ring-value {
  font-size: 0.84rem;
}

@media (max-width: 767px) {
  .admin-home-cockpit__card--ring {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .admin-home-cockpit__card--ring {
    grid-column: span 2;
  }
}


.admin-home-cockpit__card-value {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.08;
}

.admin-home-cockpit__card-label {
  margin: 0;
  font-size: 0.75rem;
  color: var(--nls-color-text-soft);
  line-height: 1.25;
}

.admin-home-cockpit__card-drill-placeholder {
  width: 0.95rem;
  height: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--nls-color-text-soft, #667085) 80%, #cbd5e1 20%);
  opacity: 0.7;
  pointer-events: none;
}

.admin-home-cockpit__card-drill-placeholder svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.admin-home-cockpit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-home-cockpit__diagnostics-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.admin-home-cockpit__diagnostics-row .admin-home-cockpit__diagnostics {
  margin: 0;
}

.admin-home-cockpit__empty {
  margin: 0;
  font-size: 0.8rem;
  color: var(--nls-color-text-soft);
}

.admin2-node-snapshot-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.admin2-node-snapshot-card__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.admin2-node-snapshot-card__usage-report[hidden] {
  display: none !important;
}

.admin2-node-snapshot-card__usage-report {
  margin-top: 0.75rem;
}

.admin2-node-snapshot-card__actions > .admin2-node-snapshot-card__usage-report {
  margin-top: 0;
}

.admin2-node-snapshot-card .dev-home-summary__section-action {
  border: 1px solid color-mix(in srgb, var(--nls-color-primary, #2563eb) 22%, var(--nls-color-border-soft, #d0d5dd) 78%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nls-color-primary-bg-light, #eef4ff) 64%, #ffffff 36%);
  color: color-mix(in srgb, var(--nls-color-primary, #2563eb) 72%, #1e40af 28%);
}

.admin2-node-snapshot-card .dev-home-summary__section-action--inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 0.55rem;
  padding: 0.35rem 0.65rem;
  white-space: nowrap;
}

.admin2-node-snapshot-card .dev-home-summary__section-action:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--nls-color-primary-bg-light, #eef4ff) 58%, #ffffff 42%);
  border-color: color-mix(in srgb, var(--nls-color-primary, #2563eb) 32%, var(--nls-color-border-soft, #d0d5dd) 68%);
  color: color-mix(in srgb, var(--nls-color-primary, #2563eb) 78%, #1d4ed8 22%);
}

.admin2-node-snapshot-card__usage-report .admin-home-usage-report {
  display: grid;
  gap: 0.75rem;
}

.admin-home-usage-report__window-filter {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.admin-home-usage-report__window-label {
  font-size: 0.78rem;
  font-weight: 650;
  color: #ffffff;
}

.admin-home-usage-report .admin-home-cockpit__header .admin-home-cockpit__diagnostics {
  color: #ffffff;
}

.admin-home-usage-report__window-select {
  font-size: 0.78rem;
  line-height: 1.2;
  border-radius: 0.45rem;
  border: 1px solid var(--nls-color-border-soft, #d0d5dd);
  background: #fff;
  color: var(--nls-color-text, #101828);
  padding: 0.28rem 0.45rem;
}

.admin-home-usage-report__section-hint {
  margin: 0 0 0.35rem;
  font-size: 0.74rem;
}

.admin2-inline-create-distributor,
.admin2-inline-create-node {
  margin-top: 0.55rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: transparent;
  padding: 0.65rem 0.7rem;
  display: grid;
  gap: 0.45rem;
}

.admin2-inline-create-distributor[hidden],
.admin2-inline-create-node[hidden] {
  display: none;
}

.admin2-inline-create-distributor__title,
.admin2-inline-create-node__title {
  margin: 0;
  font-size: 0.9rem;
}

.admin2-inline-create-distributor__hint,
.admin2-inline-create-node__hint {
  margin: 0;
  display: none;
}

.admin2-inline-create-node .panel-message:empty {
  display: none;
}

.admin2-inline-create-distributor__field,
.admin2-inline-create-node__field {
  display: grid;
  gap: 0.22rem;
}

.admin2-inline-create-distributor__domains,
.admin2-inline-create-node__domains {
  display: grid;
  gap: 0.32rem;
}

.admin2-inline-create-distributor__domains-label,
.admin2-inline-create-node__domains-label {
  margin: 0;
  font-size: 0.78rem;
  color: var(--nls-color-text-muted);
  font-weight: 600;
}

.admin2-inline-create-distributor__domains-grid,
.admin2-inline-create-node__domains-grid {
  display: grid;
  gap: 0.28rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.admin2-inline-create-distributor__domains-grid .classes-inline-check,
.admin2-inline-create-node__domains-grid .classes-inline-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  line-height: 1.2;
}

.admin2-inline-create-distributor__domains--single-row,
.admin2-inline-create-node__domains--single-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.55rem;
}

.admin2-inline-create-distributor__domains--single-row
  .admin2-inline-create-distributor__domains-grid,
.admin2-inline-create-node__domains--single-row
  .admin2-inline-create-node__domains-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
}

.admin2-inline-create-distributor__actions,
.admin2-inline-create-node__actions {
  margin-top: 0.12rem;
}

.admin2-shell .admin2-actions .course-action,
.admin2-shell .classes-action-bar .course-action {
  background: var(--nls-color-surface, #ffffff);
}

.admin2-shell .admin2-actions .course-action:is(:hover, :focus-visible),
.admin2-shell .classes-action-bar .course-action:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--nls-color-primary-bg-light, #eff6ff) 32%, white);
}

.admin2-shell .admin2-actions .course-action.is-active,
.admin2-shell .classes-action-bar .course-action.is-active {
  background: color-mix(
    in srgb,
    var(--nls-color-surface-alt, #f8fafc) 78%,
    var(--nls-color-surface, #ffffff)
  );
}

/* Assessment gate: force stacked rows (no side-by-side columns). */
body[data-theme="dev-view"] .assessment-start-gate__attempts.panel-message,
body[data-theme="dev-view"] .assessment-start-gate__attempts {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 0.55rem 0 !important;
  text-align: left !important;
}

body[data-theme="dev-view"] .assessment-start-gate__attempts > * {
  width: 100%;
}

.assessment-start-gate__attempts.panel-message,
.assessment-start-gate__attempts {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

.assessment-gate-meta-list,
.assessment-gate-attempt-list {
  list-style: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
}

.admin2-shell .admin2-actions .course-action:disabled,
.admin2-shell .classes-action-bar .course-action:disabled {
  background: var(--nls-color-surface-muted, #eef2f7);
}

.admin2-shell .classes-inline-check:has(input[type="checkbox"]),
.admin2-shell .create-class-course-option:has(input[type="checkbox"]),
.admin2-shell .notice-compose-students__option:has(input[type="checkbox"]),
.admin2-shell .dev-hard-archive-check:has(input[type="checkbox"]),
.admin2-shell .admin2-hierarchy-controls:has(input[type="checkbox"]) {
  border: none;
  border-radius: 10px;
  background: transparent;
  padding: 0.38rem 0.52rem;
}

.admin2-shell .classes-inline-check:has(input[type="checkbox"]):hover,
.admin2-shell .create-class-course-option:has(input[type="checkbox"]):hover,
.admin2-shell .notice-compose-students__option:has(input[type="checkbox"]):hover,
.admin2-shell .dev-hard-archive-check:has(input[type="checkbox"]):hover,
.admin2-shell .admin2-hierarchy-controls:has(input[type="checkbox"]):hover {
  border: none;
  background: transparent;
}

.admin2-shell
  .manage-groups-archive-filters
  .classes-inline-check:has(input[type="checkbox"]),
.admin2-shell
  .manage-groups-archive-filters
  .classes-inline-check:has(input[type="checkbox"]):hover {
  border: none;
}

.admin2-shell .admin2-search-filters .admin2-search-checkbox-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  text-align: left !important;
}

.admin2-shell .admin2-search-filters .admin2-search-checkbox-row input[type="checkbox"] {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.admin2-shell__header {
  display: grid;
  gap: 0.25rem;
}

.admin2-shell__title {
  margin: 0;
  font-size: 0.98rem;
}

.admin2-shell__subtitle {
  margin: 0;
  color: var(--nls-color-text-muted);
  font-size: 0.78rem;
}

.admin2-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-alt);
  padding: 0.55rem 0.7rem;
}

.admin2-context__label {
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
}

.admin2-context__value {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: inherit;
  color: var(--nls-color-text);
}

/* Player context strip (e.g. Add course flow); hub uses Details column only. */
.admin2-context.courses-hub-context-rich {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.courses-hub-context__title {
  display: block;
  width: 100%;
}

.courses-hub-context__body {
  display: grid;
  gap: 0.2rem;
}

.courses-hub-context__line {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--nls-color-text);
}

.courses-hub-context__line.muted {
  color: var(--nls-color-text-muted);
}

/* Courses hub: scrollable body — course title + info + progress live here. */
.courses-hub-detail__body {
  flex: 1;
  min-height: 0;
  max-height: min(52vh, 480px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.courses-hub-detail__course-title {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--nls-color-text);
}

.courses-hub-detail__line {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--nls-color-text);
}

.courses-hub-detail__line.muted {
  color: var(--nls-color-text-muted);
}

.courses-hub-detail-courseinfo {
  display: grid;
  gap: 0.35rem;
}

.courses-hub-detail-courseinfo .info-page-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--nls-color-text);
}

.courses-hub-detail-courseinfo .info-page-body,
.courses-hub-detail-courseinfo .info-page-lead {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--nls-color-text);
}

.courses-hub-detail-courseinfo .info-page-bullets {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.76rem;
  line-height: 1.4;
}

.courses-hub-detail-courseinfo .question-line--with-media-card + .info-page-lead,
.courses-hub-detail-courseinfo .question-line--with-media-card + .info-page-bullets,
.courses-hub-detail-courseinfo .question-line + .info-page-lead,
.courses-hub-detail-courseinfo .question-line + .info-page-bullets {
  margin-top: 0.28rem;
}

.courses-hub-detail-courseinfo .info-page-lead + .info-page-bullets {
  margin-top: 0.08rem;
}

.courses-hub-detail-courseinfo .question-line img,
.courses-hub-detail-courseinfo .question-line video {
  max-width: 100%;
  max-height: 160px;
  border-radius: 8px;
}

/* Courses > Course info: let media frame hug actual image size (no fixed placeholder box). */
.courses-hub-detail-courseinfo .question-line--with-media-card {
  align-items: flex-start;
}

.courses-hub-detail-courseinfo .question-line--with-media-card .question-media-inline--card {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}

.courses-hub-detail-courseinfo
  .question-line--with-media-card
  .question-media-inline--card
  .question-image--inline
  .asset-wrap,
.courses-hub-detail-courseinfo
  .question-line--with-media-card
  .question-media-inline--card
  .question-image--inline
  .asset-image {
  width: auto;
}

.courses-hub-detail-courseinfo
  .question-line--with-media-card
  .question-media-inline--card
  .question-image--inline
  .asset-image__img {
  width: auto;
  max-width: min(100%, 260px);
  height: auto;
}

.courses-hub-detail__progress {
  margin-top: 0.15rem;
}

.courses-hub-detail__progress .courses-progress-label {
  font-size: 0.72rem;
}

.courses-hub-detail__progress .courses-progress-dot {
  width: 0.42rem;
  height: 0.42rem;
}

.courses-hub-list-scroll {
  max-height: min(60vh, 520px);
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 0.15rem;
}

.menu-expandable-item {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-alt);
  padding: 0.42rem;
  overflow: hidden;
}

.menu-expandable-toggle {
  width: 100%;
}

.menu-expandable-panel {
  margin-top: 0.42rem;
}

.courses-hub-row-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0 0 0.5rem;
}

.courses-hub-row-item .menu-expandable-panel {
  margin-top: 0;
}

/* Courses rows should be the expandable container (no extra outer wrapper chrome). */
.courses-hub-row-item.menu-expandable-item {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: visible;
}

.admin2-hierarchy-row__title.courses-hub-row__title--with-role {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.courses-hub-row__role-badge {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  color: var(--nls-color-text-muted);
}

.courses-hub-row__role-badge svg {
  width: 1.1rem;
  height: 1.1rem;
}

.courses-hub-row__title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.courses-hub-expandable__toggle {
  border-color: color-mix(
    in srgb,
    var(--nls-color-border-soft) 70%,
    var(--nls-color-primary) 30%
  );
  background: var(--nls-color-surface);
}

/* Courses list rows using quick-access markup should mirror Home spacing/chrome. */
body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-border-soft) 76%,
      var(--nls-color-primary) 24%
    );
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 90%,
    var(--nls-color-primary-bg-light) 10%
  );
  box-shadow: 0 1px 0 color-mix(in srgb, var(--nls-shadow-color) 9%, transparent);
  border-radius: 12px;
  padding: 0.5rem 0.62rem;
  gap: 0.58rem;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item.dev-surface-brief__started-item--with-mini {
  padding: 0.5rem 0.62rem;
  gap: 0.58rem;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  > .course-action {
  display: none;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__mini-cover {
  position: relative;
  align-self: center;
  flex: 0 0 3.35rem;
  width: 3.35rem;
  height: 3.35rem;
  overflow: hidden;
  border-radius: 9px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 82%, var(--nls-color-primary) 18%);
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 30%,
    var(--nls-color-surface) 70%
  );
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__mini-cover
  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__mini-cover-placeholder {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__mini-cover-badge {
  display: none;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--nls-color-text);
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-detail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.32rem;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-detail-subject-line {
  margin: 0;
  width: 100%;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-detail-subject {
  font-size: 0.73rem;
  font-weight: 560;
  color: var(--nls-color-text-soft);
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-detail-secondary {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-detail-secondary-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 560;
  color: var(--nls-color-text-soft);
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-detail-row
  .dev-surface-brief__started-detail-secondary-item
  + .dev-surface-brief__started-detail-secondary-item::before {
  content: "·";
  margin: 0 0.32rem;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item:hover,
body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item:focus-visible,
body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item.is-active {
  border-color: var(--nls-color-primary-border-strong);
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 82%,
    var(--nls-color-primary-bg-light) 18%
  );
}

/* Courses + Progress row parity: title/meta left, progress stats right. */
.courses-hub-expandable__toggle.admin2-hierarchy-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
}

.courses-hub-expandable__toggle.admin2-hierarchy-row .admin2-hierarchy-row__title {
  grid-column: 1;
  grid-row: 1;
}

.courses-hub-expandable__toggle.admin2-hierarchy-row .admin2-hierarchy-row__meta {
  grid-column: 1;
  grid-row: 2;
}

.courses-hub-expandable__toggle.admin2-hierarchy-row .progress-history-toggle__stats {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  margin-left: 0;
}

.courses-hub-expandable__toggle.admin2-hierarchy-row .admin2-hierarchy-row__count {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
}

@media (max-width: 900px) {
  body[data-theme="dev-view"]
    button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item {
    grid-template-columns: 3.05rem minmax(0, 1fr);
    padding: 0.46rem 0.52rem;
    gap: 0.48rem;
  }

  body[data-theme="dev-view"]
    button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
    .dev-surface-brief__mini-cover {
    flex-basis: 3.05rem;
    width: 3.05rem;
    height: 3.05rem;
  }

  body[data-theme="dev-view"]
    button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
    .dev-surface-brief__started-detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  body[data-theme="dev-view"]
    button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
    .dev-surface-brief__started-detail {
    width: 100%;
  }

  body[data-theme="dev-view"]
    button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
    .dev-surface-brief__started-detail-row
    .dev-surface-brief__started-detail-secondary-item
    + .dev-surface-brief__started-detail-secondary-item::before {
    content: "";
    margin: 0;
  }

  body[data-theme="dev-view"]
    button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
    .dev-surface-brief__started-detail-secondary {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.24rem;
  }

  body[data-theme="dev-view"]
    button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
    .dev-surface-brief__started-detail-secondary-item {
    max-width: 100%;
    white-space: normal;
  }

  body[data-theme="dev-view"]
    button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
    .teacher-class-assigned-courses-item__hidden-chip {
    max-width: 100%;
    white-space: normal;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row.courses-hub-row--no-meta {
    grid-template-rows: auto auto;
    row-gap: 0.14rem;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 0.18rem;
    position: relative;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row .admin2-hierarchy-row__title {
    grid-column: 1;
    grid-row: 1;
    max-width: calc(100% - 6.8rem);
    min-height: 1.25rem;
    display: inline-flex;
    align-items: center;
    margin: 0;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row .admin2-hierarchy-row__meta {
    grid-column: 1;
    grid-row: 2;
    max-width: calc(100% - 6.8rem);
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row.courses-hub-row--no-meta
    .progress-history-toggle__stats {
    grid-row: 2;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row .progress-history-toggle__stats {
    grid-column: 1;
    grid-row: 3;
    justify-self: stretch;
    align-self: start;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0.25rem;
    margin-left: 0;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row
    .progress-history-toggle__stats
    .progress-node__bar-wrap {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row
    .progress-history-toggle__stats
    .progress-chip {
    grid-column: 2;
    grid-row: 1;
    min-width: 15ch;
    width: 15ch;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row
    .progress-history-toggle__stats
    .progress-score-chip {
    position: absolute;
    top: 0.45rem;
    right: 0.55rem;
    min-width: 0;
    width: fit-content;
    padding: 0.08rem 0.32rem;
    font-size: 0.66rem;
    justify-content: center;
  }

  .progress-node__title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 0.35rem;
    row-gap: 0.2rem;
    align-items: start;
  }

  .progress-node__main {
    grid-column: 1;
    grid-row: 1;
  }

  .progress-node__actions {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin-left: 0;
    justify-content: flex-end;
  }

  .progress-node__stats {
    grid-column: 1 / span 2;
    grid-row: 2;
    min-width: 0;
    width: 100%;
  }

  .progress-node__stats .progress-node__bar-wrap {
    width: 100%;
  }

  .progress-node__stats .progress-node__bar {
    flex: 1 1 auto;
    width: auto;
  }
}

.courses-hub-row-item.is-expanded .courses-hub-expandable__toggle {
  border-color: var(--nls-color-primary-border-strong);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.courses-hub-row-item:not(.is-expanded) .courses-hub-expandable__toggle {
  border-bottom-left-radius: 9px !important;
  border-bottom-right-radius: 9px !important;
}

.courses-hub-row-expand {
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-primary-border-strong) 40%,
      var(--nls-color-border-soft) 60%
    );
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 35%,
    var(--nls-color-surface) 65%
  );
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 0.45rem 0.5rem;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.courses-hub-expandable__content {
  display: grid;
  gap: 0.35rem;
}

/* Progress rows should align with the course panel edges (no extra inset). */
.courses-hub-row-expand .progress-player-detail__tree,
.courses-hub-row-expand .progress-tree {
  margin-inline: -0.5rem;
}

.courses-hub-row-expand .courses-hub-detail__body {
  max-height: none;
  overflow-x: visible;
  overflow-y: visible;
  padding-right: 0;
}

.courses-hub-row-expand .courses-hub-inline-actions {
  margin-top: 0.35rem;
  margin-bottom: 0.15rem;
}

.courses-hub-row-expand .courses-hub-inline-actions .course-action {
  background: var(--nls-color-surface);
}

.courses-hub-row-expand .courses-hub-detail-tabs {
  margin-top: 0.1rem;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

.courses-hub-row-expand .courses-hub-detail-tabs .tabs__item {
  min-height: 2rem;
  font-size: 0.8rem;
}

/* Universal Add course on narrow viewports (Actions card is below long Details). */
.courses-hub-mobile-add-bar {
  display: block;
  margin-top: 0.2rem;
  padding-top: 0;
  border-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.courses-hub-mobile-add-bar__btn {
  width: auto;
  justify-content: center;
}

.courses-hub-status.is-error {
  color: var(--nls-color-danger, #c62828);
}

.courses-hub-secondary-actions {
  margin-top: 0.35rem;
}

.admin2-courses-add-backbar {
  padding: 0.5rem 0.65rem;
}

.admin2-courses-add-backbar .course-action {
  margin: 0;
}

/* Narrow viewports: list-first workspace; context + detail + actions open as second step with Back. */
.admin2-mobile-context-backbar {
  display: none;
}

@media (max-width: 900px) {
  .admin2-shell--responsive-mobile[data-mobile-phase="list"] > .admin2-context {
    display: none !important;
  }

  .admin2-shell--responsive-mobile[data-mobile-phase="list"]
    .admin2-mobile-pane--detail,
  .admin2-shell--responsive-mobile[data-mobile-phase="list"]
    .admin2-mobile-pane--actions {
    display: none !important;
  }

  .admin2-shell--responsive-mobile[data-mobile-phase="detail"]
    .admin2-mobile-pane--list {
    display: none !important;
  }

  .admin2-shell--responsive-mobile[data-mobile-phase="detail"]
    > .admin2-mobile-context-backbar {
    display: block;
  }

  .admin2-shell--responsive-mobile[data-mobile-phase="detail"]
    > .admin2-context {
    display: flex !important;
  }

  /* Courses hub: put Actions above Details so Start/Progress/Unenroll stay visible. */
  .admin2-shell--courses-hub[data-mobile-phase="detail"]
    .admin2-grid--courses-hub {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    align-items: stretch;
  }

  .admin2-shell--courses-hub[data-mobile-phase="detail"]
    .admin2-grid--courses-hub
    > .admin2-mobile-pane--actions {
    order: -1;
  }

  .courses-hub-mobile-add-bar {
    display: block;
  }

  .courses-hub-mobile-add-bar__btn {
    width: auto;
  }

  .course-action--hub-add-desktop {
    display: none !important;
  }

  /* Course info (hub + Add course): no nested scroll — phone/page scroll only. */
  .courses-hub-detail__body {
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
    flex: 0 1 auto;
    min-height: auto;
  }

  .admin2-shell--courses-hub .admin2-card.admin2-card--courses-hub-detail {
    min-height: auto;
  }

  /*
   * Course list column: same as detail — #player-main scrolls; no inner list scroller.
   * (Avoids double scroll: player column + list box on mobile list phase.)
   */
  .admin2-shell--courses-hub .courses-hub-list-scroll {
    max-height: none;
    overflow-y: visible;
  }

  .admin2-shell--courses-hub
    .admin2-card--courses-hub-list
    .courses-hub-list-scroll {
    flex: 0 1 auto;
    min-height: auto;
  }

  .admin2-shell--courses-hub[data-mobile-phase="list"]
    .admin2-card.admin2-card--courses-hub-list {
    min-height: auto;
  }

}

/*
 * Courses/Classes player hubs: list + detail grow with content; `#player-main` is the single scroller.
 * Prevent nested scrolling in hierarchy/context cards (both list and detail panes).
 */
.admin2-shell--courses-hub .admin2-card.admin2-card--courses-hub-list,
.admin2-shell--courses-hub .admin2-card.admin2-card--courses-hub-detail {
  overflow-x: hidden;
  overflow-y: visible;
}

.admin2-shell--classes-hub .admin2-card--classes-hub-main {
  overflow-x: hidden;
  overflow-y: visible;
}

.admin2-shell--courses-hub
  .admin2-card--courses-hub-list
  .courses-hub-list-scroll,
.admin2-shell--courses-hub .courses-hub-detail__body {
  flex: 0 1 auto;
  min-height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
  padding-right: 0;
}

.admin2-shell--classes-hub .admin2-card--classes-hub-main .courses-hub-list-scroll {
  flex: 0 1 auto;
  min-height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
  padding-right: 0;
}

.admin2-shell--classes-hub .admin2-card--classes-hub-main {
  min-height: auto;
  min-width: 0;
}

/* Any list/detail pane using admin2 mobile-pane layout should never become an inner scroller. */
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--list,
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--detail {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: visible;
}

.admin2-card.admin2-mobile-pane.admin2-mobile-pane--list
  .courses-hub-list-scroll,
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--list .inbox-feed-scroll,
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--detail
  .courses-hub-detail__body,
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--detail
  .classes-hub-detail__body,
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--detail .inbox-detail-body,
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--detail .notices-list {
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
  padding-right: 0;
}

/* Classes hub: single full-width column; strip outer card chrome (matches Groups / Courses). */
.admin2-grid--classes-hub {
  grid-template-columns: minmax(0, 1fr);
}

.admin2-shell--classes-hub .admin2-grid--classes-hub > .admin2-card--classes-hub-main {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.admin2-shell--classes-hub .classes-hub-aux-mount {
  min-width: 0;
}

.admin2-shell--classes-hub .classes-hub-aux-mount:not(:empty) {
  margin-top: 0.35rem;
}

.classes-hub-class-row__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 0.95rem;
  row-gap: 0.26rem;
  align-items: flex-start;
  width: 100%;
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-border-soft) 72%,
      var(--nls-color-primary) 28%
    );
  border-radius: 12px;
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 88%,
    var(--nls-color-primary-bg-light) 12%
  );
  box-shadow: 0 1px 0 color-mix(in srgb, var(--nls-shadow-color) 10%, transparent);
  padding: 0.56rem 0.65rem;
  text-align: left;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    border-radius 160ms ease;
}

.classes-hub-class-row__toggle:is(:hover, :focus-visible) {
  border-color: var(--nls-color-primary-border-strong);
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 84%,
    var(--nls-color-primary-bg-light) 16%
  );
}

/* Expanded class rows use the Overview card as the primary info surface. */
.classes-hub-class-row.is-expanded .classes-hub-class-row__teacher-meta,
.classes-hub-class-row.is-expanded .classes-hub-class-row__rollups {
  display: none;
}

.classes-hub-class-row__titles {
  display: block;
  min-width: 0;
  width: 100%;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}

.classes-hub-class-row .classes-hub-class-row__toggle {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  row-gap: 0;
  background: #ffffff;
  border: 1px solid rgba(186, 205, 227, 0.82);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

/* Hard lock: class row header bands must be flush to the outer container. */
.courses-hub-expandable__toggle.admin2-hierarchy-row.classes-hub-class-row__toggle {
  padding: 0 !important;
  border-radius: 16px;
  overflow: hidden;
}

.classes-hub-class-row .classes-hub-class-row__titles {
  gap: 0;
  grid-row: 1;
}

.classes-hub-class-row .classes-hub-class-row__teacher-meta,
.classes-hub-class-row .classes-hub-class-row__rollups {
  display: none;
}

.classes-hub-class-row.is-expanded .classes-hub-class-row__toggle {
  border-radius: 16px 16px 0 0;
}

.classes-hub-class-row
  .classes-hub-class-row__titles
  .classes-hub-class-row__node-band {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 0;
  padding: 16px 20px;
  margin: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15), transparent 40%),
    linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #fff;
}

body.is-uniandes-branding-surface
  .classes-hub-class-row
  .classes-hub-class-row__titles
  .classes-hub-class-row__node-band {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15), transparent 40%),
    #030231;
}

body.is-gme-connected-branding-surface
  .classes-hub-class-row
  .classes-hub-class-row__titles
  .classes-hub-class-row__node-band {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15), transparent 40%),
    linear-gradient(135deg, #89a3b4 0%, #5e7686 100%);
}

body.is-gme-united-branding-surface
  .classes-hub-class-row
  .classes-hub-class-row__titles
  .classes-hub-class-row__node-band {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15), transparent 40%),
    linear-gradient(135deg, #0d3f62 0%, #0a3250 100%);
}

.teacher-class-view__pane--overview,
.classes-hub-class-row__panel .teacher-class-view__pane--overview,
.classes-hub-class-row__panel {
  background:
    linear-gradient(to bottom, rgba(59, 130, 246, 0.05), transparent 200px),
    #f8fafc;
}

.classes-hub-class-row
  .classes-hub-class-row__titles
  .classes-hub-class-row__class-band {
  display: none;
}

.classes-hub-class-row__hero-logo-tile {
  width: clamp(48px, 6vw, 64px);
  height: clamp(48px, 6vw, 64px);
  min-width: clamp(48px, 6vw, 64px);
  min-height: clamp(48px, 6vw, 64px);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(219, 233, 248, 0.96);
  box-shadow:
    0 10px 24px -14px rgba(15, 23, 42, 0.6),
    0 2px 6px rgba(15, 23, 42, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.classes-hub-class-row__hero-logo {
  width: 100%;
  height: 100%;
  padding: 0.25rem;
  box-sizing: border-box;
  object-fit: contain;
  display: block;
}

.classes-hub-class-row__hero-logo-tile.classes-hub-class-row__hero-logo-tile--cover {
  border-radius: 12px;
}

.classes-hub-class-row__hero-logo.classes-hub-class-row__hero-logo--cover {
  padding: 0;
  object-fit: cover;
}

body.is-uniandes-branding-surface .classes-hub-class-row__hero-logo,
body:not(.is-logged-out):has(.dev-top-header__brand-logo[src*="uniandes"])
  .classes-hub-class-row__hero-logo {
  padding: 0;
  object-fit: cover;
  transform: scale(1.06);
  transform-origin: center;
}

body.is-edukasindo-branding-surface .classes-hub-class-row__hero-logo-tile,
body:not(.is-logged-out):has(.dev-top-header__brand-logo[src*="edukasindo"])
  .classes-hub-class-row__hero-logo-tile,
body.is-edukasindo-branding-surface
  .classes-hub-class-row__hero-logo-tile.classes-hub-class-row__hero-logo-tile--cover,
body:not(.is-logged-out):has(.dev-top-header__brand-logo[src*="edukasindo"])
  .classes-hub-class-row__hero-logo-tile.classes-hub-class-row__hero-logo-tile--cover {
  border-radius: 16px;
}

body.is-gme-connected-united-branding-surface .classes-hub-class-row__hero-logo-tile,
body.is-gme-connected-united-branding-surface
  .classes-hub-class-row__hero-logo-tile.classes-hub-class-row__hero-logo-tile--cover {
  width: clamp(52px, 6.4vw, 68px);
  height: clamp(52px, 6.4vw, 68px);
  min-width: clamp(52px, 6.4vw, 68px);
  min-height: clamp(52px, 6.4vw, 68px);
  border-radius: 10px;
}

body.is-gme-connected-united-branding-surface .classes-hub-class-row__hero-logo,
body.is-gme-connected-united-branding-surface
  .classes-hub-class-row__hero-logo.classes-hub-class-row__hero-logo--cover {
  padding: 0.12rem;
  object-fit: contain;
}

.classes-hub-class-row__hero-text {
  min-width: 0;
  display: grid;
  gap: 0.24rem;
}

.classes-hub-class-row__hero-campus {
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
}

.classes-hub-class-row__hero-class {
  font-size: 22px;
  line-height: 1.16;
  font-weight: 760;
  color: #fff;
}

.classes-hub-class-row__hero-meta {
  display: none;
}

.classes-hub-class-row__teacher-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.32rem;
  min-height: 1rem;
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
  max-width: 100%;
  justify-content: flex-start;
  text-align: left;
  grid-column: 1;
  grid-row: 3;
}

.courses-hub-expandable__toggle.admin2-hierarchy-row.classes-hub-class-row__toggle
  .classes-hub-class-row__teacher-meta {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  justify-self: start;
  max-width: 100%;
}

.classes-hub-class-row__rollups {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  align-content: center;
  justify-items: end;
  row-gap: 0.28rem;
  min-width: 9.6rem;
}

.classes-hub-class-row__rollup {
  display: inline-flex;
  justify-content: flex-end;
  width: auto;
  min-width: 9rem;
}

.classes-hub-class-row__rollup--progress {
  justify-self: end;
}

.classes-hub-class-row__rollup--score {
  justify-self: end;
}

.classes-hub-class-row__progress-wrap {
  min-width: 168px;
}

.classes-hub-class-row__progress-wrap .progress-node__bar {
  width: 110px;
}

.classes-hub-class-row__progress-wrap .progress-node__bar-text {
  font-size: 0.68rem;
}

.classes-hub-class-row__rollup--score .progress-score-chip {
  font-size: 0.68rem;
}

.classes-hub-class-row__rollup--counts .progress-node__meta {
  font-size: 0.67rem;
  color: var(--nls-color-text-soft);
  text-align: right;
}

.classes-hub-class-row__metric-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 1.62rem;
  font-size: 0.72rem;
  color: var(--nls-color-text-soft);
  text-align: right;
  line-height: 1.2;
}

.classes-hub-class-row__metric-label {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--nls-color-text-soft);
}

.classes-hub-class-row__metric-value {
  font-size: 0.78rem;
  font-weight: 740;
  color: var(--nls-color-text);
}

.classes-hub-class-row__counts-meta {
  font-size: 0.71rem;
  font-weight: 560;
  color: var(--nls-color-text-soft);
}

.classes-hub-class-row__utility-sep {
  color: color-mix(in srgb, var(--nls-color-text-soft) 70%, transparent);
}

.admin2-shell--classes-hub .teacher-classes-list {
  gap: 0.58rem;
}

.classes-hub-class-row__loading-spinner {
  width: 0.72rem;
  height: 0.72rem;
  display: inline-block;
  border-radius: 50%;
  border: 1.6px solid rgba(27, 111, 255, 0.24);
  border-top-color: rgba(27, 111, 255, 1);
  animation: support-capture-spin 0.75s linear infinite;
  vertical-align: middle;
}

.classes-hub-class-row__rollup--counts .progress-node__meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0.78rem;
}

@media (max-width: 900px) {
  .classes-hub-class-row__panel {
    padding: 0.06rem 0.06rem 0.08rem;
  }

  .classes-hub-class-row__panel.admin2-manage-section__panel {
    --classes-nesting-inset-x: 0.55rem;
  }

  .classes-hub-class-row__panel .teacher-student-node__summary {
    padding: 0.24rem 0.24rem;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row.classes-hub-class-row__toggle {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    row-gap: 0.24rem;
    position: static;
    padding: 0.5rem 0.56rem;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row.classes-hub-class-row__toggle
    .classes-hub-class-row__titles {
    grid-column: 1;
    grid-row: 1 / span 2;
    max-width: none;
    min-height: 0;
    display: grid;
    margin: 0;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row.classes-hub-class-row__toggle
    .classes-hub-class-row__teacher-meta {
    grid-column: 1;
    grid-row: 3;
    max-width: 100%;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row.classes-hub-class-row__toggle
    .classes-hub-class-row__rollups {
    grid-column: 1;
    grid-row: 4;
    justify-items: start;
    min-width: 0;
    width: 100%;
    row-gap: 0.16rem;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row.classes-hub-class-row__toggle
    .classes-hub-class-row__rollup {
    justify-content: flex-start;
    min-width: 0;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row.classes-hub-class-row__toggle
    .classes-hub-class-row__metric-text {
    align-items: flex-start;
    text-align: left;
  }
}

.classes-hub-class-row__panel {
  padding: 0;
  overflow: hidden;
}

.classes-hub-class-row__panel > .progress-player-detail.teacher-class-view--inline,
.classes-hub-class-row__panel .teacher-class-view__pane--overview,
.classes-hub-class-row__panel .teacher-class-overview-hero {
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.classes-hub-class-row__panel .teacher-class-view__pane--overview {
  border-radius: 0 0 16px 16px;
}

.classes-hub-class-row__panel .teacher-class-overview-hero {
  margin: 0 !important;
  border-radius: 0 0 16px 16px;
  border-top: 0;
  box-shadow: none;
}

.classes-hub-class-row__panel .progress-player-detail.teacher-class-view--inline {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.teacher-class-view--inline {
  padding-top: 0;
}

.teacher-class-view--admin-manage {
  width: min(100%, 760px);
  max-width: 760px;
  margin-inline: auto;
}

.teacher-class-view__title--inline {
  font-size: 1rem;
  margin: 0 0 0.35rem;
  white-space: pre-line;
}

/* Tighten expanded class internals so student cards nearly touch panel edges. */
.classes-hub-class-row__panel .panel-message {
  margin: 0.04rem 0 0.08rem;
}

.classes-hub-class-row__panel .teacher-roster-list--expanded {
  gap: 0.1rem;
}

.classes-hub-class-row__panel .teacher-roster-list--expanded > .teacher-student-node {
  margin: 0;
}

/* Make student rows flush to class-panel sides (no horizontal gutter). */
.classes-hub-class-row__panel .teacher-roster-list--expanded {
  width: calc(100% + (var(--classes-nesting-inset-x, 0.55rem) * 2));
  margin-left: calc(var(--classes-nesting-inset-x, 0.55rem) * -1);
  margin-right: calc(var(--classes-nesting-inset-x, 0.55rem) * -1);
  max-width: none;
}

.classes-hub-class-row__panel .teacher-class-container {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

/* Available-to-enroll expanded cards:
   - keep one consistent outer border line (no doubled seam)
   - match top/bottom corner radius
   - add balanced bottom breathing room under avatar/content */
.teacher-class-info__available-card .classes-hub-class-row__panel .teacher-class-overview-hero {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: none;
}

.teacher-class-info__available-card .classes-hub-class-row__panel .teacher-class-view__pane--overview {
  border-radius: 0 0 16px 16px;
}

.teacher-class-info__available-card
  .classes-hub-class-row__panel
  .teacher-class-overview-hero__body {
  padding: 0.62rem 0.82rem 0.62rem;
}

/* Uniandes Home Quick Access keeps original breathing room above All courses. */
body.is-uniandes-branding-surface
  .teacher-class-info__available-card
  .classes-hub-class-row__panel
  .teacher-class-overview-hero__body {
  padding-top: 0.95rem;
}

.classes-hub-class-row__panel .teacher-student-node__summary {
  padding: 0.28rem 0.3rem;
}

/* Keep identical horizontal nesting inset across levels:
   class -> student and student -> course. */
.classes-hub-class-row__panel.admin2-manage-section__panel {
  --classes-nesting-inset-x: 0.55rem;
  padding-left: var(--classes-nesting-inset-x);
  padding-right: var(--classes-nesting-inset-x);
}

.classes-hub-class-row__panel .teacher-student-node-expandable__panel {
  padding-left: var(--classes-nesting-inset-x);
  padding-right: var(--classes-nesting-inset-x);
}

/* Remove extra bottom space below the last unit row in expanded course panels. */
.classes-hub-class-row__panel
  .teacher-student-node-expandable__panel
  .progress-history-panel {
  padding-bottom: 0;
}

@media (min-width: 901px) {
  .admin2-shell--responsive-mobile > .admin2-mobile-context-backbar {
    display: none !important;
  }
}

.admin2-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: start;
}

/* Keep hub/list surfaces aligned to the same centered player content width. */
.admin2-grid--player-hub,
.admin2-grid--courses-hub,
.admin2-grid--classes-hub {
  width: min(100%, 760px);
  max-width: 760px;
  margin-inline: auto;
}

/* Shell-level centering guard against grid/flex stretch behavior. */
.admin2-shell--courses-hub .admin2-grid--courses-hub,
.admin2-shell--classes-hub .admin2-grid--classes-hub,
.admin2-shell--groups .admin2-grid--player-hub,
.admin2-shell--store .admin2-grid--player-hub {
  justify-self: center;
}

/* Keep Admin > Node panes on the same standard envelope as Admin Home. */
.admin2-shell--groups .admin2-grid {
  width: min(100%, 760px);
  max-width: 760px;
  margin-inline: auto;
}

/* Ensure shell children don't re-stretch wider than the centered envelope. */
.progress-player-detail.courses-player-view .admin2-shell {
  width: 100%;
}

/* Simple player hubs (Admin, Messages, Shop, catalog): one full-width column like list pane. */
.admin2-grid--player-hub {
  grid-template-columns: minmax(0, 1fr);
}

.progress-player-detail.courses-player-view.admin-bulk-registration-view {
  width: min(100%, 72rem);
  max-width: 72rem;
  margin: 0 auto;
}

.progress-player-detail.courses-player-view.admin-bulk-registration-view.admin-bulk-registration-view--class-full-width {
  width: 100%;
  max-width: none;
  margin: 0;
}

.admin-bulk-scope-pill-wrap {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #1d4ed8 35%, var(--nls-color-border-soft) 65%);
  background: color-mix(in srgb, #dbeafe 62%, var(--nls-color-surface) 38%);
  color: var(--nls-color-primary-strong, #1d4ed8);
  font-weight: 600;
}

@media (min-width: 900px) {
  .admin2-shell--groups
    .admin2-grid--player-hub.admin2-grid--player-hub--inline-add-user-wide {
    width: min(100%, 72rem) !important;
    max-width: 72rem !important;
  }
}

/* Admin2 Groups/Home + Node views: remove extra outer card chrome. */
.admin2-shell--groups .admin2-grid--player-hub > .admin2-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Node-focused panes still use .admin2-grid (not player-hub); strip that wrapper too. */
.admin2-shell--groups .admin2-card.admin2-mobile-pane.admin2-mobile-pane--list,
.admin2-shell--groups .admin2-card.admin2-mobile-pane.admin2-mobile-pane--detail {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Shop follows the same cleaner, no-outer-wrapper treatment. */
.admin2-shell--store .admin2-grid--player-hub > .admin2-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Courses uses same full-width shell as Admin/Progress/Shop/Account. */
.admin2-grid--courses-hub {
  grid-template-columns: minmax(0, 1fr);
}

/* Unified Messages inbox: row 1 = tabs + Archived + compose; row 2 = summary; row 3 = issue subfilters (Support tab). */
.inbox-messages-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--nls-color-border-soft);
}

.inbox-messages-toolbar--notices {
  padding-bottom: 0;
  border-bottom: 0;
}

.inbox-messages-toolbar--support {
  padding-bottom: 0;
  border-bottom: 0;
}

.inbox-messages-toolbar__primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}

.inbox-messages-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}

.inbox-messages-toolbar__primary--notices-inline .inbox-messages-toolbar__actions {
  display: contents;
}

.inbox-messages-toolbar__primary--notices-inline .inbox-view-tabs {
  order: 1;
  flex: 0 1 auto;
}

.inbox-messages-toolbar__primary--notices-inline .inbox-new-notice-action {
  order: 2;
  flex: 0 0 auto;
  margin-left: 0;
}

.inbox-messages-toolbar__primary--notices-inline .inbox-search-bar--inline-actions {
  order: 3;
  flex: 1 1 280px;
  min-width: 220px;
  margin-left: auto;
}

.inbox-view-tabs {
  margin: 0;
  max-width: 100%;
}

.inbox-view-tabs .tabs__list {
  width: 100%;
  align-items: flex-start;
}

.inbox-messages-toolbar__primary .inbox-view-tabs .tabs__item {
  min-height: 2.5rem;
  padding: 8px 10px 10px;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  white-space: normal;
}

.inbox-view-tabs .tabs__item .tabs__item-icon {
  width: 0.88rem;
  height: 0.88rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 0.88rem;
}

.inbox-view-tabs .tabs__item .tabs__item-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.inbox-new-notice-action {
  margin-left: 0;
  white-space: nowrap;
}

.inbox-messages-toolbar__summary {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--nls-color-text-soft);
}

.inbox-messages-toolbar__issues {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}

.support-video-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nls-color-primary);
  background: color-mix(in srgb, var(--nls-color-primary) 10%, white 90%);
}

.support-video-search-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: min(100%, 420px);
  max-width: 100%;
}

.support-video-search-field .inbox-search-bar__field {
  flex: 1 1 auto;
  width: auto;
}

.support-video-row-item {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 12px;
  background: #fff;
}

.admin2-hierarchy-row.support-video-row-button {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 18px;
  grid-template-rows: auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.75rem;
}

.support-video-row__thumb-wrap {
  position: relative;
  display: inline-flex;
  width: 88px;
  height: 64px;
  border-radius: 8px;
  grid-column: 1;
}

.support-video-row__thumb {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--nls-color-border-soft);
  background: #f3f7ff;
}

.support-video-row__play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 999px;
  background: color-mix(in srgb, #0f172a 55%, transparent 45%);
  border: 1px solid color-mix(in srgb, #e2e8f0 60%, transparent 40%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.support-video-row__play-overlay::before {
  content: "";
  margin-left: 0.12rem;
  width: 0;
  height: 0;
  border-top: 0.34rem solid transparent;
  border-bottom: 0.34rem solid transparent;
  border-left: 0.56rem solid #ffffff;
}

.support-video-row__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.16rem;
  min-width: 0;
  grid-column: 2;
}

.support-video-row__title {
  display: block;
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--nls-color-text);
  text-align: left;
}

.support-video-dev-sup {
  font-size: 0.66em;
  font-weight: 700;
  color: var(--nls-color-primary);
  text-transform: lowercase;
}

.support-video-row__desc {
  display: block;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.34;
  color: var(--nls-color-text-soft);
  text-align: left;
}

.support-video-row__meta-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--nls-color-text-soft);
}

.support-video-row__duration {
  font-weight: 600;
}

.support-video-row__chevron {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  font-size: 1.45rem;
  color: var(--nls-color-text-soft);
  line-height: 1;
}

.support-video-library-player {
  width: min(100%, 560px);
  display: block;
  margin: 0.35rem auto 0.5rem;
}

.support-video-detail-card {
  width: min(100%, 760px);
  max-width: 760px;
  margin-inline: auto;
}

.support-video-library-checklist {
  margin: 0.2rem 0 0.8rem 1rem;
  padding: 0;
  display: grid;
  gap: 0.22rem;
  color: var(--nls-color-text-soft);
  font-size: 0.86rem;
}

/* Unified Messages inbox: compact filter chips (not hero nav). */
:is(.inbox-filter-chips, .inbox-messages-toolbar__primary) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 0.15rem;
}

.inbox-filter-chip {
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #f8fafc;
  color: #667085;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.05s ease;
}

.inbox-filter-chip::before {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-flex;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: var(--nls-action-placeholder-icon);
  mask-image: var(--nls-action-placeholder-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Inbox */
:is(.inbox-filter-chips, .inbox-messages-toolbar__primary)
  > .inbox-filter-chip:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22M200-120q-33%200-56.5-23.5T120-200v-560q0-33%2023.5-56.5T200-840h560q33%200%2056.5%2023.5T840-760v560q0%2033-23.5%2056.5T760-120H200Zm0-80h560v-120H640q-30%2038-71.5%2059T480-240q-47%200-88.5-21T320-320H200v120Zm349-142q31-22%2043-58h168v-360H200v360h168q12%2036%2043%2058t69%2022q38%200%2069-22ZM200-200h560-560Z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22M200-120q-33%200-56.5-23.5T120-200v-560q0-33%2023.5-56.5T200-840h560q33%200%2056.5%2023.5T840-760v560q0%2033-23.5%2056.5T760-120H200Zm0-80h560v-120H640q-30%2038-71.5%2059T480-240q-47%200-88.5-21T320-320H200v120Zm349-142q31-22%2043-58h168v-360H200v360h168q12%2036%2043%2058t69%2022q38%200%2069-22ZM200-200h560-560Z%22/%3E%3C/svg%3E");
}

/* Sent */
:is(.inbox-filter-chips, .inbox-messages-toolbar__primary)
  > .inbox-filter-chip:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22M440-400v-166l-64%2064-56-58%20160-160%20160%20160-56%2058-64-64v166h-80ZM200-120q-33%200-56.5-23.5T120-200v-560q0-33%2023.5-56.5T200-840h560q33%200%2056.5%2023.5T840-760v560q0%2033-23.5%2056.5T760-120H200Zm0-80h560v-120H640q-30%2038-71.5%2059T480-240q-47%200-88.5-21T320-320H200v120Zm349-142q31-22%2043-58h168v-360H200v360h168q12%2036%2043%2058t69%2022q38%200%2069-22ZM200-200h560-560Z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22M440-400v-166l-64%2064-56-58%20160-160%20160%20160-56%2058-64-64v166h-80ZM200-120q-33%200-56.5-23.5T120-200v-560q0-33%2023.5-56.5T200-840h560q33%200%2056.5%2023.5T840-760v560q0%2033-23.5%2056.5T760-120H200Zm0-80h560v-120H640q-30%2038-71.5%2059T480-240q-47%200-88.5-21T320-320H200v120Zm349-142q31-22%2043-58h168v-360H200v360h168q12%2036%2043%2058t69%2022q38%200%2069-22ZM200-200h560-560Z%22/%3E%3C/svg%3E");
}

/* Expired */
:is(.inbox-filter-chips, .inbox-messages-toolbar__primary)
  > .inbox-filter-chip:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22m787-145%2028-28-75-75v-112h-40v128l87%2087Zm-587%2025q-33%200-56.5-23.5T120-200v-560q0-33%2023.5-56.5T200-840h560q33%200%2056.5%2023.5T840-760v268q-19-9-39-15.5t-41-9.5v-243H200v560h242q3%2022%209.5%2042t15.5%2038H200Zm0-120v40-560%20243-3%20280Zm80-40h163q3-21%209.5-41t14.5-39H280v80Zm0-160h244q32-30%2071.5-50t84.5-27v-3H280v80Zm0-160h400v-80H280v80ZM720-40q-83%200-141.5-58.5T520-240q0-83%2058.5-141.5T720-440q83%200%20141.5%2058.5T920-240q0%2083-58.5%20141.5T720-40Z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22m787-145%2028-28-75-75v-112h-40v128l87%2087Zm-587%2025q-33%200-56.5-23.5T120-200v-560q0-33%2023.5-56.5T200-840h560q33%200%2056.5%2023.5T840-760v268q-19-9-39-15.5t-41-9.5v-243H200v560h242q3%2022%209.5%2042t15.5%2038H200Zm0-120v40-560%20243-3%20280Zm80-40h163q3-21%209.5-41t14.5-39H280v80Zm0-160h244q32-30%2071.5-50t84.5-27v-3H280v80Zm0-160h400v-80H280v80ZM720-40q-83%200-141.5-58.5T520-240q0-83%2058.5-141.5T720-440q83%200%20141.5%2058.5T920-240q0%2083-58.5%20141.5T720-40Z%22/%3E%3C/svg%3E");
}

/* New notice (5th chip in this row). */
:is(.inbox-filter-chips, .inbox-messages-toolbar__primary)
  > .inbox-filter-chip:nth-child(5)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22M200-120q-33%200-56.5-23.5T120-200v-560q0-33%2023.5-56.5T200-840h240v80H200v560h560v-240h80v240q0%2033-23.5%2056.5T760-120H200Zm440-400v-120H520v-80h120v-120h80v120h120v80H720v120h-80Z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22M200-120q-33%200-56.5-23.5T120-200v-560q0-33%2023.5-56.5T200-840h240v80H200v560h560v-240h80v240q0%2033-23.5%2056.5T760-120H200Zm440-400v-120H520v-80h120v-120h80v120h120v80H720v120h-80Z%22/%3E%3C/svg%3E");
}

.inbox-filter-chip:hover {
  background: #f2f4f7;
  border-color: #98a2b3;
  color: #344054;
}

.inbox-filter-chip.is-active {
  border-color: color-mix(in srgb, #2f6fed 28%, #d0d5dd);
  background: color-mix(in srgb, #2f6fed 12%, #ffffff);
  color: #2f6fed;
  font-weight: 600;
}

/* "New notice" remains an action button in the same row. */
:is(.inbox-filter-chips, .inbox-messages-toolbar__primary)
  > .inbox-filter-chip:last-child {
  margin-left: 8px;
  background: #2f6fed;
  border-color: #2f6fed;
  color: #ffffff;
  font-weight: 500;
}

:is(.inbox-filter-chips, .inbox-messages-toolbar__primary)
  > .inbox-filter-chip:last-child:hover {
  background: #2557c8;
  border-color: #2557c8;
  color: #ffffff;
}

:is(.inbox-filter-chips, .inbox-messages-toolbar__primary)
  > .inbox-filter-chip:last-child:active {
  background: #1f4aa8;
  border-color: #1f4aa8;
}

/* Unified inbox: secondary filters (match Support list + announcement rules). */
.inbox-subfilter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--nls-color-border-soft);
}

.inbox-subfilter-bar--announcements {
  flex-wrap: wrap;
  align-items: center;
}

.inbox-subfilter-bar--announcements .inbox-subfilter-summary {
  flex-basis: 100%;
  margin-top: 0.1rem;
}

.inbox-subfilter-bar__label {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nls-color-text-soft);
}

.inbox-subfilter-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
}

.inbox-subfilter-chip {
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #f8fafc;
  color: #667085;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.inbox-subfilter-chip:hover {
  background: #f2f4f7;
  border-color: #98a2b3;
  color: #344054;
}

.inbox-subfilter-chip.is-active {
  border-color: color-mix(in srgb, #2f6fed 28%, #d0d5dd);
  background: color-mix(in srgb, #2f6fed 12%, #ffffff);
  color: #2f6fed;
  font-weight: 600;
}

.inbox-subfilter-chip:disabled,
.inbox-subfilter-chip.inbox-subfilter-chip--disabled {
  opacity: 0.65;
  background: #f8fafc;
  border-color: #e4e7ec;
  color: #98a2b3;
  cursor: not-allowed;
}

.inbox-subfilter-chip.is-active:disabled,
.inbox-subfilter-chip.is-active.inbox-subfilter-chip--disabled {
  opacity: 0.55;
}

.inbox-subfilter-summary {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--nls-color-text-soft);
  width: 100%;
}

.inbox-search-bar {
  display: block;
  margin-bottom: 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--nls-color-border-soft);
}

.inbox-search-bar--inline-actions {
  margin: 0;
  padding: 0;
  border-bottom: 0;
  flex: 1 1 280px;
  min-width: 200px;
}

.inbox-search-bar__field {
  --inbox-search-icon-slot: 2.6rem;
  position: relative;
  width: min(100%, 320px);
  max-width: 100%;
}

.inbox-search-bar__controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: min(100%, 460px);
  max-width: 100%;
}

.inbox-search-bar__controls .inbox-search-bar__field {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}

.inbox-search-bar__search-btn {
  flex: 0 0 auto;
  margin: 0;
}

body:not(.is-uniandes-branding-surface) .inbox-search-bar__search-btn {
  background: #2f6fed !important;
  border-color: #2f6fed !important;
  color: #ffffff !important;
}

body:not(.is-uniandes-branding-surface)
  .inbox-search-bar__search-btn:is(:hover, :focus-visible):not(:disabled) {
  background: #2557c8 !important;
  border-color: #2557c8 !important;
  color: #ffffff !important;
}

body:not(.is-uniandes-branding-surface)
  .inbox-search-bar__search-btn:active:not(:disabled) {
  background: #1f4aa8 !important;
  border-color: #1f4aa8 !important;
  color: #ffffff !important;
}

body.is-uniandes-branding-surface .inbox-search-bar__search-btn {
  background: #040f72 !important;
  border-color: #040f72 !important;
  color: #ffffff !important;
}

body.is-uniandes-branding-surface
  .inbox-search-bar__search-btn:is(:hover, :focus-visible):not(:disabled) {
  background: #030b57 !important;
  border-color: #030b57 !important;
  color: #ffffff !important;
}

body.is-uniandes-branding-surface .inbox-search-bar__search-btn:active:not(:disabled) {
  background: #020844 !important;
  border-color: #020844 !important;
  color: #ffffff !important;
}

body.is-uniandes-branding-surface .inbox-view-tabs .tabs__item .tabs__item-icon {
  color: #1b62a0;
}

body.is-uniandes-branding-surface .inbox-view-tabs .tabs__item {
  color: #1b62a0;
}

body.is-uniandes-branding-surface .inbox-view-tabs .tabs__item--active {
  color: #040f72;
  border-bottom-color: #040f72;
}

body.is-uniandes-branding-surface .inbox-feed-row__notice-icon {
  border-color: #1b62a0;
  background: color-mix(in srgb, #1b62a0 10%, #ffffff 90%);
  color: #1b62a0;
}

body.is-uniandes-branding-surface .inbox-feed-row__preview,
body.is-uniandes-branding-surface
  .admin2-hierarchy-row.inbox-feed-row
  .admin2-hierarchy-row__title {
  color: #040f72;
}

body.is-uniandes-branding-surface .inbox-feed-row__read-dot--unopened {
  background: #040f72;
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .inbox-search-bar__search-btn {
  background: var(--nls-brand-cta) !important;
  border-color: var(--nls-brand-cta) !important;
  color: #ffffff !important;
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .inbox-search-bar__search-btn:is(:hover, :focus-visible):not(:disabled) {
  background: var(--nls-brand-cta-hover) !important;
  border-color: var(--nls-brand-cta-hover) !important;
  color: #ffffff !important;
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .inbox-search-bar__search-btn:active:not(:disabled) {
  background: var(--nls-brand-cta-active) !important;
  border-color: var(--nls-brand-cta-active) !important;
  color: #ffffff !important;
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .inbox-view-tabs
  .tabs__item
  .tabs__item-icon,
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .inbox-view-tabs
  .tabs__item {
  color: var(--nls-brand-accent);
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .inbox-view-tabs
  .tabs__item--active {
  color: var(--nls-brand-cta);
  border-bottom-color: var(--nls-brand-cta);
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .inbox-feed-row__notice-icon {
  border-color: color-mix(in srgb, var(--nls-brand-accent) 36%, #d0d5dd 64%);
  background: color-mix(in srgb, var(--nls-brand-accent) 10%, #ffffff 90%);
  color: var(--nls-brand-accent);
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .inbox-feed-row__preview,
body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .admin2-hierarchy-row.inbox-feed-row
  .admin2-hierarchy-row__title {
  color: var(--nls-brand-cta);
}

body:is(.is-gme-connected-branding-surface, .is-gme-united-branding-surface)
  .inbox-feed-row__read-dot--unopened {
  background: var(--nls-brand-cta);
}

.inbox-search-bar--inline-actions .inbox-search-bar__field {
  width: 100%;
  max-width: 340px;
}

.inbox-search-bar__icon {
  position: absolute;
  left: 0.82rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--nls-color-text-soft);
  pointer-events: none;
}

.app-section-loading {
  display: grid;
  justify-items: center;
  gap: 0.46rem;
  padding: 0.4rem 0;
}

.app-section-loading__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.44rem;
}

.app-section-loading__dots--mini {
  gap: 0.14rem;
  vertical-align: middle;
}

.app-section-loading__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nls-color-primary, #2563eb) 84%, #60a5fa 16%);
  opacity: 0.18;
  transform: translateY(0) scale(0.88);
  animation: app-section-loading-dot-pulse 0.95s linear infinite;
  animation-delay: var(--app-section-loading-dot-delay, 0s);
}

.app-section-loading__dot--mini {
  width: 0.34rem;
  height: 0.34rem;
}

body.is-uniandes-branding-surface .app-section-loading__dot {
  background: #040f72;
}

.app-section-loading__note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--nls-color-text-soft, #667085);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.app-section-loading.is-showing-message .app-section-loading__note {
  opacity: 1;
  transform: translateY(0);
}

@keyframes app-section-loading-dot-pulse {
  0%,
  100% {
    opacity: 0.18;
    transform: translateY(0) scale(0.88);
  }
  22% {
    opacity: 0.52;
    transform: translateY(-3px) scale(0.96);
  }
  45% {
    opacity: 1;
    transform: translateY(-8px) scale(1.08);
  }
  68% {
    opacity: 0.48;
    transform: translateY(-2px) scale(0.97);
  }
}

.inbox-search-bar__icon svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}

.inbox-search-bar__input {
  width: 100%;
  min-width: 0;
  padding-left: var(--inbox-search-icon-slot);
  padding-right: 1.9rem;
  min-height: 2rem;
  -webkit-appearance: none;
  appearance: none;
}

/* Hard guard: ensure icon and placeholder/text never overlap. */
.inbox-search-bar .inbox-search-bar__input,
.inbox-search-bar--inline-actions .inbox-search-bar__input {
  box-sizing: border-box;
  padding-inline-start: calc(var(--inbox-search-icon-slot) + 0.2rem) !important;
  text-indent: 0;
}

.inbox-search-bar__input::-webkit-search-decoration,
.inbox-search-bar__input::-webkit-search-cancel-button,
.inbox-search-bar__input::-webkit-search-results-button,
.inbox-search-bar__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.inbox-search-bar__clear {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nls-color-text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

.inbox-search-bar__clear:hover {
  background: color-mix(in srgb, var(--nls-color-border) 26%, transparent);
  color: var(--nls-color-text);
}

.inbox-search-bar__clear:focus-visible {
  outline: 2px solid var(--nls-color-primary);
  outline-offset: 1px;
}

@media (max-width: 900px) {
  .inbox-search-bar__field {
    width: 100%;
  }

  .inbox-search-bar__controls {
    width: 100%;
  }

  .inbox-search-bar--inline-actions {
    flex-basis: 100%;
    width: 100%;
  }

  .inbox-messages-toolbar__primary--notices-inline .inbox-search-bar--inline-actions {
    flex-basis: 100%;
    width: 100%;
  }

  .inbox-search-bar--inline-actions .inbox-search-bar__field {
    max-width: 100%;
  }

  /* Mobile toolbar stacking: tabs -> action -> search */
  .inbox-messages-toolbar__primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    align-items: stretch;
  }

  .inbox-messages-toolbar__primary .inbox-view-tabs {
    order: 1;
    width: 100%;
  }

  .inbox-messages-toolbar__primary .inbox-view-tabs .tabs__track {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
  }

  .inbox-messages-toolbar__primary .inbox-messages-toolbar__actions {
    order: 2;
    width: 100%;
    justify-content: flex-start;
  }

  .inbox-messages-toolbar__primary .inbox-search-bar--inline-actions {
    order: 3;
    width: 100%;
  }
}

/* Inbox list row: badges (kind on “All” + state) → preview → “Yours”|sender · time (see paintUnifiedInboxIntoPlayer). */
.admin2-hierarchy-row.inbox-feed-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
}

.admin2-hierarchy-row.inbox-feed-row.inbox-feed-row--notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "badges badges badges"
    "media stack actions";
  align-items: start;
  gap: 0.28rem 0.62rem;
  padding: 0.52rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--nls-color-border-soft, #d0d5dd) 72%, #c8d7eb 28%);
  border-radius: 11px;
  background: color-mix(in srgb, var(--nls-color-surface, #fff) 95%, #f8fbff 5%);
}

.admin2-hierarchy-row.inbox-feed-row.inbox-feed-row--notice.inbox-feed-row--clickable {
  cursor: pointer;
}

.admin2-hierarchy-row.inbox-feed-row.inbox-feed-row--notice.inbox-feed-row--clickable:hover {
  background: color-mix(in srgb, var(--nls-color-surface, #fff) 90%, #eff6ff 10%);
}

.admin2-hierarchy-row.inbox-feed-row.inbox-feed-row--notice.inbox-feed-row--clickable:focus-visible {
  outline: 2px solid var(--nls-color-primary, #2563eb);
  outline-offset: 2px;
}

.admin2-shell--unified-inbox .admin2-hierarchy-row.inbox-feed-row.inbox-feed-row--notice:hover {
  background: color-mix(in srgb, var(--nls-color-surface, #fff) 90%, #eff6ff 10%);
}

.admin2-shell--unified-inbox .courses-hub-row-item.is-expanded {
  box-shadow: inset 3px 0 0 var(--nls-color-primary, #2563eb);
  border-radius: 11px;
}

.courses-hub-row-item.is-expanded .admin2-hierarchy-row.inbox-feed-row.inbox-feed-row--notice {
  background: rgba(37, 99, 235, 0.06);
  border-color: color-mix(in srgb, var(--nls-color-primary, #2563eb) 42%, #cbd5e1 58%);
  border-left: 3px solid var(--nls-color-primary, #2563eb);
  padding-left: calc(0.58rem - 2px);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.admin2-hierarchy-row.inbox-feed-row.inbox-feed-row--notice.inbox-feed-row--notice-action {
  border-color: color-mix(in srgb, var(--nls-color-primary, #2563eb) 28%, #cbd5e1 72%);
  background: color-mix(in srgb, #eef4ff 36%, #ffffff 64%);
}

.admin2-hierarchy-row.inbox-feed-row.inbox-feed-row--with-dev-actions {
  position: relative;
  padding-right: 4.2rem;
}

.admin2-hierarchy-row.inbox-feed-row .inbox-notice-dev-actions {
  position: absolute;
  top: 0.32rem;
  right: 0.32rem;
}

.inbox-feed-row__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  grid-area: badges;
}

.inbox-feed-row__badges:empty {
  display: none;
}

.inbox-feed-row__stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.18rem;
  min-width: 0;
  flex: 1;
  text-align: left;
  grid-area: stack;
}

.inbox-feed-row__media {
  grid-area: media;
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
  align-self: start;
  padding-top: 0.08rem;
}

.inbox-feed-row__read-dot {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}

.inbox-feed-row__read-dot--unopened {
  background: color-mix(in srgb, var(--nls-color-primary, #2563eb) 84%, #3b82f6 16%);
}

.inbox-feed-row__read-dot--opened {
  background: color-mix(in srgb, #94a3b8 80%, #cbd5e1 20%);
}

.inbox-feed-row__notice-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--nls-color-border-soft, #d0d5dd) 78%, #c5d8f2 22%);
  background: color-mix(in srgb, var(--nls-color-surface, #fff) 90%, #f2f7ff 10%);
  color: color-mix(in srgb, var(--nls-color-primary, #2563eb) 78%, #1d4ed8 22%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.inbox-feed-row__notice-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.inbox-feed-row__preview {
  display: block;
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
  color: #0f172a;
}

.inbox-feed-row__title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.inbox-feed-row__preview .inbox-notice-title-priority-pill {
  margin-left: 0.52rem;
  vertical-align: middle;
}

.inbox-feed-row__snippet {
  display: block;
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.34;
  color: var(--nls-color-text-soft, #667085);
  overflow-wrap: anywhere;
}

.inbox-feed-row__sender {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.32rem;
  min-width: 0;
}

.inbox-feed-row__sender-name {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--nls-color-text, #0f172a);
  overflow-wrap: anywhere;
}

.inbox-feed-row__details {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.38;
  font-weight: 500;
  color: var(--nls-color-text-soft);
  overflow-wrap: anywhere;
}

.inbox-feed-row__actions {
  grid-area: actions;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.44rem;
  align-self: center;
}

.inbox-feed-row__primary-action {
  min-height: 1.62rem;
  min-width: 0;
  width: auto;
  padding: 0.2rem 0.55rem;
  font-size: 0.76rem;
  line-height: 1.1;
  border-radius: 0.55rem;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.inbox-feed-row__icon-action {
  width: 1.7rem;
  min-width: 1.7rem;
  padding: 0;
  justify-content: center;
}

.inbox-feed-row__icon-action .course-action__label {
  display: none;
}

.inbox-feed-row__primary-action.inbox-feed-row__primary-action--close {
  background: #2f6fed !important;
  color: #ffffff !important;
  border-color: #2f6fed !important;
}

.inbox-feed-row__primary-action.inbox-feed-row__primary-action--close:hover:not(:disabled),
.inbox-feed-row__primary-action.inbox-feed-row__primary-action--close:focus-visible {
  background: #2557c8 !important;
  border-color: #2557c8 !important;
}

.inbox-feed-row__primary-action.inbox-feed-row__primary-action--close:active:not(:disabled) {
  background: #1f4aa8 !important;
  border-color: #1f4aa8 !important;
}

.inbox-feed-row__when {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.24;
  text-align: right;
  white-space: pre-line;
  color: var(--nls-color-text-soft, #667085);
}

.inbox-feed-row__when--mobile {
  display: none;
}

.inbox-feed-row__when--desktop {
  margin-left: auto;
  white-space: nowrap;
  flex: 0 0 auto;
}

.admin2-hierarchy-row.inbox-feed-row.inbox-feed-row--home-communication {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "badges badges"
    "media stack";
}

.inbox-feed-row--home-communication .inbox-feed-row__preview {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inbox-feed-row--home-communication .inbox-feed-row__snippet {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inbox-meta-pill--notice {
  padding: 0.08rem 0.24rem;
}

.inbox-meta-pill--notice svg {
  width: 0.84rem;
  height: 0.84rem;
  display: block;
  fill: currentColor;
}

.inbox-subfilter-chip--load-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.inbox-subfilter-chip--load-more .course-action__icon {
  width: 0.88rem;
  height: 0.88rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inbox-subfilter-chip--load-more .inbox-managed-load-more__count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--nls-color-text-soft, #667085);
}

.admin2-shell--unified-inbox .courses-hub-row-item.is-expanded .courses-hub-row-expand {
  border-left: 3px solid var(--nls-color-primary, #2563eb);
  margin-top: 0;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-right: 0.8rem;
  background: color-mix(in srgb, var(--nls-color-primary-bg-light, #eef4ff) 28%, var(--nls-color-surface, #fff) 72%);
}

.admin2-shell--unified-inbox .inbox-detail-body .inbox-unified-card--notice {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.admin2-shell--unified-inbox .courses-hub-row-item.is-expanded .inbox-unified-card__meta-strip {
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid color-mix(in srgb, var(--nls-color-primary, #2563eb) 24%, #cbd5e1 76%);
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
}

.admin2-shell--unified-inbox .inbox-unified-card__body--notice-plain {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
}

@media (max-width: 900px) {
  .admin2-shell--unified-inbox .inbox-unified-card__meta-strip {
    gap: 0.45rem;
  }

  .admin2-shell--unified-inbox .inbox-unified-card__meta-group {
    width: 100%;
  }

  .admin2-shell--unified-inbox .inbox-unified-card__meta-group:not(:last-child)::after {
    display: none;
  }

  /* Mobile notice/support row compaction */
  .admin2-hierarchy-row.inbox-feed-row.inbox-feed-row--notice {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "badges badges badges"
      "media stack actions"
      "media when actions";
    align-items: center;
    gap: 0.38rem 0.5rem;
    padding: 0.78rem 0.82rem;
  }

  .admin2-hierarchy-row.inbox-feed-row.inbox-feed-row--home-communication {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "badges badges"
      "media stack";
    gap: 0.38rem 0.5rem;
  }

  .inbox-feed-row__media {
    gap: 0.4rem;
    padding-top: 0;
    align-self: start;
  }

  .inbox-feed-row__read-dot {
    width: 6px;
    height: 6px;
  }

  .inbox-feed-row__notice-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .inbox-feed-row__notice-icon svg {
    width: 15px;
    height: 15px;
  }

  .inbox-feed-row__stack {
    gap: 0.15rem;
  }

  .inbox-feed-row__preview {
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .inbox-feed-row__snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.28;
  }

  .inbox-feed-row--home-communication .inbox-feed-row__snippet {
    -webkit-line-clamp: 2;
  }

  .inbox-feed-row--home-communication .inbox-feed-row__when--desktop {
    display: none;
  }

  .inbox-feed-row--home-communication .inbox-feed-row__when--mobile {
    display: block;
    white-space: nowrap;
    line-height: 1.2;
    font-size: 0.7rem;
    margin-top: 0.08rem;
    text-align: left;
  }

  .inbox-feed-row--home-communication .inbox-feed-row__title-row {
    display: block;
  }

  .inbox-feed-row__actions {
    display: contents;
  }

  .inbox-feed-row__when {
    grid-area: when;
    margin-top: 0.08rem;
    text-align: left;
    white-space: normal;
    line-height: 1.2;
    font-size: 0.7rem;
  }

  .inbox-feed-row__primary-action {
    grid-area: actions;
    justify-self: end;
    align-self: start;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.85rem;
    border-radius: 10px;
    white-space: nowrap;
  }

  .admin2-shell--unified-inbox .inbox-unified-card__meta-values {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }

  .admin2-shell--unified-inbox .inbox-unified-card__meta-pill {
    max-width: 230px;
  }

  .admin2-shell--unified-inbox .inbox-unified-card__meta-pill--sentto {
    max-width: min(100%, 280px);
  }
}

.inbox-feed-row__sender .inbox-you-pill {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.15;
  padding: 0.06rem 0.32rem;
  border-radius: 4px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-accent, #7c3aed) 42%,
      var(--nls-color-border-soft)
    );
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 76%,
    var(--nls-color-accent-bg, #ede9fe) 24%
  );
  color: var(--nls-color-accent-strong, #5b21b6);
}

.inbox-feed-row .inbox-type-pill,
.inbox-feed-row .inbox-state-pill,
.inbox-feed-row .inbox-meta-pill,
.inbox-feed-row .inbox-audience-pill,
.support-thread-card .inbox-feed-row__badges .inbox-type-pill,
.support-thread-card .inbox-feed-row__badges .inbox-state-pill,
.support-thread-card .inbox-feed-row__badges .inbox-meta-pill,
.notices-card .notices-card__context-badges .inbox-type-pill,
.notices-card .notices-card__context-badges .inbox-meta-pill,
.notices-card .notices-card__context-badges .inbox-audience-pill {
  flex-shrink: 0;
}

/* Compact “You” before name (notice sender row + support from-line), not in the type/state badge row. */
.notices-card__sender .inbox-you-pill,
.support-thread-meta-line .inbox-you-pill {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.15;
  padding: 0.06rem 0.32rem;
  border-radius: 4px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-accent, #7c3aed) 42%,
      var(--nls-color-border-soft)
    );
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 76%,
    var(--nls-color-accent-bg, #ede9fe) 24%
  );
  color: var(--nls-color-accent-strong, #5b21b6);
}

.support-thread-meta-line--from {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.inbox-feed-row .inbox-meta-pill,
.inbox-feed-row .inbox-audience-pill,
.notices-card .notices-card__context-badges .inbox-meta-pill,
.notices-card .notices-card__context-badges .inbox-audience-pill,
.notice-compose__scope-pill {
  font-weight: 600;
  opacity: 0.95;
}

/* Explicit chip colors so badges never inherit dev-view `button { color: surface }`. */
.inbox-feed-row .class-status-chip,
.support-thread-card .inbox-feed-row__badges .class-status-chip,
.notices-card .notices-card__context-badges .class-status-chip,
.notice-compose__scope-pill {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-primary, #2563eb) 38%,
      var(--nls-color-border-soft)
    );
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 82%,
    var(--nls-color-primary-bg, #dbeafe) 18%
  );
  color: var(--nls-color-primary-strong, #1d4ed8);
}


.inbox-feed-row .inbox-priority-pill,
.notices-card .notices-card__context-badges .inbox-priority-pill {
  color: #7c2d12;
  border-color: color-mix(in srgb, #ea580c 58%, #f59e0b 42%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ffedd5 86%, #ffffff 14%),
    color-mix(in srgb, #fdba74 34%, #ffffff 66%)
  );
  font-weight: 800;
}

body.is-uniandes-branding-surface .inbox-feed-row .inbox-priority-pill,
body.is-uniandes-branding-surface
  .notices-card
  .notices-card__context-badges
  .inbox-priority-pill,
body.is-uniandes-branding-surface
  .inbox-feed-row__preview
  .inbox-notice-title-priority-pill,
body.is-uniandes-branding-surface .inbox-notice-title-priority-pill {
  color: #1b62a0;
  border-color: #1b62a0;
  background: color-mix(in srgb, #1b62a0 10%, #ffffff 90%);
}

.support-thread-context-badges {
  justify-self: start;
}

.support-thread-card .inbox-feed-row__badges .inbox-state-pill.has-alert,
.support-thread-meta-line .inbox-you-pill.has-alert {
  position: relative;
  padding-right: 0.55rem;
}

.support-thread-card .inbox-feed-row__badges .inbox-state-pill.has-alert::after,
.support-thread-meta-line .inbox-you-pill.has-alert::after {
  content: "";
  position: absolute;
  top: 0.08rem;
  right: 0.12rem;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 1.5px var(--nls-color-surface, #fff);
}

.admin2-announce-compose__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0.35rem 0 0.5rem;
}

.notice-compose__meta-inline-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
  gap: 0.6rem 0.75rem;
  overflow: visible;
}

.notice-compose__meta-inline-row .support-resolve-composer__field {
  display: grid;
  align-items: start;
  gap: 0.28rem;
  white-space: normal;
  min-width: 0;
  width: 100%;
}

.notice-compose__meta-inline-row .support-resolve-composer__field > span {
  font-size: 0.78rem;
  margin: 0;
  text-align: left;
  width: 100%;
}

.notice-compose__inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.4rem;
  margin-right: 0;
  white-space: nowrap;
  justify-self: start;
}

.notice-compose__meta-select {
  display: block;
  margin-top: 0.28rem;
  width: 100%;
  max-width: 100%;
}

.notice-compose__meta-select--inline {
  margin-top: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.notice-compose__input--inline {
  width: 100%;
  max-width: 100%;
  min-height: 2.55rem;
  height: 2.55rem;
  padding: 0.42rem 0.65rem;
  border-radius: 10px;
  line-height: 1.15;
  resize: none;
}

.notice-compose__input--inline-datetime {
  --nls-inline-datetime-width: 20rem;
  --nls-inline-date-width: 11.6rem;
  --nls-inline-time-width: 8rem;
  min-width: 0;
  width: 100%;
  max-width: var(--nls-inline-datetime-width);
  padding-right: 2.2rem;
}

.notice-compose__input--inline-datetime::-webkit-datetime-edit {
  padding-right: 0.15rem;
}

.notice-compose__input--inline-datetime::-webkit-calendar-picker-indicator {
  margin: 0;
  opacity: 0.95;
  cursor: pointer;
}

.admin2-schedule-datetime-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
}

.admin2-schedule-policy-field {
  flex: 1 1 100%;
  width: 100% !important;
  max-width: 100%;
}

.admin2-schedule-policy-row {
  flex-wrap: wrap;
  max-width: 100%;
}

.admin2-schedule-policy-row .admin2-schedule-policy-select {
  flex: 0 1 12rem;
  width: 12rem;
  min-width: 10rem;
  max-width: min(100%, 14rem);
}

.admin2-schedule-datetime-date {
  flex: 0 0 9rem;
  width: 9rem;
  min-width: 9rem;
  max-width: 9rem;
  --nls-inline-date-width: 9rem;
}

.admin2-schedule-datetime-time {
  flex: 0 0 7rem;
  width: 7rem;
  min-width: 7rem;
  max-width: 7rem;
  --nls-inline-time-width: 7rem;
}

.admin2-schedule-datetime-row .admin2-schedule-datetime-date {
  flex: 0 0 9rem !important;
  width: 9rem !important;
  min-width: 9rem !important;
  max-width: 9rem !important;
}

.admin2-schedule-datetime-row .admin2-schedule-datetime-time {
  flex: 0 0 7rem !important;
  width: 7rem !important;
  min-width: 7rem !important;
  max-width: 7rem !important;
}

.admin2-schedule-datetime-clear {
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  border: 1px solid var(--nls-color-border);
  border-radius: 999px;
  background: var(--nls-color-surface-elevated);
  color: var(--nls-color-text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0;
}

.admin2-schedule-datetime-clear:hover:not(:disabled) {
  color: var(--nls-color-text);
  border-color: var(--nls-color-primary);
  background: color-mix(in srgb, var(--nls-color-primary) 8%, var(--nls-color-surface-elevated));
}

.admin2-schedule-datetime-clear:focus-visible {
  outline: 2px solid var(--nls-color-primary);
  outline-offset: 1px;
}

.admin2-schedule-datetime-clear:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.class-courses-lock-btn {
  transition:
    color 120ms ease,
    border-color 120ms ease,
    background-color 120ms ease;
}

.class-courses-lock-btn.class-courses-lock-btn--locked {
  color: #dc2626;
  border-color: color-mix(in srgb, #dc2626 30%, var(--nls-color-border));
  background: color-mix(
    in srgb,
    #dc2626 10%,
    var(--nls-color-surface-elevated)
  );
}

.class-courses-lock-btn.class-courses-lock-btn--unlocked {
  color: #16a34a;
  border-color: color-mix(in srgb, #16a34a 30%, var(--nls-color-border));
  background: color-mix(
    in srgb,
    #16a34a 10%,
    var(--nls-color-surface-elevated)
  );
}

.class-courses-lock-btn:disabled {
  opacity: 0.86;
}

@media (max-width: 760px) {
  .notice-compose__meta-inline-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .notice-compose__inline-toggle {
    margin-top: 0.15rem;
  }
}

.inbox-feed-row__sender-prefix,
.inbox-feed-row__scope-label {
  font-size: 0.78rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
}

.notices-card .notices-card__context-badges {
  margin: 0 0 0.25rem;
}

.admin2-hierarchy-row.inbox-feed-row .admin2-hierarchy-row__title,
.admin2-hierarchy-row.inbox-feed-row .admin2-hierarchy-row__meta,
.admin2-hierarchy-row.inbox-feed-row .inbox-feed-row__details {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin2-hierarchy-row.inbox-feed-row .admin2-hierarchy-row__title {
  align-self: flex-start;
  text-align: left;
}

/*
 * Unified Inbox: list + detail grow with content (taller column sets row height).
 * No nested scroll inside the list or detail body — `#player-main` scrolls as one pane.
 * (Card `min-height: auto` is re-applied after `.admin2-card.admin2-card--courses-hub-*` below — same two-class specificity would otherwise lose the cascade tie.)
 */

.admin2-shell--unified-inbox
  .admin2-card--courses-hub-list
  .courses-hub-list-scroll,
.admin2-shell--unified-inbox .courses-hub-list-scroll.inbox-feed-scroll {
  flex: 0 1 auto;
  min-height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
  scrollbar-gutter: stable both-edges;
  padding-right: 0.45rem;
}

.admin2-shell--unified-inbox .courses-hub-detail__body,
.admin2-shell--unified-inbox .inbox-detail-body {
  flex: 0 1 auto;
  min-height: auto;
  min-width: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
  overflow-wrap: anywhere;
}

.admin2-shell--unified-inbox .inbox-detail-body .notices-list {
  min-height: auto;
  overflow: visible;
}

.admin2-shell--unified-inbox .inbox-notice-compose__intro {
  margin: 0;
}

.admin2-shell--unified-inbox .inbox-detail-body--notice-compose {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* Unified inbox should respect the same standard player envelope as classes/courses. */
.progress-player-detail.courses-player-view:has(.admin2-shell--unified-inbox) {
  width: min(100%, 760px);
  max-width: 760px;
}

.admin2-shell--unified-inbox .admin2-grid--player-hub {
  width: min(100%, 760px);
  max-width: 760px;
}

/*
 * Courses / Classes hubs reuse `.admin2-grid` (2 columns on desktop for list | detail).
 * On mobile list phase only the list pane is visible — without this, the list card sits in
 * column 1 only (~half viewport width) while Progress uses a single full-width column.
 */
@media (max-width: 900px) {
  .admin2-shell--courses-hub[data-mobile-phase="list"]
    .admin2-grid--courses-hub,
  .admin2-shell--classes-hub[data-mobile-phase="list"]
    .admin2-grid--classes-hub {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin2-card {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 12px;
  background: var(--nls-color-surface-alt);
  padding: 0.65rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  align-content: start;
}

/* Player Courses hubs: no admin2-card__title row — flex fills the pane (overrides display:grid above). */
.admin2-card.admin2-card--courses-hub-list,
.admin2-card.admin2-card--courses-hub-detail,
.admin2-card.admin2-card--courses-hub-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
}

/* Course rows already carry their own container chrome. */
.admin2-shell--courses-hub .admin2-card.admin2-card--courses-hub-list {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.admin2-card--courses-hub-list .courses-hub-list-scroll {
  flex: 1;
  min-height: 0;
}

.admin2-shell--unified-inbox .admin2-card.admin2-card--courses-hub-list,
.admin2-shell--unified-inbox .admin2-card.admin2-card--courses-hub-detail {
  min-height: auto;
  min-width: 0;
}

.admin2-card--full {
  grid-column: 1 / -1;
}

.admin2-card.admin2-card--player-hub {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
}

/* Progress course rows are self-contained; remove extra shell chrome. */
.admin2-card.admin2-card--progress-hub-list {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

/* Titles that are direct children of the card span the full width (no empty “column 1” gap). */
.admin2-card__title {
  grid-column: 1;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: inherit;
  padding-left: 0;
}

.admin2-card__title-row {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0;
}

.admin2-card__title-row .admin2-card__title {
  padding-left: 0;
}

.admin2-users-heading-row {
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin2-users-heading-hint {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.2;
  color: var(--nls-color-text-muted);
}

.admin2-title-refresh {
  border: none;
  background: transparent;
  color: var(--nls-color-text-soft, #64748b);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 0.05rem;
  cursor: pointer;
}

.admin2-title-refresh:hover,
.admin2-title-refresh:focus-visible {
  color: var(--nls-color-text, #0f172a);
}

.admin2-title-refresh:disabled {
  opacity: 0.5;
  cursor: default;
}

.admin2-card__title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin2-card__title-bar .admin2-card__title {
  min-width: 0;
}

.admin2-node-title__type {
  color: var(--nls-color-primary-strong, #1d4ed8);
}

.admin2-node-title__sep {
  color: var(--nls-color-text-soft, #64748b);
  margin: 0 0.3rem;
}

.admin2-node-title__name {
  color: var(--nls-color-text, #0f172a);
}

.admin2-context-open-next {
  margin-left: auto;
}

.admin2-home-table {
  display: grid;
  gap: 0.45rem;
}

.admin2-home-table__actions {
  margin-bottom: 0.05rem;
}

.admin2-archive-tabs {
  margin: 0.15rem 0 0.5rem;
  max-width: 100%;
}

.admin2-archive-tabs .tabs__item {
  min-height: 1.95rem;
  font-size: 0.78rem;
}

.admin2-archive-tabs .tabs__item:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.admin2-search-utility-bar {
  margin: 0 0 0.35rem;
  padding: 0;
  border: 0;
}

.admin2-search-utility-bar .admin2-search-utility-field {
  width: min(100%, 320px);
}

.admin2-search-utility-bar .inbox-search-bar__input {
  min-height: 2rem;
}

.admin2-search-role-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.admin2-search-role-row .admin2-search-utility-bar {
  margin: 0;
  flex: 1 1 300px;
  min-width: 220px;
}

.admin2-search-role-row .admin2-search-role-filters {
  margin: 0;
  flex: 0 1 auto;
  gap: 0.45rem;
}

.admin2-users-search-toolbar {
  align-items: center;
  flex-wrap: nowrap;
}

.admin2-users-search-toolbar .admin2-users-search-toolbar__actions {
  margin: 0;
  flex: 0 1 auto;
}

.admin2-users-search-toolbar .admin2-search-utility-bar {
  margin: 0;
  flex: 1 1 280px;
  min-width: 220px;
}

.admin2-users-search-toolbar .admin2-search-utility-bar .admin2-search-utility-field {
  width: 100%;
}

.admin2-users-results {
  display: grid;
  gap: 0.45rem;
}

.admin2-user-result {
  width: 100%;
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.94);
  color: #172033;
  padding: 0.65rem 0.75rem;
  text-align: left;
  cursor: pointer;
}

.admin2-user-result:is(:hover, :focus-visible):not(:disabled) {
  border-color: rgba(47, 111, 237, 0.55);
  background: #f8fbff;
}

.admin2-users-search-toolbar .admin2-users-search-toolbar__search-btn,
.admin2-schedule-datetime-row .admin2-schedule-lock-btn {
  flex: 0 0 auto;
  margin: 0;
  background: #2f6fed !important;
  border-color: #2f6fed !important;
  color: #ffffff !important;
  white-space: nowrap;
}

.admin2-users-search-toolbar .admin2-users-search-toolbar__search-btn:is(:hover, :focus-visible):not(:disabled),
.admin2-schedule-datetime-row .admin2-schedule-lock-btn:is(:hover, :focus-visible):not(:disabled) {
  background: #2557c8 !important;
  border-color: #2557c8 !important;
  color: #ffffff !important;
}

.admin2-users-search-toolbar .admin2-users-search-toolbar__search-btn:active:not(:disabled),
.admin2-schedule-datetime-row .admin2-schedule-lock-btn:active:not(:disabled) {
  background: #1f4aa8 !important;
  border-color: #1f4aa8 !important;
  color: #ffffff !important;
}

.admin2-schedule-datetime-row .admin2-schedule-lock-btn .course-action__label {
  white-space: nowrap;
}

.admin2-schedule-datetime-row .admin2-schedule-lock-btn:not(:disabled),
.admin2-schedule-datetime-row .admin2-schedule-lock-btn:not(:disabled) .course-action__icon,
.admin2-schedule-datetime-row .admin2-schedule-lock-btn:not(:disabled) .course-action__label,
.admin2-schedule-datetime-row .admin2-schedule-lock-btn:is(:hover, :focus-visible):not(:disabled),
.admin2-schedule-datetime-row .admin2-schedule-lock-btn:active:not(:disabled) {
  color: #ffffff !important;
}

.admin2-schedule-datetime-row .admin2-schedule-lock-btn:disabled,
.admin2-schedule-datetime-row .admin2-schedule-lock-btn:disabled *,
.admin2-schedule-datetime-row .admin2-schedule-lock-btn[disabled],
.admin2-schedule-datetime-row .admin2-schedule-lock-btn[disabled] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

.admin2-schedule-datetime-row .admin2-schedule-lock-btn.admin2-schedule-lock-btn--teacher-unlocked {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
  opacity: 1 !important;
  cursor: default;
}

.admin2-schedule-datetime-row .admin2-schedule-lock-btn.admin2-schedule-lock-btn--teacher-locked {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  cursor: default;
}

.admin2-schedule-datetime-row
  .admin2-schedule-lock-btn:is(
    .admin2-schedule-lock-btn--teacher-unlocked,
    .admin2-schedule-lock-btn--teacher-locked
  )
  .course-action__label {
  color: #ffffff !important;
}

.admin2-users-search-mobile-hint {
  display: none;
  margin: 0.15rem 0 0.35rem;
  color: var(--nls-color-text-muted, #667085);
  font-size: 0.62rem;
  line-height: 1.25;
}

@media (max-width: 700px) {
  .admin2-users-search-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .admin2-users-search-toolbar .admin2-search-utility-bar {
    flex: 1 1 100%;
    min-width: 0;
  }

  .admin2-users-search-toolbar .admin2-users-search-toolbar__search-btn {
    width: 100%;
    justify-content: center;
  }

  .admin2-schedule-policy-row .admin2-schedule-policy-select {
    flex: 1 1 10rem;
    width: auto;
  }

  .admin2-users-search-mobile-hint {
    display: block;
  }
}

.admin2-people-hub-entry {
  font-weight: 600;
}

.admin2-card--people-hub .admin2-people-hub__primary {
  margin-bottom: 0.65rem;
}

.admin2-card--people-hub .admin2-people-hub__primary .course-action {
  width: fit-content;
  max-width: 100%;
  justify-content: flex-start;
}

.admin2-people-hub__shortcuts-label {
  margin: 0 0 0.35rem;
}

.admin2-people-hub__shortcuts {
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin2-card--sku-create .admin2-hierarchy-backbar {
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.admin2-sku-create__helper {
  margin: 0 0 0.55rem;
}

.admin2-sku-create-form {
  display: grid;
  gap: 0.7rem;
}

.admin2-sku-create-form__section {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
  display: grid;
  gap: 0.45rem;
}

.admin2-sku-create-form__section-title {
  margin: 0;
  font-size: 0.9rem;
}

.admin2-sku-create-form__mini-header {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  color: var(--nls-color-text-soft);
}

.admin2-sku-create-form__field {
  display: grid;
  gap: 0.22rem;
}

.admin2-sku-create-form__field--missing .admin2-sku-create-form__label {
  color: #c56a05;
}

.admin2-sku-create-form__field--missing .writing-input,
.admin2-sku-create-form__field--missing .create-class-course-list {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 65%, transparent 35%);
  background: color-mix(in srgb, #fff7e6 55%, #ffffff 45%);
}

.admin2-sku-create-form__label {
  font-size: 0.78rem;
  color: var(--nls-color-text-muted);
  font-weight: 600;
}

.admin2-sku-create-form__field-stack {
  display: grid;
  gap: 0.45rem;
}

.admin2-sku-codes-row__detail-item {
  display: block;
  line-height: 1.42;
}

.admin2-sku-codes-row__detail-key {
  font-weight: 700;
  color: var(--nls-color-text, #0f172a);
}

.admin2-sku-codes-row__detail-value {
  font-weight: 400;
  color: var(--nls-color-text-soft, #475569);
}

.admin2-sku-codes-row__remaining-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0.28rem 0.45rem;
  background: #ffffff;
}

.admin2-sku-codes-row__remaining-label {
  font-size: 0.84rem;
  color: var(--nls-color-text-soft, #64748b);
}

.admin2-sku-codes-row__remaining-value {
  min-width: 2ch;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--nls-color-text, #0f172a);
}

.admin2-sku-codes-row--deactivated {
  opacity: 0.62;
  filter: saturate(0.55);
}

.admin2-sku-codes-row__state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-right: 0.3rem;
  border: 1px solid transparent;
}

.admin2-sku-codes-row__state-pill[hidden] {
  display: none !important;
}

.admin2-sku-codes-row__state-pill--hidden {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #cbd5e1;
}

.admin2-sku-codes-row__state-pill--deactivated {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.admin2-sku-create-form__parent-popup {
  border: 1px dashed var(--nls-color-border-soft);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.45rem;
}

.admin2-sku-create-form__textarea {
  min-height: 88px;
  resize: vertical;
}

.admin2-sku-create-form__course-list {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.35rem;
}

.admin2-sku-create-form__course-item {
  align-items: center !important;
}

.admin2-sku-create-form__course-item .admin2-node-courses-card__course-line {
  flex-wrap: nowrap;
}

.admin2-sku-create-form__child-row {
  margin-left: 1.1rem;
}

.admin2-sku-create-form__assignment-course-list {
  margin: 0.12rem 0 0.24rem 2.25rem;
  padding: 0 0 0 1rem;
  list-style: disc;
  color: var(--nls-color-text-muted);
  font-size: 0.9rem;
  display: block;
  width: 100%;
  white-space: normal;
}

.admin2-sku-create-form__assignment-course-list li {
  display: list-item;
  width: 100%;
  white-space: normal;
  line-height: 1.35;
}

.admin2-sku-create-form__preview {
  margin: 0;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-raised, #f7f9fc);
  font-size: 0.74rem;
  line-height: 1.35;
  overflow-x: auto;
}

.admin2-bulk-flow-back {
  margin-bottom: 0.35rem;
}

.account-editor-form--add-user .create-user-node-search {
  width: 100%;
  margin-bottom: 0.35rem;
  box-sizing: border-box;
}

.account-editor-form--add-user .create-user-placement-select {
  width: 100%;
  min-height: 10rem;
  max-height: 18rem;
  box-sizing: border-box;
}

.admin2-home-table__section {
  display: grid;
  gap: 0.35rem;
}

.admin2-home-table__section-head {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.admin2-home-table__toggle {
  flex: 0 0 auto;
  min-width: 2.2rem;
  padding-inline: 0.6rem;
}

.admin2-home-table__check {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--nls-color-primary);
}

.admin2-home-table__level {
  flex: 1 1 0;
  justify-content: flex-start;
}

.admin2-home-table__rows {
  display: grid;
  gap: 0.45rem;
  margin-left: 1.55rem;
}

.admin2-home-table .admin2-hierarchy-row {
  width: 100%;
}

.admin2-hierarchy-item--expandable {
  grid-template-columns: 1.2rem 0.95rem minmax(0, 1fr);
}

.admin2-hierarchy-row__expander {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--nls-color-text-soft);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition:
    transform 160ms ease,
    color 160ms ease,
    background-color 160ms ease;
}

.admin2-hierarchy-row__expander:disabled {
  opacity: 0.35;
  cursor: default;
}

.admin2-hierarchy-row__expander.is-expanded {
  transform: rotate(90deg);
}

.admin2-hierarchy-row__expander.admin2-hierarchy-row__expander--course-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
}

.admin2-hierarchy-row__expander.admin2-hierarchy-row__expander--course-chevron svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.admin2-hierarchy-row__expander.admin2-hierarchy-row__expander--course-chevron.is-expanded {
  transform: none;
}

.admin2-hierarchy-row__expander.admin2-hierarchy-row__expander--course-chevron.is-expanded svg {
  transform: rotate(90deg);
}

.admin2-card__empty {
  margin: 0;
  color: var(--nls-color-text-muted);
  font-size: 0.76rem;
}

.admin2-card .course-action {
  width: auto;
  justify-self: start;
  align-self: start;
}

.admin2-hierarchy-list {
  display: grid;
  gap: 0.45rem;
}

.admin2-hierarchy-domain-group {
  display: grid;
  gap: 0.35rem;
}

.admin2-hierarchy-domain-heading {
  margin: 0;
  font-size: 0.69rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--nls-color-text-soft);
}

/* Ensure each subsequent category header has vertical separation from the previous row group. */
.admin2-hierarchy-domain-group
  + .admin2-hierarchy-domain-group
  .admin2-hierarchy-domain-heading {
  margin-top: 0.35rem;
}

.admin2-hierarchy-controls {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  margin-top: 0;
}

.admin2-hierarchy-controls input[type="checkbox"] {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  accent-color: var(--nls-color-primary);
}

.admin2-hierarchy-backbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0.2rem;
}

.admin2-scope-back {
  justify-self: start;
  margin: 0;
}

.admin2-hierarchy-nav {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0.1rem;
}

.admin2-scope-open {
  margin-left: 0;
}

.admin2-hierarchy-row {
  width: 100%;
  text-align: left;
  border: 1px solid var(--nls-color-border-soft);
  background: var(--nls-color-surface);
  border-radius: 9px;
  padding: 0.5rem 0.55rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: 0.22rem;
  align-items: center;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.admin2-hierarchy-row__check {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  margin: 0;
  width: 0.95rem;
  height: 0.95rem;
  accent-color: var(--nls-color-primary);
}

.admin2-hierarchy-item {
  display: grid;
  grid-template-columns: 0.95rem minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: center;
}

/* Home expandable rows use three fixed slots: expander, checkbox, full row card. */
.admin2-hierarchy-item.admin2-hierarchy-item--expandable {
  grid-template-columns: 1.2rem 0.95rem minmax(0, 1fr);
}

.admin2-hierarchy-item--expandable .admin2-hierarchy-row__expander {
  grid-column: 1;
  justify-self: center;
}

.admin2-hierarchy-item--expandable .admin2-hierarchy-row__check {
  grid-column: 2;
}

.admin2-hierarchy-item--expandable .admin2-hierarchy-row {
  grid-column: 3;
}

/* Home header aligns with expandable rows: [expander slot][checkbox][label]. */
.admin2-home-title-row {
  grid-template-columns: 1.75rem 1rem minmax(0, 1fr);
}

.admin2-home-title-row .admin2-hierarchy-controls {
  grid-column: 2;
  justify-self: center;
  align-self: center;
}

.admin2-home-title-row .admin2-hierarchy-controls:has(input[type="checkbox"]) {
  padding: 0;
}

.admin2-home-title-row .admin2-hierarchy-controls input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

.admin2-home-title-row .admin2-card__title {
  grid-column: 3;
  padding-left: 0;
}

.admin2-hierarchy-row:hover,
.admin2-hierarchy-row:focus-visible {
  border-color: var(--nls-color-primary-border-strong);
}

.admin2-hierarchy-row.node--selected {
  background: color-mix(in srgb, var(--nls-color-primary) 10%, var(--nls-color-surface) 90%);
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary-border-strong) 72%,
    var(--nls-color-border-soft) 28%
  );
}

.admin2-hierarchy-row.node--selected .admin2-hierarchy-row__title {
  color: var(--nls-color-text);
  font-weight: 700;
}

.admin2-hierarchy-row.node--partial {
  background: color-mix(in srgb, var(--nls-color-primary) 6%, var(--nls-color-surface) 94%);
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary-border-strong) 46%,
    var(--nls-color-border-soft) 54%
  );
}

.admin2-hierarchy-row.node--partial .admin2-hierarchy-row__title {
  color: var(--nls-color-text);
  font-weight: 600;
}

/* Ensure selected-row highlight follows checkbox state in every tree renderer
   (Admin, Class Filter, Notices > New notice), even where JS class toggles differ. */
.admin2-hierarchy-item > .admin2-hierarchy-row__check:checked + .admin2-hierarchy-row,
.admin2-hierarchy-item.admin2-hierarchy-item--expandable
  > .admin2-hierarchy-row__check:checked
  + .admin2-hierarchy-row {
  background: color-mix(in srgb, var(--nls-color-primary) 10%, var(--nls-color-surface) 90%);
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary-border-strong) 72%,
    var(--nls-color-border-soft) 28%
  );
}

.admin2-hierarchy-item > .admin2-hierarchy-row__check:checked + .admin2-hierarchy-row .admin2-hierarchy-row__title,
.admin2-hierarchy-item.admin2-hierarchy-item--expandable
  > .admin2-hierarchy-row__check:checked
  + .admin2-hierarchy-row
  .admin2-hierarchy-row__title {
  color: var(--nls-color-text);
  font-weight: 700;
}

.admin2-hierarchy-item > .admin2-hierarchy-row__check:indeterminate + .admin2-hierarchy-row,
.admin2-hierarchy-item.admin2-hierarchy-item--expandable
  > .admin2-hierarchy-row__check:indeterminate
  + .admin2-hierarchy-row {
  background: color-mix(in srgb, var(--nls-color-primary) 6%, var(--nls-color-surface) 94%);
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary-border-strong) 46%,
    var(--nls-color-border-soft) 54%
  );
}

.admin2-hierarchy-item > .admin2-hierarchy-row__check:indeterminate + .admin2-hierarchy-row .admin2-hierarchy-row__title,
.admin2-hierarchy-item.admin2-hierarchy-item--expandable
  > .admin2-hierarchy-row__check:indeterminate
  + .admin2-hierarchy-row
  .admin2-hierarchy-row__title {
  color: var(--nls-color-text);
  font-weight: 600;
}

.admin2-hierarchy-row.is-active {
  border-color: var(--nls-color-border-strong, #94a3b8);
  background: color-mix(
    in srgb,
    var(--nls-color-surface-alt, #f8fafc) 78%,
    var(--nls-color-surface, #ffffff)
  );
}

.admin2-hierarchy-row.is-archived {
  border-color: color-mix(
    in srgb,
    #d4a83a 42%,
    var(--nls-color-border-soft) 58%
  );
  background: color-mix(in srgb, #fff3bf 68%, var(--nls-color-surface) 32%);
}

.admin2-hierarchy-row.is-hard-archived {
  border-color: color-mix(
    in srgb,
    #991b1b 40%,
    var(--nls-color-border-soft) 60%
  );
  background: color-mix(in srgb, #fee2e2 68%, var(--nls-color-surface) 32%);
}

.admin2-hierarchy-row.is-context-only {
  border-color: color-mix(
    in srgb,
    var(--nls-color-border-soft) 76%,
    var(--nls-color-text-muted) 24%
  );
  background: color-mix(
    in srgb,
    var(--nls-color-surface-muted, #f1f5f9) 72%,
    var(--nls-color-surface, #ffffff) 28%
  );
  opacity: 0.82;
}

body[data-theme="dev-view"] button.admin2-hierarchy-row.is-archived {
  border-color: color-mix(
    in srgb,
    #d4a83a 42%,
    var(--nls-color-border-soft) 58%
  );
  background: color-mix(in srgb, #fff3bf 68%, var(--nls-color-surface) 32%);
}

body[data-theme="dev-view"] button.admin2-hierarchy-row.is-hard-archived {
  border-color: color-mix(
    in srgb,
    #991b1b 40%,
    var(--nls-color-border-soft) 60%
  );
  background: color-mix(in srgb, #fee2e2 68%, var(--nls-color-surface) 32%);
}

/*
 * Player hub rows are semantic <button>s; dev-view theme styles all buttons as solid CTAs
 * (light text on primary). Restore list-row chrome + readable inherited text on tinted .is-active.
 */
body[data-theme="dev-view"] button.admin2-hierarchy-row {
  background: var(--nls-color-surface);
  color: var(--nls-color-text);
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 9px;
  padding: 0.5rem 0.55rem;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
}

body[data-theme="dev-view"] button.admin2-hierarchy-row:hover,
body[data-theme="dev-view"] button.admin2-hierarchy-row:focus-visible {
  border-color: var(--nls-color-primary-border-strong);
}

.admin2-hierarchy-row.is-archived:hover,
.admin2-hierarchy-row.is-archived:focus-visible,
body[data-theme="dev-view"] button.admin2-hierarchy-row.is-archived:hover,
body[data-theme="dev-view"]
  button.admin2-hierarchy-row.is-archived:focus-visible {
  border-color: color-mix(
    in srgb,
    #c58b12 58%,
    var(--nls-color-primary-border-strong) 42%
  );
  background: color-mix(in srgb, #ffe08a 72%, var(--nls-color-surface) 28%);
}

.admin2-hierarchy-row.is-hard-archived:hover,
.admin2-hierarchy-row.is-hard-archived:focus-visible,
body[data-theme="dev-view"] button.admin2-hierarchy-row.is-hard-archived:hover,
body[data-theme="dev-view"]
  button.admin2-hierarchy-row.is-hard-archived:focus-visible {
  border-color: color-mix(
    in srgb,
    #7f1d1d 56%,
    var(--nls-color-primary-border-strong) 44%
  );
  background: color-mix(in srgb, #fecaca 72%, var(--nls-color-surface) 28%);
}

/* Flat hierarchy tree styling for node selector UIs (admin/notices/class filter). */
.node-selector-tree {
  gap: 0.18rem;
  max-height: none;
  overflow: visible;
}

.node-selector-tree .admin2-hierarchy-item.admin2-hierarchy-item--expandable {
  --node-depth: 0;
  --node-indent-step: 16px;
  grid-template-columns: 1.75rem 1rem minmax(0, 1fr);
  column-gap: 0.5rem;
  padding-left: calc(var(--node-depth) * var(--node-indent-step));
}

.node-selector-tree .admin2-hierarchy-item[data-depth="1"] {
  --node-depth: 1;
}

.node-selector-tree .admin2-hierarchy-item[data-depth="2"] {
  --node-depth: 2;
}

.node-selector-tree .admin2-hierarchy-item[data-depth="3"] {
  --node-depth: 3;
}

.node-selector-tree .admin2-hierarchy-item[data-depth="4"],
.node-selector-tree .admin2-hierarchy-item[data-depth="5"],
.node-selector-tree .admin2-hierarchy-item[data-depth="6"] {
  --node-depth: 3;
}

.node-selector-tree .admin2-hierarchy-row__expander {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--nls-color-text-soft);
  border-radius: 6px;
  transition:
    transform 160ms ease,
    color 160ms ease,
    background-color 160ms ease;
}

.node-selector-tree .admin2-hierarchy-row__expander.is-expanded {
  transform: rotate(90deg);
}

.node-selector-tree
  .admin2-hierarchy-row__expander.admin2-hierarchy-row__expander--course-chevron.is-expanded {
  transform: none;
}

.node-selector-tree .admin2-hierarchy-row__expander:disabled {
  opacity: 0;
  pointer-events: none;
}

.node-selector-tree .admin2-hierarchy-row__check {
  width: 1rem;
  height: 1rem;
}

.node-selector-tree .admin2-hierarchy-row,
body[data-theme="dev-view"] .node-selector-tree button.admin2-hierarchy-row {
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  padding: 0.5rem 0.58rem;
  row-gap: 0.16rem;
  cursor: default;
  transition: background-color 160ms ease;
}

.node-selector-tree .admin2-hierarchy-row:hover,
.node-selector-tree .admin2-hierarchy-row:focus-visible,
body[data-theme="dev-view"] .node-selector-tree button.admin2-hierarchy-row:hover,
body[data-theme="dev-view"]
  .node-selector-tree
  button.admin2-hierarchy-row:focus-visible {
  border: none;
  background: color-mix(
    in srgb,
    var(--nls-color-surface-alt, #f8fafc) 84%,
    transparent
  );
}

.node-selector-tree
  .admin2-hierarchy-item:has(> .admin2-hierarchy-row__check:checked)
  > .admin2-hierarchy-row,
body[data-theme="dev-view"]
  .node-selector-tree
  .admin2-hierarchy-item:has(> .admin2-hierarchy-row__check:checked)
  > button.admin2-hierarchy-row {
  border-left: 2px solid color-mix(in srgb, var(--nls-color-primary) 72%, #60a5fa 28%);
  background: color-mix(in srgb, var(--nls-color-primary) 9%, var(--nls-color-surface) 91%);
}

.node-selector-tree .admin2-hierarchy-row__title {
  font-weight: 500;
  color: var(--nls-color-text);
}

.node-selector-tree .admin2-hierarchy-row[data-node-type="distributor"] .admin2-hierarchy-row__title {
  font-weight: 700;
}

.node-selector-tree .admin2-hierarchy-row[data-node-type="customer"] .admin2-hierarchy-row__title {
  font-weight: 500;
}

.node-selector-tree .admin2-hierarchy-row[data-node-type="campus"] .admin2-hierarchy-row__title {
  font-weight: 500;
  color: var(--nls-color-text-soft);
}

.node-selector-tree .admin2-hierarchy-row[data-node-type="class"] .admin2-hierarchy-row__title {
  font-weight: 400;
  color: var(--nls-color-text-muted);
}

body[data-theme="dev-view"] button.admin2-hierarchy-row.is-active {
  color: var(--nls-color-text);
  background: color-mix(
    in srgb,
    var(--nls-color-surface-alt, #f8fafc) 78%,
    var(--nls-color-surface, #ffffff)
  );
}

/* Account editor action rows default to secondary styling; save actions opt into primary. */
.account-editor-actions > button {
  border-color: var(--nls-color-border-strong, #cbd5e1);
  background: var(--nls-color-surface, #ffffff);
  color: var(--nls-color-text, #0f172a);
}

.account-editor-actions > button:is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--nls-color-border-strong, #94a3b8);
  background: color-mix(in srgb, var(--nls-color-surface-alt, #f8fafc) 72%, white);
  color: var(--nls-color-text, #0f172a);
}

.account-editor-actions > button[id*="save" i],
.account-editor-actions > button[data-action*="save" i],
.account-editor-actions > button.account-action--primary {
  border-color: var(--nls-color-primary-border-strong, #93c5fd);
  background: var(--nls-color-primary, #2563eb);
  color: var(--nls-color-surface, #ffffff);
}

.account-editor-actions > button[id*="save" i]:is(:hover, :focus-visible):not(:disabled),
.account-editor-actions > button[data-action*="save" i]:is(:hover, :focus-visible):not(:disabled),
.account-editor-actions > button.account-action--primary:is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--nls-color-primary-alt, #1d4ed8);
  background: var(--nls-color-primary-alt, #1d4ed8);
  color: var(--nls-color-surface, #ffffff);
}

.admin2-hierarchy-row__title {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: inherit;
  color: var(--nls-color-primary-strong, #1d4ed8);
  align-self: center;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.admin2-hierarchy-row__title-type {
  color: var(--nls-color-primary-strong, #1d4ed8);
}

.admin2-hierarchy-row__title-sep {
  color: var(--nls-color-text-soft, #64748b);
}

.admin2-hierarchy-row__title-name {
  color: var(--nls-color-text, #0f172a);
}

.admin2-hierarchy-row__title-wrap {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
}

.admin2-hierarchy-row__badge {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.15;
  padding: 0.09rem 0.35rem;
  border-radius: 999px;
  border: 1px solid
    color-mix(in srgb, #c58b12 58%, var(--nls-color-border-soft) 42%);
  background: color-mix(in srgb, #ffe08a 72%, var(--nls-color-surface) 28%);
  color: #7a4a00;
}

.admin2-hierarchy-row__badge--hard-archived {
  border-color: color-mix(in srgb, #991b1b 56%, var(--nls-color-border-soft) 44%);
  background: color-mix(in srgb, #fee2e2 74%, var(--nls-color-surface) 26%);
  color: #7f1d1d;
}

.admin2-hierarchy-row__meta {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.72rem;
  font-family: inherit;
  color: var(--nls-color-text-soft);
  align-self: center;
}

.admin2-hierarchy-row__count {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.22rem;
  border-radius: 6px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 80%, #ffffff 20%);
  color: var(--nls-color-text-muted);
  background: color-mix(in srgb, var(--nls-color-surface-alt) 70%, #ffffff 30%);
  font-size: 0.66rem;
  font-weight: 700;
}

.courses-hub-detail__enrollment-meta {
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  display: block;
  text-align: left;
  justify-self: start;
  align-self: start;
}

.courses-hub-detail__context-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.15rem 0 0.1rem;
}

.courses-hub-detail__context-pills .notice-compose__scope-pill {
  font-size: 0.72rem;
}

.classes-hub-filter-pills {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.classes-hub-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--nls-color-border-soft);
  background: var(--nls-color-surface-muted);
  color: var(--nls-color-text);
  font-size: 0.78rem;
  line-height: 1.1;
  white-space: nowrap;
  max-width: min(68vw, 32rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

.courses-hub-detail__teacher-line {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Stacked label / value pairs (one column) — avoids a 2×N “window” beside each field. */
.admin2-context-grid {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem 0;
  align-items: start;
}

.admin2-context-grid dt {
  margin: 0.45rem 0 0.05rem;
  font-size: 0.72rem;
  color: var(--nls-color-text-soft);
}

.admin2-context-grid dt:first-of-type {
  margin-top: 0;
}

.admin2-context-grid dd {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  color: var(--nls-color-text);
  overflow-wrap: anywhere;
}

.admin2-context-grid dd:last-of-type {
  margin-bottom: 0;
}

.admin2-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
}

.admin2-manage-sections {
  display: grid;
  gap: 0.45rem;
}

.admin2-manage-section__panel {
  padding: 0.38rem 0.45rem;
}

/* Classes view override: enforce nesting insets after generic panel rule. */
.admin2-manage-section__panel.classes-hub-class-row__panel {
  padding-top: 0.08rem;
  padding-bottom: 0.1rem;
  padding-left: var(--classes-nesting-inset-x, 0.55rem);
  padding-right: var(--classes-nesting-inset-x, 0.55rem);
}

.classes-hub-class-row__panel
  .admin2-manage-section__panel.teacher-student-node-expandable__panel {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Final high-specificity override: student rows must be flush to class panel edges. */
.admin2-manage-section__panel.classes-hub-class-row__panel
  .teacher-roster-list.teacher-roster-list--expanded {
  width: calc(100% + (var(--classes-nesting-inset-x, 0.55rem) * 2)) !important;
  margin-left: calc(var(--classes-nesting-inset-x, 0.55rem) * -1) !important;
  margin-right: calc(var(--classes-nesting-inset-x, 0.55rem) * -1) !important;
  max-width: none !important;
}

/* Hard lock: class panel and student rows must be flush on left/right. */
.courses-hub-row-expand.admin2-manage-section__panel.classes-hub-class-row__panel {
  padding: 0 !important;
}

.courses-hub-row-expand.admin2-manage-section__panel.classes-hub-class-row__panel
  .teacher-roster-list.teacher-roster-list--expanded {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.courses-hub-row-expand.admin2-manage-section__panel.classes-hub-class-row__panel
  .courses-hub-row-item.menu-expandable-item.teacher-student-node.teacher-student-node-expandable {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Remove inherited progress wrapper inset in expanded class view. */
.courses-hub-row-expand.admin2-manage-section__panel.classes-hub-class-row__panel
  > .progress-player-detail.teacher-class-view--inline {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.admin2-manage-section__panel .teacher-class-container {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.admin2-manage-section__panel
  .teacher-class-container
  > .admin2-card__title:first-child,
.admin2-manage-section__panel
  .teacher-class-container
  > .dev-section-title:first-child {
  display: none;
}

.admin2-context-manage-embed {
  display: grid;
  gap: 0.5rem;
}

.admin2-context-manage-embed .teacher-class-container {
  margin: 0;
}

.admin2-context-manage-embed .teacher-class-container > .dev-section-title,
.admin2-context-manage-embed .teacher-class-container > .admin2-card__title {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
  line-height: 1.2;
}

.admin2-context-manage-embed
  .teacher-class-container
  > .panel-message.muted:first-of-type {
  margin: 0 0 0.24rem;
  font-size: 0.72rem;
  line-height: 1.3;
}

.admin2-context-manage-embed .classes-action-bar {
  margin: 0;
  flex-wrap: wrap;
}

.admin2-context-manage-embed .classes-action-bar .course-action {
  margin: 0;
}

.admin2-node-children-card,
.admin2-node-courses-card {
  padding: 0.36rem 0.45rem 0.42rem;
}

.admin2-node-children-card .admin2-card__title,
.admin2-node-courses-card .admin2-card__title {
  font-size: 0.82rem;
  margin: 0 0 0.2rem;
}

.admin2-node-children-card__hint {
  margin: 0 0 0.24rem;
  font-size: 0.72rem;
  line-height: 1.3;
}

.admin2-node-children-card__actions,
.admin2-node-courses-card__actions {
  margin: 0 0 0.2rem;
}

.admin2-node-courses-card__header-actions {
  margin: 0 0 0.2rem;
}

.admin2-node-courses-card__content[hidden] {
  display: none !important;
}

.admin2-node-courses-card .create-class-course-list,
.admin2-node-courses-card__list {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.admin2-node-courses-card__hint {
  margin: 0 0 0.24rem;
  font-size: 0.72rem;
  line-height: 1.3;
}

.admin2-node-courses-card__mini-cover {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.2rem;
  object-fit: cover;
  flex: 0 0 auto;
}

.admin2-node-courses-card__readonly-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.admin2-node-courses-card__course-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  width: auto;
  flex-wrap: wrap;
}

.admin2-node-courses-card__course-label {
  min-width: 0;
}

.admin2-node-courses-card__sku-label {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}

.admin2-node-courses-card__sku-course-list {
  margin-left: 0;
  margin-top: 0.15rem;
}

.admin2-node-courses-card__sku-course-list .admin2-node-courses-card__readonly-item {
  margin-block: 0.04rem;
  background: transparent;
  border: 0;
  padding: 0.08rem 0;
}

.admin2-node-courses-card__row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.admin2-node-courses-card .create-class-course-option,
.teacher-class-assign-courses-list .create-class-course-option {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  column-gap: 0.45rem;
  align-items: center;
}

.admin2-node-courses-card .create-class-course-option input[type="checkbox"],
.teacher-class-assign-courses-list .create-class-course-option input[type="checkbox"] {
  justify-self: center;
}

.admin2-node-courses-card__group
  > :is(.create-class-course-option, .admin2-node-courses-card__readonly-item) {
  margin-block: 0.12rem;
}

.admin2-node-courses-card__row-actions
  > :is(.course-action, button).course-action--inline {
  padding: 0.22rem 0.5rem;
  min-height: 1.7rem;
}

@media (max-width: 720px) {
  .admin2-node-courses-card__mini-cover {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.35rem;
    align-self: center;
    justify-self: center;
  }

  .admin2-node-courses-card .create-class-course-option {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: stretch !important;
    column-gap: 0.45rem;
  }

  .admin2-node-courses-card__readonly-item {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch !important;
    column-gap: 0.45rem;
  }

  .admin2-node-courses-card .create-class-course-option .admin2-node-courses-card__mini-cover,
  .admin2-node-courses-card__readonly-item .admin2-node-courses-card__mini-cover {
    grid-row: 1 / span 2;
  }

  .admin2-node-courses-card .create-class-course-option .admin2-node-courses-card__course-line {
    grid-column: 3;
  }

  .admin2-node-courses-card__readonly-item .admin2-node-courses-card__course-line {
    grid-column: 2;
  }

  .admin2-node-courses-card__course-line {
    display: grid;
    grid-template-rows: auto auto;
    align-items: start;
    row-gap: 0.35rem;
  }

  .admin2-node-courses-card__row-actions {
    justify-self: start;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
}

.admin2-node-courses-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.admin2-node-logo-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  overflow-x: visible;
}

.admin2-node-logo-card__actions .course-action {
  flex: 0 0 auto;
}

.admin2-node-logo-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex: 0 0 auto;
}

.admin2-node-logo-card__scope-row {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.admin2-node-logo-preview {
  border: none;
  background: transparent;
  border-radius: 10px;
  min-height: 64px;
  overflow: hidden;
}

.admin2-node-logo-preview.admin2-node-logo-preview--has-image {
  min-height: 180px !important;
  height: 180px;
  max-width: 460px;
  width: min(100%, 460px);
  margin: 0 auto;
  border: 1px solid var(--nls-color-border-soft);
  background: color-mix(in srgb, var(--nls-color-surface-alt) 70%, #ffffff 30%);
}

.admin2-node-class-header-section {
  margin-top: 0.8rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--nls-color-border-soft);
}

.admin2-node-class-header-preview {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  min-height: 120px;
  width: min(100%, 520px);
  aspect-ratio: 10 / 3;
  margin: 0 auto 0.35rem;
  background:
    linear-gradient(135deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.04)),
    var(--nls-color-surface-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin2-node-class-header-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.admin2-node-class-header-preview--empty {
  padding: 0.55rem 0.7rem;
}

.admin2-node-class-header-preview--empty .panel-message {
  margin: 0;
}

.admin2-node-children-card__list {
  display: grid;
  gap: 0.24rem;
}

.admin2-node-children-card__list .admin2-hierarchy-item {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}

.admin2-node-children-card__list .admin2-hierarchy-row {
  width: 100%;
  min-width: 0;
}

.admin2-node-children-card__list .admin2-hierarchy-row__title-wrap {
  flex-wrap: nowrap;
}

.admin2-node-children-card__list .admin2-hierarchy-row__title,
.admin2-node-children-card__list .admin2-hierarchy-row__meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .admin2-grid {
    grid-template-columns: 1fr;
  }

  .admin2-hierarchy-nav {
    flex-wrap: wrap;
  }

  .admin2-scope-open {
    margin-left: 0;
  }

  .admin2-context-open-next {
    margin-left: 0;
  }

  .admin2-context-manage-embed .classes-action-bar .course-action {
    flex: 0 1 auto;
    min-width: fit-content;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
  }

  .admin2-context-manage-embed .classes-action-bar,
  .admin2-context-manage-embed .teacher-class-container {
    min-width: 0;
  }

  .admin2-context-manage-embed .classes-inline-check {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .admin2-context-manage-embed .class-teacher-assignment-row__select {
    flex: 1 1 100%;
    min-width: 0;
  }

  .admin2-node-children-card__list .admin2-hierarchy-row__title-wrap {
    flex-wrap: wrap;
  }

  .admin2-node-children-card__list .admin2-hierarchy-row__title,
  .admin2-node-children-card__list .admin2-hierarchy-row__meta {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

.account-editor-form {
  display: grid;
  gap: 0.65rem;
}

.account-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.account-editor-grid label {
  display: grid;
  gap: 0.3rem;
}

.account-editor-grid label.classes-inline-check {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
}

.account-editor-grid label.classes-inline-check input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}

.account-editor-grid label.account-editor-grid__full {
  grid-column: 1 / -1;
}

.account-editor-grid span {
  font-size: 0.8rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
}

.account-editor-label-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.account-editor-label-with-icon__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.account-editor-grid input,
.account-editor-grid select {
  color: var(--nls-color-text) !important;
  -webkit-text-fill-color: var(--nls-color-text) !important;
}

.account-editor-grid input[disabled],
.account-editor-grid select[disabled] {
  color: var(--nls-color-text-muted) !important;
  -webkit-text-fill-color: var(--nls-color-text-muted) !important;
  opacity: 1;
}

.account-editor-readonly-value {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text);
  padding: 0.45rem 0.55rem;
  font-size: 0.86rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.account-editor-actions {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.account-editor-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--nls-color-text-muted);
}

.account-editor-form .panel-message:empty {
  display: none;
}

.admin2-user-placement-heading {
  margin-top: 0.25rem;
  margin-bottom: 0.2rem;
}

.admin2-user-placement-note {
  margin-bottom: 0.1rem;
}

.admin2-user-placement-editor {
  gap: 0.42rem !important;
}

.admin2-user-placement-line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  flex-wrap: wrap;
}

.admin2-user-placement-line__label {
  color: var(--nls-color-text);
  font-weight: 600;
}

.admin2-user-placement-line__value {
  color: var(--nls-color-text-muted);
}

.admin2-user-placement-line > .course-action.course-action--inline {
  margin-left: auto;
}

.admin2-user-placement-bullets {
  margin: 0.1rem 0 0.25rem 1rem;
  padding: 0;
  display: grid;
  gap: 0.24rem;
}

.admin2-user-placement-bullets__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.admin2-user-placement-bullets__title {
  min-width: 0;
}

.admin2-user-placement-bullets__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.profile-avatar-editor {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.profile-avatar-editor__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.profile-avatar-editor__meta {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
}

.profile-avatar-editor__header-preview {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
}

.profile-avatar-editor__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--nls-color-text);
}

.profile-avatar-editor__details {
  display: grid;
  gap: 0.6rem;
}

.profile-avatar-editor__details[hidden] {
  display: none !important;
}

.profile-avatar-editor__preview {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.profile-avatar-preview {
  --avatar-bg: #dbeafe;
  --avatar-fg: #1e3a8a;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--nls-color-border-soft);
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.profile-avatar-preview.profile-avatar-preview--rounded {
  border-radius: 12px;
}

.profile-avatar-preview--lg {
  width: 72px;
  height: 72px;
}

.profile-avatar-preview--xs {
  width: 18px;
  height: 18px;
}

.dev-nav-account-avatar.profile-avatar-preview--xs {
  width: 22px;
  height: 22px;
  border-color: color-mix(
    in srgb,
    var(--nls-color-border-soft, #cbd5e1) 72%,
    transparent
  );
}

.profile-avatar-role-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 42%;
  min-width: 8px;
  min-height: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-surface, #fff) 80%, transparent);
  background: color-mix(
    in srgb,
    var(--nls-color-surface, #fff) 88%,
    transparent
  );
  color: var(--nls-color-text-soft, #6b7280);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  pointer-events: none;
}

.profile-avatar-role-badge svg {
  width: 72%;
  height: 72%;
}

.profile-avatar-role-badge--teacher {
  color: #475569;
}

.profile-avatar-role-badge--admin {
  color: #7c2d12;
}

.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.profile-avatar-preview img.profile-avatar-image--default-pack {
  width: 92%;
  height: 92%;
  object-fit: contain;
  object-position: center;
}

.profile-avatar-preview__emoji {
  font-size: 1.15rem;
}

.profile-avatar-preview--lg .profile-avatar-preview__emoji {
  font-size: 1.65rem;
}

.profile-avatar-preview--xs .profile-avatar-preview__emoji {
  font-size: 0.65rem;
}

.profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 0.45rem;
}

.profile-avatar-filter {
  display: grid;
  gap: 0.3rem;
  max-width: 260px;
}

.profile-avatar-filter span {
  font-size: 0.78rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
}

.profile-avatar-option {
  --avatar-bg: #dbeafe;
  --avatar-fg: #1e3a8a;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface);
  color: var(--nls-color-text);
  padding: 0.5rem;
  display: grid;
  justify-items: center;
  align-items: center;
}

.profile-avatar-option:hover {
  border-color: var(--nls-color-primary, #2563eb);
}

.profile-avatar-option.is-selected {
  border-color: var(--nls-color-primary, #2563eb);
  box-shadow: 0 0 0 2px var(--nls-color-primary-bg, rgba(37, 99, 235, 0.18));
}

.profile-avatar-option__emoji {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  overflow: hidden;
}

.profile-avatar-option__emoji img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.profile-avatar-option__emoji img.profile-avatar-image--default-pack {
  width: 92%;
  height: 92%;
  object-fit: contain;
  object-position: center;
}

.create-user-inline-error {
  align-self: center;
  font-size: 0.76rem;
  color: var(--nls-color-danger-strong);
  min-height: 1em;
}

.create-user-inline-error:not(.is-visible) {
  visibility: hidden;
}

@media (max-width: 700px) {
  .account-editor-grid {
    grid-template-columns: 1fr;
  }
}

.whisper-player-debug {
  margin-top: 0.7rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-alt);
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.35rem;
}

.whisper-player-debug__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--nls-color-text);
}

.whisper-player-debug__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  font-size: 0.76rem;
  color: var(--nls-color-text-muted);
}

.whisper-player-debug__row--stack {
  display: grid;
  gap: 0.25rem;
}

.whisper-player-debug__row--stack pre {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.74rem;
  color: var(--nls-color-text);
}

/* Keep response payloads in the player pane, not sidebar. */
#auth-response,
#courses-response,
#progress-output {
  display: none !important;
}

.simulation-badge {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  z-index: 8;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--nls-color-warning, #c48f00);
  border-radius: 999px;
  background: var(--nls-color-warning-bg, rgba(196, 143, 0, 0.16));
  color: var(--nls-color-warning-text, #8a6500);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  pointer-events: none;
}

/* Anchor auto-test overlay positioning to the sidebar rail. */
.dev-sidebar__rail {
  position: relative;
  overflow-y: visible;
}

.autotest-live-panel {
  position: fixed;
  top: var(--autotest-live-panel-top);
  left: var(--autotest-live-panel-left);
  right: auto;
  z-index: 1450;
  min-width: 176px;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 9px;
  background: var(--nls-color-surface-alt);
  box-shadow: 0 5px 12px var(--nls-shadow-color-light);
  padding: 0.3rem 0.35rem;
  display: grid;
  gap: 0.24rem;
}

.autotest-live-panel[hidden] {
  display: none !important;
}

.autotest-live-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  font-size: 0.68rem;
  color: var(--nls-color-text-muted);
}

.autotest-live-panel__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.autotest-live-panel__pause,
.autotest-live-panel__close {
  min-height: 1.15rem;
  min-width: 2.2rem;
  padding: 0.04rem 0.25rem;
  border-radius: 6px;
  font-size: 0.6rem;
  border-width: 1px;
}

.autotest-live-panel .toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: center;
  column-gap: 0.45rem;
  justify-content: initial;
  width: 100%;
  margin: 0;
}

.autotest-live-panel .dev-toggle-inline {
  grid-template-columns: minmax(0, 1fr) 52px;
}

.autotest-live-panel .dev-toggle-inline .dev-toggle-inline__lead {
  display: grid !important;
  grid-template-columns: 0.9rem minmax(0, 4rem);
  align-items: center;
  column-gap: 0.25rem;
  min-width: 0;
}

.autotest-live-panel .dev-toggle-inline span {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  width: auto;
  min-width: 0;
  color: var(--nls-color-text-muted);
}

.autotest-live-panel .dev-toggle-inline span svg,
.autotest-live-panel .dev-toggle-inline__lead svg {
  width: 0.86rem;
  height: 0.86rem;
  flex: 0 0 auto;
}

.autotest-live-panel .dev-toggle-counter {
  width: 100%;
  min-width: 3.3rem;
  text-align: left;
  padding: 0.13rem 0.28rem !important;
  border-radius: 7px !important;
  border-width: 1px !important;
  min-height: 1.15rem;
  font-size: 0.66rem;
  justify-self: start;
}

.autotest-live-panel .toggle > input[type="checkbox"] {
  margin-left: 0;
  flex: 0 0 auto;
  justify-self: end;
  transform: translateX(8px);
}

@media (max-width: 900px) {
  .autotest-live-panel {
    width: min(calc(100vw - 16px), 360px);
    min-width: 0;
    max-width: calc(100vw - 16px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.28rem 0.4rem;
    padding: 0.32rem 0.35rem;
    border-radius: 10px;
  }

  .autotest-live-panel__header {
    grid-column: 1 / -1;
    margin-bottom: 0.04rem;
    font-size: 0.66rem;
  }

  .autotest-live-panel__actions {
    gap: 0.16rem;
  }

  .autotest-live-panel__pause,
  .autotest-live-panel__close {
    min-width: 2rem;
    min-height: 1.05rem;
    font-size: 0.58rem;
    padding: 0.03rem 0.22rem;
  }

  .autotest-live-panel .toggle {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .autotest-live-panel .dev-toggle-inline {
    grid-template-columns: minmax(0, 1fr);
  }

  .autotest-live-panel .dev-toggle-inline .dev-toggle-inline__lead {
    grid-template-columns: 0.86rem minmax(0, 1fr);
  }

  /* Mobile compact mode: keep counters visible and hide per-row switches. */
  .autotest-live-panel .toggle > input[type="checkbox"] {
    display: none;
  }
}

.dev-sandbox-toolkit {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.dev-sandbox-toolkit__lead {
  margin-bottom: 0.5rem;
}

.dev-sandbox-toolkit__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}

.dev-sandbox-toolkit__field input,
.dev-sandbox-toolkit__field select {
  width: 100%;
  min-width: 0;
}

.dev-sandbox-toolkit__row {
  flex-wrap: wrap;
}

/* Compact rail vertical offset tuning should be narrow-mobile only. */
@media (max-width: 760px) {
  body:not(.is-logged-out)[data-layout="standard-lms"]
    .dev-sidebar:not(.collapsed)
    ~ .player-region {
    padding-top: var(--mobile-rail-anchor-height, 0px) !important;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]
    .dev-sidebar.collapsed
    ~ .player-region {
    padding-top: 0 !important;
  }

  /* Hidden-nav shells: keep a small readable top gap under rail/handle. */
  body:not(.is-logged-out)[data-layout="standard-lms"]:has(
      .dev-sidebar:not(.collapsed)
    )
    #player-layout:has(#player-nav[hidden])
    #player-main {
    padding-top: 0.38rem !important;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]:has(.dev-sidebar.collapsed)
    #player-layout:has(#player-nav[hidden])
    #player-main {
    padding-top: 0.62rem !important;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]:has(
      .dev-sidebar.collapsed
    )[data-sidebar-active-panel="classes"]
    #player-layout:has(#player-nav[hidden])
    #player-main {
    padding-top: 0.48rem !important;
  }
}

/* Mobile top toolbar: keep all nav icons reachable via swipe. */
@media (max-width: 900px) {
  /* Pre-auth guard: never show mobile rail before login. */
  body.is-logged-out .dev-sidebar,
  body.is-logged-out .dev-sidebar__rail {
    display: none !important;
  }

  /* Mobile anchor model: rail fixed, player scrolls beneath it. */
  body[data-layout="standard-lms"] {
    --mobile-rail-anchor-height: 5.2rem;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]
    .dev-sidebar:not(.collapsed) {
    position: relative;
    z-index: 30;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]
    .dev-sidebar:not(.collapsed)
    .dev-sidebar__rail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 31;
    /* Keep icons and scroll area inside horizontal safe areas (avoids “rail” under notch/home). */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
  }

  /* `#dev-panel` sits between sidebar and `.player-region`; use `~` not `+`. */
  body:not(.is-logged-out)[data-layout="standard-lms"]
    .dev-sidebar:not(.collapsed)
    ~ .player-region {
    padding-top: var(--mobile-rail-anchor-height) !important;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]
    .dev-sidebar.collapsed
    ~ .player-region {
    padding-top: 0 !important;
  }

  /*
   * Course outline: keep z-index under .dev-sidebar__rail (31) so the top rail + grabber
   * stay painted above the overlay. Drop .player-region’s stacking context so the fixed
   * panel’s z-index (28 in player-core) participates at the root below the shell (30/31+).
   * Slight horizontal inset when the rail is expanded = a bit less width, more scroll.
   */
  body[data-layout="standard-lms"].course-menu-open-mobile:not(.is-logged-out)
    .player-region {
    z-index: auto !important;
  }

  body[data-layout="standard-lms"].course-menu-open-mobile:not(.is-logged-out)
    #course-menu-panel.course-menu--in-player {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    z-index: 3101 !important;
  }

  body[data-layout="standard-lms"].course-menu-open-mobile:not(.is-logged-out)
    #player-container
    #player-layout {
    overflow: hidden;
  }

  body[data-layout="standard-lms"].course-menu-open-mobile:not(.is-logged-out)
    #course-menu-mobile-overlay {
    display: block !important;
    pointer-events: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(
      var(--player-nav-height, 56px) + max(0px, env(safe-area-inset-bottom, 0px))
    ) !important;
    background: rgba(15, 23, 42, 0.06) !important;
    border-radius: 0 !important;
    z-index: 3100 !important;
  }

  body[data-layout="standard-lms"].course-menu-open-mobile:not(.is-logged-out)
    #player-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 3205 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body[data-layout="standard-lms"][data-course-menu-mode="mobile"]:not(.is-logged-out)
    .course-menu-desktop-wrap:has(#course-menu-panel:not([hidden]))
    #course-menu-mobile-overlay {
    display: block !important;
  }

  body[data-layout="standard-lms"].course-menu-open-mobile:not(.is-logged-out)
    #player-container
    #player-main {
    visibility: hidden;
    pointer-events: none;
    overflow: hidden !important;
  }

  body.is-logged-out[data-layout="standard-lms"]:not([data-theme="dev-view"])
    .player-region {
    padding-top: 0 !important;
  }

  /* Mobile: remove player-region framing/border chrome entirely. */
  body[data-layout="standard-lms"] .player-region,
  body[data-layout="standard-lms"] #player-container,
  body[data-layout="standard-lms"] .legacy-player,
  body[data-layout="standard-lms"] .legacy-player__layout,
  body[data-layout="standard-lms"] #player-main {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-clip: border-box;
  }

  body[data-layout="standard-lms"] .dev-sidebar__rail {
    background: var(--dev-rail-chrome-surface);
  }

  .dev-sidebar__rail {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    border-bottom: 1px solid var(--nls-color-border);
  }

  /* Mobile course nav: single segmented bar (Back | Menu | Next). */
  body[data-theme="dev-view"][data-layout="standard-lms"] #player-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 0 !important;
    padding: 3px !important;
    margin: 0 max(12px, env(safe-area-inset-left, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-right, 0px)) !important;
    border: 1px solid #d0d5dd !important;
    border-top: 1px solid #d0d5dd !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
    overflow: visible !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] #nav-prev,
  body[data-theme="dev-view"][data-layout="standard-lms"] #nav-menu,
  body[data-theme="dev-view"][data-layout="standard-lms"] #nav-next {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #344054 !important;
    opacity: 1 !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] #nav-prev {
    grid-column: 1 !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] #nav-menu {
    grid-column: 2 !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] #nav-next {
    grid-column: 3 !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] #nav-prev,
  body[data-theme="dev-view"][data-layout="standard-lms"] #nav-menu {
    border-right: 1px solid #e4e7ec !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]
    #player-nav
    :is(#nav-prev, #nav-menu, #nav-next)
    .course-nav-icon,
  body[data-theme="dev-view"][data-layout="standard-lms"]
    #player-nav
    :is(#nav-prev, #nav-menu, #nav-next)
    .course-menu-toggle__icon {
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]
    #player-nav
    :is(#nav-prev, #nav-menu, #nav-next).is-active,
  body[data-theme="dev-view"][data-layout="standard-lms"]
    #player-nav
    :is(#nav-prev, #nav-menu, #nav-next):active:not(:disabled) {
    background: #2f6fed !important;
    color: #ffffff !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]
    #player-nav
    :is(#nav-prev, #nav-menu, #nav-next):disabled {
    color: #98a2b3 !important;
    background: transparent !important;
    opacity: 1 !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .dev-sidebar__rail {
      cursor: grab;
    }
  }

  .dev-sidebar__rail.dev-sidebar__rail--dragging,
  .dev-sidebar__rail.dev-sidebar__rail--dragging * {
    cursor: grabbing !important;
    user-select: none;
  }

  .dev-sidebar__rail::-webkit-scrollbar {
    height: 0;
  }

  .dev-sidebar__rail > .dev-nav-icon {
    flex: 0 0 auto;
    touch-action: pan-x;
  }

  /*
   * Mobile rail: full viewport width, original short bar height (not a tall grip strip).
   * Hamburger glyph hidden — minimal centered line; swipe + tap wired in JS.
   */
  .dev-sidebar #sidebar-toggle.dev-nav-collapse--rail-swipe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    width: 100%;
    min-width: 0;
    height: 1.02rem;
    min-height: 1.02rem;
    margin: 0;
    padding: 0 calc(0.35rem + env(safe-area-inset-right, 0px)) 0
      calc(0.35rem + env(safe-area-inset-left, 0px));
    border: 1px solid var(--nls-color-border);
    border-radius: 999px;
    background: var(--dev-rail-chrome-surface);
    /* Same ink as unselected rail tabs; ::after grip uses currentColor */
    color: var(--nls-color-text-muted);
    box-shadow: 0 2px 8px
      color-mix(in srgb, var(--nls-shadow-color) 50%, transparent);
    box-sizing: border-box;
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  .dev-sidebar
    #sidebar-toggle.dev-nav-collapse--rail-swipe.dev-nav-collapse--pulled {
    opacity: 0.9;
  }

  .dev-sidebar
    #sidebar-toggle.dev-nav-collapse--rail-swipe
    .dev-nav-icon__label,
  .dev-sidebar
    #sidebar-toggle.dev-nav-collapse--rail-swipe
    .dev-nav-icon__glyph {
    display: none !important;
  }

  .dev-sidebar #sidebar-toggle.dev-nav-collapse--rail-swipe::after {
    content: "";
    display: block;
    width: 2.25rem;
    height: 0.22rem;
    border-radius: 999px;
    background: currentColor;
  }

  .dev-sidebar:not(.collapsed) #sidebar-toggle.dev-nav-collapse--rail-swipe {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    top: var(
      --mobile-open-toggle-top,
      calc(env(safe-area-inset-top, 0px) + 5.02rem)
    );
    z-index: 80;
    height: 0.9rem;
    min-height: 0.9rem;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0 0 11px 11px;
    border-bottom: 1px solid var(--nls-color-border);
    box-shadow: none;
    background: var(--dev-rail-chrome-surface);
  }

  /* Collapsed: hide full rail; keep Menu control to reopen. */
  .dev-sidebar.collapsed {
    position: relative;
    z-index: 61;
    height: 0;
    min-height: 0;
    border-bottom: 0;
    overflow: visible;
  }

  .dev-sidebar.collapsed
    .dev-sidebar__rail
    > .dev-nav-icon:not(#sidebar-toggle) {
    display: none;
  }

  .dev-sidebar.collapsed .dev-sidebar__rail {
    height: 0;
    min-height: 0;
    justify-content: center;
    border-bottom: 0;
    overflow: visible;
    padding: 0;
  }

  .dev-sidebar.collapsed #sidebar-toggle.dev-nav-collapse--rail-swipe {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    z-index: 70;
    top: calc(env(safe-area-inset-top, 0px) - 1px);
    border-top: 0;
    border-radius: 0 0 11px 11px;
    height: 0.9rem;
    min-height: 0.9rem;
    background: var(--dev-rail-chrome-surface);
  }

  /* Dev view mobile: restore readable player padding after global strip */
  body[data-theme="dev-view"][data-layout="standard-lms"] #player-panel.panel {
    padding: 0.55rem 0.85rem 0.9rem !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] #player-main {
    padding: 10px 0 calc(var(--player-nav-height, 56px) + 18px) !important;
  }

  /* Lesson Back/Next hidden in hub shells — dev-view rule above uses !important; match collapse here. */
  body[data-theme="dev-view"][data-layout="standard-lms"]
    #player-layout:has(#player-nav[hidden])
    #player-main {
    padding: 10px 0 max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Side-rail pages (Home/Account/Courses/etc.): use outer workspace scroll, not nested #player-main scroll. */
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  .player-region:has(#player-nav[hidden]) {
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container:has(#player-nav[hidden]),
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container:has(#player-nav[hidden])
  .legacy-player__workspace,
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container:has(#player-nav[hidden])
  .legacy-player__layout {
  height: auto;
  min-height: 0;
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-layout:has(#player-nav[hidden])
  #player-main {
  overflow-y: visible !important;
  height: auto !important;
  min-height: 0;
  padding-top: 0 !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
}

/*
 * Dev view — continuous canvas (pre-auth + post-auth, mobile + desktop):
 * no floating player “card”; body --nls-color-bg-alt no longer reads as a blue frame.
 */
body[data-theme="dev-view"][data-layout="standard-lms"] {
  background: var(--nls-color-surface);
}

body[data-theme="dev-view"][data-layout="standard-lms"] .player-region {
  background: var(--nls-color-surface);
}

body[data-theme="dev-view"][data-layout="standard-lms"] #player-panel.panel {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0.85rem 1.5rem 1.35rem;
  gap: 0.85rem;
}

/*
 * Launched course (embedded player): flush to shell edges — same continuous canvas as other
 * dev-view surfaces; removes legacy .player-region / #player-panel gutters and extra
 * #player-main bottom pad so the bottom nav sits on the viewport edge.
 */
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  .player-region:has(
    #player-container:not(.player-placeholder-mode):not(.player-course-placeholder)
  ) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
}

/* Mobile: restore space below fixed top rail + handle so course body/menu are not covered. */
@media (max-width: 900px) {
  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .dev-sidebar:not(.collapsed)
    ~ .player-region:has(
      #player-container:not(.player-placeholder-mode):not(.player-course-placeholder)
    ) {
    padding-top: var(--mobile-rail-anchor-height) !important;
    /* Contain full-bleed / 100vw descendants so content does not slide under the right inset. */
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Drawer open: no extra left gutter beside sidebar divider. */
  body[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"]:not(
      .is-logged-out
    )
    .dev-sidebar:not(.collapsed)
    ~ .player-region
    #player-container:not(.player-placeholder-mode):not(.player-course-placeholder)
    #player-main {
    padding-left: 0 !important;
  }
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  .player-region:has(
    #player-container:not(.player-placeholder-mode):not(.player-course-placeholder)
  )
  #player-panel.panel {
  padding: 0 !important;
  gap: 0 !important;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container:not(.player-placeholder-mode):not(.player-course-placeholder) {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  height: 100% !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container:not(.player-placeholder-mode):not(.player-course-placeholder)
  #player-main {
  padding-top: 0 !important;
  padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  padding-bottom: calc(
    var(--player-nav-height, 56px) + max(0px, env(safe-area-inset-bottom, 0px)) + 40px
  ) !important;
  scroll-padding-bottom: calc(
    var(--player-nav-height, 56px) + max(0px, env(safe-area-inset-bottom, 0px)) + 40px
  ) !important;
  min-height: 0 !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .player-region {
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

/* Brand strip: neutral edge (theme border-soft reads very blue) */
body[data-theme="dev-view"] .dev-brand-module {
  border: 1px solid color-mix(in srgb, #e2e8f0 90%, #cbd5e1 10%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 5px 18px rgba(15, 23, 42, 0.045);
}

body[data-theme="dev-view"] .landing-auth-panel__header .dev-brand-module--image-only,
body[data-theme="dev-view"] .landing-auth-panel__header .dev-brand-module--compact-books {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Sidebar rail: same neutral family as login / inputs (all breakpoints) */
body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar__rail {
  background: var(--dev-rail-chrome-surface);
}

body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar {
  background: var(--nls-color-surface);
}

/* Desktop guardrail: keep left rail always clickable above player/menu layers. */
@media (min-width: 901px) {
  body:not(.is-logged-out)[data-layout="standard-lms"] .dev-sidebar {
    position: relative;
    z-index: 2000;
    pointer-events: auto;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"] .dev-sidebar__rail,
  body:not(.is-logged-out)[data-layout="standard-lms"] .dev-sidebar__rail .dev-nav-icon {
    pointer-events: auto;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"] .player-region {
    position: relative;
    z-index: 1;
  }
}

/*
 * Narrow rail + sidebar widths must NOT apply below 901px: mobile uses a full-width
 * horizontal rail with position:fixed + left:0;right:0 — a 72px rail width breaks scroll/swipe.
 */
@media (min-width: 901px) {
  /* Pin desktop rail order for bottom utility cluster. */
  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-sidebar__rail
    .dev-nav-icon[data-panel="developer"] {
    order: 900 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-sidebar__rail
    #sidebar-review-shortcut {
    order: 901 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-sidebar__rail
    #sidebar-store {
    order: 910 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-sidebar__rail
    #sidebar-admin {
    order: 920 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-sidebar__rail
    #sidebar-quick-logout {
    order: 930 !important;
  }

  /* Rail-only sidebar (#dev-panel deprecated) */
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar {
    width: 72px;
    border-right: 1px solid color-mix(in srgb, #e2e8f0 88%, #cbd5e1 12%);
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar__rail {
    width: 72px;
    padding: 0.62rem 0.28rem;
    gap: 0.16rem;
    align-items: center;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-sidebar__rail
    .dev-nav-icon {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    padding: 0.48rem 0.22rem;
    border-radius: 10px;
    gap: 0.1rem;
    font-size: 0.68rem;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-nav-icon__glyph
    svg {
    width: 21px;
    height: 21px;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon__label {
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.012em;
    line-height: 1.15;
    padding-bottom: 0.08em;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
}

/* Desktop: center pre-auth login vertically (avoids tiny card lost in empty canvas) */
@media (min-width: 901px) {
  body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
    .player-region {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: max(1.25rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }
}

/*
 * Mobile / narrow: pre-auth shell — fill viewport height with safe-area padding and
 * optical top weight (avoids full vertical center + keyboard overlap). See AEX dev note
 * `DEV_NOTES_AEX_DEV_APP_PREAUTH_POLISH_v0.1.txt`.
 */
@media (max-width: 900px) {
  body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
    .player-region {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: max(
      0.75rem,
      calc(env(safe-area-inset-top, 0px) + 10vh)
    ) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    box-sizing: border-box !important;
  }

}

/*
 * Dev-view post-auth placeholders: one primary scroll for the workspace (not `#player-main`).
 * `#player-main` is narrower than the player column, so `overflow-y: auto` there draws a
 * “mid-screen” scrollbar; outer scroll keeps the bar at the canvas edge. Applies to empty +
 * course placeholder variants; real course player keeps `#player-main` as the lesson pane.
 */
@media (min-width: 901px) {
  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    ) {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    .legacy-player__workspace {
    height: auto;
    flex: 0 1 auto;
    min-height: 0;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-panel.panel {
    padding: 0 !important;
    gap: 0 !important;
    /* Shrink-wrap to content — `flex: 1` was stretching the panel to ~full viewport height,
       which made `.player-region` think it needed to scroll even when copy + video fit. */
    flex: 0 0 auto;
    align-self: stretch;
    min-height: 0;
    width: 100%;
    height: auto;
    max-height: none;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-container.player-placeholder-mode
    #player-main {
    display: block;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-container.player-placeholder-mode
    .player-placeholder {
    width: 100%;
    margin-inline: 0;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-container:is(.player-placeholder-mode, .player-course-placeholder) {
    height: auto;
    min-height: 0;
    flex: 0 1 auto;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    .legacy-player__layout {
    height: auto;
    flex: 0 1 auto;
    min-height: 0;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-container.player-placeholder-mode
    #player-main {
    display: block;
    box-sizing: border-box;
    min-height: 0;
    overflow-y: visible;
    height: auto;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-container.player-course-placeholder
    #player-main {
    display: block;
    box-sizing: border-box;
    min-height: 0;
    overflow-y: visible;
    height: auto;
  }
}

/* Mobile: `.dev-shell` already scrolls — avoid nested scroll on `#player-main` for placeholders. */
@media (max-width: 900px) {
  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out):has(
      .dev-sidebar:not(.collapsed)
    )
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    ) {
    padding-top: var(--mobile-rail-anchor-height) !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    ) {
    /* Keep content below fixed top rail in placeholder-mode hubs. */
    padding-top: var(--mobile-rail-anchor-height) !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
    flex-direction: column;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out):has(
      .dev-sidebar.collapsed
    )
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    ) {
    padding-top: 0 !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    .legacy-player__workspace {
    height: auto;
    flex: 0 1 auto;
    min-height: 0;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-container:is(.player-placeholder-mode, .player-course-placeholder) {
    height: auto;
    min-height: 0;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    .legacy-player__layout {
    height: auto;
    flex: 0 1 auto;
    min-height: 0;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    #player-main {
    overflow-y: visible !important;
    height: auto !important;
    min-height: 0;
    padding-bottom: 16px !important;
  }
}
/* Home placeholder alignment lock: match Account/Courses container envelope exactly. */
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container.player-placeholder-mode
  #player-main
  > .player-placeholder {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0.75rem !important;
  box-sizing: border-box !important;
}

/* Match Home placeholder inner content envelope to progress-player-detail. */
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container.player-placeholder-mode
  #player-main
  > .player-placeholder
  > .player-placeholder__content {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0.75rem !important;
  box-sizing: border-box !important;
}

/* Absolute Home lock: when dev Home stage exists, use shared centered envelope. */
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-main:has(.dev-surface-brief)
  > .player-placeholder {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0.75rem !important;
  box-sizing: border-box !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-main:has(.dev-surface-brief)
  > .player-placeholder
  > .player-placeholder__content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Deterministic Home shell lock (class set by dev-view placeholder on post-auth). */
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-main
  > .dev-home-player-shell {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0.75rem !important;
  box-sizing: border-box !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-main
  > .dev-home-player-shell
  > .dev-home-content-root {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 520px) {
  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-main
    > .dev-home-player-shell,
  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-main:has(.dev-surface-brief)
    > .player-placeholder {
    max-width: 100% !important;
    padding: 0.55rem !important;
    overflow-x: hidden !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-main
    > .dev-home-player-shell
    > .dev-home-content-root,
  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-main:has(.dev-surface-brief)
    > .player-placeholder
    > .player-placeholder__content,
  .dev-placeholder__content.dev-surface-brief__content,
  .dev-surface-brief,
  .dev-surface-brief .dev-surface-brief__content,
  .dev-surface-brief__header,
  .dev-surface-brief__header-main,
  .dev-surface-brief__section,
  .dev-surface-brief__section-header,
  .dev-home-header,
  .dev-surface-brief__quick-access,
  .dev-home-summary,
  .dev-surface-brief__started-list,
  .admin-home-cockpit,
  .admin-home-cockpit__header,
  .admin-home-cockpit__diagnostics-row,
  .admin-home-cockpit__section,
  .admin-home-cockpit__cards,
  .admin-home-cockpit__card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .dev-surface-brief__started-list,
  .dev-home-header,
  .dev-surface-brief__quick-access,
  .dev-home-summary,
  .admin-home-cockpit,
  .admin-home-cockpit__section,
  .admin-home-cockpit__cards {
    overflow-x: hidden;
  }

  .dev-surface-brief__header,
  .dev-surface-brief__section-header,
  .dev-home-summary__head,
  .admin-home-cockpit__header,
  .admin-home-cockpit__diagnostics-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-items: start;
    gap: 0.42rem;
  }

  .admin2-node-snapshot-card > .dev-home-summary__head {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .admin2-node-snapshot-card > .dev-home-summary__head .admin2-card__title {
    min-width: 0;
    flex: 1 1 auto;
  }

  .admin2-node-snapshot-card__actions {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
  }

  .admin2-node-snapshot-card .dev-home-summary__section-action--inline {
    padding: 0.35rem 0.58rem;
  }

  .admin2-node-snapshot-card
    .dev-home-summary__section-action--inline
    .dev-home-summary__section-action-label {
    display: inline !important;
  }

  .dev-home-summary[data-dev-home-schedule-section] .dev-home-summary__head {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-items: unset !important;
    justify-content: flex-start !important;
  }

  .dev-home-summary[data-dev-home-schedule-section] #dev-home-schedule-heading {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .dev-home-summary[data-dev-home-schedule-section] [data-dev-home-schedule-refresh] {
    margin-left: auto !important;
    margin-top: 0 !important;
  }

  .dev-placeholder__content.dev-surface-brief__content,
  .dev-surface-brief .dev-surface-brief__content,
  .dev-home-header,
  .dev-surface-brief__quick-access,
  .dev-home-summary,
  .dev-home-summary__head {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .dev-home-summary__refresh-meta {
    margin-left: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .dev-home-quick-card.dev-surface-brief__started-item--with-mini,
  .dev-surface-brief__started-item.dev-home-quick-card {
    grid-template-columns: 3rem minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "cover meta"
      "cta cta" !important;
    gap: 0.48rem !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .dev-home-quick-card .dev-surface-brief__mini-cover {
    grid-area: cover;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
  }

  .dev-home-quick-card .dev-surface-brief__started-meta,
  .dev-home-quick-card .dev-home-quick-card__copy,
  .dev-home-quick-card .dev-surface-brief__started-title,
  .dev-home-quick-card .dev-surface-brief__started-title-textline {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .dev-home-quick-card .dev-surface-brief__started-meta {
    grid-area: meta;
  }

  .dev-home-quick-card .dev-home-quick-card__cta {
    grid-area: cta !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    margin-left: calc(-0.55rem - 1px) !important;
    margin-right: calc(-0.55rem - 1px) !important;
    width: calc(100% + 1.1rem + 2px) !important;
    min-width: calc(100% + 1.1rem + 2px) !important;
    max-width: none !important;
    white-space: normal;
  }

  .admin-home-cockpit {
    padding: 0.55rem;
  }

  .admin-home-cockpit__cards,
  .admin-home-cockpit__cards--snapshot {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-home-cockpit__card-line {
    min-width: 0;
    gap: 0.24rem;
  }

  .admin-home-cockpit__card-line-label,
  .admin-home-cockpit__card-line-value,
  .admin-home-cockpit__card-title {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Shared tuning: one rhythm across all panels/open-closed states (narrow-mobile only). */
@media (max-width: 760px) {
  body:not(.is-logged-out)[data-layout="standard-lms"]:has(
      .dev-sidebar:not(.collapsed)
    )
    #player-layout:has(#player-nav[hidden])
    #player-main {
    padding-top: 0.78rem !important;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]:has(.dev-sidebar.collapsed)
    #player-layout:has(#player-nav[hidden])
    #player-main {
    padding-top: 0.74rem !important;
  }
}

/* Course bottom nav segmented design system (all viewports). */
body[data-theme="dev-view"][data-layout="standard-lms"] #player-nav {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 0 !important;
  padding: 3px !important;
  margin: 0 max(12px, env(safe-area-inset-left, 0px))
    max(10px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-right, 0px)) !important;
  border: 1px solid #d0d5dd !important;
  border-top: 1px solid #d0d5dd !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  overflow: visible !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"] #player-nav[hidden] {
  display: none !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"] #nav-prev,
body[data-theme="dev-view"][data-layout="standard-lms"] #nav-menu,
body[data-theme="dev-view"][data-layout="standard-lms"] #nav-next {
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #344054 !important;
  opacity: 1 !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"] #nav-prev {
  grid-column: 1 !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"] #nav-menu {
  grid-column: 2 !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"] #nav-next {
  grid-column: 3 !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"]
  #player-nav
  :is(#nav-prev, #nav-menu, #nav-next)[hidden] {
  display: none !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"] #nav-prev,
body[data-theme="dev-view"][data-layout="standard-lms"] #nav-menu {
  border-right: 1px solid #e4e7ec !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"]
  #player-nav
  :is(#nav-prev, #nav-menu, #nav-next)
  .course-nav-icon,
body[data-theme="dev-view"][data-layout="standard-lms"]
  #player-nav
  :is(#nav-prev, #nav-menu, #nav-next)
  .course-menu-toggle__icon {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"]
  #player-nav
  :is(#nav-prev, #nav-menu, #nav-next).is-active,
body[data-theme="dev-view"][data-layout="standard-lms"]
  #player-nav
  :is(#nav-prev, #nav-menu, #nav-next):active:not(:disabled) {
  background: #2f6fed !important;
  color: #ffffff !important;
}

body.is-edukasindo-branding-surface[data-theme="dev-view"][data-layout="standard-lms"]
  #player-nav
  :is(#nav-prev, #nav-menu, #nav-next).is-active,
body.is-edukasindo-branding-surface[data-theme="dev-view"][data-layout="standard-lms"]
  #player-nav
  :is(#nav-prev, #nav-menu, #nav-next):active:not(:disabled) {
  background: #1b62a0 !important;
  color: #ffffff !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"]
  #player-nav
  :is(#nav-prev, #nav-menu, #nav-next):disabled {
  color: #98a2b3 !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* Desktop: course menu show/hide is deprecated (menu remains open). */
@media (min-width: 901px) {
  body[data-layout="standard-lms"][data-course-menu-mode="desktop"] #nav-menu,
  body[data-layout="standard-lms"][data-course-menu-mode="desktop"] #course-menu-edge-toggle,
  body[data-layout="standard-lms"] #course-menu-edge-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-layout="standard-lms"][data-course-menu-mode="desktop"] #nav-menu {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
  }
}

/* ==========================================================================
   AEX Action Button System (design-locked, toolbar scope only)
   ========================================================================== */

:where(
  .admin2-actions,
  .classes-action-bar,
  .account-editor-actions,
  .account-danger-actions__left,
  .course-actions--inline
) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}

:where(
  .admin2-actions,
  .classes-action-bar,
  .account-editor-actions,
  .account-danger-actions__left,
  .course-actions--inline
)
  > :is(.course-action, button),
.courses-add-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  min-height: 0 !important;
  border-radius: 10px !important;
  border: 1px solid #d0d5dd !important;
  background: #ffffff !important;
  color: #344054 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  width: fit-content !important;
  max-width: 100% !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.05s ease !important;
}

:where(
  .admin2-actions,
  .classes-action-bar,
  .account-editor-actions,
  .account-danger-actions__left,
  .course-actions--inline
)
  > :is(.course-action, button):is(:hover, :focus-visible):not(:disabled),
.courses-add-button:is(:hover, :focus-visible):not(:disabled) {
  background: #f2f4f7 !important;
  border-color: #98a2b3 !important;
  color: #1d2939 !important;
}

:where(
  .admin2-actions,
  .classes-action-bar,
  .account-editor-actions,
  .account-danger-actions__left,
  .course-actions--inline
)
  > :is(.course-action, button):active:not(:disabled),
.courses-add-button:active:not(:disabled) {
  background: #e4e7ec !important;
  transform: translateY(1px);
}

/* Primary: exactly one per logical group (explicit classes + first action fallback). */
.courses-add-button,
.account-editor-actions > button[id*="save" i],
.account-editor-actions > button[data-action*="save" i],
.account-editor-actions > button.account-action--primary,
.admin2-shell .admin2-actions > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled),
.admin2-shell .classes-action-bar > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled) {
  background: #2f6fed !important;
  border-color: #2f6fed !important;
  color: #ffffff !important;
}

.courses-add-button:is(:hover, :focus-visible):not(:disabled),
.account-editor-actions > button[id*="save" i]:is(:hover, :focus-visible):not(:disabled),
.account-editor-actions > button[data-action*="save" i]:is(:hover, :focus-visible):not(:disabled),
.account-editor-actions > button.account-action--primary:is(:hover, :focus-visible):not(:disabled),
.admin2-shell .admin2-actions > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):is(:hover, :focus-visible),
.admin2-shell .classes-action-bar > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):is(:hover, :focus-visible) {
  background: #2557c8 !important;
  border-color: #2557c8 !important;
  color: #ffffff !important;
}

.courses-add-button:active:not(:disabled),
.account-editor-actions > button[id*="save" i]:active:not(:disabled),
.account-editor-actions > button[data-action*="save" i]:active:not(:disabled),
.account-editor-actions > button.account-action--primary:active:not(:disabled),
.admin2-shell .admin2-actions > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):active,
.admin2-shell .classes-action-bar > .course-action:first-child:not(.course-action--inline):not(.course-action--danger):not(:disabled):active {
  background: #1f4aa8 !important;
  border-color: #1f4aa8 !important;
}

/* Admin Home users toolbar: keep Add student/s neutral (not primary). */
.admin2-shell
  .admin2-users-search-toolbar__actions
  > .course-action:first-child:not(.course-action--danger):not(:disabled) {
  background: var(--nls-color-surface, #ffffff) !important;
  border-color: var(--nls-color-border-soft, #d0d5dd) !important;
  color: var(--nls-color-text, #1d2939) !important;
}

.admin2-shell
  .admin2-users-search-toolbar__actions
  > .course-action:first-child:not(.course-action--danger):not(:disabled):is(:hover, :focus-visible) {
  background: #f2f4f7 !important;
  border-color: #98a2b3 !important;
  color: #1d2939 !important;
}

.admin2-shell
  .admin2-users-search-toolbar__actions
  > .course-action:first-child:not(.course-action--danger):not(:disabled):active {
  background: #e4e7ec !important;
  border-color: #98a2b3 !important;
  color: #1d2939 !important;
}

/* Danger actions */
.course-action--danger,
.notices-card__manage-action--danger,
.account-danger-actions__left > :is(.course-action, button) {
  background: #fee4e2 !important;
  border-color: #fca5a5 !important;
  color: #b42318 !important;
}

.course-action--danger:is(:hover, :focus-visible):not(:disabled),
.notices-card__manage-action--danger:is(:hover, :focus-visible):not(:disabled),
.account-danger-actions__left > :is(.course-action, button):is(:hover, :focus-visible):not(:disabled) {
  background: #fecdca !important;
  border-color: #fca5a5 !important;
  color: #b42318 !important;
}

.course-action--danger:active:not(:disabled),
.notices-card__manage-action--danger:active:not(:disabled),
.account-danger-actions__left > :is(.course-action, button):active:not(:disabled) {
  background: #fda29b !important;
}

/* Disabled */
:where(
  .admin2-actions,
  .classes-action-bar,
  .account-editor-actions,
  .account-danger-actions__left,
  .course-actions--inline
)
  > :is(.course-action, button):disabled,
.courses-add-button:disabled {
  background: #f2f4f7 !important;
  border-color: #e4e7ec !important;
  color: #98a2b3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Icon consistency */
:where(
  .admin2-actions,
  .classes-action-bar,
  .account-editor-actions,
  .account-danger-actions__left,
  .course-actions--inline
)
  > :is(.course-action, button)
  :is(.course-action__icon, svg),
.courses-add-button :is(.courses-add-button__icon, .course-action__icon, svg) {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  order: -1 !important;
  margin: 0 !important;
  fill: currentColor !important;
  color: currentColor !important;
  flex: 0 0 auto;
}

/* Compact inline actions for row-level and utility contexts. */
:where(
  .admin2-actions,
  .classes-action-bar,
  .account-editor-actions,
  .account-danger-actions__left,
  .course-actions--inline
)
  > :is(.course-action, button).course-action--inline {
  min-height: 28px !important;
  padding: 0 9px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  gap: 5px !important;
  background: color-mix(in srgb, #ffffff 92%, #f8fafc 8%) !important;
  border-color: #d0d5dd !important;
  color: #475467 !important;
}

:where(
  .admin2-actions,
  .classes-action-bar,
  .account-editor-actions,
  .account-danger-actions__left,
  .course-actions--inline
)
  > :is(.course-action, button).course-action--inline:is(:hover, :focus-visible):not(:disabled) {
  background: #f8fafc !important;
  border-color: #98a2b3 !important;
  color: #1d2939 !important;
}

:where(
  .admin2-actions,
  .classes-action-bar,
  .account-editor-actions,
  .account-danger-actions__left,
  .course-actions--inline
)
  > :is(.course-action, button).course-action--inline.course-action--danger {
  background: #fee4e2 !important;
  border-color: #fca5a5 !important;
  color: #b42318 !important;
}

:where(
  .admin2-actions,
  .classes-action-bar,
  .account-editor-actions,
  .account-danger-actions__left,
  .course-actions--inline
)
  > :is(.course-action, button).course-action--inline.course-action--danger:is(:hover, :focus-visible):not(:disabled) {
  background: #fecdca !important;
  border-color: #fca5a5 !important;
  color: #b42318 !important;
}

:where(
  .admin2-actions,
  .classes-action-bar,
  .account-editor-actions,
  .account-danger-actions__left,
  .course-actions--inline
)
  > :is(.course-action, button).course-action--inline.course-action--danger:active:not(:disabled) {
  background: #fda29b !important;
}

:where(
  .admin2-actions,
  .classes-action-bar,
  .account-editor-actions,
  .account-danger-actions__left,
  .course-actions--inline
)
  > :is(.course-action, button).course-action--inline
  :is(.course-action__icon, svg) {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
}

:where(
  .admin2-actions,
  .classes-action-bar,
  .account-editor-actions,
  .account-danger-actions__left,
  .course-actions--inline
)
  > :is(.course-action, button).course-action--inline.course-action--inline-icon {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  justify-content: center !important;
}

@media (max-width: 900px) {
  :where(
    .admin2-actions,
    .classes-action-bar,
    .account-editor-actions,
    .account-danger-actions__left,
    .course-actions--inline,
    .admin-home-cockpit__diagnostics-row
  )
    > :is(.course-action, button).course-action--inline.course-action--inline-mobile-icon-only {
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  :where(
    .admin2-actions,
    .classes-action-bar,
    .account-editor-actions,
    .account-danger-actions__left,
    .course-actions--inline,
    .admin-home-cockpit__diagnostics-row
  )
    > :is(.course-action, button).course-action--inline.course-action--inline-mobile-icon-only
    .course-action__label {
    display: none !important;
  }
}

/* Admin node manage sections: force compact inline action treatment. */
.admin2-context-manage-embed .admin2-actions > :is(.course-action, button) {
  min-height: 28px !important;
  padding: 0 9px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  gap: 5px !important;
}

/* Profile view: keep all actions in compact inline button style. */
.account-summary :is(.course-action, button) {
  min-height: 28px !important;
  padding: 0 9px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  gap: 5px !important;
}

/* Sidebar 2 visual pass (desktop-first, keep existing behavior wiring) */
body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar-brand {
  display: none;
}

/* Normalize typography between IDE browser and Chrome for nav/actions. */
body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar,
body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar .dev-nav-icon,
body[data-theme="dev-view"] :is(.course-action, .app-popup-dialog__actions .app-popup-btn) {
  font-family:
    "Inter",
    var(--nls-font-family),
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif !important;
}

/* Always honor role-gated hidden sidebar controls across breakpoints. */
body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar [hidden] {
  display: none !important;
}

@media (min-width: 901px) {
  body:not(.is-logged-out)[data-layout="standard-lms"] .dev-shell {
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar {
    width: 240px !important;
    border-right: 1px solid #e4e7ec !important;
    background: #ffffff !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar__rail {
    width: 240px !important;
    padding: 0 10px 10px !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar-brand {
    order: 5 !important;
    min-height: 0;
    flex: 0 0 auto;
    margin: 0 0 8px;
    padding: 16px 0 12px;
    padding-left: 12px;
    border-bottom: 1px solid #e4e7ec;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    color: #2f6fed;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar-brand__logo {
    display: block;
    max-width: 180px;
    height: 28px;
    max-height: 28px;
    min-height: 28px;
    width: auto;
    object-fit: contain;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar-brand__fallback-icon {
    width: 20px;
    height: 20px;
    color: #2f6fed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    background-color: currentColor;
    -webkit-mask-image: var(--nls-action-placeholder-icon);
    mask-image: var(--nls-action-placeholder-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    justify-self: start;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar-brand__fallback-label {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #2f6fed;
    line-height: 1;
    justify-self: start;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-toggle {
    display: none !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #475467 !important;
    box-shadow: none !important;
    padding: 10px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    gap: 12px !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    position: relative;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon__glyph {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon__glyph svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon__label {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon.active {
    background: #2f6fed !important;
    color: #ffffff !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-nav-icon:hover:not(.active):not(:disabled) {
    background: #eaecf0 !important;
    color: #344054 !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-nav-icon:active:not(:disabled) {
    background: #dfe3e8 !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-home {
    order: 10 !important;
    margin-top: 2px;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="access"] {
    order: 11 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="launchpad"] {
    order: 12 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-detail-view="course-player"]
    .dev-nav-icon[data-panel="launchpad"] {
    display: none !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="classes"] {
    order: 13 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="announcements"] {
    order: 20 !important;
    margin-top: 18px;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-support-report-btn {
    order: 21 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-admin2-btn {
    order: 30 !important;
    margin-top: 18px;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="developer"] {
    order: 31 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-review-shortcut {
    order: 32 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-store {
    order: 40 !important;
    margin-top: 18px;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-admin {
    order: 41 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-quick-logout {
    order: 99 !important;
    margin-top: auto;
    border-top: 1px solid #e4e7ec !important;
    border-radius: 0 !important;
    padding: 12px 12px 16px !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="announcements"]::before,
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-admin2-btn::before,
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-store::before {
    display: block;
    position: absolute;
    top: -14px;
    left: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #98a2b3;
    pointer-events: none;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="announcements"]::before {
    content: "COMMUNICATION";
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-admin2-btn::before {
    content: "ADMIN";
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-store::before {
    content: "SYSTEM";
  }

}

/* Phase override: mobile uses same vertical sidebar menu as desktop. */
@media (max-width: 900px) {
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-shell {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar {
    width: 76px !important;
    border-right: 1px solid #d0d5dd !important;
    box-shadow: inset -1px 0 0 #d0d5dd !important;
    background: #ffffff !important;
    position: relative !important;
    z-index: auto !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: #d0d5dd;
    pointer-events: none;
    z-index: 4;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar__rail {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    width: 76px !important;
    padding: 10px 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-bottom: 0 !important;
    touch-action: auto !important;
    cursor: default !important;
    box-sizing: border-box !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar__rail::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-toggle {
    display: none !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed,
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed .dev-sidebar__rail {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 10px 10px !important;
    border-bottom: 0 !important;
    overflow: visible !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed .dev-sidebar__rail > .dev-nav-icon {
    display: inline-flex !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar ~ .player-region {
    padding-top: 0 !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .dev-sidebar:not(.collapsed)
    ~ .player-region:has(
      #player-container:not(.player-placeholder-mode):not(.player-course-placeholder)
    ) {
    padding-top: 0 !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar-brand {
    order: 5 !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    width: 100%;
    margin: 0 0 6px;
    padding: 6px 0 10px;
    border-bottom: 1px solid #e4e7ec;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #2f6fed;
    font-size: 0;
    font-weight: 700;
    line-height: 1;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar-brand__logo {
    display: block;
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    min-height: 20px;
    object-fit: contain;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar-brand__fallback-icon {
    width: 20px;
    height: 20px;
    color: #2f6fed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    background-color: currentColor;
    -webkit-mask-image: var(--nls-action-placeholder-icon);
    mask-image: var(--nls-action-placeholder-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    justify-self: center;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar-brand__fallback-label {
    display: none !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #475467 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 0 !important;
    text-align: center !important;
    font-size: 0 !important;
    font-weight: 500 !important;
    position: relative;
    flex: 0 0 auto !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon__glyph {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon__label {
    display: none !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon__glyph svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon.active {
    background: #2f6fed !important;
    color: #ffffff !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-home {
    order: 10 !important;
    margin-top: 0;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="access"] {
    order: 11 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="launchpad"] {
    order: 12 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="classes"] {
    order: 13 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="announcements"] {
    order: 20 !important;
    margin-top: 12px;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-support-report-btn {
    order: 21 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-admin2-btn {
    order: 30 !important;
    margin-top: 12px;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="developer"] {
    order: 31 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-review-shortcut {
    order: 32 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-store {
    order: 40 !important;
    margin-top: 12px;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-admin {
    order: 41 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-quick-logout {
    order: 99 !important;
    margin-top: auto;
    border-top: 1px solid #e4e7ec !important;
    border-radius: 0 !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    padding: 12px 0 8px !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="announcements"]::before,
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-admin2-btn::before,
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-store::before {
    display: none;
    position: absolute;
    top: -14px;
    left: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #98a2b3;
    pointer-events: none;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon[data-panel="announcements"]::before,
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-admin2-btn::before,
  body[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-store::before {
    content: none !important;
  }
}

/* Final guardrail (desktop only): remove per-view top padding from player workspace pane. */
@media (min-width: 901px) {
  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] #player-main {
    padding-top: 0 !important;
  }
}

/* Final layout: top-left header owns brand and menu toggle. */
body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar-brand {
  display: none !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header {
  display: none;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 10px;
  border-bottom: 1px solid #e4e7ec;
  background: #ffffff;
  grid-area: top;
  box-sizing: border-box;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__menu {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475467;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__menu:hover {
  background: #f2f4f7;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__menu-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand {
  border: 0;
  background: transparent;
  color: #2f6fed;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand.dev-top-header__brand--logo-only {
  gap: 0;
  height: 100%;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand.dev-top-header__brand--logo-only .dev-top-header__brand-icon {
  width: auto;
  height: 100%;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  color: #2f6fed;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-icon.dev-top-header__brand-icon--gme {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-cobrand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-cobrand-gme {
  width: auto;
  height: min(100%, 34px);
  max-width: 110px;
  object-fit: contain;
  object-position: left center;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-cobrand-wordmark-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding-top: 0.52rem;
  box-sizing: border-box;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-cobrand-powered-by {
  position: absolute;
  left: 0;
  top: 0.56rem;
  font-size: 0.54rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4f647d;
  white-space: nowrap;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-cobrand-wordmark {
  width: auto;
  height: min(100%, 24px);
  max-width: 210px;
  object-fit: contain;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo.dev-top-header__brand-logo--gme {
  width: 20px;
  height: 20px;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo.dev-top-header__brand-logo--full {
  width: auto;
  height: auto;
  max-height: 35px;
  max-width: none;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo.dev-top-header__brand-logo--contain {
  object-fit: contain;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo.dev-top-header__brand-logo--cover {
  object-fit: cover;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo.dev-top-header__brand-logo--full.dev-top-header__brand-logo--gme {
  height: auto;
  max-height: 35px;
  max-width: none;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo-combo {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  max-width: 100%;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo--combo-primary {
  width: auto;
  height: 34px;
  max-width: 42px;
  object-fit: contain;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo--combo-secondary {
  width: auto;
  height: 30px;
  max-width: 148px;
  object-fit: contain;
}

body.is-gme-connected-united-branding-surface:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo-combo {
  height: clamp(30px, 3.1vw, 36px);
  max-width: min(70vw, 560px);
  width: auto;
  gap: clamp(0.24rem, 0.7vw, 0.52rem);
  padding-inline: 0.14rem;
  box-sizing: border-box;
}

body.is-gme-connected-united-branding-surface:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"]
  .dev-top-header__brand.dev-top-header__brand--logo-only
  .dev-top-header__brand-icon {
  overflow: visible;
  padding-inline: 0.08rem;
}

body.is-gme-connected-united-branding-surface:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo--combo-primary {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
}

body.is-gme-connected-united-branding-surface:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo--combo-secondary {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
}

body.is-gme-connected-united-branding-surface:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo.dev-top-header__brand-logo--full.dev-top-header__brand-logo--gme {
  max-height: 38px;
  width: auto;
  object-fit: contain;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-fallback-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  background-color: currentColor;
  -webkit-mask-image: var(--nls-action-placeholder-icon);
  mask-image: var(--nls-action-placeholder-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #2f6fed;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header-id-viewer {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header-id-viewer__input {
  width: clamp(190px, 26vw, 340px);
  max-width: 100%;
  height: 32px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 13px;
  background: #fff;
  color: #111827;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header-id-viewer__btn {
  height: 32px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: #344054;
  background: #f8fafc;
  cursor: pointer;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header-id-viewer__btn:hover {
  background: #eef2ff;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__uniandes-video-wrap {
  margin-left: auto;
  display: flex;
  flex: 0 0 auto;
  align-self: stretch;
  align-items: stretch;
  justify-content: flex-end;
  height: 100%;
  max-height: 56px;
  width: auto;
  max-width: min(52vw, 440px);
  overflow: visible;
  line-height: 0;
  padding: 0;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__uniandes-video {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: right center;
  border: 0;
}

body.is-uniandes-branding-surface:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand.dev-top-header__brand--logo-only {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(46vw, 300px);
}

body.is-uniandes-branding-surface:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand.dev-top-header__brand--logo-only .dev-top-header__brand-icon {
  min-width: 0;
  max-width: 100%;
}

body.is-uniandes-branding-surface:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand-logo.dev-top-header__brand-logo--full {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 35px;
  object-fit: contain !important;
  object-position: left center;
}

body.is-uniandes-branding-surface:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__uniandes-video-wrap {
  max-width: min(50vw, 420px);
}

@media (max-width: 1080px) {
  body.is-uniandes-branding-surface:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__brand.dev-top-header__brand--logo-only {
    max-width: min(52vw, 260px);
  }

  body.is-uniandes-branding-surface:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__uniandes-video-wrap {
    max-width: min(48vw, 360px);
  }
}

@media (max-width: 900px) {
  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header__uniandes-video-wrap {
    max-width: min(52vw, 320px);
  }
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar {
  grid-area: sidebar;
  align-self: stretch;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .player-region {
  grid-area: player;
  min-width: 0;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] #sidebar-toggle {
  display: none !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"] .mobile-sidebar-backdrop {
  display: none;
}

@media (min-width: 901px) {
  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-shell {
    grid-template-columns: 240px minmax(0, 1fr) !important;
    grid-template-rows: 56px minmax(0, 1fr) !important;
    grid-template-areas:
      "top top"
      "sidebar player";
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar {
    width: 240px !important;
    min-width: 240px !important;
    height: calc(100dvh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    border-right: 1px solid #e4e7ec !important;
    box-shadow: none !important;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar__rail {
    width: 240px !important;
    height: calc(100dvh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
    padding-top: 10px !important;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"]:has(.dev-sidebar.collapsed)
    .dev-shell {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed {
    width: 76px !important;
    min-width: 76px !important;
    border-right: 1px solid #e4e7ec !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed .dev-sidebar__rail {
    width: 76px !important;
    padding: 10px 8px 10px !important;
    align-items: center !important;
    gap: 8px !important;
    opacity: 1;
    pointer-events: auto;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed .dev-nav-icon {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    min-height: 48px !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    text-align: center !important;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed .dev-nav-icon__label {
    display: none !important;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed .dev-nav-icon[data-panel="announcements"]::before,
  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed #sidebar-admin2-btn::before,
  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed #sidebar-store::before {
    display: none !important;
    content: none !important;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed #sidebar-quick-logout {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    padding: 12px 0 8px !important;
  }
}

@media (max-width: 900px) {
  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 56px minmax(0, 1fr) !important;
    grid-template-areas:
      "top"
      "player";
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1301 !important;
    width: 76px !important;
    min-width: 76px !important;
    height: auto !important;
    min-height: 0 !important;
    border-right: 1px solid #d0d5dd !important;
    box-shadow: inset -1px 0 0 #d0d5dd !important;
    transform: translateX(0);
    transition: transform 0.2s ease;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar::after {
    top: 0;
    bottom: 0;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar__rail {
    height: calc(100dvh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed {
    transform: translateX(-100%);
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar.collapsed .dev-sidebar__rail {
    opacity: 1;
    pointer-events: auto;
  }

  body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"] .mobile-sidebar-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    left: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 1300;
    cursor: pointer;
  }
}

/* Locked pre-auth override before post-auth final selectors. */
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .dev-top-header {
  display: none !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .dev-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "player" !important;
}

body.is-logged-out .player-region {
  min-height: 100dvh !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  padding-top: max(28px, env(safe-area-inset-top, 0px)) !important;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(239, 246, 255, 0.52)),
    url("/images/preauth/preauth-mountain-bg.png") !important;
  background-position: center !important;
  background-size: cover !important;
}

body.is-edukasindo-branding-surface.is-logged-out .player-region,
body.is-logged-out:has(.landing-auth-panel__header .dev-login-brand-environment__logo[src*="edukasindo"]) .player-region {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(239, 246, 255, 0.36)),
    url("/images/preauth/preauth-edukasindo-rice-terrace-bg.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

body.is-edukasindo-branding-surface.is-logged-out #landing-auth-panel.panel,
body.is-edukasindo-branding-surface.is-logged-out #landing-auth-panel.landing-auth-panel--in-fallback,
body.is-logged-out:has(.landing-auth-panel__header .dev-login-brand-environment__logo[src*="edukasindo"]) #landing-auth-panel.panel,
body.is-logged-out:has(.landing-auth-panel__header .dev-login-brand-environment__logo[src*="edukasindo"])
  #landing-auth-panel.landing-auth-panel--in-fallback {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.is-logged-out:has(.landing-auth-panel__header .dev-login-brand-environment__logo[src*="edulangua"]) #landing-auth-panel.panel,
body.is-logged-out:has(.landing-auth-panel__header .dev-login-brand-environment__logo[src*="edulangua"])
  #landing-auth-panel.landing-auth-panel--in-fallback {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.is-logged-out:has(.landing-auth-panel__header .dev-login-brand-environment__logo[src*="lsenglish"]) #landing-auth-panel.panel,
body.is-logged-out:has(.landing-auth-panel__header .dev-login-brand-environment__logo[src*="lsenglish"])
  #landing-auth-panel.landing-auth-panel--in-fallback {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.is-logged-out:has(.landing-auth-panel__header .dev-login-brand-environment__logo[src*="staging-environment-logo"]) #landing-auth-panel.panel,
body.is-logged-out:has(.landing-auth-panel__header .dev-login-brand-environment__logo[src*="staging-environment-logo"])
  #landing-auth-panel.landing-auth-panel--in-fallback {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.is-uniandes-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .player-region {
  --uniandes-side-panel-width: max(calc(100dvh * 0.914286), calc(100vw * 0.411841));
  --uniandes-center-panel-width: max(calc(100dvh * 0.913333), calc(100vw * 0.176318));
  --uniandes-panel-overlap: 2px;
  background-image:
    linear-gradient(180deg, rgba(7, 20, 74, 0.32), rgba(7, 20, 74, 0.24)),
    url("/images/preauth/preauth-uniandes-eagle-bg.webp"),
    url("/images/preauth/preauth-uniandes-center.png"),
    url("/images/preauth/preauth-uniandes-left.webp") !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position:
    center,
    calc(50% - (var(--uniandes-center-panel-width) / 2) - (var(--uniandes-side-panel-width) / 2) + var(--uniandes-panel-overlap))
      center,
    center center,
    calc(50% + (var(--uniandes-center-panel-width) / 2) + (var(--uniandes-side-panel-width) / 2) - var(--uniandes-panel-overlap))
      center !important;
  background-size:
    cover,
    var(--uniandes-side-panel-width) 100%,
    var(--uniandes-center-panel-width) 100%,
    var(--uniandes-side-panel-width) 100% !important;
}

body.is-uniandes-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #landing-auth-panel.panel,
body.is-uniandes-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #landing-auth-panel.landing-auth-panel--in-fallback {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.is-gme-connected-united-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #landing-auth-panel.panel,
body.is-gme-connected-united-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #landing-auth-panel.landing-auth-panel--in-fallback {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #player-container,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-slot {
  width: min(100%, 420px) !important;
  max-width: 420px !important;
  min-width: min(340px, calc(100vw - 32px)) !important;
  margin-inline: auto !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #landing-auth-panel.panel,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #landing-auth-panel.landing-auth-panel--in-fallback {
  width: min(100%, 420px) !important;
  max-width: 420px !important;
  position: relative !important;
  overflow: visible !important;
  padding-block: clamp(24px, 3.4vw, 32px) !important;
  padding-inline: clamp(20px, 5.2vw, 24px) !important;
  min-width: min(340px, calc(100vw - 32px)) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .panel-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-brand-module__media img,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-brand-logo-row,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-brand-module--compact-books,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-platforms-books-row,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-united-books-anim {
  display: none !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-localhost,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment {
  width: min(100%, 100%) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  justify-content: center !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: clamp(0.4rem, 1.2vw, 0.72rem) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--logo-only {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  gap: 0 !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__media {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  height: auto !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__logo {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--gme-platforms {
  justify-items: stretch !important;
  gap: 0 !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment__powered-by {
  font-size: clamp(0.62rem, 1.05vw, 0.78rem) !important;
  line-height: 1.2 !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__media--gme-platforms {
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(52px, 6.4vw, 78px) !important;
  min-height: clamp(52px, 6.4vw, 78px) !important;
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(88px, 21%) minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: clamp(0.3rem, 1vw, 0.6rem) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__gme-stack {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  height: 100% !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__wordmark-wrap {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  height: 100% !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__logo--gme-platforms-icon {
  width: 100% !important;
  height: auto !important;
  max-height: calc(100% - 1.2rem) !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left top !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__logo--gme-platforms-wordmark {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: right bottom !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--gme-cobrand-stack {
  justify-items: stretch !important;
  gap: 0 !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__media--gme-cobrand-stack {
  width: 100% !important;
  min-height: clamp(122px, 12.8vw, 164px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.1rem, 0.48vw, 0.28rem) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__logos-row {
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: clamp(0.32rem, 0.9vw, 0.54rem) !important;
  width: min(100%, 390px) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__logo--gme-cobrand-stack-logo {
  width: auto !important;
  height: clamp(64px, 8.6vw, 108px) !important;
  max-width: min(88%, 210px) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__logo--gme-cobrand-stack-partner {
  width: auto !important;
  height: clamp(64px, 8.6vw, 108px) !important;
  max-width: min(88%, 210px) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--gme-cobrand-stack-uniandes .dev-login-brand-environment__media--gme-cobrand-stack {
  min-height: clamp(92px, 9.8vw, 126px) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--gme-cobrand-stack-uniandes .dev-login-brand-environment__logos-row {
  justify-content: space-between !important;
  gap: clamp(0.82rem, 1.65vw, 1.28rem) !important;
  padding-inline: clamp(0.16rem, 0.72vw, 0.4rem) !important;
  box-sizing: border-box !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--gme-cobrand-stack-uniandes .dev-login-brand-environment__logo--gme-cobrand-stack-logo-uniandes,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--gme-cobrand-stack-uniandes .dev-login-brand-environment__logo--gme-cobrand-stack-partner {
  height: clamp(50px, 5.8vw, 68px) !important;
  max-width: min(47%, 186px) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment__powered-by--stack {
  display: block !important;
  width: min(100%, 390px) !important;
  text-align: left !important;
  font-size: clamp(0.58rem, 0.92vw, 0.76rem) !important;
  line-height: 1.2 !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment--logo-only .dev-login-brand-environment__logo--gme-cobrand-stack-wordmark {
  width: min(100%, 390px) !important;
  max-width: 100% !important;
  height: auto !important;
}

body.is-gme-connected-united-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-panel__header
  .dev-login-brand-environment--logo-only
  .dev-login-brand-environment__logo-combo {
  width: min(100%, 560px) !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 36%) minmax(0, 64%) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.34rem, 0.95vw, 0.8rem) !important;
  overflow: visible !important;
  padding-inline: clamp(0.2rem, 0.8vw, 0.4rem) !important;
  box-sizing: border-box !important;
}

body.is-gme-connected-united-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-panel__header
  .dev-login-brand-environment--logo-only
  .dev-login-brand-environment__logo--combo-primary {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
  justify-self: stretch !important;
}

body.is-gme-connected-united-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-panel__header
  .dev-login-brand-environment--logo-only
  .dev-login-brand-environment__logo--combo-secondary {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
  justify-self: stretch !important;
}

body.is-gme-connected-united-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-form
  .auth-actions {
  background: #ffffff !important;
  border-radius: 14px;
  padding: 0.46rem;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-localhost__icon,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment__icon {
  width: clamp(30px, 3.1vw, 42px) !important;
  height: clamp(30px, 3.1vw, 42px) !important;
  flex: 0 0 clamp(30px, 3.1vw, 42px) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-localhost__label,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__header .dev-login-brand-environment__label {
  font-size: clamp(1.9rem, 3.2vw, 3rem) !important;
  line-height: 1.06 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__intro {
  margin: 6px 0 4px !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* Logged-out pre-auth: keep inset fields in final stacked state from first paint. */
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-form
  .landing-inset-field
  .landing-inset-field__caption {
  top: 0.38rem !important;
  transform: translateY(0) !important;
  font-size: 0.625rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-form
  .landing-inset-field
  .landing-inset-field__input {
  padding-top: var(--landing-inset-stacked-pad-top, 1.45rem) !important;
  padding-bottom: var(--landing-inset-stacked-pad-bottom, 0.92rem) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__intro-title {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 1.06rem !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  text-align: center !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-panel__intro-subtitle {
  margin: 4px 0 0 !important;
  color: #5f6f86 !important;
  font-size: 1.06rem !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  text-align: center !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-form #login-btn {
  min-height: 50px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(37, 99, 235, 0.76) !important;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.26) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-inset-field__shell {
  min-height: 50px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-inset-field:focus-within .landing-inset-field__shell {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-form #social-auth-actions .social-auth-btn {
  min-height: 50px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-footer {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  display: grid;
  gap: 8px;
  justify-items: center;
  width: max-content;
  text-align: center;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-footer__links {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #64748b;
  font-size: 0.86rem;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-footer__links a {
  color: inherit;
  text-decoration: none;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-footer__copyright {
  margin: 0;
  color: #64748b;
  font-size: 0.8rem;
}

body.is-uniandes-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-footer,
body.is-uniandes-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-footer__links,
body.is-uniandes-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-footer__copyright,
body.is-uniandes-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-footer__links
  a {
  color: #ffffff !important;
}

body.is-edukasindo-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-footer,
body.is-edukasindo-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-footer__links,
body.is-edukasindo-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-footer__copyright,
body.is-edukasindo-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .landing-auth-footer__links
  a {
  color: #ffffff !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .player-region {
  justify-content: flex-start !important;
  padding-top: max(24px, env(safe-area-inset-top, 0px)) !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] #landing-auth-panel.panel,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] #landing-auth-panel.landing-auth-panel--in-fallback {
  width: calc(100% - 32px) !important;
  max-width: 420px !important;
  padding: clamp(20px, 5.2vw, 24px) !important;
  min-width: 0 !important;
  border-radius: 20px !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .landing-auth-panel__header .dev-login-brand-localhost__label,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .landing-auth-panel__header .dev-login-brand-environment__label {
  font-size: clamp(1.25rem, 8.2vw, 2.35rem) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .landing-auth-footer {
  top: calc(100% + 18px);
}

/*
 * Mobile mode UX contract (pre-auth + post-auth):
 * keep a minimum usable layout width; if viewport is narrower, allow horizontal scroll
 * rather than collapsing UI below mobile readability.
 */
body[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] {
  overflow-x: auto !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-shell {
  min-width: 360px !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .player-region {
  min-width: 360px !important;
  overflow-x: auto !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] #player-container,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .landing-auth-slot {
  min-width: 360px !important;
  width: 360px !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] #landing-auth-panel.panel,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] #landing-auth-panel.landing-auth-panel--in-fallback {
  min-width: 360px !important;
  width: 360px !important;
}

body[data-theme="dev-view"] .account-legal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

body[data-theme="dev-view"] .account-legal-actions a.course-action {
  text-decoration: none;
}

/* Final precedence: fit-driven mode selector + full-viewport rectangular overlay. */
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-expanded"] .dev-shell {
  grid-template-columns: 240px minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) !important;
  grid-template-areas:
    "top top"
    "sidebar player" !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-shell {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) !important;
  grid-template-areas:
    "top top"
    "sidebar player" !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-nav-icon__label {
  display: none !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) !important;
  grid-template-areas:
    "top"
    "player" !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-sidebar {
  position: fixed !important;
  top: 56px !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 76px !important;
  min-width: 76px !important;
  transform: translateX(0) !important;
  z-index: 1401 !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-sidebar.collapsed {
  transform: translateX(-100%) !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .mobile-sidebar-backdrop:not([hidden]) {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(15, 23, 42, 0.08) !important;
  z-index: 1400 !important;
  cursor: pointer !important;
  appearance: none;
}

/* Final pre-auth guard: exactly one vertical scrollbar (the shell). */
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] {
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  position: relative;
  --nls-preauth-overlay: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22),
    rgba(239, 246, 255, 0.18)
  );
  --nls-preauth-image: url("/images/preauth/preauth-mountain-bg.png");
  --nls-preauth-size: cover, cover;
  --nls-preauth-position: center center, center center;
  --nls-preauth-repeat: no-repeat, no-repeat;
}

body.is-edukasindo-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"],
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]:has(.landing-auth-panel__header .dev-login-brand-environment__logo[src*="edukasindo"]) {
  --nls-preauth-overlay: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2),
    rgba(239, 246, 255, 0.16)
  );
  --nls-preauth-image: url("/images/preauth/preauth-edukasindo-rice-terrace-bg.png");
}

body.is-uniandes-branding-surface.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] {
  --uniandes-side-panel-width: max(calc(100dvh * 0.914286), calc(100vw * 0.411841));
  --uniandes-center-panel-width: max(calc(100dvh * 0.913333), calc(100vw * 0.176318));
  --uniandes-panel-overlap: 2px;
  --nls-preauth-overlay: linear-gradient(180deg, rgba(7, 20, 74, 0.32), rgba(7, 20, 74, 0.24));
  --nls-preauth-image:
    url("/images/preauth/preauth-uniandes-eagle-bg.webp"),
    url("/images/preauth/preauth-uniandes-center.png"),
    url("/images/preauth/preauth-uniandes-left.webp");
  --nls-preauth-size:
    cover,
    var(--uniandes-side-panel-width) 100%,
    var(--uniandes-center-panel-width) 100%,
    var(--uniandes-side-panel-width) 100%;
  --nls-preauth-position:
    center center,
    calc(50% - (var(--uniandes-center-panel-width) / 2) - (var(--uniandes-side-panel-width) / 2) + var(--uniandes-panel-overlap))
      center,
    center center,
    calc(50% + (var(--uniandes-center-panel-width) / 2) + (var(--uniandes-side-panel-width) / 2) - var(--uniandes-panel-overlap))
      center;
  --nls-preauth-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--nls-preauth-overlay), var(--nls-preauth-image);
  background-size: var(--nls-preauth-size);
  background-position: var(--nls-preauth-position);
  background-repeat: var(--nls-preauth-repeat);
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .dev-shell {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  position: relative;
  z-index: 1;
  background: transparent !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .player-region {
  min-height: 100dvh !important;
  max-height: none !important;
  overflow: visible !important;
  background: none !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #player-panel,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #player-container,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .landing-auth-slot {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #player-panel {
  background: transparent !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #player-panel.panel,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #player-layout,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] #player-main,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .legacy-player,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .legacy-player__workspace,
body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"] .legacy-player__layout {
  background: transparent !important;
}

/* Final override: collapsed/mobile sidebar selected-item label behavior. */
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-nav-icon.active:not([data-panel="access"]),
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-nav-icon.active:not([data-panel="access"]) {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 6px 4px !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-nav-icon.active:not([data-panel="access"]) .dev-nav-icon__label,
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-nav-icon.active:not([data-panel="access"]) .dev-nav-icon__label {
  display: block !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-nav-icon:not(.active) .dev-nav-icon__label,
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-nav-icon:not(.active) .dev-nav-icon__label,
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-nav-icon[data-panel="access"] .dev-nav-icon__label,
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-nav-icon[data-panel="access"] .dev-nav-icon__label {
  display: none !important;
}

/* Final override: slightly wider collapsed/mobile rail + matching button sizing. */
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-shell {
  grid-template-columns: 82px minmax(0, 1fr) !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-sidebar,
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-sidebar {
  width: 82px !important;
  min-width: 82px !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-sidebar__rail,
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-sidebar__rail {
  width: 82px !important;
  padding: 10px 9px 10px !important;
  gap: 9px !important;
}

body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-nav-icon,
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-nav-icon {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  min-height: 50px !important;
}

/* Prevent legacy Scores/Progress rail icon flash during mobile/collapsed transitions. */
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="desktop-collapsed"] .dev-nav-icon[data-panel="progress"],
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-layout-mode="mobile"] .dev-nav-icon[data-panel="progress"] {
  display: none !important;
}

/* Do not expose deprecated Courses hub while the learner is inside a course. */
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-detail-view="course-player"][data-sidebar-layout-mode="desktop-collapsed"]
  .dev-nav-icon[data-panel="launchpad"],
body:not(.is-logged-out)[data-theme="dev-view"][data-layout="standard-lms"][data-sidebar-detail-view="course-player"][data-sidebar-layout-mode="mobile"]
  .dev-nav-icon[data-panel="launchpad"] {
  display: none !important;
}