/* Generated by tools/sync-account-menu.mjs; edit shared/account-menu.css. */
.am-slot { position: relative; display: inline-block; flex: 0 1 auto; width: 180px; min-width: 44px; max-width: 100%; height: 44px; }
.am-slot:has(.am-trigger[hidden]) { display: none; }
.am-trigger { position: absolute; right: 0; top: 0; display: inline-block; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 22px; background: transparent; color: #f1f3f3; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: visible; cursor: pointer; }
html body .am-slot :is(#accountButton, #accountName).am-trigger { max-width: none; min-width: 44px; }
.am-capsule { position: absolute; inset: 0; box-sizing: border-box; display: block; overflow: hidden; border: 1px solid #495258; border-radius: 22px; background: #191d20; }
.am-trigger:hover .am-capsule, .am-trigger[aria-expanded="true"] .am-capsule { background: #22282c; border-color: #89939a; }
.am-trigger:focus-visible { outline: none; }
.am-trigger:focus-visible .am-capsule { background: #29343a; box-shadow: inset 0 0 0 2px #d2e0e5; }
.am-avatar { position: absolute; z-index: 1; left: 3px; top: 3px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: #303a40; }
.am-avatar-fallback { display: grid; place-items: center; color: #d2e0e5; }
.am-avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none !important; }
.am-avatar-image[hidden] { display: none; }
.am-label { position: absolute; right: 14px; top: 0; display: block; width: calc(var(--am-width, 180px) - 62px); height: 42px; line-height: 42px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-letter { opacity: 0; }
.am-trigger[hidden] { display: none !important; }
.am-popover { position: fixed; inset: auto; box-sizing: border-box; width: min(296px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; margin: 0; padding: 16px; border: 1px solid #495258; border-radius: 8px; background: #191d20; color: #f1f3f3; font-family: 'Google Sans Flex', 'Noto Sans TC', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: 0; box-shadow: 0 12px 36px rgb(0 0 0 / 28%); }
.am-popover:popover-open { animation: am-arrive 180ms ease-out; }
.am-heading { display: flex; align-items: center; gap: 8px; }
.am-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 650; overflow-wrap: anywhere; }
.am-popover .am-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 4px; color: #acb5ba; background: transparent; cursor: pointer; }
.am-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.am-role { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 8px; border-radius: 6px; border: 1px solid; font-size: 12px; font-weight: 600; }
.am-role svg { width: 14px; height: 14px; }
.am-admin { color: #ff9bab; border-color: rgb(255 113 135 / 48%); background: rgb(146 33 52 / 22%); box-shadow: 0 0 18px rgb(255 72 103 / 15%); }
.am-creator { color: #a9d9ff; border-color: rgb(96 179 238 / 40%); background: rgb(96 179 238 / 8%); box-shadow: 0 0 18px rgb(96 179 238 / 12%); }
.am-state { margin: 8px 0 16px; color: #acb5ba; font-size: 12px; }
.am-popover .am-command { display: flex; align-items: center; justify-content: flex-start; gap: 12px; box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 8px; border: 0; border-top: 1px solid #303639; border-radius: 0; color: #f1f3f3; background: transparent; font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.am-popover .am-command svg { flex: none; }
.am-popover .am-signout { color: #ffabb3; }
.am-popover .am-command:hover, .am-popover .am-close:hover { background: rgb(255 255 255 / 5%); }
.am-popover :is(button,a):focus-visible { outline: 2px solid #d2e0e5; outline-offset: 2px; }
.am-popover button:disabled { opacity: .5; cursor: wait; }
.am-status { margin: 8px 0 0; color: #ffabb3; font-size: 12px; overflow-wrap: anywhere; }
.am-status:empty { display: none; }
@keyframes am-arrive { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .am-slot { width: 140px; } }
@media (max-width: 380px) { .am-slot { width: 126px; } }
@media (forced-colors: active) { .am-trigger:focus-visible .am-capsule { border: 2px solid Highlight; } }