/* Login e menu do usuário. */

.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--bg); }
.login-brand {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px;
  padding: 64px clamp(40px, 7vw, 112px);
  background: #0b0b0c; color: rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(212, 168, 83, 0.25);
}
.login-brand img { width: min(360px, 100%); height: auto; }
.login-brand p { font: 500 13px var(--font-ui); letter-spacing: 0.28em; text-transform: uppercase; padding-left: 4px; }

.login-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 24px; }
.login-form { width: min(380px, 100%); display: grid; gap: 16px; }
.login-mark { display: none; width: 56px; height: auto; margin-bottom: 4px; }
.login-form h1 { font: 600 40px/1 var(--font-display); }
.login-form > p.muted { margin-top: -8px; font-size: 14px; }
.login-form .input { height: 42px; font-size: 15px; }
.login-submit { height: 44px; justify-content: center; font-size: 15px; margin-top: 4px; }
.login-error { color: var(--neg); background: var(--neg-soft); padding: 10px 12px; border-radius: var(--r); font-size: 13.5px; }
.login-foot { margin-top: 48px; font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; text-align: center; }

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-mark { display: block; }
  .login-panel { justify-content: flex-start; padding-top: 18vh; }
}

/* Usuário na barra lateral */
.user-chip small.saving { color: var(--gold-light); }
.user-chip small.offline { color: #f0a08f; }
.user-actions { display: flex; gap: 4px; padding: 2px 6px 0 44px; }
.user-actions button {
  background: none; border: 0; padding: 4px; font-size: 12px; color: var(--side-ink-3); border-radius: 4px;
}
.user-actions button:hover { color: var(--gold-light); }