/* ===================== Tokens de tema ===================== */
    :root {
      --bg: #f6f7f9;
      --fg: #1f2433;
      --card: #ffffff;
      --primary: #2a3170;        /* azul-marinho da marca */
      --primary-fg: #fafbff;
      --accent: #18b6c8;         /* ciano de destaque — segue a marca junto com --primary */
      --secondary: #eef0f4;
      --muted-fg: #6b7180;
      --border: #e3e6ec;
      --ring: var(--primary);
      --radius: 12px;
      --radius-sm: 8px;
      --radius-full: 9999px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body { height: 100%; }

    body {
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      background: #0d1117;
      color: var(--fg);
      -webkit-font-smoothing: antialiased;
      line-height: 1.5;
      overflow-x: hidden;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
    }

    body::before {
      z-index: -2;
      /* Fundo por marca: renderCompany() define --login-bg (ex.: Grupo Labor → FL.png). */
      background: var(--login-bg, url("/assets/login-background.jpg")) center / cover no-repeat;
    }

    body::after {
      z-index: -1;
      /* SECURITY/BRAND FIX 2026-06-29: usava rgba(42,49,112) e rgba(24,182,200) fixos
         (cores da Aluforce), por isso o override de marca (--primary/--accent injetado
         pelo zyntra-branding.js para labor-eletric/labor-energy) não tinha efeito visual
         aqui — só nos elementos pequenos (botão, links) que já usavam var(--primary). */
      background:
        radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--primary) 42%, transparent), transparent 34%),
        radial-gradient(circle at 82% 76%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 30%),
        linear-gradient(115deg, rgba(7, 13, 24, .72), rgba(7, 13, 24, .44) 48%, rgba(7, 13, 24, .68));
    }

    /* ===================== Layout 2 colunas ===================== */
    .screen {
      display: grid;
      grid-template-columns: 1fr;
      min-height: 100vh;
      position: relative;
    }
    @media (min-width: 1024px) {
      .screen { grid-template-columns: 1.05fr 1fr; }
    }

    /* ===================== Painel de marca ===================== */
    .brand-panel {
      position: relative;
      display: none;
      overflow: hidden;
      flex-direction: column;
      justify-content: space-between;
      padding: 3rem;
      /* Camada escura por cima do tom de marca → legibilidade sobre fundos claros (ex.: FL.png laranja). */
      background:
        linear-gradient(180deg, rgba(9,13,24,.34) 0%, rgba(9,13,24,.60) 100%),
        linear-gradient(145deg, color-mix(in srgb, var(--primary) 68%, transparent), rgba(13,17,23,.55));
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      color: var(--primary-fg);
      animation: fadeIn .5s ease both;
    }
    @media (min-width: 1024px) { .brand-panel { display: flex; } }
    @media (min-width: 1280px) { .brand-panel { padding: 4rem; } }

    .brand-grid {
      pointer-events: none;
      position: absolute;
      inset: 0;
      opacity: .07;
      background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
      background-size: 48px 48px;
    }

    .brand-logos {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1.5rem;
    }
    .brand-logos .brand-item { display: flex; align-items: center; gap: 1.5rem; }
    .brand-logos .divider { height: 2rem; width: 1px; background: rgba(255,255,255,.28); }
    /* Uniformiza os logos (tons de cinza-claro diferentes entre os PNGs) para um branco
       nítido e consistente, com sombra sutil para legibilidade sobre o fundo claro. */
    .brand-logos img {
      width: auto; height: 40px;
      filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.45));
    }
    /* labor-branco.png tem o mark + wordmark + subtítulo, então o conteúdo lê menor
       na mesma altura — aumentamos p/ igualar o peso visual dos outros logos. */
    .brand-logos img.sm { height: 54px; }
    /* A logo Zyntra já é branca e tem detalhe interno no ícone: o filtro acima a viraria um bloco sólido. */
    .brand-logos img[src*="zyntra-branco"] { filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); height: 44px; }

    .brand-head { position: relative; max-width: 28rem; }
    .brand-head h1 {
      font-size: 1.875rem;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -.02em;
      text-wrap: balance;
    }
    @media (min-width: 1280px) { .brand-head h1 { font-size: 2.25rem; } }
    .brand-head h1 { text-shadow: 0 1px 10px rgba(0,0,0,.28); }
    .brand-head p { margin-top: 1rem; color: rgba(255,255,255,.82); text-wrap: pretty; text-shadow: 0 1px 6px rgba(0,0,0,.24); }

    .highlights { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; list-style: none; }
    .highlights li {
      display: flex; align-items: center; gap: 1rem;
      padding: .75rem .9rem;
      border-radius: var(--radius, 14px);
      background: rgba(255,255,255,.06);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
      transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .highlights li:hover {
      background: rgba(255,255,255,.11);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 8px 22px rgba(0,0,0,.22);
    }
    .highlights .ico {
      flex-shrink: 0;
      width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm);
      color: #fff;
      background: color-mix(in srgb, var(--primary) 42%, rgba(255,255,255,.14));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 3px 10px rgba(0,0,0,.22);
    }
    .highlights .ico svg { width: 19px; height: 19px; }
    .highlights .title { font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
    .highlights .desc { font-size: .875rem; color: rgba(255,255,255,.78); margin-top: 2px; text-shadow: 0 1px 4px rgba(0,0,0,.2); }

    .brand-footer {
      position: relative;
      display: flex; align-items: center; justify-content: space-between;
      font-size: .875rem; color: rgba(250,251,255,.55);
    }

    /* ===================== Lado do formulário ===================== */
    .form-side {
      display: flex; align-items: center; justify-content: center;
      padding: 1.5rem;
    }
    @media (min-width: 640px) { .form-side { padding: 2.5rem; } }
    .form-wrap {
      position: relative;
      width: 100%;
      max-width: 26rem;
      padding: 2rem;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 18px;
      background: rgba(255,255,255,.86);
      box-shadow: 0 22px 70px rgba(0,0,0,.28);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    @media (max-width: 520px) {
      .form-wrap { padding: 1.35rem; }
    }

    .mobile-logo { margin-bottom: 2.5rem; }
    .mobile-logo img { height: 44px; width: auto; }
    @media (min-width: 1024px) { .mobile-logo { display: none; } }

    .badge {
      display: inline-flex; align-items: center; gap: .375rem;
      margin-bottom: 1rem;
      border: 1px solid var(--border);
      background: var(--secondary);
      border-radius: var(--radius-full);
      padding: .25rem .75rem;
      font-size: .75rem; font-weight: 500; color: var(--muted-fg);
    }
    .badge svg { width: 14px; height: 14px; color: var(--primary); }

    h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
    .subtitle { margin-top: .5rem; font-size: .875rem; color: var(--muted-fg); }
    .subtitle strong { color: var(--fg); font-weight: 500; }

    /* Abas de identificador */
    .tabs {
      margin-top: 2rem;
      display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
      background: var(--secondary);
      border-radius: var(--radius-sm);
      padding: 4px;
    }
    .tab {
      display: flex; align-items: center; justify-content: center; gap: .5rem;
      border: 0; cursor: pointer; background: transparent;
      border-radius: 6px; padding: .5rem .75rem;
      font-size: .875rem; font-weight: 500; color: var(--muted-fg);
      transition: color .15s, background .15s, box-shadow .15s;
      font-family: inherit;
    }
    .tab svg { width: 16px; height: 16px; }
    .tab[aria-selected="true"] {
      background: var(--card); color: var(--fg);
      box-shadow: 0 1px 2px rgba(0,0,0,.08);
    }

    form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
    .field { display: flex; flex-direction: column; gap: .5rem; }
    label { font-size: .875rem; font-weight: 500; }
    .row { display: flex; align-items: center; justify-content: space-between; }
    .link { font-size: .875rem; font-weight: 500; color: var(--primary); text-decoration: none; }
    .link:hover { opacity: .8; }

    .control { position: relative; }
    .control .ico-left {
      position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
      color: var(--muted-fg); display: flex; pointer-events: none;
    }
    .control .ico-left svg { width: 16px; height: 16px; }
    .control input {
      width: 100%; height: 44px;
      padding: 0 2.25rem;
      border: 1px solid var(--input, var(--border));
      border-radius: var(--radius-sm);
      background: var(--card); color: var(--fg);
      font-size: .9rem; font-family: inherit;
      transition: border-color .15s, box-shadow .15s;
      /* Garante foco/teclado mesmo quando a página volta do bfcache ou recebe
         estilos de extensões/gerenciadores de senha. */
      position: relative; z-index: 1; pointer-events: auto !important;
      user-select: text; -webkit-user-select: text;
    }
    .control input::placeholder { color: var(--muted-fg); }
    .control input:focus {
      outline: none;
      border-color: var(--ring);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent);
    }
    .toggle-eye {
      position: absolute; z-index: 2; right: 0; top: 50%; transform: translateY(-50%);
      width: 44px; height: 44px; align-items: center; justify-content: center;
      border: 0; background: transparent; cursor: pointer;
      padding: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      color: var(--muted-fg); display: flex;
      transition: color .15s, background-color .15s;
    }
    .control input#password { padding-right: 3rem; }
    .toggle-eye:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
    .toggle-eye:focus-visible {
      outline: 2px solid var(--ring); outline-offset: -3px; color: var(--fg);
    }
    .toggle-eye svg { width: 18px; height: 18px; pointer-events: none; }
    .spinner-right {
      position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
      color: var(--muted-fg); display: none;
    }
    .spinner-right.show { display: flex; }
    .spinner-right svg { width: 16px; height: 16px; animation: spin 1s linear infinite; }

    /* Cartão de saudação */
    .greeting {
      display: none;
      align-items: center; gap: .75rem;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--secondary) 60%, transparent);
      border-radius: var(--radius-sm);
      padding: .75rem;
      animation: fadeIn .25s ease both;
    }
    .greeting.show { display: flex; }
    .greeting .avatar {
      width: 48px; height: 48px; flex-shrink: 0;
      border-radius: var(--radius-full); overflow: hidden;
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
      background: var(--secondary);
    }
    .greeting .avatar img { width: 100%; height: 100%; object-fit: cover; }
    .greeting .meta { min-width: 0; }
    .greeting .hi { font-size: .75rem; color: var(--muted-fg); }
    .greeting .name { font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .greeting .role { font-size: .75rem; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .check { display: flex; align-items: center; gap: .5rem; }
    .check input { width: 16px; height: 16px; accent-color: var(--primary); }
    .check label { font-weight: 400; color: var(--muted-fg); }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
      height: 44px; width: 100%;
      border: 0; cursor: pointer;
      border-radius: var(--radius-sm);
      background: var(--primary); color: var(--primary-fg);
      font-size: .875rem; font-weight: 500; font-family: inherit;
      transition: opacity .15s;
    }
    .btn:hover { opacity: .92; }
    .btn:disabled { opacity: .7; cursor: default; }
    .btn svg { width: 16px; height: 16px; }
    .btn .spin { animation: spin 1s linear infinite; }

    .support { margin-top: 2rem; text-align: center; font-size: .875rem; color: var(--muted-fg); }
    .support a { font-weight: 500; color: var(--primary); text-decoration: none; }

    /* Overlay de sucesso */
    .success {
      display: none;
      position: absolute; inset: 0; z-index: 10;
      flex-direction: column; align-items: center; justify-content: center;
      gap: 1rem; text-align: center;
      background: color-mix(in srgb, var(--card) 95%, transparent);
      backdrop-filter: blur(4px);
      border-radius: var(--radius);
      animation: fadeIn .3s ease both;
    }
    .success.show { display: flex; }
    .success .ring {
      width: 64px; height: 64px;
      display: flex; align-items: center; justify-content: center;
      border-radius: var(--radius-full);
      background: var(--primary); color: var(--primary-fg);
      animation: pop .5s ease both;
    }
    .success .ring svg { width: 32px; height: 32px; }
    .success h3 { font-size: 1.125rem; font-weight: 600; }
    .success p { margin-top: .25rem; font-size: .875rem; color: var(--muted-fg); }
    .success .spin { width: 20px; height: 20px; color: var(--primary); animation: spin 1s linear infinite; }
    .error-message {
      display: none;
      align-items: flex-start;
      gap: .625rem;
      margin-bottom: 1rem;
      padding: .875rem 1rem;
      border: 1px solid rgba(220, 38, 38, .24);
      border-radius: var(--radius-sm);
      background: rgba(254, 242, 242, .92);
      color: #991b1b;
      font-size: .875rem;
      box-shadow: 0 10px 30px rgba(127, 29, 29, .08);
    }
    .error-message.show { display: flex; }
    .error-message svg {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      margin-top: 1px;
    }

    .hidden { display: none !important; }

    /* Desafio anti-robô */
    .captcha-box { display: flex; gap: 10px; align-items: stretch; }
    .captcha-box img {
      width: 200px; height: 64px; flex: 0 0 auto;
      border-radius: 10px; background: #f1f4f9; user-select: none; -webkit-user-drag: none;
    }
    .captcha-box input {
      flex: 1 1 auto; min-width: 0;
      text-transform: uppercase; letter-spacing: .18em; font-weight: 600; text-align: center;
    }
    .captcha-hint { font-size: 12px; opacity: .7; margin-top: 6px; }
    .twofa-panel { animation: fadeIn .2s ease both; }
    .twofa-head { text-align: center; margin-bottom: 1.25rem; }
    .twofa-icon {
      width: 52px; height: 52px; margin: 0 auto .875rem;
      display: flex; align-items: center; justify-content: center;
      border-radius: var(--radius-full); color: var(--primary);
      background: color-mix(in srgb, var(--primary) 10%, transparent);
    }
    .twofa-icon svg { width: 25px; height: 25px; }
    .twofa-head h3 { font-size: 1.125rem; font-weight: 600; }
    .twofa-head p { margin-top: .375rem; color: var(--muted-fg); font-size: .875rem; line-height: 1.5; }
    .twofa-code {
      width: 100%; height: 52px; padding: 0 1rem;
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      background: var(--background); color: var(--foreground);
      font: 600 1.4rem/1 inherit; text-align: center; letter-spacing: .45em;
    }
    .twofa-code:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    .twofa-panel .check {
      min-height: 46px; margin-top: .75rem; padding: .625rem .75rem;
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      background: color-mix(in srgb, var(--background) 76%, transparent);
      cursor: pointer;
    }
    .twofa-panel .check:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
    .twofa-panel .check:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
    .twofa-panel .check input { width: 18px; height: 18px; flex: 0 0 18px; cursor: pointer; }
    .twofa-panel .check label { flex: 1; cursor: pointer; line-height: 1.35; }
    .twofa-actions { display: flex; justify-content: space-between; gap: .75rem; margin-top: .875rem; }
    .twofa-link {
      flex: 1 1 0; min-height: 44px; padding: .625rem .75rem;
      border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent;
      color: var(--primary); cursor: pointer; font: 500 .8125rem/1.3 inherit;
      transition: background-color .2s, border-color .2s, color .2s;
    }
    .twofa-link:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 8%, transparent); border-color: var(--primary); }
    .twofa-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    .twofa-link:disabled { opacity: .55; cursor: default; }
    .twofa-status { min-height: 1.25rem; margin: .625rem 0; color: var(--muted-fg); font-size: .8125rem; text-align: center; }
    .twofa-status.error { color: #b91c1c; }
    .twofa-status.success { color: #15803d; }
    @media (max-width: 420px) {
      .captcha-box { flex-direction: column; }
      .captcha-box img { width: 100%; }
      .twofa-actions { flex-direction: column-reverse; }
    }

    /* ===================== Responsividade e teclado móvel =====================
       100dvh acompanha a área realmente visível no iOS/Android (inclusive com a
       barra do navegador e o teclado abertos). Os fallbacks em 100vh mantêm o
       comportamento nos navegadores mais antigos. */
    body { min-height: 100vh; min-height: 100dvh; overflow-y: auto; }
    .screen { min-height: 100vh; min-height: 100dvh; }
    .form-side {
      min-height: 100vh;
      min-height: 100dvh;
      padding:
        max(1.25rem, env(safe-area-inset-top))
        max(1.25rem, env(safe-area-inset-right))
        max(1.25rem, env(safe-area-inset-bottom))
        max(1.25rem, env(safe-area-inset-left));
    }

    @media (max-width: 1023px) {
      .form-wrap { max-width: min(30rem, 100%); }
      .mobile-logo { margin-bottom: 1.25rem; }
      .mobile-logo img { max-width: min(100%, 17rem); height: auto; max-height: 56px; }
    }

    @media (max-width: 520px) {
      .form-side { align-items: flex-start; padding-inline: max(1rem, env(safe-area-inset-right)); }
      .form-wrap { margin: auto 0; padding: 1.25rem; border-radius: 16px; }
      .tabs { margin-top: 1.35rem; }
      .tab { min-height: 42px; padding-inline: .5rem; font-size: .8125rem; }
      .control input, .twofa-code { font-size: 16px; } /* evita zoom automático no iOS */
      .twofa-actions { flex-wrap: wrap; }
      .twofa-link { flex: 1 1 10rem; }
    }

    @media (max-width: 360px) {
      .form-side { padding: .75rem; }
      .form-wrap { padding: 1rem; }
      h2 { font-size: 1.3rem; }
      .badge { font-size: .6875rem; }
    }

    @media (max-width: 1023px) and (max-height: 720px) {
      .form-side { align-items: flex-start; }
      .form-wrap { margin-block: 1rem; }
      .mobile-logo { margin-bottom: .875rem; }
      form { margin-top: 1.15rem; gap: .9rem; }
      .support { margin-top: 1.15rem; }
    }

    @media (min-width: 1024px) and (max-height: 800px) {
      .brand-panel { padding-block: 2rem; }
      .brand-head h1 { font-size: 1.65rem; }
      .highlights { margin-top: 1.4rem; gap: .7rem; }
      .highlights li { padding: .55rem .7rem; }
      .form-wrap { margin-block: 1.25rem; }
    }

    /* Split-screen (desktop): a tela nunca deve rolar como página inteira — isso
       empurrava o painel de marca pra fora da vista. `.screen` fica travada na
       altura da viewport e cada coluna rola SOZINHA por dentro, só se o próprio
       conteúdo dela não couber (ex.: 2FA/captcha aumentando o formulário numa
       janela baixa). Escopado a >=1024px de propósito: abaixo disso é o layout
       de coluna única do celular, com o teclado virtual já tratado via 100dvh
       acima — mexer lá reabriria o problema que esses ajustes resolveram. */
    @media (min-width: 1024px) {
      .screen { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
      .brand-panel, .form-side { height: 100%; min-height: 0; overflow-y: auto; }
    }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }

    /* Acabamento de autenticação: clareza, conforto e estados acessíveis. */
    .form-wrap {
      border-color: rgba(255,255,255,.42);
      box-shadow: 0 28px 80px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.12);
    }
    .form-wrap::before {
      content: ""; position: absolute; inset: 0 0 auto; height: 3px;
      border-radius: 18px 18px 0 0;
      background: linear-gradient(90deg, var(--primary), var(--accent));
    }
    .control:focus-within .ico-left { color: var(--primary); }
    .control input:hover:not(:focus) { border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); }
    .btn { min-height: 46px; box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 25%, transparent); }
    .btn:hover:not(:disabled) { opacity: 1; filter: brightness(1.06); }
    .btn:focus-visible, .tab:focus-visible, .link:focus-visible, .support a:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent); outline-offset: 3px;
    }
    .link, .support a { text-underline-offset: 3px; }
    .link:hover, .support a:hover { text-decoration: underline; opacity: 1; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }

    /* ===================== Refinamento visual 29/09/2026 =====================
       Desktop: painel de marca à esquerda + painel claro de altura total à direita,
       com o formulário centralizado (antes o cartão translúcido flutuava sobre o
       papel de parede cru e ficava acinzentado). Celular/tablet: cartão sólido
       sobre o fundo da marca. Captcha com imagem e campo na mesma altura. */
    .form-wrap { background: rgba(255,255,255,.97); }
    .captcha-box { gap: 8px; }
    .captcha-box img { width: 168px; height: 52px; border-radius: var(--radius-sm); border: 1px solid var(--border); object-fit: cover; }
    .captcha-box input {
      height: 52px; font-size: 1rem; font-family: inherit; color: var(--fg); background: #fff;
      border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 .75rem;
    }
    .captcha-box input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent); }
    /* O input tem z-index:1 e fundo branco: o ícone da esquerda ficava por baixo e sumia. */
    .control .ico-left { z-index: 2; }
    .captcha-hint { margin-top: 4px; }
    .check label { font-size: .8125rem; }
    .support { font-size: .8125rem; line-height: 1.55; }

    @media (min-width: 1024px) {
      .screen { grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); }
      .brand-panel { box-shadow: 1px 0 0 rgba(255,255,255,.08); }
      .form-side {
        background: #f7f8fb;
        box-shadow: -24px 0 60px rgba(0,0,0,.18);
        padding: 2.5rem clamp(2rem, 5vw, 5rem);
      }
      .form-wrap {
        max-width: 25rem;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        margin-block: auto;
      }
      .form-wrap::before { display: none; }
      .form-wrap header { padding-bottom: .25rem; }
      .form-wrap header::after {
        content: ""; display: block; width: 44px; height: 3px; margin-top: 1rem;
        border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--accent));
      }
      h2 { font-size: 1.625rem; }
      .control input { background: #fff; }
      .success { border-radius: 0; background: color-mix(in srgb, #f7f8fb 96%, transparent); }
    }

    /* Janelas baixas (notebook 1366x768 com barra do navegador): tudo cabe sem rolar. */
    @media (min-width: 1024px) and (max-height: 760px) {
      .badge { margin-bottom: .6rem; }
      .form-wrap header::after { margin-top: .6rem; }
      .tabs { margin-top: 1.1rem; }
      form { margin-top: 1rem; gap: .8rem; }
      .control input { height: 40px; }
      .btn { min-height: 42px; height: 42px; }
      .captcha-box img, .captcha-box input { height: 46px; }
      .support { margin-top: 1rem; }
    }
    @media (min-width: 1024px) and (max-height: 660px) {
      .form-side { padding-block: 1rem; }
      .badge { display: none; }
      .subtitle { margin-top: .25rem; }
      .tabs { margin-top: .8rem; }
      .tab { padding-block: .35rem; }
      form { margin-top: .75rem; gap: .6rem; }
      .field { gap: .3rem; }
      .captcha-hint { display: none; }
      .support { margin-top: .75rem; }
    }

    @media (max-width: 1023px) {
      .form-side { background: linear-gradient(180deg, rgba(7,13,24,.35), rgba(7,13,24,.55)); }
      .form-wrap { box-shadow: 0 20px 60px rgba(0,0,0,.35); }
    }
    @media (max-width: 420px) {
      .captcha-box img { width: 100%; height: 56px; }
      .captcha-box input { height: 48px; }
    }

    /* ===================== "Acesso liberado" =====================
       Fundo sólido (o formulário aparecia fantasma por trás), anel com halo pulsando,
       check desenhado, textos em sequência e barra de progresso no lugar do spinner. */
    .success {
      background: var(--card);
      backdrop-filter: none; -webkit-backdrop-filter: none;
      gap: 0; padding: 2rem;
      animation: sucessoEntra .35s ease both;
    }
    @media (min-width: 1024px) {
      /* Mesma cor do painel: cobre só o formulário, mas sem borda visível. */
      .success { background: #f7f8fb; inset: -1.5rem; }
    }
    .success .ring {
      position: relative; width: 76px; height: 76px; margin-bottom: 1.4rem;
      background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--accent)));
      box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 35%, transparent);
      animation: anelEntra .55s cubic-bezier(.2, 1.4, .4, 1) .05s both;
    }
    .success .ring::before, .success .ring::after {
      content: ""; position: absolute; inset: 0; border-radius: inherit;
      border: 2px solid color-mix(in srgb, var(--accent) 60%, var(--primary));
      animation: halo 1.8s ease-out .5s infinite;
    }
    .success .ring::after { animation-delay: 1.4s; }
    .success .ring svg { width: 36px; height: 36px; }
    .success .ring svg path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: desenhaCheck .45s ease .45s forwards; }
    .success h3 { font-size: 1.25rem; letter-spacing: -.01em; animation: sobe .4s ease .55s both; }
    .success p { max-width: 20rem; margin-inline: auto; line-height: 1.5; animation: sobe .4s ease .68s both; }
    .success > .spin { display: none; }
    .success::after {
      content: ""; display: block; width: min(220px, 70%); height: 4px; margin-top: 1.6rem;
      border-radius: 4px;
      background:
        linear-gradient(90deg, var(--primary), var(--accent)) 0 0 / 0% 100% no-repeat,
        color-mix(in srgb, var(--primary) 12%, transparent);
      animation: sobe .4s ease .8s both, progresso 1.6s cubic-bezier(.4, 0, .2, 1) .9s forwards;
    }
    @keyframes sucessoEntra { from { opacity: 0; } to { opacity: 1; } }
    @keyframes anelEntra { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
    @keyframes desenhaCheck { to { stroke-dashoffset: 0; } }
    @keyframes halo { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
    @keyframes sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    @keyframes progresso { to { background-size: 100% 100%, auto; } }