body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI";
  background:#0f172a;
  color:white;
}

/* APP CONTAINER */
.app{
  max-width:420px;
  margin:auto;
  padding:20px;
}

/* HEADER */
.header{
  text-align:center;
  margin-bottom:10px;
}

.header h1{
  color:#d4af37;
  font-size:20px;
}

/* PROGRESS */
.progress-bar{
  width:100%;
  height:5px;
  background:#1f2937;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:20px;
}

#progress{
  height:100%;
  width:0%;
  background:#d4af37;
  transition:0.3s;
}

/* STEPS */
.step{
  display:none;
  animation: fade 0.3s ease;
}

.step.active{
  display:block;
}

@keyframes fade{
  from{opacity:0; transform:translateX(20px);}
  to{opacity:1; transform:translateX(0);}
}

/* CARD UI */
.card{
  background:#111827;
  padding:15px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

/* INPUTS */
select{
  width:100%;
  padding:10px;
  margin-top:8px;
  border-radius:10px;
  border:none;
  outline:none;
}

/* RANGE UX */
.range-block{
  margin-top:20px;
}

.range-value{
  float:right;
  color:#d4af37;
  font-weight:bold;
}

input[type=range]{
  width:100%;
  margin-top:10px;
}

/* NAV */
.nav{
  display:flex;
  gap:10px;
  margin-top:20px;
}

button{
  flex:1;
  padding:12px;
  border:none;
  border-radius:12px;
  background:#d4af37;
  color:black;
  font-weight:bold;
  transition:0.2s;
}

button:active{
  transform:scale(0.97);
}

/* SUCCESS */
.hidden{
  display:none;
  text-align:center;
  margin-top:80px;
}

@keyframes shake{
  0%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  50%{transform:translateX(5px);}
  75%{transform:translateX(-5px);}
  100%{transform:translateX(0);}
}

/* erro visual */
input[style*="ff4d4d"],
select[style*="ff4d4d"]{
  transition:0.2s;
}