/* ============================================================
   Estilos da camada de autenticação e sincronização.
   Usa as mesmas variáveis de marca do app (--brand, --ink, …).
   ============================================================ */

/* ---------- tela de login ---------- */
#sb-login{
  position:fixed; inset:0; z-index:9999;
  background:#0f1420;
  background-image:radial-gradient(circle at 15% 15%, rgba(89,255,55,.10), transparent 42%),
                   radial-gradient(circle at 85% 85%, rgba(89,255,55,.06), transparent 45%);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.sb-login-card{
  width:100%; max-width:380px; background:var(--panel);
  border-radius:16px; padding:36px 32px 28px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.sb-login-brand{
  font-weight:750; font-size:13px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--brand-strong); margin-bottom:6px;
}
.sb-login-card h1{ margin:0 0 6px; font-size:25px; font-weight:700; color:var(--ink); }
.sb-login-sub{ margin:0 0 26px; color:var(--ink2); font-size:13.5px; }
.sb-login-card label{
  display:block; font-size:12.5px; font-weight:600;
  color:var(--ink2); margin-bottom:6px;
}
.sb-login-card input{
  width:100%; padding:11px 13px; margin-bottom:16px; font-size:14px; font-family:inherit;
  border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.sb-login-card input:focus{
  outline:none; border-color:var(--brand-strong);
  box-shadow:0 0 0 3px var(--brand-soft); background:var(--panel);
}
.sb-login-card button[type=submit]{
  width:100%; padding:12px; border:0; border-radius:9px;
  background:var(--brand); color:var(--brand-ink);
  font-size:14.5px; font-weight:700; transition:filter .15s;
}
.sb-login-card button[type=submit]:hover:not(:disabled){ filter:brightness(.94); }
.sb-login-card button[type=submit]:disabled{ opacity:.6; cursor:not-allowed; }
.sb-login-err{
  display:none; background:var(--red-soft); color:var(--red);
  padding:9px 12px; border-radius:8px; font-size:13px; margin-bottom:14px;
}
.sb-link{
  display:block; width:100%; margin-top:14px; padding:6px;
  background:none; border:0; color:var(--ink2);
  font-size:12.5px; text-decoration:underline;
}
.sb-link:hover{ color:var(--ink); }

/* ---------- caixa de usuário / status de sync ---------- */
#sb-userbox{
  position:fixed; top:12px; right:16px; z-index:900;
  display:flex; align-items:center; gap:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:6px 8px 6px 14px; box-shadow:var(--shadow); font-size:12.5px;
}
#sb-status{ font-weight:600; color:var(--ink2); white-space:nowrap; }
#sb-userbox .sb-user{
  color:var(--ink2); max-width:180px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
  padding-left:12px; border-left:1px solid var(--line);
}
#sb-userbox .sb-papel{
  display:inline-block; margin-left:7px; padding:1px 7px;
  background:var(--brand-soft); color:var(--brand-strong);
  border-radius:999px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.3px; vertical-align:middle;
}
#sb-userbox button{
  border:0; background:var(--gray-soft); color:var(--ink2);
  padding:5px 12px; border-radius:999px; font-size:12px; font-weight:600;
}
#sb-userbox button:hover{ background:var(--red-soft); color:var(--red); }

/* ---------- aviso de alteração remota ---------- */
#sb-remote-banner{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:950;
  background:var(--ink); color:#fff; padding:11px 14px 11px 18px;
  border-radius:999px; box-shadow:0 8px 28px rgba(0,0,0,.25);
  display:flex; align-items:center; gap:10px; font-size:13px;
}
#sb-remote-banner button{
  border:0; border-radius:999px; padding:6px 14px;
  font-size:12.5px; font-weight:700;
  background:var(--brand); color:var(--brand-ink);
}
#sb-remote-banner button.ghost{ background:rgba(255,255,255,.14); color:#fff; font-weight:500; }

/* ---------- erro fatal ---------- */
#sb-fatal{
  position:fixed; inset:0; background:var(--bg);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.sb-fatal-card{
  max-width:520px; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:36px 32px; box-shadow:var(--shadow);
  font-size:14px; line-height:1.55; color:var(--ink2);
}
.sb-fatal-icon{ font-size:30px; color:var(--yellow); margin-bottom:10px; }
.sb-fatal-card h1{ margin:0 0 14px; font-size:20px; color:var(--ink); }
.sb-fatal-card code{
  background:var(--gray-soft); padding:2px 6px;
  border-radius:5px; font-size:12.5px; color:var(--ink);
}
.sb-fatal-card button{
  margin-top:20px; padding:10px 20px; border:0; border-radius:9px;
  background:var(--brand); color:var(--brand-ink); font-weight:700; font-size:14px;
}

/* Em telas estreitas o app já tem topbar própria; evita sobreposição. */
@media (max-width:820px){
  #sb-userbox{ top:auto; bottom:14px; right:14px; padding:5px 7px 5px 12px; }
  #sb-userbox .sb-user{ display:none; }
}