#app-body {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* dropzone */
.dropzone {
  border: 2px dashed color-mix(in srgb, var(--fg) 25%, transparent);
  border-radius: .75rem;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-size: .9rem;
  opacity: .75;
}
.dropzone:hover,
.dropzone.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  opacity: 1;
}
.dropzone u { color: var(--accent); text-underline-offset: 2px; }

/* format picker */
.format-picker {
  display: flex;
  gap: .5rem;
}
.fmt-btn {
  padding: .3rem .75rem;
  border-radius: 2rem;
  border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background .15s, border-color .15s, color .15s;
}
.fmt-btn:hover  { border-color: var(--accent); color: var(--accent); }
.fmt-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }

/* file list */
.file-list { display: flex; flex-direction: column; gap: .5rem; }

.file-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .75rem;
  border-radius: .5rem;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  font-size: .875rem;
}
.file-item .name  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.file-item .label { font-size: .78rem; opacity: .5; white-space: nowrap; }
.file-item.done   { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.file-item.done .label { opacity: .7; color: var(--accent); }
.file-item.error  { background: color-mix(in srgb, #f44 8%, transparent); }
.file-item.error iconify-icon { color: #f66; }

.icon-btn {
  background: transparent;
  border: none;
  color: var(--fg);
  cursor: pointer;
  padding: .2rem;
  border-radius: .3rem;
  display: flex;
  align-items: center;
  opacity: .5;
  transition: opacity .15s, color .15s;
}
.icon-btn:hover        { opacity: 1; }
.icon-btn.remove:hover { color: #f66; }
a.icon-btn             { text-decoration: none; }
a.icon-btn:hover       { color: var(--accent); opacity: 1; }

/* actions */
.actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border-radius: .5rem;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  transition: opacity .15s;
}
.btn:hover   { opacity: .85; }
.btn.primary { background: var(--accent); color: var(--bg); }
.btn.secondary {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  color: var(--fg);
}

/* spin animation */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin .8s linear infinite; }