:root{
      --brand:#1e40af; --brand-dark:#1e3a8a; --brand-2:#2563eb; --brand-3:#3b82f6;
      --ink:#0f172a; --muted:#64748b; --line:#e6e9f0; --soft:#eff4ff;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:'Sora',system-ui,sans-serif; color:var(--ink);
      background:#f4f6fb;
    }
    .auth{min-height:100vh; display:flex}

    /* ---------- Painel de marca (esquerda) ---------- */
    .auth-brand{
      flex:1.05; position:relative; overflow:hidden; color:#fff;
      padding:3.5rem 3rem;
      display:flex; flex-direction:column; justify-content:space-between;
      background:
        radial-gradient(1200px 500px at -10% -20%, rgba(96,165,250,.45), transparent 55%),
        radial-gradient(900px 600px at 110% 120%, rgba(37,99,235,.5), transparent 50%),
        linear-gradient(150deg,var(--brand-dark) 0%, var(--brand) 45%, #172a6b 100%);
    }
    .auth-brand .blob{position:absolute; border-radius:50%; filter:blur(6px); opacity:.35; pointer-events:none}
    .auth-brand .blob.b1{width:280px;height:280px;top:-70px;right:-60px;background:radial-gradient(circle at 30% 30%,#93c5fd,transparent 70%)}
    .auth-brand .blob.b2{width:220px;height:220px;bottom:40px;left:-50px;background:radial-gradient(circle at 30% 30%,#60a5fa,transparent 70%)}
    .auth-brand .grid-lines{
      position:absolute; inset:0; opacity:.10; pointer-events:none;
      background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
                       linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
      background-size:44px 44px; mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);
    }
    .brand-top{position:relative; display:flex; align-items:center; gap:.7rem; font-family:'Sora',sans-serif; font-weight:800; font-size:1.15rem; letter-spacing:.2px}
    .brand-mark{
      width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.4rem;
      background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
      box-shadow:0 8px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3);
    }
    .brand-mid{position:relative; max-width:420px}
    .brand-mid h1{font-family:'Sora',sans-serif; font-weight:800; font-size:2.5rem; line-height:1.1; margin:0 0 .8rem}
    .brand-mid p{font-size:1.02rem; color:rgba(255,255,255,.82); line-height:1.6; margin:0}
    .brand-features{position:relative; list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:.9rem}
    .brand-features li{display:flex; align-items:center; gap:.75rem; font-size:.95rem; color:rgba(255,255,255,.92)}
    .brand-features i{
      width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:1rem;
      background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
    }
    .brand-foot{position:relative; font-size:.82rem; color:rgba(255,255,255,.6)}

    /* ---------- Painel do formulário (direita) ---------- */
    .auth-form{
      flex:.95; display:flex; align-items:center; justify-content:center;
      padding:2rem 1.25rem;
    }
    .form-inner{width:100%; max-width:380px; animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
    @keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

    .mobile-logo{
      display:none; width:56px;height:56px;border-radius:16px;margin:0 auto 1.1rem;
      place-items:center; font-size:1.6rem; color:#fff;
      background:linear-gradient(150deg,var(--brand),var(--brand-2));
      box-shadow:0 12px 28px rgba(30,64,175,.4);
    }
    .form-inner h2{font-family:'Sora',sans-serif; font-weight:700; font-size:1.7rem; margin:0 0 .35rem}
    /* título: desktop mostra "Bem-vindo de volta"; mobile mostra "Voto Certo" */
    .form-inner h2.t-mobile{display:none}
    .form-inner .sub{color:var(--muted); font-size:.95rem; margin:0 0 1.75rem}

    .alert-erro{
      display:flex; align-items:center; gap:.55rem;
      background:#fef2f2; color:#b91c1c; border:1px solid #fecaca;
      padding:.7rem .85rem; border-radius:12px; font-size:.9rem; margin-bottom:1.25rem;
    }

    .field{margin-bottom:1.1rem}
    .field label{display:block; font-weight:600; font-size:.85rem; margin-bottom:.4rem; color:#334155}
    .control{position:relative}
    .control > i.lead{position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:1.05rem; pointer-events:none}
    .control input{
      width:100%; height:50px; border:1.5px solid var(--line); border-radius:13px;
      padding:0 2.8rem 0 2.7rem; font-size:.9rem; color:var(--ink); background:#fff;
      transition:border-color .15s, box-shadow .15s, background .15s;
      font-family:'Sora',sans-serif; font-weight:500;
    }
    .control input::placeholder{color:#aab2c0}
    .control input:focus{
      outline:none; border-color:var(--brand-2);
      box-shadow:0 0 0 4px rgba(37,99,235,.14); background:#fff;
    }
    .control input:focus + i.lead, .control:focus-within > i.lead{color:var(--brand-2)}
    .toggle-senha{
      position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
      border:none; background:transparent; color:#94a3b8; width:38px;height:38px;
      border-radius:9px; cursor:pointer; display:grid; place-items:center; font-size:1.05rem;
    }
    .toggle-senha:hover{color:var(--brand-2); background:var(--soft)}

    .btn-entrar{
      width:100%; height:50px; border:none; border-radius:13px; cursor:pointer;
      font-family:'Inter',sans-serif; font-weight:600; font-size:1rem; color:#fff;
      display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:.35rem;
      background:linear-gradient(135deg,var(--brand-2),var(--brand));
      box-shadow:0 10px 24px rgba(30,64,175,.35);
      transition:transform .12s, box-shadow .15s, filter .15s;
    }
    .btn-entrar:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(30,64,175,.45); filter:brightness(1.05)}
    .btn-entrar:active{transform:translateY(0)}

    .form-foot{text-align:center; color:#94a3b8; font-size:.8rem; margin-top:1.6rem}

    /* ---------- Responsivo ---------- */
    @media (max-width:991px){
      .auth-brand{display:none}
      .auth-form{flex:1}
      .mobile-logo{display:grid}
      .form-inner h2, .form-inner .sub{text-align:center}
      .form-inner h2.t-desktop{display:none}
      .form-inner h2.t-mobile{display:block; color:var(--brand);}
    }