/* ===== Design tokens ===== */
:root{
  --bg: #17161A;
  --bg-panel: #201F24;
  --bg-panel-2: #29282E;
  --paper: #F3EFE4;
  --paper-2: #E9E2CF;
  --ink: #1C1A17;
  --text: #EDE8DD;
  --text-dim: #9C978C;
  --safelight: #D5442E;
  --safelight-hi: #FF6A4D;
  --amber: #E8A33D;
  --sprocket: #3A3833;
  --border: #35333A;

  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;

  --radius: 4px;
  --wrap: 1080px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* subtle film-grain overlay */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 1;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color: inherit; }
button{ font-family: inherit; }

/* ===== Top bar ===== */
.topbar{
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.topbar-inner{
  display:flex; align-items:baseline; gap:12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 15px;
}
.brand-mark{ color: var(--safelight); font-size: 18px; }
.brand-sub{
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: 13px;
}

/* ===== Hero ===== */
.hero{ padding: 64px 24px 40px; max-width: 760px; }
.eyebrow{
  font-family: var(--font-mono);
  color: var(--amber);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.hero-title{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(38px, 7vw, 64px);
  line-height: 1.04;
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.hero-title .glow{
  color: var(--safelight-hi);
  text-shadow: 0 0 28px rgba(255,106,77,0.45);
}
.hero-sub{
  font-size: 17px;
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0;
}

/* ===== Dropzone ===== */
.dropzone{
  margin-top: 8px;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  border: 2px dashed var(--paper-2);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
  position: relative;
}
.dropzone::before, .dropzone::after{
  content: "✂";
  position: absolute; top: 8px; color: var(--text-dim); opacity: .35; font-size: 12px;
}
.dropzone::before{ left: 12px; }
.dropzone::after{ right: 12px; }
.dropzone:hover, .dropzone:focus-visible{
  border-color: var(--safelight);
  background: #EFE9D8;
}
.dropzone.is-dragover{
  border-color: var(--safelight);
  background: #EFE9D8;
  transform: scale(1.005);
}
.dropzone:focus-visible{ outline: 3px solid var(--amber); outline-offset: 3px; }

.dropzone-icon{ color: var(--ink); margin-bottom: 8px; }
.dropzone-title{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  margin: 4px 0 6px;
}
.dropzone-sub{
  margin: 0;
  color: #6B665C;
  font-size: 14.5px;
}
.link-fake{ color: var(--safelight); text-decoration: underline; text-underline-offset: 3px; }

/* ===== File list (queue before conversion) ===== */
.file-list{
  list-style:none; padding:0; margin: 14px 0 0;
  display:flex; flex-direction:column; gap: 8px;
}
.file-list li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
}
.file-list .fname{
  font-family: var(--font-mono);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.file-list .fmeta{ color: var(--text-dim); font-size: 12.5px; flex-shrink:0; }
.file-remove{
  background:none; border:none; color: var(--text-dim);
  cursor:pointer; font-size: 16px; line-height:1; padding: 2px 6px;
}
.file-remove:hover{ color: var(--safelight-hi); }

/* ===== Options panel ===== */
.options-panel{ margin-top: 20px; }
.options-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; flex-wrap: wrap;
}
.options-label{
  display:block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px;
}
.segmented{
  display:inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow:hidden;
}
.seg-btn{
  background: var(--bg-panel); color: var(--text);
  border: none; border-right: 1px solid var(--border);
  padding: 10px 16px; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; gap: 2px;
}
.seg-btn:last-child{ border-right:none; }
.seg-title{ font-weight: 700; font-size: 13.5px; }
.seg-meta{ font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.seg-btn.is-active{ background: var(--safelight); }
.seg-btn.is-active .seg-title, .seg-btn.is-active .seg-meta{ color: #FFF1EC; }
.seg-btn:focus-visible{ outline: 3px solid var(--amber); outline-offset: -3px; }

/* ===== Buttons ===== */
.btn{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  padding: 13px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity: .4; cursor: not-allowed; }
.btn-primary{
  background: var(--safelight);
  color: #FFF1EC;
}
.btn-primary:hover:not(:disabled){ filter: brightness(1.08); }
.btn-primary:focus-visible{ outline: 3px solid var(--amber); outline-offset: 2px; }
.btn-ghost{
  background: transparent;
  color: var(--text-dim);
  border-color: var(--border);
}
.btn-ghost:hover{ color: var(--text); border-color: var(--text-dim); }

/* ===== Progress ===== */
.progress-panel{ margin-top: 22px; }
.progress-track{
  height: 6px; background: var(--bg-panel); border-radius: 3px; overflow:hidden;
  border: 1px solid var(--border);
}
.progress-fill{
  height:100%; width:0%; background: linear-gradient(90deg, var(--amber), var(--safelight-hi));
  transition: width .25s ease;
}
.progress-text{
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim);
  margin: 8px 0 0;
}

/* ===== Results — contact sheet ===== */
.results-section{ margin-top: 56px; }
.results-header{
  display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.results-title{
  font-family: var(--font-mono); font-size: 20px; margin:0;
}
.results-actions{ display:flex; gap: 10px; }

.file-group{ margin-bottom: 30px; }
.file-group-label{
  font-family: var(--font-mono); font-size: 13px; color: var(--text-dim);
  margin: 0 0 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.contact-sheet{
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  position: relative;
}
.contact-sheet::before, .contact-sheet::after{
  content: "";
  position: absolute; left: 0; right: 0; height: 18px;
  background-image: radial-gradient(circle, var(--sprocket) 3px, transparent 3.2px);
  background-size: 20px 100%;
  background-repeat: repeat-x;
  opacity: .8;
}
.contact-sheet::before{ top: -1px; }
.contact-sheet::after{ bottom: -1px; }

.frame-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.frame{
  background: var(--ink);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  opacity: 0;
  transform: scale(.94);
  animation: develop .5s ease forwards;
}
@media (prefers-reduced-motion: reduce){
  .frame{ animation: none; opacity: 1; transform: none; }
}
@keyframes develop{
  to{ opacity: 1; transform: scale(1); }
}
.frame img{ display:block; width:100%; height: auto; aspect-ratio: 3/4; object-fit: cover; }
.frame-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding: 6px 8px;
  background: rgba(0,0,0,.55);
  position: absolute; left:0; right:0; bottom:0;
}
.frame-num{
  font-family: var(--font-mono); font-size: 11px; color: var(--amber);
}
.frame-dl{
  background:none; border:none; color: var(--text); cursor:pointer; font-size: 14px; padding: 2px 4px;
}
.frame-dl:hover{ color: var(--safelight-hi); }

/* ===== Feature cards ===== */
.features{
  margin: 70px auto 60px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.feature-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--bg-panel);
}
.feature-num{ color: var(--safelight); font-size: 18px; }
.feature-card h3{
  font-family: var(--font-mono); font-size: 15px; margin: 10px 0 8px;
}
.feature-card p{
  color: var(--text-dim); font-size: 14px; margin: 0; line-height: 1.55;
}

/* ===== Footer ===== */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 26px 0 40px;
  margin-top: 40px;
}
.footer-inner p{ margin: 0 0 4px; font-size: 13px; color: var(--text-dim); }
.footer-dim{ font-family: var(--font-mono); font-size: 11.5px; }

/* ===== Responsive ===== */
@media (max-width: 720px){
  .hero{ padding: 44px 20px 32px; }
  .dropzone{ padding: 36px 16px; }
  .options-row{ flex-direction: column; align-items: stretch; }
  .segmented{ width: 100%; }
  .seg-btn{ flex:1; }
  #convertBtn{ width: 100%; }
  .features{ grid-template-columns: 1fr; margin: 50px auto 40px; }
  .results-header{ flex-direction: column; align-items: stretch; }
  .results-actions{ flex-direction: column; }
  .frame-grid{ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}