/* Roxo mais escuro que o padrão — diferencia visualmente do login da
     loja (/entrar), decisão de marca deliberada, não deriva. */
  :root{
    --violet:#7C3AED; --violet-deep:#581C87; --violet-soft:#F1ECFE;
  }
  *{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}

  /* position:fixed (não absolute) — prende os círculos decorativos à janela
     visível, não ao documento. Com absolute, um -260px de deslocamento
     negativo soma altura extra rolável abaixo do conteúdo de verdade em
     qualquer tela mais estreita que o conteúdo (celular, tablet em pé) —
     sobrava uma faixa vazia no fim da página ao rolar. */
  body::before{content:"";position:fixed;top:-220px;right:-160px;width:640px;height:640px;border-radius:50%;
    background:radial-gradient(circle,rgba(124,58,237,.14),transparent 68%);pointer-events:none;z-index:-1}
  body::after{content:"";position:fixed;bottom:-260px;left:-200px;width:600px;height:600px;border-radius:50%;
    background:radial-gradient(circle,rgba(88,28,135,.11),transparent 68%);pointer-events:none;z-index:-1}

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

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

  .logo-top{display:inline-block;margin-bottom:24px}

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

  /* -------- Coluna esquerda: o que o portal oferece -------- */
  .chip{display:inline-flex;align-items:center;gap:8px;background:var(--violet-soft);color:var(--violet-deep);
    font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:999px;
    margin-bottom:14px}

  .headline{font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.16;margin-bottom:10px}

  .lede{font-size:14.5px;line-height:1.55;color:var(--ink-soft);max-width:46ch;margin-bottom:20px}

  .benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .benefit{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
  .benefit-icon{width:32px;height:32px;border-radius:9px;background:var(--violet-soft);color:var(--violet-deep);
    display:flex;align-items:center;justify-content:center;margin-bottom:9px}
  .benefit-icon svg{width:17px;height:17px}
  .benefit h3{font-family:var(--font-display);font-size:14px;font-weight:600;margin-bottom:4px;letter-spacing:-.01em}
  .benefit p{font-size:12.5px;line-height:1.45;color:var(--ink-soft)}

  /* -------- Coluna direita: card de acesso -------- */
  /* Largura travada (não "width:100%" da coluna): sem isso, em telas
     largas 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 (mesmo ajuste já usado em /entrar). */
  .card{width:100%;max-width:420px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;
    padding:34px 34px;box-shadow:0 24px 60px -32px rgba(11,10,20,.24)}

  .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-deep);margin-bottom:8px}

  h1{font-family:var(--font-display);font-size:1.45rem;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
  .sub{font-size:13.5px;color:var(--ink-soft);margin-bottom:16px}

  .field{margin-bottom:12px}
  .lbl-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
  .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:var(--violet-soft);
    border:1.5px solid transparent;border-radius:11px;padding:12px 14px 12px 42px;transition:border-color .18s,box-shadow .18s,background-color .18s;
    background-repeat:no-repeat;background-position:14px 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(124,58,237,.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{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='M4 4h16v16H4z' opacity='0'/%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#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 14px;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(124,58,237,.65)}
  .btn-primary:hover{background:var(--violet-deep)}
  .btn-primary:disabled{background:#C9C4DC;box-shadow:none;cursor:not-allowed}

  .convite-hint{text-align:center;font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin-top:14px;
    padding-top:14px;border-top:1px solid var(--line)}

  .legal{position:relative;text-align:center;font-size:12.5px;color:#9C98AE;margin-top:20px;padding:0 24px 6px}
  .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:10px 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){
    .shell{grid-template-columns:1fr;gap:36px}
    .benefits{grid-template-columns:1fr 1fr}
    .page{padding:32px 20px}
  }
  @media(max-width:520px){
    .card{padding:28px 22px}
    .benefits{grid-template-columns:1fr}
    .headline{font-size:1.7rem}
    .foot{flex-direction:column;text-align:center}
  }


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