@layer base, layout, components;
@layer components {
  .sidebar-account { margin-top: auto; padding-top: 1.5rem; }
  .account-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #ffffff26;
    border-radius: 50%;
    background: #ffffff08;
    color: #edf5f8;
    text-align: left;
    font-size: .85rem;
  }
  .account-trigger:hover, .account-trigger[aria-expanded=true] { background: #ffffff16; border-color: #ffffff50; }
  .account-avatar { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; background: #c4e9f021; color: #c4e9f0; font-size: .82rem; font-weight: 650; }
  .tippy-box[data-theme=account] { width: 260px; max-width: calc(100vw - 32px); border: 1px solid #cad9df; border-radius: 9px; background: #fff; color: #173441; line-height: 1.5; box-shadow: 0 12px 36px #00182230, 0 2px 6px #00182218; }
  .tippy-box[data-theme=account] > .tippy-content { padding: 0; }
  .tippy-box[data-theme=account] > .tippy-arrow { color: #fff; }
  .account-popover { padding: .4rem; }
  .account-popover-heading { padding: .8rem .65rem 1rem; margin-bottom: .35rem; border-bottom: 1px solid #dde5e8; display: grid; gap: .3rem; overflow-wrap: anywhere; font-size: .85rem; }
  .account-popover-heading span { color: #657983; font-size: .78rem; }
  .account-menu-item, .account-sign-out { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 44px; padding: .65rem; border: 0; border-radius: 5px; background: transparent; color: #173441; text-align: left; font-size: .87rem; }
  .account-menu-item:hover { background: #eef3f5; text-decoration: none; }
  .account-menu-item:focus-visible, .account-sign-out:focus-visible { outline-offset: -3px; }
  .workspace[data-theme=dark] .tippy-box[data-theme=account] { background: #173442; border-color: #45616f; color: #e6eff4; box-shadow: 0 12px 36px #00000045; }
  .workspace[data-theme=dark] .tippy-box[data-theme=account] > .tippy-arrow { color: #173442; }
  .workspace[data-theme=dark] .account-popover-heading { border-color: #304854; }
  .workspace[data-theme=dark] .account-popover-heading span { color: #a5bac5; }
  .workspace[data-theme=dark] .account-menu-item, .workspace[data-theme=dark] .account-sign-out { color: #e6eff4; }
  .workspace[data-theme=dark] .account-menu-item:hover { background: #244c5e; }
  .account-sign-out:is(:hover, :focus-visible),
  .workspace[data-theme=dark] .account-sign-out:is(:hover, :focus-visible) { background: #c43d32; color: #fff; }
  @media (max-width: 760px) {
    .sidebar-account { padding-top: 1rem; }
    .account-trigger { max-width: 320px; }
  }
}

@layer components {
  .account-menu-item > svg { flex-shrink: 0; }
  .account-theme-switch { margin-left: auto; width: 28px; height: 16px; padding: 2px; border-radius: 20px; background: #768b96; }
  .account-theme-switch::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
  .account-theme[aria-checked=true] .account-theme-switch { background: #348593; }
  .account-theme[aria-checked=true] .account-theme-switch::before { transform: translateX(12px); }
  .password-change-form { max-width: 560px; }
  .password-change-form .field { margin-bottom: 1.3rem; }
}