.topbar-actions {
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        margin-left: auto;
      }

      .site-auth {
        position: relative;
        min-width: 0;
        max-width: 100%;
        z-index: 50;
        color: #eeeeec;
        font: 14px/1.45 "Inter", system-ui, sans-serif;
        --auth-surface: #181818;
        --auth-field: #111111;
        --auth-border: #3b3b39;
        --auth-text: #eeeeec;
        --auth-muted: #aaa9a4;
        --auth-focus: #e1d9bc;
      }

      .site-auth.is-floating {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 1200;
      }

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

      .site-auth-trigger {
        display: inline-flex;
        max-width: 100%;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid var(--auth-border);
        border-radius: 12px;
        color: var(--auth-text);
        background: transparent;
        box-shadow: none;
        cursor: pointer;
        user-select: none;
        list-style: none;
      }

      .site-auth-trigger::-webkit-details-marker {
        display: none;
      }

      .site-auth-trigger::after {
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        content: "";
        transform: translateY(-2px) rotate(45deg);
      }

      .site-auth-trigger:hover,
      .site-auth[open] > .site-auth-trigger {
        border-color: #eeeeec;
        background: #242424;
      }

      .site-auth-trigger:focus-visible {
        outline: 2px solid var(--auth-focus);
        outline-offset: 3px;
      }

      .site-auth[open] > .site-auth-trigger::after {
        transform: translateY(2px) rotate(225deg);
      }

      [data-site-auth-label] {
        min-width: 0;
        max-width: 14ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .site-auth-avatar {
        display: none;
      }

      .site-auth-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        display: grid;
        gap: 12px;
        box-sizing: border-box;
        width: min(320px, calc(100vw - 28px));
        max-height: min(760px, calc(100vh - 96px));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 22px;
        border: 1px solid var(--auth-border);
        border-radius: 8px;
        color: var(--auth-text);
        background: var(--auth-surface);
        box-shadow: 0 8px 24px #0004;
      }

      .site-auth-session-actions > .site-auth-account-link {
        grid-column: 1 / -1;
      }

      .site-auth-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 0 18px;
        margin: 4px 0 0;
        padding-top: 8px;
        border-top: 1px solid var(--auth-border);
      }

      .site-auth-footer a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: var(--auth-muted);
        font-size: 12px;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .site-auth-form input { box-sizing: border-box; }

      .site-auth:not([open]) .site-auth-panel {
        display: none;
      }

      .site-auth-panel :focus-visible {
        outline: 2px solid var(--auth-focus);
        outline-offset: 3px;
      }

      [data-site-auth-status]:empty {
        display: none;
      }

      .site-auth-copy,
      .site-auth-user,
      .site-auth-account-link {
        color: var(--auth-muted);
        font-size: 0.88rem;
        line-height: 1.45;
      }

      .site-auth-user {
        color: var(--auth-text);
        font-weight: 500;
        overflow-wrap: anywhere;
      }

      .site-auth-account-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: var(--auth-text);
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .site-auth-copy.error {
        color: #ffaaaa;
      }

      .site-auth-copy.success {
        color: #8ce0aa;
      }

      .site-auth-form {
        display: grid;
        gap: 10px;
        min-inline-size: 0;
        margin: 0;
        padding: 0;
        border: 0;
      }

      .site-auth-form[hidden],
      .site-auth-form [hidden],
      .site-auth-session-actions[hidden] {
        display: none !important;
      }

      .site-auth-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
      }

      .site-auth-tabs button {
        min-height: 44px;
        padding: 8px 4px;
        border: 0;
        border-bottom: 2px solid transparent;
        color: var(--auth-muted);
        background: transparent;
        font: inherit;
        cursor: pointer;
      }

      .site-auth-tabs button[aria-selected="true"] {
        color: var(--auth-text);
        border-bottom-color: var(--auth-focus);
      }

      .site-auth-fields { display: grid; gap: 10px; }

      .site-auth-form label {
        display: grid;
        gap: 5px;
        color: var(--auth-muted);
        font-size: 0.86rem;
        font-weight: 500;
      }

      .site-auth-form input {
        min-height: 44px;
        width: 100%;
        border: 1px solid var(--auth-border);
        border-radius: 6px;
        padding: 8px 11px;
        color: var(--auth-text);
        background: var(--auth-field);
        font: inherit;
        font-weight: 500;
      }

      .site-auth-form input::placeholder {
        color: #96958f;
      }

      .site-auth-form input:is(:autofill, :-webkit-autofill) {
        box-shadow: 0 0 0 1000px var(--auth-field) inset;
        -webkit-text-fill-color: var(--auth-text);
        caret-color: var(--auth-text);
      }

      .site-auth-form input:focus {
        border-color: var(--auth-focus);
        outline: 2px solid var(--auth-focus);
        outline-offset: 1px;
      }

      .site-auth-actions,
      .site-auth-session-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .site-auth-actions { grid-template-columns: 1fr; }

      .site-auth-actions button,
      .site-auth-session-actions button {
        min-height: 44px;
        border: 1px solid var(--auth-border);
        border-radius: 8px;
        padding: 8px 10px;
        color: var(--auth-text);
        background: transparent;
        font: inherit;
        font-weight: 500;
        cursor: pointer;
      }

      .site-auth-actions button {
        border-color: #eeeeec;
        color: #0a0a10;
        background: #eeeeec;
      }

      .site-auth-actions button:hover,
      .site-auth-session-actions button:hover {
        border-color: #eeeeec;
        background: #292929;
      }

      .site-auth-actions button:hover {
        background: #ffffff;
      }

      .site-auth-actions button:disabled,
      .site-auth-session-actions button:disabled {
        cursor: wait;
        opacity: 0.66;
      }

      @media (max-width: 760px) {
        .topbar-actions {
          width: 100%;
          justify-content: space-between;
        }

        .site-auth {
          margin-left: auto;
        }

        .site-auth.is-floating {
          top: 10px;
          right: 10px;
        }

        body.stem-trainer-public .site-auth.is-floating {
          top: 112px;
          right: 12px;
        }
      }