body { 
  font-family:'Segoe UI',sans-serif; 
  background:#f8f9fa;  
  margin:0; padding:0; 
}
.page-header { text-align:center; margin-bottom:30px; }
.page-header h1 { font-size:32px; color:#222; margin-bottom:12px; font-weight:700; }
.page-header p { font-size:16px; color:#555; max-width:700px; margin:0 auto; line-height:1.6; }

.container { 
  background:#fff; 
  border-radius:20px; 
  padding:30px; 
  display:flex; 
  gap:30px; 
  box-shadow:0 20px 40px rgba(0,0,0,0.1); 
  transition:0.3s;
  justify-content:center; 
  flex-wrap:wrap;
  max-width:1000px; 
  margin:0 auto 40px; 
}

.preview-area, .settings { 
  flex:1; 
  display:flex; 
  flex-direction:column; 
  gap:20px; 
  min-width:280px;
}

#preview { 
  max-width:100%; 
  border-radius:15px; 
  box-shadow:0 8px 20px rgba(0,0,0,0.1); 
  transition:0.3s; 
}

.drop-area { 
  border:2px dashed #007bff; 
  border-radius:20px; 
  padding:25px; 
  text-align:center; 
  cursor:pointer; 
  transition:0.3s; 
  color:#555; 
  position:relative; 
  background:#fdfdfd;
  font-weight:600;
}
.drop-area.dragover { background:#e3f0ff; border-color:#0056b3; }
.drop-area input[type=file] { position:absolute; width:100%; height:100%; top:0; left:0; opacity:0; cursor:pointer; }

label { font-weight:600; margin-bottom:6px; color:#333; display:block; font-size:15px; }

input[type=number], select, input[type=range] { 
  width:100%; 
  padding:10px; 
  border-radius:10px; 
  border:1px solid #ccc; 
  font-size:15px; 
}

input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px;height:22px; border-radius:50%; background:#007bff; cursor:pointer; }
input[type=range]::-moz-range-thumb { width:22px;height:22px; border-radius:50%; background:#007bff; cursor:pointer; }

button { 
  padding:16px; 
  background:linear-gradient(135deg,#007bff,#0056b3); 
  border:none;
  color:#fff;
  font-size:17px;
  font-weight:600;
  border-radius:15px; 
  cursor:pointer; 
  box-shadow:0 8px 20px rgba(0,0,0,0.15); 
  transition:0.3s; 
}
button:hover { background:linear-gradient(135deg,#0056b3,#003f7f); }

#estimate { font-weight:bold; text-align:center; color:#222; margin-top:10px; font-size:16px; }

@media(max-width:900px){ .container{flex-direction:column;} }