/* ── Hero ─────────────────────────────────────────── */
.app-hero {
  border-bottom: 1px solid var(--color-border);
  padding: 1.25rem 1.5rem 1.1rem;
}
.app-hero--lavender {
  background: var(--c-lavender-bg);
  border-bottom-color: var(--c-lavender-border);
}
.app-hero__inner { margin: 0 auto; }
.app-hero__title {
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800;
  color: var(--c-lavender-text); letter-spacing: -.02em;
  margin: 0 0 .5rem; line-height: 1.2;
}
.app-hero__desc {
  font-size: .9rem; color: var(--color-text-secondary);
  max-width: 660px; line-height: 1.6; margin: 0 0 .85rem;
}
.app-hero__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.hero-chip {
  display: inline-flex; align-items: center;
  padding: .22rem .65rem; font-size: .72rem; font-weight: 700;
  background: var(--color-surface); border: 1.5px solid var(--c-lavender-border);
  border-radius: var(--radius-full); color: var(--c-lavender-text); white-space: nowrap;
}

/* ── Tool shell ─────────────────────────────────────────── */
.tool-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-10);
}

/* ── Drop zone ──────────────────────────────────────────── */
.drop-zone {
  padding: 3.5rem var(--space-8);
  background: var(--c-lavender-bg);
  border: 2.5px dashed var(--c-lavender-border);
  border-radius: var(--radius-xl);
  text-align: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  outline: none;
}
.drop-zone:focus-visible { box-shadow: var(--shadow-accent); }
.drop-zone.drag-over { background: #dcd5f5; border-color: #9d88e0; }
.dz-icon  { font-size: 2.5rem; display: block; margin-bottom: var(--space-3); }
.dz-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--c-lavender-text); margin: 0 0 var(--space-2); }
.dz-sub   { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.dz-browse { background: none; border: none; color: var(--color-accent); font: inherit; font-size: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.dz-limit  { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
#file-input { display: none; }

/* ── Work area ──────────────────────────────────────────── */
#work-area { padding: var(--space-6); }
.file-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
#file-count  { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }
.btn-link { background: none; border: none; cursor: pointer; padding: 0; font: inherit; font-size: var(--text-sm); color: var(--color-text-muted); }
.btn-link:hover { color: var(--color-text-primary); }

/* ── File list / thumbnail grid ─────────────────────────── */
.file-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.thumb-grid { display: flex; flex-direction: column; gap: 0.375rem; }
.file-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: background 0.12s; }
.file-item.dragging { opacity: 0.45; }
.file-item.drag-over-item { border-color: var(--color-accent); background: var(--color-accent-subtle); }

/* drag handle */
.drag-handle { font-size: 1rem; color: var(--color-text-muted); cursor: grab; flex-shrink: 0; user-select: none; line-height: 1; }
.drag-handle:active { cursor: grabbing; }

/* thumbnail placeholder */
.fi-thumb-wrap { font-size: 1.25rem; flex-shrink: 0; line-height: 1; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; }
.fi-thumb-placeholder { display: block; }

.fi-info { flex: 1; min-width: 0; }
.fi-name { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-size { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.fi-rot-label { display: block; font-size: var(--text-xs); color: var(--c-lavender-text); min-height: 1em; }

/* per-image action buttons */
.fi-actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.fi-rot-btn { background: none; border: 1px solid var(--color-border); cursor: pointer; color: var(--color-text-secondary); padding: 2px 5px; border-radius: var(--radius-sm); font-size: 1rem; line-height: 1; flex-shrink: 0; transition: background 0.1s, color 0.1s; }
.fi-rot-btn:hover { color: var(--c-lavender-text); background: var(--c-lavender-bg); border-color: var(--c-lavender-border); }
.fi-rm { background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: var(--space-1); border-radius: var(--radius-sm); font-size: 0.75rem; line-height: 1; flex-shrink: 0; }
.fi-rm:hover { color: var(--color-accent); background: var(--color-accent-subtle); }

.add-more-btn { background: none; border: none; cursor: pointer; font: inherit; font-size: var(--text-sm); color: var(--color-accent); padding: var(--space-1) 0; }
.add-more-btn:hover { text-decoration: underline; }
.divider { height: 1px; background: var(--color-border); margin: var(--space-5) 0; }

/* ── Options ────────────────────────────────────────────── */
.opts { display: flex; flex-direction: column; gap: var(--space-5); }
.opt-row { display: flex; flex-direction: column; gap: var(--space-2); }
.opt-row--inline { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); }
.opt-lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.opt-val  { font-weight: var(--weight-semibold); color: var(--c-lavender-text); }
.opt-hint { font-size: var(--text-xs); color: var(--color-text-muted); }

input[type="range"].slider { width: 100%; accent-color: var(--c-lavender-text); cursor: pointer; }
.range-ends { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-muted); }

/* segmented page-size control */
.seg { display: flex; gap: var(--space-2); }
.seg label { flex: 1; }
.seg input[type="radio"] { display: none; }
.seg-btn { display: block; text-align: center; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; color: var(--color-text-secondary); transition: background .1s, border-color .1s, color .1s; user-select: none; }
.seg input[type="radio"]:checked + .seg-btn { background: var(--c-lavender-bg); border-color: var(--c-lavender-border); color: var(--c-lavender-text); font-weight: var(--weight-semibold); }

/* toggle */
.tgl-label { display: flex; align-items: center; cursor: pointer; gap: var(--space-3); flex-shrink: 0; }
.tgl-input { display: none; }
.tgl-track { width: 2.5rem; height: 1.375rem; background: var(--color-border); border-radius: 999px; position: relative; flex-shrink: 0; transition: background .2s; }
.tgl-input:checked + .tgl-track { background: var(--c-lavender-border); }
.tgl-thumb { width: 1.125rem; height: 1.125rem; background: white; border-radius: 50%; position: absolute; top: 0.125rem; left: 0.125rem; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.tgl-input:checked + .tgl-track .tgl-thumb { transform: translateX(1.125rem); }

/* ── Output filename input ──────────────────────────────── */
.filename-input-row { display: flex; align-items: center; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.filename-input { flex: 1; border: none; outline: none; padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-sm); background: var(--color-surface); color: var(--color-text-primary); }
.filename-input:focus { box-shadow: inset 0 0 0 2px var(--c-lavender-border); }
.filename-ext { padding: var(--space-2) var(--space-3) var(--space-2) 0; font-size: var(--text-sm); color: var(--color-text-muted); background: var(--color-surface); white-space: nowrap; }

.action-wrap { margin-top: var(--space-6); }
.action-wrap .btn { width: 100%; justify-content: center; }

/* ── Progress ───────────────────────────────────────────── */
.prog-area { padding: var(--space-10) var(--space-8); }
.prog-bar  { height: 6px; background: var(--color-border); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-4); }
.prog-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--c-lavender-border), var(--color-accent)); transition: width .35s ease; }
.prog-lbl  { font-size: var(--text-sm); color: var(--color-text-secondary); text-align: center; }

