/* Tela de login (cloud-auth.js). Usa os tokens de tema do style.css; carregar depois dele. */
html.atlas-gated body > *:not(#atlas-auth):not(#nt-move-banner):not(script):not(style) { display: none !important; }
html.atlas-gated, html.atlas-gated body { background: var(--paper); }
#atlas-auth {
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; box-sizing: border-box;
  background: var(--paper); color: var(--ink);
  font: 14px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#atlas-auth *, #atlas-auth *::before, #atlas-auth *::after { box-sizing: border-box; }
.auth-card {
  width: 100%; max-width: 400px; min-width: 0; margin: auto;
  padding: 28px 24px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line, #d9dfe5); box-shadow: var(--shadow, none);
}
.auth-brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 22px; }
.auth-brand b { font-size: 20px; letter-spacing: -.5px; }
.auth-brand small { color: var(--muted, #66748a); font-size: 11px; }
.auth-mark { color: var(--accent); font-size: 16px; }
.auth-card h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.5px; color: var(--ink); overflow-wrap: anywhere; }
.auth-sub, .auth-note { margin: 0 0 18px; color: var(--muted, #66748a); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: block; min-width: 0; color: var(--muted, #66748a); font-size: 11px; font-weight: 650; }
.auth-form input {
  display: block; width: 100%; min-width: 0; margin-top: 6px; padding: 11px 12px;
  border: 1px solid var(--line, #d9dfe5); border-radius: 8px;
  background: var(--field, var(--paper)); color: var(--ink); font: inherit; font-size: 14px;
}
.auth-form input:focus, .auth-card button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
.auth-form input:disabled { opacity: .6; }
.auth-primary, .auth-google {
  width: 100%; min-height: 42px; padding: 10px 14px; border-radius: 8px; font: 650 13px system-ui, sans-serif; cursor: pointer;
}
.auth-primary { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-contrast, #10150b); }
.auth-primary:hover:not(:disabled) { filter: brightness(1.08); }
.auth-google { border: 1px solid var(--line, #d9dfe5); background: var(--surface-soft, var(--surface)); color: var(--ink); }
.auth-card button:disabled { opacity: .55; cursor: default; }
.auth-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin: 14px 0 4px; }
.auth-link { border: 0; background: none; padding: 4px 0; color: var(--accent-ink, var(--accent)); font: 600 12px system-ui, sans-serif; cursor: pointer; text-align: left; }
.auth-link:hover:not(:disabled) { text-decoration: underline; }
.auth-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted, #66748a); font-size: 11px; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--line, #d9dfe5); }
.auth-status { margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere;
  background: var(--surface-soft, var(--paper)); border: 1px solid var(--line, #d9dfe5); color: var(--ink); }
.auth-denied { margin-bottom: 16px; border-color: var(--negative, #c5414d); color: var(--negative, #c5414d); }
/* Indicador de sincronização e "Sair" na barra lateral (a barra é escura nos dois temas; reaproveita .cloud-status/.nav-item). */
/* Com o aviso longo (aba desconectada) e o botão Sair, a barra pode passar da altura de telas baixas: rola em vez de cortar. */
.sidebar { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.cloud-status .sync-status-body { min-width: 0; flex: 1; }
.cloud-status [data-sync-text] { overflow-wrap: anywhere; line-height: 1.4; }
.cloud-status[data-state="saved"] .status-icon { color: #73d8b5; }
.cloud-status[data-state="syncing"] .status-icon, .cloud-status[data-state="pending"] .status-icon { color: #f2b64f; }
.cloud-status[data-state="offline"] .status-icon { color: #93a1b6; }
.cloud-status[data-state="error"] .status-icon, .cloud-status[data-state="blocked"] .status-icon,
.cloud-status[data-state="fenced"] .status-icon { color: #ff7b82; }
.cloud-status[data-state="error"] [data-sync-text], .cloud-status[data-state="blocked"] [data-sync-text],
.cloud-status[data-state="fenced"] [data-sync-text] { color: #ffb3b7; }
.cloud-status[data-state="fenced"] [data-sync-text] { font-size: 11px; }
.sync-reload {
  display: inline-block; margin-top: 8px; padding: 6px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--accent, #69d9b6); background: transparent; color: var(--accent, #69d9b6); font: 650 11px system-ui, sans-serif;
}
.sync-reload[hidden] { display: none; }
.sync-reload:hover { background: rgba(255, 255, 255, .08); }
.sync-reload:focus-visible, .nav-item.sign-out:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent, #69d9b6) 60%, transparent); outline-offset: 1px; }
.nav-item.sign-out:disabled { opacity: .6; cursor: default; }
@media (max-width: 480px) {
  #atlas-auth { align-items: flex-start; padding: 16px; }
  .auth-card { padding: 22px 18px; }
}

/* Aviso de mudança de domínio (move-banner.js): faixa fixa acima de tudo, inclusive do login; a altura medida em
   --nt-move-h empurra sidebar, barra superior e login para não cobrir a navegação. */
.nt-move-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; padding: 8px 16px;
  background: var(--accent, #baff39); color: var(--accent-contrast, #10150b);
  font: 600 13px/1.4 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-align: center; }
.nt-move-text { min-width: 0; overflow-wrap: anywhere; }
.nt-move-button { min-width: 0; max-width: 100%; padding: 6px 14px; border: 1px solid currentColor; border-radius: 8px;
  background: var(--accent-contrast, #10150b); color: var(--accent, #baff39); font: inherit; font-weight: 700; cursor: pointer;
  white-space: normal; overflow-wrap: anywhere; }
.nt-move-button:disabled { opacity: .75; cursor: not-allowed; }
.nt-move-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
html.nt-move-on body { padding-top: var(--nt-move-h, 0px); }
html.nt-move-on .sidebar { top: var(--nt-move-h, 0px); }
html.nt-move-on .topbar { top: var(--nt-move-h, 0px); }
html.nt-move-on #atlas-auth { top: var(--nt-move-h, 0px); }