:root{
  --bg:#090312;
  --bg2:#140520;

  --card:rgba(18,8,32,0.72);

  /* Violet principal du nouveau logo */
  --purple:#a855f7;
  --purple2:#d18bff;

  /* Accent rose/violet */
  --pink:#ff4df0;
  --pink2:#ff8cf7;

  /* Accent or */
  --gold:#ffb547;
  --gold2:#ffd36b;

  /* États */
  --success:#7dffb0;
  --success2:#41f28a;

  --error:#ff6b9f;
  --error2:#ff9bc0;

  --text:#f7f2ff;
  --muted:#b8a9d6;

  --border:rgba(255,255,255,0.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(130,50,255,0.35) 0%,
      rgba(25,5,40,1) 40%
    ),
    linear-gradient(
      180deg,
      var(--bg) 0%,
      var(--bg2) 100%
    );

  position:relative;
}

body::before{
  content:"";

  position:absolute;

  width:700px;
  height:700px;

  background:
    radial-gradient(circle,
      rgba(168,85,247,0.22) 0%,
      rgba(255,77,240,0.12) 28%,
      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,0.06) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  opacity:.22;

  z-index:0;
}

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

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

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

.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(209,139,255,0.15);

  backdrop-filter:blur(20px);

  box-shadow:
    0 10px 40px rgba(0,0,0,.5),
    0 0 40px rgba(168,85,247,.12),
    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(168,85,247,.45);
}

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

  margin-bottom:10px;

  letter-spacing:-0.7px;

  color:var(--purple2);

  text-shadow:
    0 0 14px rgba(209,139,255,.25);
}

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:white;

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

  background:
    linear-gradient(
      135deg,
      var(--purple),
      var(--pink)
    );

  box-shadow:
    0 12px 30px rgba(168,85,247,.28);
}

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

  box-shadow:
    0 18px 38px rgba(168,85,247,.4);
}

/* SUCCESS */

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

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

  color:#041122;

  box-shadow:
    0 10px 24px rgba(65,242,138,.25);
}

/* 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,159,.25);
}