:root{
  --bg:#fafafa;
  --card:#ffffff;
  --accent:#ff6b6b;
  --muted:#666;
  --shadow: 0 6px 18px rgba(20,20,30,0.06);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Kanit",sans-serif;
  background:var(--bg);
  color:#111;
  -webkit-font-smoothing:antialiased;
}

.container{
  max-width:900px;
  margin:24px auto;
  padding:18px;
}

h1{
  margin:0 0 14px 0;
  font-size:22px;
  font-weight: 600;
  color: #333;
}

.box{
  background:var(--card);
  padding:16px;
  border-radius:12px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
}

.label{display:block;margin-bottom:8px;font-weight:600;color:var(--muted); font-size:14px;}
.preview{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
  min-height: 40px;
}

.preview img{
  width:100px;
  height:70px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid #eee;
}

.options label { margin-right:12px; display:inline-flex; align-items:center; gap:6px; font-size:14px; }
.options input, .options select { margin-top:0; }

.actions{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.btn{
  background:linear-gradient(90deg,var(--accent),#ff8a8a);
  color:white;
  border:0;
  padding:12px 20px;
  border-radius:30px;
  cursor:pointer;
  font-weight:700;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
  transition: transform 0.2s;
}
.btn:active{ transform:scale(0.98); }

.status{ color:var(--muted); font-size:14px; margin-top:6px; }
.download a{ 
  background: #444; 
  color: #fff; 
  text-decoration:none; 
  text-align:center;
}

.foot{ margin-top:20px; color:#aaa; font-size:12px; text-align:center; }

input[type="text"], input[type="number"] {
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

@media (max-width:600px){
  .preview img{ width:80px; height:60px; }
}