:root{
  --accent: #2563eb;
  --muted: #6b7280;
  --bg: #ffffff;
  --card: #f8fafc;
  --radius: 12px;
}

.imagy-container{
  max-width: 980px;
  margin: 28px auto;
  padding: 20px;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #0f172a;
}

.imagy-hero{
  background: linear-gradient(180deg, rgba(37,99,235,0.06), rgba(37,99,235,0.03));
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(15,23,42,0.04);
}

.imagy-hero h1{ margin:0; font-size:24px; }
.imagy-hero .lead{ color:var(--muted); margin:8px 0 18px; }

#imagy-dropzone{
  border: 2px dashed rgba(37,99,235,0.45);
  background: var(--card);
  padding: 28px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
  outline: none;
}
#imagy-dropzone:focus, #imagy-dropzone.dragover{ transform: translateY(-2px); background: #eef2ff; }

.dz-inner{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.dz-inner .icon{ color: var(--accent); opacity:0.95; }
.dz-text{ color:var(--muted); font-size:15px; }

.controls{ display:flex; gap:12px; align-items:center; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.controls input[type=range]{ width:200px; }
.controls .primary{ background:var(--accent); color:white; border:none; padding:10px 16px; border-radius:8px; cursor:pointer; font-weight:600; }
.controls .primary:disabled{ opacity:0.5; cursor:not-allowed; }

.imagy-gallery{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; justify-content:flex-start; }
.card{ width:160px; background:white; border-radius:10px; padding:10px; box-shadow: 0 4px 18px rgba(15,23,42,0.06); text-align:center; }
.card img{ max-width:140px; height:80px; object-fit:cover; border-radius:6px; display:block; margin:6px auto; }
.card .name{ font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .actions{ margin-top:8px; display:flex; gap:8px; justify-content:center; }
.card .btn{ padding:6px 8px; font-size:13px; border-radius:6px; cursor:pointer; border:1px solid #e6e9ee; background:#fff; }
.card .progress{ height:6px; background:#eef2ff; border-radius:6px; overflow:hidden; margin-top:8px; }
.card .progress > b{ display:block; height:100%; width:0%; background:var(--accent); transition:width .25s ease; }

.imagy-steps{ display:flex; gap:12px; margin-top:20px; justify-content:space-between; }
.imagy-steps .step{ background:#fff; padding:12px; border-radius:10px; flex:1; text-align:center; box-shadow: 0 2px 12px rgba(15,23,42,0.03); font-size:14px; color:var(--muted); }

.imagy-faq{ margin-top:22px; }
.imagy-faq h2{ margin-bottom:12px; }
.faq-item{ border-radius:8px; margin-bottom:8px; background:#000; box-shadow: 0 2px 10px rgba(15,23,42,0.03); }
.faq-q{ width:100%; text-align:left; padding:12px; border:none; background:transparent; font-weight:600; cursor:pointer; }
.faq-a{ padding:0 12px 12px; display:none; color:var(--muted); }

@media (max-width:720px){
  .imagy-steps{ flex-direction:column; }
  .card{ width:48%; }
}