/* ---------------------------------------------------------------------
   GIF APP CSS — structural layout for gif.html only. Loaded by
   gif.html itself (inside its iframe), same pattern as wiggle.css and
   music.css — doesn't touch the parent shell, and the shell doesn't
   carry any of these rules either.

   Purely structural/functional, no colors — skin this yourself.
   --------------------------------------------------------------------- */

*{box-sizing:border-box;}
body{margin:0;}
h2{margin:0 0 4px;}

.hidden{display:none !important;}

button{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:none;
  font:inherit;
  outline:none;
  cursor:pointer;
  border:1px solid;
  padding:8px 14px;
}
button:focus-visible{border-width:2px;}
button.icon{padding:6px 10px;}
button.primary{border-width:2px;font-weight:bold;}
button:disabled{cursor:not-allowed;opacity:0.5;}

input, select{
  font:inherit;
  border:1px solid;
  padding:6px 8px;
}

.panel{border:1px solid;padding:18px;margin-bottom:20px;}
.step-num{margin-right:6px;}
.hint{margin:4px 0 14px;}
.status{margin:8px 0 0;}
.status.warn{font-weight:bold;}

.drop{display:block;border:1px dashed;padding:20px;text-align:center;cursor:pointer;}
.drop input{display:none;}

.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;}

/* ---------- frame list (upload + reorder) ---------- */
.frame-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.frame-item{width:120px;border:1px solid;display:flex;flex-direction:column;}
.frame-item canvas{width:100%;height:90px;display:block;object-fit:cover;}
.frame-item-controls{display:flex;justify-content:space-between;align-items:center;padding:3px;border-top:1px solid;}
.frame-item-controls button{padding:2px 7px;font-size:12px;}
.frame-num{font-size:11px;text-align:center;padding:2px 0;}

/* ---------- preview / export ---------- */
.preview-wrap{display:flex;flex-direction:column;align-items:center;}
.preview-canvas-holder{max-width:100%;border:1px solid;}
.preview-canvas-holder canvas{max-width:100%;display:block;}
.controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:12px;}
.speed{display:flex;align-items:center;gap:8px;}

.switch-row{display:flex;align-items:center;gap:8px;cursor:pointer;}
#pingpongRow{margin-top:14px;}

.bpm-fields{display:flex;gap:18px;flex-wrap:wrap;}
.bpm-field{display:flex;flex-direction:column;gap:5px;}
.bpm-field input{width:80px;}

.progress{height:8px;overflow:hidden;width:100%;max-width:320px;border:1px solid;margin-top:10px;}
.progress > div{height:100%;width:0%;background:currentColor;}