/* Consolidated from mobile-runtime-guard.css during frontend cleanup 2026-07-08. */
/* Mobile runtime guard: keep hidden desktop/sidebar UI from deforming mobile shells. */
@media (max-width: 1180px) {
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar #sidebarUserButton {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard.home-v2 .home-figma-mobile {
    display: block !important;
    width: 390px !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard.home-v2 .home-figma-goal-rail {
    left: 16px !important;
    top: 16px !important;
    width: 322px !important;
    height: 66px !important;
    min-width: 322px !important;
    max-width: 322px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    transform: none !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard.home-v2 .home-figma-avatar-tile {
    left: 10px !important;
    top: 8px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    transform: none !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard.home-v2 .home-figma-avatar-tile img,
  html body.view-dashboard #dashboard.active-view #homeDashboard.home-v2 .home-figma-avatar-tile .home-figma-logo-img {
    display: block !important;
    position: absolute !important;
    left: -4px !important;
    top: -5px !important;
    width: 54px !important;
    height: 54px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    transform: none !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard.home-v2 .home-figma-goal-copy {
    left: 70px !important;
    right: 18px !important;
    top: 20px !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 13px !important;
    width: auto !important;
    max-width: 218px !important;
    height: 26px !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard.home-v2 .home-figma-goal-copy > span {
    display: inline-flex !important;
    align-items: baseline !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 116px !important;
    gap: 3px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard.home-v2 .home-figma-goal-copy > span:nth-child(2) {
    max-width: 132px !important;
  }

  html body.view-dashboard #dashboard.active-view #homeDashboard.home-v2 .home-figma-goal-copy em {
    display: inline-block !important;
    min-width: 13px !important;
    font-size: 20px !important;
    font-weight: 720 !important;
    line-height: 20px !important;
    text-align: center !important;
    transform: translateY(1px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar {
    --desktop-nav-motion-lift: 0px;
    --desktop-nav-motion-scale: 1;
    --desktop-nav-motion-duration: 0ms;
  }
}

/* Final desktop-only navigation lock. Loaded last to keep every section aligned. */
@media (min-width: 1181px) {
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-community, .view-seat-finder) .app-shell > .sidebar,
  html body .app-shell > .sidebar {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list,
  html body .app-shell > .sidebar > .nav-list {
    box-sizing: border-box !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link:hover,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link:active,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link:focus-visible,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link.active,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link.active:hover,
  html body .app-shell > .sidebar > .nav-list > .nav-link,
  html body .app-shell > .sidebar > .nav-list > .nav-link:hover,
  html body .app-shell > .sidebar > .nav-list > .nav-link:active,
  html body .app-shell > .sidebar > .nav-list > .nav-link:focus-visible,
  html body .app-shell > .sidebar > .nav-list > .nav-link.active,
  html body .app-shell > .sidebar > .nav-list > .nav-link.active:hover {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--desktop-nav-item-gap, 7px) !important;
    box-sizing: border-box !important;
    flex: 0 1 var(--desktop-nav-item-width, 78px) !important;
    width: var(--desktop-nav-item-width, 78px) !important;
    min-width: var(--desktop-nav-item-min-width, 78px) !important;
    max-width: var(--desktop-nav-item-max-width, 78px) !important;
    height: var(--desktop-nav-item-height, 40px) !important;
    min-height: var(--desktop-nav-item-height, 40px) !important;
    max-height: var(--desktop-nav-item-height, 40px) !important;
    padding: var(--desktop-nav-item-padding, 0 12px) !important;
    overflow: var(--desktop-nav-item-overflow, hidden) !important;
    border: var(--desktop-nav-item-border, 0) !important;
    border-radius: var(--desktop-nav-item-radius, 25px) !important;
    color: rgba(29, 42, 53, 0.84) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    background: var(
      --desktop-nav-item-background,
      linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04)), rgba(255, 255, 255, 0.06)
    ) !important;
    box-shadow: var(
      --desktop-nav-item-shadow,
      0 12px 24px -24px rgba(45, 66, 82, 0.24)
    ) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
    transform: translateY(var(--desktop-nav-hover-lift, 0px)) scale(var(--desktop-nav-hover-scale, 1)) !important;
    will-change: auto !important;
    transition:
      transform var(--desktop-nav-motion-duration, 180ms) cubic-bezier(0.2, 0.8, 0.2, 1),
      background 120ms ease,
      border-color 120ms ease,
      box-shadow 120ms ease,
      color 120ms ease !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link:hover,
  html body .app-shell > .sidebar > .nav-list > .nav-link:hover {
    --desktop-nav-hover-lift: var(--desktop-nav-motion-lift, -2px);
    --desktop-nav-hover-scale: var(--desktop-nav-motion-scale, 1.04);
    background: var(
      --desktop-nav-item-hover-background,
      linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.18)), rgba(255, 255, 255, 0.12)
    ) !important;
    border-color: var(--desktop-nav-item-hover-border, rgba(255, 255, 255, 0.7)) !important;
    box-shadow: var(
      --desktop-nav-item-hover-shadow,
      0 8px 18px -9px rgba(115, 86, 18, 0.32)
    ) !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link.active,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link.active:hover,
  html body .app-shell > .sidebar > .nav-list > .nav-link.active,
  html body .app-shell > .sidebar > .nav-list > .nav-link.active:hover {
    border-color: var(--desktop-nav-item-active-border, rgba(255, 255, 255, 0.58)) !important;
    background: var(
      --desktop-nav-item-active-background,
      radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.3) 58%, rgba(255, 255, 255, 0.1)), rgba(255, 255, 255, 0.08)
    ) !important;
    box-shadow: var(
      --desktop-nav-item-active-shadow,
      inset 0 -10px 18px rgba(0, 168, 120, 0.035), 0 14px 26px -23px rgba(0, 168, 120, 0.2)
    ) !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link.active > .icon,
  html body .app-shell > .sidebar > .nav-list > .nav-link.active > .icon {
    color: var(--dashboard-nav-active-color, #2fb996) !important;
  }

  html body .app-shell > .sidebar > .nav-list > .nav-link:not(.nav-ai-link) {
    --desktop-nav-icon-size: 0px;
    --desktop-nav-item-gap: 0px;
    --dashboard-nav-icon-bg: transparent;
    --dashboard-nav-icon-border: 0;
    --dashboard-nav-icon-shadow: none;
  }

  html body .app-shell > .sidebar > .nav-list > .nav-link:not(.nav-ai-link).active {
    --desktop-nav-icon-size: 20px;
    --desktop-nav-item-gap: 7px;
  }

  html body .app-shell > .sidebar > .nav-list > .nav-link:not(.nav-ai-link) > .icon > :is(img, svg) {
    opacity: 0;
    transform: scale(0.62);
    transition: opacity 120ms ease, transform 160ms cubic-bezier(0.2, 0.9, 0.25, 1.18);
  }

  html body .app-shell > .sidebar > .nav-list > .nav-link:not(.nav-ai-link).active > .icon > :is(img, svg) {
    opacity: 1;
    transform: scale(1);
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link.admin-access-only.is-hidden,
  html body .app-shell > .sidebar > .nav-list > .nav-link.admin-access-only.is-hidden {
    display: none !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link > .icon,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link:hover > .icon,
  html body .app-shell > .sidebar > .nav-list > .nav-link > .icon,
  html body .app-shell > .sidebar > .nav-list > .nav-link:hover > .icon {
    position: static !important;
    display: grid !important;
    width: var(--desktop-nav-icon-size, 20px) !important;
    min-width: var(--desktop-nav-icon-size, 20px) !important;
    max-width: var(--desktop-nav-icon-size, 20px) !important;
    height: var(--desktop-nav-icon-size, 20px) !important;
    min-height: var(--desktop-nav-icon-size, 20px) !important;
    max-height: var(--desktop-nav-icon-size, 20px) !important;
    margin: 0 !important;
    place-items: center !important;
    color: var(--dashboard-nav-icon-color, rgba(55, 68, 83, 0.76)) !important;
    background: var(--dashboard-nav-icon-bg, transparent) !important;
    border: var(--dashboard-nav-icon-border, 0) !important;
    border-radius: var(--desktop-nav-icon-radius, 8px) !important;
    box-shadow: var(--dashboard-nav-icon-shadow, none) !important;
    transform: none !important;
    transition: color 120ms ease !important;
    will-change: auto !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link > span:not(.icon),
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > .nav-list > .nav-link:hover > span:not(.icon),
  html body .app-shell > .sidebar > .nav-list > .nav-link > span:not(.icon),
  html body .app-shell > .sidebar > .nav-list > .nav-link:hover > span:not(.icon) {
    position: static !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    overflow: visible !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    transform: none !important;
    transition: color 120ms ease !important;
    will-change: auto !important;
  }

  .nav-ai-link {
    --desktop-nav-item-gap: 0;
    --desktop-nav-item-width: 50px;
    --desktop-nav-item-min-width: 50px;
    --desktop-nav-item-max-width: 50px;
    --desktop-nav-item-height: 50px;
    --desktop-nav-item-padding: 0;
    --desktop-nav-item-overflow: visible;
    --desktop-nav-item-radius: 50%;
    --desktop-nav-item-border: 0;
    --desktop-nav-item-background: transparent;
    --desktop-nav-item-shadow: 0 5px 12px -5px rgba(86, 62, 5, 0.24);
    --desktop-nav-item-hover-background: rgba(255, 211, 78, 0.22);
    --desktop-nav-item-hover-border: transparent;
    --desktop-nav-item-hover-shadow: 0 7px 16px -5px rgba(86, 62, 5, 0.28);
    --desktop-nav-item-active-background: rgba(255, 211, 78, 0.32);
    --desktop-nav-item-active-border: transparent;
    --desktop-nav-item-active-shadow: 0 3px 8px -4px rgba(86, 62, 5, 0.24);
    --desktop-nav-icon-size: 40px;
    --desktop-nav-icon-radius: 50%;
    --dashboard-nav-icon-bg: #ffd34e;
    --dashboard-nav-icon-border: 0;
    --dashboard-nav-icon-shadow: none;
  }

  .nav-ai-link .nav-ai-icon :is(img, video) {
    display: block;
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    max-width: none;
    overflow: hidden;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 42%;
  }

  .nav-ai-link .nav-ai-icon video {
    z-index: 1;
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .nav-ai-link .nav-ai-status {
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: 3;
    display: block;
    width: 10px;
    height: 10px;
    max-width: none;
    filter: drop-shadow(0 3px 5px rgba(21, 153, 103, 0.3));
    pointer-events: none;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card:hover,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card:active,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card:focus-visible,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card:hover,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card:active,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card:focus-visible {
    position: absolute !important;
    inset: 9px 18px auto auto !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, max-content) !important;
    justify-content: end !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: 216px !important;
    min-width: 216px !important;
    max-width: 216px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 6px 10px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 28px !important;
    color: rgba(29, 42, 53, 0.86) !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    will-change: auto !important;
    transition:
      background 120ms ease,
      border-color 120ms ease,
      box-shadow 120ms ease,
      color 120ms ease !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card > img,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card.is-logged-in > img,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card > img,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in > img {
    grid-column: 1 !important;
    grid-row: 1;
    position: static !important;
    display: block !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card > span,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card.is-logged-in > span,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card > span,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in > span {
    grid-column: 2 !important;
    grid-row: 1;
    position: static !important;
    display: grid !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 1px !important;
    overflow: hidden !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card > span > strong,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card.is-logged-in > span > strong,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card > span > small,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card.is-logged-in > span > small,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card > span > strong,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in > span > strong,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card > span > small,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in > span > small {
    display: block !important;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card > span > strong,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card.is-logged-in > span > strong,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card > span > strong,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in > span > strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 17px !important;
    color: #59616b !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card > span > small,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card.is-logged-in > span > small,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card > span > small,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in > span > small {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 14px !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card > b,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card.is-logged-in > b,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card > b,
  html body .app-shell > .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in > b {
    display: none !important;
  }

  html body.view-dashboard .sidebar-user-card::before {
    content: none !important;
  }
}

/* Center the whole navigation group between the visible logo and account control. */
/* Desktop navbar: all widths above the mobile cutoff share one shell. */
@media (min-width: 1181px) {
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar {
    --dashboard-nav-icon-color: rgba(55, 68, 83, 0.76);
    --dashboard-nav-icon-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(232, 246, 243, 0.4));
    --dashboard-nav-icon-border: 1px solid rgba(255, 255, 255, 0.68);
    --dashboard-nav-icon-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 14px -12px rgba(42, 67, 72, 0.36);
    --dashboard-nav-active-color: #2fb996;
    --desktop-nav-gap: 18px;
    position: fixed !important;
    top: 0 !important;
    left: max(32px, calc((100vw - 1376px) / 2)) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 150 !important;
    display: grid !important;
    align-items: center !important;
    column-gap: 18px !important;
    width: min(1376px, calc(100vw - 64px)) !important;
    min-width: min(1376px, calc(100vw - 64px)) !important;
    max-width: min(1376px, calc(100vw - 64px)) !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 24px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.22)),
      rgba(255, 255, 255, 0.26) !important;
    box-shadow:
      0 18px 42px -36px rgba(15, 23, 42, 0.44) !important;
    backface-visibility: hidden !important;
    transform: perspective(var(--home-glass-perspective, 1200px)) translate3d(0, 0, 0) rotateX(var(--glass-rx, 0deg)) rotateY(var(--glass-ry, 0deg)) !important;
    transform-style: preserve-3d !important;
    transition:
      transform var(--home-glass-motion-duration, 160ms) var(--home-glass-motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
      box-shadow 160ms ease,
      border-color 100ms ease !important;
    will-change: transform !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
    backdrop-filter: blur(30px) saturate(1.18) !important;
  }

  html body.view-dashboard:not(.figma-answer-265-active) .app-shell > .sidebar.is-glass-hover {
    transform: perspective(var(--home-glass-perspective, 1200px)) translate3d(0, var(--home-glass-hover-lift, -2px), 0) rotateX(var(--glass-rx, 0deg)) rotateY(var(--glass-ry, 0deg)) scale(var(--home-glass-hover-scale, 1.003)) !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar:has(.community-nav-link) {
    --desktop-nav-gap: 10px;
    --desktop-nav-item-width: 78px;
    --desktop-nav-item-min-width: 72px;
    --desktop-nav-item-max-width: 78px;
    --desktop-nav-item-padding: 0 9px;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar:has(.admin-access-only:not(.is-hidden)) {
    --desktop-nav-gap: 12px;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar:has(.community-nav-link):has(.admin-access-only:not(.is-hidden)) {
    --desktop-nav-gap: 8px;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > a.brand,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > a.brand.active,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > .brand.brand {
    position: absolute !important;
    left: 18px !important;
    top: 10px !important;
    display: grid !important;
    grid-template-columns: 146px minmax(0, 194px) !important;
    grid-template-rows: 50px !important;
    align-items: center !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    color: rgba(17, 19, 24, 0.94) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar .brand-icon {
    position: static !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 146px !important;
    min-width: 146px !important;
    max-width: 146px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    content: url("./assets/xingxing-pte-wordmark-v1.png") !important;
    object-fit: contain !important;
    align-self: center !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar .brand-copy {
    position: static !important;
    display: grid !important;
    grid-template-columns: 0 176px !important;
    align-items: center !important;
    gap: 18px !important;
    width: 194px !important;
    min-width: 0 !important;
    max-width: 194px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    background: transparent !important;
    align-self: center !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar .brand-copy strong {
    position: static !important;
    display: none !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    color: rgba(17, 19, 24, 0.94) !important;
    font-size: 22px !important;
    font-weight: 850 !important;
    line-height: 22px !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar .brand .brand-copy .exam-type-picker,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar .brand .exam-type-picker,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar .exam-type-picker {
    position: absolute !important;
    display: block !important;
    flex: none !important;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    left: 164px !important;
    top: 9px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    border-radius: 16px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar .brand .brand-copy .exam-type-picker select,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar .brand .exam-type-picker select,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar .exam-type-picker select {
    position: static !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 176px !important;
    min-width: 0 !important;
    max-width: 176px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 30px 0 16px !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: rgba(38, 48, 64, 0.78) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 720 !important;
    line-height: 32px !important;
    text-align: center !important;
    text-align-last: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transform: none !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar .brand .brand-copy .exam-type-picker::after,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar .brand .exam-type-picker::after,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar .exam-type-picker::after {
    content: "" !important;
    position: absolute !important;
    right: 15px !important;
    left: auto !important;
    top: 50% !important;
    display: block !important;
    width: 12px !important;
    height: 8px !important;
    border: 0 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M2 2L6 6L10 2' fill='none' stroke='%23516f6f' stroke-opacity='.8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > .nav-list {
    position: absolute !important;
    /* Brand: 18 + 340; account: 18 + 216; equal 16px safety gaps. */
    left: 374px !important;
    right: 250px !important;
    top: 8.85px !important;
    bottom: auto !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: stretch !important;
    gap: var(--desktop-nav-gap) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > .nav-list > .nav-link > .icon,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > .nav-list > .nav-link:hover > .icon,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > .nav-list > .nav-link.active > .icon {
    position: static !important;
    display: grid !important;
    width: var(--desktop-nav-icon-size, 20px) !important;
    min-width: var(--desktop-nav-icon-size, 20px) !important;
    max-width: var(--desktop-nav-icon-size, 20px) !important;
    height: var(--desktop-nav-icon-size, 20px) !important;
    min-height: var(--desktop-nav-icon-size, 20px) !important;
    max-height: var(--desktop-nav-icon-size, 20px) !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    color: var(--dashboard-nav-icon-color, rgba(55, 68, 83, 0.76)) !important;
    background: var(--dashboard-nav-icon-bg, transparent) !important;
    border: var(--dashboard-nav-icon-border, 0) !important;
    border-radius: var(--desktop-nav-icon-radius, 8px) !important;
    box-shadow: var(--dashboard-nav-icon-shadow, none) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), color 120ms ease !important;
    will-change: transform !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > .nav-list > .nav-link:hover > .icon {
    transform: translateY(-2px) scale(1.1) !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > .nav-list > .nav-link > .icon svg,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > .nav-list > .nav-link:hover > .icon svg,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > .nav-list > .nav-link.active > .icon svg {
    display: block !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    overflow: visible !important;
    color: currentColor !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.85 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > .nav-list > .nav-link > .icon svg :is(path, circle, rect, line, polyline, polygon),
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > .nav-list > .nav-link:hover > .icon svg :is(path, circle, rect, line, polyline, polygon),
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > .nav-list > .nav-link.active > .icon svg :is(path, circle, rect, line, polyline, polygon) {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.85 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar > .nav-list > .nav-link.active > .icon {
    color: var(--dashboard-nav-active-color, #2fb996) !important;
  }
}

/* Separate avatar editing from the profile link, sharing the existing account grid. */
.header-avatar-entry,
.header-profile-entry {
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.header-avatar-entry { grid-column: 1; color: transparent; }
.header-avatar-entry svg { display: block; width: 20px; height: 20px; margin: auto; }
.header-avatar-entry:hover,
.header-avatar-entry:focus-visible { background: rgba(32, 50, 57, .58); color: #fff; }
.header-profile-entry { display: grid; place-items: center; grid-column: 2; border-radius: 10px; color: #008d79; }
.header-profile-cue { font-style: normal; width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 14px; opacity: 0; font-size: 12px; font-weight: 500; transition: opacity 160ms ease; }
.sidebar-user-card:has(.header-profile-entry:hover, .header-profile-entry:focus-visible) > span { opacity: 0; }
.header-profile-cue svg { width: 18px; height: 18px; flex: 0 0 auto; }
.header-profile-entry:hover .header-profile-cue,
.header-profile-entry:focus-visible .header-profile-cue { opacity: 1; }
.header-profile-entry:hover,
.header-profile-entry:focus-visible { background: rgba(255, 229, 112, .76); box-shadow: none; }
.header-avatar-entry:focus-visible,
.header-profile-entry:focus-visible { outline: 2px solid #00ad92; outline-offset: 2px; }

/* Preserve membership information until the profile control is hovered. */
@media (min-width: 1181px) {
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar #sidebarUserButton.sidebar-user-card > span > small,
  html body:is(.view-dashboard, .view-practice, .view-mock, .view-profile, .view-mp3, .view-mistakes, .view-admin, .view-agent, .view-community, .view-seat-finder):not(.figma-answer-265-active) .app-shell > .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in > span > small {
    display: block !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 16px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: rgba(232, 182, 37, 0.12) !important;
    color: #86641f !important;
    line-height: 16px !important;
  }
}