.account-controls { position: relative; margin-left: auto; font: inherit; }
.account-controls[hidden], .account-controls [hidden] { display: none !important; }
.account-login, .account-menu > summary { padding: 0; text-decoration: none; list-style: none; flex-shrink: 0; }
.account-menu > summary.icon-btn { color: #00d2ff; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.account-panel {
    position: absolute; z-index: 100; top: calc(100% + 10px); right: 0;
    width: min(330px, calc(100vw - 24px)); overflow: hidden; border-radius: 16px;
    background: var(--surface-bg); border: 1px solid var(--surface-border);
    box-shadow: 0 14px 36px var(--shadow-color); backdrop-filter: blur(28px);
}
.account-profile { display: flex; flex-direction: column; gap: 5px; padding: 19px 20px 16px; border-bottom: 1px solid var(--surface-border); }
.account-profile > span { color: #61e3ff; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.account-profile strong { font-size: 21px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.account-profile small { color: var(--muted-fg, #9da9b8); font-size: 12px; overflow-wrap: anywhere; }
.account-actions { padding: 7px; }
.account-actions form { margin: 0; }
.account-action { width: 100%; min-height: 66px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.account-action:hover, .account-action:focus-visible { background: color-mix(in srgb, #61e3ff 10%, transparent); }
.account-action-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--surface-border); border-radius: 9px; color: #61e3ff; font-size: 18px; }
.account-action > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.account-action strong { font-size: 14px; line-height: 1.25; }
.account-action small { color: var(--muted-fg, #9da9b8); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.account-action i { color: #61e3ff; font-style: normal; }
.account-restore { display: block; width: calc(100% - 20px); margin: 0 10px 6px 54px; max-width: calc(100% - 64px); padding: 4px 0; border: 0; background: none; color: #61e3ff; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.account-controls :focus-visible { outline: 2px solid #00d2ff; outline-offset: 3px; }
@media (max-width: 600px) {
    .page-shell .toolbar-row:has(.account-controls:not([hidden])) { flex-direction: row; gap: 8px; flex-wrap: nowrap; }
    .page-shell .toolbar-row:has(.account-controls:not([hidden])) > div:first-child { width: auto; flex: 1; }
}
@media (max-width: 360px) {
    .page-shell .toolbar-row:has(.account-controls:not([hidden])) > div:first-child > img { display: none; }
}