/* Identidade visual a partir da logo (01/10/2026): azul-claro #3BB0FF → azul #0B6BFF → marinho #0F2E6B. */
:root { --tz-sky: #3bb0ff; --tz-blue: #0b6bff; --tz-navy: #0f2e6b; --tz-grad: linear-gradient(135deg, #3bb0ff 0%, #0b6bff 55%, #0f2e6b 100%); }

/* Login: marca à esquerda, formulário à direita */
.auth-screen.tzb:not(.hidden) { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); place-items: stretch !important; padding: 0 !important; background: #f5f8ff !important; }
.tzb-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 56px 64px; color: #fff; background: var(--tz-grad); }
/* Marca d'água: o símbolo da logo, grande e quase transparente, no canto de baixo (no lugar do círculo). */
.tzb-hero::after { content: ''; position: absolute; right: -60px; bottom: -70px; width: 440px; height: 440px; background: url("../assets/tomzap-marca-dagua.svg") center / contain no-repeat; opacity: .1; transform: rotate(-10deg); pointer-events: none; }
.tzb-hero .tzb-logo { display: flex; align-items: center; gap: 14px; font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.tzb-hero .tzb-logo img { width: 56px; height: 56px; border-radius: var(--tz-r-md); background: #fff; padding: 6px; box-shadow: 0 10px 30px #0f2e6b55; }
.tzb-hero h1 { margin: 0; max-width: 460px; font-size: 34px; line-height: 1.15; letter-spacing: -.8px; }
.tzb-hero p { margin: 0; max-width: 440px; font-size: 16px; line-height: 1.55; opacity: .9; }
.tzb-hero ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.tzb-hero li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.tzb-hero li::before { content: ''; width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.tzb-hero small { position: absolute; left: 64px; bottom: 28px; opacity: .65; font-size: 12px; }
.auth-screen.tzb .auth-card { align-self: center; justify-self: center; width: min(400px, calc(100% - 48px)); box-shadow: 0 20px 50px #0f2e6b1f; }
.auth-screen.tzb .auth-submit { background: var(--tz-blue); }
@media (max-width: 860px) {
  /* Celular: faixa da marca em cima, formulário embaixo ocupando a largura (mesma especificidade da regra acima) */
  .auth-screen.tzb:not(.hidden) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; overflow-x: hidden; }
  .tzb-hero { padding: 36px 24px 56px; gap: 12px; }
  .tzb-hero .tzb-logo { font-size: 22px; } .tzb-hero .tzb-logo img { width: 44px; height: 44px; border-radius: 12px; }
  .tzb-hero h1 { font-size: 22px; max-width: 320px; } .tzb-hero p, .tzb-hero ul, .tzb-hero small { display: none; }
  .tzb-hero::after { width: 200px; height: 200px; right: -40px; bottom: -60px; }
  .auth-screen.tzb .auth-card { align-self: start; width: calc(100% - 32px); max-width: 420px; margin: -32px auto 24px; position: relative; box-sizing: border-box; }
  .auth-screen.tzb .auth-card input { width: 100%; box-sizing: border-box; }
  .auth-screen.tzb .auth-brand { display: none; }
}

/* Barra lateral: logo no lugar do raio */
.tzs-mark.tzb-img { background: transparent; padding: 0; }
.tzs-mark.tzb-img img { width: 32px; height: 32px; border-radius: 9px; display: block; }
.auth-screen.tzb.hidden { display: none !important; }

/* Azul das telas = azul da logo (tema Azul, que é o padrão, e ajuste no Grafite) */
:root, body[data-theme="ocean"] { --blue: #0b6bff; --blue2: #e8f1ff; }
body[data-theme="graphite"] { --blue: #3bb0ff; }
.primary { box-shadow: 0 8px 18px #0b6bff33 !important; }