body{
  margin:0;
  font-family:Arial;
  background:#090909;
  color:rgba(236, 9, 9, 0.5);
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

.app{
  width:100%;
  max-width:400px;
  padding:20px;
}

h1{
  text-align:center;
  margin-bottom:20px;
}

/* CARD avec vraie bordure */
.card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(253, 6, 6, 0.219);
  padding:20px;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
  backdrop-filter:blur(10px);
}

/* INPUT RANGE */
input[type="range"]{
  width:100%;
  margin-top:10px;
  accent-color:#f104046d;
}

/* INPUT NUMBER */
input[type="number"]{
  width:100%;
  margin-top:10px;
  padding:10px;
  border-radius:12px;

  background:rgba(0,0,0,0.3);
  color:rgba(248, 5, 5, 0.443);

  border:1px solid rgba(250, 7, 7, 0.265);
  outline:none;
}

/* BOUTONS AVEC BORDURE */
button{
  width:100%;
  margin-top:10px;
  padding:12px;
  border-radius:12px;

  background:transparent;
  color:rgba(246, 7, 7, 0.384);
  font-weight:bold;

  border:1px solid rgba(237, 9, 9, 0.363);

  transition:0.2s ease;
}

/* hover stylé */
button:hover{
  background:#de8b0d;
  border-color:#de8b0d;
  transform:scale(1.02);
}

/* RESULT */
.result{
  margin-top:15px;
  padding:15px;

  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.12);

  border-radius:12px;
  word-break:break-all;
  text-align:center;
  font-size:16px;
}