.titlebar .cloud-account { position: relative; z-index: 10; justify-self: end; min-width: 0; }
.cloud-account summary { display: flex; align-items: center; gap: 9px; padding: 5px 9px 5px 6px; border-radius: 10px; color: var(--ink); font-weight: 650; cursor: pointer; list-style: none; }
.cloud-account summary::-webkit-details-marker { display: none; }
.cloud-account summary:hover, .cloud-account[open] summary { background: var(--surface); }
.cloud-account-mark { width: 30px; height: 30px; border-radius: 9px; color: var(--on-signal); background: var(--signal); font-size: 12px; font-weight: 750; }
.cloud-account nav { position: absolute; top: calc(100% + 7px); right: 0; display: grid; width: 220px; padding: 7px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-strong); box-shadow: 0 16px 36px var(--window-shadow-soft); backdrop-filter: blur(18px); }
.cloud-account nav strong { overflow: hidden; padding: 9px 10px 11px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cloud-account nav a, .cloud-account nav button { display: block; width: 100%; padding: 9px 10px; border-radius: 7px; color: var(--ink); background: transparent; font-size: 13px; font-weight: 550; text-align: left; text-decoration: none; }
.cloud-account nav a:hover, .cloud-account nav button:hover { background: var(--surface-hover); }
.cloud-account nav form { display: block; margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--line); }
.cloud-auth-switch { margin: 22px 0 0; color: var(--muted); font-size: 13px; }
.cloud-trial-form { align-content: center; }

@media (max-width: 620px) {
  .titlebar .cloud-account { display: flex; }
}