*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}

body{
  background:radial-gradient(circle at top right,#5b2c83 0%,#2a0f55 45%,#0f0228 100%);
  min-height:100vh;
  padding:18px;
}

.container{
  max-width:1000px;
  width:100%;
  margin:auto;
  background:#fff;
  border-radius:14px;
  box-shadow:0 25px 60px rgba(0,0,0,0.25);
  overflow:hidden;
}

.header{
  background:linear-gradient(135deg,#ff8a4c,#ffb703);
  color:#1a0933;
  padding:20px 22px;
}

.header h1{
  font-size:20px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.3;
}

.form-body{padding:24px}

.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.field{display:flex;flex-direction:column}

.field label{
  font-size:13px;
  font-weight:500;
  margin-bottom:6px;
  color:#333;
}

.field input,.field textarea{
  padding:11px;
  border-radius:8px;
  border:1px solid #ddd;
  font-size:14px;
  width:100%;
  transition:.3s;
}

.field input:focus,.field textarea:focus{
  border-color:#5b2c83;
  outline:none;
  box-shadow:0 0 0 2px rgba(91,44,131,0.15);
}

.full{grid-column:1/-1}

.upload-box{
  border:2px dashed #bbb;
  padding:12px;
  border-radius:10px;
  background:#fafafa;
}

button{
  width:100%;
  margin-top:22px;
  padding:14px;
  border:none;
  border-radius:8px;
  background:linear-gradient(135deg,#ff8a4c,#ffb703);
  color:#1a0933;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}

button:hover{opacity:.9}

.note{
  margin-top:16px;
  padding:12px 14px;
  border-radius:8px;
  background:#f4f8ff;
  color:#2c3e50;
  font-size:13px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  border:1px solid #d6e4ff;
}

.footer{
  background:#f1f1f1;
  text-align:center;
  padding:14px;
  font-size:12px;
  color:#999;
}

/* 📱 Tablets & below */
@media(max-width:768px){
  body{padding:12px}
  .form-body{padding:18px}
  .grid{grid-template-columns:1fr}
  .header h1{font-size:18px}
}

/* 📱 Small phones */
@media(max-width:480px){
  body{padding:10px}
  .form-body{padding:16px}
  .header{padding:16px}
  .header h1{font-size:16px;gap:8px}
  .field input,.field textarea{padding:10px;font-size:13px ; width:100% !important;}
  button{font-size:14px;padding:13px}
}

/* 📱 Extra small devices (300px support) */
@media(max-width:360px){
  body{padding:8px}
  .form-body{padding:14px}
  .header h1{font-size:15px}
  .note{font-size:12px;padding:10px; }
}