:root{
      --red:#E50914;      /* vermelho vivo */
      --yellow:#F5C518;   /* amarelo destaque */
      --blue:#0A84FF;     /* azul elegante */
      --ink:#0f172a;      /* slate-900 */
      --ink-2:#1e293b;    /* slate-800 */
      --muted:#94a3b8;    /* slate-400 */
      --card: rgba(255,255,255,.08);
      --glass: rgba(255,255,255,.12);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      color:#fff; background: radial-gradient(1200px 800px at 10% 10%, rgba(229,9,20,.35), transparent 60%),
                   radial-gradient(1000px 600px at 90% 90%, rgba(10,132,255,.30), transparent 60%),
                   linear-gradient(120deg, #0b1022, #0e142b);
      overflow:auto;
    }
    .bg{position:fixed; inset:0; background:url('assets/login-bg.jpg') center/cover no-repeat; filter:brightness(.6) saturate(1.1); opacity:.25;}
    .wrap{position:relative; min-height:100%; display:grid; place-items:center; padding:24px}
    .card{width:100%; max-width:960px; display:grid; grid-template-columns: 1.1fr 0.9fr; gap:24px; padding:24px; border-radius:24px; background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); backdrop-filter: blur(16px); box-shadow: 0 20px 60px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14)}
    .left{position:relative; overflow:hidden; border-radius:20px; background:linear-gradient(135deg, rgba(245,197,24,.15), rgba(229,9,20,.12)); border:1px solid rgba(245,197,24,.25)}
    .left .cover{position:absolute; inset:0; background:url('GI.jpg') center/cover no-repeat; filter:saturate(1.05) contrast(1.05); opacity:.9}
    .left .overlay{position:absolute; inset:0; background: radial-gradient(600px 400px at 20% 20%, rgba(245,197,24,.18), transparent 60%), radial-gradient(800px 600px at 80% 80%, rgba(10,132,255,.18), transparent 60%);}    
    .branding{position:absolute; left:18px; bottom:18px; display:flex; align-items:center; gap:12px;}
    .logo{width:150px; height:150px; border-radius:12px; background:linear-gradient(135deg,var(--red),var(--yellow)); display:grid; place-items:center; box-shadow:0 6px 18px rgba(229,9,20,.45)}
    .logo svg{width:26px; height:26px; fill:#fff}
    .brand-text{line-height:1.1}
    .brand-text b{font-size:18px}
    .brand-text span{display:block; font-size:12px; color:#e2e8f0}

    .right{padding:20px}
    .tabs{display:flex; gap:12px; margin-bottom:16px}
    .tab{flex:1; text-align:center; padding:12px 14px; border-radius:14px; cursor:pointer; user-select:none; font-weight:600; letter-spacing:.2px; border:1px solid transparent}
    .tab.active{background:linear-gradient(180deg, rgba(10,132,255,.24), rgba(10,132,255,.14)); border-color:rgba(10,132,255,.45)}
    .tab:not(.active){background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12)}

    form{display:grid; gap:12px; }
    .field{position:relative}
    .field input{width:100%; padding:14px 16px 14px 44px; border-radius:14px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; outline:none; font-size:15px}
    .field input::placeholder{color:#cbd5e1}
    .field svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; fill:#e2e8f0; opacity:.9}

    .actions{display:grid; gap:12px; margin-top:6px}
    .btn{padding:12px 14px; font-weight:700; border:none; border-radius:14px; cursor:pointer; letter-spacing:.3px}
    .btn-primary{background: linear-gradient(135deg, var(--blue), #66aaff)}
    .btn-primary:hover{filter:brightness(1.05)}

    .btn-google{display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:#111; border:1px solid #e5e7eb}
    .btn-google img{width:20px; height:20px}

    .meta{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#e2e8f0}
    .link{color:var(--yellow); text-decoration:none}

    .alert{padding:12px 14px; border-radius:12px; background:rgba(229,9,20,.15); border:1px solid rgba(229,9,20,.35); color:#fecaca}
    .ok{padding:12px 14px; border-radius:12px; background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.35); color:#d1fae5}

    .divider{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; color:#cbd5e1; font-size:13px}
    .divider::before,.divider::after{content:""; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.4), rgba(255,255,255,.0))}

    footer{margin-top:16px; font-size:12px; color:#94a3b8}

    @media (max-width: 900px){
      .card{grid-template-columns:1fr}
      .left{min-height:220px}
    }