/* ===========================================================
   Image to JPG Converter — Style
   Reference layout: badge bar -> hero -> step indicator ->
   upload box -> format grid -> how-to steps -> FAQ -> footer
   =========================================================== */

:root{
  --blue-700:#1d4ed8;
  --blue-900:#1e3a8a;
  --blue-50:#eff6ff;
  --green-600:#16a34a;
  --amber-500:#f59e0b;
  --red-500:#ef4444;
  --gray-900:#111827;
  --gray-600:#4b5563;
  --gray-200:#e5e7eb;
  --gray-50:#f9fafb;
  --radius:16px;
  --shadow:0 2px 10px rgba(17,24,39,.06);
  --shadow-lg:0 8px 24px rgba(17,24,39,.10);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Segoe UI","Noto Sans Devanagari",Arial,sans-serif;
  background:var(--gray-50);
  color:var(--gray-900);
  line-height:1.5;
}
a{color:var(--blue-700);text-decoration:none}
.container{max-width:880px;margin:0 auto;padding:0 16px}

/* Header */
header.topbar{
  background:#fff;border-bottom:1px solid var(--gray-200);
  position:sticky;top:0;z-index:10;
}
header.topbar .container{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{font-weight:800;font-size:1.15rem;color:var(--blue-900)}
.nav-link{font-weight:600;font-size:.92rem}

/* Hero */
.hero{padding:28px 0 8px;text-align:center}
.badge-pill{
  display:inline-block;background:var(--green-600);color:#fff;
  font-size:.78rem;font-weight:700;padding:5px 14px;border-radius:999px;margin-bottom:14px;
}
.hero h1{font-size:1.55rem;line-height:1.35;margin:0 0 10px}
.hero p.sub{color:var(--gray-600);font-size:.95rem;max-width:620px;margin:0 auto 16px}
.formats-line{font-size:.85rem;color:var(--blue-700);font-weight:700;margin-bottom:18px}

.pill-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px}
.pill{
  background:#fff;border:1px solid var(--gray-200);border-radius:999px;
  padding:6px 12px;font-size:.78rem;font-weight:600;color:var(--gray-600);
  display:flex;align-items:center;gap:6px;
}

/* Step indicator */
.steps{display:flex;justify-content:center;gap:6px;margin:18px 0 26px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--gray-600)}
.step .num{
  width:26px;height:26px;border-radius:50%;background:var(--gray-200);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--gray-600);
}
.step.active .num{background:var(--blue-700);color:#fff}
.step.done .num{background:var(--green-600);color:#fff}
.step-sep{width:24px;height:2px;background:var(--gray-200);align-self:center}

/* Upload card */
.card{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;margin-bottom:20px;
}
.dropzone{
  border:2px dashed #93c5fd;border-radius:14px;background:var(--blue-50);
  padding:36px 16px;text-align:center;cursor:pointer;transition:.15s;
}
.dropzone.dragover{background:#dbeafe;border-color:var(--blue-700)}
.dropzone .icon{font-size:2.2rem;margin-bottom:6px}
.dropzone .main-text{font-weight:700;font-size:1rem;margin-bottom:4px}
.dropzone .sub-text{font-size:.8rem;color:var(--gray-600)}
input[type=file]{display:none}

.quality-row{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:.85rem;font-weight:600}
.quality-row input[type=range]{flex:1}

.btn{
  display:inline-block;border:none;border-radius:12px;cursor:pointer;
  font-weight:700;font-size:.95rem;padding:13px 22px;text-align:center;
  transition:.15s;width:100%;
}
.btn-primary{background:linear-gradient(135deg,var(--amber-500),var(--red-500));color:#fff}
.btn-primary:disabled{opacity:.55;cursor:not-allowed}
.btn-secondary{background:var(--blue-700);color:#fff;margin-top:10px}
.btn-ghost{background:#fff;border:1px solid var(--gray-200);color:var(--gray-900)}

/* File list */
.file-list{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.file-row{
  display:flex;align-items:center;gap:10px;border:1px solid var(--gray-200);
  border-radius:12px;padding:10px 12px;font-size:.85rem;
}
.file-row .thumb{
  width:42px;height:42px;border-radius:8px;background:var(--gray-200);
  flex-shrink:0;object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.file-row .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.file-row .status{font-size:.78rem;font-weight:700}
.status-pending{color:var(--gray-600)}
.status-working{color:var(--amber-500)}
.status-done{color:var(--green-600)}
.status-error{color:var(--red-500)}
.file-row .dl{font-size:.78rem;font-weight:700;color:var(--blue-700)}

.foot-trust{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;font-size:.78rem;color:var(--gray-600);margin-top:14px}

/* Format grid */
.section-title{font-size:1.2rem;font-weight:800;text-align:center;margin:34px 0 18px}
.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.format-card{
  background:#fff;border:1px solid var(--gray-200);border-radius:12px;
  padding:14px 6px;text-align:center;font-size:.82rem;font-weight:700;
}
.format-card .ico{font-size:1.4rem;display:block;margin-bottom:4px}
@media(max-width:560px){.format-grid{grid-template-columns:repeat(3,1fr)}}

/* How-to */
.howto{display:flex;flex-direction:column;gap:16px;margin-top:10px}
.howto-item{display:flex;gap:14px;align-items:flex-start}
.howto-item .num{
  width:30px;height:30px;border-radius:50%;background:var(--blue-700);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;
}
.howto-item .txt b{display:block;margin-bottom:2px}
.howto-item .txt span{font-size:.88rem;color:var(--gray-600)}

/* FAQ */
.faq-item{border-bottom:1px solid var(--gray-200);padding:14px 0}
.faq-q{font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:.92rem}
.faq-a{font-size:.85rem;color:var(--gray-600);margin-top:8px;display:none}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q .arrow{transform:rotate(180deg)}
.arrow{transition:.15s}

footer{margin-top:40px;padding:24px 0;text-align:center;font-size:.8rem;color:var(--gray-600);border-top:1px solid var(--gray-200)}
footer a{margin:0 6px}

.toast{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  background:var(--gray-900);color:#fff;padding:10px 18px;border-radius:10px;
  font-size:.85rem;opacity:0;transition:.2s;pointer-events:none;z-index:50;
}
.toast.show{opacity:1}