*{box-sizing:border-box;margin:0;padding:0}
  body{font-family:var(--font);color:var(--ink);background:var(--bg-alt);-webkit-font-smoothing:antialiased;
    min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none}
  svg{display:block}

  /* Logo fora do grid de 2 colunas, numa linha própria: dentro da coluna
     de mensagem ela ficava vertical-centralizada junto com o resto (regra
     do .shell abaixo) e, como essa coluna é mais curta que o card, a logo
     acabava bem mais baixa que o topo do card — parecia "sumida" do topo. */
  .logo-top{display:inline-block;margin-bottom:48px}

  /* Preloader de abertura — marca + linha de progresso sobre o fundo do
     app, curto (~1,3s), some com fade revelando a tela real por baixo. Só
     aqui (nunca dentro do painel — ver mockup "LunaPró — Loading
     Patterns"). pointer-events:none junto com o fade evita que o overlay,
     ainda semitransparente durante a transição, capture cliques que já
     deveriam ir pro formulário por baixo. */
  #preloader{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:22px;background:var(--bg-alt);opacity:1;transition:opacity .6s ease,transform .6s ease;pointer-events:auto}
  #preloader.done{opacity:0;transform:scale(1.06);pointer-events:none}
  #preloader .pl-logo{animation:pl-logo-in .9s cubic-bezier(.22,1,.36,1) both}
  @keyframes pl-logo-in{0%{opacity:0;transform:scale(.92)}60%{opacity:1;transform:scale(1.015)}100%{opacity:1;transform:scale(1)}}
  #preloader .pl-bar{width:130px;height:3px;border-radius:999px;background:#E4E2FA;overflow:hidden}
  #preloader .pl-bar span{display:block;height:100%;background:var(--violet);border-radius:999px;animation:pl-progress-fill 1.3s cubic-bezier(.4,0,.2,1) both}
  @keyframes pl-progress-fill{from{width:0%}to{width:100%}}

  .page{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:56px 24px}

  .page-inner{width:100%;max-width:1180px}

  .shell{width:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:stretch}

  /* Só os benefícios (não o título/texto) ficam colados na base do card:
     .marketing estica pra altura do card (align-items:stretch acima);
     .message leva margem automática dos dois lados, ficando centralizada
     no espaço ACIMA dos benefícios — mesma posição de antes, já que
     antes ela também centralizava sozinha; .benefits, sem margem extra,
     cai exatamente na base, na mesma altura onde o card termina. */
  .marketing{display:flex;flex-direction:column}
  .message{margin-top:auto;margin-bottom:auto}

  /* -------- Coluna esquerda: mensagem, sem card/fundo — só tipografia -------- */
  .headline{font-family:var(--font-display);font-size:clamp(1.7rem,2.6vw,1.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.22;margin:0 0 14px}

  .lede{font-size:15px;line-height:1.65;color:var(--ink-soft);max-width:36ch;margin-bottom:36px}

  /* Benefícios discretos: sem cards, sem fundo — só ícone + rótulo curto */
  .benefits{display:flex;flex-direction:column;gap:18px}
  .benefit{display:flex;align-items:center;gap:12px}
  .benefit svg{width:18px;height:18px;color:var(--violet-deep);flex-shrink:0}
  .benefit span{font-size:13.5px;color:var(--ink-soft)}

  /* -------- Coluna direita: quadrado de acesso — raio único, respiro igual
     nos 4 lados, cabeçalho centralizado. Largura travada em 420px (não
     "width:100%" da coluna): sem isso, em telas grandes a coluna do grid
     fica larga o bastante pra deixar o cartão quase quadrado/paisagem em
     vez do retângulo vertical esperado de um formulário de login. */
  .card{width:100%;max-width:420px;margin:0 auto;background:#fff;border-radius:24px;
    padding:40px;box-shadow:0 30px 60px -30px rgba(11,10,20,.22),0 1px 2px rgba(11,10,20,.04)}

  .card-head{text-align:center;margin-bottom:30px}

  h1{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
  .sub{font-size:14px;color:var(--ink-soft);margin-bottom:0}

  .field{margin-bottom:14px}
  .lbl-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
  .field label{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
  .lbl-row a{font-size:12.5px;font-weight:600;color:var(--violet-deep)}
  .lbl-row a:hover{text-decoration:underline}
  .field input{width:100%;font-family:inherit;font-size:14.5px;color:var(--ink);background-color:#F7F5FC;
    border:1.5px solid #EDEBF5;border-radius:12px;padding:13px 16px 13px 42px;transition:border-color .18s,box-shadow .18s,background-color .18s;
    background-repeat:no-repeat;background-position:16px center}
  .field input::placeholder{color:#9691AD}
  .field input:focus{outline:none;background-color:#fff;border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,246,.16)}
  .field input[aria-invalid="true"]{border-color:#E5484D}

  /* Ícones nos campos — SVG embutido via CSS, sem depender do componente
     React (que só sabe renderizar o <input> em si). */
  .field input#ea-email,.field input#cs-email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B5872' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 6c0-1.1-.9-2-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V6Z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E")}
  .field input#ea-senha,.field input#cs-senha{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B5872' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}
  .field input#cs-nome{padding-left:14px}

  .pw-wrap{position:relative}
  .pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;color:var(--ink-soft);
    font-size:12.5px;font-weight:700;padding:10px 10px;display:flex;align-items:center;border-radius:8px;min-height:40px}
  .pw-toggle:hover{color:var(--violet-deep)}

  .remember{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-soft);margin:4px 0 22px;cursor:pointer}
  .remember input{width:16px;height:16px;accent-color:var(--violet);cursor:pointer}

  .alert{display:none;align-items:flex-start;gap:10px;background:#FEF1F1;border:1px solid #F8D4D5;color:#B4292D;
    font-size:13.5px;line-height:1.5;padding:12px 14px;border-radius:11px;margin-bottom:20px}
  .alert.on{display:flex}
  .alert-success{background:#EFFBF3;border-color:#C7EFD5;color:#1C7A3E}

  .btn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;
    padding:14px;border-radius:12px;transition:background .2s,transform .15s}
  .btn:active{transform:scale(.99)}
  .btn-primary{background:var(--violet);color:#fff;box-shadow:0 8px 22px -9px rgba(139,92,246,.65)}
  .btn-primary:hover{background:var(--violet-deep)}
  .btn-primary:disabled{background:#C9C4DC;box-shadow:none;cursor:not-allowed}
  @keyframes spin{to{transform:rotate(360deg)}}
  .btn-spinner{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;animation:spin .7s linear infinite;flex-shrink:0}

  .turnstile-wrap{margin:4px 0 12px}

  .divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:#B9B5CC;font-size:12.5px;font-weight:600}
  .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

  .signup{text-align:center;font-size:14px;color:var(--ink-soft)}
  .signup a{color:var(--violet-deep);font-weight:700}

  /* Os dois avisos de rota alternativa (convite / revendedora) num único
     bloco, com o mesmo tratamento visual — evita duas variações pra um
     mesmo tipo de nota. */
  .hints{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
  .convite-hint{text-align:center;font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:0}
  .convite-hint a{color:var(--violet-deep);font-weight:700}
  .convite-hint a:hover{text-decoration:underline}

  /* .legal/.foot agora moram dentro do .page-inner, logo depois do .shell —
     ficam coladas à altura onde o card termina, em vez de grudadas no
     rodapé da janela (como eram antes, fora do bloco centralizado). */
  .legal{position:relative;text-align:center;font-size:12.5px;color:#9C98AE;margin-top:32px;padding:0 24px 8px}
  .legal a{color:var(--ink-soft);font-weight:600}
  .legal a:hover{color:var(--violet-deep)}

  .foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;padding:18px 24px 0;font-size:12.5px;color:#9C98AE}
  .foot-badge{display:inline-flex;align-items:center;gap:6px}
  .foot-badge svg{width:13px;height:13px}

  @media(max-width:900px){
    /* No celular/tablet em pé não há espaço (nem motivo) pra repetir o
       pitch de marketing acima do formulário — quem chega numa tela de
       login já decidiu entrar, só quer ver os campos. Fica só a logo (link
       de volta pra Landing) e o card de acesso, sem a coluna de texto. */
    .shell{grid-template-columns:1fr}
    .headline,.lede,.benefits{display:none}
    .logo-top{text-align:center;width:100%}
    .page{padding:28px 20px}
  }
  @media(max-width:520px){
    .card{padding:28px 22px}
    .foot{flex-direction:column;text-align:center}
  }

  /* Altura de viewport limitada (notebooks comuns em 1280x720/1366x768,
     tablets em paisagem, celulares) — o conteúdo do card (form + dicas +
     rodapé) é mais alto que essas janelas, forçando rolagem vertical
     mesmo quando a largura já tem espaço de sobra. Aperta o ritmo vertical
     pra caber sem cortar nada, em vez de depender só dos breakpoints de
     largura acima. */
  @media(max-height:900px){
    .logo-top{margin-bottom:10px}
    .page{padding:16px 24px}
    .shell{gap:32px}
    .headline{margin-bottom:6px}
    .lede{margin-bottom:14px}
    .benefits{gap:10px}
    .card{padding:24px}
    .card-head{margin-bottom:20px}
    .field{margin-bottom:10px}
    .btn{padding:11px}
    .turnstile-wrap{margin:2px 0 8px}
    .remember{margin:2px 0 12px}
    .divider{margin:12px 0}
    .hints{margin-top:12px;padding-top:12px;gap:8px}
    .legal{margin-top:16px;padding:0 24px 4px}
    .foot{padding:8px 24px}
  }

  /* Celulares de tela mais curta (ex: iPhone SE, Android compacto) — o
     card sozinho (sem a coluna de marketing, já escondida em max-width:900)
     ainda não cabe inteiro. Aperta mais uma vez em cima do bloco acima. */
  @media(max-height:700px){
    .logo-top{margin-bottom:8px}
    .page{padding:12px 20px}
    .card{padding:18px}
    .card-head{margin-bottom:16px}
    .field{margin-bottom:8px}
    .turnstile-wrap{margin:2px 0 6px}
    .remember{margin:2px 0 10px}
    .divider{margin:10px 0}
    .hints{margin-top:10px;padding-top:10px;gap:6px}
    .hints .convite-hint{font-size:12px}
    h1{font-size:1.3rem}
    .card-head{margin-bottom:12px}
    .legal{margin-top:10px;padding:0 20px 4px;font-size:11.5px}
    .foot{padding:6px 20px;font-size:11px}
    .foot-badge{display:none}
  }

  /* Telas realmente baixas (iPhone SE 1ª geração, janelas pequenas) — mais
     um degrau de aperto em cima do bloco acima. */
  @media(max-height:600px){
    .logo-top{margin-bottom:2px}
    .page{padding:3px 20px}
    .card{padding:12px}
    .card-head{margin-bottom:8px}
    .sub{margin-bottom:0}
    .field{margin-bottom:6px}
    .remember{margin:2px 0 8px}
    .divider{margin:8px 0}
    .hints{margin-top:8px;padding-top:8px;gap:4px}
    .hints .convite-hint{font-size:11px}
    h1{font-size:1.2rem}
    .legal{margin-top:6px;padding:0 20px 2px;font-size:10.5px}
    .foot{padding:2px 20px;font-size:10.5px}
  }


/* Classes extraídas de style="" inline (CSP style-src sem 'unsafe-inline') */
.icon-inline{flex-shrink:0;margin-top:1px}