body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
  color:#fff;
}

.container {
  max-width:1100px;
  margin:40px auto;
  padding:20px;
}

.card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(15px);
  border-radius:20px;
  padding:25px;
}

.grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
}

.input-box {
  margin-bottom:20px;
}

.input-wrapper {
  display:flex;
  background:#fff;
  border-radius:10px;
  padding:10px;
  color:#000;
}

.input-wrapper span {
  margin-right:5px;
}

input {
  border:none;
  outline:none;
  width:100%;
}

.slider {
  width:100%;
}

.result h2 {
  margin:10px 0;
}

canvas {
  margin-top:20px;
  background:#fff;
  border-radius:10px;
}

@media(max-width:768px){
.grid { grid-template-columns:1fr; }
}