/* ── Reset & Tokens ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:    #0f0f0e;
  --paper:  #f5f1ea;
  --cream:  #ede8df;
  --rust:   #c9421a;
  --rust-d: #a33515;
  --stone:  #8a8277;
  --mid:    #4a4640;
  --white:  #fdfcf9;
  --r:      6px;
  --mono:   'DM Mono',monospace;
  --serif:  'Fraunces',Georgia,serif;
}
html{scroll-behavior:smooth}
body{
  font-family:var(--mono);
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:0 1rem 4rem;
}

/* ── Noise ───────────────────────────────────────────────────────────────── */
.noise{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat:repeat;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header{
  width:100%;max-width:720px;
  padding:3rem 0 2rem;text-align:center;
  position:relative;z-index:1;
}
.logo{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.logo-icon{font-size:1.4rem}
.logo-text{font-family:var(--mono);font-size:1.6rem;font-weight:500;letter-spacing:-.04em}
.logo-text em{font-style:normal;color:var(--rust)}
.tagline{font-size:.72rem;letter-spacing:.12em;color:var(--stone);text-transform:uppercase}

/* ── Main ────────────────────────────────────────────────────────────────── */
main{
  width:100%;max-width:720px;
  display:flex;flex-direction:column;gap:1.25rem;
  position:relative;z-index:1;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card{
  background:var(--white);
  border:1.5px solid var(--ink);border-radius:var(--r);
  padding:2rem;
  box-shadow:4px 4px 0 var(--ink);
}
.card-label{
  font-size:.65rem;letter-spacing:.18em;color:var(--stone);
  text-transform:uppercase;margin-bottom:1.5rem;
}

/* ── Drop zone ───────────────────────────────────────────────────────────── */
.drop-zone{
  border:2px dashed #c9bfb0;border-radius:var(--r);
  padding:3rem 2rem;text-align:center;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--rust);background:#fff8f5}
.drop-icon{width:52px;height:52px;margin:0 auto 1rem;color:var(--stone)}
.drop-icon svg{width:100%;height:100%}
.drop-title{font-family:var(--serif);font-size:1.2rem;font-weight:300;color:var(--mid);margin-bottom:.4rem}
.drop-sub{font-size:.8rem;color:var(--stone);margin-bottom:.5rem}
.browse-link{color:var(--rust);cursor:pointer;text-decoration:underline;text-decoration-style:dotted}
.drop-limit{font-size:.7rem;color:#b0a898}

/* ── File info ───────────────────────────────────────────────────────────── */
.file-info{
  display:flex;align-items:center;gap:1rem;
  padding:.75rem 1rem;
  background:var(--cream);border:1.5px solid var(--ink);border-radius:var(--r);
  margin-top:1rem;
}
.file-icon{font-size:1.5rem}
.file-meta{flex:1;display:flex;flex-direction:column;gap:.2rem}
.file-name{font-size:.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-size{font-size:.7rem;color:var(--stone)}
.btn-clear{background:none;border:none;cursor:pointer;font-size:.9rem;color:var(--stone);padding:4px 8px;border-radius:4px;transition:color .15s,background .15s}
.btn-clear:hover{color:var(--rust);background:#ffeae4}

/* ── Settings ────────────────────────────────────────────────────────────── */
.settings-grid{display:flex;flex-direction:column;gap:1.5rem}
.setting-item label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-bottom:.6rem}
.slider-row{display:flex;align-items:center;gap:1rem}
input[type=range]{
  flex:1;appearance:none;height:4px;background:var(--cream);
  border-radius:2px;cursor:pointer;border:1px solid #c9bfb0;accent-color:var(--rust);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--rust);border:2px solid var(--ink);cursor:pointer;
}
output{font-size:.8rem;min-width:3.5rem;text-align:right;font-weight:500}
.slider-hints{display:flex;justify-content:space-between;font-size:.65rem;color:#b0a898;margin-top:.3rem}
.range-row{display:flex;align-items:center;gap:.75rem}
.page-input{
  width:80px;padding:.45rem .6rem;
  font-family:var(--mono);font-size:.85rem;
  border:1.5px solid #c9bfb0;border-radius:var(--r);
  background:var(--white);color:var(--ink);transition:border-color .15s;
}
.page-input:focus{outline:none;border-color:var(--rust)}
.range-dash{color:var(--stone)}

/* ── Convert button ──────────────────────────────────────────────────────── */
.action-row{display:flex;justify-content:center}
.btn-convert{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:1rem 2.5rem;
  font-family:var(--mono);font-size:.95rem;font-weight:500;
  background:var(--ink);color:var(--paper);
  border:2px solid var(--ink);border-radius:var(--r);cursor:pointer;
  box-shadow:4px 4px 0 var(--rust);
  transition:transform .12s,box-shadow .12s,background .15s;
}
.btn-convert:hover:not(:disabled){background:var(--rust);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--rust-d)}
.btn-convert:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--rust)}
.btn-convert:disabled{opacity:.4;cursor:not-allowed;box-shadow:4px 4px 0 var(--stone)}
.btn-arrow{font-size:1.1rem;transition:transform .15s}
.btn-convert:hover:not(:disabled) .btn-arrow{transform:translateX(4px)}

/* ── Progress ────────────────────────────────────────────────────────────── */
.progress-wrap{padding:1.5rem 0;text-align:center}
.progress-bar-outer{height:6px;background:var(--cream);border:1px solid #c9bfb0;border-radius:3px;overflow:hidden;margin-bottom:.75rem}
.progress-bar-inner{height:100%;background:var(--rust);border-radius:3px;transition:width .35s ease}
.progress-label{font-size:.78rem;color:var(--stone)}

/* ── Error box ───────────────────────────────────────────────────────────── */
.error-box{
  background:#1e0800;border:2px solid var(--rust);border-radius:var(--r);
  padding:1.25rem 1.5rem;box-shadow:4px 4px 0 var(--rust-d);
}
.error-title{font-size:.82rem;font-weight:500;color:#ff9980;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}
.error-msg{font-size:.85rem;color:#ffd5cc;line-height:1.5;margin-bottom:.75rem}
.error-diag{font-size:.75rem;color:var(--rust);text-decoration:none;border-bottom:1px dotted var(--rust)}
.error-diag:hover{color:#ff7755}

/* ── Results ─────────────────────────────────────────────────────────────── */
.results-card{}
.results-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.results-count{font-size:.78rem;color:var(--stone)}
.btn-zip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.78rem;padding:.45rem 1rem;
  background:var(--ink);color:var(--paper);
  border:1.5px solid var(--ink);border-radius:var(--r);text-decoration:none;
  box-shadow:3px 3px 0 var(--rust);transition:transform .1s,box-shadow .1s,background .15s;
}
.btn-zip:hover{background:var(--rust);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--rust-d)}
.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.result-item{
  border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;
  background:var(--white);box-shadow:2px 2px 0 var(--ink);
  transition:transform .12s,box-shadow .12s;
}
.result-item:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--rust)}
.result-thumb{width:100%;aspect-ratio:8.5/11;object-fit:cover;display:block;background:var(--cream)}
.result-meta{padding:.5rem .6rem;border-top:1px solid var(--cream)}
.result-name{font-size:.7rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.25rem}
.result-size{font-size:.63rem;color:var(--stone)}
.result-dl{
  display:block;text-align:center;margin:.4rem .6rem .6rem;padding:.3rem;
  font-family:var(--mono);font-size:.68rem;
  background:var(--cream);color:var(--ink);
  border:1px solid #c9bfb0;border-radius:4px;text-decoration:none;
  transition:background .15s,color .15s;
}
.result-dl:hover{background:var(--rust);color:var(--white);border-color:var(--rust)}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer{
  margin-top:3rem;font-size:.68rem;color:var(--stone);
  letter-spacing:.06em;text-align:center;position:relative;z-index:1;
}
footer a{color:inherit}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden{display:none!important}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:520px){
  .card{padding:1.25rem}
  .results-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .results-toolbar{flex-direction:column;gap:.75rem;align-items:flex-start}
}