/* ── Result ─────────────────────────────────────────────── */
.result-area { padding: var(--space-10) var(--space-8); text-align: center; }
.result-icon { font-size: 3rem; display: block; margin-bottom: var(--space-3); }
.result-title { font-size: 1.5rem; font-weight: var(--weight-bold); color: var(--color-text-primary); margin: 0 0 var(--space-1); }
.result-meta  { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-6); }
.result-btns  { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }

/* ── Learn More ───────────────────────────────────────────────────────────── */
.learn-more{max-width:820px;margin:1.25rem auto 0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.1rem 1.5rem}
.learn-more-title{font-size:1.1rem;font-weight:800;color:var(--c-lavender-text);margin:0 0 .75rem}
.learn-more h3{font-size:1rem;font-weight:800;color:var(--color-text-primary);margin:1.1rem 0 .5rem}
.learn-more p{font-size:.88rem;line-height:1.65;color:var(--color-text-secondary);margin:0 0 .75rem}
.learn-more a{color:var(--c-lavender-text)}
.learn-more .faq-item{margin-bottom:.75rem}
.learn-more .faq-q{font-size:.88rem;font-weight:700;color:var(--color-text-primary);margin:0 0 .25rem}
.learn-more-meta{font-size:.72rem;color:var(--color-text-muted);margin-top:1rem}