:root{
    --grafite:#171717;
    --grafite-2:#101010;
    --preto:#000000;
    --off-white:#EEEEEE;
    --branco:#FFFFFF;
    --yellow-1:#EFDC38;
    --yellow-2:#F7FF3F;
    --muted:#8A8A8A;
    --erro:#FF6B5E;
    --font: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
  }

  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;}

  body{
    font-family:var(--font);
    color:var(--off-white);
    background:var(--preto);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow-x:hidden;
    position:relative;
  }

  /* =====================================================================
     PALCO — fundo em grafite/preto dividido por duas curvas suaves
     (canto superior direito e inferior esquerdo), na lógica visual do
     manual de marca (grafite/preto + amarelo).

     A "folha" (área preenchida) e a costura amarela usam EXATAMENTE o
     mesmo path do SVG — por isso ficam sempre alinhadas, em qualquer
     resolução, sem blur. O brilho ao redor da costura é o próprio path
     com stroke largo e opacidade baixa (sem filtro = nítido).
     Por cima, um feixe mais claro percorre a curva em loop.
     ===================================================================== */
  .palco{
    position:fixed;
    inset:0;
    z-index:0;
    background:
      radial-gradient(ellipse 60% 50% at 50% 42%, rgba(255,255,255,.035) 0%, transparent 60%),
      linear-gradient(150deg, #141414 0%, #0b0b0b 55%, var(--preto) 100%);
  }

  .palco svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
  }

  /* IMPORTANTE (bug corrigido): o <use> clona o path original JUNTO com
     a classe dele — se o path fonte tiver classe de estilo, todos os
     clones herdam esse estilo e ignoram o próprio. Por isso a geometria
     das curvas vive em <defs> SEM classe, e cada camada (halo, linha,
     feixe) é um <use> com a sua própria classe. */

  /* Brilho suave ao redor da costura */
  .costura-halo{
    fill:none;
    stroke:var(--yellow-1);
    stroke-width:6;
    stroke-linecap:round;
    opacity:.06;
  }

  /* Linha fixa da divisa — fina e discreta */
  .costura{
    fill:none;
    stroke:var(--yellow-1);
    stroke-width:1;
    stroke-linecap:round;
    opacity:.35;
  }

  /* Feixe animado — amarelo vivo com brilho, percorrendo a costura */
  .feixe{
    fill:none;
    stroke:var(--yellow-2);
    stroke-width:1.6;
    stroke-linecap:round;
    filter:drop-shadow(0 0 5px rgba(247,255,63,.9)) drop-shadow(0 0 14px rgba(239,220,56,.55));
  }

  @media (prefers-reduced-motion: no-preference){
    .feixe-1{ stroke-dasharray:90 1500; animation:percorrer-1 8s linear infinite; }
    .feixe-2{ stroke-dasharray:60 800; animation:percorrer-2 6.5s linear infinite; animation-delay:-2.5s; }
    @keyframes percorrer-1{ to{ stroke-dashoffset:-1590; } }
    @keyframes percorrer-2{ to{ stroke-dashoffset:-860; } }
  }
  @media (prefers-reduced-motion: reduce){
    .feixe{ opacity:.55; }
  }

  /* =====================================================================
     CONTEÚDO
     ===================================================================== */
  .conteudo{
    position:relative;
    z-index:1;
    width:100%;
    max-width:404px;
    padding:40px 20px;
  }

  .marca{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:40px;
  }
  .marca img{ height:48px; width:auto; display:block; }

  /* ---------- Cartão ---------- */
  .cartao{
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.09);
    border-radius:20px;
    padding:36px 32px 32px;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 24px 60px rgba(0,0,0,.45);
  }

  .cartao-titulo{
    font-size:21px;
    font-weight:600;
    color:var(--branco);
    text-align:center;
    letter-spacing:-.01em;
    margin-bottom:6px;
  }
  .cartao-desc{
    font-size:13px;
    color:var(--muted);
    text-align:center;
    line-height:1.5;
    margin-bottom:28px;
  }

  .mensagem-erro{
    display:none;
    align-items:flex-start;
    gap:8px;
    background:rgba(255,107,94,.09);
    border:1px solid rgba(255,107,94,.35);
    color:#FFB3AA;
    font-size:12.5px;
    line-height:1.5;
    border-radius:10px;
    padding:11px 13px;
    margin-bottom:20px;
  }
  .mensagem-erro.visivel{ display:flex; }

  .campo{ margin-bottom:16px; }
  .campo label{
    display:block;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#9a9a9a;
    margin-bottom:7px;
  }

  /* Campo com "cantos de mira" — some no repouso, aparece no foco:
     um pequeno detalhe de leitura/sensor que remete à robótica sem
     virar decoração gratuita. */
  .campo-mira{ position:relative; }
  .campo-mira::before, .campo-mira::after,
  .campo-mira .canto-br, .campo-mira .canto-bl{
    content:"";
    position:absolute;
    width:9px; height:9px;
    border:1.5px solid var(--yellow-1);
    opacity:0;
    transition:opacity .18s ease;
    pointer-events:none;
  }
  .campo-mira::before{ top:-4px; left:-4px; border-right:none; border-bottom:none; }
  .campo-mira::after{ top:-4px; right:-4px; border-left:none; border-bottom:none; }
  .campo-mira .canto-bl{ bottom:-4px; left:-4px; border-right:none; border-top:none; }
  .campo-mira .canto-br{ bottom:-4px; right:-4px; border-left:none; border-top:none; }
  .campo-mira:focus-within::before, .campo-mira:focus-within::after,
  .campo-mira:focus-within .canto-bl, .campo-mira:focus-within .canto-br{ opacity:1; }

  .campo input{
    width:100%;
    border:1.5px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    border-radius:10px;
    padding:12px 14px;
    font-family:var(--font);
    font-size:14.5px;
    color:var(--off-white);
    transition:border-color .15s ease, background .15s ease;
  }
  .campo input::placeholder{ color:#5f5f5f; }
  .campo input:focus{
    outline:none;
    border-color:rgba(239,220,56,.6);
    background:rgba(255,255,255,.06);
  }

  .campo-senha-wrap{ position:relative; }
  .btn-ver-senha{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:#6f6f6f;
    font-size:12px;
    font-family:var(--font);
    cursor:pointer;
    padding:6px 8px;
  }
  .btn-ver-senha:hover{ color:var(--off-white); }

  .btn-entrar{
    width:100%;
    border:none;
    border-radius:10px;
    background:linear-gradient(135deg, var(--yellow-1), var(--yellow-2));
    color:var(--preto);
    font-family:var(--font);
    font-weight:700;
    font-size:14.5px;
    letter-spacing:.02em;
    padding:13px;
    cursor:pointer;
    margin-top:6px;
    transition:transform .08s ease, box-shadow .15s ease;
  }
  .btn-entrar:hover:not(:disabled){ box-shadow:0 6px 18px rgba(239,220,56,.28); }
  .btn-entrar:active:not(:disabled){ transform:translateY(1px); }
  .btn-entrar:disabled{ opacity:.5; cursor:not-allowed; }
  .btn-entrar:focus-visible{ outline:2px solid var(--branco); outline-offset:2px; }

  .rodape-form{
    margin-top:20px;
    font-size:11.5px;
    color:#6a6a6a;
    text-align:center;
    line-height:1.6;
  }

  .rodape-marca{
    text-align:center;
    margin-top:28px;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#4d4d4d;
  }

  @media (max-width:460px){
    .cartao{ padding:28px 22px 24px; }
  }