/* ============================================================
   Widget de login no topbar — usa os tokens de tema
   já definidos em cada página (--secondary, --accent, --cream-*).
   ============================================================ */
.topbar__auth{display:flex;align-items:center;}

/* Roxo da Twitch aqui seria mentira: o botão leva a /entrar/, que é a
   escolha entre as plataformas. A cor é a do site. */
.kz-login{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--secondary, #f49200);color:var(--on-secondary, #402C0C);
  text-decoration:none;
  font-family:var(--f-display, 'Space Grotesk', sans-serif);
  font-weight:700;font-size:13px;
  padding:8px 14px;border-radius:var(--r-pill, 50px);
  transition:filter .15s, transform .12s;
}
.kz-login:hover{filter:brightness(1.08);}
.kz-login:active{transform:scale(.98);}
.kz-login svg{flex-shrink:0;}

/* `flex-shrink:0` na pílula inteira. No celular a busca do topbar é
   `flex:1 1 auto` — ela cresce e come o que sobra —, e sem isto quem cedia
   espaço era esta pílula, que já é o menor item da barra. */
.kz-user{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  background:var(--cream-2, #F8EEDC);
  border:1px solid var(--hairline, rgba(70,45,10,.10));
  border-radius:var(--r-pill, 50px);
  padding:4px 6px 4px 4px;
}
.kz-user__link{
  display:flex;align-items:center;gap:8px;
  text-decoration:none;color:inherit;border-radius:var(--r-pill, 50px);
  transition:opacity .12s;
}
a.kz-user__link{cursor:pointer;}
a.kz-user__link:hover{opacity:.82;}
a.kz-user__link:hover .kz-user__name{text-decoration:underline;}
/* `min-width`/`min-height` além do `width`/`height`, e não por precaução: é o
   que conserta a foto virar ELIPSE no celular.
   .
   O shell.css tem `img{max-width:100%}`, que é um bom padrão — impede uma
   imagem grande de estourar o layout. Mas ele vale para ESTA imagem também, e
   `max-width` é resolvido contra a caixa do pai. Quando a barra apertava e o
   pai ficava com menos de 30px de conteúdo, o `max-width:100%` espremia a
   LARGURA da foto enquanto o `height:30px` continuava de pé: um círculo de
   30 de altura por 22 de largura.
   .
   `flex-shrink:0` não resolvia porque a restrição não vinha da distribuição
   do flex, vinha do `max-width`. `min-width` resolve porque, em CSS, o mínimo
   vence o máximo. */
.kz-user__avatar{
  width:30px;height:30px;min-width:30px;min-height:30px;
  border-radius:50%;object-fit:cover;
  background:var(--secondary, #F4A62C);flex-shrink:0;
}
.kz-user__name{
  font-size:13px;font-weight:700;color:var(--ink, #2C2216);
  max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kz-user__badge{
  font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--on-accent, #fff);background:var(--accent, #D30000);
  padding:2px 7px;border-radius:var(--r-pill, 50px);
}
.kz-user__logout{
  width:28px;height:28px;min-width:28px;flex-shrink:0;
  border-radius:50%;display:grid;place-items:center;
  color:var(--text-soft, #6E5D46);
}
.kz-user__logout:hover{background:var(--amber-soft, #FCE7C2);color:var(--ink, #2C2216);}
.kz-user__logout svg{width:15px;height:15px;}

@media (max-width:520px){ .kz-user__name{display:none;} }
@media (max-width:600px){ .kz-login span{display:none;} .kz-login{padding:8px 10px;} }