:root{
      --bg:#06194b;             /* azul escuro do painel esquerdo */
      --bg-2:#171c27;           /* variação para gradiente */
      --primary:#3c85aa;        /* acento (foco, links) */
      --text:#e8eefb;           /* texto claro */
      --muted:#9bb0db;          /* texto auxiliar */
      --btn:#ffffff;            /* botão claro */
      --btn-text:#0a1a49;       /* texto do botão */
      --field:#9bb4ee;          /* linha do input */
      --radius:14px;
      --shadow:0 12px 30px rgba(0,0,0,.24);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; color:#111;
      background:#000; overflow:hidden;
    }

    .split{
      position:relative; display:grid; grid-template-columns:minmax(560px,880px) 1fr; height:100vh; width:100vw;
    }

    /* --- PAINEL ESQUERDO --- */
    .left{
      position:relative; z-index:2; padding:40px 36px; display:flex; flex-direction:column; justify-content:space-between; 
      color:var(--text); background:linear-gradient(160deg, var(--bg) 0%, var(--bg) 55%, var(--bg-2) 100%);
      clip-path:polygon(0 0, 92% 0, 72% 100%, 0 100%); /* cria o corte diagonal do exemplo */
    }
    .brand{display:flex; align-items:center; gap:14px}
    .brand img{height:34px; width:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.2))}
    .brand .title{font-weight:700; font-size:20px}
    .brand small{display:block; color:var(--muted); font-weight:500}

    .login-card{max-width:420px; margin-top:6vh}
    .login-card h2{margin:0 0 8px; font-size:22px; font-weight:700}
    .login-card p{margin:0 0 24px; color:var(--muted)}

    .field{position:relative; margin-bottom:18px}
    .field input{width:100%; padding:18px 46px 18px 16px; border:none; outline:none; border-radius:10px; background:rgba(255,255,255,.08); color:#fff; font-size:16px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); transition:box-shadow .2s ease, background .2s ease}
    .field input::placeholder{color:rgba(255,255,255,.65)}
    .field input:focus{box-shadow:inset 0 0 0 2px #ffffff; background:rgba(255,255,255,.12)}
    .field label{position:absolute; left:14px; top:-10px; font-size:12px; color:var(--muted); background:linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%); padding:0 6px; border-radius:6px}

    .btn{
      appearance:none; border:0; border-radius:12px; padding:14px 18px; font-weight:700; font-size:15px; cursor:pointer;
      background:var(--btn); color:var(--btn-text); width:100%; box-shadow:var(--shadow); transition:transform .08s ease, box-shadow .2s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:active{transform:translateY(0); box-shadow:0 4px 12px rgba(0,0,0,.18)}

    .foot{color:var(--muted); font-size:12px; opacity:.9}

    /* --- LADO DIREITO: SLIDES --- */
    .right{position:fixed; inset:0; overflow:hidden; z-index:1; background:#000}
    .slides{position:absolute; inset:0; pointer-events:none}
    .slide{
      position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 900ms ease;
      transform:scale(1.02);
    }
    .slide.active{opacity:1}

    .caption{
      position:absolute; right:24px; bottom:20px; padding:10px 14px; border-radius:999px; backdrop-filter:blur(6px);
      background:rgba(0,0,0,.35); color:#fff; font-size:14px; letter-spacing:.2px;
    }

    /* --- Dots de paginação --- */
    .dots{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:flex; gap:8px; z-index:3}
    .dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer}
    .dot.active{background:#fff; width:9px; height:9px}

    /* --- Responsivo --- */
    @media (max-width: 940px){
      .split{grid-template-columns:1fr}
      .left{clip-path:none}
      .right{display:none}
      body{overflow:auto}
    }