:root{
  --bg:#222;         /* fondo app */
  --fg:#eee;         /* texto app */
  --btn:#444;        /* botones */
  --btn-h:#666;      /* hover */
  --active:#0a84ff;  /* botones activos */
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg); color:var(--fg);
  font-family:Arial, sans-serif;
  display:flex; flex-direction:column; align-items:center;
  user-select:none;
}

/* ───── Herramientas y timeline ───── */
.toolbar, .timeline{
  width:100%; padding:6px;
  display:flex; flex-wrap:wrap; gap:6px;
  align-items:center; justify-content:center;
  background:#333;
}
.btn{
  background:var(--btn); color:#fff; border:none;
  padding:5px 10px; border-radius:4px; cursor:pointer;
  font-size:13px; flex-shrink:0;
}
.btn:hover{background:var(--btn-h);}
.btn.toggle.active{background:var(--active);}
.btn.big{font-size:15px; padding:10px 20px;}

label{
  display:flex; flex-direction:column; gap:2px;
  font-size:12px; color:#ccc; align-items:center;
}

input[type="range"]{width:100px; height:16px; cursor:pointer;}
.speedControl input[type="range"]{width:120px;}

select,
input[type="text"],
input[type="password"],
input[type="color"]{
  padding:4px; border-radius:4px; border:none;
  background:#444; color:#fff; font-size:12px; width:120px;
}
input[type="color"]{padding:0; height:26px;}

canvas{
  width:100%; height:auto;
  border:1px solid #555; background:#111;
  cursor:crosshair; display:block; margin:8px 0;
}

/* ───── Miniaturas timeline ───── */
.frames{
  display:flex; gap:2px; overflow-x:auto;
  width:100%; padding:4px; background:#111;
  border:1px solid #444;
}
.frame-slot{
  flex:0 0 16px; height:16px;
  background:#222; border:1px solid #555;
  position:relative;
}
.frame-slot.sel{border-color:var(--active);}
.frame-slot img{width:100%; height:100%; object-fit:cover;}
.frame-slot::after{
  content:attr(data-idx);
  position:absolute; top:0; left:0;
  font-size:6px; color:#888;
}

/* ───── Modales ───── */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.6); display:none;
  align-items:center; justify-content:center;
  z-index:1000;
}
.modal.show{display:flex;}
.modal-content{
  background:#333; color:#eee;
  padding:18px 22px; border-radius:8px; text-align:center;
  min-width:260px; max-width:90%;
}

/* Diálogo texto y start */
.text-dialog label,
.start-dialog label{align-items:flex-start;}
.dialog-buttons{
  display:flex; justify-content:center; gap:10px; margin-top:14px;
}
.dialog-buttons .btn{padding:6px 18px; font-size:14px;}

.start-btns{
  display:flex; justify-content:center; gap:16px; margin:14px 0;
}

@media(max-width:768px){
  input[type="range"]{width:80px;}
  .speedControl input[type="range"]{width:100px;}
}