:root{
      --primary: hsl(210 100% 45%);
      --primary-2: hsl(210 100% 40%);
      --secondary: hsl(186 74% 44%);
      --muted: hsl(210 40% 96%);
      --muted-fg: hsl(215.4 16.3% 26.9%);
      --border: hsl(214 32% 91%);
      --radius: 12px;
    }
    *{box-sizing:border-box}
    body{
      margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      background: linear-gradient(180deg,#fff,hsl(210 40% 98%)); color:hsl(222.2 84% 4.9%);
    }

    /* Bolhas de fundo (suave) */
    .decor{position:absolute;inset:0;pointer-events:none;overflow:hidden}
    .bubble{position:absolute;border-radius:999px;background:radial-gradient(circle at 30% 30%, #e6f0ff, transparent 60%);opacity:.55;filter:blur(2px)}
    .bubble.b1{width:520px;height:520px;left:-160px;top:-140px}
    .bubble.b2{width:420px;height:420px;right:-140px;bottom:8%}

    .container{max-width:1200px;margin:0 auto;padding:48px 16px;position:relative;z-index:1}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;min-height:calc(100vh - 96px);align-items:center}
    @media (max-width:1024px){ .grid{grid-template-columns:1fr;gap:24px} }

    /* Coluna esquerda (desktop) */
    .brand{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
    .logo-box{
      width:96px;height:96px;border-radius:24px;background:#fff;
      display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.12);
    }
    .logo-box img{max-width:64px;height:auto}
    .brand h1{font-size:42px;margin:10px 0 0;line-height:1.1}
    .brand h1 .sec{color:var(--secondary)}
    .brand h2{margin:6px 0 0;font-size:18px;font-weight:700}
    .brand p{max-width:620px;margin:10px 0 0;font-size:18px;color:var(--muted-fg);line-height:1.6}
    .brand p .hl{color:var(--secondary);font-weight:600}

    /* Card de login (desktop + mobile) */
    .card{
      width:100%;max-width:460px;margin:0 auto;background:#fff;border:1px solid var(--border);
      border-radius:18px;padding:28px;box-shadow:0 18px 50px rgba(0,0,0,.12);
    }
    .card h2{margin:0 0 6px;text-align:center;font-size:28px}
    .card .sub{text-align:center;color:var(--muted-fg);margin-bottom:18px}

    .label{display:block;margin:12px 0 6px;font-size:14px}
    .field{position:relative}
    .input{
      width:100%;padding:12px 14px 12px 42px;border-radius:12px;border:1px solid var(--border);outline:none;
      background:#f8fafc;
    }
    .input:focus{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px hsl(210 100% 45% / .18)}
    .icon{
      position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;opacity:.6
    }
    .eye{
      position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;opacity:.7
    }

    .row{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
    .keep{display:flex;align-items:center;gap:8px;font-size:14px}
    .keep input{margin:0}
    .row a{font-size:14px;color:var(--primary);text-decoration:none}

    .btn{
      margin-top:16px;width:100%;padding:12px;border-radius:12px;border:0;
      background:var(--primary);color:#fff;font-weight:600;font-size:15px;cursor:pointer;
      transition:filter .15s ease, transform .15s ease;
    }
    .btn:hover{filter:brightness(1.02);transform:translateY(-1px)}

    .sep{margin:16px 0 12px;border:0;border-top:1px solid var(--border)}
    .secure{color:var(--muted-fg);text-align:center;font-size:13px}
    .secure .top{display:flex;justify-content:center;gap:8px;align-items:center;margin-bottom:4px}

    /* Cabeçalho mobile dentro do card */
    .m-header{display:none}
    @media (max-width:1024px){
      .brand{display:none}                 /* oculta coluna esquerda no mobile */
      .card{max-width:520px}
      .m-header{display:block;text-align:center;margin:-4px 0 12px}
      .m-header .logo-mini{display:flex;justify-content:center;margin-bottom:10px}
      .m-header .logo-box{width:72px;height:72px;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.12)}
      .m-header .logo-box img{max-width:48px}
      .m-header .title{font-size:22px;margin:0}
      .m-header .title .sec{color:var(--secondary)}
      .card h2{display:none}               /* esconder “Bem-vindo” no mobile */
      .card .sub{display:none}             /* e usar o texto abaixo do título mobile */
      .m-sub{color:var(--muted-fg);margin-top:6px}
    }