.cloud-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-form { width: min(360px,100%); display: grid; gap: 16px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.login-form h1 { color: #17443f; font-size: 22px; }
.login-form label { font-size: 13px; gap: 6px; }
.login-form input,.login-form button { min-height: 38px; }
.login-form a { font-size: 12px; color: var(--accent); }
.login-error { color: var(--critical); font-size: 13px; overflow-wrap: anywhere; }
.account-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 30px; margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.account-bar strong { margin-right: auto; color: var(--ink); font-size: 12px; }
.account-bar button,.account-bar .file-button { min-height: 26px; font-size: 12px; padding: 0 8px; }
.account-bar .file-button { flex-direction: row; }
.app-shell { width: 100%; }
.topbar { gap: 8px; }
.brand { flex: 0 1 300px; }
.brand-mark { flex: 0 0 36px; }
.toolbar .file-button { flex-direction: row; }
@media (max-width:1180px) {
  .brand { flex: 0 0 auto; }
  .topbar { justify-content: flex-start; }
}
@media (max-width:650px) {
  .account-bar { flex-wrap: wrap; justify-content: flex-start; }
  .account-bar strong { width: 100%; }
}