:root{
  --bg:#041320;
  --bg2:#07273d;

  --card:rgba(5,22,38,.72);

  /* Couleurs principales */
  --cyan:#00d9ff;
  --cyan2:#6ff7ff;

  /* Accent turquoise */
  --turquoise:#00e6c7;
  --turquoise2:#6fffe8;

  /* Accent sable */
  --gold:#ffd36b;
  --gold2:#ffe8a8;

  /* États */
  --success:#47ffbe;
  --success2:#16e7a3;

  --error:#ff6b87;
  --error2:#ff98ad;

  --text:#f4fdff;
  --muted:#b6d9e8;

  --border:rgba(255,255,255,.08);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  width:100%;
  height:100%;
}

body{
  font-family:
    Inter,
    system-ui,
    sans-serif;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--text);

  background:
    radial-gradient(
      circle at top,
      rgba(0,217,255,.30) 0%,
      rgba(5,34,56,1) 45%
    ),
    linear-gradient(
      180deg,
      var(--bg) 0%,
      var(--bg2) 100%
    );

  position:relative;
}

body::before{
  content:"";

  position:absolute;

  width:720px;
  height:720px;

  background:
    radial-gradient(
      circle,
      rgba(0,217,255,.20) 0%,
      rgba(0,230,199,.12) 35%,
      transparent 72%
    );

  filter:blur(80px);

  animation:float 8s ease-in-out infinite;

  z-index:0;
}

/* Texture fond */

body::after{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    radial-gradient(
      rgba(255,255,255,.05) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  opacity:.22;

  z-index:0;
}

@keyframes float{
  0%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-24px);
  }

  100%{
    transform:translateY(0);
  }
}

.card{
  position:relative;
  z-index:2;

  width:min(520px,92vw);

  padding:42px;

  border-radius:26px;

  text-align:center;

  background:var(--card);

  border:1px solid rgba(111,247,255,.15);

  backdrop-filter:blur(20px);

  box-shadow:
    0 12px 40px rgba(0,0,0,.55),
    0 0 45px rgba(0,217,255,.10),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.logo{
  width:92px;
  height:92px;

  object-fit:cover;

  border-radius:22px;

  margin-bottom:18px;

  box-shadow:
    0 0 35px rgba(0,217,255,.45);
}

h1{
  font-size:30px;
  font-weight:800;

  margin-bottom:10px;

  letter-spacing:-0.7px;

  color:var(--cyan2);

  text-shadow:
    0 0 18px rgba(111,247,255,.35);
}

p{
  color:var(--muted);

  font-size:15px;

  line-height:1.6;

  margin-bottom:28px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:190px;

  padding:14px 28px;

  border-radius:16px;

  text-decoration:none;

  font-weight:800;
  font-size:15px;

  transition:.25s ease;

  color:#03263b;

  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      135deg,
      var(--cyan),
      var(--turquoise)
    );

  box-shadow:
    0 12px 30px rgba(0,217,255,.28);
}

.btn:hover{
  transform:
    translateY(-3px)
    scale(1.03);

  box-shadow:
    0 18px 40px rgba(0,217,255,.42);
}

.btn:active{
  transform:scale(.98);
}

/* SUCCESS */

.success h1{
  color:var(--success);
}

.success .btn{
  background:
    linear-gradient(
      135deg,
      var(--success),
      var(--success2)
    );

  color:#03291d;

  box-shadow:
    0 10px 24px rgba(22,231,163,.28);
}

/* ERROR */

.error h1{
  color:var(--error);
}

.error .btn{
  background:
    linear-gradient(
      135deg,
      var(--error),
      var(--error2)
    );

  color:white;

  box-shadow:
    0 10px 24px rgba(255,107,135,.25);
}