/* Conta do Google no canto do topo (js/conta-topo.js), depois de Como usar e Ajustes */
.conta-topo{position:relative;display:flex;align-items:center;gap:2px;margin-left:6px}
.conta-topo:empty{display:none}
.g-icone{width:16px;height:16px;flex:none}
.conta-entrar{background:var(--cartao)}
.conta-avatar{position:relative;overflow:hidden;width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--marca);color:var(--sobre-marca,#fff);font-weight:700;font-size:14px}
.conta-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.conta-chip,.conta-sugerida{display:flex;align-items:center;gap:8px;padding:3px;border:1px solid var(--linha);border-radius:999px;background:var(--cartao);font:inherit;color:var(--tinta);cursor:pointer}
.conta-sugerida{padding-right:12px;font-size:13px}
.conta-chip:hover,.conta-chip[aria-expanded="true"],.conta-sugerida:hover{border-color:var(--marca)}
.conta-nome{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta-outra{padding:4px 8px;border:0;background:none;font:inherit;font-size:12px;color:var(--tinta-3);cursor:pointer;white-space:nowrap}
.conta-outra:hover{color:var(--tinta);text-decoration:underline}
.conta-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:280px;padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--cartao);border:1px solid var(--linha);border-radius:12px;box-shadow:0 10px 30px rgba(28,28,28,.14);font-size:14px}
.conta-menu small{color:var(--tinta-3)}
.conta-menu b{word-break:break-all}
.conta-status{margin:8px 0 6px;font-size:13px;color:var(--marca-texto)}
.conta-menu .dica{margin:0 0 10px;font-size:12.5px}

@media (max-width:620px){
  .conta-topo{margin-left:2px}
  /* Sem espaço para o nome nem para "Outra conta": aqui o botão abre a escolha de contas do Google (conta-topo.js) */
  .conta-como,.conta-outra{display:none}
  .conta-entrar{padding:5px 8px;font-size:0;gap:0}
  .conta-menu{position:fixed;top:60px;left:16px;right:16px;width:auto}
}

/* Tela de entrada (js/entrada.js), por cima de tudo enquanto não há conta */
.entrada{z-index:90;align-items:center;background:var(--papel)}
.en-cartao{max-width:460px;text-align:center;box-shadow:0 10px 40px rgba(28,28,28,.12)}
.en-marca{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px}
.en-marca .icone{width:40px;height:40px}
.en-marca .nome-app{font:800 15px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--marca-texto)}
.en-botoes{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0 16px}
.en-google{gap:10px;padding:10px 20px;font-size:15px;background:var(--cartao);color:var(--tinta);border-color:var(--linha)}
.en-google:hover{border-color:var(--marca);background:var(--cartao)}
.en-aviso{margin:0;font-weight:700;color:var(--marca-texto)}
/* No fim de Ajustes, longe do sair da conta, para ninguém excluir sem querer */
.aj-excluir{margin-top:40px;padding-top:18px;border-top:1px solid var(--linha)}
@media (max-width:620px){.aj-excluir{text-align:center}}
.ex-cartao{max-width:480px}
.ex-cartao p{margin:0 0 10px}
.ex-cartao .campo{margin:6px 0 14px}
.ex-cartao .btn:disabled{opacity:.4;cursor:not-allowed}
.en-links{margin:12px 0 0;font-size:13px}
/* Também no rodapé; aqui para quem não chega ao fim da página */
.conta-links{display:flex;gap:14px;align-self:stretch;justify-self:stretch;margin-top:10px;padding-top:10px;border-top:1px solid var(--linha);font-size:12.5px}
.conta-links a{color:var(--tinta-3);text-decoration:none}
.conta-links a:hover{color:var(--marca-texto);text-decoration:underline}