/* ===== VARIABLES ===== */
    :root{
      --bg-1:#0f0c29;
      --bg-2:#1b2b4b;
      --bg-3:#0d1b2a;
      --card-bg:rgba(255,255,255,.08);
      --glass-border:rgba(255,255,255,.18);
      --text:#f0f8ff;
      --accent:#4facfe;
      --primary:#00f2fe;
      --error:#ff6b6b;
      --success:#2ecc71;
      --radius:20px;
      --shadow:0 8px 26px rgba(0,0,0,.35);
      --grad-btn:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);
    }

    /* ===== BASE ===== */
    *{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;}
    html,body{height:100%;}
    body{
      display:flex;flex-direction:column;align-items:center;
      background:linear-gradient(135deg,var(--bg-1),var(--bg-2),var(--bg-3));
      background-size:400% 400%;animation:bgMove 22s ease infinite;
      color:var(--text);overflow-x:hidden;
    }
    @keyframes bgMove{
      0%{background-position:0% 50%;}
      50%{background-position:100% 50%;}
      100%{background-position:0% 50%;}
    }

    /* ===== LOGO (cohérent) ===== */
    .logo{
      margin:1.6rem 0 .8rem;text-align:center;
      font-family:'Luckiest Guy',cursive;
      font-size:clamp(2rem,7vw,3.2rem);
      background:linear-gradient(90deg,#4facfe 0%,#00f2fe 100%);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      text-shadow:0 0 4px rgba(79,172,254,.4);
      filter:drop-shadow(1px 1px 3px rgba(0,0,0,.7));
    }

    /* ===== GLASS ===== */
    .glass{
      background:var(--card-bg);
      border:1px solid var(--glass-border);
      backdrop-filter:blur(14px) saturate(140%);
      -webkit-backdrop-filter:blur(14px) saturate(140%);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }

    /* ===== FORM BOX ===== */
    main{flex:1;width:100%;display:flex;justify-content:center;align-items:start;padding:0 1rem;}
    .form-box{
      width:100%;max-width:420px;margin-top:3vh;padding:2.2rem 1.9rem;
    }
    .form-box h2{
      text-align:center;font-size:1.9rem;margin-bottom:1.8rem;color:var(--accent);
    }

    /* ===== MESSAGES ===== */
    .message{font-weight:600;text-align:center;margin-bottom:1rem;}
    .message.error{color:var(--error);}
    .message.success{color:var(--success);}

    /* ===== INPUTS ===== */
    .field{margin-bottom:1.3rem;}
    label{display:block;font-size:.88rem;margin-bottom:.35rem;}
    input{
      width:100%;padding:.9rem 1rem;border:none;border-radius:var(--radius);
      background:rgba(255,255,255,.06);color:var(--text);
      outline:2px solid transparent;transition:outline-color .25s;
    }
    input::placeholder{color:#b3c2e0;}
    input:focus{outline-color:var(--accent);}

    /* ===== BUTTON ===== */
    .btn{
      width:100%;padding:.95rem 0;font-weight:700;font-size:1.05rem;border:none;
      border-radius:40px;cursor:pointer;background:var(--grad-btn);color:#0d1b2a;
      transition:transform .12s,box-shadow .12s;background-size:200% 100%;box-shadow:0 6px 18px rgba(0,0,0,.4);
    }
    .btn:hover{background-position:100% 0;}
    .btn:active{transform:scale(.97);}

    /* ===== BOTTOM LINKS ===== */
    .helper{margin-top:1.6rem;text-align:center;font-size:.88rem;color:#c0c8e4;}
    .helper a{color:var(--accent);text-decoration:none;}

    /* ===== FOOTER ===== */
    footer{padding:1.4rem 0;font-size:.8rem;color:#a0afd4;text-align:center;}

    @media(max-width:460px){
      .form-box{padding:1.9rem 1.25rem;margin-top:6vh;}
      .logo{font-size:2.4rem;}
    }