:root { --bg:#fafafa; --card:#fff; --border:#e2e8f0; --text:#1f2937; --primary:#0d6efd; --primary-hover:#0b5ed7; }
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--text);
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px
}

.site-header{
  background:#fff;
  border-bottom:1px solid var(--border)
}

.logo{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:12px 0
}
.logo img{
  max-width:200px;
  height:auto
}
h2{
  text-align:center;
  font-weight:600;
  margin:18px 0 12px
}
form{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:22px;
  box-shadow:0 4px 18px rgba(0,0,0,.06)
}
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px
}
.col-6{
  grid-column:span 6
}
.col-12{
  grid-column:span 12
}
.col-16{
  grid-column:span 16
}
label{
  display:block;
  font-weight:500;
  margin-bottom:6px
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
select,
textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  font:14px 'Poppins',sans-serif;
  background:#fff
}
textarea{
  min-height:100px;
  resize:vertical
}
.inline{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap
}
.inline label{
  font-weight:400;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0
}
.hint{
  font-size:12px;
  color:#64748b;
  margin-top:4px
}
.section-title{
  font-weight:600;
  font-size:18px;
  margin:20px 0 6px;
  color:#111827;
  border-top:1px solid var(--border);
  padding-top:16px
}
.actions{
  display:flex;
  justify-content:flex-start;
  margin-top:16px
}
button{
  background:var(--primary);
  color:#fff;
  padding:12px 18px;
  border:0;
  border-radius:8px;
  font-weight:600;
  cursor:pointer
}
button:hover{
  background:var(--primary-hover)
}
.note{
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px
}
.error{
  color:#b91c1c;
  font-size:13px;
  margin-top:6px
}
.success{
  color:#166534;
  font-size:14px;
  margin-top:10px
}
.upload-instructions{
  font-size:13px;
  color:#374151;
  background:#f1f5f9;
  border:1px dashed #cbd5e1;
  padding:10px;
  border-radius:8px
}
.privacy{
  font-size:.9em;
  margin-top:16px
}
@media (max-width: 720px){
  .col-6{
    grid-column:span 12
  }
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.warning {
  color:#92400e;
  background:#fef3c7;
  border:1px solid #fcd34d;
  padding:8px 12px;
  border-radius:6px;
  font-size:13px;
  margin-top:8px
}
.success {
  color: #166534;
  font-size: 14px;
  margin-top: 10px
}
.success.waiting {
  color: #92400e;
  /* amber for "in progress" */
}
.required-star {
  color: #dc2626;
  /* red */
  font-weight: bold;
  margin-left: 2px
}
.form-note {
  font-size: 13px;
  color: #374151;
  margin-bottom: 16px
}
.counter {
  font-size: 12px;
  color: #555;
}
.counter.limit-reached {
  color: #dc2626;
  font-weight: bold;
}

.file-preview {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.preview-item {
  position: relative;
  display: inline-block;
}
.preview-item img {
  max-width: 80px;
  max-height: 80px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #e53e3e;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  width: 18px;
  height: 18px;
  line-height: 16px;
  font-size: 12px;
}